\n {/* Header */}\n

\n 🎬 AI Video Generator\n

\n Tạo video từ mô tả văn bản bằng Grok Imagine Video\n

\n\n {/* Form */}\n

\n Prompt\n setPrompt(e.target.value)}\n disabled={isBusy}\n />\n\n {/* Example prompts */}\n {!isBusy && state === \"idle\" && (\n

\n Gợi ý:\n {EXAMPLE_PROMPTS.map((ex, i) => (\n setPrompt(ex)}\n >\n {ex.slice(0, 40)}...\n \n ))}\n

\n )}\n\n {/* Options */}\n

\n Thời lượng\n setDuration(Number(e.target.value))}\n disabled={isBusy}\n >\n {DURATIONS.map((d) => (\n \n ))}\n \n

\n Tỉ lệ\n setAspectRatio(e.target.value)}\n disabled={isBusy}\n >\n {ASPECT_RATIOS.map((r) => (\n \n ))}\n \n

\n Độ phân giải\n setResolution(e.target.value)}\n disabled={isBusy}\n >\n {RESOLUTIONS.map((r) => (\n \n ))}\n \n

\n\n {/* Buttons */}\n

\n \n {state === \"creating\" ? \"Đang tạo...\" : \"✨ Tạo Video\"}\n \n {(isBusy || state === \"done\" || state === \"error\") && (\n \n ↺ Reset\n \n )}\n

\n\n {/* Progress */}\n {isBusy && (\n

\n \n {state === \"creating\" ? \"Đang gửi yêu cầu...\" : \"Đang tạo video...\"}\n \n {progress}\n

\n \n

\n {statusText && (\n

Trạng thái: {statusText}

\n )}\n

\n ⏳\n Video generation có thể mất vài phút. Vui lòng đợi...\n

\n )}\n\n {/* Video result */}\n {state === \"done\" && videoUrl && (\n

✅ Video của bạn đã sẵn sàng!

\n \n \n ⬇ Tải xuống video\n \n

\n )}\n\n {/* Error */}\n {state === \"error\" && (\n

❌ Có lỗi xảy ra

{errorMsg}

\n )}\n\n {/* Footer */}\n \n

