@effectnode/media 0.8.0 → 0.10.0

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

@@ -1,249 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { useGenerationStore, type ProjectVideo } from "../../stores/generationStore";
-
-const API_BASE = `http://localhost:${(window as any).PORT}`;
-
-interface Props {
-  projectId: string;
-}
-
-/** Seek the video to `time` and draw its current frame into a PNG data URL. */
-async function captureFrameAt(
-  video: HTMLVideoElement,
-  time: number,
-): Promise<string> {
-  await new Promise<void>((resolve) => {
-    if (Math.abs(video.currentTime - time) < 0.001 && !video.seeking) {
-      resolve();
-      return;
-    }
-    const cleanup = () => {
-      clearTimeout(timer);
-      video.removeEventListener("seeked", onSeeked);
-    };
-    const onSeeked = () => {
-      cleanup();
-      resolve();
-    };
-    const timer = setTimeout(onSeeked, 1500);
-    video.addEventListener("seeked", onSeeked);
-    video.currentTime = time;
-  });
-
-  const canvas = document.createElement("canvas");
-  canvas.width = video.videoWidth;
-  canvas.height = video.videoHeight;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) throw new Error("Canvas not supported");
-  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-  return canvas.toDataURL("image/png");
-}
-
-export default function ExtractImageTab({ projectId }: Props) {
-  const gen = useGenerationStore();
-
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  const [selected, setSelected] = useState<ProjectVideo | null>(null);
-  const [duration, setDuration] = useState(0);
-  const [time, setTime] = useState(0);
-  const [extracting, setExtracting] = useState(false);
-  const [preview, setPreview] = useState<string | null>(null);
-  const [savedName, setSavedName] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    gen.fetchProjectVideos(projectId);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [projectId]);
-
-  const selectVideo = (v: ProjectVideo) => {
-    setSelected(v);
-    setPreview(null);
-    setSavedName(null);
-    setDuration(0);
-    setTime(0);
-    setError(null);
-  };
-
-  const onLoadedMetadata = (e: React.SyntheticEvent<HTMLVideoElement>) => {
-    const d = e.currentTarget.duration;
-    setDuration(Number.isFinite(d) ? d : 0);
-    setTime(0);
-  };
-
-  const handleExtract = async () => {
-    const video = videoRef.current;
-    if (!video) return;
-    setExtracting(true);
-    setError(null);
-    setPreview(null);
-    setSavedName(null);
-    try {
-      const dataUrl = await captureFrameAt(video, time);
-      setPreview(dataUrl);
-
-      const res = await fetch(`${API_BASE}/api/extracted-frames`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          image: dataUrl,
-          filename: `frame-${Date.now()}.png`,
-          projectId,
-        }),
-      });
-      if (!res.ok) throw new Error(await res.text());
-      const data = await res.json();
-      setSavedName(data.filename as string);
-    } catch (e) {
-      setError(String(e));
-    } finally {
-      setExtracting(false);
-    }
-  };
-
-  // ========== SVG Icons ==========
-
-  const VideoIcon = (
-    <svg
-      width="18"
-      height="18"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-    >
-      <polygon points="23 7 16 12 23 17 23 7" />
-      <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
-    </svg>
-  );
-
-  const CameraIcon = (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
-      <circle cx="12" cy="13" r="4" />
-    </svg>
-  );
-
-  return (
-    <div className="flex flex-col gap-7">
-      <div className="flex items-center gap-2">
-        <span className="text-tiffany-600">{CameraIcon}</span>
-        <h2 className="text-base font-semibold text-ink-900">
-          Image Extract from Video
-        </h2>
-      </div>
-
-      {/* Video picker */}
-      <div>
-        <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wider mb-2">
-          Videos
-        </label>
-        {gen.projectVideosLoading ? (
-          <p className="text-xs text-ink-500 italic py-4 text-center">
-            Loading videos...
-          </p>
-        ) : gen.projectVideos.length === 0 ? (
-          <p className="text-xs text-ink-500 italic py-4 text-center border border-dashed border-ink-200 rounded-2xl">
-            No generated videos yet.
-          </p>
-        ) : (
-          <ul className="divide-y divide-ink-200 border border-ink-200 rounded-2xl overflow-hidden max-h-48 overflow-y-auto">
-            {gen.projectVideos.map((v) => (
-              <li key={v.filename}>
-                <button
-                  onClick={() => selectVideo(v)}
-                  className={`w-full flex items-center gap-2 px-3 py-2 text-left text-xs transition-colors ${
-                    selected?.filename === v.filename
-                      ? "bg-ink-100 text-ink-800"
-                      : "text-ink-600 hover:bg-ink-100"
-                  }`}
-                >
-                  <span className="text-ink-500">{VideoIcon}</span>
-                  <span className="truncate">{v.filename}</span>
-                </button>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-
-      {selected && (
-        <div className="flex flex-col gap-6">
-          <video
-            ref={videoRef}
-            src={selected.url}
-            crossOrigin="anonymous"
-            controls
-            onLoadedMetadata={onLoadedMetadata}
-            className="w-full max-h-64 rounded-2xl border border-ink-200 bg-black"
-          />
-
-          <div>
-            <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wider mb-2">
-              Moment ({time.toFixed(2)}s / {duration.toFixed(2)}s)
-            </label>
-            <input
-              type="range"
-              min={0}
-              max={duration || 0}
-              step={0.05}
-              value={time}
-              onChange={(e) => {
-                const t = Number(e.target.value);
-                setTime(t);
-                if (videoRef.current) videoRef.current.currentTime = t;
-              }}
-              disabled={!duration}
-              className="w-full accent-tiffany-500"
-            />
-          </div>
-
-          <div className="flex items-center gap-2">
-            <button
-              onClick={handleExtract}
-              disabled={extracting || !duration}
-              className="flex items-center gap-1.5 px-4 py-2 text-xs font-medium rounded-xl bg-tiffany-500 hover:bg-tiffany-600 disabled:bg-ink-200 disabled:text-ink-500 text-ink-950 transition-colors"
-            >
-              {CameraIcon}
-              Extract Frame
-            </button>
-            {extracting && (
-              <span className="text-xs text-ink-600 italic">
-                Extracting...
-              </span>
-            )}
-          </div>
-
-          {error && <p className="text-xs text-red-600">{error}</p>}
-
-          {preview && (
-            <div className="flex flex-col gap-3">
-              <div className="rounded-2xl overflow-hidden border border-ink-200 inline-block bg-ink-100">
-                <img
-                  src={preview}
-                  alt="extracted"
-                  className="max-h-72 object-contain"
-                />
-              </div>
-              {savedName && (
-                <p className="text-xs text-emerald-600">
-                  Saved as {savedName} in extracted-frames/{projectId}
-                </p>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,267 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useSceneVisualStore } from "../../stores/sceneVisualStore";
-
-interface Props {
-  projectId: string;
-}
-
-export default function SceneVisualTab({ projectId }: Props) {
-  const sceneStore = useSceneVisualStore();
-
-  useEffect(() => {
-    sceneStore.ensureProject(projectId);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [projectId]);
-
-  const anyGenerating = sceneStore.items.some((i) => i.generating);
-
-  const uploadFileInputRef = useRef<HTMLInputElement>(null);
-  const uploadTargetRef = useRef<string | null>(null);
-
-  const handleUploadFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    const targetId = uploadTargetRef.current;
-    e.target.value = "";
-    if (!file || !targetId) return;
-    const reader = new FileReader();
-    reader.onload = () => {
-      sceneStore.uploadItemImage(
-        projectId,
-        targetId,
-        reader.result as string,
-        file.name,
-      );
-    };
-    reader.readAsDataURL(file);
-  };
-
-  // ========== SVG Icons ==========
-
-  const SceneIcon = (
-    <svg
-      width="18"
-      height="18"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-      <circle cx="8.5" cy="8.5" r="1.5" />
-      <polyline points="21 15 16 10 5 21" />
-    </svg>
-  );
-
-  const PlusIcon = (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <line x1="12" y1="5" x2="12" y2="19" />
-      <line x1="5" y1="12" x2="19" y2="12" />
-    </svg>
-  );
-
-  const TrashIcon = (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points="3 6 5 6 21 6" />
-      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-    </svg>
-  );
-
-  const SparkleIcon = (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-    >
-      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
-    </svg>
-  );
-
-  const SpinnerIcon = (
-    <svg
-      className="animate-spin text-tiffany-600"
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-    >
-      <circle cx="12" cy="12" r="10" strokeOpacity="0.25" />
-      <path d="M12 2a10 10 0 0 1 10 10" strokeOpacity="0.75" />
-    </svg>
-  );
-
-  const StopIcon = (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
-      <rect x="4" y="4" width="16" height="16" rx="2" />
-    </svg>
-  );
-
-  const UploadIcon = (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-      <polyline points="17 8 12 3 7 8" />
-      <line x1="12" y1="3" x2="12" y2="15" />
-    </svg>
-  );
-
-  return (
-    <div className="flex flex-col gap-7">
-      <div className="flex items-center gap-2">
-        <span className="text-tiffany-600">{SceneIcon}</span>
-        <h2 className="text-base font-semibold text-ink-900">
-          Scene Visual
-        </h2>
-      </div>
-
-      {/* Halt generation */}
-      {anyGenerating && (
-        <button
-          onClick={() => sceneStore.haltAll()}
-          className="flex items-center justify-center gap-2 w-full px-4 py-2.5 bg-red-50 hover:bg-red-100 text-red-600 text-sm font-semibold rounded-2xl border border-red-200 transition-colors"
-        >
-          {StopIcon}
-          Stop Generation
-        </button>
-      )}
-
-      {/* Add scene */}
-      <button
-        onClick={() => sceneStore.addItem()}
-        className="flex items-center justify-center gap-2 w-full px-4 py-2.5 bg-ink-50 hover:bg-ink-200 text-ink-700 text-sm font-medium rounded-2xl border border-ink-200 transition-colors"
-      >
-        {PlusIcon}
-        Add Scene
-      </button>
-
-      <input
-        ref={uploadFileInputRef}
-        type="file"
-        accept="image/*"
-        onChange={handleUploadFileChange}
-        className="hidden"
-      />
-
-      {/* Scene items */}
-      {sceneStore.items.length === 0 ? (
-        <p className="text-xs text-ink-500 italic text-center py-8 border border-dashed border-ink-200 rounded-2xl">
-          No scenes yet. Add one to generate a scene visual.
-        </p>
-      ) : (
-        <div className="flex flex-col gap-6">
-          {sceneStore.items.map((item, index) => (
-            <div
-              key={item.id}
-              className="border border-ink-200 rounded-2xl p-5 flex flex-col gap-3 bg-ink-100/60"
-            >
-              <div className="flex items-center justify-between">
-                <span className="text-xs font-semibold text-ink-700 uppercase tracking-wider">
-                  Scene {index + 1}
-                </span>
-                <button
-                  onClick={() => sceneStore.removeItem(item.id)}
-                  disabled={item.generating}
-                  className="flex items-center justify-center w-6 h-6 rounded-full text-ink-500 hover:bg-red-50 hover:text-red-600 disabled:opacity-50 transition-colors"
-                  title="Remove scene"
-                >
-                  {TrashIcon}
-                </button>
-              </div>
-
-              <textarea
-                value={item.prompt}
-                onChange={(e) => sceneStore.setPrompt(item.id, e.target.value)}
-                placeholder="Describe the scene, e.g. a little lamb standing in a sunny meadow."
-                rows={2}
-                disabled={item.generating}
-                className="w-full px-3 py-2 bg-white border border-ink-200 rounded-xl text-ink-900 text-sm placeholder-ink-500 focus:outline-none focus:border-tiffany-500 focus:ring-2 focus:ring-tiffany-500/30 transition-all resize-none disabled:opacity-50"
-              />
-
-              {item.generating || item.uploading ? (
-                <div className="flex items-center gap-2 px-3 py-2 bg-ink-50 border border-ink-200 rounded-xl text-xs text-ink-700">
-                  {SpinnerIcon}
-                  {item.generating ? "Generating..." : "Uploading..."}
-                </div>
-              ) : (
-                <div className="flex items-center gap-2">
-                  <button
-                    onClick={() => sceneStore.generateItem(projectId, item.id)}
-                    disabled={!item.prompt.trim()}
-                    className="flex items-center justify-center gap-2 px-4 py-2 text-xs font-medium rounded-xl bg-tiffany-500 hover:bg-tiffany-600 disabled:bg-ink-200 disabled:text-ink-500 text-ink-950 transition-colors"
-                  >
-                    {SparkleIcon}
-                    Generate
-                  </button>
-                  <button
-                    onClick={() => {
-                      uploadTargetRef.current = item.id;
-                      uploadFileInputRef.current?.click();
-                    }}
-                    className="flex items-center justify-center gap-2 px-4 py-2 text-xs font-medium rounded-xl border border-ink-200 bg-white text-ink-600 hover:border-ink-300 transition-colors"
-                  >
-                    {UploadIcon}
-                    Upload Image
-                  </button>
-                </div>
-              )}
-
-              {item.error && (
-                <p className="text-xs text-red-600">{item.error}</p>
-              )}
-
-              {item.logs.length > 0 && (
-                <div className="p-2 bg-ink-50 border border-ink-200 rounded-xl max-h-24 overflow-y-auto">
-                  <pre className="text-[10px] text-ink-600 font-mono whitespace-pre-wrap">
-                    {item.logs.join("")}
-                  </pre>
-                </div>
-              )}
-
-              {item.result && (
-                <div className="rounded-xl overflow-hidden border border-ink-200 inline-block">
-                  <img
-                    src={item.result}
-                    alt={`Scene ${index + 1}`}
-                    className="max-w-full h-auto"
-                  />
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

package/frontend/src/movie-app/lib/batchVoiceStorage.ts

@@ -1,75 +0,0 @@
-import localforage from "localforage";
-import type {
-  AspectRatio,
-  Resolution,
-  VideoMode,
-} from "../stores/generationStore";
-
-// TTS quality tier: "high" = Qwen3 1.7B, "low" = Qwen3 0.6B.
-export type VoiceQuality = "low" | "high";
-
-// Persisted "UI state" for the batch custom voice video tab: the editable
-// setup (rows + shared video settings + voice reference). Transient
-// generation state (status, results, logs) is intentionally not persisted.
-export interface PersistedBatchVoiceRow {
-  id: string;
-  prompt: string;
-  script: string;
-  imagePath: string | null;
-  imageUrl: string | null;
-  imageFilename: string | null;
-}
-
-export interface PersistedBatchVoiceState {
-  rows: PersistedBatchVoiceRow[];
-  duration: number;
-  aspectRatio: AspectRatio;
-  resolution: Resolution;
-  mode: VideoMode;
-  quality: VoiceQuality;
-  voiceRefPath: string | null;
-  voiceRefFilename: string | null;
-}
-
-const store = localforage.createInstance({
-  name: "lambobo-studio",
-  storeName: "batch-voice",
-});
-
-// Each project keeps its own persisted batch-voice UI state, keyed by
-// projectId so switching projects restores the right rows + settings.
-function storageKey(projectId: string): string {
-  return `batch-voice-ui-state:${projectId}`;
-}
-
-export async function loadBatchVoiceState(
-  projectId: string,
-): Promise<PersistedBatchVoiceState | null> {
-  try {
-    const value = await store.getItem<PersistedBatchVoiceState>(
-      storageKey(projectId),
-    );
-    return value ?? null;
-  } catch {
-    return null;
-  }
-}
-
-export async function saveBatchVoiceState(
-  projectId: string,
-  state: PersistedBatchVoiceState,
-): Promise<void> {
-  try {
-    await store.setItem(storageKey(projectId), state);
-  } catch {
-    // Ignore persistence failures — the UI keeps working in memory.
-  }
-}
-
-export async function clearBatchVoiceState(projectId: string): Promise<void> {
-  try {
-    await store.removeItem(storageKey(projectId));
-  } catch {
-    // Ignore — nothing to clear.
-  }
-}