auto-save 2026-05-13 21:29 (~7)

web/components/storyboard-workbench.tsx

@@ -82,6 +82,13 @@ export function StoryboardWorkbench({ job, selectedFrames, open, onClose, onJobU
     .sort((a, b) => a.timestamp - b.timestamp)
   const focusFrame = focusedIdx !== null ? job.frames.find((f) => f.index === focusedIdx) ?? null : null
   const focusSeq = focusFrame ? frames.findIndex((f) => f.index === focusFrame.index) + 1 : 0
+  const defaultFirstRef: ImageRef | null = focusFrame
+    ? { kind: "keyframe", frame_idx: focusFrame.index, label: `分镜 ${focusSeq || focusFrame.index + 1} 首帧` }
+    : null
+  const nextFrame = focusFrame ? frames.find((f) => f.timestamp > focusFrame.timestamp) ?? null : null
+  const defaultLastRef: ImageRef | null = nextFrame
+    ? { kind: "keyframe", frame_idx: nextFrame.index, label: `分镜 ${frames.findIndex((f) => f.index === nextFrame.index) + 1} 尾帧` }
+    : null
 
   const queueSave = (next: StoryboardScene) => {
     setForm(next)
@@ -176,21 +183,20 @@ export function StoryboardWorkbench({ job, selectedFrames, open, onClose, onJobU
                 </div>
               </div>
 
-              {/* 4 图槽 grid：图片是参考，不是最终复刻素材 */}
-              <div className="grid grid-cols-4 gap-4">
+              {/* 首尾帧：图片直接参与视频生成 */}
+              <div className="grid grid-cols-2 gap-4">
                 {([
-                  { key: "subject_image" as const, label: "参考主体", placeholder: "人物 / 手部 / 模特姿态" },
-                  { key: "scene_image" as const, label: "参考场景", placeholder: "药店柜台 / 卧室 / 浴室" },
-                  { key: "product_image" as const, label: "SKG 产品", placeholder: "产品图 / 包装 / 使用状态" },
-                  { key: "action_image" as const, label: "参考动作", placeholder: "拿起 / 佩戴 / 展示 / 递给顾客" },
+                  { key: "first_image" as const, label: "首帧", placeholder: "默认当前分镜关键帧" },
+                  { key: "last_image" as const, label: "尾帧", placeholder: defaultLastRef ? "默认下一张已选分镜" : "粘贴一张结束画面" },
                 ]).map(({ key, label, placeholder }) => {
-                  const ref = form[key]
+                  const fallback = key === "first_image" ? defaultFirstRef : defaultLastRef
+                  const ref = form[key] ?? fallback
                   const url = ref ? resolveImageRefUrl(job.id, ref) : ""
                   return (
                     <div key={key} className="rounded-lg bg-white/[0.04] border border-white/10 p-2.5">
                       <div className="text-[12px] text-white font-semibold mb-2 flex items-center justify-between">
                         <span>{label}</span>
-                        {ref && (
+                        {form[key] && (
                           <button
                             onClick={() => queueSave({ ...form, [key]: null })}
                             className="text-[10px] text-white/40 hover:text-rose-300"
@@ -238,6 +244,9 @@ export function StoryboardWorkbench({ job, selectedFrames, open, onClose, onJobU
                   )
                 })}
               </div>
+              <div className="rounded-md border border-violet-300/20 bg-violet-500/10 px-3 py-2 text-[11px] leading-relaxed text-violet-100/75">
+                现在按首尾帧出片：首帧默认当前分镜，尾帧默认下一张已选分镜。需要指定结尾时，在任意关键帧或生成图点 📋，再粘贴到「尾帧」。
+              </div>
 
               {/* 改造 brief：明确“借鉴参考 → 变成 SKG 产品视频”，避免直接复刻 */}
               <section className="rounded-lg bg-white/[0.035] border border-white/10 p-3">
@@ -314,13 +323,13 @@ export function StoryboardWorkbench({ job, selectedFrames, open, onClose, onJobU
                     }
                   }}
                   className="w-full py-3 rounded-lg text-[13.5px] font-semibold inline-flex items-center justify-center gap-2 bg-gradient-to-r from-rose-500 to-violet-500 text-white border border-violet-300/40 shadow-lg shadow-violet-500/20 hover:from-rose-400 hover:to-violet-400 disabled:opacity-40 disabled:cursor-not-allowed"
-                  title={`用当前分镜关键帧作为首帧，调用 ${currentModelLabel} 生视频 API`}
+                  title={`用首帧和尾帧调用 ${currentModelLabel} 生视频 API`}
                 >
                   {generating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Wand2 className="h-4 w-4" />}
-                  用当前关键帧生成视频
+                  用首尾帧生成视频
                 </button>
                 <div className="mt-2 text-[10.5px] text-white/35 leading-relaxed">
-                  直接用当前分镜关键帧作为首帧快速出片；4 图槽和改造目标只作为提示词参考，生成中的进度和完成后的 MP4 会显示在 Video Gen 节点。
+                  直接用首帧 + 尾帧快速生成连续过渡视频；改造目标和原视频链接只作为节奏 / 镜头参考，生成进度和 MP4 会显示在 Video Gen 节点。
                 </div>
               </section>
           </div>