From 40a665a578308443a5599d038a522f852eb12227 Mon Sep 17 00:00:00 2001
From: kang <wankang2050@gmail.com>
Date: Wed, 13 May 2026 20:18:24 +0800
Subject: [PATCH] auto-save 2026-05-13 20:18 (~4)

---
 .memory/worklog.json           |   7 +++
 api/main.py                    |   2 +-
 docs/source-analysis.html      |  12 ++++
 web/components/nodes/index.tsx | 101 ++++++++++++++++++++++++++++-----
 4 files changed, 106 insertions(+), 16 deletions(-)

diff --git a/.memory/worklog.json b/.memory/worklog.json
index 203133f..332f0ef 100644
--- a/.memory/worklog.json
+++ b/.memory/worklog.json
@@ -2288,6 +2288,13 @@
       "type": "session-heartbeat",
       "message": "Codex 会话活跃 · 最近命令：codex · 1 项未提交变更 · 最近提交：auto-save 2026-05-13 20:07 (~5)",
       "files_changed": 1
+    },
+    {
+      "ts": "2026-05-13T20:12:54+08:00",
+      "type": "commit",
+      "message": "auto-save 2026-05-13 20:12 (~5)",
+      "hash": "0b6a463",
+      "files_changed": 5
     }
   ]
 }
diff --git a/api/main.py b/api/main.py
index e1ee66f..ed89673 100644
--- a/api/main.py
+++ b/api/main.py
@@ -199,7 +199,7 @@ def run(cmd: list[str], cwd: Path | None = None) -> str:
 # ---- 启发式选帧工具 ----
 import imagehash
 import numpy as np
-from PIL import Image
+from PIL import Image, ImageEnhance, ImageFilter, ImageOps
 
 
 def _sharpness(img_path: Path) -> float:
diff --git a/docs/source-analysis.html b/docs/source-analysis.html
index 7c9b347..df84892 100644
--- a/docs/source-analysis.html
+++ b/docs/source-analysis.html
@@ -830,6 +830,18 @@ api/main.py
         <h2>变更记录</h2>
         <p>这个记录不是 git log 的替代品。它记录“产品理解发生了什么变化、影响了哪些源码、你以后描述需求时该怎么说”。后续每次改功能都要补一条。</p>
         <div class="changelog">
+          <article class="change">
+            <header>
+              <h3>2026-05-13 · 分镜编排增加快速生成视频任务</h3>
+              <span class="tag violet">StoryboardWorkbench</span>
+              <span class="tag rose">VideoGenNode</span>
+            </header>
+            <div class="body">
+              <p><strong>问题：</strong>4 图槽已经粘贴参考图后，用户需要快速交付可用于视频生成的 prompt，并在 Video Gen 节点看到结果承载。</p>
+              <p><strong>改动：</strong>分镜编排明细区增加“快速生成视频”按钮，自动根据 4 图槽、时长和改造目标生成 SKG 产品视频 prompt；生成的任务卡展示在 <code>VideoGenNode</code> 上方，hover 可查看大图和 prompt，点击卡片复制 prompt。</p>
+              <p><strong>影响：</strong><code>web/components/storyboard-workbench.tsx</code>、<code>web/components/nodes/index.tsx</code>、<code>web/app/page.tsx</code>、<code>web/lib/api.ts</code>。当前是前端快速交付承载，后续接 Seedance / Kling / Veo 3 时替换为真实视频 URL。</p>
+            </div>
+          </article>
           <article class="change">
             <header>
               <h3>2026-05-13 · 分镜编排下拉区支持上推缩小</h3>
