\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 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",[116,117,108],"50ae308330f60cd743de35757a197b63b4215aeb383ac99bb7817b4b7163b0ee","frontend","components","4d05b635-12a3-4c48-b7fc-363400451b9e","019f358a-036b-74d0-92d6-bba8c98b5c0f","019f358a-036b-74d0-92d6-c48ae26ca968",["D",1783310775049],3,"/** @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 {/* 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",[116,117,108],"f83d61bead5ca56a56a76f3635d326eff5a96c459c4bacb0d05986575489773a",["D",1783319020501],"legacyEnvVars","httpPrivacy","description","AI photo editor with Gemini multimodal AI","imageUrl","userId","dadaece2-3faa-48c5-8ad2-06f26909b04d","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019f3608-7884-705b-ac18-c6e7d85b069c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_164":159},"org",{"_11":12,"_158":159,"_160":159,"_132":133,"_161":162,"_163":50},"branch","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_32":60,"_13":14,"_34":280,"_48":-5,"_127":50,"_51":52,"_128":52,"_129":130,"_131":-5,"_132":133,"_134":80,"_135":26,"_136":-5,"_137":-5,"_138":22,"_55":139,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":145,"_146":145,"_147":148,"_149":148,"_150":148,"_151":145,"_152":145,"_153":281,"_155":282,"_157":283,"_49":50},"tree",[225,232,233,234],"files",[225,226,227,228,229,230,231,232,233,234],"counts",{"_214":22,"_215":200,"_216":200,"_217":218,"_219":220},"contents",[191,192,193,194],"file","upstreamProject",{"_32":39,"_13":14,"_129":130,"_131":-5,"_51":52,"_153":190},"upstreamBranch",{"_32":33,"_34":188,"_36":189,"_13":16,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1783309665038],["D",1783310775049],{"_11":54,"_164":159},{"_32":210,"_13":116,"_79":211,"_81":-5,"_82":59,"_83":200,"_84":26,"_34":212,"_40":22,"_87":208,"_89":-5,"_66":50,"_91":-5,"_72":213},{"_32":204,"_13":205,"_79":206,"_81":-5,"_82":59,"_83":200,"_84":26,"_34":207,"_40":22,"_87":208,"_89":-5,"_66":50,"_91":-5,"_72":209},{"_32":197,"_13":198,"_79":199,"_81":-5,"_82":59,"_83":200,"_84":26,"_34":201,"_40":22,"_87":175,"_89":202,"_66":50,"_91":-5,"_72":203},{"_32":78,"_13":73,"_79":80,"_81":-5,"_82":59,"_83":41,"_84":26,"_34":195,"_40":86,"_87":88,"_89":90,"_66":50,"_91":-5,"_72":196},["D",1783319062590],[73],"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",[198],"191f64cb-d9ca-4a95-9e4e-41e8cf84de18","lib","019f3618-c439-74eb-94fd-b41c3318df7f",["D",1783319020501],"directory",[205],"96d719a1-3bb2-461f-b57f-baf8240d211a","019f3618-c439-74eb-94fd-b3a6865cf8d4",["D",1783319020501],[116],"pulls","branches","forks","envVars",{"_221":223,"_224":122},"connections",{"_221":22,"_222":22},"count","unfilledCount",4,"emptyCount",{"_32":210,"_13":116,"_79":211,"_81":-5,"_82":59,"_83":200,"_84":26,"_34":277,"_40":22,"_87":208,"_89":-5,"_66":50,"_91":-5,"_92":278,"_72":279},{"_32":273,"_13":117,"_79":110,"_81":211,"_82":59,"_83":200,"_84":26,"_34":274,"_40":22,"_87":208,"_89":-5,"_66":50,"_91":-5,"_92":275,"_72":276},{"_32":107,"_13":108,"_79":109,"_81":110,"_82":59,"_83":58,"_84":26,"_34":111,"_40":100,"_87":112,"_89":113,"_66":50,"_91":-5,"_92":271,"_72":272},{"_32":264,"_13":265,"_79":266,"_81":110,"_82":59,"_83":200,"_84":26,"_34":267,"_40":22,"_87":112,"_89":268,"_66":50,"_91":-5,"_92":269,"_72":270},{"_32":257,"_13":258,"_79":259,"_81":110,"_82":59,"_83":200,"_84":26,"_34":260,"_40":22,"_87":112,"_89":261,"_66":50,"_91":-5,"_92":262,"_72":263},{"_32":250,"_13":251,"_79":252,"_81":211,"_82":59,"_83":200,"_84":26,"_34":253,"_40":22,"_87":175,"_89":254,"_66":50,"_91":-5,"_92":255,"_72":256},{"_32":243,"_13":244,"_79":245,"_81":211,"_82":59,"_83":200,"_84":26,"_34":246,"_40":22,"_87":112,"_89":247,"_66":50,"_91":-5,"_92":248,"_72":249},{"_32":204,"_13":205,"_79":206,"_81":-5,"_82":59,"_83":200,"_84":26,"_34":240,"_40":22,"_87":208,"_89":-5,"_66":50,"_91":-5,"_92":241,"_72":242},{"_32":197,"_13":198,"_79":199,"_81":-5,"_82":59,"_83":200,"_84":26,"_34":237,"_40":22,"_87":175,"_89":202,"_66":50,"_91":-5,"_92":238,"_72":239},{"_32":78,"_13":73,"_79":80,"_81":-5,"_82":59,"_83":41,"_84":26,"_34":85,"_40":86,"_87":88,"_89":90,"_66":50,"_91":-5,"_92":235,"_72":236},[],[73],["D",1783319020501],[],[198],["D",1783319020501],[],[205],"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",[],[116,244],"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",[],[116,251],"5b90e1dc-f063-4715-9c7d-d2392e95a992","ResultViewer.tsx","019f3618-c439-74eb-94fd-a2053193ce03",["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",[],[116,117,258],"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",[],[116,117,265],[],[116,117,108],"1ceeb704-9d57-4739-8838-1256b92e3d02",["D",1783319020501],[227,228,229],[116,117],["D",1783319020501],[226,230,231],[116],["D",1783319020501],{"_11":12,"_164":159},{"_11":12,"_158":159,"_160":159,"_132":133,"_161":162,"_163":50},{"_40":58,"_13":16,"_32":59,"_38":60,"_42":33,"_44":41,"_61":52,"_62":39,"_63":56,"_57":14,"_53":12},"ctx",{"_153":-5,"_185":317,"_318":319,"_320":321,"_322":50,"_323":50,"_324":50,"_325":26,"_326":-5,"_327":-7,"_328":-7,"_329":22,"_330":50,"_331":50,"_332":-5,"_333":50,"_334":50,"_335":50,"_336":-5},"ENV",{"_288":289,"_290":291,"_292":16,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316},"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"]

Compare

Mergeqecuta3328/mainintojymyra1007/main

frontend/components/App.tsx+3-3

Hindex.ts+7-7