\n \n \n \n\n\n",[],[291,284],"frontend","b7f03461-ca9a-47f9-8541-d9c07896b1e3","app.tsx","019e91ec-6eb3-741e-9cca-bb577f0a4c7c",5,["D",1780564907378],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nconst MODEL = (window as any).__MODEL__ || \"wan-i2v\";\n\ntype Phase = \"form\" | \"uploading\" | \"generating\" | \"done\" | \"error\";\n\nconst ASPECTS = [\n { id: \"9:16\", label: \"9:16\", sub: \"Dọc · TikTok\" },\n { id: \"1:1\", label: \"1:1\", sub: \"Vuông · Feed\" },\n { id: \"16:9\", label: \"16:9\", sub: \"Ngang · YouTube\" },\n];\nconst RESOLUTIONS = [\"720P\", \"1080P\"];\nconst DURATIONS = [5, 10];\n\nasync function api(path: string, opts?: RequestInit) {\n const res = await fetch(path, opts);\n const json = await res.json().catch(() => ({}));\n if (!res.ok) throw new Error(json.error || `Lỗi ${res.status}`);\n return json;\n}\n\nfunction fileToDataUrl(file: File): Promise {\n return new Promise((resolve, reject) => {\n const r = new FileReader();\n r.onload = () => resolve(r.result as string);\n r.onerror = reject;\n r.readAsDataURL(file);\n });\n}\n\nfunction App() {\n const [imgPreview, setImgPreview] = useState(\"\");\n const [imgUrl, setImgUrl] = useState(\"\");\n const [prompt, setPrompt] = useState(\"\");\n const [dialogue, setDialogue] = useState(\"\");\n const [aspect, setAspect] = useState(\"9:16\");\n const [resolution, setResolution] = useState(\"720P\");\n const [duration, setDuration] = useState(10);\n\n const [phase, setPhase] = useState(\"form\");\n const [statusText, setStatusText] = useState(\"\");\n const [progress, setProgress] = useState(0);\n const [videoUrl, setVideoUrl] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [history, setHistory] = useState([]);\n const fileRef = useRef(null);\n const pollRef = useRef(null);\n\n const loadHistory = async () => {\n try {\n const { jobs } = await api(\"/api/history\");\n setHistory(jobs || []);\n } catch { /* ignore */ }\n };\n useEffect(() => { loadHistory(); }, []);\n useEffect(() => () => { if (pollRef.current) clearInterval(pollRef.current); }, []);\n\n async function handleFile(e: React.ChangeEvent) {\n const file = e.target.files?.[0];\n if (!file) return;\n setError(\"\");\n const dataUrl = await fileToDataUrl(file);\n setImgPreview(dataUrl);\n setPhase(\"uploading\");\n setStatusText(\"Đang tải ảnh lên...\");\n try {\n const { url } = await api(\"/api/upload\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ dataUrl }),\n });\n setImgUrl(url);\n setPhase(\"form\");\n setStatusText(\"\");\n } catch (err: any) {\n setError(err.message);\n setPhase(\"form\");\n }\n }\n\n function removeImage(e: React.MouseEvent) {\n e.stopPropagation();\n setImgPreview(\"\");\n setImgUrl(\"\");\n if (fileRef.current) fileRef.current.value = \"\";\n }\n\n function startProgressAnim() {\n setProgress(6);\n let p = 6;\n pollRef.current && clearInterval(pollRef.current);\n const t = setInterval(() => {\n p = Math.min(p + Math.random() * 4, 92);\n setProgress(p);\n }, 1500);\n return t;\n }\n\n async function generate() {\n setError(\"\");\n if (!imgUrl) { setError(\"Vui lòng tải ảnh mẫu trước.\"); return; }\n if (!prompt.trim() && !dialogue.trim()) {\n setError(\"Nhập mô tả cảnh (prompt) hoặc lời thoại.\");\n return;\n }\n setPhase(\"generating\");\n setVideoUrl(\"\");\n setStatusText(\"Đang khởi tạo tác vụ...\");\n const animTimer = startProgressAnim();\n\n try {\n const { taskId } = await api(\"/api/generate\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ prompt, dialogue, imageUrl: imgUrl, resolution, duration, aspect }),\n });\n setStatusText(\"AI đang dựng video & lồng giọng nói...\");\n\n pollRef.current = setInterval(async () => {\n try {\n const s = await api(`/api/status/${taskId}`);\n if (s.status === \"SUCCEEDED\") {\n clearInterval(pollRef.current!); clearInterval(animTimer);\n if (s.videoUrl) {\n setProgress(100);\n setVideoUrl(s.videoUrl);\n setPhase(\"done\");\n setStatusText(\"\");\n loadHistory();\n } else {\n setError(\"Video đã tạo xong nhưng không nhận được link. Thử lại sau.\");\n setPhase(\"error\");\n }\n } else if (s.status === \"FAILED\") {\n clearInterval(pollRef.current!); clearInterval(animTimer);\n setError(s.message || \"Tạo video thất bại. Thử đổi ảnh/prompt.\");\n setPhase(\"error\");\n } else {\n setStatusText(`Trạng thái: ${s.status} — vui lòng đợi (thường 1–4 phút)...`);\n }\n } catch (err: any) {\n clearInterval(pollRef.current!); clearInterval(animTimer);\n setError(err.message);\n setPhase(\"error\");\n }\n }, 5000) as unknown as number;\n } catch (err: any) {\n clearInterval(animTimer);\n setError(err.message);\n setPhase(\"error\");\n }\n }\n\n function reset() {\n setPhase(\"form\");\n setVideoUrl(\"\");\n setError(\"\");\n setProgress(0);\n setStatusText(\"\");\n }\n\n const busy = phase === \"uploading\" || phase === \"generating\";\n\n return (\n