diff --git a/web/components/nodes/index.tsx b/web/components/nodes/index.tsx
index dbe5f9b..1de6f46 100644
--- a/web/components/nodes/index.tsx
+++ b/web/components/nodes/index.tsx
@@ -941,23 +941,94 @@ export function StoryboardNode({ data, selected }: any) {
 /* ============================================================
    9. VideoGenNode (placeholder)
    ============================================================ */
-export function VideoGenNode({ selected }: any) {
+export function VideoGenNode({ data, selected }: any) {
+  const d: NodeData = data
+  const drafts = d.videoDrafts ?? []
+  const status: NodeStatus = drafts.length > 0 ? "done" : "pending"
+  const aspect = d.job && (d.job.width ?? 0) > 0 && (d.job.height ?? 0) > 0
+    ? `${d.job.width}/${d.job.height}`
+    : "9/16"
   return (
-    <NodeShell
-      type="ai" status="pending"
-      icon={<Film className="h-4 w-4" />}
-      title="生成视频 · Video Gen"
-      subtitle="STEP 7 · 首帧 + 动作 prompt"
-      selected={selected}
-    >
-      <div className="grid grid-cols-3 gap-1.5 text-[10.5px]">
-        {["Seedance", "Kling", "Veo 3"].map((m) => (
-          <div key={m} className="rounded-md border border-dashed border-black/15 dark:border-white/10 px-2 py-1.5 text-center text-[var(--text-faint)]">
-            <span className="text-[var(--text-strong)] text-[11px]">{m}</span>
+    <div className="relative" style={{ width: 280 }}>
+      {drafts.length > 0 && (
+        <div
+          className="absolute left-0 right-0 grid grid-cols-3 gap-1.5"
+          style={{ bottom: "calc(100% + 12px)" }}
+        >
+          {drafts.slice(0, 6).map((v, i) => (
+            <div
+              key={v.id}
+              className="group relative rounded-md border border-rose-300/55 transition shadow-lg hover:-translate-y-0.5 bg-black"
+              style={{ aspectRatio: aspect }}
+            >
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  void navigator.clipboard?.writeText(v.prompt).catch(() => {})
+                }}
+                title={`${v.label} · 点击复制视频 prompt`}
+                className="absolute inset-0 w-full h-full overflow-hidden rounded-md bg-black"
+              >
+                <img
+                  src={v.poster_url}
+                  alt={v.label}
+                  className="absolute inset-0 w-full h-full object-cover"
+                />
+                <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 to-transparent px-1.5 py-1 text-left">
+                  <div className="truncate text-[9.5px] font-semibold text-white">视频 {i + 1}</div>
+                  <div className="truncate text-[8.5px] font-mono text-white/60">{v.duration.toFixed(1)}s</div>
+                </div>
+              </button>
+              <div
+                className="pointer-events-none absolute opacity-0 group-hover:opacity-100 scale-95 group-hover:scale-100 transition-all duration-150 z-[60]"
+                style={{
+                  bottom: "calc(100% + 10px)",
+                  left: "50%",
+                  transform: "translateX(-50%)",
+                  transformOrigin: "bottom center",
+                }}
+              >
+                <div className="rounded-lg overflow-hidden border-2 border-rose-300/60 bg-black shadow-2xl" style={{ width: 300 }}>
+                  <div style={{ aspectRatio: aspect }}>
+                    <img src={v.poster_url} alt="" className="w-full h-full object-cover" />
+                  </div>
+                  <div className="space-y-1 bg-black/90 px-2 py-1.5 text-white">
+                    <div className="flex items-center justify-between gap-2 text-[10.5px]">
+                      <span className="truncate">{v.label}</span>
+                      <span className="shrink-0 font-mono text-white/55">{v.provider}</span>
+                    </div>
+                    <div className="line-clamp-3 text-[9.5px] leading-snug text-white/55">
+                      {v.prompt}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      <NodeShell
+        type="ai" status={status}
+        icon={<Film className="h-4 w-4" />}
+        title="生成视频 · Video Gen"
+        subtitle={`STEP 7 · 首帧 + 动作 prompt${drafts.length > 0 ? ` · ${drafts.length} 个任务` : ""}`}
+        selected={selected}
+      >
+        <div className="grid grid-cols-3 gap-1.5 text-[10.5px]">
+          {["Seedance", "Kling", "Veo 3"].map((m) => (
+            <div key={m} className="rounded-md border border-dashed border-black/15 dark:border-white/10 px-2 py-1.5 text-center text-[var(--text-faint)]">
+              <span className="text-[var(--text-strong)] text-[11px]">{m}</span>
+            </div>
+          ))}
+        </div>
+        {drafts.length > 0 && (
+          <div className="mt-2 rounded-md border border-rose-300/25 bg-rose-500/10 px-2 py-1.5 text-[10.5px] text-[var(--text-soft)]">
+            已生成 {drafts.length} 条视频 prompt · 点上方卡片复制
           </div>
-        ))}
-      </div>
-    </NodeShell>
+        )}
+      </NodeShell>
+    </div>
   )
 }