@effectnode/media 0.4.0 → 0.5.0

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

@@ -1,4 +1,4 @@
-import { appendFileSync, existsSync, mkdirSync, readFileSync, writeFileSync, } from "node:fs";
+import { appendFileSync, existsSync, mkdirSync, readFileSync, statSync, writeFileSync, } from "node:fs";
 import { dirname, join } from "node:path";
 import { homedir } from "node:os";
 import { randomUUID } from "node:crypto";
@@ -38,6 +38,25 @@ function slugify(v) {
 function isValidProjectId(id) {
     return PROJECT_ID_RE.test(id);
 }
+const OUTPUT_DIR = join(APP_DATA_DIR, "output");
+/** Return an existing output file's metadata if already generated, else null. */
+function existingOutput(projectId, filename) {
+    const path = join(OUTPUT_DIR, projectId, filename);
+    if (!existsSync(path))
+        return null;
+    let updatedAt = Date.now();
+    try {
+        updatedAt = statSync(path).mtimeMs;
+    }
+    catch {
+        // Fall back to now — only affects the cache-busting query param.
+    }
+    return {
+        filename,
+        url: `/api/files?path=${encodeURIComponent(path)}`,
+        updatedAt,
+    };
+}
 // In-memory queues, keyed by project id. Persisted to disk on every mutation so
 // the queue survives app restarts and is visible at tasks/:projectId/queue.json.
 const queues = new Map();
@@ -193,17 +212,27 @@ async function runRenderAssets(ctx, characters, places) {
             statusText: `Generating character: ${c?.name || slug}`,
             progress: { current, total },
         });
-        const r = await generateAssetImage(ctx.projectId, "character", slug, prompt, ctx.log);
-        throwIfAborted(ctx.signal);
-        if ("error" in r)
-            throw new Error(r.error);
-        assets.push({
-            kind: "character",
-            slug,
-            filename: r.filename,
-            url: r.url,
-            updatedAt: Date.now(),
-        });
+        // Skip media that's already been generated for this character.
+        const existing = existingOutput(ctx.projectId, `character-${slug}.png`);
+        let entry;
+        if (existing) {
+            ctx.log(`Already generated: character-${slug}.png — skipping\n`);
+            entry = { kind: "character", slug, ...existing };
+        }
+        else {
+            const r = await generateAssetImage(ctx.projectId, "character", slug, prompt, ctx.log);
+            throwIfAborted(ctx.signal);
+            if ("error" in r)
+                throw new Error(r.error);
+            entry = {
+                kind: "character",
+                slug,
+                filename: r.filename,
+                url: r.url,
+                updatedAt: Date.now(),
+            };
+        }
+        assets.push(entry);
         ctx.update({ result: { assets: [...assets] } });
     }
     for (const p of placesList) {
@@ -217,17 +246,26 @@ async function runRenderAssets(ctx, characters, places) {
             statusText: `Generating place: ${p?.name || slug}`,
             progress: { current, total },
         });
-        const r = await generateAssetImage(ctx.projectId, "place", slug, prompt, ctx.log);
-        throwIfAborted(ctx.signal);
-        if ("error" in r)
-            throw new Error(r.error);
-        assets.push({
-            kind: "place",
-            slug,
-            filename: r.filename,
-            url: r.url,
-            updatedAt: Date.now(),
-        });
+        const existing = existingOutput(ctx.projectId, `place-${slug}.png`);
+        let entry;
+        if (existing) {
+            ctx.log(`Already generated: place-${slug}.png — skipping\n`);
+            entry = { kind: "place", slug, ...existing };
+        }
+        else {
+            const r = await generateAssetImage(ctx.projectId, "place", slug, prompt, ctx.log);
+            throwIfAborted(ctx.signal);
+            if ("error" in r)
+                throw new Error(r.error);
+            entry = {
+                kind: "place",
+                slug,
+                filename: r.filename,
+                url: r.url,
+                updatedAt: Date.now(),
+            };
+        }
+        assets.push(entry);
         ctx.update({ result: { assets: [...assets] } });
     }
     ctx.update({ result: { assets } });
@@ -248,16 +286,25 @@ async function runRenderSceneImages(ctx, scenes) {
             statusText: `Generating scene image: ${slug}`,
             progress: { current, total },
         });
