[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_257":258,"_259":260},"routes/_app.x.$handle.$name",{"_108":107,"_38":52,"_116":94,"_33":110,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_26":-5,"_127":128,"_129":130,"_131":31,"_132":133,"_134":66,"_135":-5,"_136":-5,"_137":138},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_50":51,"_38":52,"_45":53,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":31},"version",9,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","6a05c334-572f-4abc-bbae-42fe5fd41f90","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":44,"_45":46,"_47":14,"_48":49,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","019f3618-c439-74eb-94fd-98dbd299e362","name","App.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useCallback, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { ImageUploader } from \"./ImageUploader.tsx\";\nimport { ResultViewer } from \"./ResultViewer.tsx\";\n\nconst EXAMPLE_PROMPTS = [\n \"Làm bầu trời xanh hơn và mây trắng hơn\",\n \"Chuyển sang phong cách hoàng hôn ấm áp\",\n \"Thêm hiệu ứng đen trắng cổ điển\",\n \"Làm nét và tăng độ sáng ảnh\",\n \"Thay đổi nền thành bãi biển nhiệt đới\",\n \"Thêm hoa nở quanh người trong ảnh\",\n];\n\ninterface UploadData {\n base64: string;\n mimeType: string;\n previewUrl: string;\n}\n\nexport function App() {\n const [uploadData, setUploadData] = useState(null);\n const [prompt, setPrompt] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [resultImage, setResultImage] = useState(null);\n const [aiText, setAiText] = useState(null);\n const [error, setError] = useState(null);\n const resultRef = useRef(null);\n\n const handleUpload = useCallback((data: {\n base64: string;\n mimeType: string;\n previewUrl: string;\n }) => {\n setUploadData(data);\n setResultImage(null);\n setAiText(null);\n setError(null);\n }, []);\n\n const handleEdit = useCallback(async () => {\n if (!uploadData || !prompt.trim()) return;\n setLoading(true);\n setError(null);\n setResultImage(null);\n setAiText(null);\n\n try {\n const response = await fetch(\"/api/edit\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n base64: uploadData.base64,\n mimeType: uploadData.mimeType,\n prompt,\n }),\n });\n\n const data = await response.json();\n if (data.error) throw new Error(data.error);\n\n setResultImage(data.resultImage);\n if (data.aiText) setAiText(data.aiText);\n } catch (err) {\n setError(err instanceof Error ? err.message : String(err));\n } finally {\n setLoading(false);\n }\n }, [uploadData, prompt]);\n\n const handleReset = useCallback(() => {\n setUploadData(null);\n setPrompt(\"\");\n setResultImage(null);\n setAiText(null);\n setError(null);\n }, []);\n\n const handleExampleClick = useCallback((example: string) => {\n setPrompt(example);\n }, []);\n\n return (\n

\n {/* Header */}\n

🎨

\n AI Photo Editor\n

Chỉnh sửa ảnh bằng AI — gpt-4o & gpt-image-2

\n \n View source\n \n

\n\n

\n {/* Info banner */}\n

\n 💡\n \n Tải ảnh lên, mô tả chỉnh sửa bạn muốn bằng văn bản — AI sẽ hiểu\n yêu cầu và chỉnh sửa ảnh trực tiếp.\n \n

\n\n

\n {/* Left: Upload + Prompt */}\n

