\n \n \n \n",[],[80,82],"4e541302-d5a5-4d6f-9109-2771b9427998","favicon.svg","019f37ec-95af-73d5-92de-c46ec1d1e2e9",["D",1783349679547],"\n",[],[80,91],"e460b7a2-3804-44de-9b3d-254e6d98df63","App.tsx","019f37ec-95ae-770e-ad96-249ece17a16b","019f37ec-95ae-770e-ad96-23041ee579e3",7,["D",1783349739993],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\n\nconst ASPECT_RATIOS = [\"16:9\", \"9:16\", \"1:1\"] as const;\nconst RESOLUTIONS = [\"720p\", \"1080p\"] as const;\nconst DURATIONS = [5, 10] as const;\n\nconst EXAMPLE_PROMPTS = [\n \"A glowing crystal-powered rocket launching from the red dunes of Mars, ancient alien ruins lighting up in the background\",\n \"A serene Japanese garden in autumn, cherry blossoms falling gently as a koi pond reflects the golden sunset\",\n \"A futuristic city at night with flying cars weaving between neon-lit skyscrapers, holographic billboards glowing\",\n \"A majestic eagle soaring over snow-capped mountains at dawn, clouds rolling through the valleys below\",\n];\n\ntype GenState = \"idle\" | \"creating\" | \"polling\" | \"done\" | \"error\";\n\nexport function App() {\n const [prompt, setPrompt] = useState(\"\");\n const [duration, setDuration] = useState(10);\n const [aspectRatio, setAspectRatio] = useState(\"16:9\");\n const [resolution, setResolution] = useState(\"720p\");\n\n const [state, setState] = useState(\"idle\");\n const [progress, setProgress] = useState(\"0%\");\n const [statusText, setStatusText] = useState(\"\");\n const [videoUrl, setVideoUrl] = useState(\"\");\n const [errorMsg, setErrorMsg] = useState(\"\");\n\n const pollTimer = useRef(null);\n\n const stopPolling = useCallback(() => {\n if (pollTimer.current) {\n clearInterval(pollTimer.current);\n pollTimer.current = null;\n }\n }, []);\n\n const pollStatus = useCallback(async (taskId: string) => {\n try {\n const res = await fetch(`/api/status/${taskId}`);\n const data = await res.json();\n\n setProgress(data.progress || \"0%\");\n setStatusText(data.status || \"unknown\");\n\n if (data.error) {\n stopPolling();\n setState(\"error\");\n setErrorMsg(data.error);\n return;\n }\n\n if (data.videoUrl) {\n stopPolling();\n setVideoUrl(data.videoUrl);\n setState(\"done\");\n return;\n }\n } catch (err) {\n stopPolling();\n setState(\"error\");\n setErrorMsg(String(err));\n }\n }, [stopPolling]);\n\n const handleGenerate = useCallback(async () => {\n if (!prompt.trim()) return;\n\n setState(\"creating\");\n setProgress(\"0%\");\n setStatusText(\"\");\n setVideoUrl(\"\");\n setErrorMsg(\"\");\n stopPolling();\n\n try {\n const res = await fetch(\"/api/generate\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n prompt,\n duration,\n aspect_ratio: aspectRatio,\n resolution,\n }),\n });\n\n const data = await res.json();\n\n if (data.error) {\n setState(\"error\");\n setErrorMsg(data.error + (data.detail ? ` — ${JSON.stringify(data.detail)}` : \"\"));\n return;\n }\n\n setState(\"polling\");\n setStatusText(\"queued\");\n\n // Poll immediately, then every 8 seconds\n pollStatus(data.taskId);\n pollTimer.current = setInterval(() => pollStatus(data.taskId), 8000);\n } catch (err) {\n setState(\"error\");\n setErrorMsg(String(err));\n }\n }, [prompt, duration, aspectRatio, resolution, stopPolling, pollStatus]);\n\n const handleReset = useCallback(() => {\n stopPolling();\n setState(\"idle\");\n setProgress(\"0%\");\n setStatusText(\"\");\n setVideoUrl(\"\");\n setErrorMsg(\"\");\n }, [stopPolling]);\n\n const isBusy = state === \"creating\" || state === \"polling\";\n const progressNum = parseInt(progress.replace(\"%\", \"\"), 10) || 0;\n\n return (\n