-        const r = await generateSceneImage(ctx.projectId, sc, ctx.log);
-        throwIfAborted(ctx.signal);
-        if ("error" in r)
-            throw new Error(r.error);
-        sceneImages.push({
-            slug,
-            filename: r.filename,
-            url: r.url,
-            updatedAt: Date.now(),
-        });
+        const existing = existingOutput(ctx.projectId, `scene-${slug}.png`);
+        let entry;
+        if (existing) {
+            ctx.log(`Already generated: scene-${slug}.png — skipping\n`);
+            entry = { slug, ...existing };
+        }
+        else {
+            const r = await generateSceneImage(ctx.projectId, sc, ctx.log);
+            throwIfAborted(ctx.signal);
+            if ("error" in r)
+                throw new Error(r.error);
+            entry = {
+                slug,
+                filename: r.filename,
+                url: r.url,
+                updatedAt: Date.now(),
+            };
+        }
+        sceneImages.push(entry);
         ctx.update({ result: { sceneImages: [...sceneImages] } });
     }
     ctx.update({ result: { sceneImages } });
@@ -279,16 +326,25 @@ async function runRenderVideos(ctx, uvPath, scenes, characters) {
             statusText: `Generating video: ${slug}`,
             progress: { current, total },
         });
-        const r = await generateSceneVideo(uvPath, ctx.projectId, sc, chars, ctx.log);
-        throwIfAborted(ctx.signal);
-        if ("error" in r)
-            throw new Error(r.error);
-        videos.push({
-            slug,
-            filename: r.filename,
-            url: r.url,
-            updatedAt: Date.now(),
-        });
+        const existing = existingOutput(ctx.projectId, `scene-${slug}.mp4`);
+        let entry;
+        if (existing) {
+            ctx.log(`Already generated: scene-${slug}.mp4 — skipping\n`);
+            entry = { slug, ...existing };
+        }
+        else {
+            const r = await generateSceneVideo(uvPath, ctx.projectId, sc, chars, ctx.log);
+            throwIfAborted(ctx.signal);
+            if ("error" in r)
+                throw new Error(r.error);
+            entry = {
+                slug,
+                filename: r.filename,
+                url: r.url,
+                updatedAt: Date.now(),
+            };
+        }
+        videos.push(entry);
         ctx.update({ result: { videos: [...videos] } });
     }
     ctx.update({ result: { videos } });

package/frontend/index.html

@@ -4,7 +4,14 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>effectnode-media</title>
+  <meta name="theme-color" content="#eaf8f6" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..600&display=swap"
+    rel="stylesheet"
+  />
+  <title>Lambobo Studio</title>
 </head>
 
 <body>

package/frontend/src/movie-app/MediaStudio.tsx

@@ -1,9 +1,13 @@
+import Aurora from "./components/Aurora";
 import ProjectManager from "./components/ProjectManager";
 
 export default function MediaStudio() {
   return (
-    <div className="flex flex-col h-screen p-8 bg-ink-50">
-      <ProjectManager />
+    <div className="relative min-h-screen">
+      <Aurora />
+      <div className="relative z-10 mx-auto w-full max-w-4xl px-6 py-12 md:py-16">
+        <ProjectManager />
+      </div>
     </div>
   );
 }

