@effectnode/media 0.5.0 → 0.6.0

package/dist/backend/movie-backend/render-media.js

@@ -25,11 +25,9 @@ const PYTHON_DIR = join(APP_DATA_DIR, "python-src");
 const TEMP_DIR = join(APP_DATA_DIR, "temp");
 const PROJECTS_FILE = join(JSON_DIR, "projects.json");
 const CHARACTERS_FILE = join(JSON_DIR, "characters.json");
-const MLXGEN_MODEL = "AbstractFramework/qwen-image-edit-2511-8bit";
 const Z_IMAGE_MODEL = "AbstractFramework/z-image-turbo-8bit";
 const FLUX_KLEIN_MODEL = "AbstractFramework/flux.2-klein-4b-8bit";
 const MLX_VLM_MODEL = "mlx-community/gemma-4-e2b-it-4bit";
-const H3_MODEL = "appautomaton/minimax-h3-base-8bit-mlx";
 const VIDEO_STAGE_FLAGS = {
     distilled: "--distilled",
     "one-stage": "--one-stage",
@@ -330,7 +328,7 @@ function huggingfaceCacheDir() {
     return join(homedir(), ".cache", "huggingface", "hub");
 }
 /** True when the given MLX-Gen model has already been downloaded to the HF cache. */
-function isModelDownloaded(model = MLXGEN_MODEL) {
+function isModelDownloaded(model) {
     const modelDirName = `models--${model.replace("/", "--")}`;
     const snapshotsDir = join(huggingfaceCacheDir(), modelDirName, "snapshots");
     if (!existsSync(snapshotsDir))
@@ -2141,7 +2139,6 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
     app.get("/api/mlxgen/status", (_req, res) => {
         res.json({
             installed: isMlxgenInstalled(),
-            modelDownloaded: isModelDownloaded(),
             zModelDownloaded: isModelDownloaded(Z_IMAGE_MODEL),
             fluxModelDownloaded: isModelDownloaded(FLUX_KLEIN_MODEL),
         });
@@ -2190,50 +2187,6 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
             res.end();
         }
     });
-    // ========== MLX-Gen: Download Model ==========
-    app.post("/api/mlxgen/download-model", async (_req, res) => {
-        res.writeHead(200, {
-            "Content-Type": "text/event-stream",
-            "Cache-Control": "no-cache",
-            Connection: "keep-alive",
-            "X-Accel-Buffering": "no",
-        });
-        const send = (event, data) => {
-            res.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
-        };
-        try {
-            const mlxgen = await getMlxgenBin();
-            send("progress", {
-                status: "starting",
-                label: `Downloading model ${MLXGEN_MODEL}...`,
-            });
-            const proc = spawn([mlxgen, "download", "--model", MLXGEN_MODEL], {
-                stdout: "pipe",
-                stderr: "pipe",
-            });
-            activeProc = proc;
-            const stdoutPromise = streamToSSE(proc.stdout, "Download", send);
-            const stderrText = await streamToSSE(proc.stderr, "Download", send);
-            await stdoutPromise;
-            const exitCode = await proc.exited;
-            if (exitCode === 0) {
-                send("complete", { success: true });
-            }
-            else {
-                send("error", {
-                    error: stderrText || `Process exited with code ${exitCode}`,
-                    exitCode,
-                });
-            }
-        }
-        catch (e) {
-            send("error", { error: String(e) });
-        }
-        finally {
-            activeProc = null;
-            res.end();
-        }
-    });
     // ========== MLX-Gen: Download Z-Image Model ==========
     app.post("/api/mlxgen/download-z-model", async (_req, res) => {
         res.writeHead(200, {
@@ -2327,7 +2280,15 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
     app.get("/api/h3/status", (_req, res) => {
         res.json({ downloaded: isH3ModelDownloaded() });
     });
-    app.post("/api/h3/download-model", async (_req, res) => {
+    // ========== Hugging Face CLI + LTX Video Model ==========
+    app.get("/api/hf/status", (_req, res) => {
+        res.json({
+            installed: whichSync("hf") !== null,
+            ltxDownloaded: isModelDownloaded("dgrauet/ltx-2.3-mlx-q8"),
+            ttsDownloaded: isModelDownloaded("Qwen/Qwen3-TTS-12Hz-1.7B-Base"),
+        });
+    });
+    app.post("/api/hf/install", async (_req, res) => {
         res.writeHead(200, {
             "Content-Type": "text/event-stream",
             "Cache-Control": "no-cache",
@@ -2337,25 +2298,15 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
         const send = (event, data) => {
             res.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
         };
-        // The `hf download` command must run from inside the mlx-h3 checkout so
-        // its weights land in <mlx-h3>/weights.
-        const featureFolder = join(PYTHON_DIR, "mlx-h3");
-        if (!existsSync(featureFolder)) {
-            mkdirSync(featureFolder, { recursive: true });
-        }
         try {
             send("progress", {
                 status: "starting",
-                label: `Downloading model ${H3_MODEL}...`,
-            });
-            const proc = spawn(["hf", "download", H3_MODEL, "--local-dir", "weights"], {
-                cwd: featureFolder,
-                stdout: "pipe",
-                stderr: "pipe",
+                label: "Installing huggingface-cli...",
             });
+            const proc = spawn(["bash", "-c", "curl -LsSf https://hf.co/cli/install.sh | bash"], { stdout: "pipe", stderr: "pipe" });
             activeProc = proc;
-            const stdoutPromise = streamToSSE(proc.stdout, "H3 Download", send);
-            const stderrText = await streamToSSE(proc.stderr, "H3 Download", send);
+            const stdoutPromise = streamToSSE(proc.stdout, "HF Install", send);
+            const stderrText = await streamToSSE(proc.stderr, "HF Install", send);
             await stdoutPromise;
             const exitCode = await proc.exited;
             if (exitCode === 0) {
@@ -2376,42 +2327,7 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
             res.end();
         }
     });
-    // ========== H3: Generate (References-to-Video) ==========
-    app.post("/api/h3/generate", async (req, res) => {
-        const { prompt, refs, projectId, steps = 20, width = 640, height = 448, frames = 121, seed = 42, } = req.body || {};
-        if (!prompt || typeof prompt !== "string" || !prompt.trim()) {
-            res.status(400).json({ error: "Prompt is required" });
-            return;
-        }
-        if (!projectId || !isValidProjectId(String(projectId))) {
-            res.status(400).json({ error: "Invalid project ID" });
-            return;
-        }
-        // Resolve ordered reference media (images, videos, and audio) to safe paths.
-        const mediaRefs = Array.isArray(refs)
-            ? refs.filter((r) => !!r &&
-                (r.kind === "image" || r.kind === "video" || r.kind === "audio") &&
-                typeof r.filename === "string" &&
-                !!r.filename.trim())
-            : [];
-        if (mediaRefs.length === 0) {
-            res.status(400).json({
-                error: "At least one reference image, video, or audio is required. Upload or select one first.",
-            });
-            return;
-        }
-        const resolvedRefs = [];
-        for (const ref of mediaRefs) {
-            const resolved = resolveSafePath(ref.filename.trim(), String(projectId));
-            if (!resolved) {
-                res.status(400).json({
-                    error: `Reference ${ref.kind} not found in this project: ${ref.filename}`,
-                });
-                return;
-            }
-            resolvedRefs.push({ kind: ref.kind, path: resolved });
-        }
-        // SSE headers
+    app.post("/api/hf/download-ltx", async (_req, res) => {
         res.writeHead(200, {
             "Content-Type": "text/event-stream",
             "Cache-Control": "no-cache",
@@ -2422,66 +2338,18 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
             res.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
         };
         try {
-            const featureFolder = join(PYTHON_DIR, "mlx-h3");
-            if (!existsSync(featureFolder)) {
-                send("error", { error: "mlx-h3 not found. Run setup first." });
-                res.end();
-                return;
-            }
-            const uvPath = await getUvPath();
-            const projectOutputDir = resolveOutputDir(null, String(projectId));
-            if (!projectOutputDir) {
-                send("error", { error: "Invalid output directory." });
-                res.end();
-                return;
-            }
-            const outputFile = `references-${Date.now()}.mp4`;
-            const outputPath = join(projectOutputDir, outputFile);
-            const stepCount = Number(steps) || 20;
-            const videoWidth = Number(width) || 640;
-            const videoHeight = Number(height) || 448;
-            const frameCount = Number(frames) || 121;
-            const seedValue = Number(seed) || 42;
             send("progress", {
                 status: "starting",
-                label: "Generating references-to-video...",
-                outputFile,
-                settings: {
-                    steps: stepCount,
-                    width: videoWidth,
-                    height: videoHeight,
-                    frames: frameCount,
-                    seed: seedValue,
-                },
-            });
-            const args = [uvPath, "run", "mlx-h3"];
-            for (const ref of resolvedRefs) {
-                const flag = ref.kind === "image"
-                    ? "--ref-image"
-                    : ref.kind === "video"
-                        ? "--ref-video"
-                        : "--ref-audio";
-                args.push(flag, ref.path);
-            }
-            args.push("--steps", String(stepCount), "--width", String(videoWidth), "--height", String(videoHeight), "--frames", String(frameCount), "--seed", String(seedValue), "--output", outputPath, prompt);
-            const proc = spawn(args, {
-                env: process.env,
-                cwd: featureFolder,
-                stdout: "pipe",
-                stderr: "pipe",
+                label: "Downloading dgrauet/ltx-2.3-mlx-q8...",
             });
+            const proc = spawn(["hf", "download", "dgrauet/ltx-2.3-mlx-q8"], { stdout: "pipe", stderr: "pipe" });
             activeProc = proc;
-            const stdoutPromise = streamToSSE(proc.stdout, "H3 Generate", send);
-            const stderrText = await streamToSSE(proc.stderr, "H3 Generate", send);
+            const stdoutPromise = streamToSSE(proc.stdout, "HF Download", send);
+            const stderrText = await streamToSSE(proc.stderr, "HF Download", send);
             await stdoutPromise;
             const exitCode = await proc.exited;
-            const success = exitCode === 0 && existsSync(outputPath);
-            if (success) {
-                send("complete", {
-                    success: true,
-                    path: outputPath,
-                    filename: outputFile,
-                });
+            if (exitCode === 0) {
+                send("complete", { success: true });
             }
             else {
                 send("error", {
@@ -2498,48 +2366,7 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
             res.end();
         }
     });
-    // ========== MLX-Gen: Generate (Image Edit) ==========
-    app.post("/api/mlxgen/generate", async (req, res) => {
-        const { prompt, imagePath, image, projectId, width, height } = req.body || {};
-        if (!prompt) {
-            res.status(400).json({ error: "Prompt is required" });
-            return;
-        }
-        if (!projectId) {
-            res.status(400).json({ error: "Project ID is required" });
-            return;
-        }
-        // Project IDs are generated by makeId() (alphanumeric + hyphen). Reject
-        // anything else (including `.`, `..`, and path separators) so a malicious
-        // projectId cannot escape OUTPUT_DIR/TEMP_DIR via `../`.
-        if (!/^[a-zA-Z0-9_-]{1,64}$/.test(String(projectId))) {
-            res.status(400).json({ error: "Invalid project ID" });
-            return;
-        }
-        // Resolve the character image. Prefer a client-side preprocessed PNG
-        // (base64), which is written to the temp workspace; otherwise fall back to
-        // a bare filename previously uploaded to this project.
-        let resolvedImage = null;
-        let tempImagePath = null;
-        if (image) {
-            // Decode base64 (strip data URL prefix if present)
-            const base64 = String(image).replace(/^data:image\/\w+;base64,/, "");
-            const buffer = Buffer.from(base64, "base64");
-            const tempDir = join(TEMP_DIR, String(projectId));
-            ensureDir(tempDir);
-            tempImagePath = join(tempDir, `temp-${Date.now()}.png`);
-            writeFileSync(tempImagePath, buffer);
-            resolvedImage = tempImagePath;
-        }
-        else if (imagePath) {
-            resolvedImage = resolveSafePath(imagePath, projectId);
-        }
-        if (!resolvedImage) {
-            res.status(400).json({
-                error: "Image is required. Provide a preprocessed image or a filename previously uploaded to this project.",
-            });
-            return;
-        }
+    app.post("/api/hf/download-tts", async (_req, res) => {
         res.writeHead(200, {
             "Content-Type": "text/event-stream",
             "Cache-Control": "no-cache",
@@ -2550,55 +2377,18 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
             res.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
         };
         try {
-            const mlxgen = await getMlxgenBin();
-            const projectOutputDir = join(OUTPUT_DIR, projectId);
-            ensureDir(projectOutputDir);
-            const outputFile = `mlxgen-${Date.now()}.png`;
-            const outputPath = join(projectOutputDir, outputFile);
             send("progress", {
                 status: "starting",
-                label: "Generating image...",
-                outputFile,
-            });
-            const args = [
-                mlxgen,
-                "generate",
-                "--model",
-                MLXGEN_MODEL,
-                "--image",
-                resolvedImage,
-                "--prompt",
-                prompt,
-                "--output",
-                outputPath,
-                "--steps",
-                String(40),
-            ];
-            // Optional output size (kept in the same aspect ratio by the client).
-            const outWidth = Number(width);
-            const outHeight = Number(height);
-            if (Number.isInteger(outWidth) &&
-                outWidth > 0 &&
-                Number.isInteger(outHeight) &&
-                outHeight > 0) {
-                args.push("--width", String(outWidth), "--height", String(outHeight));
-            }
-            const proc = spawn(args, {
-                stdout: "pipe",
-                stderr: "pipe",
+                label: "Downloading Qwen/Qwen3-TTS-12Hz-1.7B-Base...",
             });
+            const proc = spawn(["hf", "download", "Qwen/Qwen3-TTS-12Hz-1.7B-Base"], { stdout: "pipe", stderr: "pipe" });
             activeProc = proc;
-            const stdoutPromise = streamToSSE(proc.stdout, "MLXGen", send);
-            const stderrText = await streamToSSE(proc.stderr, "MLXGen", send);
+            const stdoutPromise = streamToSSE(proc.stdout, "HF Download", send);
+            const stderrText = await streamToSSE(proc.stderr, "HF Download", send);
             await stdoutPromise;
             const exitCode = await proc.exited;
-            const success = exitCode === 0 && existsSync(outputPath);
-            if (success) {
-                send("complete", {
-                    success: true,
-                    path: outputPath,
-                    filename: outputFile,
-                });
+            if (exitCode === 0) {
+                send("complete", { success: true });
             }
             else {
                 send("error", {
@@ -2612,22 +2402,6 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
         }
         finally {
             activeProc = null;
-            // Clean up the temporary workspace image now that generation is done.
-            if (tempImagePath) {
-                try {
-                    unlinkSync(tempImagePath);
-                }
-                catch {
-                    // already removed
-                }
-                try {
-                    // Remove the temp dir only when it is empty (no recursive delete).
-                    rmSync(join(TEMP_DIR, String(projectId)), { force: true });
-                }
-                catch {
-                    // ignore cleanup failures
-                }
-            }
             res.end();
         }
     });

package/frontend/index.html

@@ -7,11 +7,9 @@
   <meta name="theme-color" content="#eaf8f6" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..600&display=swap"
-    rel="stylesheet"
-  />
-  <title>Lambobo Studio</title>
+  <link href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..600&display=swap"
+    rel="stylesheet" />
+  <title>EffectNode Media</title>
 </head>
 
 <body>

package/frontend/src/movie-app/SetupPage.tsx

@@ -232,7 +232,7 @@ function SetupPage({ port = 8765 }) {
         {/* Hero */}
         <header>
           <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-tiffany-600">
-            Lambobo Studio
+            EffectNode Media
           </p>
           <h1 className="mt-3 font-display text-4xl font-light leading-[1.06] text-ink-900">
             Setting up{" "}

package/frontend/src/movie-app/components/EditorTabs/MovieStudioTab.tsx

@@ -324,20 +324,38 @@ export default function MovieStudioTab({ projectId }: Props) {
 
           {/* ===== Submit ===== */}
           {store.generating ? (
-            <div className="flex items-center gap-3">
-              <div className="flex items-center gap-2 flex-1 px-4 py-3 bg-ink-50 border border-ink-200 rounded-2xl">
-                {SpinnerIcon}
-                <span className="text-sm font-medium text-ink-700">
-                  Generating production bible...
-                </span>
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center gap-3">
+                <div className="flex items-center gap-2 flex-1 px-4 py-3 bg-ink-50 border border-ink-200 rounded-2xl">
+                  {SpinnerIcon}
+                  <span className="text-sm font-medium text-ink-700">
+                    {store.generateStatus ?? "Generating production bible..."}
+                  </span>
+                </div>
+                <button
+                  onClick={() => store.stop()}
+                  className="flex items-center justify-center gap-2 px-4 py-3 bg-red-500 hover:bg-red-600 active:bg-red-700 text-white text-sm font-semibold rounded-2xl transition-all duration-150 shadow-sm"
+                >
+                  {StopIcon}
+                  Stop
+                </button>
               </div>
-              <button
-                onClick={() => store.stop()}
-                className="flex items-center justify-center gap-2 px-4 py-3 bg-red-500 hover:bg-red-600 active:bg-red-700 text-white text-sm font-semibold rounded-2xl transition-all duration-150 shadow-sm"
-              >
-                {StopIcon}
-                Stop
-              </button>
+              {store.generateProgress && store.generateProgress.total > 0 && (
+                <div className="flex items-center gap-3 px-1">
+                  <div className="flex-1 h-2 bg-ink-200 rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-tiffany-500 rounded-full transition-all duration-300"
+                      style={{
+                        width: `${(store.generateProgress.current / store.generateProgress.total) * 100}%`,
+                      }}
+                    />
+                  </div>
+                  <span className="text-xs font-semibold text-ink-700 tabular-nums whitespace-nowrap">
+                    {store.generateProgress.current}/
+                    {store.generateProgress.total}
+                  </span>
+                </div>
+              )}
             </div>
           ) : (
             <button
@@ -387,7 +405,10 @@ export default function MovieStudioTab({ projectId }: Props) {
                             `character:${c.slug}`,
                           );
                           return (
-                            <tr key={c.slug} className="border-b border-ink-200">
+                            <tr
+                              key={c.slug}
+                              className="border-b border-ink-200"
+                            >
                               <td className="border border-ink-200 px-2 py-1.5 align-top font-mono text-[11px] text-tiffany-700">
                                 {c.slug}
                               </td>
@@ -418,7 +439,9 @@ export default function MovieStudioTab({ projectId }: Props) {
                                     />
                                   </div>
                                 ) : (
-                                  <span className="text-ink-300 text-xs">—</span>
+                                  <span className="text-ink-300 text-xs">
+                                    —
+                                  </span>
                                 )}
                               </td>
                               <td className="border border-ink-200 px-2 py-1.5 align-top">
@@ -468,7 +491,10 @@ export default function MovieStudioTab({ projectId }: Props) {
                             `place:${p.slug}`,
                           );
                           return (
-                            <tr key={p.slug} className="border-b border-ink-200">
+                            <tr
+                              key={p.slug}
+                              className="border-b border-ink-200"
+                            >
                               <td className="border border-ink-200 px-2 py-1.5 align-top font-mono text-[11px] text-tiffany-700">
                                 {p.slug}
                               </td>
@@ -499,14 +525,18 @@ export default function MovieStudioTab({ projectId }: Props) {
                                     />
                                   </div>
                                 ) : (
-                                  <span className="text-ink-300 text-xs">—</span>
+                                  <span className="text-ink-300 text-xs">
+                                    —
+                                  </span>
                                 )}
                               </td>
                               <td className="border border-ink-200 px-2 py-1.5 align-top">
                                 <EditableTextarea
                                   value={p.imagePrompt}
                                   onChange={(v) =>
-                                    store.updatePlace(p.slug, { imagePrompt: v })
+                                    store.updatePlace(p.slug, {
+                                      imagePrompt: v,
+                                    })
                                   }
                                   rows={3}
                                 />
@@ -522,9 +552,47 @@ export default function MovieStudioTab({ projectId }: Props) {
 
               {/* Scenes */}
               <div>
-                <h3 className="text-sm font-semibold text-ink-900 mb-2">
-                  Scenes
-                </h3>
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="text-sm font-semibold text-ink-900">Scenes</h3>
+                  {store.videosRendering ? (
+                    <span className="flex items-center gap-1.5 text-xs text-tiffany-600">
+                      {SpinnerIcon}
+                      {store.videoStatus ?? "Rendering..."}
+                    </span>
+                  ) : (
+                    <button
+                      onClick={() => store.renderVideos(projectId)}
+                      className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-xl bg-tiffany-500 hover:bg-tiffany-600 text-ink-950 transition-colors"
+                    >
+                      {SparkleIcon}
+                      Generate All Videos
+                    </button>
+                  )}
+                </div>
+
+                {store.videosRendering &&
+                  store.videoProgress &&
+                  store.videoProgress.total > 0 && (
+                    <div className="flex items-center gap-3 mb-2 px-1">
+                      <div className="flex-1 h-2 bg-ink-200 rounded-full overflow-hidden">
+                        <div
+                          className="h-full bg-tiffany-500 rounded-full transition-all duration-300"
+                          style={{
+                            width: `${(store.videoProgress.current / store.videoProgress.total) * 100}%`,
+                          }}
+                        />
+                      </div>
+                      <span className="text-xs font-semibold text-ink-700 tabular-nums whitespace-nowrap">
+                        {store.videoProgress.current}/{store.videoProgress.total}
+                      </span>
+                    </div>
+                  )}
+
+                {store.videosError && (
+                  <div className="mb-2 p-3 bg-red-50 border border-red-200 rounded-xl text-red-600 text-xs">
+                    {store.videosError}
+                  </div>
+                )}
                 {store.result.scenes.length === 0 ? (
                   <p className="text-xs text-ink-500 italic py-3 border border-dashed border-ink-200 rounded-2xl text-center">
                     No scenes found.
@@ -552,6 +620,7 @@ export default function MovieStudioTab({ projectId }: Props) {
                           },
                           { key: "place", label: "Place", className: "w-24" },
                           { key: "image", label: "Image", className: "w-16" },
+                          { key: "video", label: "Video", className: "w-40" },
                           { key: "script", label: "Script", className: "w-60" },
                           {
                             key: "voiceover",
@@ -566,15 +635,26 @@ export default function MovieStudioTab({ projectId }: Props) {
                           const url = imageUrlFor("scene", s.slug);
                           const spinning =
                             store.regeneratingSceneImages.includes(s.slug);
+                          const video = store.videos.find(
+                            (v) => v.slug === s.slug,
+                          );
+                          const videoUrl = resolveUrl(video?.url);
+                          const videoSpinning =
+                            store.regeneratingVideos.includes(s.slug);
                           return (
-                            <tr key={s.slug} className="border-b border-ink-200">
+                            <tr
+                              key={s.slug}
+                              className="border-b border-ink-200"
+                            >
                               <td className="border border-ink-200 px-2 py-1.5 align-top font-mono text-[11px] text-tiffany-700">
                                 {s.slug}
                               </td>
                               <td className="border border-ink-200 px-2 py-1.5 align-top">
                                 <EditableInput
                                   type="number"
-                                  value={s.duration > 0 ? String(s.duration) : ""}
+                                  value={
+                                    s.duration > 0 ? String(s.duration) : ""
+                                  }
                                   onChange={(v) =>
                                     store.updateScene(s.slug, {
                                       duration: Number(v) || 0,
@@ -634,6 +714,30 @@ export default function MovieStudioTab({ projectId }: Props) {
                                       }
                                     />
                                   </div>
+                                ) : (
+                                  <span className="text-ink-300 text-xs">
+                                    —
+                                  </span>
+                                )}
+                              </td>
+                              <td className="border border-ink-200 px-2 py-1.5 align-top min-w-[180px]">
+                                {videoUrl ? (
+                                  <div className="flex flex-col items-start">
+                                    <video
+                                      src={`${videoUrl}&t=${video?.updatedAt}`}
+                                      controls
+                                      className="w-40 rounded-lg border border-ink-200 cursor-pointer"
+                                      onClick={() =>
+                                        openPreview(videoUrl, s.slug, "video")
+                                      }
+                                    />
+                                    <RegenerateButton
+                                      spinning={videoSpinning}
+                                      onClick={() =>
+                                        store.regenerateVideo(projectId, s.slug)
+                                      }
+                                    />
+                                  </div>
                                 ) : (
                                   <span className="text-ink-300 text-xs">—</span>
                                 )}