@effectnode/media 0.9.0 → 0.10.0

package/frontend/src/movie-app/stores/batchVoiceStore.ts

@@ -1,990 +0,0 @@
-import { create } from "zustand";
-import type {
-  AspectRatio,
-  Resolution,
-  VideoMode,
-  ProjectImage,
-} from "./generationStore";
-import { loadFFmpeg } from "../lib/ffmpeg";
-import {
-  clearBatchVoiceState,
-  loadBatchVoiceState,
-  saveBatchVoiceState,
-  type PersistedBatchVoiceState,
-  type VoiceQuality,
-} from "../lib/batchVoiceStorage";
-
-const API_BASE = `http://localhost:${(window as any).PORT}`;
-
-export type BatchVoiceRowStatus =
-  | "idle"
-  | "uploading"
-  | "tts"
-  | "video"
-  | "muxing"
-  | "done"
-  | "error";
-
-export interface BatchVoiceRow {
-  id: string;
-  // Video prompt (drives the image-to-video stage)
-  prompt: string;
-  // TTS text (spoken in the cloned voice). Empty = silent video (no voiceover).
-  script: string;
-  imagePath: string | null;
-  imageUrl: string | null;
-  imageFilename: string | null;
-  status: BatchVoiceRowStatus;
-  result: string | null;
-  error: string | null;
-  logs: string[];
-  audioResult: string | null;
-  motionResult: string | null;
-}
-
-interface BatchVoiceStore {
-  // Rows
-  rows: BatchVoiceRow[];
-
-  // Shared video settings
-  duration: number;
-  aspectRatio: AspectRatio;
-  resolution: Resolution;
-  mode: VideoMode;
-
-  // Shared voice settings
-  quality: VoiceQuality;
-  voiceRefPath: string | null;
-  voiceRefUrl: string | null;
-  voiceRefFilename: string | null;
-
-  // Batch generation state
-  running: boolean;
-  progress: { current: number; total: number } | null;
-  cancelRequested: boolean;
-  logs: string[];
-
-  // Stitching state
-  stitching: boolean;
-  stitchLogs: string[];
-  stitchResult: string | null;
-  stitchError: string | null;
-
-  // Persistence
-  projectId: string | null;
-  hydrated: boolean;
-  hydrate: (projectId: string) => Promise<void>;
-  clear: () => void;
-
-  addRow: () => void;
-  removeRow: (id: string) => void;
-  updatePrompt: (id: string, prompt: string) => void;
-  updateScript: (id: string, script: string) => void;
-  clearRowResult: (id: string) => void;
-  uploadRowImage: (
-    id: string,
-    base64: string,
-    filename: string | undefined,
-    projectId: string,
-  ) => Promise<string | null>;
-  setRowImage: (id: string, image: ProjectImage) => void;
-
-  setDuration: (v: number) => void;
-  setAspectRatio: (v: AspectRatio) => void;
-  setResolution: (v: Resolution) => void;
-  setMode: (v: VideoMode) => void;
-  setQuality: (v: VoiceQuality) => void;
-  uploadVoiceRef: (
-    base64: string,
-    filename: string,
-    projectId: string,
-  ) => Promise<string | null>;
-
-  generateRows: (projectId: string, ids: string[]) => Promise<void>;
-  generateRow: (projectId: string, id: string) => Promise<void>;
-  generateAll: (projectId: string) => Promise<void>;
-  cancel: () => void;
-
-  stitchVideos: () => Promise<void>;
-
-  reset: () => void;
-}
-
-let batchAbortController: AbortController | null = null;
-
-function getDimensions(
-  aspect: AspectRatio,
-  resolution: Resolution,
-): { width: number; height: number } {
-  const size = parseInt(resolution);
-  switch (aspect) {
-    case "1:1":
-      return { width: size, height: size };
-    case "16:9":
-      return { width: Math.round((size * 16) / 9), height: size };
-    case "9:16":
-      return { width: size, height: Math.round((size * 16) / 9) };
-    case "4:3":
-      return { width: Math.round((size * 4) / 3), height: size };
-    case "3:4":
-      return { width: size, height: Math.round((size * 4) / 3) };
-  }
-}
-
-// The image-to-video backend only accepts a bare filename, so normalise any
-// uploaded path / file URL / api-files URL down to just the basename.
-function normalizeImagePath(path: string): string {
-  let p = path;
-  if (p.includes("/api/files?path=")) {
-    try {
-      const url = new URL(p);
-      p = url.searchParams.get("path") || p;
-    } catch {
-      // not a valid URL, use as-is
-    }
-  }
-  if (p.startsWith("file://")) {
-    p = p.slice(7);
-  }
-  return p.split("/").pop() || p;
-}
-
-async function readSSEStream(
-  response: Response,
-  onEvent: (event: string, data: any) => void,
-): Promise<void> {
-  const reader = response.body?.getReader();
-  if (!reader) return;
-
-  const decoder = new TextDecoder();
-  let buffer = "";
-
-  try {
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) break;
-
-      buffer += decoder.decode(value, { stream: true });
-      const lines = buffer.split("\n");
-      buffer = lines.pop() || "";
-
-      let eventType = "message";
-      for (const line of lines) {
-        if (line.startsWith("event: ")) {
-          eventType = line.slice(7).trim();
-        } else if (line.startsWith("data: ")) {
-          try {
-            onEvent(eventType, JSON.parse(line.slice(6)));
-          } catch {
-            // skip malformed lines
-          }
-          eventType = "message";
-        }
-      }
-    }
-  } finally {
-    reader.releaseLock();
-  }
-}
-
-function playBeep() {
-  try {
-    const ctx = new (
-      window.AudioContext || (window as any).webkitAudioContext
-    )();
-    const osc = ctx.createOscillator();
-    const gain = ctx.createGain();
-    osc.connect(gain);
-    gain.connect(ctx.destination);
-    osc.type = "sine";
-    osc.frequency.setValueAtTime(880, ctx.currentTime);
-    gain.gain.setValueAtTime(0.3, ctx.currentTime);
-    gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.4);
-    osc.start(ctx.currentTime);
-    osc.stop(ctx.currentTime + 0.4);
-  } catch {
-    // silently ignore if audio not available
-  }
-}
-
-function makeRow(): BatchVoiceRow {
-  return {
-    id: `row-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
-    prompt: "",
-    script: "",
-    imagePath: null,
-    imageUrl: null,
-    imageFilename: null,
-    status: "idle",
-    result: null,
-    error: null,
-    logs: [],
-    audioResult: null,
-    motionResult: null,
-  };
-}
-
-function toPersistedState(
-  s: Pick<
-    BatchVoiceStore,
-    | "rows"
-    | "duration"
-    | "aspectRatio"
-    | "resolution"
-    | "mode"
-    | "quality"
-    | "voiceRefPath"
-    | "voiceRefFilename"
-  >,
-): PersistedBatchVoiceState {
-  return {
-    rows: s.rows.map((r) => ({
-      id: r.id,
-      prompt: r.prompt,
-      script: r.script,
-      imagePath: r.imagePath,
-      imageUrl: r.imageUrl,
-      imageFilename: r.imageFilename,
-    })),
-    duration: s.duration,
-    aspectRatio: s.aspectRatio,
-    resolution: s.resolution,
-    mode: s.mode,
-    quality: s.quality,
-    voiceRefPath: s.voiceRefPath,
-    voiceRefFilename: s.voiceRefFilename,
-  };
-}
-
-// Fire-and-forget save of the current editable UI state.
-function persistBatchState() {
-  const { projectId } = useBatchVoiceStore.getState();
-  if (!projectId) return;
-  void saveBatchVoiceState(
-    projectId,
-    toPersistedState(useBatchVoiceStore.getState()),
-  );
-}
-
-export const useBatchVoiceStore = create<BatchVoiceStore>((set, get) => ({
-  rows: [makeRow()],
-
-  duration: 5,
-  aspectRatio: "1:1",
-  resolution: "480p",
-  mode: "distilled",
-
-  quality: "high",
-  voiceRefPath: null,
-  voiceRefUrl: null,
-  voiceRefFilename: null,
-
-  running: false,
-  progress: null,
-  cancelRequested: false,
-  logs: [],
-
-  stitching: false,
-  stitchLogs: [],
-  stitchResult: null,
-  stitchError: null,
-
-  projectId: null,
-  hydrated: false,
-
-  hydrate: async (projectId) => {
-    // No-op if we've already hydrated for this project.
-    if (get().hydrated && get().projectId === projectId) return;
-
-    // Switching to a different project: reset to defaults so rows and
-    // settings from the previous project don't leak through.
-    const previous = get().projectId;
-    if (previous !== null && previous !== projectId) {
-      get().reset();
-    }
-    set({ hydrated: true, projectId });
-
-    const stored = await loadBatchVoiceState(projectId);
-    if (!stored) return;
-
-    set((s) => {
-      const rows: BatchVoiceRow[] = (stored.rows ?? []).map((r) => ({
-        id: r.id,
-        prompt: r.prompt,
-        script: r.script,
-        imagePath: r.imagePath,
-        imageUrl: r.imageUrl,
-        imageFilename: r.imageFilename,
-        status: "idle",
-        result: null,
-        error: null,
-        logs: [],
-        audioResult: null,
-        motionResult: null,
-      }));
-
-      // Rebuild the preview URL for the stored voice reference so the audio
-      // player keeps working after a reload.
-      const restoredRefPath = stored.voiceRefPath ?? s.voiceRefPath;
-
-      return {
-        rows: rows.length > 0 ? rows : [makeRow()],
-        duration: stored.duration ?? s.duration,
-        aspectRatio: stored.aspectRatio ?? s.aspectRatio,
-        resolution: stored.resolution ?? s.resolution,
-        mode: stored.mode ?? s.mode,
-        quality: stored.quality ?? s.quality,
-        voiceRefPath: restoredRefPath,
-        voiceRefUrl: restoredRefPath
-          ? `http://localhost:${(window as any).PORT}/api/files?path=${encodeURIComponent(restoredRefPath)}`
-          : null,
-        voiceRefFilename: stored.voiceRefFilename ?? s.voiceRefFilename,
-      };
-    });
-  },
-
-  clear: () => {
-    const { projectId } = get();
-    get().reset();
-    if (projectId) void clearBatchVoiceState(projectId);
-  },
-
-  addRow: () => {
-    set((s) => ({ rows: [...s.rows, makeRow()] }));
-    persistBatchState();
-  },
-
-  removeRow: (id) => {
-    set((s) => ({ rows: s.rows.filter((r) => r.id !== id) }));
-    persistBatchState();
-  },
-
-  updatePrompt: (id, prompt) => {
-    set((s) => ({
-      rows: s.rows.map((r) => (r.id === id ? { ...r, prompt } : r)),
-    }));
-    persistBatchState();
-  },
-
-  updateScript: (id, script) => {
-    set((s) => ({
-      rows: s.rows.map((r) => (r.id === id ? { ...r, script } : r)),
-    }));
-    persistBatchState();
-  },
-
-  clearRowResult: (id) =>
-    set((s) => ({
-      rows: s.rows.map((r) =>
-        r.id === id
-          ? {
-              ...r,
-              result: null,
-              error: null,
-              status: "idle",
-              audioResult: null,
-              motionResult: null,
-            }
-          : r,
-      ),
-    })),
-
-  uploadRowImage: async (id, base64, filename, projectId) => {
-    set((s) => ({
-      rows: s.rows.map((r) =>
-        r.id === id ? { ...r, status: "uploading" } : r,
-      ),
-    }));
-
-    try {
-      const res = await fetch(`${API_BASE}/api/upload/image`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          image: base64,
-          filename: filename || `upload-${Date.now()}.png`,
-          projectId,
-        }),
-      });
-
-      if (!res.ok) {
-        const err = await res.text();
-        set((s) => ({
-          rows: s.rows.map((r) =>
-            r.id === id ? { ...r, status: "error", error: err } : r,
-          ),
-        }));
-        return null;
-      }
-
-      const data = await res.json();
-      const url = `http://localhost:${(window as any).PORT}/api/files?path=${encodeURIComponent(data.path)}`;
-      set((s) => ({
-        rows: s.rows.map((r) =>
-          r.id === id
-            ? {
-                ...r,
-                status: "idle",
-                imagePath: data.path,
-                imageUrl: url,
-                imageFilename: data.filename,
-              }
-            : r,
-        ),
-      }));
-      persistBatchState();
-      return data.path as string;
-    } catch (e) {
-      set((s) => ({
-        rows: s.rows.map((r) =>
-          r.id === id ? { ...r, status: "error", error: String(e) } : r,
-        ),
-      }));
-      return null;
-    }
-  },
-
-  setRowImage: (id, image) => {
-    set((s) => ({
-      rows: s.rows.map((r) =>
-        r.id === id
-          ? {
-              ...r,
-              imagePath: image.url,
-              imageUrl: image.url,
-              imageFilename: image.filename,
-              status: "idle",
-              error: null,
-            }
-          : r,
-      ),
-    }));
-    persistBatchState();
-  },
-
-  setDuration: (duration) => {
-    set({ duration });
-    persistBatchState();
-  },
-  setAspectRatio: (aspectRatio) => {
-    set({ aspectRatio });
-    persistBatchState();
-  },
-  setResolution: (resolution) => {
-    set({ resolution });
-    persistBatchState();
-  },
-  setMode: (mode) => {
-    set({ mode });
-    persistBatchState();
-  },
-  setQuality: (quality) => {
-    set({ quality });
-    persistBatchState();
-  },
-
-  uploadVoiceRef: async (base64, filename, projectId) => {
-    try {
-      const res = await fetch(`${API_BASE}/api/upload/audio`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          audio: base64,
-          filename,
-          projectId,
-        }),
-      });
-
-      if (!res.ok) {
-        return null;
-      }
-
-      const data = await res.json();
-      set({
-        voiceRefPath: data.path,
-        voiceRefUrl: `http://localhost:${(window as any).PORT}/api/files?path=${encodeURIComponent(data.path)}`,
-        voiceRefFilename: data.filename,
-      });
-      persistBatchState();
-      return data.path as string;
-    } catch {
-      return null;
-    }
-  },
-
-  generateRows: async (projectId, ids) => {
-    if (get().running) return;
-
-    const rows = get().rows;
-    const targets = ids
-      .map((id) => rows.find((r) => r.id === id))
-      .filter((r): r is BatchVoiceRow => !!r)
-      .filter(
-        (r) =>
-          r.prompt.trim() &&
-          r.imagePath &&
-          (!r.script.trim() || get().voiceRefPath),
-      );
-
-    if (targets.length === 0) return;
-
-    const { duration, aspectRatio, resolution, mode, quality, voiceRefPath } =
-      get();
-    const { width, height } = getDimensions(aspectRatio, resolution);
-    const refAudioPath = voiceRefPath ? normalizeImagePath(voiceRefPath) : null;
-
-    batchAbortController = new AbortController();
-    const signal = batchAbortController.signal;
-
-    set({
-      running: true,
-      progress: { current: 0, total: targets.length },
-      cancelRequested: false,
-      logs: [],
-    });
-
-    let cancelled = false;
-
-    for (let i = 0; i < targets.length; i++) {
-      if (get().cancelRequested) {
-        cancelled = true;
-        break;
-      }
-
-      const row = targets[i];
-      const hasVoice = row.script.trim().length > 0;
-
-      set((s) => ({
-        progress: { current: i + 1, total: targets.length },
-        rows: s.rows.map((r) =>
-          r.id === row.id
-            ? {
-                ...r,
-                status: hasVoice ? "tts" : "video",
-                error: null,
-                logs: [],
-                result: null,
-                audioResult: null,
-                motionResult: null,
-              }
-            : r,
-        ),
-        logs: [
-          ...s.logs,
-          `[${i + 1}/${targets.length}] ${hasVoice ? "Voice" : "Video (no voice)"}: ${row.prompt.trim().slice(0, 80)}`,
-        ],
-      }));
-
-      try {
-        // ===== STEP 1: TTS (skipped when the row has no script) =====
-        if (hasVoice) {
-          const ttsRes = await fetch(`${API_BASE}/api/render/tts`, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              text: row.script.trim(),
-              refAudioPath,
-              projectId,
-              quality,
-              // Each row's voiceover is saved under
-              // <projectOutputDir>/voices/<voiceId>/, keyed by the row id.
-              voiceId: row.id,
-            }),
-            signal,
-          });
-
-          if (!ttsRes.ok) {
-            const err = await ttsRes.text();
-            set((s) => ({
-              rows: s.rows.map((r) =>
-                r.id === row.id ? { ...r, status: "error", error: err } : r,
-              ),
-            }));
-            continue;
-          }
-
-          let ttsDone = false;
-          await readSSEStream(ttsRes, (event, data) => {
-            if (ttsDone) return;
-            switch (event) {
-              case "log":
-                set((s) => ({
-                  rows: s.rows.map((r) =>
-                    r.id === row.id
-                      ? { ...r, logs: [...r.logs, data.text as string] }
-                      : r,
-                  ),
-                  logs: [
-                    ...s.logs,
-                    `[${i + 1}/${targets.length}] ${data.text as string}`,
-                  ],
-                }));
-                break;
-              case "complete":
-                ttsDone = true;
-                set((s) => ({
-                  rows: s.rows.map((r) =>
-                    r.id === row.id
-                      ? {
-                          ...r,
-                          audioResult: `http://localhost:${(window as any).PORT}/api/files?path=${encodeURIComponent(data.path)}`,
-                        }
-                      : r,
-                  ),
-                }));
-                break;
-              case "error":
-                ttsDone = true;
-                set((s) => ({
-                  rows: s.rows.map((r) =>
-                    r.id === row.id
-                      ? {
-                          ...r,
-                          status: "error",
-                          error: data.error || "Voice generation failed",
-                        }
-                      : r,
-                  ),
-                }));
-                break;
-            }
-          });
-
-          const ttsRow = get().rows.find((r) => r.id === row.id);
-          if (!ttsRow || ttsRow.status === "error") {
-            continue;
-          }
-        }
-
-        // ===== STEP 2: Video =====
-        set((s) => ({
-          rows: s.rows.map((r) =>
-            r.id === row.id ? { ...r, status: "video" } : r,
-          ),
-        }));
-
-        const imagePath = normalizeImagePath(row.imagePath!);
-
-        const vidRes = await fetch(`${API_BASE}/api/render/image-to-video`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            prompt: row.prompt.trim(),
-            imagePath,
-            projectId,
-            width,
-            height,
-            frames: duration * 24 + 1,
-            frameRate: 24,
-            mode,
-          }),
-          signal,
-        });
-
-        if (!vidRes.ok) {
-          const err = await vidRes.text();
-          set((s) => ({
-            rows: s.rows.map((r) =>
-              r.id === row.id ? { ...r, status: "error", error: err } : r,
-            ),
-          }));
-          continue;
-        }
-
-        let vidDone = false;
-        await readSSEStream(vidRes, (event, data) => {
-          if (vidDone) return;
-          switch (event) {
-            case "log":
-              set((s) => ({
-                rows: s.rows.map((r) =>
-                  r.id === row.id
-                    ? { ...r, logs: [...r.logs, data.text as string] }
-                    : r,
-                ),
-                logs: [
-                  ...s.logs,
-                  `[${i + 1}/${targets.length}] ${data.text as string}`,
-                ],
-              }));
-              break;
-            case "complete":
-              vidDone = true;
-              set((s) => ({
-                rows: s.rows.map((r) =>
-                  r.id === row.id
-                    ? {
-                        ...r,
-                        motionResult: `http://localhost:${(window as any).PORT}/api/files?path=${encodeURIComponent(data.path)}`,
-                      }
-                    : r,
-                ),
-              }));
-              break;
-            case "error":
-              vidDone = true;
-              set((s) => ({
-                rows: s.rows.map((r) =>
-                  r.id === row.id
-                    ? {
-                        ...r,
-                        status: "error",
-                        error: data.error || "Video generation failed",
-                      }
-                    : r,
-                ),
-              }));
-              break;
-          }
-        });
-
-        const vidRow = get().rows.find((r) => r.id === row.id);
-        if (!vidRow || vidRow.status === "error") {
-          continue;
-        }
-
-        // No script → no voiceover: the motion video is the final result.
-        if (!hasVoice) {
-          set((s) => ({
-            rows: s.rows.map((r) =>
-              r.id === row.id
-                ? { ...r, status: "done", result: vidRow.motionResult }
-                : r,
-            ),
-          }));
-          continue;
-        }
-
-        // ===== STEP 3: Mux audio + video =====
-        set((s) => ({
-          rows: s.rows.map((r) =>
-            r.id === row.id ? { ...r, status: "muxing" } : r,
-          ),
-        }));
-
-        const muxRes = await fetch(`${API_BASE}/api/render/mux-audio`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            videoPath: normalizeImagePath(vidRow.motionResult!),
-            audioPath: normalizeImagePath(vidRow.audioResult!),
-            projectId,
-          }),
-          signal,
-        });
-
-        if (!muxRes.ok) {
-          const err = await muxRes.text();
-          set((s) => ({
-            rows: s.rows.map((r) =>
-              r.id === row.id ? { ...r, status: "error", error: err } : r,
-            ),
-          }));
-          continue;
-        }
-
-        let muxDone = false;
-        await readSSEStream(muxRes, (event, data) => {
-          if (muxDone) return;
-          switch (event) {
-            case "log":
-              set((s) => ({
-                rows: s.rows.map((r) =>
-                  r.id === row.id
-                    ? { ...r, logs: [...r.logs, data.text as string] }
-                    : r,
-                ),
-                logs: [
-                  ...s.logs,
-                  `[${i + 1}/${targets.length}] ${data.text as string}`,
-                ],
-              }));
-              break;
-            case "complete":
-              muxDone = true;
-              set((s) => ({
-                rows: s.rows.map((r) =>
-                  r.id === row.id
-                    ? {
-                        ...r,
-                        status: "done",
-                        result: `http://localhost:${(window as any).PORT}/api/files?path=${encodeURIComponent(data.path)}`,
-                      }
-                    : r,
-                ),
-              }));
-              break;
-            case "error":
-              muxDone = true;
-              set((s) => ({
-                rows: s.rows.map((r) =>
-                  r.id === row.id
-                    ? {
-                        ...r,
-                        status: "error",
-                        error: data.error || "Muxing failed",
-                      }
-                    : r,
-                ),
-              }));
-              break;
-          }
-        });
-      } catch (e: any) {
-        if (e?.name === "AbortError") {
-          cancelled = true;
-          break;
-        }
-        set((s) => ({
-          rows: s.rows.map((r) =>
-            r.id === row.id
-              ? { ...r, status: "error", error: String(e) }
-              : r,
-          ),
-        }));
-      }
-    }
-
-    batchAbortController = null;
-    set({ running: false, progress: null, cancelRequested: false });
-
-    if (!cancelled) {
-      playBeep();
-    }
-  },
-
-  generateRow: (projectId, id) => get().generateRows(projectId, [id]),
-
-  generateAll: (projectId) => {
-    const ids = get()
-      .rows.filter(
-        (r) =>
-          r.prompt.trim() &&
-          r.imagePath &&
-          (!r.script.trim() || get().voiceRefPath),
-      )
-      .map((r) => r.id);
-    return get().generateRows(projectId, ids);
-  },
-
-  cancel: () => {
-    set({ cancelRequested: true });
-    if (batchAbortController) {
-      batchAbortController.abort();
-    }
-    set({
-      running: false,
-      progress: null,
-      rows: get().rows.map((r) =>
-        r.status === "tts" || r.status === "video" || r.status === "muxing"
-          ? { ...r, status: "idle" }
-          : r,
-      ),
-    });
-    // Keep cancelRequested: true — the loop's top-of-iteration check breaks out
-    // between rows, and generateRows resets the flag in its final set().
-    fetch(`${API_BASE}/api/render/cancel`, { method: "POST" }).catch(() => {});
-  },
-
-  stitchVideos: async () => {
-    if (get().stitching) return;
-
-    const results = get()
-      .rows.filter((r) => r.result)
-      .map((r) => r.result as string);
-
-    if (results.length < 2) {
-      set({
-        stitchError: "Need at least 2 generated videos to stitch.",
-        stitchResult: null,
-      });
-      return;
-    }
-
-    set({
-      stitching: true,
-      stitchLogs: [],
-      stitchResult: null,
-      stitchError: null,
-    });
-
-    try {
-      const ffmpeg = await loadFFmpeg();
-
-      // Write each generated video into the in-memory FS in order.
-      const list: string[] = [];
-      for (let i = 0; i < results.length; i++) {
-        const blob = await fetch(results[i]).then((r) => {
-          if (!r.ok) throw new Error(`Failed to fetch video ${i + 1}`);
-          return r.blob();
-        });
-        const data = new Uint8Array(await blob.arrayBuffer());
-        const name = `in${i}.mp4`;
-        await ffmpeg.writeFile(name, data);
-        list.push(`file '${name}'`);
-        set((s) => ({
-          stitchLogs: [...s.stitchLogs, `Added video ${i + 1}/${results.length}`],
-        }));
-      }
-
-      await ffmpeg.writeFile("list.txt", list.join("\n"));
-      set((s) => ({
-        stitchLogs: [...s.stitchLogs, "Concatenating videos..."],
-      }));
-
-      const ret = await ffmpeg.exec([
-        "-f",
-        "concat",
-        "-safe",
-        "0",
-        "-i",
-        "list.txt",
-        "-c",
-        "copy",
-        "output.mp4",
-      ]);
-
-      if (ret !== 0) {
-        throw new Error(`ffmpeg exited with code ${ret}`);
-      }
-
-      const out = (await ffmpeg.readFile("output.mp4")) as Uint8Array;
-      const bytes = new Uint8Array(out);
-      const url = URL.createObjectURL(
-        new Blob([bytes.buffer], { type: "video/mp4" }),
-      );
-
-      set({
-        stitching: false,
-        stitchResult: url,
-        stitchLogs: [...get().stitchLogs, "Done"],
-      });
-    } catch (e) {
-      set({
-        stitching: false,
-        stitchError: String(e),
-      });
-    }
-  },
-
-  reset: () =>
-    set({
-      rows: [makeRow()],
-      duration: 5,
-      aspectRatio: "1:1",
-      resolution: "480p",
-      mode: "distilled",
-      quality: "high",
-      voiceRefPath: null,
-      voiceRefUrl: null,
-      voiceRefFilename: null,
-      running: false,
-      progress: null,
-      cancelRequested: false,
-      logs: [],
-      stitching: false,
-      stitchLogs: [],
-      stitchResult: null,
-      stitchError: null,
-    }),
-}));