package/frontend/src/movie-app/SetupPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { useLogStore, type LogEntry } from "./stores/logStore";
+import Aurora from "./components/Aurora";
 
 interface StepStatus {
   step: string;
@@ -104,7 +105,7 @@ function SetupPage({ port = 8765 }) {
             height="18"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="currentColor"
+            stroke="#4fc3bc"
             strokeWidth="2"
           >
             <circle
@@ -131,7 +132,7 @@ function SetupPage({ port = 8765 }) {
             height="18"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="#22c55e"
+            stroke="#0abab5"
             strokeWidth="2"
           >
             <circle cx="12" cy="12" r="10" />
@@ -145,7 +146,7 @@ function SetupPage({ port = 8765 }) {
             height="18"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="#ef4444"
+            stroke="#fb7185"
             strokeWidth="2"
           >
             <circle cx="12" cy="12" r="10" />
@@ -159,7 +160,7 @@ function SetupPage({ port = 8765 }) {
             height="18"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="#9ca3af"
+            stroke="#83a0a7"
             strokeWidth="2"
           >
             <circle cx="12" cy="12" r="10" />
@@ -177,7 +178,7 @@ function SetupPage({ port = 8765 }) {
             height="14"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="#ef4444"
+            stroke="#fb7185"
             strokeWidth="2"
             className="shrink-0"
           >
@@ -192,13 +193,13 @@ function SetupPage({ port = 8765 }) {
             height="14"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="#f59e0b"
+            stroke="#fbbf24"
             strokeWidth="2"
             className="shrink-0"
           >
             <path d="M12 2L2 22h20L12 2z" />
             <line x1="12" y1="9" x2="12" y2="14" />
-            <circle cx="12" cy="18" r="0.5" fill="#f59e0b" />
+            <circle cx="12" cy="18" r="0.5" fill="#fbbf24" />
           </svg>
         );
       default:
@@ -208,7 +209,7 @@ function SetupPage({ port = 8765 }) {
             height="14"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="#6b7280"
+            stroke="#5e7c83"
             strokeWidth="2"
             className="shrink-0"
           >
@@ -225,65 +226,99 @@ function SetupPage({ port = 8765 }) {
   };
 
   return (
-    <div className="flex flex-col h-screen p-8 font-sans bg-ink-50 text-ink-800">
-      <h2 className="text-lg font-semibold mb-4 text-ink-900">
-        Media Studio Setup
-      </h2>
+    <div className="relative min-h-screen">
+      <Aurora />
+      <div className="relative z-10 mx-auto w-full max-w-3xl px-6 py-12">
+        {/* Hero */}
+        <header>
+          <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-tiffany-600">
+            Lambobo Studio
+          </p>
+          <h1 className="mt-3 font-display text-4xl font-light leading-[1.06] text-ink-900">
+            Setting up{" "}
+            <span className="wordmark font-medium italic">your studio</span>
+          </h1>
+          <p className="mt-4 text-sm leading-relaxed text-ink-600/80">
+            Gathering models and starting the local server. The first run takes
+            a minute.
+          </p>
+        </header>
 
-      {error && <div className="text-red-600 mb-4">Error: {error}</div>}
-      {complete && !error && (
-        <div className="text-ink-600 mb-4 font-bold">
-          Setup complete! Server running on port {port}
-        </div>
-      )}
-      <div className="mb-4">
-        {steps.map((step, i) => (
-          <div
-            key={i}
-            className="flex items-center gap-2 py-2 transition-opacity"
-            style={{ opacity: step.status === "pending" ? 0.5 : 1 }}
-          >
-            <StatusIcon status={step.status} />
-            <span className="text-sm">{step.label}</span>
+        {error && (
+          <div className="mt-8 rounded-2xl border border-rose-200 bg-rose-50/70 px-4 py-3 text-sm text-rose-600 backdrop-blur-sm">
+            Error: {error}
+          </div>
+        )}
+        {complete && !error && (
+          <div className="glass mt-8 rounded-2xl px-4 py-3 text-sm font-medium text-tiffany-700 shadow-card">
+            Setup complete — opening your studio…
+          </div>
+        )}
+
+        {/* Checks */}
+        <div className="glass mt-8 rounded-3xl p-6 shadow-card">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-ink-500">
+            Checks
+          </p>
+          <div className="mt-2">
+            {steps.length === 0 ? (
+              <p className="py-2 text-sm italic text-ink-500/70">
+                Starting the local server…
+              </p>
+            ) : (
+              steps.map((step, i) => (
+                <div
+                  key={i}
+                  className="flex items-center gap-2.5 py-2 transition-opacity"
+                  style={{ opacity: step.status === "pending" ? 0.45 : 1 }}
+                >
+                  <StatusIcon status={step.status} />
+                  <span className="text-sm text-ink-800">{step.label}</span>
+                </div>
+              ))
+            )}
           </div>
-        ))}
-      </div>
-      {/* Log display panel */}
-      <div className="flex-1 flex flex-col min-h-0 border border-ink-200 rounded-2xl overflow-hidden bg-white shadow-card">
-        <div className="flex items-center justify-between px-4 py-2.5 bg-ink-50 border-b border-ink-200">
-          <span className="text-xs font-semibold text-ink-600/80 uppercase tracking-wider">
-            Logs
-          </span>
-          <span className="text-xs text-ink-500">{logs.length} entries</span>
         </div>
-        <div className="flex-1 overflow-y-auto p-4 font-mono text-xs leading-relaxed">
-          {logs.length === 0 ? (
-            <div className="text-ink-500 italic">Waiting for logs...</div>
-          ) : (
-            logs.map((entry) => (
-              <div
-                key={entry.id}
-                className="flex items-start gap-2 py-0.5 hover:bg-ink-100 rounded px-1"
-              >
-                <LogIcon level={entry.level} />
-                <span className="text-ink-500 shrink-0 select-none">
-                  {formatTime(entry.timestamp)}
-                </span>
-                <span
-                  className={
-                    entry.level === "error"
-                      ? "text-red-600"
-                      : entry.level === "warn"
-                        ? "text-amber-600"
-                        : "text-ink-700"
-                  }
+
+        {/* Log console — the film-editing-bay contrast inside the dream */}
+        <div className="glass-dark mt-5 flex min-h-0 flex-col overflow-hidden rounded-3xl shadow-card">
+          <div className="flex items-center justify-between border-b border-white/10 px-5 py-3">
+            <span className="text-[11px] font-semibold uppercase tracking-[0.2em] text-tiffany-300/80">
+              Logs
+            </span>
+            <span className="text-xs text-ink-400">
+              {logs.length} {logs.length === 1 ? "entry" : "entries"}
+            </span>
+          </div>
+          <div className="flex-1 overflow-y-auto p-5 font-mono text-xs leading-relaxed">
+            {logs.length === 0 ? (
+              <div className="italic text-ink-400">Waiting for logs…</div>
+            ) : (
+              logs.map((entry) => (
+                <div
+                  key={entry.id}
+                  className="flex items-start gap-2 rounded px-1 py-0.5 hover:bg-white/5"
                 >
-                  {entry.message}
-                </span>
-              </div>
-            ))
-          )}
-          <div ref={logEndRef} />
+                  <LogIcon level={entry.level} />
+                  <span className="shrink-0 select-none text-ink-400">
+                    {formatTime(entry.timestamp)}
+                  </span>
+                  <span
+                    className={
+                      entry.level === "error"
+                        ? "text-rose-300"
+                        : entry.level === "warn"
+                          ? "text-amber-300"
+                          : "text-tiffany-100"
+                    }
+                  >
+                    {entry.message}
+                  </span>
+                </div>
+              ))
+            )}
+            <div ref={logEndRef} />
+          </div>
         </div>
       </div>
     </div>

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

@@ -0,0 +1,13 @@
+// The signature atmosphere: a slow-drifting aurora of tiffany, periwinkle,
+// blush and sky behind the frosted-glass interface. Purely decorative and
+// pointer-transparent; animation is disabled for users who prefer reduced motion.
+export default function Aurora() {
+  return (
+    <div className="aurora" aria-hidden="true">
+      <div className="aurora-blob aurora-blob--tiffany" />
+      <div className="aurora-blob aurora-blob--periwinkle" />
+      <div className="aurora-blob aurora-blob--blush" />
+      <div className="aurora-blob aurora-blob--sky" />
+    </div>
+  );
+}

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

@@ -297,9 +297,7 @@ export default function GenerateVideoTab({ projectId }: Props) {
                       <tr
                         key={rowIdx}
                         className={`border-b border-ink-200 transition-colors ${
-                          isSelected
-                            ? "bg-white"
-                            : "bg-ink-100/50 opacity-60"
+                          isSelected ? "bg-white" : "bg-ink-100/50 opacity-60"
                         }`}
                       >
                         <td className="px-3 py-1.5">
@@ -335,9 +333,7 @@ export default function GenerateVideoTab({ projectId }: Props) {
         {!store.csvFilename && (
           <p className="text-xs text-ink-600/50 mt-1.5">
             Upload a CSV with a{" "}
-            <code className="text-[11px] bg-ink-100 px-1 rounded">
-              name
-            </code>{" "}
+            <code className="text-[11px] bg-ink-100 px-1 rounded">name</code>{" "}
             column to batch-generate many videos. Use{" "}
             <code className="text-[11px] bg-ink-100 px-1 rounded">{`{{column}}`}</code>{" "}
             in your prompt as a template.
@@ -362,8 +358,9 @@ export default function GenerateVideoTab({ projectId }: Props) {
         </p>
 
         <a
-          href={`/lambobo.png.zip`}
-          download="lambobo.zip"
+          href={`/lambobo.png`}
+          download="lambobo.png"
+          target="_blank"
           className="inline-flex items-center gap-1.5 mt-2 text-xs font-medium text-ink-600 hover:text-ink-900 transition-colors"
         >
           {DownloadIcon}