@effectnode/media 0.4.0 → 0.6.0

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

@@ -0,0 +1,172 @@
+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" | "ltx" | "tts";
+
+/** Tools whose "install" step must run before their models can be downloaded. */
+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;
+  ltxDownloaded: boolean | null;
+  ttsDownloaded: boolean | null;
+  // In-flight install/download (a model id or tool id)
+  downloading: string | null;
+  logs: string[];
+  error: string | null;
+
+  checkStatus: () => Promise<void>;
+  installTool: (tool: AiToolId) => Promise<void>;
+  downloadModel: (id: AiModelId) => Promise<void>;
+  clearLogs: () => void;
+}
+
+/** Read a server-sent-events response, invoking `onEvent` per parsed event. */
+async function readSSE(
+  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();
+  }
+}
+
+const DOWNLOAD_ENDPOINTS: Record<AiModelId, string> = {
+  "z-image": "/api/mlxgen/download-z-model",
+  flux: "/api/mlxgen/download-flux-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,
+  ltxDownloaded: null,
+  ttsDownloaded: null,
+  downloading: null,
+  logs: [],
+  error: null,
+
+  checkStatus: async () => {
+    try {
+      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,
+        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.
+    }
+  },
+
+  installTool: async (tool) => {
+    if (get().downloading) return;
+    set({ downloading: tool, logs: [], error: null });
+    try {
+      const res = await fetch(`${API_BASE}${TOOL_ENDPOINTS[tool]}`, {
+        method: "POST",
+      });
+      if (!res.ok) {
+        set({ downloading: null, error: await res.text() });
+        return;
+      }
+      await readSSE(res, (event, data) => {
+        if (event === "log") {
+          set((s) => ({ logs: [...s.logs, data.text ?? ""] }));
+        } else if (event === "complete") {
+          set({ downloading: null });
+        } else if (event === "error") {
+          set({ downloading: null, error: data.error ?? "Install failed" });
+        }
+      });
+    } catch (e) {
+      set({ downloading: null, error: String(e) });
+    } finally {
+      get().checkStatus();
+    }
+  },
+
+  downloadModel: async (id) => {
+    if (get().downloading) return;
+    set({ downloading: id, logs: [], error: null });
+    try {
+      const res = await fetch(`${API_BASE}${DOWNLOAD_ENDPOINTS[id]}`, {
+        method: "POST",
+      });
+      if (!res.ok) {
+        set({ downloading: null, error: await res.text() });
+        return;
+      }
+      await readSSE(res, (event, data) => {
+        if (event === "log") {
+          set((s) => ({ logs: [...s.logs, data.text ?? ""] }));
+        } else if (event === "complete") {
+          set({ downloading: null });
+        } else if (event === "error") {
+          set({ downloading: null, error: data.error ?? "Download failed" });
+        }
+      });
+    } catch (e) {
+      set({ downloading: null, error: String(e) });
+    } finally {
+      get().checkStatus();
+    }
+  },
+
+  clearLogs: () => set({ logs: [], error: null }),
+}));

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

@@ -18,15 +18,14 @@ export type GenerationTab =
   | "extend"
   | "agent"
   | "storyWriter"
-  | "characters"
   | "extract"
   | "sceneVisual"
   | "textToImage"
-  | "referencesToVideo"
   | "batchVideo"
   | "batchImageToVideo"
   | "batchVoice"
-  | "llmServer";
+  | "llmServer"
+  | "aiModels";
 export type AspectRatio = "1:1" | "16:9" | "9:16" | "4:3" | "3:4";
 export type Resolution =
   | "320p"

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;
@@ -183,6 +185,9 @@ interface MovieStudioStore {
   regenerateVideo: (projectId: string, slug: string) => Promise<void>;
   renderSceneImages: (projectId: string) => Promise<void>;
   regenerateSceneImage: (projectId: string, slug: string) => Promise<void>;
+  updateCharacter: (slug: string, patch: Partial<MovieCharacter>) => void;
+  updatePlace: (slug: string, patch: Partial<MoviePlace>) => void;
+  updateScene: (slug: string, patch: Partial<MovieScene>) => void;
   applyQueueTask: (task: QueueTask) => void;
   primeAppliedQueue: (tasks: QueueTask[]) => void;
   stop: () => void;
@@ -194,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,
@@ -247,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.
@@ -410,6 +420,48 @@ export const useMovieStudioStore = create<MovieStudioStore>((set, get) => ({
     }
   },
 
+  updateCharacter: (slug, patch) => {
+    const result = get().result;
+    if (!result) return;
+    set({
+      result: {
+        ...result,
+        characters: result.characters.map((c) =>
+          c.slug === slug ? { ...c, ...patch } : c,
+        ),
+      },
+    });
+    persistMovieStudioState();
+  },
+
+  updatePlace: (slug, patch) => {
+    const result = get().result;
+    if (!result) return;
+    set({
+      result: {
+        ...result,
+        places: result.places.map((p) =>
+          p.slug === slug ? { ...p, ...patch } : p,
+        ),
+      },
+    });
+    persistMovieStudioState();
+  },
+
+  updateScene: (slug, patch) => {
+    const result = get().result;
+    if (!result) return;
+    set({
+      result: {
+        ...result,
+        scenes: result.scenes.map((s) =>
+          s.slug === slug ? { ...s, ...patch } : s,
+        ),
+      },
+    });
+    persistMovieStudioState();
+  },
+
   // Reconcile the movie studio store with the latest queue task state.
   applyQueueTask: (task) => {
     const isActive = task.status === "pending" || task.status === "running";
@@ -420,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;
       }
@@ -663,6 +729,8 @@ export const useMovieStudioStore = create<MovieStudioStore>((set, get) => ({
     set({
       idea: "",
       generating: false,
+      generateStatus: null,
+      generateProgress: null,
       result: null,
       error: null,
       rendering: false,
@@ -704,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.4.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"