@effectnode/media 0.7.0 → 0.9.0

package/dist/backend/movie-backend/agent/prompt/script.md

@@ -0,0 +1,103 @@
+<!-- high quality -->
+
+```bash
+
+uv run mlx_audio.tts.generate \
+ --model Qwen/Qwen3-TTS-12Hz-1.7B-Base \
+ --text "Ghost reporting. ... 你好嗎?" \
+ --ref_audio ./reference_voice.wav \
+ --play --output ./out --audio_format mp3 --stream --save --instruct "slow down"
+
+```
+
+<!-- Low quality -->
+
+```bash
+
+uv run mlx_audio.tts.generate \
+ --model Qwen/Qwen3-TTS-12Hz-0.6B-Base \
+ --text "Ghost reporting. 明月幾時有？把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間！轉朱閣，低綺戶，照無眠。不應有恨，何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千里共嬋娟。 中秋節快樂！" \
+ --ref_audio ./reference_voice.wav \
+ --play --output ./out --audio_format mp3 --stream --save --instruct "slow down"
+
+
+
+uv run mlx_audio.tts.generate \
+ --model Qwen/Qwen3-TTS-12Hz-0.6B-Base \
+ --text "ghost reporting! Hi how are you?" \
+ --ref_audio ./reference_voice.wav \
+ --play --output ./out --audio_format mp3 --stream --save --instruct "slow down"
+
+
+```
+
+# Image editing
+
+## 4B OK FOR COMMERCAIL USE APACHE LICENSE
+
+```bash
+
+mlxgen download --model AbstractFramework/flux.2-klein-4b-8bit
+
+mlxgen generate \
+  --image input.jpeg \
+  --prompt "The person and The ninja standing next to each other, in a studio, taking photo." \
+  --image person.png \
+  --output result.png \
+  --model AbstractFramework/flux.2-klein-4b-8bit \
+  --mlx-cache-limit-gb 20 \
+  --steps 5 --seed 42 --width 1024 --height 1024
+
+```
+
+#
+
+#
+
+# Upscale to 2048
+
+```bash
+####
+
+mlxgen download --model AbstractFramework/seedvr2-7b-8bit
+
+mlxgen upscale \
+  --model AbstractFramework/seedvr2-7b-8bit \
+  --image-path input.png \
+  --resolution 2048 \
+  --seed 42 \
+  --mlx-cache-limit-gb 100 \
+  --output input_upscaled_2048.png
+
+
+```
+
+# upscale video
+
+```bash
+
+mlxgen download --model AbstractFramework/seedvr2-7b-8bit
+
+mlxgen upscale \
+  --model AbstractFramework/seedvr2-7b-8bit \
+  --video-path input.mp4 \
+  --resolution 720 \
+  --temporal-chunk-size 29 \
+  --temporal-chunk-overlap 8 \
+  --mlx-cache-limit-gb 64 \
+  --force-unsafe-video-memory \
+  --metadata \
+  --output upscalde_video.mp4
+
+
+
+mlxgen upscale \
+  --model AbstractFramework/seedvr2-7b-8bit \
+  --video-path input.mp4 \
+  --resolution 2x \
+  --mlx-cache-limit-gb 64 \
+  --force-unsafe-video-memory \
+  --output upscalde_video.mp4
+
+
+```

package/dist/backend/movie-backend/generation-queue.d.ts

@@ -1,5 +1,5 @@
 import { type Application } from "express";
