[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_252":253,"_254":255},"routes/_app.x.$handle.$name",{"_108":107,"_38":50,"_117":94,"_33":118,"_13":14,"_119":-5,"_11":120,"_121":122,"_123":124,"_125":126,"_127":128,"_26":-5,"_129":130,"_131":132,"_133":31,"_134":135,"_136":64,"_137":-5,"_138":-5,"_139":140},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":31},"version",9,"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":34,"_39":26,"_40":42,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":34,"_39":26,"_40":41},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","019e91ec-6eb3-741e-9cca-c72262cac943","name","fileType","content","# 🎬 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","# 🎬 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 (tuỳ chọn). Mặc định `dashscope-intl.aliyuncs.com`. Có thể nhập kèm `https://` hoặc `/api/v1` — code tự chuẩn hoá. |\n| `WAN_MODEL` | Tên model, mặc định `wan2.5-i2v-preview`. Nếu báo \"model not found\" → đổi sang model có trong region của bạn (vd `wan2.6-i2v-flash`) |\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","createdAt",["D",1780565024854],"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","019e91ec-6eb3-741e-9cca-ad2ba262d939","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",{"_108":107,"_116":112},"org",{"_108":107,"_109":110,"_111":112,"_19":60,"_113":114,"_115":31},"branch",{"_13":14,"_38":94,"_48":47,"_95":49,"_96":97,"_98":99,"_100":55,"_101":102,"_103":104,"_105":50,"_106":107},"isOwned","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",{"_48":49,"_38":50,"_43":247,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":248,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":249,"_89":250,"_91":251,"_93":31},"tree",[181,186,189],"files",[181,182,183,184,185,186,187,188,189],"counts",{"_170":68,"_171":156,"_172":68,"_173":174,"_175":176},"contents",[149,150,151],"upstreamProject",{"_48":102,"_38":50,"_57":58,"_59":-5,"_54":55,"_87":147},"upstreamBranch",{"_48":97,"_43":141,"_142":143,"_38":94,"_95":102,"_13":99,"_96":-5,"_98":-5,"_144":145,"_52":-5,"_93":31,"_54":55,"_106":146,"_69":104,"_105":50},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1780548746393],"updatedAt",["D",1780549939305],"lockfileKey","1780549952215-esm.town_v_roxannadejesus_genvideo@11-main","roxannadejesus",{"_108":146,"_116":148},"https://lh3.googleusercontent.com/a/ACg8ocK1ofRLoR-LtNcZUqraAIRWTjCpcTL1ym-_1GOfKxX3FMYilg=s96-c",{"_48":165,"_38":166,"_36":167,"_153":-5,"_46":47,"_45":156,"_154":64,"_43":168,"_13":68,"_39":163,"_40":-5,"_30":31,"_157":-5,"_33":169},{"_48":159,"_38":160,"_36":161,"_153":-5,"_46":47,"_45":156,"_154":64,"_43":162,"_13":68,"_39":163,"_40":-5,"_30":31,"_157":-5,"_33":164},{"_48":152,"_38":34,"_36":37,"_153":-5,"_46":47,"_45":14,"_154":64,"_43":155,"_13":156,"_39":26,"_40":42,"_30":31,"_157":-5,"_33":158},"9dfa049a-15f9-4cf5-b082-062e539a465b","parentId","latest",["D",1780565024854],1,"label",[34],"a1dd75e7-d15d-474e-93d8-369f25a2b953","frontend","019e91ec-6eb3-741e-9cca-c21a2ba8b74d",["D",1780564651587],"directory",[160],"913b5077-c77d-4118-9fe9-e1e80ee5d8c1","backend","019e91ec-6eb3-741e-9cca-b52dd6e523c0",["D",1780564651587],[166],"pulls","branches","forks","envVars",{"_177":179,"_180":68},"connections",{"_177":68,"_178":68},"count","unfilledCount",2,"emptyCount",{"_48":165,"_38":166,"_36":167,"_153":-5,"_46":47,"_45":156,"_154":64,"_43":244,"_13":68,"_39":163,"_40":-5,"_30":31,"_157":-5,"_191":245,"_33":246},{"_48":236,"_38":237,"_36":238,"_153":167,"_46":47,"_45":239,"_154":64,"_43":240,"_13":156,"_39":207,"_40":241,"_30":31,"_157":-5,"_191":242,"_33":243},{"_48":229,"_38":230,"_36":231,"_153":167,"_46":47,"_45":156,"_154":64,"_43":232,"_13":68,"_39":207,"_40":233,"_30":31,"_157":-5,"_191":234,"_33":235},{"_48":221,"_38":222,"_36":62,"_153":167,"_46":47,"_45":223,"_154":64,"_43":224,"_13":197,"_39":225,"_40":226,"_30":31,"_157":-5,"_191":227,"_33":228},{"_48":214,"_38":215,"_36":216,"_153":167,"_46":47,"_45":156,"_154":64,"_43":217,"_13":68,"_39":207,"_40":218,"_30":31,"_157":-5,"_191":219,"_33":220},{"_48":159,"_38":160,"_36":161,"_153":-5,"_46":47,"_45":156,"_154":64,"_43":211,"_13":68,"_39":163,"_40":-5,"_30":31,"_157":-5,"_191":212,"_33":213},{"_48":202,"_38":203,"_36":204,"_153":161,"_46":47,"_45":205,"_154":64,"_43":206,"_13":156,"_39":207,"_40":208,"_30":31,"_157":-5,"_191":209,"_33":210},{"_48":194,"_38":195,"_36":196,"_153":161,"_46":47,"_45":197,"_154":64,"_43":198,"_13":156,"_39":26,"_40":199,"_30":31,"_157":-5,"_191":200,"_33":201},{"_48":152,"_38":34,"_36":37,"_153":-5,"_46":47,"_45":14,"_154":64,"_43":190,"_13":156,"_39":26,"_40":42,"_30":31,"_157":-5,"_191":192,"_33":193},["D",1780565024854],"children",[],[34],"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",[],[160,195],"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",[],[160,203],["D",1780564651587],[187,188],[160],"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",[],[166,215],"a5d342bc-d229-4f94-8bef-64c40d2f5eb0","index.ts",7,["D",1780564940065],"http","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// serveFile transpiles the TSX to JS and sets the correct Content-Type.\napp.get(\"/frontend/app.tsx\", () => serveFile(\"/frontend/app.tsx\", import.meta.url));\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",[],[166,222],"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",[],[166,230],"c5dc63da-e699-45d6-8947-9c964d293127","aliyun.ts","019e91ec-6eb3-741e-9cca-a72a1104b9b1",8,["D",1780564990879],"// Aliyun DashScope Wan image-to-video client.\n// Docs: https://www.alibabacloud.com/help/en/model-studio/image-to-video-api-reference\n// Pattern: POST async task (X-DashScope-Async: enable) -> poll task_id until SUCCEEDED.\n\n// Normalize the host the user configured. We accept any of these forms and turn\n// them into a clean `https://` origin (no trailing slash, no /api/v1):\n// dashscope-intl.aliyuncs.com\n// https://dashscope-intl.aliyuncs.com\n// https://dashscope-intl.aliyuncs.com/api/v1\nfunction resolveBase(): string {\n let host = (Deno.env.get(\"DASHSCOPE_HOST\") || \"dashscope-intl.aliyuncs.com\").trim();\n // Strip any protocol the user may have included.\n host = host.replace(/^https?:\\/\\//i, \"\");\n // Strip a trailing /api/v1 (with or without trailing slash) and any trailing slashes.\n host = host.replace(/\\/+$/, \"\").replace(/\\/api\\/v1$/i, \"\").replace(/\\/+$/, \"\");\n return `https://${host}/api/v1`;\n}\n\nconst BASE = resolveBase();\nconst API_KEY = (Deno.env.get(\"DASHSCOPE_API_KEY\") || \"\").trim();\n\n// Model is configurable. International region default. If the API returns\n// \"model not found\", set WAN_MODEL env var to a model available in your region\n// (e.g. \"wan2.5-i2v-preview\" or \"wan2.6-i2v-flash\").\nexport const MODEL = Deno.env.get(\"WAN_MODEL\") || \"wan2.5-i2v-preview\";\n\nexport interface GenerateParams {\n prompt: string;\n imageUrl: string; // public URL used as first frame (img_url)\n resolution?: string; // e.g. \"720P\", \"1080P\"\n duration?: number; // seconds\n audioUrl?: string; // optional driving audio (audio_url)\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 if (!API_KEY) {\n throw new Error(\"Chưa cấu hình DASHSCOPE_API_KEY trong Environment Variables.\");\n }\n\n const input: Record = {\n prompt: p.prompt,\n img_url: p.imageUrl,\n };\n if (p.audioUrl) input.audio_url = p.audioUrl;\n\n const body = {\n model: MODEL,\n input,\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",[],[166,237],["D",1780564651587],[182,183,184,185],[166],["D",1780564651587],["D",1789528252206],{"_108":107,"_116":112},{"_108":107,"_109":110,"_111":112,"_19":60,"_113":114,"_115":31},{"_13":14,"_38":94,"_48":47,"_95":49,"_96":97,"_98":99,"_100":55,"_101":102,"_103":104,"_105":50,"_106":107},"ctx",{"_87":-5,"_138":285,"_286":287,"_288":289,"_290":31,"_291":31,"_292":31,"_293":64,"_294":-5,"_295":-7,"_296":-7,"_297":68,"_298":31,"_299":31,"_300":-5,"_301":31,"_302":31,"_303":31,"_304":-5},"ENV",{"_256":257,"_258":259,"_260":94,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284},"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 · v9