\n \n\n {uploadData && (\n

\n {/* Prompt input */}\n

\n \n Mô tả chỉnh sửa bạn muốn\n \n setPrompt(e.currentTarget.value)}\n placeholder=\"VD: Làm bầu trời xanh hơn, xóa người trong nền, thêm hiệu ứng cổ điển...\"\n rows={3}\n class=\"w-full rounded-lg bg-gray-800 border border-gray-700 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 resize-none\"\n />\n\n {/* Example prompts */}\n

\n {EXAMPLE_PROMPTS.map((ex) => (\n handleExampleClick(ex)}\n class=\"text-xs px-3 py-1.5 rounded-full bg-gray-800 hover:bg-purple-900/50 border border-gray-700 hover:border-purple-700 text-gray-400 hover:text-purple-300 transition-all cursor-pointer\"\n >\n {ex}\n \n ))}\n

\n\n {/* Action buttons */}\n

\n \n {loading ? (\n <>\n \n Đang chỉnh sửa...\n \n ) : (\n <>\n ✨\n Chỉnh sửa ảnh\n \n )}\n \n \n Xóa\n \n

\n )}\n\n {error && (\n

\n ⚠️\n {error}\n

\n )}\n

\n\n {/* Right: Result */}\n

\n \n

\n\n \n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useCallback, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { ImageUploader } from \"./ImageUploader.tsx\";\nimport { ResultViewer } from \"./ResultViewer.tsx\";\n\nconst EXAMPLE_PROMPTS = [\n \"Làm bầu trời xanh hơn và mây trắng hơn\",\n \"Chuyển sang phong cách hoàng hôn ấm áp\",\n \"Thêm hiệu ứng đen trắng cổ điển\",\n \"Làm nét và tăng độ sáng ảnh\",\n \"Thay đổi nền thành bãi biển nhiệt đới\",\n \"Thêm hoa nở quanh người trong ảnh\",\n];\n\ninterface UploadData {\n base64: string;\n mimeType: string;\n previewUrl: string;\n}\n\nexport function App() {\n const [uploadData, setUploadData] = useState(null);\n const [prompt, setPrompt] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [resultImage, setResultImage] = useState(null);\n const [aiText, setAiText] = useState(null);\n const [error, setError] = useState(null);\n const resultRef = useRef(null);\n\n const handleUpload = useCallback((data: {\n base64: string;\n mimeType: string;\n previewUrl: string;\n }) => {\n setUploadData(data);\n setResultImage(null);\n setAiText(null);\n setError(null);\n }, []);\n\n const handleEdit = useCallback(async () => {\n if (!uploadData || !prompt.trim()) return;\n setLoading(true);\n setError(null);\n setResultImage(null);\n setAiText(null);\n\n try {\n const response = await fetch(\"/api/edit\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n base64: uploadData.base64,\n mimeType: uploadData.mimeType,\n prompt,\n }),\n });\n\n const data = await response.json();\n if (data.error) throw new Error(data.error);\n\n setResultImage(data.resultImage);\n if (data.aiText) setAiText(data.aiText);\n } catch (err) {\n setError(err instanceof Error ? err.message : String(err));\n } finally {\n setLoading(false);\n }\n }, [uploadData, prompt]);\n\n const handleReset = useCallback(() => {\n setUploadData(null);\n setPrompt(\"\");\n setResultImage(null);\n setAiText(null);\n setError(null);\n }, []);\n\n const handleExampleClick = useCallback((example: string) => {\n setPrompt(example);\n }, []);\n\n return (\n

\n {/* Header */}\n

🎨

\n AI Photo Editor\n

Chỉnh sửa ảnh bằng AI — Gemini 3 Pro & Gemini 3.1 Flash Image

\n \n View source\n \n

\n\n

\n {/* Info banner */}\n

\n 💡\n \n Tải ảnh lên, mô tả chỉnh sửa bạn muốn bằng văn bản — AI sẽ hiểu\n yêu cầu và chỉnh sửa ảnh trực tiếp.\n \n

\n\n

\n {/* Left: Upload + Prompt */}\n

\n \n\n {uploadData && (\n

\n {/* Prompt input */}\n

\n\n {/* Action buttons */}\n

\n \n {loading ? (\n <>\n \n Đang chỉnh sửa...\n \n ) : (\n <>\n ✨\n Chỉnh sửa ảnh\n \n )}\n \n \n Xóa\n \n

\n )}\n\n {error && (\n

\n ⚠️\n {error}\n

\n )}\n

\n\n {/* Right: Result */}\n

\n \n

\n\n \n

\n );\n}\n","createdAt",["D",1783319087428],"branchVersion","branchId","ba494eb0-cbff-4744-bd41-6e89889d75df","id","e9436c94-4ad7-431a-8a0d-b701a509bfab","ai-photo-editor",["D",1783319020501],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","AI photo editor with Gemini multimodal AI","imageUrl","dadaece2-3faa-48c5-8ad2-06f26909b04d","pinnedFileId","019f3618-c439-74eb-94fd-bf9010d5e3f3","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f3608-7884-705b-ac18-c6e7d85b069c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_108":107,"_115":110},"org",{"_108":107,"_109":110,"_111":110,"_19":62,"_112":113,"_114":31},"branch",{"_13":93,"_38":94,"_50":49,"_95":51,"_96":97,"_98":99,"_100":57,"_101":102,"_103":104,"_105":52,"_106":107},"isOwned",10,"main","projectId","forkedBranchId","04d39c1f-c17d-41cb-9749-bc593768f511","forkedBranchVersion",8,"forkedProjectPrivacy","forkedProjectId","ce3e6435-81a8-4fb5-874d-fa5928855dd1","forkedProjectOrgId","019f3589-3751-755e-9b05-0e35ac6cf1b7","projectName","userHandle","qecuta3328","handle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_50":51,"_38":52,"_45":253,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":254,"_88":255,"_90":256,"_92":31},"tree",[192,199,200,201],"files",[192,193,194,195,196,197,198,199,200,201],"counts",{"_180":70,"_181":165,"_182":165,"_183":184,"_185":186},"contents",[148,149,150,151],"upstreamProject",{"_50":102,"_38":52,"_59":60,"_61":-5,"_56":57,"_86":147},"upstreamBranch",{"_50":97,"_45":139,"_140":141,"_38":94,"_95":102,"_13":99,"_96":142,"_98":143,"_144":145,"_54":-5,"_92":31,"_56":57,"_106":146,"_71":104,"_105":52},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1783309665038],"updatedAt",["D",1783310775049],"3a9de1f8-5db6-45d9-b46e-0e2ba134c192",23,"lockfileKey","1783310775134-esm.town_v_jymyra1007_ai-photo-editor@8-main","jymyra1007",{"_108":146,"_115":110},{"_50":175,"_38":176,"_36":177,"_154":-5,"_48":49,"_47":165,"_155":66,"_45":178,"_13":70,"_40":173,"_42":-5,"_30":31,"_160":-5,"_33":179},{"_50":169,"_38":170,"_36":171,"_154":-5,"_48":49,"_47":165,"_155":66,"_45":172,"_13":70,"_40":173,"_42":-5,"_30":31,"_160":-5,"_33":174},{"_50":162,"_38":163,"_36":164,"_154":-5,"_48":49,"_47":165,"_155":66,"_45":166,"_13":70,"_40":26,"_42":167,"_30":31,"_160":-5,"_33":168},{"_50":152,"_38":153,"_36":64,"_154":-5,"_48":49,"_47":99,"_155":66,"_45":156,"_13":157,"_40":158,"_42":159,"_30":31,"_160":-5,"_33":161},"46a32eae-7f23-4ee4-8344-4cc6a3e972c9","index.ts","parentId","latest",["D",1783319062590],7,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\nconst API_BASE = \"https://totu-ai.com\";\n\n// Serve frontend\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Extract image URL from markdown or plain text\nfunction extractImageUrl(text: string): string | null {\n // Markdown image: ![alt](url)\n const mdMatch = text.match(/!\\[.*?\\]\$(https?:\\/\\/[^\\s)]+)\$/);\n if (mdMatch) return mdMatch[1];\n // Plain URL\n const urlMatch = text.match(/(https?:\\/\\/[^\\s\"'<>]+\\.(?:png|jpg|jpeg|webp|gif))/i);\n if (urlMatch) return urlMatch[1];\n // Any URL\n const anyUrl = text.match(/(https?:\\/\\/[^\\s\"'<>]+)/);\n if (anyUrl) return anyUrl[1];\n return null;\n}\n\n// API: Edit image using totu-ai.com (gemini-3-pro-preview-thinking + gemini-3.1-flash-image-preview-vip)\napp.post(\"/api/edit\", async (c) => {\n const apiKey = Deno.env.get(\"TOTU_API_KEY\");\n if (!apiKey) {\n return c.json({ error: \"TOTU_API_KEY chưa được cấu hình\" }, 500);\n }\n\n const body = await c.req.json();\n const { base64, mimeType, prompt } = body;\n\n if (!base64 || !prompt) {\n return c.json({ error: \"Thiếu ảnh hoặc prompt\" }, 400);\n }\n\n const dataUrl = `data:${mimeType};base64,${base64}`;\n\n try {\n // 1. gemini-3-pro-preview-thinking: Analyze image + prompt → generate enhanced editing instruction\n const chatResponse = await fetch(\n `${API_BASE}/v1/chat/completions`,\n {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${apiKey}`,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n model: \"gemini-3-pro-preview-thinking\",\n messages: [\n {\n role: \"system\",\n content:\n \"You are an AI photo editing assistant. The user wants to edit their photo. Analyze the image and the user's request, then generate a detailed, specific editing instruction that can be used with an AI image editing model. Respond in the same language as the user's request. Keep it concise but detailed.\",\n },\n {\n role: \"user\",\n content: [\n {\n type: \"text\",\n text: `User request: ${prompt}\\n\\nGenerate a detailed editing instruction for this image:`,\n },\n {\n type: \"image_url\",\n image_url: { url: dataUrl },\n },\n ],\n },\n ],\n max_tokens: 300,\n }),\n },\n );\n\n let enhancedPrompt = prompt;\n let aiText: string | null = null;\n\n if (chatResponse.ok) {\n const chatData = await chatResponse.json();\n enhancedPrompt = chatData.choices?.[0]?.message?.content || prompt;\n aiText = enhancedPrompt;\n }\n\n // 2. gemini-3.1-flash-image-preview-vip: Edit the image using the enhanced prompt\n const imageResponse = await fetch(\n `${API_BASE}/v1/chat/completions`,\n {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${apiKey}`,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n model: \"gemini-3.1-flash-image-preview-vip\",\n messages: [\n {\n role: \"user\",\n content: [\n {\n type: \"text\",\n text: enhancedPrompt,\n },\n {\n type: \"image_url\",\n image_url: { url: dataUrl },\n },\n ],\n },\n ],\n }),\n },\n );\n\n if (!imageResponse.ok) {\n const errText = await imageResponse.text();\n let errMsg = `HTTP ${imageResponse.status}`;\n try {\n const errData = JSON.parse(errText);\n errMsg = errData.error?.message || errMsg;\n } catch {\n errMsg = errText.slice(0, 200) || errMsg;\n }\n throw new Error(`gemini-3.1-flash-image-preview-vip: ${errMsg}`);\n }\n\n const imageData = await imageResponse.json();\n const message = imageData.choices?.[0]?.message;\n const content = message?.content || \"\";\n\n let resultImage: string | null = null;\n\n // Case 1: Response contains b64_json directly (images API format)\n if (imageData.data?.[0]?.b64_json) {\n resultImage = `data:image/png;base64,${imageData.data[0].b64_json}`;\n }\n // Case 2: Response contains a URL (images API format)\n else if (imageData.data?.[0]?.url) {\n const imgRes = await fetch(imageData.data[0].url);\n const imgBlob = await imgRes.blob();\n const arrayBuffer = await imgBlob.arrayBuffer();\n const bytes = new Uint8Array(arrayBuffer);\n let b64 = \"\";\n for (let i = 0; i < bytes.length; i++) {\n b64 += String.fromCharCode(bytes[i]);\n }\n resultImage = `data:image/png;base64,${btoa(b64)}`;\n }\n // Case 3: Content contains a data URL (base64 inline)\n else if (content.includes(\"data:image/\")) {\n const dataMatch = content.match(/data:image\\/[^;]+;base64,[A-Za-z0-9+/=]+/);\n if (dataMatch) resultImage = dataMatch[0];\n }\n // Case 4: Content contains an image URL (markdown or plain)\n else {\n const imageUrl = extractImageUrl(content);\n if (imageUrl) {\n const imgRes = await fetch(imageUrl);\n const imgBlob = await imgRes.blob();\n const arrayBuffer = await imgBlob.arrayBuffer();\n const bytes = new Uint8Array(arrayBuffer);\n let b64 = \"\";\n for (let i = 0; i < bytes.length; i++) {\n b64 += String.fromCharCode(bytes[i]);\n }\n resultImage = `data:image/png;base64,${btoa(b64)}`;\n }\n }\n\n if (!resultImage) {\n // Fallback: return the raw content so user can see what happened\n throw new Error(\n `Không nhận được ảnh từ gemini-3.1-flash-image-preview-vip. Response: ${content.slice(0, 300)}`,\n );\n }\n\n return c.json({ resultImage, aiText });\n } catch (err) {\n return c.json({\n error: err instanceof Error ? err.message : String(err),\n }, 500);\n }\n});\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label",[153],"ff4f29e1-9cdf-411b-b85c-4a7c64212c20","README.md","019f3618-c439-74eb-94fd-bb28fdf59264",1,["D",1783319020501],"# AI Photo Editor\n\nỨng dụng chỉnh sửa ảnh bằng AI sử dụng **InstructPix2Pix** trên **Hugging Face** — mô hình AI mã nguồn mở chuyên chỉnh sửa ảnh theo lệnh văn bản.\n\n## Cách hoạt động\n\n1. **InstructPix2Pix**: Mô hình AI hiểu lệnh chỉnh sửa bằng văn bản và thao tác trực tiếp lên ảnh\n2. **Client-side API**: Trình duyệt gọi thẳng Hugging Face API (server Val Town không kết nối được tới HF, nên API key được cung cấp qua `/api/config`)\n\n## Tính năng\n\n- 📤 Tải ảnh lên (kéo thả hoặc chọn file)\n- ✍️ Nhập lệnh chỉnh sửa bằng văn bản\n- 🎨 AI hiểu và chỉnh sửa ảnh theo yêu cầu\n- 🔄 Slider so sánh trước/sau\n- ⬇️ Tải ảnh kết quả\n\n## Cấu hình\n\n### Biến môi trường\n\n| Key | Mô tả |\n| --- | --- |\n| `HF_API_KEY` | Hugging Face API token |\n\n👉 Add HF_API_KEY here: https://www.val.town/x/redagu2097/ai-photo-editor/environment-variables?key=HF_API_KEY\n\nLấy token miễn phí tại: https://huggingface.co/settings/tokens\n\n## Cấu trúc\n\n```\nindex.ts # HTTP handler (Hono) + /api/config\nfrontend/\n index.html # HTML shell (Twind)\n index.tsx # React entry point\n components/\n App.tsx # Main app + HF API call (client-side)\n ImageUploader.tsx # Drag & drop image upload + resize\n ResultViewer.tsx # Before/after comparison slider\n```\n",[163],"191f64cb-d9ca-4a95-9e4e-41e8cf84de18","lib","019f3618-c439-74eb-94fd-b41c3318df7f",["D",1783319020501],"directory",[170],"96d719a1-3bb2-461f-b57f-baf8240d211a","frontend","019f3618-c439-74eb-94fd-b3a6865cf8d4",["D",1783319020501],[176],"pulls","branches","forks","envVars",{"_187":189,"_190":191},"connections",{"_187":70,"_188":70},"count","unfilledCount",4,"emptyCount",3,{"_50":175,"_38":176,"_36":177,"_154":-5,"_48":49,"_47":165,"_155":66,"_45":250,"_13":70,"_40":173,"_42":-5,"_30":31,"_160":-5,"_203":251,"_33":252},{"_50":246,"_38":234,"_36":229,"_154":177,"_48":49,"_47":165,"_155":66,"_45":247,"_13":70,"_40":173,"_42":-5,"_30":31,"_160":-5,"_203":248,"_33":249},{"_50":242,"_38":39,"_36":37,"_154":229,"_48":49,"_47":14,"_155":31,"_45":243,"_13":165,"_40":41,"_42":44,"_30":31,"_160":-5,"_203":244,"_33":245},{"_50":235,"_38":236,"_36":237,"_154":229,"_48":49,"_47":165,"_155":66,"_45":238,"_13":70,"_40":41,"_42":239,"_30":31,"_160":-5,"_203":240,"_33":241},{"_50":226,"_38":227,"_36":228,"_154":229,"_48":49,"_47":165,"_155":66,"_45":230,"_13":70,"_40":41,"_42":231,"_30":31,"_160":-5,"_203":232,"_33":233},{"_50":219,"_38":220,"_36":221,"_154":177,"_48":49,"_47":165,"_155":66,"_45":222,"_13":70,"_40":26,"_42":223,"_30":31,"_160":-5,"_203":224,"_33":225},{"_50":212,"_38":213,"_36":214,"_154":177,"_48":49,"_47":165,"_155":66,"_45":215,"_13":70,"_40":41,"_42":216,"_30":31,"_160":-5,"_203":217,"_33":218},{"_50":169,"_38":170,"_36":171,"_154":-5,"_48":49,"_47":165,"_155":66,"_45":209,"_13":70,"_40":173,"_42":-5,"_30":31,"_160":-5,"_203":210,"_33":211},{"_50":162,"_38":163,"_36":164,"_154":-5,"_48":49,"_47":165,"_155":66,"_45":206,"_13":70,"_40":26,"_42":167,"_30":31,"_160":-5,"_203":207,"_33":208},{"_50":152,"_38":153,"_36":64,"_154":-5,"_48":49,"_47":99,"_155":66,"_45":202,"_13":157,"_40":158,"_42":159,"_30":31,"_160":-5,"_203":204,"_33":205},["D",1783319062590],"children",[],[153],["D",1783319020501],[],[163],["D",1783319020501],[],[170],"0a48f7bf-47fb-4941-b2fe-2a1f87ff03cb","index.tsx","019f3618-c439-74eb-94fd-adf4ea08430b",["D",1783319020501],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\ncreateRoot(root).render();\n",[],[176,213],"86b31ebc-eadf-47fc-8e87-de235ce46925","index.html","019f3618-c439-74eb-94fd-ab783c331ea2",["D",1783319020501],"\n\n \n \n \n AI Photo Editor — Chỉnh sửa ảnh bằng AI\n \n \n \n

