\n \n \n \n\n",[],[169,213],"a3b37b0e-c3ca-4de3-81bd-77717fae3144","ResultViewer.tsx","019f358a-036b-74d0-92d6-c1b0991f3b61","019f358a-036b-74d0-92d6-c48ae26ca968",["D",1783309885005],"/** @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",[],[169,227,220],"components","e1fb4049-8f0a-4aef-8ef5-89cf68e83b46","ImageUploader.tsx","019f358a-036b-74d0-92d6-bc4dd4e6dac4",5,["D",1783309885104],"/** @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",[],[169,227,229],"4d05b635-12a3-4c48-b7fc-363400451b9e","App.tsx","019f358a-036b-74d0-92d6-bba8c98b5c0f",["D",1783310775049],"/** @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",[],[169,227,237],"1dd76b1b-9cdd-4187-8b49-3cfaa6f3dc2a",["D",1783309665038],[186,187,188],[169,227],["D",1783309665038],[185,189,190],[169],["D",1783309665038],{"_11":12,"_37":38},{"_11":12,"_58":38,"_59":38,"_42":67,"_60":61,"_62":20},{"_89":90,"_13":91,"_27":92,"_93":63,"_94":95,"_96":97,"_98":33,"_99":28,"_100":101,"_102":14,"_103":12},"ctx",{"_34":-5,"_126":287,"_288":289,"_290":291,"_292":20,"_293":20,"_294":20,"_295":53,"_296":-5,"_297":-7,"_298":-7,"_299":22,"_300":20,"_301":20,"_302":-5,"_303":20,"_304":20,"_305":20,"_306":-5},"ENV",{"_258":259,"_260":261,"_262":91,"_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","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"]

Remixes1

Remixes
1