🎬

AI Video Studio

Tạo video quảng cáo cho TikTok & Facebook

\n {MODEL}\n

\n\n {phase === \"generating\" && (\n

Đang tạo video AI 🎥

{statusText}

\n )}\n\n {phase === \"done\" && videoUrl && (\n

✅ Video đã sẵn sàng!

\n )}\n\n {error && (phase === \"error\" || phase === \"form\") && (\n

⚠️ {error}

\n )}\n\n {(phase === \"form\" || phase === \"uploading\" || phase === \"error\") && (\n <>\n

🖼️ Ảnh mẫu (khung hình đầu)

\n fileRef.current?.click()}\n >\n {imgPreview ? (\n <>\n $\"preview\"$ \n \n \n ) : (\n <>\n

📷

Chạm để tải ảnh từ máy

JPG / PNG · nhân vật hoặc sản phẩm

\n \n )}\n

\n {phase === \"uploading\" &&

⏳ {statusText}

}\n {imgUrl &&

✓ Đã tải ảnh lên thành công

}\n \n

\n\n

📝 Mô tả cảnh quay (Prompt)

\n setPrompt(e.target.value)}\n />\n

Mô tả bối cảnh, hành động, ánh sáng, phong cách. Hỗ trợ tiếng Việt & tiếng Anh.

\n\n

🎙️ Lời thoại (AI tự đọc + khớp khẩu hình)

\n setDialogue(e.target.value)}\n />\n

Model {MODEL} tự sinh giọng nói lồng vào video — không cần thu âm. Để trống nếu chỉ muốn video không lời.

\n\n

📐 Tỉ lệ khung hình

\n {ASPECTS.map((a) => (\n setAspect(a.id)}\n >\n {a.label}{a.sub}\n

\n ))}\n

\n\n

⚙️ Cấu hình

Độ phân giải

\n {RESOLUTIONS.map((r) => (\n

setResolution(r)}>{r}

\n ))}\n

Thời lượng

\n {DURATIONS.map((d) => (\n

setDuration(d)}>{d}s

\n ))}\n

\n\n {history.length > 0 && (\n <>\n

Lịch sử

\n {history.map((h) => (\n

\n $\"\"$ \n

{h.prompt || h.dialogue || \"(không mô tả)\"}

{h.resolution} · {h.duration}s · {h.aspect}

\n {h.status === \"SUCCEEDED\"\n ? Xem ▶\n : h.status === \"FAILED\"\n ? Lỗi\n : Đang xử lý}\n

\n ))}\n

\n \n )}\n\n

\n \n )}\n\n {phase !== \"generating\" && (\n

\n \n

\n )}\n

\n );\n}\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n",[],[291,293],"a1dd75e7-d15d-474e-93d8-369f25a2b953",["D",1780564651587],[272,273],[291],["D",1780564651587],[],[18,105],["D",1780564940065],[],[18,93],["D",1780564651587],[],[18,100],["D",1780564990879],[],[18,81],["D",1780564651587],[267,268,269,270],[18],["D",1780564651587],["D",1789528252206],{"_11":12,"_198":87},{"_11":12,"_193":194,"_86":87,"_31":85,"_195":196,"_197":30},{"_44":182,"_13":16,"_38":41,"_183":146,"_184":76,"_185":77,"_186":150,"_187":188,"_189":190,"_191":14,"_192":12},"ctx",{"_57":-5,"_219":357,"_358":359,"_360":361,"_362":30,"_363":30,"_364":30,"_365":24,"_366":-5,"_367":-7,"_368":-7,"_369":26,"_370":30,"_371":30,"_372":-5,"_373":30,"_374":30,"_375":30,"_376":-5},"ENV",{"_328":329,"_330":331,"_332":16,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356},"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"]

History · backend