\n \n \n \n\n",[],[176,220],"5b90e1dc-f063-4715-9c7d-d2392e95a992","ResultViewer.tsx","019f3618-c439-74eb-94fd-a2053193ce03","019f3618-c439-74eb-94fd-a7fd8e0b89e3",["D",1783319020501],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\n\ninterface ResultViewerProps {\n originalImage: string | null;\n resultImage: string | null;\n aiText: string | null;\n loading: boolean;\n}\n\nexport function ResultViewer({\n originalImage,\n resultImage,\n aiText,\n loading,\n}: ResultViewerProps) {\n const [sliderPos, setSliderPos] = useState(50);\n const containerRef = useRef(null);\n const dragging = useRef(false);\n\n const updateSlider = useCallback((clientX: number) => {\n const container = containerRef.current;\n if (!container) return;\n const rect = container.getBoundingClientRect();\n const pct = ((clientX - rect.left) / rect.width) * 100;\n setSliderPos(Math.max(0, Math.min(100, pct)));\n }, []);\n\n // Empty state\n if (!originalImage && !loading) {\n return (\n

🖼️

\n Kết quả chỉnh sửa sẽ hiển thị ở đây\n

\n );\n }\n\n // Loading state\n if (loading) {\n return (\n

\n OpenAI đang chỉnh sửa ảnh...\n

