\n \n \n \n\n\n",[],[121,129],"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",[],[121,136],["D",1780564651587],[146,147,148,149],[19],{"_36":98,"_13":99,"_65":100,"_67":68,"_69":70,"_71":32,"_73":74,"_38":159,"_17":72,"_76":77,"_78":102,"_80":51,"_81":-5,"_117":160,"_18":161},{"_36":92,"_13":93,"_65":94,"_67":68,"_69":70,"_71":72,"_73":74,"_38":156,"_17":34,"_76":77,"_78":96,"_80":51,"_81":-5,"_117":157,"_18":158},{"_36":83,"_13":84,"_65":85,"_67":68,"_69":70,"_71":86,"_73":74,"_38":153,"_17":88,"_76":89,"_78":90,"_80":51,"_81":-5,"_117":154,"_18":155},{"_36":63,"_13":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_38":150,"_17":34,"_76":77,"_78":79,"_80":51,"_81":-5,"_117":151,"_18":152},["D",1780564651587],[],[19,64],["D",1780564940065],[],[19,84],["D",1780564651587],[],[19,93],["D",1780564990879],[],[19,99],"348da56f-e4d5-4147-b952-dada5e7496c8",["D",1780564651587],"legacyEnvVars","httpPrivacy","description","Tạo video quảng cáo AI có giọng nói cho TikTok/Facebook","imageUrl","userId","ac2956b5-9d0d-4f4c-91d7-5a9d6ca48d36","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019e9115-5664-735d-8671-6cb3b1c01ecc","tursoName","348da56fe4d54147b952dada5e7496c8","tursoHostname","348da56fe4d54147b952dada5e7496c8-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789528252206],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_209":205},"org",{"_11":12,"_202":203,"_204":205,"_169":170,"_206":207,"_208":51},"branch",{"_17":114,"_13":16,"_36":70,"_42":162,"_45":37,"_46":44,"_199":53,"_200":43,"_201":57,"_58":14,"_54":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","Isa Prewitt","avatar","https://lh3.googleusercontent.com/a/ACg8ocIfh7NCVVXj763K_2GKkBJ8ohKESjYni8rX7XwB8vAGUZ4uPA=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":162,"_13":14,"_38":281,"_49":-5,"_164":51,"_52":53,"_165":53,"_166":167,"_168":-5,"_169":170,"_171":85,"_172":74,"_173":-5,"_174":-5,"_175":34,"_56":176,"_177":178,"_179":180,"_181":282,"_183":-5,"_184":185,"_186":185,"_187":188,"_189":188,"_190":188,"_191":185,"_192":185,"_193":283,"_195":284,"_197":285,"_50":51},[254,259,262],"files",[254,255,256,257,258,259,260,261,262],"counts",{"_244":34,"_245":72,"_246":34,"_35":247,"_248":249},[236,237,238,239],{"_36":104,"_13":19,"_65":68,"_67":-5,"_69":70,"_71":72,"_73":74,"_38":105,"_17":34,"_76":106,"_78":-5,"_80":51,"_81":-5,"_18":235},"upstreamProject",{"_36":43,"_13":14,"_166":167,"_168":-5,"_52":53,"_193":233},"upstreamBranch",{"_36":37,"_38":231,"_40":232,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1780548746393],["D",1780549939305],{"_11":55,"_209":234},"https://lh3.googleusercontent.com/a/ACg8ocK1ofRLoR-LtNcZUqraAIRWTjCpcTL1ym-_1GOfKxX3FMYilg=s96-c",[19],{"_36":98,"_13":99,"_65":100,"_67":68,"_69":70,"_71":32,"_73":74,"_38":101,"_17":72,"_76":77,"_78":102,"_80":51,"_81":-5,"_18":243},{"_36":92,"_13":93,"_65":94,"_67":68,"_69":70,"_71":72,"_73":74,"_38":95,"_17":34,"_76":77,"_78":96,"_80":51,"_81":-5,"_18":242},{"_36":83,"_13":84,"_65":85,"_67":68,"_69":70,"_71":86,"_73":74,"_38":87,"_17":88,"_76":89,"_78":90,"_80":51,"_81":-5,"_18":241},{"_36":63,"_13":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_38":75,"_17":34,"_76":77,"_78":79,"_80":51,"_81":-5,"_18":240},[19,64],[19,84],[19,93],[19,99],"pulls","branches","forks",{"_250":252,"_253":34},"connections",{"_250":34,"_251":34},"count","unfilledCount",2,"emptyCount",{"_36":104,"_13":19,"_65":68,"_67":-5,"_69":70,"_71":72,"_73":74,"_38":143,"_17":34,"_76":106,"_78":-5,"_80":51,"_81":-5,"_117":279,"_18":280},{"_36":98,"_13":99,"_65":100,"_67":68,"_69":70,"_71":32,"_73":74,"_38":159,"_17":72,"_76":77,"_78":102,"_80":51,"_81":-5,"_117":277,"_18":278},{"_36":92,"_13":93,"_65":94,"_67":68,"_69":70,"_71":72,"_73":74,"_38":156,"_17":34,"_76":77,"_78":96,"_80":51,"_81":-5,"_117":275,"_18":276},{"_36":83,"_13":84,"_65":85,"_67":68,"_69":70,"_71":86,"_73":74,"_38":153,"_17":88,"_76":89,"_78":90,"_80":51,"_81":-5,"_117":273,"_18":274},{"_36":63,"_13":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_38":150,"_17":34,"_76":77,"_78":79,"_80":51,"_81":-5,"_117":271,"_18":272},{"_36":120,"_13":121,"_65":122,"_67":-5,"_69":70,"_71":72,"_73":74,"_38":123,"_17":34,"_76":106,"_78":-5,"_80":51,"_81":-5,"_117":269,"_18":270},{"_36":135,"_13":136,"_65":137,"_67":122,"_69":70,"_71":138,"_73":74,"_38":139,"_17":72,"_76":77,"_78":140,"_80":51,"_81":-5,"_117":267,"_18":268},{"_36":128,"_13":129,"_65":130,"_67":122,"_69":70,"_71":88,"_73":74,"_38":131,"_17":72,"_76":24,"_78":132,"_80":51,"_81":-5,"_117":265,"_18":266},{"_36":111,"_13":112,"_65":113,"_67":-5,"_69":70,"_71":114,"_73":74,"_38":115,"_17":72,"_76":24,"_78":116,"_80":51,"_81":-5,"_117":263,"_18":264},[],[112],[],[121,129],[],[121,136],[260,261],[121],[],[19,64],[],[19,84],[],[19,93],[],[19,99],[255,256,257,258],[19],["D",1780564651587],["D",1789528252206],{"_11":12,"_209":205},{"_11":12,"_202":203,"_204":205,"_169":170,"_206":207,"_208":51},{"_17":114,"_13":16,"_36":70,"_42":162,"_45":37,"_46":44,"_199":53,"_200":43,"_201":57,"_58":14,"_54":12},"ctx",{"_193":-5,"_228":319,"_320":321,"_322":323,"_324":51,"_325":51,"_326":51,"_327":74,"_328":-5,"_329":-7,"_330":-7,"_331":34,"_332":51,"_333":51,"_334":-5,"_335":51,"_336":51,"_337":51,"_338":-5},"ENV",{"_290":291,"_292":293,"_294":16,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318},"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"]