-export type QueueTaskType = "generate" | "render" | "render-assets" | "render-videos" | "render-scene-images" | "render-asset" | "render-scene-image" | "render-video" | "regenerate-asset" | "regenerate-video" | "regenerate-scene-image";
+export type QueueTaskType = "generate" | "render" | "render-assets" | "render-videos" | "render-scene-images" | "render-asset" | "render-scene-image" | "render-video" | "regenerate-asset" | "regenerate-video" | "regenerate-scene-image" | "fast-image-edit";
 export type QueueTaskStatus = "pending" | "running" | "completed" | "failed" | "cancelled" | "paused";
 export interface QueueTask {
     id: string;

package/dist/backend/movie-backend/generation-queue.js

@@ -2,7 +2,7 @@ import { appendFileSync, existsSync, mkdirSync, readFileSync, readdirSync, statS
 import { dirname, join } from "node:path";
 import { homedir } from "node:os";
 import { randomUUID } from "node:crypto";
-import { generateAssetImage, generateSceneImage, generateSceneVideo, cancelActiveRender, } from "./render-media.js";
+import { generateAssetImage, generateSceneImage, generateSceneVideo, generateFastImageEditImage, cancelActiveRender, } from "./render-media.js";
 import { generateMovieStudioBible } from "./agent/agent-backend.js";
 import { movieStudioStateFile } from "./agent/workspace.js";
 const APP_DATA_DIR = join(homedir(), "media-studio");
@@ -411,6 +411,15 @@ const handlers = {
         ctx.log("Production bible ready.\n");
         return result;
     },
+    // Generate a composite image via fast-image-edit (FLUX.2 Klein).
+    "fast-image-edit": async (ctx) => {
+        const { prompt, images } = ctx.task.payload || {};
+        ctx.log("Generating composite image (FLUX.2 Klein)…\n");
+        const r = await generateFastImageEditImage(ctx.projectId, String(prompt || ""), Array.isArray(images) ? images : [], ctx.log);
+        if ("error" in r)
+            throw new Error(r.error);
+        return r;
+    },
     "render-assets": async (ctx) => {
         const { characters, places } = ctx.task.payload || {};
         return runRenderAssets(ctx, characters, places);

package/dist/backend/movie-backend/render-media.d.ts

@@ -42,6 +42,17 @@ export declare function generateSceneImage(projectId: string, scene: any, onLog?
 } | {
     error: string;
 }>;
+/**
+ * Generate a composite image via fast-image-edit (FLUX.2 Klein). `images` are
+ * base64 data URLs that are decoded into temp files and passed to the model as
+ * separate `--image` inputs. Used by the generation queue worker.
+ */
+export declare function generateFastImageEditImage(projectId: string, prompt: string, images: string[], onLog?: (text: string) => void): Promise<{
+    filename: string;
+    url: string;
+} | {
+    error: string;
+}>;
 export declare function renderMediaRoutes({ app, getUvPath, }: {
     app: Application;
     getUvPath: () => Promise<string>;

package/dist/backend/movie-backend/render-media.js

@@ -1,5 +1,4 @@
 import { existsSync, mkdirSync, readFileSync, writeFileSync, realpathSync, readdirSync, statSync, unlinkSync, rmSync, copyFileSync, } from "node:fs";
-import { randomUUID } from "node:crypto";
 import { homedir } from "node:os";
 import { join, sep } from "node:path";
 import { spawn, whichSync, mimeType } from "./process.js";
@@ -18,7 +17,6 @@ const OUTPUT_DIR = join(APP_DATA_DIR, "output");
 const UPLOAD_DIR = join(APP_DATA_DIR, "upload");
 const AGENT_UPLOAD_DIR = join(APP_DATA_DIR, "agent-upload");
 const EXTRACTED_FRAMES_DIR = join(APP_DATA_DIR, "extracted-frames");
-const CHARACTER_SHEET_DIR = join(APP_DATA_DIR, "character-sheet");
 const AGENTS_DIR = join(APP_DATA_DIR, "agents");
 const JSON_DIR = join(APP_DATA_DIR, "json");
 const PYTHON_DIR = join(APP_DATA_DIR, "python-src");
@@ -141,12 +139,11 @@ let _allowedRealDirs = null;
 function getAllowedRealDirs() {
     if (_allowedRealDirs)
         return _allowedRealDirs;
-    [OUTPUT_DIR, UPLOAD_DIR, AGENT_UPLOAD_DIR, CHARACTER_SHEET_DIR].forEach((d) => ensureDir(d));
+    [OUTPUT_DIR, UPLOAD_DIR, AGENT_UPLOAD_DIR].forEach((d) => ensureDir(d));
     _allowedRealDirs = [
         realpathSync(OUTPUT_DIR) + sep,
         realpathSync(UPLOAD_DIR) + sep,
         realpathSync(AGENT_UPLOAD_DIR) + sep,
-        realpathSync(CHARACTER_SHEET_DIR) + sep,
     ];
     return _allowedRealDirs;
 }
@@ -625,6 +622,73 @@ export async function generateSceneImage(projectId, scene, onLog) {
         url: `/api/files?path=${encodeURIComponent(sceneImagePath)}`,
     };
 }
+/**
+ * Generate a composite image via fast-image-edit (FLUX.2 Klein). `images` are
+ * base64 data URLs that are decoded into temp files and passed to the model as
+ * separate `--image` inputs. Used by the generation queue worker.
+ */
+export async function generateFastImageEditImage(projectId, prompt, images, onLog) {
+    if (!isValidProjectId(projectId))
+        return { error: "Invalid project ID" };
+    if (!prompt || !prompt.trim())
+        return { error: "Prompt is required" };
+    if (!Array.isArray(images) || images.length === 0) {
+        return { error: "At least one reference image is required" };
+    }
+    // Decode each base64 reference image into a temp workspace file so the
+    // FLUX model receives them as separate `--image` inputs.
+    const tempDir = join(TEMP_DIR, String(projectId));
+    ensureDir(tempDir);
+    const tempImagePaths = [];
+    try {
+        images.forEach((image, i) => {
+            const base64 = String(image).replace(/^data:image\/\w+;base64,/, "");
+            const buffer = Buffer.from(base64, "base64");
+            const path = join(tempDir, `flux-ref-${Date.now()}-${i}.png`);
+            writeFileSync(path, buffer);
+            tempImagePaths.push(path);
+        });
+    }
+    catch {
+        return { error: "Invalid reference image data" };
+    }
+    try {
+        const mlxgen = await getMlxgenBin();
+        const projectOutputDir = join(OUTPUT_DIR, projectId);
+        ensureDir(projectOutputDir);
+        const outputFile = `flux-edit-${Date.now()}.png`;
+        const outputPath = join(projectOutputDir, outputFile);
+        const args = [mlxgen, "generate", "--model", FLUX_KLEIN_MODEL];
+        for (const path of tempImagePaths)
+            args.push("--image", path);
+        args.push("--prompt", prompt.trim(), "--output", outputPath, "--mlx-cache-limit-gb", "20", "--steps", "5", "--seed", "42", "--width", "1024", "--height", "1024");
+        const result = await runCommand(args, { onLog });
+        if (!result.success || !existsSync(outputPath)) {
+            return { error: result.output || "Fast image edit failed" };
+        }
+        backupFile(outputPath, projectId);
+        return {
+            filename: outputFile,
+            url: `/api/files?path=${encodeURIComponent(outputPath)}`,
+        };
+    }
+    finally {
+        for (const path of tempImagePaths) {
+            try {
+                unlinkSync(path);
+            }
+            catch {
+                // already removed
+            }
+        }
+        try {
+            rmSync(tempDir, { force: true });
+        }
+        catch {
+            // ignore cleanup failures
+        }
+    }
+}
 // ========== Routes ==========
 export async function renderMediaRoutes({ app, getUvPath, }) {
     // ========== Upload ==========
@@ -3008,78 +3072,6 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
                 .json({ error: "Failed to save frame", details: String(e) });
         }
     });
-    // Save the character sheet: current.png plus a backup copy under backup/.
-    app.post("/api/character-sheet", (req, res) => {
-        const { image, projectId } = req.body || {};
-        if (!image) {
-            res.status(400).json({ error: "Image data is required (base64)" });
-            return;
-        }
-        if (!projectId || !isValidProjectId(String(projectId))) {
-            res.status(400).json({ error: "Invalid project ID" });
-            return;
-        }
-        try {
-            const base64 = String(image).replace(/^data:[^;]+;base64,/, "");
-            const buffer = Buffer.from(base64, "base64");
-            const projectDir = join(CHARACTER_SHEET_DIR, String(projectId));
-            const backupDir = join(projectDir, "backup");
-            ensureDir(backupDir);
-            const backupId = randomUUID();
-            const backupPath = join(backupDir, `${backupId}.png`);
-            const currentPath = join(projectDir, "current.png");
-            writeFileSync(backupPath, buffer);
-            writeFileSync(currentPath, buffer);
-            res.json({
-                success: true,
-                path: currentPath,
-                backupPath,
-                backupFilename: `${backupId}.png`,
-                size: buffer.length,
-            });
-        }
-        catch (e) {
-            res
-                .status(500)
-                .json({ error: "Failed to save character sheet", details: String(e) });
-        }
-    });
-    // List saved character sheet images (current.png) for a project.
-    app.get("/api/projects/:id/character-sheets", (req, res) => {
-        const { id } = req.params;
-        if (!isValidProjectId(id)) {
-            res.status(400).json({ error: "Invalid project ID" });
-            return;
-        }
-        const projectDir = join(CHARACTER_SHEET_DIR, id);
-        const results = [];
-        if (existsSync(projectDir)) {
-            let entries = [];
-            try {
-                entries = readdirSync(projectDir);
-            }
-            catch {
-                entries = [];
-            }
-            for (const entry of entries) {
-                if (!entry.toLowerCase().endsWith(".png"))
-                    continue;
-                const fullPath = join(projectDir, entry);
-                try {
-                    if (!statSync(fullPath).isFile())
-                        continue;
-                }
-                catch {
-                    continue;
-                }
-                results.push({
-                    filename: entry,
-                    url: `/api/files?path=${encodeURIComponent(fullPath)}`,
-                });
-            }
-        }
-        res.json(results);
-    });
     // Open project folder in Finder
     app.post("/api/projects/:id/open-folder", (req, res) => {
         const { type } = req.body || {};

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

@@ -1,6 +1,9 @@
 import { useEffect, useRef, useState } from "react";
 import { useGenerationStore } from "../../stores/generationStore";
 import { useProjectStore } from "../../stores/projectStore";
+import { useQueueStore } from "../../stores/queueStore";
+import TaskQueuePanel from "./TaskQueuePanel";
+import TerminalLogPanel from "./TerminalLogPanel";
 
 interface Props {
   projectId: string;
@@ -9,6 +12,7 @@ interface Props {
 export default function FastImageEditTab({ projectId }: Props) {
   const store = useGenerationStore();
   const { openFolder } = useProjectStore();
+  const queue = useQueueStore();
   const referenceFileRef = useRef<HTMLInputElement>(null);
   const [preview, setPreview] = useState<{
     url: string;
@@ -18,10 +22,22 @@ export default function FastImageEditTab({ projectId }: Props) {
   useEffect(() => {
     store.checkFastImageEditStatus();
     store.fetchProjectImages(projectId);
-    store.fetchCharacterSheets(projectId);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [projectId]);
 
+  // Stream the generation queue so fast-image-edit tasks surface here.
+  useEffect(() => {
+    queue.startStreaming(projectId);
+    return () => queue.stopStreaming();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projectId]);
+
+  // Reconcile fast-image-edit state with the latest queue task state.
+  useEffect(() => {
+    for (const task of queue.tasks) store.applyFastImageEditQueueTask(task);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [queue.tasks, projectId]);
+
   // Close the preview modal on Escape.
   useEffect(() => {
     if (!preview) return;
@@ -247,6 +263,9 @@ export default function FastImageEditTab({ projectId }: Props) {
         </h2>
       </div>
 
+      <TaskQueuePanel projectId={projectId} />
+      <TerminalLogPanel />
+
       {/* ===== Setup: download model ===== */}
       <div>
         <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wider mb-2">
@@ -381,56 +400,6 @@ export default function FastImageEditTab({ projectId }: Props) {
         )}
       </div>
 
-      {/* ===== Character sheet picker ===== */}
-      {store.characterSheets.length > 0 && (
-        <div>
-          <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wider mb-2">
-            Character Sheet
-          </label>
-          <div className="grid grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-2 p-1">
-            {store.characterSheets.map((sheet) => {
-              const isSelected = store.fastImageEdit.referenceImages.some(
-                (r) => r.filename === sheet.filename,
-              );
-              const fullUrl = sheet.url.startsWith("http")
-                ? sheet.url
-                : `http://localhost:${(window as any).PORT}${sheet.url}`;
-              return (
-                <div key={sheet.filename} className="relative group">
-                  <button
-                    onClick={() => store.toggleFastImageEditImage(sheet)}
-                    disabled={store.fastImageEdit.generating}
-                    className={`w-full relative rounded-xl border-2 overflow-hidden transition-all ${
-                      isSelected
-                        ? "border-tiffany-500 ring-2 ring-tiffany-500/40"
-                        : "border-ink-200 hover:border-ink-300"
-                    } disabled:opacity-50`}
-                  >
-                    <img
-                      src={fullUrl}
-                      alt={sheet.filename}
-                      className="aspect-square object-cover object-center w-full"
-                    />
-                    <span className="absolute bottom-0 left-0 right-0 bg-white/80 backdrop-blur-sm px-1.5 py-0.5 text-[10px] text-ink-700 truncate text-center">
-                      {sheet.filename}
-                    </span>
-                  </button>
-                  <button
-                    onClick={() =>
-                      setPreview({ url: fullUrl, filename: sheet.filename })
-                    }
-                    className="absolute top-1.5 right-1.5 flex items-center justify-center w-6 h-6 rounded-full bg-black/50 text-white hover:bg-tiffany-600 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity"
-                    title="Preview"
-                  >
-                    {MaximizeIcon}
-                  </button>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-
       {/* ===== Prompt ===== */}
       <div>
         <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wider mb-2">

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

@@ -408,7 +408,7 @@ export default function ProjectEditorPage() {
               }`}
             >
               {VideoIcon}
-              Generate Avatar Video
+              Scene Video Generation
             </button>
             <button
               onClick={() => store.setActiveTab("extend")}

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

@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import Mustache from "mustache";
 import Papa from "papaparse";
+import type { QueueTask } from "./queueStore";
 import {
   loadTextToImageState,
   saveTextToImageState,
@@ -198,6 +199,7 @@ interface GenerationStore {
   checkFastImageEditStatus: () => Promise<void>;
   downloadFastImageEditModel: () => Promise<void>;
   generateFastImageEdit: (projectId: string) => Promise<void>;
+  applyFastImageEditQueueTask: (task: QueueTask) => void;
 
   // Agent (mlx-vlm)
   agent: AgentState;
@@ -241,11 +243,6 @@ interface GenerationStore {
   selectedImage: ProjectImage | null;
   selectImage: (img: ProjectImage | null) => void;
 
-  // Character sheet picker
-  characterSheets: ProjectImage[];
-  characterSheetsLoading: boolean;
-  fetchCharacterSheets: (projectId: string) => Promise<void>;
-
   // CSV batch generation
   csvRows: Record<string, string>[];
   csvColumns: string[];
@@ -270,7 +267,7 @@ interface GenerationStore {
 export interface ProjectImage {
   filename: string;
   url: string;
-  source: "upload" | "generated" | "characterSheet";
+  source: "upload" | "generated";
 }
 
 export interface ProjectVideo {
@@ -391,42 +388,31 @@ async function resizeImageToPng(
   }
 }
 
-async function requestFastImageEdit(
-  body: {
-    prompt: string;
-    images: string[];
-    projectId: string;
-  },
-  onLog: (text: string) => void,
-): Promise<{ ok: boolean; error?: string; result?: string }> {
-  const res = await fetch(`${API_BASE}/api/mlxgen/fast-image-edit`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(body),
-  });
-
-  if (!res.ok) {
-    return { ok: false, error: await res.text() };
-  }
-
-  let result: string | undefined;
-  let error: string | undefined;
-
-  await readSSEStream(res, (event, data) => {
-    switch (event) {
-      case "log":
-        onLog(data.text as string);
-        break;
-      case "complete":
-        result = `http://localhost:${(window as any).PORT}/api/files?path=${encodeURIComponent(data.path)}`;
-        break;
-      case "error":
-        error = data.error || "Fast image edit failed";
-        break;
+/** Enqueue a fast image edit task in the backend queue worker. */
+async function enqueueFastImageEditTask(
+  projectId: string,
+  prompt: string,
+  images: string[],
+): Promise<{ ok: boolean; error?: string; taskId?: string }> {
+  try {
+    const res = await fetch(`${API_BASE}/api/queue/enqueue`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        projectId,
+        type: "fast-image-edit",
+        label: "Fast image edit",
+        payload: { prompt, images, projectId },
+      }),
+    });
+    if (!res.ok) {
+      return { ok: false, error: await res.text() };
     }
-  });
-
-  return { ok: !error, error, result };
+    const task = (await res.json()) as { id?: string };
+    return { ok: true, taskId: task.id };
+  } catch (e) {
+    return { ok: false, error: String(e) };
+  }
 }
 
 // ========== Abort Controllers ==========
@@ -434,6 +420,14 @@ async function requestFastImageEdit(
 let generateAbortController: AbortController | null = null;
 let batchAbortController: AbortController | null = null;
 
+// ========== Fast Image Edit Queue ==========
+
+/** Project whose fast-image-edit task should refresh the image grid on completion. */
+let fastImageEditProjectId: string | null = null;
+
+/** The queue task id enqueued by the current generate action, if any. */
+let fastImageEditActiveTaskId: string | null = null;
+
 // ========== Beep ==========
 
 function playBeep() {
@@ -892,31 +886,6 @@ export const useGenerationStore = create<GenerationStore>((set, get) => ({
     }
   },
 
-  // ---- Character Sheets ----
-  characterSheets: [],
-  characterSheetsLoading: false,
-
-  fetchCharacterSheets: async (projectId) => {
-    set({ characterSheetsLoading: true });
-    try {
-      const res = await fetch(
-        `${API_BASE}/api/projects/${projectId}/character-sheets`,
-      );
-      if (!res.ok) throw new Error(await res.text());
-      const sheets: { filename: string; url: string }[] = await res.json();
-      const resolved: ProjectImage[] = sheets.map((sheet) => ({
-        filename: sheet.filename,
-        url: sheet.url.startsWith("http")
-          ? sheet.url
-          : `http://localhost:${(window as any).PORT}${sheet.url}`,
-        source: "characterSheet",
-      }));
-      set({ characterSheets: resolved, characterSheetsLoading: false });
-    } catch {
-      set({ characterSheetsLoading: false });
-    }
-  },
-
   // ---- CSV Batch ----
   csvRows: [],
   csvColumns: [],
@@ -1446,32 +1415,66 @@ export const useGenerationStore = create<GenerationStore>((set, get) => ({
       images.push(processed.dataUrl);
     }
 
-    const result = await requestFastImageEdit(
-      {
-        prompt: fastImageEdit.prompt.trim(),
-        images,
-        projectId,
-      },
-      (text) =>
-        set((s) => ({
-          fastImageEdit: {
-            ...s.fastImageEdit,
-            logs: [...s.fastImageEdit.logs, text],
-          },
-        })),
+    fastImageEditProjectId = projectId;
+    const r = await enqueueFastImageEditTask(
+      projectId,
+      fastImageEdit.prompt.trim(),
+      images,
     );
+    fastImageEditActiveTaskId = r.taskId ?? null;
+    if (!r.ok) {
+      set((s) => ({
+        fastImageEdit: {
+          ...s.fastImageEdit,
+          generating: false,
+          error: r.error ?? "Failed to enqueue fast image edit",
+        },
+      }));
+    }
+  },
 
-    set((s) => ({
-      fastImageEdit: {
-        ...s.fastImageEdit,
-        generating: false,
-        result: result.result ?? null,
-        error: result.error ?? null,
-      },
-    }));
+  // Reconcile the fast image edit state with the latest queue task state.
+  // Only the task enqueued by this tab is reflected, so tasks finished before
+  // the tab opened never surface stale results.
+  applyFastImageEditQueueTask: (task) => {
+    if (task.type !== "fast-image-edit") return;
+    if (task.id !== fastImageEditActiveTaskId) return;
+    const fie = get().fastImageEdit;
 
-    if (result.ok) {
-      get().fetchProjectImages(projectId);
+    if (task.status === "completed") {
+      const url = task.result?.url;
+      set({
+        fastImageEdit: {
+          ...fie,
+          generating: false,
+          result: url ? resolveImageUrl(url) : null,
+          error: null,
+        },
+      });
+      if (fastImageEditProjectId) {
+        get().fetchProjectImages(fastImageEditProjectId);
+      }
+    } else if (
+      task.status === "failed" ||
+      task.status === "cancelled" ||
+      task.status === "paused"
+    ) {
+      set({
+        fastImageEdit: {
+          ...fie,
+          generating: false,
+          error: task.error ?? "Fast image edit failed",
+        },
+      });
+    } else {
+      // pending / running
+      set({
+        fastImageEdit: {
+          ...fie,
+          generating: true,
+          error: null,
+        },
+      });
     }
   },
 
@@ -2103,7 +2106,9 @@ export const useGenerationStore = create<GenerationStore>((set, get) => ({
   },
 
   // ---- Reset ----
-  resetAll: () =>
+  resetAll: () => {
+    fastImageEditProjectId = null;
+    fastImageEditActiveTaskId = null;
     set({
       activeTab: "movieStudio",
       image: { ...initialImage },
@@ -2120,8 +2125,6 @@ export const useGenerationStore = create<GenerationStore>((set, get) => ({
       uploadedImageFilename: null,
       uploadedImagePath: null,
       projectImages: [],
-      characterSheets: [],
-      characterSheetsLoading: false,
       selectedImage: null,
       projectVideos: [],
       projectVideosLoading: false,
@@ -2135,5 +2138,6 @@ export const useGenerationStore = create<GenerationStore>((set, get) => ({
       batchRunning: false,
       batchProgress: null,
       batchCancelRequested: false,
-    }),
+    });
+  },
 }));

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

@@ -32,8 +32,12 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
     set({ loading: true, error: null });
     try {
       const res = await fetch(`${API_BASE}/api/projects`);
-      const projects = await res.json();
-      set({ projects, loading: false });
+      const projects: Project[] = await res.json();
+      const sorted = [...projects].sort(
+        (a, b) =>
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+      );
+      set({ projects: sorted, loading: false });
     } catch (e) {
       set({ error: String(e), loading: false });
     }
@@ -49,7 +53,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
       });
       if (!res.ok) throw new Error(await res.text());
       const project = await res.json();
-      set({ projects: [...get().projects, project] });
+      set({ projects: [project, ...get().projects] });
       return project;
     } catch (e) {
       set({ error: String(e) });

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

@@ -13,7 +13,8 @@ export type QueueTaskType =
   | "render-video"
   | "regenerate-asset"
   | "regenerate-video"
-  | "regenerate-scene-image";
+  | "regenerate-scene-image"
+  | "fast-image-edit";
 
 export type QueueTaskStatus =
   | "pending"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effectnode/media",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Start a full-stack media app: Vite + React + TypeScript frontend, Express backend with REST + WebSocket API",
   "license": "MIT",
   "author": "",

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

@@ -1,234 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-export interface SheetItem {
-  id: string;
-  name: string;
-  url: string;
-}
-
-interface Props {
-  items: SheetItem[];
-  projectId: string;
-}
-
-const API_BASE = `http://localhost:${(window as any).PORT}`;
-
-// Base layout in "cell units"; scaled up so the sheet's longest edge is TARGET px.
-const CELL_W = 160;
-const CELL_H = 160;
-const LABEL_H = 18;
-const GAP = 12;
-const PADDING = 12;
-const COLUMNS = 5;
-const TARGET = 4096;
-
-function loadImage(src: string): Promise<HTMLImageElement> {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.crossOrigin = "anonymous";
-    img.onload = () => resolve(img);
-    img.onerror = () => reject(new Error("Failed to load image"));
-    img.src = src;
-  });
-}
-
-/** Draw a contain-fit image into a cell, centered. */
-function drawContain(
-  ctx: CanvasRenderingContext2D,
-  img: HTMLImageElement,
-  x: number,
-  y: number,
-  cellW: number,
-  cellH: number,
-) {
-  const scale = Math.min(cellW / img.width, cellH / img.height);
-  const dw = img.width * scale;
-  const dh = img.height * scale;
-  ctx.drawImage(img, x + (cellW - dw) / 2, y + (cellH - dh) / 2, dw, dh);
-}
-
-export default function CharacterSheet({ items, projectId }: Props) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const [saving, setSaving] = useState(false);
-  const [saveError, setSaveError] = useState<string | null>(null);
-  const [saveInfo, setSaveInfo] = useState<string | null>(null);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-
-    const cols = Math.max(1, COLUMNS);
-    const rows = Math.ceil(items.length / cols) || 1;
-
-    const baseWidth = cols * CELL_W + (cols - 1) * GAP + PADDING * 2;
-    const baseHeight =
-      rows * (CELL_H + LABEL_H) + (rows - 1) * GAP + PADDING * 2;
-    const scale = TARGET / Math.max(baseWidth, baseHeight);
-
-    const cellW = CELL_W * scale;
-    const cellH = CELL_H * scale;
-    const labelH = LABEL_H * scale;
-    const gap = GAP * scale;
-    const pad = PADDING * scale;
-    const width = Math.round(baseWidth * scale);
-    const height = Math.round(baseHeight * scale);
-
-    canvas.width = width;
-    canvas.height = height;
-
-    ctx.fillStyle = "#ffffff";
-    ctx.fillRect(0, 0, width, height);
-
-    if (items.length === 0) {
-      ctx.fillStyle = "#94a3b8";
-      ctx.font = `${Math.round(12 * scale)}px sans-serif`;
-      ctx.textAlign = "center";
-      ctx.textBaseline = "middle";
-      ctx.fillText("No characters yet", width / 2, height / 2);
-      return;
-    }
-
-    // Guard against stale async draws if `items` changes mid-load.
-    let cancelled = false;
-
-    items.forEach(async (item, i) => {
-      const col = i % cols;
-      const row = Math.floor(i / cols);
-      const x = pad + col * (cellW + gap);
-      const y = pad + row * (cellH + labelH + gap);
-
-      // Cell background
-      ctx.fillStyle = "#f0fdfa";
-      ctx.fillRect(x, y, cellW, cellH + labelH);
-
-      let img: HTMLImageElement | null = null;
-      try {
-        img = await loadImage(item.url);
-      } catch {
-        img = null;
-      }
-      if (cancelled) return;
-
-      if (img) drawContain(ctx, img, x, y, cellW, cellH);
-
-      // Label bar
-      ctx.fillStyle = "rgba(0,0,0,0.65)";
-      ctx.fillRect(x, y + cellH, cellW, labelH);
-      ctx.fillStyle = "#ffffff";
-      ctx.font = `${Math.round(11 * scale)}px sans-serif`;
-      ctx.textAlign = "center";
-      ctx.textBaseline = "middle";
-      ctx.fillText(item.name, x + cellW / 2, y + cellH + labelH / 2);
-    });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [items]);
-
-  const downloadSheet = () => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const a = document.createElement("a");
-    a.href = canvas.toDataURL("image/png");
-    a.download = "character-sheet.png";
-    a.click();
-  };
-
-  const saveSheet = async () => {
-    const canvas = canvasRef.current;
-    if (!canvas || items.length === 0) return;
-    setSaving(true);
-    setSaveError(null);
-    setSaveInfo(null);
-    try {
-      const dataUrl = canvas.toDataURL("image/png");
-      const res = await fetch(`${API_BASE}/api/character-sheet`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ image: dataUrl, projectId }),
-      });
-      if (!res.ok) throw new Error(await res.text());
-      const data = await res.json();
-      setSaveInfo(`Saved current.png (+ backup ${data.backupFilename})`);
-    } catch (e) {
-      setSaveError(String(e));
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const SaveIcon = (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
-      <polyline points="17 21 17 13 7 13 7 21" />
-      <polyline points="7 3 7 8 15 8" />
-    </svg>
-  );
-
-  const DownloadIcon = (
-    <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="7 10 12 15 17 10" />
-      <line x1="12" y1="15" x2="12" y2="3" />
-    </svg>
-  );
-
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="flex items-center justify-between">
-        <p className="text-xs text-ink-600/60">
-          {items.length} character{items.length === 1 ? "" : "s"}
-        </p>
-        <div className="flex items-center gap-2">
-          <button
-            onClick={saveSheet}
-            disabled={saving || items.length === 0}
-            className="flex items-center gap-1.5 px-3 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"
-          >
-            {SaveIcon}
-            {saving ? "Saving..." : "Save Sheet"}
-          </button>
-          <button
-            onClick={downloadSheet}
-            disabled={items.length === 0}
-            className="flex items-center gap-1.5 px-3 py-2 text-xs font-medium rounded-xl border border-ink-200 bg-white text-ink-600 hover:border-ink-300 disabled:opacity-50 transition-colors"
-          >
-            {DownloadIcon}
-            Download Sheet
-          </button>
-        </div>
-      </div>
-
-      {saveInfo && (
-        <p className="text-xs text-emerald-600">{saveInfo}</p>
-      )}
-      {saveError && <p className="text-xs text-red-600">{saveError}</p>}
-
-      <canvas
-        ref={canvasRef}
-        className="rounded-2xl border border-ink-200 max-w-full h-auto"
-      />
-    </div>
-  );
-}