改 Storyboard 节点
@@ -841,13 +841,26 @@ SubjectAsset {
- 2026-05-14 · 关键帧素材面板右侧改为紧凑状态栏
+ 2026-05-14 · 场景图改为主体资产之后生成
+ FrameLightbox
+ API
+
+
+
问题：场景图如果先于主体资产生成，只能做普通背景清理，无法准确知道要移除哪个主体，也不利于后续生成相似但不同或同构换风格的场景。
+
改动：FrameLightbox 页签顺序改为“原图/清洗 → 主体资产 → 场景图 → 审核”；画面工作台缩略图和进度文案也同步为主体资产先于场景图。场景图页新增“去主体原场景 / 相似新场景 / 同构换风格”和风格选择，且在没有主体资产时提示先生成主体资产。
+
后端：generateSceneAsset 请求新增 scene_mode 和 scene_style；后端提示词会优先读取已生成主体资产对应的主体名称，生成去主体并补背景的场景图，再按模式决定是否做相似变化或风格变化。
+
影响：web/components/lightbox.tsx、web/components/nodes/index.tsx、web/lib/api.ts、api/main.py、docs/source-analysis.html。
+
+
+
+ 2026-05-14 · 关键帧素材面板统一右侧操作栏
FrameLightbox
Layout
-
问题：移除旧元素提取和手工加主体入口后，关键帧详情右侧内容变少，继续占用大列会压缩左侧主图和清洗操作区。
-
改动：FrameLightbox 在“原图/清洗、场景图、审核”页把右侧改成固定窄状态栏，左侧主图和操作区获得更大宽度；“主体资产”页仍保留较宽右栏，用于主体识别、主体清单和资产包。
+
问题：“原图/清洗、场景图、主体资产、审核”都应遵循同一结构：左侧负责看图和框选，右侧负责操作、状态和结果；旧布局把部分操作塞在左侧下方，导致左侧满、右侧空。
+
改动：FrameLightbox 统一为左侧主图、右侧操作栏。清洗按钮、批量清洗、清洗结果预览、场景图生成/复制、主体识别/主体资产包和审核状态都在右侧；切换到非清洗页时会退出框选模式，避免画框状态残留。
影响：web/components/lightbox.tsx、docs/source-analysis.html。
diff --git a/web/components/lightbox.tsx b/web/components/lightbox.tsx
index ff40d00..961d44b 100644
--- a/web/components/lightbox.tsx
+++ b/web/components/lightbox.tsx
@@ -6,7 +6,7 @@ import {
frameUrl, cleanedFrameUrl, apiAssetUrl,
describeFrame, cleanupFrame, applyCleanedFrame, discardCleanedFrame, addElement, updateElement, deleteElement,
generateSceneAsset, generateSubjectAssets,
- type AssetBackground, type AssetSize, type KeyFrame, type Job, type ImageRef, type SubjectKind,
+ type AssetBackground, type AssetSize, type KeyFrame, type Job, type ImageRef, type SceneMode, type SceneStyle, type SubjectKind,
} from "@/lib/api"
import { toast } from "sonner"
@@ -51,11 +51,25 @@ type LightboxTab = "clean" | "scene" | "subject" | "review"
const LIGHTBOX_TABS: Array<{ key: LightboxTab; label: string }> = [
{ key: "clean", label: "原图/清洗" },
- { key: "scene", label: "场景图" },
{ key: "subject", label: "主体资产" },
+ { key: "scene", label: "场景图" },
{ key: "review", label: "审核" },
]
+const SCENE_MODE_OPTIONS: Array<[SceneMode, string]> = [
+ ["remove_subject", "去主体原场景"],
+ ["similar", "相似新场景"],
+ ["style", "同构换风格"],
+]
+
+const SCENE_STYLE_OPTIONS: Array<[SceneStyle, string]> = [
+ ["source", "跟随原图"],
+ ["premium_product", "高端产品感"],
+ ["clean_studio", "干净工作室"],
+ ["warm_lifestyle", "真实生活感"],
+ ["cinematic", "电影感"],
+]
+
export function FrameLightbox({ jobId, frames, activeIndex, selected, onClose, onChange, onToggleSelect, onJobUpdate, onSwitchPanel, onCopyImage, embedded = false }: Props) {
const [describing, setDescribing] = useState(false)
const [cleaningFrameIds, setCleaningFrameIds] = useState
>(new Set())
@@ -65,6 +79,8 @@ export function FrameLightbox({ jobId, frames, activeIndex, selected, onClose, o
const [sceneGenerating, setSceneGenerating] = useState(false)
const [subjectGenerating, setSubjectGenerating] = useState(null)
const [assetSize, setAssetSize] = useState("source")
+ const [sceneMode, setSceneMode] = useState("remove_subject")
+ const [sceneStyle, setSceneStyle] = useState("source")
const [subjectKinds, setSubjectKinds] = useState>({})
const [subjectBackgrounds, setSubjectBackgrounds] = useState>({})
const [subjectViews, setSubjectViews] = useState>({})
@@ -124,6 +140,7 @@ export function FrameLightbox({ jobId, frames, activeIndex, selected, onClose, o
const selectedFrameIndices = Array.from(selected).sort((a, b) => a - b)
const sharedSubjectFrameIndices = selectedFrameIndices.length > 1 ? selectedFrameIndices : [f.index]
const subjectAssetCount = elements.reduce((sum, item) => sum + (item.subject_assets?.length ?? 0), 0)
+ const hasSubjectAssets = subjectAssetCount > 0
const qualityWarnings = [
...(f.quality_report?.warnings ?? []),
...(latestSceneAsset?.quality_report?.warnings ?? []),
@@ -197,9 +214,14 @@ export function FrameLightbox({ jobId, frames, activeIndex, selected, onClose, o
}
const handleGenerateSceneAsset = async () => {
+ if (!hasSubjectAssets) {
+ setActiveTab("subject")
+ toast.message("先生成主体资产，再生成去主体场景图")
+ return
+ }
setSceneGenerating(true)
try {
- const updated = await generateSceneAsset(jobId, f.index, { size: assetSize })
+ const updated = await generateSceneAsset(jobId, f.index, { size: assetSize, scene_mode: sceneMode, scene_style: sceneStyle })
onJobUpdate?.(updated)
toast.success(`分镜 ${f.index + 1} 场景图已生成`)
} catch (e) {
@@ -406,7 +428,15 @@ export function FrameLightbox({ jobId, frames, activeIndex, selected, onClose, o
))}
- {latestSceneAsset ? "场景已生成" : "场景待生成"}
+ {hasSubjectAssets ? `${subjectAssetCount} 主体资产` : "主体待生成"}
·
- {subjectAssetCount > 0 ? `${subjectAssetCount} 主体资产` : "主体待生成"}
+ {latestSceneAsset ? "场景已生成" : "场景待生成"}
- {/* 主体 — 左：大图 + 主操作；右：当前页上下文 / 主体资产 */}
+ {/* 主体 — 左：主图；右：当前页操作 / 状态 / 主体资产 */}
{/* 左侧大图区 */}
@@ -650,11 +676,50 @@ export function FrameLightbox({ jobId, frames, activeIndex, selected, onClose, o
+
+ 先根据主体资产确认要移除的主体，再补全空场景；之后可生成相似新场景或同构换风格场景。
+
+
+
+
+
+ {!hasSubjectAssets && (
+
+ 还没有主体资产。先在“主体资产”页生成主体图，场景图才能更准确地去主体和补背景。
+
+ )}
{latestSceneAsset ? (
})
-
{latestSceneAsset.width}×{latestSceneAsset.height}
+
+ {latestSceneAsset.width}×{latestSceneAsset.height}
+ {latestSceneAsset.scene_mode && (
+ <> · {SCENE_MODE_OPTIONS.find(([value]) => value === latestSceneAsset.scene_mode)?.[1] ?? latestSceneAsset.scene_mode}
+ )}
+
{onCopyImage && (
+ {!hasSubjectAssets && (
+
+ )}
)}
{activeTab === "review" && (
@@ -697,10 +771,6 @@ export function FrameLightbox({ jobId, frames, activeIndex, selected, onClose, o
清洗
{f.cleaned_applied ? "已应用" : hasCleaned ? "待确认" : "未处理"}
-
-
场景
-
{latestSceneAsset ? "已生成" : "未生成"}
-
0 ? "border-violet-300/35 bg-violet-500/12 text-violet-100" : "border-white/10 bg-black/25 text-white/55"}`}>
主体
{elements.length} 个
@@ -709,6 +779,10 @@ export function FrameLightbox({ jobId, frames, activeIndex, selected, onClose, o
资产
{subjectAssetCount} 张
+
+
场景
+
{latestSceneAsset ? "已生成" : "未生成"}
+
{qualityWarnings.length > 0 ? (
@@ -722,7 +796,7 @@ export function FrameLightbox({ jobId, frames, activeIndex, selected, onClose, o
)}
- 审核通过后，把场景图和主体资产复制到分镜槽位；当前不会自动覆盖素材。
+ 审核通过后，把主体资产和场景图复制到分镜槽位；当前不会自动覆盖素材。
)}
diff --git a/web/components/nodes/index.tsx b/web/components/nodes/index.tsx
index 4ea3cda..1764da4 100644
--- a/web/components/nodes/index.tsx
+++ b/web/components/nodes/index.tsx
@@ -1257,18 +1257,6 @@ export function VisualLabNode({ data, selected }: any) {
borderClass: f.quality_report?.risk === "bad" ? "border-rose-300/70" : f.quality_report?.risk === "warn" ? "border-amber-300/70" : "border-orange-300/50",
aspect,
})) : []),
- ...sceneAssets.map((p) => ({
- id: `scene:${p.frameIdx}:${p.assetId}`,
- kind: "scene" as const,
- group: "场景图",
- frameIdx: p.frameIdx,
- assetId: p.assetId,
- src: p.src,
- label: p.label,
- caption: `${p.width}×${p.height}`,
- borderClass: p.risk === "bad" ? "border-rose-300/70" : p.risk === "warn" ? "border-amber-300/70" : "border-emerald-300/60",
- aspect: p.width && p.height ? `${p.width}/${p.height}` : aspect,
- })),
...subjectAssets.map((p) => ({
id: `subject:${p.frameIdx}:${p.assetId}`,
kind: "subject" as const,
@@ -1281,6 +1269,18 @@ export function VisualLabNode({ data, selected }: any) {
borderClass: "border-violet-300/65",
aspect: p.width && p.height ? `${p.width}/${p.height}` : "1/1",
})),
+ ...sceneAssets.map((p) => ({
+ id: `scene:${p.frameIdx}:${p.assetId}`,
+ kind: "scene" as const,
+ group: "场景图",
+ frameIdx: p.frameIdx,
+ assetId: p.assetId,
+ src: p.src,
+ label: p.label,
+ caption: `${p.width}×${p.height}`,
+ borderClass: p.risk === "bad" ? "border-rose-300/70" : p.risk === "warn" ? "border-amber-300/70" : "border-emerald-300/60",
+ aspect: p.width && p.height ? `${p.width}/${p.height}` : aspect,
+ })),
...videos.map((v, i) => {
const videoSrc = apiAssetUrl(v.url)
const posterSrc = apiAssetUrl(v.poster_url)
@@ -1556,19 +1556,6 @@ export function VisualLabNode({ data, selected }: any) {