diff --git a/core/frontend/src/api.ts b/core/frontend/src/api.ts index 637ed4e..cfeb595 100644 --- a/core/frontend/src/api.ts +++ b/core/frontend/src/api.ts @@ -291,6 +291,17 @@ export const api = { body: JSON.stringify({ script_version_id }) }); }, + // 独立实体提取:读已定稿脚本 → AI 识别角色/场景 + 每镜 refs,落库覆盖 metadata。商品不提(参考图层用真实主图)。 + extractEntities(projectId: string) { + return request<{ + entities: Array<{ id: string; type: "character" | "scene"; name: string; visual_prompt: string; ref_index: number }>; + segments: Array<{ index: number; entity_refs: string[] }>; + cast: string[]; + cast_prompts: Record; + scenes: string[]; + scene_prompts: Record; + }>(`/api/projects/${projectId}/extract-entities/`, { method: "POST" }); + }, updateScriptSegment(projectId: string, payload: { segment_id: string; narration?: string; visual_prompt?: string; duration_seconds?: number }) { return request(`/api/projects/${projectId}/update-script-segment/`, { method: "POST", body: JSON.stringify(payload) }); }, diff --git a/core/frontend/src/pipeline-page.css b/core/frontend/src/pipeline-page.css index 5c3427c..6600764 100644 --- a/core/frontend/src/pipeline-page.css +++ b/core/frontend/src/pipeline-page.css @@ -758,3 +758,59 @@ .actorlib-studio-detail .actor-thumb { aspect-ratio: 3/4; border-radius: var(--r-md); overflow: hidden; position: relative; border: 1px solid var(--border-faint); } .actor-card .actor-thumb.active { border-color: var(--heat); } @media (max-width: 720px) { .actorlib-studio-grid { grid-template-columns: 1fr; } .actorlib-studio-right { border-left: none; border-top: 1px solid var(--border-faint); padding-left: 0; padding-top: 16px; } } + +/* ── 实体提取闸门(进资产趴蒙版 + 三按钮):不自动花钱,用户点了才提取/生成 ── */ +.stage[data-stage-pane="2"] { position: relative; } +.extract-gate { + position: absolute; + inset: 0; + z-index: 12; + display: flex; + align-items: center; + justify-content: center; + padding: 24px; + background: rgba(255, 255, 255, .72); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + border-radius: var(--r-md); +} +.extract-gate-panel { + width: min(440px, 100%); + background: var(--surface-raised); + box-shadow: inset 0 0 0 1px var(--border-faint), var(--shadow-floating); + border-radius: var(--r-md); + padding: 28px 24px; + text-align: center; +} +.eg-title { font-size: 16px; font-weight: 600; color: var(--accent-black); } +.eg-sub { font-size: 11px; color: var(--black-alpha-48); margin-top: 6px; } +.extract-gate-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; } +.eg-btn { + display: flex; + flex-direction: column; + gap: 5px; + text-align: left; + padding: 13px 15px; + border: none; + border-radius: var(--r-md); + background: var(--background-base); + box-shadow: inset 0 0 0 1px var(--border-faint); + cursor: pointer; + transition: box-shadow .15s ease, background .15s ease; +} +.eg-btn:hover { box-shadow: inset 0 0 0 1px var(--heat); background: var(--heat-4); } +.eg-btn-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } +.eg-btn-main { font-size: 13.5px; font-weight: 500; color: var(--accent-black); } +.eg-btn-sub { font-size: 11.5px; color: var(--black-alpha-48); } +.eg-tag { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; font-family: var(--font-mono); white-space: nowrap; line-height: 1.5; } +.eg-tag-free { color: var(--black-alpha-56); box-shadow: inset 0 0 0 1px var(--border-faint); } +.eg-tag-pay { color: var(--heat); box-shadow: inset 0 0 0 1px var(--heat-40); background: var(--heat-8); } +.eg-btn-full { box-shadow: inset 0 0 0 1px var(--heat-40); } +.eg-btn-full:hover { box-shadow: inset 0 0 0 1px var(--heat); background: var(--heat-8); } +.eg-err { margin-top: 14px; font-size: 12px; color: var(--accent-crimson); } +.extract-gate-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 8px; } +.eg-spinner { width: 30px; height: 30px; border-radius: 999px; border: 2.5px solid var(--border-faint); border-top-color: var(--heat); animation: eg-spin .8s linear infinite; } +@keyframes eg-spin { to { transform: rotate(360deg); } } +.eg-load-msg { font-size: 14px; font-weight: 500; color: var(--accent-black); } +.eg-load-sub { font-size: 11px; color: var(--black-alpha-48); } +.eg-reextract { margin-top: 14px; width: 100%; } diff --git a/core/frontend/src/routes/pipeline.tsx b/core/frontend/src/routes/pipeline.tsx index da73b2b..73e9fa1 100644 --- a/core/frontend/src/routes/pipeline.tsx +++ b/core/frontend/src/routes/pipeline.tsx @@ -660,6 +660,41 @@ export function PipelinePage(props: { if (newAsset) await genTriview(newAsset, `${busyKey}:tri`); return g; } + // ── 流程步骤4 · 实体提取闸门(进资产趴入口):不自动花钱,用户点按钮才提取/生成 ── + // idle=露三按钮 / running=露 loading;提取后 metadata.script_entities 落库、或已有资产 → 闸门由渲染层自动隐藏 + const [extractState, setExtractState] = useState<"idle" | "running">("idle"); + const [extractMsg, setExtractMsg] = useState(""); + const [extractErr, setExtractErr] = useState(""); + // only=只提取关键词(不出图) / gen=提取+生成角色场景(立绘+场景图) / full=提取+全套(立绘+三视图+场景图) + async function runExtract(mode: "only" | "gen" | "full") { + if (extractState === "running") return; + setExtractErr(""); + setExtractState("running"); + setExtractMsg("正在从剧本认出角色 / 场景…"); + try { + const res = await api.extractEntities(project.id); + await onRefreshProject(); // 拉回 metadata(cast/scenes/script_entities)+ 回填的每镜 refs + if (mode !== "only") { + setExtractMsg("已认出角色 / 场景,正在生成参考图…"); + for (const e of res.entities || []) { + const bk = `seed:${e.type === "character" ? "person" : "scene"}:${e.name}`; + if (e.type === "character") { + if (mode === "full") await genPersonWithTri(e.visual_prompt, e.name, bk); // 立绘 + 三视图 + else await genBaseAsset("person", e.visual_prompt, e.name, bk); // 立绘 + } else { + await genBaseAsset("scene", e.visual_prompt, e.name, bk); // 场景图 + } + } + await onRefreshProject(); + } + setExtractState("idle"); // 闸门据 metadata.script_entities 已落库 → 渲染层自动隐藏 + setExtractMsg(""); + } catch (err) { + setExtractState("idle"); + setExtractMsg(""); + setExtractErr(err instanceof Error ? err.message : "提取失败,请重试"); + } + } // 资产图片下载(经同源代理取 blob,避开 TOS 跨域 + 强制下载而非新开标签) async function downloadAssetImage(assetId: string, name: string) { try { @@ -725,8 +760,6 @@ export function PipelinePage(props: { void genTriview(portraitAsset, `addet-tri:${ent.key}`); // eslint-disable-next-line react-hooks/exhaustive-deps }, [adDetail, adPortraitId]); - // 进入基础资产自动生成的「已触发」哨兵(实际副作用在 productName/viewStage 定义后挂载) - const autoGenRef = useRef(false); // ── Stage 3:默认展示已采用(is_adopted)版本;点历史缩略图可切换查看任一版本 ── const storyboards = project.storyboard_versions ?? []; @@ -2040,36 +2073,9 @@ export function PipelinePage(props: { const productName = productRecord?.title || "透真补水面膜"; const productCover = productRecord?.cover_asset || productRecord?.images?.find((img) => img.is_primary)?.asset || productRecord?.images?.[0]?.asset || null; - // 流程步骤4 · 进入基础资产自动生成脚本里提取出、但还没生成的人物/场景占位卡(每项目仅一次) - useEffect(() => { - if (activeDot !== 2 && viewStage !== 2) return; - if (autoGenRef.current) return; - const flagKey = `airshelf:autogen:${project.id}`; - try { if (localStorage.getItem(flagKey)) { autoGenRef.current = true; return; } } catch { /* ignore */ } - const pending: Array<{ kind: "person" | "scene"; tag: string; prompt: string }> = []; - (["person", "scene"] as const).forEach((kind) => { - const tags = kind === "person" ? (project.metadata?.cast ?? []) : (project.metadata?.scenes ?? []); - const generated = new Set(groupsByKind(kind).map((g) => (g.metadata?.label || "").trim()).filter(Boolean)); - const promptMap = (kind === "person" ? project.metadata?.cast_prompts : project.metadata?.scene_prompts) || {}; - tags.filter((t) => !generated.has(t)).forEach((tag) => { - const fallback = kind === "person" - ? `${tag},真人模特出镜,自然光,${productName} 上身展示,9:16 竖屏` - : `${tag},使用场景,氛围统一,干净构图,9:16 竖屏`; - pending.push({ kind, tag, prompt: promptMap[tag]?.trim() || fallback }); - }); - }); - if (!pending.length) return; - autoGenRef.current = true; - try { localStorage.setItem(flagKey, "1"); } catch { /* ignore */ } - void (async () => { - for (const item of pending) { - const bk = `seed:${item.kind}:${item.tag}`; - if (item.kind === "person") await genPersonWithTri(item.prompt, item.tag, bk); - else await genBaseAsset(item.kind, item.prompt, item.tag, bk); - } - })(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [activeDot, viewStage, project.id]); + // 进资产趴【不再自动生成基础资产】——原先这里会自动 genPersonWithTri/genBaseAsset 出图、直接扣用户费, + // 用户有"被掏口袋"感。改为:进资产趴盖半透明蒙版 + 三按钮(只提取 / 提取+生成角色场景 / 提取+全套), + // 由用户点了才提取/生成(见下方 STAGE 2 的 extract gate 与 runExtract)。 // 流程步骤4 · 在基础资产趴轮询后端在途出图任务,重建「生成中」占位卡 loading(刷新后内存态丢失也能恢复); // 在途数减少=有任务出图完成 → 刷新项目把占位卡换成真卡。离开该趴即停。 @@ -2489,8 +2495,46 @@ export function PipelinePage(props: { || assetUrl(productCover); // 商品卡显示商品主图,三视图在右侧面板 const triViewGen = `${productName} 商品三视图,从左到右:正面 / 侧面 / 背面,统一光照,白色背景,16:9`; const runProductTri = () => { setTriPanelOpen(true); setTriPreviewId(null); void genBaseAsset("product", triViewGen, undefined, "tri:product"); }; + // 实体提取闸门:进资产趴还没提取(无 script_entities)且没生成任何基础资产 → 盖蒙版 + 三按钮,不自动花钱 + const seList = project.metadata?.script_entities; + const extracted = Array.isArray(seList) && seList.length > 0; + const hasAnyAsset = KIND_ORDER.some((k) => groupsByKind(k).length > 0); + const gateVisible = extractState === "running" || (!extracted && !hasAnyAsset); return (
+ {gateVisible && ( +
+
+ {extractState === "running" ? ( +
+ +
{extractMsg || "处理中…"}
+
// 蒙版盖住别动,完成自动揭开
+
+ ) : ( + <> +
先从剧本认出角色 / 场景
+
// 生成图会扣费,交给你点,不自动花钱
+
+ + + +
+ {extractErr &&
{extractErr}
} + + )} +
+
+ )}
{KIND_ORDER.map((kind) => { @@ -2513,6 +2557,11 @@ export function PipelinePage(props: { // 人物 +¥0.20/张 // 场景 +¥0.15/张 商品图无成本(直接复用商品库) + {extracted && ( + + )}
diff --git a/core/frontend/src/types.ts b/core/frontend/src/types.ts index 400ab74..6c8e1f6 100644 --- a/core/frontend/src/types.ts +++ b/core/frontend/src/types.ts @@ -239,6 +239,8 @@ export type Project = { // 流程步骤3/4 · 脚本提取出的每个人物/场景的建议生图提示词(基础资产据此 seed 卡片) cast_prompts?: Record; scene_prompts?: Record; + // 提取步产出:角色/场景实体全量(含 id/ref_index);下游故事板/视频按每镜 entity_refs 取参考图 + script_entities?: Array<{ id: string; type: string; name: string; visual_prompt?: string; ref_index?: number }>; } & Record; created_at: string; updated_at: string;