[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_153":154,"_155":156},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":49,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",4,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","6161ace8-2793-11f0-9d52-569c3dd06744","name","fileType","http","content","import { Hono } from \"https://deno.land/x/hono@v3.11.7/mod.ts\";\nimport \"jsr:@std/dotenv/load\"; // needed for deno run; not req for smallweb or valtown\n\n\nconst app = new Hono();\n\n\n\nimport { GoogleGenerativeAI } from \"npm:@google/generative-ai\";\nimport \"jsr:@std/dotenv/load\"; // needed for deno run; not req for smallweb or valtown\nimport { encode as base64Encode } from \"https://deno.land/std@0.177.0/encoding/base64.ts\";\n\n// Function to fetch and encode an external image\nasync function fetchAndEncodeImage(url) {\n try {\n const response = await fetch(url);\n if (!response.ok) {\n throw new Error(`Failed to fetch image: ${response.status} ${response.statusText}`);\n }\n const arrayBuffer = await response.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n return base64Encode(uint8Array);\n } catch (error) {\n console.error(\"Error fetching external image:\", error);\n throw error;\n }\n}\n\nexport const imageEditHandler = async (c) => {\n try {\n const formData = await c.req.formData();\n const imageFile = formData.get(\"image\");\n const userPrompt = formData.get(\"prompt\") || \"swap my face with the scientist\";\n\n if (!imageFile) {\n return c.json({ error: \"No image provided\" }, 400);\n }\n\n // Get API key from environment variable\n const apiKey = Deno.env.get(\"GOOGLE_API_KEY\");\n if (!apiKey) {\n return c.json({ error: \"API key not configured\" }, 500);\n }\n\n // Convert the uploaded file to base64\n const arrayBuffer = await imageFile.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n const userImageBase64 = base64Encode(uint8Array);\n\n // Fetch and encode the scientist image\n const scientistImageUrl = \"https://pbs.twimg.com/media/GdMjZhubYAAM1Yf?format=jpg&name=4096x4096\";\n const scientistImageBase64 = await fetchAndEncodeImage(scientistImageUrl);\n\n console.log(\"Processing images with Gemini 2.0 Flash Experimental...\");\n console.log(\"User image type:\", imageFile.type);\n\n // Initialize the Google Generative AI\n const genAI = new GoogleGenerativeAI(apiKey);\n\n // Use the Gemini 2.0 Flash Experimental model with image generation capability\n const model = genAI.getGenerativeModel({\n model: \"gemini-2.0-flash-exp-image-generation\",\n generationConfig: {\n temperature: 1,\n responseModalities: [\"Text\", \"Image\"]\n }\n });\n\n // Create a very specific prompt for face swapping\n const faceSwapPrompt = `\n I need to create a face swap where the user's face is placed onto the scientist's body.\n \n Image 1: The scientist in the lab photo (target body)\n Image 2: The user's face (source face)\n \n IMPORTANT INSTRUCTIONS:\n - REPLACE the scientist's face with the user's face EXACTLY as it appears in Image 2\n - DO NOT change the user's face or make up another face\n - KEEP the scientist's exact pose, lab coat, and entire lab setting unchanged\n - PLACE the user's head PRECISELY where the scientist's head is\n - Make sure the lighting on the face matches the lab environment lighting\n - Ensure the head is realistically connected to the neck area\n - The head must be correctly sized and proportioned to look natural on the body\n - The final result should look like the user is actually in the lab photo\n \n This is for ${userPrompt}\n `;\n\n try {\n console.log(\"Sending request to Gemini API...\");\n\n // First approach: Try with the scientist image first, then the user image\n const contents = [\n faceSwapPrompt,\n {\n inlineData: {\n data: scientistImageBase64,\n mimeType: \"image/jpeg\"\n }\n },\n {\n inlineData: {\n data: userImageBase64,\n mimeType: imageFile.type\n }\n }\n ];\n\n const result = await model.generateContent(contents);\n console.log(\"Response received from Gemini API\");\n\n const response = result.response;\n\n // Process the response\n if (response && response.candidates &&\n response.candidates[0] &&\n response.candidates[0].content &&\n response.candidates[0].content.parts) {\n\n const parts = response.candidates[0].content.parts;\n let textResponse = \"\";\n let imageData = null;\n\n // Extract text and image data from parts\n for (const part of parts) {\n if (part.text) {\n textResponse += part.text;\n } else if (part.inlineData && part.inlineData.data) {\n imageData = part.inlineData.data;\n }\n }\n\n // Return both text and image if available\n if (imageData) {\n return c.json({\n text: textResponse || \"Face swap completed successfully!\",\n images: [{ data: imageData }]\n });\n } else {\n throw new Error(\"No image was generated\");\n }\n } else {\n throw new Error(\"Invalid response structure\");\n }\n } catch (error) {\n console.error(\"Image processing error:\", error);\n\n // Fall back to text response\n try {\n const textModel = genAI.getGenerativeModel({\n model: \"gemini-pro-vision\",\n generationConfig: {\n temperature: 1\n }\n });\n\n const textContents = [\n \"I was trying to swap this person's face onto a scientist image but it failed. Can you describe what this person looks like?\",\n {\n inlineData: {\n data: userImageBase64,\n mimeType: imageFile.type\n }\n }\n ];\n\n const textResult = await textModel.generateContent(textContents);\n const textResponse = textResult.response.text();\n\n return c.json({\n text: \"I couldn't generate the face swap image. \" + textResponse,\n note: \"Please try again with a different image that has a clear face.\",\n images: []\n });\n } catch (textError) {\n console.error(\"Text fallback error:\", textError);\n return c.json({\n error: \"Failed to process image and generate face swap\"\n }, 500);\n }\n }\n } catch (error) {\n console.error(\"Image editing error:\", error);\n return c.json({\n error: error.message || \"Error processing image\"\n }, 500);\n }\n};\n\nexport const getTailwindConfig = () => ({\n theme: {\n extend: {\n colors: {\n 'background': '#F5F4F4',\n 'page-bg': '#F5F4F4',\n 'app-bg': '#FDFBF7',\n 'app-bg-alt': '#FFFFFF',\n 'app-accent': '#E2DFDF',\n 'primary': '#0E141B',\n 'accent': '#FDFAF4',\n 'secondary': '#D9D5D4',\n 'text': '#100C04',\n 'button': '#39516A',\n 'button-hover': '#0063CC',\n }\n }\n }\n});\n\nexport const getStyles = () => `\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n html {\n @apply bg-background;\n }\n .AppBody {\n @apply bg-page-bg text-text py-4;\n }\n .AppContainer {\n @apply container mx-auto;\n }\n .App {\n @apply max-w-2xl mx-2 md:mx-auto p-4 bg-app-bg border border-app-accent rounded-md shadow-sm;\n }\n .AppFooter {\n @apply mt-4 text-center text-sm;\n }\n .AppFooter a {\n @apply text-primary hover:text-button-hover underline;\n }\n h1 {\n @apply text-3xl font-semibold mb-4 text-primary;\n }\n textarea {\n @apply w-full mb-2 py-2 px-4 bg-app-bg-alt border border-app-accent rounded-md focus:outline-none focus:ring-1 focus:ring-secondary;\n }\n summary {\n @apply cursor-pointer hover:text-button-hover;\n }\n button {\n @apply bg-button text-white px-4 py-2 rounded hover:bg-button-hover transition-colors;\n }\n button.accordion {\n @apply bg-app-bg text-primary px-0 py-2 rounded-md transition-colors hover:text-button-hover;\n }\n .JsonOutput {\n @apply mt-4 relative;\n }\n .JsonOutput pre {\n @apply p-4 bg-app-bg-alt border border-app-accent rounded-md text-sm overflow-x-auto whitespace-pre-wrap;\n }\n .JsonOutput button {\n @apply absolute top-2 right-2 text-xs bg-button text-white px-2 py-1 rounded-md hover:bg-button-hover transition duration-300;\n }\n .TextOutput {\n @apply mt-4;\n }\n .TextOutput-content {\n @apply p-4 bg-app-bg-alt border border-primary rounded-md;\n }\n .TextOutput-header {\n @apply mb-2 text-xs text-gray-600 flex justify-between items-center;\n }\n .TextOutput button {\n @apply text-xs bg-button text-white px-2 py-1 rounded-md hover:bg-button-hover transition duration-300;\n }\n .history-item {\n @apply flex flex-row justify-between items-center p-2 bg-accent hover:bg-app-bg-alt border border-app-accent rounded-md cursor-pointer hover:bg-app-bg-alt transition-colors;\n }\n .delete-button {\n @apply self-end bg-button text-white px-2 py-1 rounded text-sm hover:bg-button-hover transition-colors;\n }\n`;\n\n\n// Alpine data and methods\nconst getAlpineModule = () => `\n document.addEventListener('alpine:init', () => {\n Alpine.data('imageEditorApp', () => ({\n // Image editing properties\n selectedImage: null,\n imagePreview: null,\n editedImage: null,\n textResponse: '',\n prompt: 'swap my face with the scientist',\n isProcessing: false,\n errorMessage: '',\n \n init() {\n // Auto-open first accordion and rotate its icon\n this.$nextTick(() => {\n this.toggleAccordion('accordion-1');\n });\n },\n\n handleImageSelect(event) {\n const file = event.target.files[0];\n if (!file) return;\n \n this.selectedImage = file;\n this.editedImage = null;\n this.textResponse = '';\n this.errorMessage = '';\n \n // Create preview\n const reader = new FileReader();\n reader.onload = (e) => {\n this.imagePreview = e.target.result;\n };\n reader.readAsDataURL(file);\n },\n \n async editImage() {\n if (!this.selectedImage) {\n this.errorMessage = 'Please select an image first';\n return;\n }\n \n this.isProcessing = true;\n this.errorMessage = '';\n this.editedImage = null;\n this.textResponse = '';\n \n try {\n const formData = new FormData();\n formData.append('image', this.selectedImage);\n formData.append('prompt', this.prompt);\n \n const response = await fetch('/edit-image', {\n method: 'POST',\n body: formData\n });\n \n const result = await response.json();\n \n if (result.error) {\n this.errorMessage = result.error;\n } else {\n // Handle text response\n if (result.text) {\n this.textResponse = result.text;\n }\n \n // Handle image response\n if (result.images && result.images.length > 0 && result.images[0].data) {\n this.editedImage = 'data:image/png;base64,' + result.images[0].data;\n }\n }\n } catch (error) {\n this.errorMessage = 'Error: ' + error.message;\n } finally {\n this.isProcessing = false;\n }\n },\n\n async copyToClipboard(text, button) {\n try {\n await navigator.clipboard.writeText(text);\n const originalText = button.textContent;\n button.textContent = 'Copied!';\n setTimeout(() => {\n button.textContent = originalText;\n }, 2000);\n } catch (err) {\n console.error('Failed to copy text: ', err);\n }\n },\n\n toggleAccordion(buttonId) {\n const content = document.getElementById('accordion-content-' + buttonId.split('-')[1]);\n const isOpen = content.classList.contains('grid-rows-[1fr]');\n \n content.classList.toggle('grid-rows-[0fr]', isOpen);\n content.classList.toggle('grid-rows-[1fr]', !isOpen);\n content.classList.toggle('opacity-0', isOpen);\n content.classList.toggle('opacity-100', !isOpen);\n\n // Toggle plus/minus icon\n const rects = document.getElementById(buttonId).querySelectorAll('rect');\n rects[1].classList.toggle('!rotate-180', !isOpen);\n }\n }));\n });\n`;\n\nconst getHtml = (moduleScript) => `\n\n\n\n \n \n \n We all Jiankui\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

You Jiankui, I Jiankui, We all Jiankui...

With the help of modern AI CRISPR technology, we can become the ultimate Jiankui. Upload your image and we all get to Jiankui!

\n\n

\n \n

\n \n \n Click to browse or drop image here\n \n

\n \n \n

Your Image

\n $\"Your$ \n

\n \n \n

\n \n

\n \n \n

\n If it doesn't look good, just re-CRISPR!\n

\n \n

\n $\"Edited$ \n

\n \n

\n\n \n\n\n`;\n\napp.get(\"/\", (c) => c.html(getHtml()));\napp.post(\"/edit-image\", imageEditHandler);\n\nexport default (typeof Deno !== \"undefined\" && Deno.env.get(\"valtown\")) ? app.fetch : app;\n\n\n\n\n\n\n","import { Hono } from \"https://deno.land/x/hono@v3.11.7/mod.ts\";\nimport \"jsr:@std/dotenv/load\"; // needed for deno run; not req for smallweb or valtown\n\n\nconst app = new Hono();\n\n\n\nimport { GoogleGenerativeAI } from \"npm:@google/generative-ai\";\nimport \"jsr:@std/dotenv/load\"; // needed for deno run; not req for smallweb or valtown\nimport { encode as base64Encode } from \"https://deno.land/std@0.177.0/encoding/base64.ts\";\n\n// Function to fetch and encode an external image\nasync function fetchAndEncodeImage(url) {\n try {\n const response = await fetch(url);\n if (!response.ok) {\n throw new Error(`Failed to fetch image: ${response.status} ${response.statusText}`);\n }\n const arrayBuffer = await response.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n return base64Encode(uint8Array);\n } catch (error) {\n console.error(\"Error fetching external image:\", error);\n throw error;\n }\n}\n\nexport const imageEditHandler = async (c) => {\n try {\n const formData = await c.req.formData();\n const imageFile = formData.get(\"image\");\n const userPrompt = formData.get(\"prompt\") || \"swap my face with the scientist\";\n\n if (!imageFile) {\n return c.json({ error: \"No image provided\" }, 400);\n }\n\n // Get API key from environment variable\n const apiKey = Deno.env.get(\"GOOGLE_API_KEY\");\n if (!apiKey) {\n return c.json({ error: \"API key not configured\" }, 500);\n }\n\n // Convert the uploaded file to base64\n const arrayBuffer = await imageFile.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n const userImageBase64 = base64Encode(uint8Array);\n\n // Fetch and encode the scientist image\n const scientistImageUrl = \"https://pbs.twimg.com/media/GdMjZhubYAAM1Yf?format=jpg&name=4096x4096\";\n const scientistImageBase64 = await fetchAndEncodeImage(scientistImageUrl);\n\n console.log(\"Processing images with Gemini 2.0 Flash Experimental...\");\n console.log(\"User image type:\", imageFile.type);\n\n // Initialize the Google Generative AI\n const genAI = new GoogleGenerativeAI(apiKey);\n\n // Use the Gemini 2.0 Flash Experimental model with image generation capability\n const model = genAI.getGenerativeModel({\n model: \"gemini-2.0-flash-exp-image-generation\",\n generationConfig: {\n temperature: 1,\n responseModalities: [\"Text\", \"Image\"]\n }\n });\n\n // Create a very specific prompt for face swapping\n const faceSwapPrompt = `\n I need to create a face swap where the user's face is placed onto the scientist's body.\n \n Image 1: The scientist in the lab photo (target body)\n Image 2: The user's face (source face)\n \n IMPORTANT INSTRUCTIONS:\n - REPLACE the scientist's face with the user's face EXACTLY as it appears in Image 2\n - DO NOT change the user's face or make up another face\n - KEEP the scientist's exact pose, lab coat, and entire lab setting unchanged\n - PLACE the user's head PRECISELY where the scientist's head is\n - Make sure the lighting on the face matches the lab environment lighting\n - Ensure the head is realistically connected to the neck area\n - The head must be correctly sized and proportioned to look natural on the body\n - The final result should look like the user is actually in the lab photo\n \n This is for ${userPrompt}\n `;\n\n try {\n console.log(\"Sending request to Gemini API...\");\n\n // First approach: Try with the scientist image first, then the user image\n const contents = [\n faceSwapPrompt,\n {\n inlineData: {\n data: scientistImageBase64,\n mimeType: \"image/jpeg\"\n }\n },\n {\n inlineData: {\n data: userImageBase64,\n mimeType: imageFile.type\n }\n }\n ];\n\n const result = await model.generateContent(contents);\n console.log(\"Response received from Gemini API\");\n\n const response = result.response;\n\n // Process the response\n if (response && response.candidates &&\n response.candidates[0] &&\n response.candidates[0].content &&\n response.candidates[0].content.parts) {\n\n const parts = response.candidates[0].content.parts;\n let textResponse = \"\";\n let imageData = null;\n\n // Extract text and image data from parts\n for (const part of parts) {\n if (part.text) {\n textResponse += part.text;\n } else if (part.inlineData && part.inlineData.data) {\n imageData = part.inlineData.data;\n }\n }\n\n // Return both text and image if available\n if (imageData) {\n return c.json({\n text: textResponse || \"Face swap completed successfully!\",\n images: [{ data: imageData }]\n });\n } else {\n throw new Error(\"No image was generated\");\n }\n } else {\n throw new Error(\"Invalid response structure\");\n }\n } catch (error) {\n console.error(\"Image processing error:\", error);\n\n // Fall back to text response\n try {\n const textModel = genAI.getGenerativeModel({\n model: \"gemini-pro-vision\",\n generationConfig: {\n temperature: 1\n }\n });\n\n const textContents = [\n \"I was trying to swap this person's face onto a scientist image but it failed. Can you describe what this person looks like?\",\n {\n inlineData: {\n data: userImageBase64,\n mimeType: imageFile.type\n }\n }\n ];\n\n const textResult = await textModel.generateContent(textContents);\n const textResponse = textResult.response.text();\n\n return c.json({\n text: \"I couldn't generate the face swap image. \" + textResponse,\n note: \"Please try again with a different image that has a clear face.\",\n images: []\n });\n } catch (textError) {\n console.error(\"Text fallback error:\", textError);\n return c.json({\n error: \"Failed to process image and generate face swap\"\n }, 500);\n }\n }\n } catch (error) {\n console.error(\"Image editing error:\", error);\n return c.json({\n error: error.message || \"Error processing image\"\n }, 500);\n }\n};\n\nexport const getTailwindConfig = () => ({\n theme: {\n extend: {\n colors: {\n 'background': '#F5F4F4',\n 'page-bg': '#F5F4F4',\n 'app-bg': '#FDFBF7',\n 'app-bg-alt': '#FFFFFF',\n 'app-accent': '#E2DFDF',\n 'primary': '#0E141B',\n 'accent': '#FDFAF4',\n 'secondary': '#D9D5D4',\n 'text': '#100C04',\n 'button': '#39516A',\n 'button-hover': '#0063CC',\n }\n }\n }\n});\n\nexport const getStyles = () => `\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n html {\n @apply bg-background;\n }\n .AppBody {\n @apply bg-page-bg text-text py-4;\n }\n .AppContainer {\n @apply container mx-auto;\n }\n .App {\n @apply max-w-2xl mx-2 md:mx-auto p-4 bg-app-bg border border-app-accent rounded-md shadow-sm;\n }\n .AppFooter {\n @apply mt-4 text-center text-sm;\n }\n .AppFooter a {\n @apply text-primary hover:text-button-hover underline;\n }\n h1 {\n @apply text-3xl font-semibold mb-4 text-primary;\n }\n textarea {\n @apply w-full mb-2 py-2 px-4 bg-app-bg-alt border border-app-accent rounded-md focus:outline-none focus:ring-1 focus:ring-secondary;\n }\n summary {\n @apply cursor-pointer hover:text-button-hover;\n }\n button {\n @apply bg-button text-white px-4 py-2 rounded hover:bg-button-hover transition-colors;\n }\n button.accordion {\n @apply bg-app-bg text-primary px-0 py-2 rounded-md transition-colors hover:text-button-hover;\n }\n .JsonOutput {\n @apply mt-4 relative;\n }\n .JsonOutput pre {\n @apply p-4 bg-app-bg-alt border border-app-accent rounded-md text-sm overflow-x-auto whitespace-pre-wrap;\n }\n .JsonOutput button {\n @apply absolute top-2 right-2 text-xs bg-button text-white px-2 py-1 rounded-md hover:bg-button-hover transition duration-300;\n }\n .TextOutput {\n @apply mt-4;\n }\n .TextOutput-content {\n @apply p-4 bg-app-bg-alt border border-primary rounded-md;\n }\n .TextOutput-header {\n @apply mb-2 text-xs text-gray-600 flex justify-between items-center;\n }\n .TextOutput button {\n @apply text-xs bg-button text-white px-2 py-1 rounded-md hover:bg-button-hover transition duration-300;\n }\n .history-item {\n @apply flex flex-row justify-between items-center p-2 bg-accent hover:bg-app-bg-alt border border-app-accent rounded-md cursor-pointer hover:bg-app-bg-alt transition-colors;\n }\n .delete-button {\n @apply self-end bg-button text-white px-2 py-1 rounded text-sm hover:bg-button-hover transition-colors;\n }\n`;\n\n\n// Alpine data and methods\nconst getAlpineModule = () => `\n document.addEventListener('alpine:init', () => {\n Alpine.data('imageEditorApp', () => ({\n // Image editing properties\n selectedImage: null,\n imagePreview: null,\n editedImage: null,\n textResponse: '',\n prompt: 'swap my face with the scientist',\n isProcessing: false,\n errorMessage: '',\n \n init() {\n // Auto-open first accordion and rotate its icon\n this.$nextTick(() => {\n this.toggleAccordion('accordion-1');\n });\n },\n\n handleImageSelect(event) {\n const file = event.target.files[0];\n if (!file) return;\n \n this.selectedImage = file;\n this.editedImage = null;\n this.textResponse = '';\n this.errorMessage = '';\n \n // Create preview\n const reader = new FileReader();\n reader.onload = (e) => {\n this.imagePreview = e.target.result;\n };\n reader.readAsDataURL(file);\n },\n \n async editImage() {\n if (!this.selectedImage) {\n this.errorMessage = 'Please select an image first';\n return;\n }\n \n this.isProcessing = true;\n this.errorMessage = '';\n this.editedImage = null;\n this.textResponse = '';\n \n try {\n const formData = new FormData();\n formData.append('image', this.selectedImage);\n formData.append('prompt', this.prompt);\n \n const response = await fetch('/edit-image', {\n method: 'POST',\n body: formData\n });\n \n const result = await response.json();\n \n if (result.error) {\n this.errorMessage = result.error;\n } else {\n // Handle text response\n if (result.text) {\n this.textResponse = result.text;\n }\n \n // Handle image response\n if (result.images && result.images.length > 0 && result.images[0].data) {\n this.editedImage = 'data:image/png;base64,' + result.images[0].data;\n }\n }\n } catch (error) {\n this.errorMessage = 'Error: ' + error.message;\n } finally {\n this.isProcessing = false;\n }\n },\n\n async copyToClipboard(text, button) {\n try {\n await navigator.clipboard.writeText(text);\n const originalText = button.textContent;\n button.textContent = 'Copied!';\n setTimeout(() => {\n button.textContent = originalText;\n }, 2000);\n } catch (err) {\n console.error('Failed to copy text: ', err);\n }\n },\n\n toggleAccordion(buttonId) {\n const content = document.getElementById('accordion-content-' + buttonId.split('-')[1]);\n const isOpen = content.classList.contains('grid-rows-[1fr]');\n \n content.classList.toggle('grid-rows-[0fr]', isOpen);\n content.classList.toggle('grid-rows-[1fr]', !isOpen);\n content.classList.toggle('opacity-0', isOpen);\n content.classList.toggle('opacity-100', !isOpen);\n\n // Toggle plus/minus icon\n const rects = document.getElementById(buttonId).querySelectorAll('rect');\n rects[1].classList.toggle('!rotate-180', !isOpen);\n }\n }));\n });\n`;\n\nconst getHtml = (moduleScript) => `\n\n\n\n \n \n \n We all Jiankui\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

You Jiankui, I Jiankui

Ever want to be a scientist? With the help of CRISPR and modern AI, you too can become a powerful CRISPR scientist!

\n\n

\n \n

\n \n \n Click to browse or drop image here\n \n

\n \n \n

Your Image

\n $\"Your$ \n

\n \n \n

\n \n

\n \n \n

\n If it doesn't look good, just re-CRISPR!\n

\n \n

\n $\"Edited$ \n

\n \n

\n\n \n\n\n`;\n\napp.get(\"/\", (c) => c.html(getHtml()));\napp.post(\"/edit-image\", imageEditHandler);\n\nexport default (typeof Deno !== \"undefined\" && Deno.env.get(\"valtown\")) ? app.fetch : app;\n\n\n\n\n\n\n","createdAt",["D",1742195903203],"branchVersion","branchId","615e6b00-2793-11f0-9d52-569c3dd06744","id","615e27b2-2793-11f0-9d52-569c3dd06744","wecrispr",["D",1746217439570],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","a8270e74-6479-475a-8025-9b69544ee0e7","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","8319defa-6e1a-46d4-ba66-2114ffd3360b","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",8,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","yawnxyz","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2NnaHhpxNuH1xWRIRjQNoo16TVc.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":149,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":150,"_79":151,"_81":152,"_83":25},"tree",[144],"files",[144],"counts",{"_133":61,"_134":135,"_136":61,"_137":138,"_139":140},"contents",[125],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":129,"_13":130,"_33":34,"_35":37,"_24":25,"_131":-5,"_27":132},"6173c306-2793-11f0-9d52-569c3dd06744","parentId","latest",["D",1742195903203],3,"label",[28],"pulls","branches",1,"forks","envVars",{"_141":61,"_143":61},"connections",{"_141":61,"_142":61},"count","unfilledCount","emptyCount",{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":145,"_13":130,"_33":34,"_35":37,"_24":25,"_131":-5,"_146":147,"_27":148},["D",1742195903203],"children",[],[28],["D",1746217439570],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_122":186,"_187":188,"_189":190,"_191":25,"_192":25,"_193":25,"_194":49,"_195":-5,"_196":-7,"_197":-7,"_198":61,"_199":25,"_200":25,"_201":-5,"_202":25,"_203":25,"_204":25,"_205":-5},"ENV",{"_157":158,"_159":160,"_161":85,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v4