@effectnode/media 0.1.0

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

@@ -0,0 +1,170 @@
+import { create } from "zustand";
+
+const API_BASE = `http://localhost:${(window as any).PORT}`;
+
+interface VoiceChatStore {
+  // Reference voice (voice clone source)
+  refAudioPath: string | null;
+  refAudioUrl: string | null;
+  refAudioFilename: string | null;
+
+  // Message text
+  text: string;
+
+  // Generation state
+  generating: boolean;
+  resultUrl: string | null;
+  error: string | null;
+  logs: string[];
+
+  // Speech-to-text state
+  listening: boolean;
+
+  setText: (v: string) => void;
+  setListening: (v: boolean) => void;
+  uploadRefAudio: (
+    base64: string,
+    filename: string,
+    projectId: string,
+  ) => Promise<string | null>;
+  generate: (projectId: string) => Promise<void>;
+}
+
+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();
+  }
+}
+
+export const useVoiceChatStore = create<VoiceChatStore>((set, get) => ({
+  refAudioPath: null,
+  refAudioUrl: null,
+  refAudioFilename: null,
+
+  text: "",
+
+  generating: false,
+  resultUrl: null,
+  error: null,
+  logs: [],
+
+  listening: false,
+
+  setText: (text) => set({ text }),
+  setListening: (listening) => set({ listening }),
+
+  uploadRefAudio: 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: filename || `voice-${Date.now()}.mp3`,
+          projectId,
+        }),
+      });
+
+      if (!res.ok) {
+        set({ error: await res.text() });
+        return null;
+      }
+
+      const data = await res.json();
+      set({
+        refAudioPath: data.path,
+        refAudioUrl: `http://localhost:${(window as any).PORT}/api/files?path=${encodeURIComponent(data.path)}`,
+        refAudioFilename: data.filename,
+      });
+      return data.path as string;
+    } catch (e) {
+      set({ error: String(e) });
+      return null;
+    }
+  },
+
+  generate: async (projectId) => {
+    if (get().generating) return;
+
+    const { text, refAudioFilename } = get();
+    if (!text.trim()) return;
+    if (!refAudioFilename) {
+      set({ error: "Upload a reference voice first." });
+      return;
+    }
+
+    set({ generating: true, error: null, resultUrl: null, logs: [] });
+
+    try {
+      const res = await fetch(`${API_BASE}/api/render/voice-chat`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          text: text.trim(),
+          refAudioPath: refAudioFilename,
+          projectId,
+        }),
+      });
+
+      if (!res.ok) {
+        const err = await res.text();
+        set({ generating: false, error: err });
+        return;
+      }
+
+      await readSSEStream(res, (event, data) => {
+        switch (event) {
+          case "log":
+            set((s) => ({ logs: [...s.logs, data.text as string] }));
+            break;
+          case "complete":
+            set({
+              generating: false,
+              resultUrl: `http://localhost:${(window as any).PORT}/api/files?path=${encodeURIComponent(data.path)}`,
+            });
+            break;
+          case "error":
+            set({
+              generating: false,
+              error: data.error || "Voice generation failed",
+            });
+            break;
+        }
+      });
+    } catch (e) {
+      set({ generating: false, error: String(e) });
+    }
+  },
+}));

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

