[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_253":254,"_255":256},"routes/_app.x.$handle.$name",{"_110":109,"_38":52,"_119":96,"_33":120,"_13":14,"_121":-5,"_11":122,"_123":124,"_125":126,"_127":128,"_129":130,"_26":-5,"_131":132,"_133":134,"_135":31,"_136":137,"_138":65,"_139":-5,"_140":-5,"_141":142},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_50":51,"_38":52,"_45":53,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":37,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":31},"version",6,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","7aae595e-0bd5-4a99-986f-325b4434b414","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":44,"_45":46,"_47":14,"_48":49,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",false,"deletedHere","path","backend/index.ts","latestPath","fileId","019e91ec-6eb3-741e-9cca-ad2ba262d939","name","index.ts","fileType","http","content","import { Hono } from \"npm:hono\";\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { createTask, getTask, MODEL } from \"./aliyun.ts\";\nimport { insertJob, listJobs, updateJob } from \"./db.ts\";\nimport { readStored, storeBase64 } from \"./upload.ts\";\n\nconst app = new Hono();\n// Return a JSON error instead of a bare 500 so the frontend can show it.\napp.onError((err, c) => {\n console.error(err);\n return c.json({ error: err instanceof Error ? err.message : String(err) }, 500);\n});\n\n// Build a public base url for this request (so Aliyun can fetch uploaded images)\nfunction baseUrl(req: Request) {\n const u = new URL(req.url);\n return `${u.protocol}//${u.host}`;\n}\n\n// Combine the marketing prompt + the dialogue (lời thoại) so the Wan model\n// generates a spoken voiceover with lip-sync.\nfunction buildPrompt(prompt: string, dialogue: string): string {\n const base = prompt.trim();\n if (!dialogue.trim()) return base;\n // Instruct the model to speak the dialogue as the video's voiceover.\n return `${base}\\n\\nNhân vật trong video nói rõ ràng bằng giọng tự nhiên: \"${dialogue.trim()}\". Âm thanh của video là lời thoại này, khẩu hình (lip-sync) khớp với lời nói.`;\n}\n\n// ---- Static frontend ----\napp.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n html = html.replace(\"{{MODEL}}\", MODEL);\n return c.html(html);\n});\n\n// Transpile the TSX so the browser receives valid JavaScript.\napp.get(\"/frontend/app.tsx\", async (c) => {\n const code = await readFile(\"/frontend/app.tsx\", import.meta.url);\n const { transpile } = await import(\"https://esm.town/v/std/transpile\");\n const js = await transpile(code, import.meta.url);\n return new Response(js, {\n headers: { \"Content-Type\": \"text/javascript; charset=utf-8\" },\n });\n});\n\n// Serve uploaded files so Aliyun can fetch them as a public URL.\napp.get(\"/file/:id\", async (c) => {\n const id = c.req.param(\"id\");\n const key = `genvideo/uploads/${id}`;\n const stored = await readStored(key);\n if (!stored) return c.notFound();\n return new Response(stored.bytes, {\n headers: {\n \"Content-Type\": stored.contentType,\n \"Cache-Control\": \"public, max-age=86400\",\n },\n });\n});\n\n// ---- API ----\n\n// Upload an image (data URL) -> returns a public URL.\napp.post(\"/api/upload\", async (c) => {\n try {\n const body = await c.req.json();\n const dataUrl: string = body.dataUrl;\n if (!dataUrl) return c.json({ error: \"Thiếu dataUrl\" }, 400);\n const stored = await storeBase64(dataUrl);\n const id = stored.key.replace(\"genvideo/uploads/\", \"\");\n const url = `${baseUrl(c.req.raw)}/file/${id}`;\n return c.json({ url });\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// Start a generation job.\napp.post(\"/api/generate\", async (c) => {\n try {\n const body = await c.req.json();\n const {\n prompt = \"\",\n dialogue = \"\",\n imageUrl = \"\",\n resolution = \"720P\",\n duration = 10,\n aspect = \"9:16\",\n audioUrl = \"\",\n } = body;\n\n if (!imageUrl) return c.json({ error: \"Vui lòng tải ảnh mẫu trước\" }, 400);\n if (!prompt.trim() && !dialogue.trim()) {\n return c.json({ error: \"Vui lòng nhập prompt hoặc lời thoại\" }, 400);\n }\n\n const finalPrompt = buildPrompt(prompt, dialogue);\n const task = await createTask({\n prompt: finalPrompt,\n imageUrl,\n resolution,\n duration: Number(duration),\n audioUrl: audioUrl || undefined,\n promptExtend: true,\n watermark: false,\n });\n\n await insertJob({\n task_id: task.task_id,\n prompt,\n dialogue,\n image_url: imageUrl,\n resolution,\n duration: Number(duration),\n aspect,\n status: task.task_status || \"PENDING\",\n video_url: null,\n error: null,\n created_at: Date.now(),\n });\n\n return c.json({ taskId: task.task_id, status: task.task_status });\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// Poll a job status.\napp.get(\"/api/status/:taskId\", async (c) => {\n try {\n const taskId = c.req.param(\"taskId\");\n const t = await getTask(taskId);\n const status = t.task_status;\n if (status === \"SUCCEEDED\") {\n await updateJob(taskId, { status, video_url: t.video_url ?? null });\n } else if (status === \"FAILED\") {\n await updateJob(taskId, { status, error: t.message ?? \"Tạo video thất bại\" });\n } else {\n await updateJob(taskId, { status });\n }\n return c.json({\n status,\n videoUrl: t.video_url ?? null,\n message: t.message ?? null,\n });\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// History of jobs.\napp.get(\"/api/history\", async (c) => {\n const jobs = await listJobs(30);\n return c.json({ jobs });\n});\n\nexport default app.fetch;\n","import { Hono } from \"npm:hono\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { createTask, getTask, MODEL } from \"./aliyun.ts\";\nimport { insertJob, listJobs, updateJob } from \"./db.ts\";\nimport { readStored, storeBase64 } from \"./upload.ts\";\n\nconst app = new Hono();\n// Return a JSON error instead of a bare 500 so the frontend can show it.\napp.onError((err, c) => {\n console.error(err);\n return c.json({ error: err instanceof Error ? err.message : String(err) }, 500);\n});\n\n// Build a public base url for this request (so Aliyun can fetch uploaded images)\nfunction baseUrl(req: Request) {\n const u = new URL(req.url);\n return `${u.protocol}//${u.host}`;\n}\n\n// Combine the marketing prompt + the dialogue (lời thoại) so the Wan model\n// generates a spoken voiceover with lip-sync.\nfunction buildPrompt(prompt: string, dialogue: string): string {\n const base = prompt.trim();\n if (!dialogue.trim()) return base;\n // Instruct the model to speak the dialogue as the video's voiceover.\n return `${base}\\n\\nNhân vật trong video nói rõ ràng bằng giọng tự nhiên: \"${dialogue.trim()}\". Âm thanh của video là lời thoại này, khẩu hình (lip-sync) khớp với lời nói.`;\n}\n\n// ---- Static frontend ----\napp.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n html = html.replace(\"{{MODEL}}\", MODEL);\n return c.html(html);\n});\n\n// Transpile the TSX so the browser receives valid JavaScript.\napp.get(\"/frontend/app.tsx\", async (c) => {\n const code = await readFile(\"/frontend/app.tsx\", import.meta.url);\n const { transpile } = await import(\"https://esm.town/v/std/transpile\");\n const js = await transpile(code, import.meta.url);\n return new Response(js, {\n headers: { \"Content-Type\": \"text/javascript; charset=utf-8\" },\n });\n});\n\n// Serve uploaded files so Aliyun can fetch them as a public URL.\napp.get(\"/file/:id\", async (c) => {\n const id = c.req.param(\"id\");\n const key = `genvideo/uploads/${id}`;\n const stored = await readStored(key);\n if (!stored) return c.notFound();\n return new Response(stored.bytes, {\n headers: {\n \"Content-Type\": stored.contentType,\n \"Cache-Control\": \"public, max-age=86400\",\n },\n });\n});\n\n// ---- API ----\n\n// Upload an image (data URL) -> returns a public URL.\napp.post(\"/api/upload\", async (c) => {\n try {\n const body = await c.req.json();\n const dataUrl: string = body.dataUrl;\n if (!dataUrl) return c.json({ error: \"Thiếu dataUrl\" }, 400);\n const stored = await storeBase64(dataUrl);\n const id = stored.key.replace(\"genvideo/uploads/\", \"\");\n const url = `${baseUrl(c.req.raw)}/file/${id}`;\n return c.json({ url });\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// Start a generation job.\napp.post(\"/api/generate\", async (c) => {\n try {\n const body = await c.req.json();\n const {\n prompt = \"\",\n dialogue = \"\",\n imageUrl = \"\",\n resolution = \"720P\",\n duration = 10,\n aspect = \"9:16\",\n audioUrl = \"\",\n } = body;\n\n if (!imageUrl) return c.json({ error: \"Vui lòng tải ảnh mẫu trước\" }, 400);\n if (!prompt.trim() && !dialogue.trim()) {\n return c.json({ error: \"Vui lòng nhập prompt hoặc lời thoại\" }, 400);\n }\n\n const finalPrompt = buildPrompt(prompt, dialogue);\n const task = await createTask({\n prompt: finalPrompt,\n imageUrl,\n resolution,\n duration: Number(duration),\n audioUrl: audioUrl || undefined,\n promptExtend: true,\n watermark: false,\n });\n\n await insertJob({\n task_id: task.task_id,\n prompt,\n dialogue,\n image_url: imageUrl,\n resolution,\n duration: Number(duration),\n aspect,\n status: task.task_status || \"PENDING\",\n video_url: null,\n error: null,\n created_at: Date.now(),\n });\n\n return c.json({ taskId: task.task_id, status: task.task_status });\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// Poll a job status.\napp.get(\"/api/status/:taskId\", async (c) => {\n try {\n const taskId = c.req.param(\"taskId\");\n const t = await getTask(taskId);\n const status = t.task_status;\n if (status === \"SUCCEEDED\") {\n await updateJob(taskId, { status, video_url: t.video_url ?? null });\n } else if (status === \"FAILED\") {\n await updateJob(taskId, { status, error: t.message ?? \"Tạo video thất bại\" });\n } else {\n await updateJob(taskId, { status });\n }\n return c.json({\n status,\n videoUrl: t.video_url ?? null,\n message: t.message ?? null,\n });\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// History of jobs.\napp.get(\"/api/history\", async (c) => {\n const jobs = await listJobs(30);\n return c.json({ jobs });\n});\n\nexport default app.fetch;\n","createdAt",["D",1780564937050],"branchVersion","branchId","93075b55-e179-4211-9ca8-dd4c970b3795","id","348da56f-e4d5-4147-b952-dada5e7496c8","genvideo",["D",1780564651587],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Tạo video quảng cáo AI có giọng nói cho TikTok/Facebook","imageUrl","ac2956b5-9d0d-4f4c-91d7-5a9d6ca48d36","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","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",{"_110":109,"_118":114},"org",{"_110":109,"_111":112,"_113":114,"_19":62,"_115":116,"_117":31},"branch",{"_13":95,"_38":96,"_50":49,"_97":51,"_98":99,"_100":101,"_102":57,"_103":104,"_105":106,"_107":52,"_108":109},"isOwned",9,"main","projectId","forkedBranchId","ea3360fd-ba79-42da-8ce1-59eb3178e8e0","forkedBranchVersion",11,"forkedProjectPrivacy","forkedProjectId","ad4d66d2-c9ec-412c-a507-9ac7210ac1f2","forkedProjectOrgId","019e90f9-646f-77fa-a1ee-bd51d65288f7","projectName","userHandle","isaprewitt","handle","displayName","Isa Prewitt","avatar","https://lh3.googleusercontent.com/a/ACg8ocIfh7NCVVXj763K_2GKkBJ8ohKESjYni8rX7XwB8vAGUZ4uPA=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_50":51,"_38":52,"_45":248,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":37,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":249,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":250,"_90":251,"_92":252,"_94":31},"tree",[186,191,194],"files",[186,187,188,189,190,191,192,193,194],"counts",{"_175":69,"_176":158,"_177":69,"_178":179,"_180":181},"contents",[151,152,153],"upstreamProject",{"_50":104,"_38":52,"_59":60,"_61":-5,"_56":57,"_88":149},"upstreamBranch",{"_50":99,"_45":143,"_144":145,"_38":96,"_97":104,"_13":101,"_98":-5,"_100":-5,"_146":147,"_54":-5,"_94":31,"_56":57,"_108":148,"_70":106,"_107":52},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1780548746393],"updatedAt",["D",1780549939305],"lockfileKey","1780549952215-esm.town_v_roxannadejesus_genvideo@11-main","roxannadejesus",{"_110":148,"_118":150},"https://lh3.googleusercontent.com/a/ACg8ocK1ofRLoR-LtNcZUqraAIRWTjCpcTL1ym-_1GOfKxX3FMYilg=s96-c",{"_50":170,"_38":171,"_36":172,"_157":-5,"_48":49,"_47":158,"_159":65,"_45":173,"_13":69,"_40":168,"_42":-5,"_30":31,"_162":-5,"_33":174},{"_50":164,"_38":165,"_36":166,"_157":-5,"_48":49,"_47":158,"_159":65,"_45":167,"_13":69,"_40":168,"_42":-5,"_30":31,"_162":-5,"_33":169},{"_50":154,"_38":155,"_36":156,"_157":-5,"_48":49,"_47":158,"_159":31,"_45":160,"_13":69,"_40":26,"_42":161,"_30":31,"_162":-5,"_33":163},"a9a3a071-6f2e-4165-a8eb-3f5425d71c5f","README.md","019e91ec-6eb3-741e-9cca-c72262cac943","parentId",1,"latest",["D",1780564651587],"# 🎬 AI Video Studio — Tạo video quảng cáo AI\n\nỨng dụng mobile tạo video quảng cáo bằng AI cho **TikTok / Facebook / YouTube Shorts**, dùng model **Wan image-to-video** của Alibaba DashScope — tạo video **kèm giọng nói lồng tiếng + lip-sync** ngay trong một bước (không cần TTS riêng).\n\n## ✨ Tính năng\n- 📷 Tải ảnh mẫu (nhân vật / sản phẩm) làm khung hình đầu\n- 📝 Ô nhập **prompt** mô tả cảnh quay (tiếng Việt & Anh)\n- 🎙️ Ô nhập **lời thoại** → AI tự đọc bằng giọng tự nhiên, khớp khẩu hình\n- 📐 Chọn tỉ lệ khung hình: 9:16 (TikTok), 1:1 (Feed), 16:9 (YouTube)\n- ⚙️ Chọn độ phân giải (720P/1080P) & thời lượng (5s/10s)\n- 📜 Lịch sử các video đã tạo (lưu SQLite)\n- 🎨 Giao diện tối, hiện đại, tối ưu cho điện thoại\n\n## 🗺️ Kiến trúc\n\n```mermaid\nflowchart TD\n UI[\"📱 Giao diện mobile
(React)\"] -->|Up ảnh| UP[\"/api/upload
→ Blob URL public\"]\n UI -->|Prompt + Lời thoại| GEN[\"/api/generate\"]\n GEN -->|model Wan i2v + audio| DS[\"☁️ Alibaba DashScope\"]\n DS -->|task_id| GEN\n UI -->|poll mỗi 5s| ST[\"/api/status/:id\"]\n ST --> DS\n ST -->|video URL có giọng| UI\n```\n\n## 🔧 Cấu hình (Environment Variables)\n| Key | Mô tả |\n|-----|-------|\n| `DASHSCOPE_API_KEY` | API key Alibaba DashScope (bắt buộc) |\n| `DASHSCOPE_HOST` | Host API (mặc định đã set) |\n| `WAN_MODEL` | Tên model, mặc định `wan2.7-i2v`. Nếu báo \"model not found\" → đổi `wan2.5-i2v-preview` |\n\n## 📁 Cấu trúc file\n- `backend/index.ts` — HTTP server (Hono), routes API + phục vụ frontend\n- `backend/aliyun.ts` — client gọi DashScope (tạo task + poll)\n- `backend/upload.ts` — lưu ảnh upload vào Blob, tạo URL public\n- `backend/db.ts` — lưu lịch sử job (SQLite)\n- `frontend/index.html` — markup + CSS\n- `frontend/app.tsx` — ứng dụng React\n\n## ⚠️ Lưu ý\n- Tạo 1 video thường mất **1–4 phút**.\n- Ảnh upload được host công khai qua route `/file/:id` để DashScope tải về làm khung hình đầu.\n","label",[155],"a1dd75e7-d15d-474e-93d8-369f25a2b953","frontend","019e91ec-6eb3-741e-9cca-c21a2ba8b74d",["D",1780564651587],"directory",[165],"913b5077-c77d-4118-9fe9-e1e80ee5d8c1","backend","019e91ec-6eb3-741e-9cca-b52dd6e523c0",["D",1780564651587],[171],"pulls","branches","forks","envVars",{"_182":184,"_185":69},"connections",{"_182":69,"_183":69},"count","unfilledCount",2,"emptyCount",{"_50":170,"_38":171,"_36":172,"_157":-5,"_48":49,"_47":158,"_159":65,"_45":245,"_13":69,"_40":168,"_42":-5,"_30":31,"_162":-5,"_196":246,"_33":247},{"_50":238,"_38":239,"_36":240,"_157":172,"_48":49,"_47":158,"_159":31,"_45":241,"_13":69,"_40":212,"_42":242,"_30":31,"_162":-5,"_196":243,"_33":244},{"_50":231,"_38":232,"_36":233,"_157":172,"_48":49,"_47":158,"_159":65,"_45":234,"_13":69,"_40":212,"_42":235,"_30":31,"_162":-5,"_196":236,"_33":237},{"_50":226,"_38":39,"_36":37,"_157":172,"_48":49,"_47":14,"_159":31,"_45":227,"_13":228,"_40":41,"_42":44,"_30":31,"_162":-5,"_196":229,"_33":230},{"_50":219,"_38":220,"_36":221,"_157":172,"_48":49,"_47":158,"_159":65,"_45":222,"_13":69,"_40":212,"_42":223,"_30":31,"_162":-5,"_196":224,"_33":225},{"_50":164,"_38":165,"_36":166,"_157":-5,"_48":49,"_47":158,"_159":65,"_45":216,"_13":69,"_40":168,"_42":-5,"_30":31,"_162":-5,"_196":217,"_33":218},{"_50":207,"_38":208,"_36":209,"_157":166,"_48":49,"_47":210,"_159":65,"_45":211,"_13":158,"_40":212,"_42":213,"_30":31,"_162":-5,"_196":214,"_33":215},{"_50":199,"_38":200,"_36":201,"_157":166,"_48":49,"_47":202,"_159":65,"_45":203,"_13":158,"_40":26,"_42":204,"_30":31,"_162":-5,"_196":205,"_33":206},{"_50":154,"_38":155,"_36":156,"_157":-5,"_48":49,"_47":158,"_159":31,"_45":195,"_13":69,"_40":26,"_42":161,"_30":31,"_162":-5,"_196":197,"_33":198},["D",1780564651587],"children",[],[155],"6ef6d41e-d45c-4244-9a25-2b9b32ff986f","index.html","019e91ec-6eb3-741e-9cca-bee8989293b2",4,["D",1780564898965],"\n\n\n \n \n \n AI Video Studio · Tạo video quảng cáo\n \n \n\n\n

