\n \n \n \n\n\n",[],[100,109],"52e4a203-d6b6-428d-a737-3a8b38d9ff0c","app.tsx","d4094fca-5fd3-11f1-bdc8-1607ee4eb77e",8,["D",1780549882510],"/** @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\" && s.videoUrl) {\n clearInterval(pollRef.current!); clearInterval(animTimer);\n setProgress(100);\n setVideoUrl(s.videoUrl);\n setPhase(\"done\");\n setStatusText(\"\");\n loadHistory();\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",[],[100,117],["D",1780549746572],[127,128,129,130],[19],{"_37":76,"_13":77,"_40":78,"_42":43,"_44":45,"_46":79,"_48":49,"_50":140,"_17":52,"_53":54,"_55":81,"_57":58,"_59":-5,"_96":141,"_18":142},{"_37":69,"_13":70,"_40":71,"_42":43,"_44":45,"_46":72,"_48":49,"_50":137,"_17":52,"_53":54,"_55":74,"_57":58,"_59":-5,"_96":138,"_18":139},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":64,"_48":49,"_50":134,"_17":52,"_53":66,"_55":67,"_57":58,"_59":-5,"_96":135,"_18":136},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":131,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_96":132,"_18":133},["D",1780549766429],[],[19,39],["D",1780549788135],[],[19,62],["D",1780549755207],[],[19,70],["D",1780549746572],[],[19,77],"ad4d66d2-c9ec-412c-a507-9ac7210ac1f2",["D",1780548746388],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Tạo video quảng cáo AI có giọng nói cho TikTok/Facebook","imageUrl","userId","5c23263b-f2a4-42af-9ca6-03189fa116dd","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019e90f9-646f-77fa-a1ee-bd51d65288f7","tursoName","ad4d66d2c9ec412ca5079ac7210ac1f2","tursoHostname","ad4d66d2c9ec412ca5079ac7210ac1f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789514495229],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_200":196},"org",{"_11":12,"_193":194,"_195":196,"_153":154,"_197":198,"_199":58},"branch",{"_17":93,"_13":16,"_37":45,"_185":143,"_186":-5,"_187":-5,"_188":-5,"_189":-5,"_190":-5,"_191":14,"_192":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Roxanna Dejesus","avatar","https://lh3.googleusercontent.com/a/ACg8ocK1ofRLoR-LtNcZUqraAIRWTjCpcTL1ym-_1GOfKxX3FMYilg=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_37":143,"_13":14,"_50":266,"_145":-5,"_146":58,"_147":148,"_149":148,"_150":151,"_152":-5,"_153":154,"_155":63,"_156":49,"_157":-5,"_158":-5,"_159":52,"_160":161,"_162":163,"_164":165,"_166":267,"_168":-5,"_169":170,"_171":170,"_172":173,"_174":173,"_175":173,"_176":170,"_177":170,"_178":268,"_180":269,"_182":270,"_184":58},[239,244,247],"files",[239,240,241,242,243,244,245,246,247],"counts",{"_229":52,"_230":231,"_232":231,"_32":233,"_234":235},[221,222,223,224],{"_37":83,"_13":19,"_40":43,"_42":-5,"_44":45,"_46":79,"_48":49,"_50":84,"_17":52,"_53":85,"_55":-5,"_57":58,"_59":-5,"_18":220},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_37":76,"_13":77,"_40":78,"_42":43,"_44":45,"_46":79,"_48":49,"_50":80,"_17":52,"_53":54,"_55":81,"_57":58,"_59":-5,"_18":228},{"_37":69,"_13":70,"_40":71,"_42":43,"_44":45,"_46":72,"_48":49,"_50":73,"_17":52,"_53":54,"_55":74,"_57":58,"_59":-5,"_18":227},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":64,"_48":49,"_50":65,"_17":52,"_53":66,"_55":67,"_57":58,"_59":-5,"_18":226},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_18":225},[19,39],[19,62],[19,70],[19,77],"pulls","branches",1,"forks",{"_236":79,"_238":52},"connections",{"_236":52,"_237":52},"count","unfilledCount","emptyCount",{"_37":83,"_13":19,"_40":43,"_42":-5,"_44":45,"_46":79,"_48":49,"_50":124,"_17":52,"_53":85,"_55":-5,"_57":58,"_59":-5,"_96":264,"_18":265},{"_37":76,"_13":77,"_40":78,"_42":43,"_44":45,"_46":79,"_48":49,"_50":140,"_17":52,"_53":54,"_55":81,"_57":58,"_59":-5,"_96":262,"_18":263},{"_37":69,"_13":70,"_40":71,"_42":43,"_44":45,"_46":72,"_48":49,"_50":137,"_17":52,"_53":54,"_55":74,"_57":58,"_59":-5,"_96":260,"_18":261},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":64,"_48":49,"_50":134,"_17":52,"_53":66,"_55":67,"_57":58,"_59":-5,"_96":258,"_18":259},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":131,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_96":256,"_18":257},{"_37":99,"_13":100,"_40":101,"_42":-5,"_44":45,"_46":102,"_48":49,"_50":103,"_17":52,"_53":85,"_55":-5,"_57":58,"_59":-5,"_96":254,"_18":255},{"_37":116,"_13":117,"_40":118,"_42":101,"_44":45,"_46":119,"_48":49,"_50":120,"_17":52,"_53":54,"_55":121,"_57":58,"_59":-5,"_96":252,"_18":253},{"_37":108,"_13":109,"_40":110,"_42":101,"_44":45,"_46":111,"_48":49,"_50":112,"_17":79,"_53":24,"_55":113,"_57":58,"_59":-5,"_96":250,"_18":251},{"_37":90,"_13":91,"_40":92,"_42":-5,"_44":45,"_46":93,"_48":49,"_50":94,"_17":52,"_53":24,"_55":95,"_57":58,"_59":-5,"_96":248,"_18":249},[],[91],[],[100,109],[],[100,117],[245,246],[100],[],[19,39],[],[19,62],[],[19,70],[],[19,77],[240,241,242,243],[19],["D",1780548746388],["D",1789514495229],{"_11":12,"_200":196},{"_11":12,"_193":194,"_195":196,"_153":154,"_197":198,"_199":58},{"_17":93,"_13":16,"_37":45,"_185":143,"_186":-5,"_187":-5,"_188":-5,"_189":-5,"_190":-5,"_191":14,"_192":12},"ctx",{"_178":-5,"_217":304,"_305":306,"_307":308,"_309":58,"_310":58,"_311":58,"_312":49,"_313":-5,"_314":-7,"_315":-7,"_316":52,"_317":58,"_318":58,"_319":-5,"_320":58,"_321":58,"_322":58,"_323":-5},"ENV",{"_275":276,"_277":278,"_279":16,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303},"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"]