@@ -0,0 +1,158 @@
+import { create } from "zustand";
+
+const API_BASE = `http://localhost:${(window as any).PORT}`;
+
+export type FileKind = "image" | "video" | "text" | "other";
+
+export interface WorkspaceFile {
+  path: string;
+  name: string;
+  ext: string;
+  size: number;
+  mtime: number;
+  kind: FileKind;
+}
+
+export function workspacePreviewUrl(
+  projectId: string,
+  path: string,
+): string {
+  return `${API_BASE}/api/agent/file/preview?projectId=${encodeURIComponent(
+    projectId,
+  )}&path=${encodeURIComponent(path)}`;
+}
+
+interface WorkspaceStore {
+  files: WorkspaceFile[];
+  loading: boolean;
+  error: string | null;
+  fetchFiles: (projectId: string) => Promise<void>;
+  uploadFile: (
+    projectId: string,
+    dataUrl: string,
+    filename: string,
+  ) => Promise<boolean>;
+  removeFile: (projectId: string, path: string) => Promise<void>;
+  renameFile: (
+    projectId: string,
+    path: string,
+    newName: string,
+  ) => Promise<void>;
+  readFileContent: (projectId: string, path: string) => Promise<string | null>;
+  writeFileContent: (
+    projectId: string,
+    path: string,
+    content: string,
+  ) => Promise<boolean>;
+  openWorkspace: (projectId: string) => Promise<void>;
+}
+
+export const useWorkspaceStore = create<WorkspaceStore>((set, get) => ({
+  files: [],
+  loading: false,
+  error: null,
+
+  fetchFiles: async (projectId) => {
+    set({ loading: true, error: null });
+    try {
+      const res = await fetch(
+        `${API_BASE}/api/agent/files?projectId=${encodeURIComponent(projectId)}`,
+      );
+      if (!res.ok) throw new Error(await res.text());
+      const data = await res.json();
+      set({ files: data.files || [], loading: false });
+    } catch (e) {
+      set({ loading: false, error: String(e) });
+    }
+  },
+
+  uploadFile: async (projectId, dataUrl, filename) => {
+    // Strip any directory component — only the basename is ever sent.
+    const safeName = filename.split(/[/\\]/).pop() || "upload";
+    try {
+      const res = await fetch(`${API_BASE}/api/agent/upload`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ image: dataUrl, filename: safeName, projectId }),
+      });
+      if (!res.ok) throw new Error(await res.text());
+      await get().fetchFiles(projectId);
+      return true;
+    } catch (e) {
+      set({ error: String(e) });
+      return false;
+    }
+  },
+
+  removeFile: async (projectId, path) => {
+    try {
+      const res = await fetch(`${API_BASE}/api/agent/delete`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ projectId, path }),
+      });
+      if (!res.ok) throw new Error(await res.text());
+      await get().fetchFiles(projectId);
+    } catch (e) {
+      set({ error: String(e) });
+    }
+  },
+
+  renameFile: async (projectId, path, newName) => {
+    try {
+      const res = await fetch(`${API_BASE}/api/agent/rename`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ projectId, path, newName }),
+      });
+      if (!res.ok) throw new Error(await res.text());
+      await get().fetchFiles(projectId);
+    } catch (e) {
+      set({ error: String(e) });
+    }
+  },
+
+  readFileContent: async (projectId, path) => {
+    try {
+      const res = await fetch(
+        `${API_BASE}/api/agent/file/content?projectId=${encodeURIComponent(
+          projectId,
+        )}&path=${encodeURIComponent(path)}`,
+      );
+      if (!res.ok) throw new Error(await res.text());
+      const data = await res.json();
+      return data.content ?? "";
+    } catch (e) {
+      set({ error: String(e) });
+      return null;
+    }
+  },
+
+  writeFileContent: async (projectId, path, content) => {
+    try {
+      const res = await fetch(`${API_BASE}/api/agent/file/content`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ projectId, path, content }),
+      });
+      if (!res.ok) throw new Error(await res.text());
+      await get().fetchFiles(projectId);
+      return true;
+    } catch (e) {
+      set({ error: String(e) });
+      return false;
+    }
+  },
+
+  openWorkspace: async (projectId) => {
+    try {
+      await fetch(`${API_BASE}/api/agent/open-workspace`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ projectId }),
+      });
+    } catch (e) {
+      set({ error: String(e) });
+    }
+  },
+}));

package/frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/frontend/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@effectnode/media",
+  "version": "0.1.0",
+  "description": "Start a full-stack media app: Vite + React + TypeScript frontend, Express backend with REST + WebSocket API",
+  "license": "MIT",
+  "author": "",
+  "type": "module",
+  "repository": {
+    "url": "https://github.com/wonglok/effectnode-media"
+  },
+  "bin": {
+    "effectnode-media": "./bin/effectnode-media"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "frontend"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "concurrently -k -n backend,frontend -c blue,green \"bun run dev:backend\" \"bun run dev:frontend\"",
+    "dev:backend": "nodemon",
+    "dev:frontend": "vite",
+    "start": "node bin/effectnode-media"
+  },
+  "dependencies": {
+    "@ffmpeg/core": "^0.12.10",
+    "@ffmpeg/ffmpeg": "^0.12.15",
+    "@ffmpeg/util": "^0.12.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "chalk": "^5.4.1",
+    "commander": "^13.1.0",
+    "cors": "^2.8.5",
+    "express": "^5.1.0",
+    "localforage": "^1.10.0",
+    "mustache": "^4.2.0",
+    "open": "^10.1.0",
+    "openai": "^7.5.0",
+    "papaparse": "^5.6.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
+    "react-router": "^8.3.0",
+    "react-router-dom": "^7.18.2",
+    "remark-gfm": "^4.0.1",
+    "sharp": "^0.35.3",
+    "vite": "^6.0.0",
+    "ws": "^8.18.0",
+    "zustand": "^5.0.15"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/cors": "^2.8.17",
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.13.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/ws": "^8.5.14",
+    "concurrently": "^10.0.5",
+    "nodemon": "^3.1.0",
+    "tailwindcss": "^4.3.3",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0"
+  }
+}