\n \n \n \n\n\n",[],[165,200],"b7f03461-ca9a-47f9-8541-d9c07896b1e3","app.tsx","019e91ec-6eb3-741e-9cca-bb577f0a4c7c",5,["D",1780564907378],"script","/** @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",[],[165,208],["D",1780564651587],[192,193],[165],"12af77a8-e190-4496-99cf-4d2c7544e6b4","upload.ts","019e91ec-6eb3-741e-9cca-b3071425cde5",["D",1780564651587],"import { blob } from \"https://esm.town/v/std/blob\";\n\n// Stores an uploaded image in blob storage and returns a PUBLIC url that the\n// Aliyun API can fetch as first_frame. The public url points back at this val's\n// /file/:key route (see backend/index.ts).\n\nconst PREFIX = \"genvideo/uploads/\";\n\nexport interface StoredFile {\n key: string;\n contentType: string;\n}\n\nexport async function storeBase64(\n dataUrl: string,\n): Promise {\n // dataUrl: \"data:image/png;base64,....\"\n const m = dataUrl.match(/^data:([^;]+);base64,(.*)$/s);\n if (!m) throw new Error(\"Invalid data URL\");\n const contentType = m[1];\n const b64 = m[2];\n const bytes = Uint8Array.from(atob(b64), (c) => c.charCodeAt(0));\n const ext = contentType.split(\"/\")[1]?.split(\"+\")[0] || \"bin\";\n const id = crypto.randomUUID();\n const key = `${PREFIX}${id}.${ext}`;\n await blob.set(key, bytes);\n // store content type alongside\n await blob.setJSON(`${key}.meta`, { contentType });\n return { key, contentType };\n}\n\nexport async function readStored(\n key: string,\n): Promise<{ bytes: Uint8Array; contentType: string } | null> {\n if (!key.startsWith(PREFIX)) return null;\n try {\n const buf = await blob.get(key);\n if (!buf) return null;\n const bytes = new Uint8Array(await buf.arrayBuffer());\n let contentType = \"application/octet-stream\";\n try {\n const meta = await blob.getJSON<{ contentType: string }>(`${key}.meta`);\n if (meta?.contentType) contentType = meta.contentType;\n } catch { /* ignore */ }\n return { bytes, contentType };\n } catch {\n return null;\n }\n}\n",[],[171,220],"ecb07e2f-fc18-4c6a-8f81-cda93dea6f9c",["D",1780564937050],3,[],[171,39],"830d4639-65cc-48df-9399-bf120ba3c6ed","db.ts","019e91ec-6eb3-741e-9cca-aaca4fa7b607",["D",1780564651587],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nconst TABLE = \"genvideo_jobs_v1\";\n\nexport async function initDb() {\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n task_id TEXT UNIQUE,\n prompt TEXT,\n dialogue TEXT,\n image_url TEXT,\n resolution TEXT,\n duration INTEGER,\n aspect TEXT,\n status TEXT,\n video_url TEXT,\n error TEXT,\n created_at INTEGER\n )`);\n}\n\nexport interface JobRow {\n id: number;\n task_id: string;\n prompt: string;\n dialogue: string;\n image_url: string;\n resolution: string;\n duration: number;\n aspect: string;\n status: string;\n video_url: string | null;\n error: string | null;\n created_at: number;\n}\n\nexport async function insertJob(j: Omit) {\n await initDb();\n await sqlite.execute({\n sql:\n `INSERT INTO ${TABLE} (task_id, prompt, dialogue, image_url, resolution, duration, aspect, status, video_url, error, created_at)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n args: [\n j.task_id,\n j.prompt,\n j.dialogue,\n j.image_url,\n j.resolution,\n j.duration,\n j.aspect,\n j.status,\n j.video_url,\n j.error,\n j.created_at,\n ],\n });\n}\n\nexport async function updateJob(\n taskId: string,\n patch: { status?: string; video_url?: string | null; error?: string | null },\n) {\n await initDb();\n const sets: string[] = [];\n const args: (string | null)[] = [];\n if (patch.status !== undefined) {\n sets.push(\"status = ?\");\n args.push(patch.status);\n }\n if (patch.video_url !== undefined) {\n sets.push(\"video_url = ?\");\n args.push(patch.video_url);\n }\n if (patch.error !== undefined) {\n sets.push(\"error = ?\");\n args.push(patch.error);\n }\n if (!sets.length) return;\n args.push(taskId);\n await sqlite.execute({\n sql: `UPDATE ${TABLE} SET ${sets.join(\", \")} WHERE task_id = ?`,\n args,\n });\n}\n\nexport async function listJobs(limit = 20): Promise {\n await initDb();\n const res = await sqlite.execute({\n sql: `SELECT * FROM ${TABLE} ORDER BY created_at DESC LIMIT ?`,\n args: [limit],\n });\n return res.rows as unknown as JobRow[];\n}\n",[],[171,232],"ba924c3b-1927-45f9-8253-1204b23e6bdf","aliyun.ts","019e91ec-6eb3-741e-9cca-a72a1104b9b1",["D",1780564651587],"// Aliyun DashScope Wan image-to-video (with native audio) client.\n// Docs pattern: POST async task -> poll task_id until SUCCEEDED.\n\nconst HOST = Deno.env.get(\"DASHSCOPE_HOST\") ||\n \"ws-t016nv3snw0xntrt.ap-southeast-1.maas.aliyuncs.com\";\nconst API_KEY = Deno.env.get(\"DASHSCOPE_API_KEY\") || \"\";\nconst BASE = `https://${HOST}/api/v1`;\n\n// Model is configurable. The key you provided targets this model. If the API\n// returns \"model not found\", change this to \"wan2.5-i2v-preview\".\nexport const MODEL = Deno.env.get(\"WAN_MODEL\") || \"wan2.7-i2v\";\n\nexport interface GenerateParams {\n prompt: string;\n imageUrl: string; // public URL for first_frame\n resolution?: string; // e.g. \"720P\", \"1080P\"\n duration?: number; // seconds\n audioUrl?: string; // optional driving_audio; if omitted model generates voice\n promptExtend?: boolean;\n watermark?: boolean;\n}\n\nexport interface TaskCreated {\n task_id: string;\n task_status: string;\n}\n\nfunction authHeaders(extra: Record = {}) {\n return {\n \"Authorization\": `Bearer ${API_KEY}`,\n \"Content-Type\": \"application/json\",\n ...extra,\n };\n}\n\n/** Create an async video-generation task. Returns the task_id. */\nexport async function createTask(p: GenerateParams): Promise {\n const media: Array<{ type: string; url: string }> = [\n { type: \"first_frame\", url: p.imageUrl },\n ];\n if (p.audioUrl) media.push({ type: \"driving_audio\", url: p.audioUrl });\n\n const body = {\n model: MODEL,\n input: {\n prompt: p.prompt,\n media,\n },\n parameters: {\n resolution: p.resolution ?? \"720P\",\n duration: p.duration ?? 10,\n prompt_extend: p.promptExtend ?? true,\n watermark: p.watermark ?? false,\n },\n };\n\n const res = await fetch(\n `${BASE}/services/aigc/video-generation/video-synthesis`,\n {\n method: \"POST\",\n headers: authHeaders({ \"X-DashScope-Async\": \"enable\" }),\n body: JSON.stringify(body),\n },\n );\n\n const json = await res.json().catch(() => ({}));\n if (!res.ok) {\n throw new Error(\n `DashScope create task failed (${res.status}): ${JSON.stringify(json)}`,\n );\n }\n const output = json.output ?? {};\n if (!output.task_id) {\n throw new Error(\n `DashScope did not return task_id: ${JSON.stringify(json)}`,\n );\n }\n return { task_id: output.task_id, task_status: output.task_status };\n}\n\nexport interface TaskStatus {\n task_id: string;\n task_status: string; // PENDING | RUNNING | SUCCEEDED | FAILED | UNKNOWN\n video_url?: string;\n message?: string;\n raw: unknown;\n}\n\n/** Poll a task by id. */\nexport async function getTask(taskId: string): Promise {\n const res = await fetch(`${BASE}/tasks/${taskId}`, {\n method: \"GET\",\n headers: authHeaders(),\n });\n const json = await res.json().catch(() => ({}));\n if (!res.ok) {\n throw new Error(\n `DashScope get task failed (${res.status}): ${JSON.stringify(json)}`,\n );\n }\n const output = json.output ?? {};\n return {\n task_id: output.task_id ?? taskId,\n task_status: output.task_status ?? \"UNKNOWN\",\n video_url: output.video_url,\n message: output.message ?? json.message,\n raw: json,\n };\n}\n",[],[171,239],["D",1780564651587],[187,188,189,190],[171],["D",1780564651587],["D",1789528252206],{"_110":109,"_118":114},{"_110":109,"_111":112,"_113":114,"_19":62,"_115":116,"_117":31},{"_13":95,"_38":96,"_50":49,"_97":51,"_98":99,"_100":101,"_102":57,"_103":104,"_105":106,"_107":52,"_108":109},"ctx",{"_88":-5,"_140":286,"_287":288,"_289":290,"_291":31,"_292":31,"_293":31,"_294":65,"_295":-5,"_296":-7,"_297":-7,"_298":69,"_299":31,"_300":31,"_301":-5,"_302":31,"_303":31,"_304":31,"_305":-5},"ENV",{"_257":258,"_259":260,"_261":96,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285},"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"]

Diff · v6