\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",[],[80,106,98],"components","37cd868f-8c95-40e1-b03a-b8dfe910a926",["D",1783349679547],"directory",[65],[80,106],"1d91104f-071b-431a-9cf4-45fa791a4f92",["D",1783349679547],[64,66,67,68],[80],{"_39":112,"_13":80,"_42":72,"_44":-5,"_45":46,"_47":73,"_49":38,"_50":120,"_16":75,"_53":109,"_55":-5,"_57":35,"_58":-5,"_61":121},{"_39":40,"_13":41,"_42":43,"_44":-5,"_45":46,"_47":48,"_49":38,"_50":118,"_16":52,"_53":54,"_55":56,"_57":35,"_58":-5,"_61":119},["D",1783349706735],[41],["D",1783349679547],[80],"pulls","branches","forks","envVars",{"_129":52,"_131":75},"connections",{"_129":75,"_130":75},"count","unfilledCount","emptyCount","ffa76465-67bd-49a3-a561-d88cc1855d97",["D",1783349562003],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","AI Video Generator using Grok Imagine Video via CometAPI","imageUrl","userId","d8c5eeb4-3162-4535-b018-11a66f67b4e4","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019f37e9-500b-7638-95f4-215ca3e09403","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_186":181},"org",{"_11":12,"_180":181,"_182":181,"_142":143,"_183":184,"_185":35},"branch",{"_16":101,"_13":171,"_39":46,"_172":132,"_173":-5,"_174":-5,"_175":-5,"_176":-5,"_177":-5,"_178":14,"_179":12},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_39":132,"_13":14,"_50":231,"_134":-5,"_135":35,"_136":137,"_138":137,"_139":140,"_141":-5,"_142":143,"_144":43,"_145":38,"_146":-5,"_147":-5,"_148":75,"_149":150,"_151":-5,"_152":-5,"_153":-5,"_154":-5,"_155":156,"_157":156,"_158":159,"_160":159,"_161":159,"_162":156,"_163":156,"_164":232,"_166":233,"_168":234,"_170":35},"tree",[210,216],[210,211,212,213,214,215,216],{"_122":75,"_123":52,"_124":75,"_125":208,"_127":209},[204,205],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_39":112,"_13":80,"_42":72,"_44":-5,"_45":46,"_47":73,"_49":38,"_50":120,"_16":75,"_53":109,"_55":-5,"_57":35,"_58":-5,"_61":207},{"_39":40,"_13":41,"_42":43,"_44":-5,"_45":46,"_47":48,"_49":38,"_50":118,"_16":52,"_53":54,"_55":56,"_57":35,"_58":-5,"_61":206},[41],[80],{"_129":52,"_131":75},{"_129":75,"_130":75},{"_39":112,"_13":80,"_42":72,"_44":-5,"_45":46,"_47":73,"_49":38,"_50":113,"_16":75,"_53":109,"_55":-5,"_57":35,"_58":-5,"_59":229,"_61":230},{"_39":107,"_13":106,"_42":100,"_44":72,"_45":46,"_47":73,"_49":38,"_50":108,"_16":75,"_53":109,"_55":-5,"_57":35,"_58":-5,"_59":227,"_61":228},{"_39":97,"_13":98,"_42":99,"_44":100,"_45":46,"_47":101,"_49":38,"_50":102,"_16":52,"_53":76,"_55":103,"_57":35,"_58":-5,"_59":225,"_61":226},{"_39":90,"_13":91,"_42":92,"_44":72,"_45":46,"_47":73,"_49":38,"_50":93,"_16":75,"_53":86,"_55":94,"_57":35,"_58":-5,"_59":223,"_61":224},{"_39":81,"_13":82,"_42":83,"_44":72,"_45":46,"_47":84,"_49":38,"_50":85,"_16":52,"_53":86,"_55":87,"_57":35,"_58":-5,"_59":221,"_61":222},{"_39":69,"_13":70,"_42":71,"_44":72,"_45":46,"_47":73,"_49":38,"_50":74,"_16":75,"_53":76,"_55":77,"_57":35,"_58":-5,"_59":219,"_61":220},{"_39":40,"_13":41,"_42":43,"_44":-5,"_45":46,"_47":48,"_49":38,"_50":51,"_16":52,"_53":54,"_55":56,"_57":35,"_58":-5,"_59":217,"_61":218},[],[41],[],[80,70],[],[80,82],[],[80,91],[],[80,106,98],[212],[80,106],[211,213,214,215],[80],["D",1783349562003],{"_11":12,"_186":181},{"_11":12,"_180":181,"_182":181,"_142":143,"_183":184,"_185":35},{"_16":101,"_13":171,"_39":46,"_172":132,"_173":-5,"_174":-5,"_175":-5,"_176":-5,"_177":-5,"_178":14,"_179":12},"ctx",{"_164":-5,"_201":268,"_269":270,"_271":272,"_273":35,"_274":35,"_275":35,"_276":38,"_277":-5,"_278":-7,"_279":-7,"_280":75,"_281":35,"_282":35,"_283":-5,"_284":35,"_285":35,"_286":35,"_287":-5},"ENV",{"_239":240,"_241":242,"_243":171,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","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"]

pahilu60

imadeo