@effectnode/media 0.5.0 → 0.6.0

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

@@ -191,9 +191,14 @@ const DOWNLOAD_MODELS: {
     desc: "Character, place & scene images",
   },
   {
-    id: "qwen",
-    name: "AbstractFramework/qwen-image-edit-2511-8bit",
-    desc: "Image editing",
+    id: "ltx",
+    name: "dgrauet/ltx-2.3-mlx-q8",
+    desc: "Video generation",
+  },
+  {
+    id: "tts",
+    name: "Qwen/Qwen3-TTS-12Hz-1.7B-Base",
+    desc: "Voice-over & speech",
   },
 ];
 
@@ -228,7 +233,7 @@ export default function SetupAiModelTab() {
       <section>
         <h3 className="mb-2 text-sm font-semibold text-ink-900">Engines</h3>
         <div className="space-y-2">
-          <ModelRow name="mlx-gen" desc="Image generation engine (z-image · flux · qwen)">
+          <ModelRow name="mlx-gen" desc="Image generation engine (z-image · flux)">
             <StatusBadge
               value={store.mlxgenInstalled}
               okText="Installed"
@@ -259,6 +264,22 @@ export default function SetupAiModelTab() {
               {store.downloading === "mlx-vlm" ? "Installing…" : "Install"}
             </button>
           </ModelRow>
+
+          <ModelRow name="huggingface-cli" desc="HF CLI for downloading models">
+            <StatusBadge
+              value={store.hfInstalled}
+              okText="Installed"
+              missingText="Not installed"
+            />
+            <button
+              onClick={() => store.installTool("hf-cli")}
+              disabled={busy}
+              className="flex items-center gap-1.5 whitespace-nowrap rounded-xl border border-tiffany-500 px-3 py-1.5 text-xs font-medium text-tiffany-700 transition-colors hover:bg-tiffany-50 disabled:opacity-50"
+            >
+              {store.downloading === "hf-cli" ? SpinnerIcon : InstallIcon}
+              {store.downloading === "hf-cli" ? "Installing…" : "Install"}
+            </button>
+          </ModelRow>
         </div>
       </section>
 
@@ -286,7 +307,9 @@ export default function SetupAiModelTab() {
                 ? store.zImageDownloaded
                 : m.id === "flux"
                   ? store.fluxDownloaded
-                  : store.qwenDownloaded;
+                  : m.id === "ltx"
+                    ? store.ltxDownloaded
+                    : store.ttsDownloaded;
             return (
               <ModelRow key={m.id} name={m.name} desc={m.desc}>
                 <StatusBadge value={downloaded} />
@@ -301,24 +324,6 @@ export default function SetupAiModelTab() {
               </ModelRow>
             );
           })}
-
-          <ModelRow
-            name="dgrauet/ltx-2.3-mlx-q8"
-            desc="Video generation"
-          >
-            <span className="text-xs italic text-ink-400">
-              Downloads on first render
-            </span>
-          </ModelRow>
-
-          <ModelRow
-            name="Qwen/Qwen3-TTS-12Hz-1.7B-Base"
-            desc="Voice-over & speech"
-          >
-            <span className="text-xs italic text-ink-400">
-              Downloads on first use
-            </span>
-          </ModelRow>
         </div>
       </section>
 

package/frontend/src/movie-app/components/ProjectEditorPage.tsx

@@ -8,7 +8,6 @@ import MovieStudioTab from "./EditorTabs/MovieStudioTab";
 import GenerateVideoTab from "./EditorTabs/GenerateVideoTab";
 import AgentTab from "./EditorTabs/AgentTab";
 import StoryWriterTab from "./EditorTabs/StoryWriterTab";
-import CharactersTab from "./EditorTabs/CharactersTab";
 import ExtractImageTab from "./EditorTabs/ExtractImageTab";
 import SceneVisualTab from "./EditorTabs/SceneVisualTab";
 import TextToImageTab from "./EditorTabs/TextToImageTab";
@@ -173,22 +172,6 @@ export default function ProjectEditorPage() {
     </svg>
   );
 
-  const CharacterIcon = (
-    <svg
-      width="18"
-      height="18"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-      <circle cx="12" cy="7" r="4" />
-    </svg>
-  );
-
   const ExtractIcon = (
     <svg
       width="18"
@@ -471,17 +454,6 @@ export default function ProjectEditorPage() {
               {StoryWriterIcon}
               Story Writer
             </button>
-            <button
-              onClick={() => store.setActiveTab("characters")}
-              className={`flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-2xl transition-all ${
-                store.activeTab === "characters"
-                  ? "bg-tiffany-500/10 text-tiffany-700 shadow-glow-sm"
-                  : "text-ink-600 hover:bg-ink-100 hover:text-ink-800"
-              }`}
-            >
-              {CharacterIcon}
-              Characters
-            </button>
             <button
               onClick={() => store.setActiveTab("extract")}
               className={`flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-2xl transition-all ${
@@ -597,11 +569,6 @@ export default function ProjectEditorPage() {
             <StoryWriterTab projectId={id!} />
           )}
 
-          {/* ========== CHARACTERS PANEL ========== */}
-          {store.activeTab === "characters" && (
-            <CharactersTab projectId={id!} />
-          )}
-
           {/* ========== EXTRACT IMAGE PANEL ========== */}
           {store.activeTab === "extract" && <ExtractImageTab projectId={id!} />}
 

package/frontend/src/movie-app/components/ProjectManager.tsx

@@ -168,7 +168,7 @@ export default function ProjectManager() {
       <header className="flex flex-col gap-7 md:flex-row md:items-end md:justify-between">
         <div className="max-w-xl">
           <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 md:text-5xl">
             Make the movies{" "}

package/frontend/src/movie-app/index.css

@@ -1,18 +1,20 @@
 @import "tailwindcss";
 
 /* ==========================================================================
-   Lambobo Studio — design tokens
+   EffectNode Media — design tokens
    A dreamy, tiffany-blue film studio. Gradients read like light through
    shallow water: tiffany teal → aqua → periwinkle → blush.
    ========================================================================== */
 
 @theme {
   /* ---- Type ---- */
-  --font-sans: "Avenir Next", Avenir, "Helvetica Neue", -apple-system,
-    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  --font-display: "Cormorant", "Iowan Old Style", "Baskerville", "Georgia",
-    serif;
-  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
+  --font-sans:
+    "Avenir Next", Avenir, "Helvetica Neue", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, sans-serif;
+  --font-display:
+    "Cormorant", "Iowan Old Style", "Baskerville", "Georgia", serif;
+  --font-mono:
+    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
     "Liberation Mono", monospace;
 
   /* ---- Tiffany (the brand) ---- */
@@ -48,13 +50,14 @@
   --color-dream-mint: #c8f1e6;
 
   /* ---- Shadows ---- */
-  --shadow-glow: 0 8px 30px -6px rgba(10, 186, 181, 0.55),
+  --shadow-glow:
+    0 8px 30px -6px rgba(10, 186, 181, 0.55),
     0 2px 10px -2px rgba(10, 186, 181, 0.4);
   --shadow-glow-sm: 0 0 14px -2px rgba(10, 186, 181, 0.45);
-  --shadow-card: 0 1px 2px rgba(13, 25, 28, 0.04),
-    0 10px 30px -12px rgba(13, 25, 28, 0.16);
-  --shadow-card-hover: 0 2px 4px rgba(13, 25, 28, 0.05),
-    0 18px 44px -14px rgba(10, 186, 181, 0.35);
+  --shadow-card:
+    0 1px 2px rgba(13, 25, 28, 0.04), 0 10px 30px -12px rgba(13, 25, 28, 0.16);
+  --shadow-card-hover:
+    0 2px 4px rgba(13, 25, 28, 0.05), 0 18px 44px -14px rgba(10, 186, 181, 0.35);
   --shadow-modal: 0 24px 80px -16px rgba(13, 25, 28, 0.35);
 }
 
@@ -65,16 +68,28 @@
 body {
   margin: 0;
   background-color: #f3f7f7;
-  background-image: radial-gradient(
+  background-image:
+    radial-gradient(
       120% 90% at 85% -10%,
       rgba(183, 225, 251, 0.5),
       transparent 60%
     ),
-    radial-gradient(100% 80% at 0% 0%, rgba(255, 214, 234, 0.4), transparent 55%);
+    radial-gradient(
+      100% 80% at 0% 0%,
+      rgba(255, 214, 234, 0.4),
+      transparent 55%
+    );
   background-attachment: fixed;
   color: #283a40;
-  font-family: "Avenir Next", Avenir, "Helvetica Neue", -apple-system,
-    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-family:
+    "Avenir Next",
+    Avenir,
+    "Helvetica Neue",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -82,7 +97,8 @@ body {
 code,
 pre,
 .font-mono {
-  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
+  font-family:
+    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
     "Liberation Mono", monospace;
 }
 
@@ -126,7 +142,8 @@ pre,
   z-index: 0;
   overflow: hidden;
   pointer-events: none;
-  background: radial-gradient(
+  background:
+    radial-gradient(
       120% 90% at 85% -10%,
       rgba(183, 225, 251, 0.55),
       transparent 60%
@@ -251,7 +268,12 @@ pre,
 }
 
 .thumb {
-  background-image: linear-gradient(135deg, #b0e8e3 0%, #81d8d0 50%, #c3b4f4 100%);
+  background-image: linear-gradient(
+    135deg,
+    #b0e8e3 0%,
+    #81d8d0 50%,
+    #c3b4f4 100%
+  );
 }
 
 .btn-primary {
@@ -263,12 +285,16 @@ pre,
   );
   color: #ffffff;
   box-shadow: var(--shadow-glow);
-  transition: filter 150ms ease, box-shadow 150ms ease, transform 150ms ease;
+  transition:
+    filter 150ms ease,
+    box-shadow 150ms ease,
+    transform 150ms ease;
 }
 
 .btn-primary:hover {
   filter: brightness(1.05);
-  box-shadow: 0 10px 34px -6px rgba(10, 186, 181, 0.6),
+  box-shadow:
+    0 10px 34px -6px rgba(10, 186, 181, 0.6),
     0 4px 12px -4px rgba(10, 186, 181, 0.45);
 }
 

package/frontend/src/movie-app/index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="color-scheme" content="light" />
-  <title>Lambobo Studio</title>
+  <title>EffectNode Media</title>
 </head>
 
 <body>

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

@@ -3,19 +3,21 @@ import { create } from "zustand";
 const API_BASE = `http://localhost:${(window as any).PORT}`;
 
 /** Models that have a dedicated download endpoint in the backend. */
-export type AiModelId = "z-image" | "flux" | "qwen";
+export type AiModelId = "z-image" | "flux" | "ltx" | "tts";
 
 /** Tools whose "install" step must run before their models can be downloaded. */
-export type AiToolId = "mlxgen" | "mlx-vlm";
+export type AiToolId = "mlxgen" | "mlx-vlm" | "hf-cli";
 
 interface AiModelStore {
   // Tool installation status
   mlxgenInstalled: boolean | null;
   mlxVlmInstalled: boolean | null;
+  hfInstalled: boolean | null;
   // Model download status
   zImageDownloaded: boolean | null;
   fluxDownloaded: boolean | null;
-  qwenDownloaded: boolean | null;
+  ltxDownloaded: boolean | null;
+  ttsDownloaded: boolean | null;
   // In-flight install/download (a model id or tool id)
   downloading: string | null;
   logs: string[];
@@ -65,40 +67,47 @@ async function readSSE(
 const DOWNLOAD_ENDPOINTS: Record<AiModelId, string> = {
   "z-image": "/api/mlxgen/download-z-model",
   flux: "/api/mlxgen/download-flux-model",
-  qwen: "/api/mlxgen/download-model",
+  ltx: "/api/hf/download-ltx",
+  tts: "/api/hf/download-tts",
 };
 
 const TOOL_ENDPOINTS: Record<AiToolId, string> = {
   mlxgen: "/api/mlxgen/install",
   "mlx-vlm": "/api/agent/install",
+  "hf-cli": "/api/hf/install",
 };
 
 export const useAiModelStore = create<AiModelStore>((set, get) => ({
   mlxgenInstalled: null,
   mlxVlmInstalled: null,
+  hfInstalled: null,
   zImageDownloaded: null,
   fluxDownloaded: null,
-  qwenDownloaded: null,
+  ltxDownloaded: null,
+  ttsDownloaded: null,
   downloading: null,
   logs: [],
   error: null,
 
   checkStatus: async () => {
     try {
-      const [mlxgen, agent] = await Promise.all([
+      const [mlxgen, agent, hf] = await Promise.all([
         fetch(`${API_BASE}/api/mlxgen/status`).then((r) =>
           r.ok ? r.json() : null,
         ),
         fetch(`${API_BASE}/api/agent/status`).then((r) =>
           r.ok ? r.json() : null,
         ),
+        fetch(`${API_BASE}/api/hf/status`).then((r) => (r.ok ? r.json() : null)),
       ]);
       set({
         mlxgenInstalled: mlxgen ? Boolean(mlxgen.installed) : null,
-        qwenDownloaded: mlxgen ? Boolean(mlxgen.modelDownloaded) : null,
         zImageDownloaded: mlxgen ? Boolean(mlxgen.zModelDownloaded) : null,
         fluxDownloaded: mlxgen ? Boolean(mlxgen.fluxModelDownloaded) : null,
         mlxVlmInstalled: agent ? Boolean(agent.installed) : null,
+        hfInstalled: hf ? Boolean(hf.installed) : null,
+        ltxDownloaded: hf ? Boolean(hf.ltxDownloaded) : null,
+        ttsDownloaded: hf ? Boolean(hf.ttsDownloaded) : null,
       });
     } catch {
       // Leave status unknown (null) if the checks fail.

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

@@ -18,7 +18,6 @@ export type GenerationTab =
   | "extend"
   | "agent"
   | "storyWriter"
-  | "characters"
   | "extract"
   | "sceneVisual"
   | "textToImage"

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

@@ -143,6 +143,8 @@ interface MovieStudioStore {
   projectId: string | null;
   hydrated: boolean;
   generating: boolean;
+  generateStatus: string | null;
+  generateProgress: { current: number; total: number } | null;
   result: MovieStudioResult | null;
   error: string | null;
   rendering: boolean;
@@ -197,6 +199,8 @@ export const useMovieStudioStore = create<MovieStudioStore>((set, get) => ({
   projectId: null,
   hydrated: false,
   generating: false,
+  generateStatus: null,
+  generateProgress: null,
   result: null,
   error: null,
   rendering: false,
@@ -250,6 +254,9 @@ export const useMovieStudioStore = create<MovieStudioStore>((set, get) => ({
         assets: Array.isArray(stored.assets) ? stored.assets : [],
         videos: Array.isArray(stored.videos) ? stored.videos : [],
         sceneImages: Array.isArray(stored.sceneImages) ? stored.sceneImages : [],
+        renderedScenes: Array.isArray(stored.renderedScenes)
+          ? stored.renderedScenes
+          : [],
       });
     } catch {
       // Ignore — keep in-memory defaults.
@@ -465,14 +472,28 @@ export const useMovieStudioStore = create<MovieStudioStore>((set, get) => ({
         if (task.status === "completed" && task.result) {
           if (!appliedCompleted.has(task.id)) {
             appliedCompleted.add(task.id);
-            set({ result: task.result, generating: false });
+            set({
+              result: task.result,
+              generating: false,
+              generateStatus: null,
+              generateProgress: null,
+            });
             persistMovieStudioState();
             playDing3x();
           }
         } else if (err) {
-          set({ generating: false, error: err });
+          set({
+            generating: false,
+            error: err,
+            generateStatus: null,
+            generateProgress: null,
+          });
         } else {
-          set({ generating: isActive });
+          set({
+            generating: isActive,
+            generateStatus: task.status === "running" ? task.statusText : null,
+            generateProgress: task.progress,
+          });
         }
         break;
       }
@@ -708,6 +729,8 @@ export const useMovieStudioStore = create<MovieStudioStore>((set, get) => ({
     set({
       idea: "",
       generating: false,
+      generateStatus: null,
+      generateProgress: null,
       result: null,
       error: null,
       rendering: false,
@@ -749,6 +772,7 @@ function persistMovieStudioState() {
       assets: s.assets,
       videos: s.videos,
       sceneImages: s.sceneImages,
+      renderedScenes: s.renderedScenes,
     }),
   }).catch(() => {});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effectnode/media",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Start a full-stack media app: Vite + React + TypeScript frontend, Express backend with REST + WebSocket API",
   "license": "MIT",
   "author": "",
@@ -19,7 +19,7 @@
   "scripts": {
     "deploy": "npm run build; npm version minor; npm publish --access public",
     "build": "tsc && node -e \"const fs=require('node:fs');fs.cpSync('src/backend/movie-backend/agent/prompt','dist/backend/movie-backend/agent/prompt',{recursive:true})\"",
-    "dev": "concurrently -k -n backend,frontend -c blue,green \"bun run dev:backend\" \"bun run dev:frontend\"",
+    "dev": "concurrently -k -n backend,frontend -c blue,green \"bun run dev:backend\" \"bun run dev:frontend\"; open http://localhsot:5177",
     "dev:backend": "nodemon",
     "dev:frontend": "vite",
     "start": "node bin/effectnode-media"