\n Quá trình này có thể mất vài giây\n

\n );\n }\n\n // Result with comparison slider\n if (resultImage && originalImage) {\n return (\n

\n {\n dragging.current = true;\n updateSlider(e.clientX);\n }}\n onMouseMove={(e) => {\n if (dragging.current) updateSlider(e.clientX);\n }}\n onMouseUp={() => dragging.current = false}\n onMouseLeave={() => dragging.current = false}\n onTouchStart={(e) => updateSlider(e.touches[0].clientX)}\n onTouchMove={(e) => updateSlider(e.touches[0].clientX)}\n >\n {/* Result image (full width, bottom layer) */}\n \n\n {/* Original image (clipped to slider position via clip-path) */}\n \n \n

\n\n {/* Slider handle */}\n \n

\n ⟺\n

\n\n {/* Labels */}\n

\n Ảnh gốc\n

\n Ảnh đã chỉnh sửa\n

\n\n {/* AI description */}\n {aiText && (\n

\n 💬\n {aiText}\n

\n )}\n\n {/* Download button */}\n \n ⬇️ Tải ảnh đã chỉnh sửa\n \n \n );\n }\n\n // Has original but no result yet\n return (\n

✨

\n Nhập lệnh chỉnh sửa và nhấn \"Chỉnh sửa ảnh\"\n

\n );\n}\n",[],[176,234,227],"components","ca28d8de-4d56-4cfe-9771-9bfe3771c6ca","ImageUploader.tsx","019f3618-c439-74eb-94fd-9cf5f5199bc1",["D",1783319020501],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useCallback, useRef } from \"https://esm.sh/react@18.2.0\";\n\ninterface ImageUploaderProps {\n onUpload: (data: {\n base64: string;\n mimeType: string;\n previewUrl: string;\n }) => void;\n}\n\n// Resize image on client side to keep payload manageable\n// OpenAI API has input size limits; we cap at ~1024px longest edge\nasync function resizeImage(\n file: File,\n maxDim: number = 1024,\n): Promise<{ base64: string; mimeType: string; previewUrl: string }> {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => {\n const img = new Image();\n img.onload = () => {\n let { width, height } = img;\n\n // Scale down if needed\n if (width > maxDim || height > maxDim) {\n if (width >= height) {\n height = Math.round((height / width) * maxDim);\n width = maxDim;\n } else {\n width = Math.round((width / height) * maxDim);\n height = maxDim;\n }\n }\n\n const canvas = document.createElement(\"canvas\");\n canvas.width = width;\n canvas.height = height;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) {\n reject(new Error(\"Không thể tạo canvas context\"));\n return;\n }\n ctx.drawImage(img, 0, 0, width, height);\n\n // Use PNG for transparency support, JPEG for photos\n const mimeType = file.type === \"image/png\" ? \"image/png\" : \"image/jpeg\";\n const dataUrl = canvas.toDataURL(mimeType, 0.92);\n const base64 = dataUrl.split(\",\")[1];\n\n resolve({\n base64,\n mimeType,\n previewUrl: dataUrl,\n });\n };\n img.onerror = () => reject(new Error(\"Không thể tải ảnh\"));\n img.src = reader.result as string;\n };\n reader.onerror = () => reject(new Error(\"Không thể đọc file\"));\n reader.readAsDataURL(file);\n });\n}\n\nexport function ImageUploader({ onUpload }: ImageUploaderProps) {\n const [dragging, setDragging] = useState(false);\n const [preview, setPreview] = useState(null);\n const [processing, setProcessing] = useState(false);\n const inputRef = useRef(null);\n\n const handleFile = useCallback(\n async (file: File) => {\n if (!file.type.startsWith(\"image/\")) {\n alert(\"Vui lòng chọn file ảnh\");\n return;\n }\n\n setProcessing(true);\n try {\n const result = await resizeImage(file);\n setPreview(result.previewUrl);\n onUpload(result);\n } catch (err) {\n alert(err instanceof Error ? err.message : \"Lỗi xử lý ảnh\");\n } finally {\n setProcessing(false);\n }\n },\n [onUpload],\n );\n\n const handleDrop = useCallback(\n (e: React.DragEvent) => {\n e.preventDefault();\n setDragging(false);\n const file = e.dataTransfer.files[0];\n if (file) handleFile(file);\n },\n [handleFile],\n );\n\n const handleChange = useCallback(\n (e: React.ChangeEvent) => {\n const file = e.target.files?.[0];\n if (file) handleFile(file);\n },\n [handleFile],\n );\n\n if (preview) {\n return (\n