\n );\n}\n",[180,100,82],"pulls","branches","forks","envVars",{"_79":184,"_195":26},"connections",{"_79":26,"_194":26},"unfilledCount","emptyCount",{"_35":240,"_13":180,"_70":173,"_45":-5,"_37":38,"_174":42,"_175":24,"_39":241,"_41":26,"_73":101,"_177":-5,"_75":30,"_178":-5,"_209":242,"_17":243},{"_35":172,"_13":100,"_70":99,"_45":173,"_37":38,"_174":42,"_175":24,"_39":237,"_41":26,"_73":101,"_177":-5,"_75":30,"_178":-5,"_209":238,"_17":239},{"_35":182,"_13":82,"_70":81,"_45":99,"_37":38,"_174":93,"_175":24,"_39":234,"_41":184,"_73":74,"_177":185,"_75":30,"_178":-5,"_209":235,"_17":236},{"_35":227,"_13":228,"_70":229,"_45":173,"_37":38,"_174":42,"_175":24,"_39":230,"_41":26,"_73":21,"_177":231,"_75":30,"_178":-5,"_209":232,"_17":233},{"_35":219,"_13":220,"_70":221,"_45":173,"_37":38,"_174":222,"_175":24,"_39":223,"_41":184,"_73":21,"_177":224,"_75":30,"_178":-5,"_209":225,"_17":226},{"_35":212,"_13":213,"_70":214,"_45":173,"_37":38,"_174":42,"_175":24,"_39":215,"_41":26,"_73":74,"_177":216,"_75":30,"_178":-5,"_209":217,"_17":218},{"_35":203,"_13":204,"_70":114,"_45":-5,"_37":38,"_174":205,"_175":24,"_39":206,"_41":184,"_73":207,"_177":208,"_75":30,"_178":-5,"_209":210,"_17":211},"84b23a79-ce6c-44f3-be29-2477b4441b64","index.ts",5,["D",1783349706735],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\nconst API_KEY = Deno.env.get(\"COMETAPI_KEY\") || \"\";\nconst BASE_URL = \"https://api.cometapi.com/grok/v1\";\n\nconst headers = {\n \"Authorization\": `Bearer ${API_KEY}`,\n \"Content-Type\": \"application/json\",\n};\n\n// ============================================================\n// Frontend routes\n// ============================================================\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ============================================================\n// API: Create video generation task\n// ============================================================\napp.post(\"/api/generate\", async (c) => {\n const body = await c.req.json();\n const {\n prompt,\n duration = 10,\n aspect_ratio = \"16:9\",\n resolution = \"720p\",\n } = body;\n\n if (!prompt || prompt.trim().length === 0) {\n return c.json({ error: \"Prompt is required\" }, 400);\n }\n\n const payload = {\n model: \"grok-imagine-video\",\n prompt: prompt.trim(),\n duration,\n aspect_ratio,\n resolution,\n };\n\n const res = await fetch(`${BASE_URL}/videos/generations`, {\n method: \"POST\",\n headers,\n body: JSON.stringify(payload),\n });\n\n const result = await res.json();\n const taskId = result?.request_id || result?.id;\n\n if (!taskId) {\n return c.json({\n error: \"Failed to create video task\",\n detail: result,\n }, 500);\n }\n\n return c.json({ taskId });\n});\n\n// ============================================================\n// API: Poll task status\n// ============================================================\napp.get(\"/api/status/:taskId\", async (c) => {\n const taskId = c.req.param(\"taskId\");\n\n const res = await fetch(`${BASE_URL}/videos/${taskId}`, {\n method: \"GET\",\n headers,\n });\n\n const result = await res.json();\n const data = result?.data || {};\n const status = data?.status || \"unknown\";\n const progress = data?.progress || \"0%\";\n\n const response: Record = { status, progress };\n\n if ([\"FAILURE\", \"failed\"].includes(status)) {\n response.error = data?.fail_reason || \"Video generation failed\";\n return c.json(response);\n }\n\n if (status === \"SUCCESS\") {\n const videoUrl = data?.data?.video?.url;\n if (videoUrl) {\n response.videoUrl = videoUrl;\n }\n }\n\n return c.json(response);\n});\n\n// Unwrap and rethrow Hono errors\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[204],"29c3facf-75ff-4b61-bc60-6ba6bc54c79b","index.tsx","019f37ec-95af-73d5-92de-cca2e574a985",["D",1783349679547],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[180,213],"5101f94c-f0b3-4364-88d8-9e7787e0bd31","index.html","019f37ec-95af-73d5-92de-c9200369c1c8",6,["D",1783349709680],"\n\n \n \n \n AI Video Generator — Grok Imagine\n \n \n \n \n

\n \n \n \n",[],[180,220],"4e541302-d5a5-4d6f-9109-2771b9427998","favicon.svg","019f37ec-95af-73d5-92de-c46ec1d1e2e9",["D",1783349679547],"\n",[],[180,228],["D",1783349739993],[],[180,100,82],["D",1783349679547],[198],[180,100],"1d91104f-071b-431a-9cf4-45fa791a4f92",["D",1783349679547],[197,199,200,201],[180],["D",1783349562003],{"_11":12,"_150":78},{"_11":12,"_146":78,"_77":78,"_31":76,"_147":148,"_149":30},{"_41":93,"_13":16,"_35":38,"_138":103,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":14,"_145":12},"ctx",{"_55":-5,"_169":281,"_282":283,"_284":285,"_286":30,"_287":30,"_288":30,"_289":24,"_290":-5,"_291":-7,"_292":-7,"_293":26,"_294":30,"_295":30,"_296":-5,"_297":30,"_298":30,"_299":30,"_300":-5},"ENV",{"_252":253,"_254":255,"_256":16,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · components