[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_254":255,"_256":257},"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",3,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","9518c153-0127-49bc-bb9a-088665c44c19","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","019f358a-036b-74d0-92d6-bba8c98b5c0f","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\nconst HF_MODELS = [\n \"timbrooks/instruct-pix2pix\",\n \"sayakpaul/instruct-pix2pix\",\n];\n\ninterface UploadData {\n base64: string;\n mimeType: string;\n previewUrl: string;\n blob: Blob;\n}\n\nfunction base64ToBlob(base64: string, mimeType: string): Blob {\n const binary = atob(base64);\n const arr = new Uint8Array(binary.length);\n for (let i = 0; i < binary.length; i++) {\n arr[i] = binary.charCodeAt(i);\n }\n return new Blob([arr], { type: mimeType });\n}\n\nfunction blobToBase64(blob: Blob): Promise {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onloadend = () => {\n const result = reader.result as string;\n const base64 = result.split(\",\")[1] ?? result;\n resolve(base64);\n };\n reader.onerror = () => reject(new Error(\"Không thể đọc ảnh kết quả\"));\n reader.readAsDataURL(blob);\n });\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({\n ...data,\n blob: base64ToBlob(data.base64, data.mimeType),\n });\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 // 1. Get HF API key from server\n const configRes = await fetch(\"/api/config\");\n const config = await configRes.json();\n if (config.error) throw new Error(config.error);\n const apiKey = config.apiKey;\n\n // 2. Call Hugging Face API directly from browser\n let lastError = \"\";\n let resultBlob: Blob | null = null;\n\n for (const model of HF_MODELS) {\n const url =\n `https://api-inference.huggingface.co/models/${model}?prompt=${encodeURIComponent(prompt)}`;\n\n try {\n const response = await fetch(url, {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${apiKey}`,\n \"Content-Type\": \"application/octet-stream\",\n },\n body: uploadData.blob,\n });\n\n // Model loading — wait and retry\n if (response.status === 503) {\n const data = await response.json();\n const waitTime = Math.min((data.estimated_time || 10) * 1000, 20000);\n await new Promise((r) => setTimeout(r, waitTime));\n\n const retryRes = await fetch(url, {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${apiKey}`,\n \"Content-Type\": \"application/octet-stream\",\n },\n body: uploadData.blob,\n });\n\n if (retryRes.ok) {\n resultBlob = await retryRes.blob();\n break;\n }\n const errData = await retryRes.json().catch(() => ({}));\n lastError = errData.error || `HTTP ${retryRes.status}`;\n continue;\n }\n\n if (response.ok) {\n resultBlob = await response.blob();\n break;\n }\n\n const errData = await response.json().catch(() => ({}));\n lastError = errData.error || `HTTP ${response.status}`;\n } catch (err) {\n lastError = err instanceof Error ? err.message : String(err);\n }\n }\n\n if (!resultBlob) {\n throw new Error(lastError || \"Không thể chỉnh sửa ảnh. Vui lòng thử lại.\");\n }\n\n // 3. Convert result to base64 for display\n const resultBase64 = await blobToBase64(resultBlob);\n setResultImage(`data:image/png;base64,${resultBase64}`);\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 Hugging Face AI

\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 OpenAI

\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",1783309884885],"branchVersion","branchId","04d39c1f-c17d-41cb-9749-bc593768f511","id","ce3e6435-81a8-4fb5-874d-fa5928855dd1","ai-photo-editor",["D",1783309665038],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","AI photo editor with Gemini multimodal AI","imageUrl","aaca6f4d-c351-4de4-8030-88e33ca1179e","pinnedFileId","019f358a-036b-74d0-92d6-dc8e871d2c74","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f3589-3751-755e-9b05-0e35ac6cf1b7","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",8,"main","projectId","forkedBranchId","3a9de1f8-5db6-45d9-b46e-0e2ba134c192","forkedBranchVersion",23,"forkedProjectPrivacy","forkedProjectId","2752fbca-8ede-4523-a625-ac818c16e4c9","forkedProjectOrgId","019f2602-6fe8-73d9-83e4-15408568599d","projectName","userHandle","jymyra1007","handle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_50":51,"_38":52,"_45":250,"_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":251,"_88":252,"_90":253,"_92":31},"tree",[189,196,197,198],"files",[189,190,191,192,193,194,195,196,197,198],"counts",{"_178":70,"_179":156,"_180":156,"_181":182,"_183":184},"contents",[146,147,148,149],"upstreamProject",{"_50":102,"_38":52,"_59":60,"_61":-5,"_56":57,"_86":145},"upstreamBranch",{"_50":97,"_45":139,"_140":141,"_38":94,"_95":102,"_13":99,"_96":-5,"_98":-5,"_142":143,"_54":-5,"_92":31,"_56":57,"_106":144,"_71":104,"_105":52},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1783049153833],"updatedAt",["D",1783058791759],"lockfileKey","1783058792435-esm.town_v_redagu2097_ai-photo-editor@23-main","redagu2097",{"_108":144,"_115":110},{"_50":173,"_38":174,"_36":175,"_152":-5,"_48":49,"_47":156,"_154":66,"_45":176,"_13":70,"_40":171,"_42":-5,"_30":31,"_159":-5,"_33":177},{"_50":167,"_38":168,"_36":169,"_152":-5,"_48":49,"_47":156,"_154":66,"_45":170,"_13":70,"_40":171,"_42":-5,"_30":31,"_159":-5,"_33":172},{"_50":161,"_38":162,"_36":163,"_152":-5,"_48":49,"_47":156,"_154":66,"_45":164,"_13":70,"_40":26,"_42":165,"_30":31,"_159":-5,"_33":166},{"_50":150,"_38":151,"_36":64,"_152":-5,"_48":49,"_47":153,"_154":31,"_45":155,"_13":156,"_40":157,"_42":158,"_30":31,"_159":-5,"_33":160},"2e7c7f50-506a-4f6c-9df6-f572f7c3a447","index.ts","parentId",2,"latest",["D",1783309861033],1,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\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// API: Edit image using OpenAI (gpt-4o + gpt-image-2)\napp.post(\"/api/edit\", async (c) => {\n const apiKey = Deno.env.get(\"OPENAI_API_KEY\");\n if (!apiKey) {\n return c.json({ error: \"OPENAI_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 try {\n // 1. Use gpt-4o to analyze image + prompt → generate enhanced editing instruction\n const chatResponse = await fetch(\n \"https://api.openai.com/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: \"gpt-4o\",\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: {\n url: `data:${mimeType};base64,${base64}`,\n },\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. Use gpt-image-2 to edit the image\n const binary = atob(base64);\n const arr = new Uint8Array(binary.length);\n for (let i = 0; i < binary.length; i++) {\n arr[i] = binary.charCodeAt(i);\n }\n const imageBlob = new Blob([arr], { type: mimeType });\n const ext = mimeType === \"image/png\" ? \"png\" : \"jpg\";\n\n const formData = new FormData();\n formData.append(\"model\", \"gpt-image-2\");\n formData.append(\"prompt\", enhancedPrompt);\n formData.append(\"image\", imageBlob, `image.${ext}`);\n formData.append(\"size\", \"1024x1024\");\n\n const editResponse = await fetch(\n \"https://api.openai.com/v1/images/edits\",\n {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${apiKey}`,\n },\n body: formData,\n },\n );\n\n if (!editResponse.ok) {\n const errData = await editResponse.json().catch(() => ({}));\n throw new Error(errData.error?.message || `HTTP ${editResponse.status}`);\n }\n\n const editData = await editResponse.json();\n const resultBase64 = editData.data?.[0]?.b64_json;\n\n if (!resultBase64) {\n throw new Error(\"Không nhận được ảnh từ API\");\n }\n\n return c.json({\n resultImage: `data:image/png;base64,${resultBase64}`,\n aiText,\n });\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",[151],"ae65d755-c955-46ed-ae64-af277f21dc11","README.md","019f358a-036b-74d0-92d6-dba0899a8972",["D",1783309665038],"# 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",[162],"b12b6882-d9f2-4acf-83b6-c6e5b7f42db4","lib","019f358a-036b-74d0-92d6-d5a1ebb2bc93",["D",1783309665038],"directory",[168],"ee01d1d9-2538-40c8-ae03-a2ce12acb15a","frontend","019f358a-036b-74d0-92d6-d1379868c3fd",["D",1783309665038],[174],"pulls","branches","forks","envVars",{"_185":187,"_188":14},"connections",{"_185":70,"_186":70},"count","unfilledCount",4,"emptyCount",{"_50":173,"_38":174,"_36":175,"_152":-5,"_48":49,"_47":156,"_154":66,"_45":247,"_13":70,"_40":171,"_42":-5,"_30":31,"_159":-5,"_200":248,"_33":249},{"_50":243,"_38":231,"_36":226,"_152":175,"_48":49,"_47":156,"_154":66,"_45":244,"_13":70,"_40":171,"_42":-5,"_30":31,"_159":-5,"_200":245,"_33":246},{"_50":239,"_38":39,"_36":37,"_152":226,"_48":49,"_47":14,"_154":31,"_45":240,"_13":156,"_40":41,"_42":44,"_30":31,"_159":-5,"_200":241,"_33":242},{"_50":232,"_38":233,"_36":234,"_152":226,"_48":49,"_47":156,"_154":31,"_45":235,"_13":70,"_40":41,"_42":236,"_30":31,"_159":-5,"_200":237,"_33":238},{"_50":223,"_38":224,"_36":225,"_152":226,"_48":49,"_47":156,"_154":31,"_45":227,"_13":70,"_40":41,"_42":228,"_30":31,"_159":-5,"_200":229,"_33":230},{"_50":216,"_38":217,"_36":218,"_152":175,"_48":49,"_47":156,"_154":66,"_45":219,"_13":70,"_40":26,"_42":220,"_30":31,"_159":-5,"_200":221,"_33":222},{"_50":209,"_38":210,"_36":211,"_152":175,"_48":49,"_47":156,"_154":66,"_45":212,"_13":70,"_40":41,"_42":213,"_30":31,"_159":-5,"_200":214,"_33":215},{"_50":167,"_38":168,"_36":169,"_152":-5,"_48":49,"_47":156,"_154":66,"_45":206,"_13":70,"_40":171,"_42":-5,"_30":31,"_159":-5,"_200":207,"_33":208},{"_50":161,"_38":162,"_36":163,"_152":-5,"_48":49,"_47":156,"_154":66,"_45":203,"_13":70,"_40":26,"_42":165,"_30":31,"_159":-5,"_200":204,"_33":205},{"_50":150,"_38":151,"_36":64,"_152":-5,"_48":49,"_47":153,"_154":31,"_45":199,"_13":156,"_40":157,"_42":158,"_30":31,"_159":-5,"_200":201,"_33":202},["D",1783309861033],"children",[],[151],["D",1783309665038],[],[162],["D",1783309665038],[],[168],"54e4aaf8-9705-494e-911b-ac6fd396fb47","index.tsx","019f358a-036b-74d0-92d6-cd767ac51880",["D",1783309665038],"/** @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",[],[174,210],"27c25ed2-b104-42e3-9eba-c1535edb9fab","index.html","019f358a-036b-74d0-92d6-ca5e3b104708",["D",1783309665038],"\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",[],[174,217],"38e495bf-6629-4fcb-96b8-86108b8cef27","ResultViewer.tsx","019f358a-036b-74d0-92d6-c1b0991f3b61","019f358a-036b-74d0-92d6-c48ae26ca968",["D",1783309665038],"/** @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 Gemini AI đ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",[],[174,231,224],"components","f36716cd-f25e-45d9-a707-26e4e9fea16a","ImageUploader.tsx","019f358a-036b-74d0-92d6-bc4dd4e6dac4",["D",1783309665038],"/** @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// Gemini 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",[],[174,231,233],"cf50d897-4783-471d-ab49-3d084b55b630",["D",1783309884885],[],[174,231,39],"1dd76b1b-9cdd-4187-8b49-3cfaa6f3dc2a",["D",1783309665038],[191,192,193],[174,231],["D",1783309665038],[190,194,195],[174],["D",1783309665038],{"_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":287,"_288":289,"_290":291,"_292":31,"_293":31,"_294":31,"_295":66,"_296":-5,"_297":-7,"_298":-7,"_299":70,"_300":31,"_301":31,"_302":-5,"_303":31,"_304":31,"_305":31,"_306":-5},"ENV",{"_258":259,"_260":261,"_262":94,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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 · v3