\n \n {\n setPreview(null);\n inputRef.current?.click();\n }}\n class=\"absolute top-2 right-2 px-3 py-1.5 rounded-lg bg-gray-900/90 hover:bg-gray-800 text-sm text-gray-300 border border-gray-700 transition-all cursor-pointer opacity-0 group-hover:opacity-100\"\n >\n 🔄 Đổi ảnh\n \n

\n Ảnh đã tải lên — sẵn sàng chỉnh sửa\n

\n );\n }\n\n return (\n {\n e.preventDefault();\n setDragging(true);\n }}\n onDragLeave={() => setDragging(false)}\n onDrop={handleDrop}\n onClick={() => inputRef.current?.click()}\n class={`rounded-xl border-2 border-dashed p-12 text-center cursor-pointer transition-all ${\n dragging\n ? \"border-purple-500 bg-purple-950/20\"\n : \"border-gray-700 bg-gray-900/40 hover:border-gray-600 hover:bg-gray-900/60\"\n }`}\n >\n {processing ? (\n

\n \n

Đang xử lý ảnh...

\n ) : (\n

📸

\n Kéo thả ảnh vào đây\n

\n hoặc chọn file từ\n thiết bị\n

\n Hỗ trợ JPG, PNG — tối đa 1024px\n

\n )}\n \n \n );\n}\n",[],[176,234,236],"525e5918-663b-428e-908f-ba3f7b1403ab",["D",1783319087428],[],[176,234,39],"1ceeb704-9d57-4739-8838-1256b92e3d02",["D",1783319020501],[194,195,196],[176,234],["D",1783319020501],[193,197,198],[176],["D",1783319020501],{"_108":107,"_115":110},{"_108":107,"_109":110,"_111":110,"_19":62,"_112":113,"_114":31},{"_13":93,"_38":94,"_50":49,"_95":51,"_96":97,"_98":99,"_100":57,"_101":102,"_103":104,"_105":52,"_106":107},"ctx",{"_86":-5,"_136":290,"_291":292,"_293":294,"_295":31,"_296":31,"_297":31,"_298":66,"_299":-5,"_300":-7,"_301":-7,"_302":70,"_303":31,"_304":31,"_305":-5,"_306":31,"_307":31,"_308":31,"_309":-5},"ENV",{"_261":262,"_263":264,"_265":94,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289},"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 · v9