azmat1127/yingqing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 解耦角色与模特并完善模特库

Browse Source
This commit is contained in:
hh
2026-07-13 11:02:30 +08:00
parent 564215dc53
commit fc0f0ca370
22 changed files with 1328 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/frontend/src/App.tsx
+6 -6
View File
@@ -996,18 +996,18 @@ export function App() {
const assetId = await submitAndPollAsset(() => api.generateTriview(pipelineProject.id, { portrait_asset_id: portraitAssetId }), "三视图已据立绘生成");
return assetId ? { id: assetId } : null;
}}
onGenerateActor={(prompt) => generateImages({ prompt, mode: "model", count: 1 })}
onUploadActor={(file) => {
onGenerateModel={(prompt) => generateImages({ prompt, mode: "model", count: 1 })}
onUploadModel={(file) => {
const fd = new FormData();
fd.append("file", file);
fd.append("name", file.name);
fd.append("asset_type", "image");
fd.append("category", "person");
// 返回上传后的 Asset(供添加人物工作台进右侧栏做三视图/命名)
fd.append("category", "model_portrait");
// 返回上传后的模特形象 Asset，保存模特时复用它创建 Model。
return action(() => api.uploadAsset(fd), "");
}}
// 流程步骤4 · 添加人物工作台命名:把名字写回该人物资产
onRenameActor={(assetId, name) => action(() => api.updateAsset(assetId, { name }), "")}
// 流程步骤4 · 添加模特工作台命名：同步写回形象资产名称。
onRenameModel={(assetId, name) => action(() => api.updateAsset(assetId, { name }), "")}
onSkipStoryboard={() => action(() => api.skipStoryboard(pipelineProject.id), "已跳过故事板")}
onSubmitVideo={(segmentId, prompt) => action(() => api.submitVideo(pipelineProject.id, { video_segment_id: segmentId, prompt }), "视频片段已提交,生成中…")}
onSubmitAllVideos={(prompt) =>
core/frontend/src/api.ts
+13 -4
View File
@@ -417,7 +417,7 @@ export const api = {
deleteBaseAsset(projectId: string, groupId: string) {
return request(`/api/projects/${projectId}/delete-base-asset/`, { method: "POST", body: JSON.stringify({ group_id: groupId }) });
},
// 流程步骤4 · 用演员库现有资产替换基础资产卡(挂为候选并采用)
// 流程步骤4 · 用模特库现有形象资产替换角色基础资产卡（挂为候选并采用）
// seed 占位卡还没 group:不传 group_id,改传 kind+label,后端按 label 命中/新建实体组再挂(不出图)
attachBaseAsset(projectId: string, payload: { group_id?: string; asset_id: string; kind?: "product" | "person" | "scene"; label?: string }) {
return request(`/api/projects/${projectId}/attach-base-asset/`, { method: "POST", body: JSON.stringify(payload) });
@@ -530,7 +530,7 @@ export const api = {
submitAssetReview(id: string) {
return request<{ review_status: string; review_error: string }>(`/api/assets/${id}/submit-review/`, { method: "POST" });
},
// 置 in_library(现仅演员库「保存人物」用:立绘暂存 → 入库;R109 后图片生成成图已自动入库)
// 置 in_library（功能性模特/角色资料不走该入口；图片成图仍按原规则入库）
setAssetLibrary(id: string, inLibrary: boolean) {
return request<{ id: string; in_library: boolean }>(`/api/assets/${id}/set-library/`, { method: "POST", body: JSON.stringify({ in_library: inLibrary }) });
},
@@ -588,15 +588,16 @@ export const api = {
uploadAsset(formData: FormData) {
return request<Asset>("/api/assets/upload/", { method: "POST", body: formData });
},
// 流程步骤4 · 给人物/资产改名(添加人物工作台命名 → PATCH 写回 name)
// 流程步骤4 · 给模特形象/资产改名（添加模特工作台命名 → PATCH 写回 name）
updateAsset(id: string, payload: { name?: string; description?: string }) {
return request<Asset>(`/api/assets/${id}/`, { method: "PATCH", body: JSON.stringify(payload) });
},
// 模特库:列出(本团队 ∪ 官方模板);tab=official 只看官方、mine 只看自建
listModels(params: { tab?: "official" | "mine"; q?: string; pageSize?: number } = {}) {
listModels(params: { tab?: "official" | "mine"; q?: string; portraitAsset?: string; pageSize?: number } = {}) {
const qs = new URLSearchParams();
if (params.tab) qs.set("tab", params.tab);
if (params.q) qs.set("q", params.q);
if (params.portraitAsset) qs.set("portrait_asset", params.portraitAsset);
qs.set("page_size", String(params.pageSize ?? 200));
return request<Paginated<ModelEntity>>(`/api/models/?${qs.toString()}`);
},
@@ -604,10 +605,18 @@ export const api = {
uploadModel(formData: FormData) {
return request<ModelEntity>("/api/models/upload/", { method: "POST", body: formData });
},
// /models 详情：上传并替换当前模特形象图，不创建新模特。
uploadModelPortrait(id: string, formData: FormData) {
return request<ModelEntity>(`/api/models/${id}/upload-portrait/`, { method: "POST", body: formData });
},
// 图片创作「加入模特库」:把一张已生成的图复用为模特形象图建 Model 条目(不重传、不二次扣费;幂等)
enrollModelFromAsset(assetId: string, name?: string) {
return request<ModelEntity>("/api/models/enroll-asset/", { method: "POST", body: JSON.stringify({ asset_id: assetId, name }) });
},
// /models 模特详情编辑：只更新模特实体资料，不回写项目角色或底层图片资产。
updateLibraryModel(id: string, payload: { name?: string; description?: string }) {
return request<ModelEntity>(`/api/models/${id}/`, { method: "PATCH", body: JSON.stringify(payload) });
},
// 删除模特(软删;官方模特不可删)
deleteModel(id: string) {
return request<void>(`/api/models/${id}/`, { method: "DELETE" });
core/frontend/src/components/actor-library.tsx → core/frontend/src/components/model-library.tsx
+46 -118
View File
@@ -5,52 +5,43 @@ import { api } from "../api";
import type { Asset, ModelEntity } from "../types";
import { useBodyScrollLock, MediaLightbox } from "./overlays";
// 流程步骤4 · 演员库(期3 收编):角色可「引用模特库」—— 顶部「模特库」tab 取自模特库实体(含官方跨团队模特),
// 选一个即用其形象图作该角色的参考/回填;「我的演员」= 本项目未入库的 person 资产。
// 两种用法:browse(纯浏览 / 添加演员)与 replace(从库里选一个回填到某基础资产卡)。
// 模特选择器：只读取 Model 顶级实体（含官方跨团队模特），不再混入普通 person 资产。
// 两种用法：browse（浏览 / 添加模特）与 replace（选用一个模特回填当前角色或图片生成）。
const mediaStyle = (url: string): CSSProperties => ({ ["--mock-media-url"]: `url(${url})` } as CSSProperties);
const previewOf = (a: Asset): string => a.files?.find((f) => f.is_primary)?.preview_url || a.files?.[0]?.preview_url || "";
// 模特库实体 → Asset 形(id=形象图资产 id,选中即作角色参考图);标 kind=model 归「模特库」tab
// 模特库实体 → 供现有卡片复用的 Asset 形；id 保持形象资产 id，选中后可直接作为参考图。
const modelToAsset = (m: ModelEntity): Asset => ({
id: m.portrait_asset as string,
name: m.name,
asset_type: "image",
source: "ai_generated",
category: "person",
source: m.source === "upload" ? "upload" : "ai_generated",
category: "model_portrait",
description: "",
metadata: { kind: "model", model_entity_id: m.id, is_official: m.is_official },
files: m.portrait ? [{ id: m.portrait_asset as string, object_key: "", bucket: "", content_type: "image/png", size_bytes: 0, preview_url: m.portrait, is_primary: true }] : [],
created_at: m.created_at,
updated_at: m.updated_at
});
// 模特库 = 模特库实体(metadata.kind==="model");其余 person 资产归「我的演员」
const isPreset = (a: Asset): boolean => (a.metadata?.kind as string) === "model";
export function ActorLibrary({ open, mode, initialStudio, assets, onClose, onPick, onGenerate, onUpload, onGenerateTriview, onRename, onRefresh }: {
export function ModelLibrary({ open, mode, initialStudio, onClose, onPick, onGenerate, onUpload, onRename, onRefresh }: {
open: boolean;
mode: "browse" | "replace";
initialStudio?: boolean; // 打开即进「添加人物工作台」
assets: Asset[];
initialStudio?: boolean; // 打开即进「添加模特工作台」
onClose: () => void;
onPick?: (assetId: string, assetName?: string) => void | Promise<unknown>;
onGenerate: (prompt: string) => Promise<{ assets: Asset[] } | null>;
onUpload: (file: File) => Promise<Asset | null>;
// 据选中立绘生成配套三视图(后端吃任意 person 资产 id,不依赖该资产已在某 base group)
onGenerateTriview?: (portraitAssetId: string) => Promise<{ id: string } | null>;
onRename?: (assetId: string, name: string) => Promise<unknown>; // 给人物命名(写回资产 name)
onRename?: (assetId: string, name: string) => Promise<unknown>; // 同步底层形象资产名称
onRefresh: () => void;
}) {
const [tab, setTab] = useState<"preset" | "mine">("preset");
const [studio, setStudio] = useState(Boolean(initialStudio)); // 添加演员工作台
const [studio, setStudio] = useState(Boolean(initialStudio)); // 添加模特工作台
const [studioMode, setStudioMode] = useState<"ai" | "upload">("ai");
const [prompt, setPrompt] = useState("");
const [busy, setBusy] = useState(false);
const [preview, setPreview] = useState<{ src: string; name: string } | null>(null);
// 添加人物工作台多步态:候选立绘 + 选中那张 + 命名 + 三视图就绪标志
// 添加模特工作台多步态：候选形象图 + 选中图 + 模特名称。
const [candidates, setCandidates] = useState<Asset[]>([]); // AI 生成/上传得到的立绘候选
const [picked, setPicked] = useState<Asset | null>(null); // 进右侧栏的那张立绘
const [actorName, setActorName] = useState("");
const [triReady, setTriReady] = useState(false); // 已据选中立绘生成过三视图
const [modelName, setModelName] = useState("");
const fileRef = useRef<HTMLInputElement | null>(null);
useBodyScrollLock(open);
useEffect(() => {
@@ -64,46 +55,32 @@ export function ActorLibrary({ open, mode, initialStudio, assets, onClose, onPic
if (!open) return;
setStudio(Boolean(initialStudio));
setStudioMode("ai");
setCandidates([]); setPicked(null); setActorName(""); setTriReady(false);
setCandidates([]); setPicked(null); setModelName("");
}, [open, initialStudio]);
// 演员库自取 person 资产:全局 assets 已不再全量预载(按需懒加载),不能再依赖传入的 assets prop,
// 否则平台预设/我的演员全空。打开时拉一页(团队 person 资产),保存后 reload 让新人物即时入列。
// 模特选择器只拉 Model；不再把普通 person 资产并入可选列表。
const [fetched, setFetched] = useState<Asset[]>([]);
const reload = useCallback(async () => {
// 期3:同时拉「项目 person 资产」+「模特库实体」。模特放后面 → 按 id 去重时模特胜出,
// 同一张形象图(既是 person 资产又被模特库引用)归「模特库」tab,可作角色参考。
const [persons, models] = await Promise.all([
api.assetsPage({ category: "person", pageSize: 200, ordering: "-created_at" }).catch(() => null),
api.listModels({ pageSize: 200 }).catch(() => null)
]);
const models = await api.listModels({ pageSize: 200 }).catch(() => null);
const mapped = (models?.results ?? []).filter((m) => m.portrait_asset).map(modelToAsset);
setFetched([...(persons?.results ?? []), ...mapped]);
setFetched(mapped);
}, []);
useEffect(() => { if (open) void reload(); }, [open, reload]);
// person 类资产 → 演员;按 preset / mine 分两 tab。合并 prop(兼容旧调用)+ 自取,按 id 去重。
const source = useMemo(() => {
const map = new Map<string, Asset>();
for (const a of [...assets, ...fetched]) map.set(a.id, a);
return [...map.values()];
}, [assets, fetched]);
const people = useMemo(() => source.filter((a) => a.category === "person" && previewOf(a)), [source]);
const list = people.filter((a) => (tab === "preset" ? isPreset(a) : !isPreset(a)));
const list = useMemo(() => fetched.filter((a) => previewOf(a)), [fetched]);
// 演员库分页(客户端):一页 10 个(5 列 × 2 行)。切 tab / 列表变化时回第 1 页,避免停在越界页。
// 模特库分页（客户端）：一页 10 个（5 列 × 2 行）。
const PAGE_SIZE = 10;
const [page, setPage] = useState(1);
const pageCount = Math.max(1, Math.ceil(list.length / PAGE_SIZE));
useEffect(() => { setPage(1); }, [tab, open]);
useEffect(() => { setPage(1); }, [open]);
useEffect(() => { setPage((p) => Math.min(p, pageCount)); }, [pageCount]);
const pageList = list.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
// 选某张候选立绘 → 进右侧栏(预填名字,清三视图标志)
// 选某张候选形象图 → 进右侧栏命名。
function pickCandidate(a: Asset) {
setPicked(a);
setActorName(a.name || "");
setTriReady(false);
setModelName(a.name || "");
}
// AI 生成立绘候选(不直接关 studio,等用户选一张进下一步)
async function genCandidates() {
@@ -125,55 +102,28 @@ export function ActorLibrary({ open, mode, initialStudio, assets, onClose, onPic
if (asset && previewOf(asset)) { setCandidates([asset]); pickCandidate(asset); }
} finally { setBusy(false); }
}
// 据选中立绘生成三视图(后端异步出图,完成后刷新即见;本地无 worker 时点了不报错)
async function genTriview() {
if (!picked || !onGenerateTriview) return;
setBusy(true);
try {
const r = await onGenerateTriview(picked.id);
if (r) setTriReady(true);
} finally { setBusy(false); }
}
// 保存人物:写名字(若有改名能力)→ 加入资产库 → 刷新 → 关工作台 → 切「我的演员」tab
async function saveActor() {
// 保存模特：同步名称 → 复用当前形象资产创建 Model → 刷新模特库。
async function saveModel() {
if (!picked) return;
setBusy(true);
try {
const name = actorName.trim();
const name = modelName.trim();
if (name && name !== picked.name && onRename) await onRename(picked.id, name);
// 关键:AI 生成/上传得到的立绘默认 in_library=False(工作台暂存),不入「我的演员」列表(只列已入库 person)。
// 「保存人物」必须把它加入资产库,否则保存后「我的演员」始终 0 个演员(ZWQ#6)。
await api.setAssetLibrary(picked.id, true).catch(() => undefined);
await api.enrollModelFromAsset(picked.id, name || undefined);
onRefresh();
await reload(); // 新保存的人物即时进「我的演员」列表(自取,不依赖父级全局 assets)
await reload(); // 新建模特即时进入唯一的模特列表
setStudio(false);
setCandidates([]); setPicked(null); setActorName(""); setTriReady(false);
setTab("mine");
setCandidates([]); setPicked(null); setModelName("");
} finally { setBusy(false); }
}
// 删除「我的演员」(软删 person 资产)· 两步确认,3s 自动撤销(ZWQ#8)
const [delArmId, setDelArmId] = useState<string | null>(null);
const [delBusyId, setDelBusyId] = useState<string | null>(null);
async function deleteActor(id: string) {
setDelBusyId(id);
try {
await api.deleteAsset(id);
onRefresh();
await reload();
} catch { /* 删除失败保留卡片,可重试 */ } finally {
setDelBusyId(null);
setDelArmId(null);
}
}
if (!open) return null;
return createPortal(
<div className="actorlib-bg" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
<div className="actorlib" role="dialog" aria-modal="true" aria-label="演员库">
<div className="actorlib" role="dialog" aria-modal="true" aria-label="模特库">
<div className="actorlib-h">
<h2>{mode === "replace" ? "演员库 · 选择演员" : "演员库"}</h2>
<span className="mono" style={{ fontSize: 12, color: "var(--black-alpha-48)" }}>// {mode === "replace" ? "点演员卡即选用应用" : "平台预设演员 / 我的演员"}</span>
<h2>{mode === "replace" ? "模特库 · 选择模特" : "模特库"}</h2>
<span className="mono" style={{ fontSize: 12, color: "var(--black-alpha-48)" }}>// {mode === "replace" ? "点模特卡即选用应用" : "团队模特 · 官方模板"}</span>
<button className="x" type="button" aria-label="关闭" onClick={onClose}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6 6l12 12M6 18L18 6" /></svg>
</button>
@@ -184,20 +134,20 @@ export function ActorLibrary({ open, mode, initialStudio, assets, onClose, onPic
<div className="actorlib-studio-h">
<button className="btn btn-ghost btn-sm" type="button" onClick={() => setStudio(false)}>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 4 }}><path d="M19 12H5M12 19l-7-7 7-7" /></svg>
返回演员库
返回模特库
</button>
<strong style={{ fontSize: 14 }}>添加人物工作台</strong>
<strong style={{ fontSize: 14 }}>添加模特</strong>
</div>
<div className="actorlib-tabs" style={{ marginBottom: 14 }}>
<button className={`al-tab${studioMode === "ai" ? " active" : ""}`} type="button" onClick={() => { setStudioMode("ai"); setCandidates([]); setPicked(null); }}>AI 生成</button>
<button className={`al-tab${studioMode === "upload" ? " active" : ""}`} type="button" onClick={() => { setStudioMode("upload"); setCandidates([]); setPicked(null); }}>本地上传</button>
</div>
{/* 多步工作台:左 = 生成/上传 + 立绘候选;右 = 选中立绘的命名/三视图/保存 */}
{/* 多步工作台：左 = 生成/上传 + 形象图候选；右 = 模特命名/保存。 */}
<div className="actorlib-studio-grid">
<div className="actorlib-studio-left">
{studioMode === "ai" ? (
<div className="actorlib-studio-ai">
<div className="muted mono" style={{ fontSize: 12, marginBottom: 6, letterSpacing: ".04em" }}>// 1 描述演员形象(年龄 / 风格 / 妆造 / 背景)→ 生成立绘候选</div>
<div className="muted mono" style={{ fontSize: 12, marginBottom: 6, letterSpacing: ".04em" }}>// 1 描述模特形象（年龄 / 风格 / 妆造 / 背景）→ 生成候选</div>
<textarea className="asset-prompt-edit" rows={3} placeholder="如:25 岁都市白领女性,通勤淡妆,简约棚拍背景,9:16 竖屏正面半身" value={prompt} onChange={(e) => setPrompt(e.target.value)} />
<button className="btn btn-primary" type="button" disabled={busy} style={{ marginTop: 12 }} onClick={() => void genCandidates()}>
{busy ? "生成中…" : "生成立绘"}
@@ -205,10 +155,10 @@ export function ActorLibrary({ open, mode, initialStudio, assets, onClose, onPic
</div>
) : (
<div className="actorlib-studio-upload">
<div className="muted mono" style={{ fontSize: 12, marginBottom: 6, letterSpacing: ".04em" }}>// 1 上传本地人物图片 → 进右侧栏生成三视图 / 命名</div>
<div className="muted mono" style={{ fontSize: 12, marginBottom: 6, letterSpacing: ".04em" }}>// 1 上传本地模特形象图 → 右侧命名并保存</div>
<div className="actorlib-drop" role="button" tabIndex={0} onClick={() => fileRef.current?.click()} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); fileRef.current?.click(); } }}>
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path d="M17 8l-5-5-5 5" /><path d="M12 3v12" /></svg>
<div style={{ marginTop: 10, fontSize: 13 }}>{busy ? "上传中…" : "点击选择本地人物图片上传"}</div>
<div style={{ marginTop: 10, fontSize: 13 }}>{busy ? "上传中…" : "点击选择本地模特图片上传"}</div>
<div className="mono" style={{ fontSize: 12, color: "var(--black-alpha-48)", marginTop: 4 }}>// JPG / PNG / WEBP</div>
</div>
<input ref={fileRef} type="file" accept="image/*" style={{ display: "none" }} onChange={(e) => { void uploadCandidate(e.target.files?.[0]); e.currentTarget.value = ""; }} />
@@ -216,7 +166,7 @@ export function ActorLibrary({ open, mode, initialStudio, assets, onClose, onPic
)}
{candidates.length > 0 && (
<>
<div className="muted mono" style={{ fontSize: 12, margin: "14px 0 6px", letterSpacing: ".04em" }}>// 2 选一张立绘 → 右侧命名 / 生成三视图 / 保存</div>
<div className="muted mono" style={{ fontSize: 12, margin: "14px 0 6px", letterSpacing: ".04em" }}>// 2 选一张形象图 → 右侧命名并保存模特</div>
<div className="actorlib-grid">
{candidates.map((a) => {
const url = previewOf(a);
@@ -242,21 +192,15 @@ export function ActorLibrary({ open, mode, initialStudio, assets, onClose, onPic
<div className={`placeholder actor-thumb${previewOf(picked) ? " has-mock-media" : ""}`} style={previewOf(picked) ? mediaStyle(previewOf(picked)) : undefined}>
{!previewOf(picked) && <span className="ph-frame">{picked.name}</span>}
</div>
<label className="muted mono" style={{ fontSize: 12, margin: "12px 0 4px", display: "block", letterSpacing: ".04em" }}>// 3 给人物命名</label>
<input className="asset-prompt-edit" style={{ minHeight: 0, height: 36 }} placeholder="如:都市白领 · 小林" value={actorName} onChange={(e) => setActorName(e.target.value)} />
{onGenerateTriview && (
<button className="btn btn-ghost btn-sm" type="button" disabled={busy} style={{ marginTop: 12 }} onClick={() => void genTriview()}>
{busy ? "提交中…" : triReady ? "已提交三视图 · 再生成一版" : "生成三视图"}
</button>
)}
{triReady && <div className="muted mono" style={{ fontSize: 12, marginTop: 6 }}>// 三视图出图在后台进行,保存后回人物卡详情可查看</div>}
<button className="btn btn-primary" type="button" disabled={busy} style={{ marginTop: 14, width: "100%" }} onClick={() => void saveActor()}>
{busy ? "保存中…" : "保存人物"}
<label className="muted mono" style={{ fontSize: 12, margin: "12px 0 4px", display: "block", letterSpacing: ".04em" }}>// 3 给模特命名</label>
<input className="asset-prompt-edit" style={{ minHeight: 0, height: 36 }} placeholder="如:都市白领 · 小林" value={modelName} onChange={(e) => setModelName(e.target.value)} />
<button className="btn btn-primary" type="button" disabled={busy} style={{ marginTop: 14, width: "100%" }} onClick={() => void saveModel()}>
{busy ? "保存中…" : "保存模特"}
</button>
</div>
) : (
<div className="placeholder" style={{ minHeight: 220, flexDirection: "column", gap: 10 }}>
<span className="ph-frame">// {studioMode === "ai" ? "生成立绘后,选一张进入这里" : "上传图片后,在这里命名 / 生成三视图"}</span>
<span className="ph-frame">// {studioMode === "ai" ? "生成候选后，选一张进入这里" : "上传图片后，在这里命名并保存模特"}</span>
</div>
)}
</div>
@@ -265,14 +209,11 @@ export function ActorLibrary({ open, mode, initialStudio, assets, onClose, onPic
) : (
<div className="actorlib-body">
<div className="actorlib-toolbar">
<div className="actorlib-tabs">
<button className={`al-tab${tab === "preset" ? " active" : ""}`} type="button" onClick={() => setTab("preset")}>模特库 · {people.filter(isPreset).length}</button>
<button className={`al-tab${tab === "mine" ? " active" : ""}`} type="button" onClick={() => setTab("mine")}>我的演员 · {people.filter((a) => !isPreset(a)).length}</button>
</div>
<span className="mono" style={{ fontSize: 12, color: "var(--black-alpha-48)" }}>// 共 {list.length} 位模特</span>
<span className="spacer" style={{ flex: 1 }}></span>
<button className="btn btn-primary btn-sm" type="button" onClick={() => { setStudio(true); setStudioMode("ai"); }}>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 4 }}><path d="M12 5v14M5 12h14" /></svg>
添加演员
添加模特
</button>
</div>
{list.length ? (
@@ -280,23 +221,10 @@ export function ActorLibrary({ open, mode, initialStudio, assets, onClose, onPic
<div className="actorlib-grid">
{pageList.map((a) => {
const url = previewOf(a);
// 「我的演员」(非模特库预设)可删:右上角垃圾桶,两步确认(ZWQ#8)
const canDelete = tab === "mine" && !isPreset(a);
return (
<div className="actor-card" key={a.id} style={{ position: "relative" }}>
{canDelete && (delArmId === a.id ? (
<span className="asset-card-del-confirm" data-stop style={{ position: "absolute", top: 6, right: 6, zIndex: 3, display: "flex", gap: 4 }}>
<button type="button" className="del-yes" disabled={delBusyId === a.id} onClick={(e) => { e.stopPropagation(); void deleteActor(a.id); }}>{delBusyId === a.id ? "删除中…" : "确认删除"}</button>
<button type="button" className="del-no" onClick={(e) => { e.stopPropagation(); setDelArmId(null); }}>取消</button>
</span>
) : (
<button type="button" className="asset-card-del" title="删除该演员" style={{ position: "absolute", top: 6, right: 6, zIndex: 3 }}
onClick={(e) => { e.stopPropagation(); setDelArmId(a.id); window.setTimeout(() => setDelArmId((v) => (v === a.id ? null : v)), 3000); }}>
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2" /><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6" /></svg>
</button>
))}
<div className="actor-card" key={a.id}>
<div className={`placeholder actor-thumb${url ? " has-mock-media" : ""}`} style={url ? mediaStyle(url) : undefined}
role="button" tabIndex={0} title={mode === "replace" ? "选用此演员" : "查看大图"}
role="button" tabIndex={0} title={mode === "replace" ? "选用此模特" : "查看大图"}
onClick={() => { if (mode === "replace") { void onPick?.(a.id, a.name); } else if (url) { setPreview({ src: url, name: a.name }); } }}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); if (mode === "replace") { void onPick?.(a.id, a.name); } else if (url) { setPreview({ src: url, name: a.name }); } } }}>
{!url && <span className="ph-frame">{a.name}</span>}
@@ -317,7 +245,7 @@ export function ActorLibrary({ open, mode, initialStudio, assets, onClose, onPic
</>
) : (
<div className="placeholder" style={{ minHeight: 160, flexDirection: "column", gap: 10 }}>
<span className="ph-frame">// {tab === "preset" ? "模特库暂无模特 · 去「模特库」页添加" : "还没有自己的演员 · 点右上「添加演员」"}</span>
<span className="ph-frame">// 模特库暂无模特 · 点右上“添加模特”创建</span>
</div>
)}
</div>
core/frontend/src/models-page.css
+36 -17
View File
@@ -113,10 +113,31 @@
letter-spacing: .02em;
}
/* 模特详情弹窗:继承 .modal(不重写),只加宽度 modifier(同 .invite-modal 惯例) */
.model-detail-modal { max-width: 560px; }
.model-detail-b { display: flex; flex-direction: column; gap: 14px; }
/* 模特详情弹窗:参考视频项目角色详情结构；当前小步只开放名称/描述编辑 */
.modal.model-detail-modal {
width: min(880px, calc(100vw - 80px));
max-width: 880px;
}
.model-detail-b {
display: grid;
grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
gap: 24px;
padding: 24px 28px;
}
.model-detail-left,
.model-detail-right { min-width: 0; }
.model-detail-right { display: flex; flex-direction: column; gap: 20px; }
.model-detail-section-h {
min-height: 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.model-detail-section-h strong { font-size: 13px; font-weight: 500; color: var(--accent-black); }
.model-detail-section-h .mono { font-size: 11px; color: var(--black-alpha-48); letter-spacing: .04em; }
.model-detail-section-actions { display: flex; align-items: center; gap: 8px; }
/* 形象图大图:3:4 竖版,与卡片缩图比例一致 */
.model-detail-portrait {
@@ -130,19 +151,7 @@
display: flex;
align-items: center;
gap: 8px;
}
.model-detail-desc {
margin: 0;
font-size: 13px;
line-height: 1.65;
color: var(--black-alpha-64);
}
.model-detail-label {
font-size: 11px;
color: var(--black-alpha-48);
letter-spacing: .04em;
margin-top: 12px;
}
/* 三视图:16:9 单容器(不拆 3 张) */
@@ -152,3 +161,13 @@
border-radius: var(--r-sm);
}
.model-detail-triview[role="button"] { cursor: zoom-in; }
.model-detail-form { padding-top: 20px; border-top: 1px solid var(--border-faint); }
.model-detail-form .field:last-of-type { margin-bottom: 10px; }
.model-detail-form .textarea { resize: vertical; }
.model-detail-readonly { margin-right: auto; font-size: 11px; color: var(--black-alpha-48); letter-spacing: .04em; }
@media (max-width: 720px) {
.modal.model-detail-modal { width: calc(100vw - 32px); }
.model-detail-b { grid-template-columns: 1fr; padding: 20px; }
.model-detail-left { width: min(100%, 320px); margin: 0 auto; }
}
core/frontend/src/routes/ai-tools.tsx
+13 -14
View File
@@ -29,7 +29,7 @@ import {
} from "lucide-react";
import type { AITask, Asset, ImageConversation, ImageConversationTask, ModelConfig, ModelEntity, Product, WorkbenchTask } from "../types";
import { api } from "../api";
import { ActorLibrary } from "../components/actor-library";
import { ModelLibrary } from "../components/model-library";
import { SkeletonRows } from "../components/loading";
import { ConfirmModal, MediaLightbox } from "../components/overlays";
import { Pager } from "../components/pager";
@@ -664,8 +664,8 @@ export function ImageWorkbenchPage({
const [count, setCount] = useState(mode === "image" ? "4" : "4");
// 模特单选(长度恒 0/1);平台改回多选(P0③:可选多个平台,各出一组结果)
const [pickedIds, setPickedIds] = useState<string[]>([]);
// 模特库全屏弹窗(P0①:复用现成 ActorLibrary,mode=replace 选一个回填)
const [actorLibOpen, setActorLibOpen] = useState(false);
// 模特库全屏弹窗：选一个模特回填。
const [modelLibOpen, setModelLibOpen] = useState(false);
// 选中模特的展示名(从模特库/内联卡记下,导航头/CTA 显示用)
const [pickedModelName, setPickedModelName] = useState("");
// 商品库全屏选择器(P0④:pl-modal 多选 → 每个选中商品各起一批)
@@ -749,7 +749,7 @@ export function ImageWorkbenchPage({
/* 模特卡数据来源:期2 改为「模特库」(顶级实体,引用其形象图当上身图参考)。
映射 ModelEntity→Asset 形:id=形象图资产 id(选中即作 model_id 参考图),metadata 记 model_entity_id 溯源。
无模特则回退到基线占位卡 Ava/Luna/Mia/Zoe。深埋 ActorLibrary 弹窗同源,逻辑不动。 */
无模特则回退到基线占位卡 Ava/Luna/Mia/Zoe。深埋 ModelLibrary 弹窗同源。 */
const [personAssets, setPersonAssets] = useState<Asset[]>([]);
const loadModels = useCallback(() => {
api.listModels({ pageSize: 200 })
@@ -1854,7 +1854,7 @@ export function ImageWorkbenchPage({
const name = selected?.name || pickedModelName;
if (pickedIds[0]) {
return (
<button type="button" className="model-card selected" title="点击打开模特库更换模特" onClick={() => setActorLibOpen(true)}>
<button type="button" className="model-card selected" title="点击打开模特库更换模特" onClick={() => setModelLibOpen(true)}>
<div className="m-thumb">
{url ? (
<img className="m-thumb-img" src={url} alt={name} loading="lazy" />
@@ -1869,7 +1869,7 @@ export function ImageWorkbenchPage({
);
}
return (
<button type="button" className="model-card model-card-empty" title="从模特库选择模特" onClick={() => setActorLibOpen(true)}>
<button type="button" className="model-card model-card-empty" title="从模特库选择模特" onClick={() => setModelLibOpen(true)}>
<div className="m-thumb m-thumb-empty">
<Plus size={26} />
<span className="m-empty-label">从模特库选择</span>
@@ -2046,17 +2046,16 @@ export function ImageWorkbenchPage({
</section>
</div>
{/* P0①:模特库全屏弹窗(复用现成 ActorLibrary,mode=replace 选一个回填到「选择模特」) */}
<ActorLibrary
open={actorLibOpen}
{/* 模特库全屏弹窗：只选 Model，新增模特后刷新并回填。 */}
<ModelLibrary
open={modelLibOpen}
mode="replace"
assets={personAssets}
onClose={() => setActorLibOpen(false)}
onClose={() => setModelLibOpen(false)}
onPick={(assetId, assetName) => {
setPickedIds([assetId]);
setPickedModelName(assetName || "");
loadModels();
setActorLibOpen(false);
setModelLibOpen(false);
}}
onGenerate={(p) => onGenerate({ prompt: p, mode: "model", count: 1 })}
onUpload={(file) => {
@@ -2064,7 +2063,7 @@ export function ImageWorkbenchPage({
fd.append("file", file);
fd.append("name", file.name);
fd.append("asset_type", "image");
fd.append("category", "person");
fd.append("category", "model_portrait");
return api.uploadAsset(fd).catch(() => null);
}}
onRename={(assetId, name) => api.updateAsset(assetId, { name }).catch(() => null)}
@@ -2218,7 +2217,7 @@ function ProductLibraryModal({
onConfirm: () => void;
navigate?: (page: Page) => void;
}) {
// Esc 关闭 + body 滚动锁(与 ActorLibrary 一致体感)
// Esc 关闭 + body 滚动锁（与 ModelLibrary 一致体感）
useEffect(() => {
const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", onKey);
core/frontend/src/routes/models.tsx
+154 -32
View File
@@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from "react";
import type { ChangeEvent, CSSProperties, KeyboardEvent } from "react";
import { createPortal } from "react-dom";
import { User, X } from "lucide-react";
import { RefreshCw, Upload, User, X } from "lucide-react";
import { api } from "../api";
import type { ModelEntity } from "../types";
import { MediaLightbox, useBodyScrollLock, useOverlayTransition } from "../components/overlays";
@@ -20,52 +20,165 @@ type Preview = { src: string; kind: "image"; name: string };
// 模特详情弹窗:大图形象图 + 名字 + 官方模板/来源标签 + 三视图(16:9 单容器,无则占位)。
// 复用 overlays.tsx 的 .modal 家族机制(useBodyScrollLock + useOverlayTransition + createPortal)。
function ModelDetailModal({ model, close, onZoom }: { model: ModelEntity | null; close: () => void; onZoom: (p: Preview) => void }) {
function ModelDetailModal({ model, close, onZoom, onSaved, onNotify }: {
model: ModelEntity | null;
close: () => void;
onZoom: (p: Preview) => void;
onSaved: (model: ModelEntity) => void;
onNotify?: (type: "success" | "error", text: string) => void;
}) {
const open = !!model;
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [saving, setSaving] = useState(false);
const [pendingPortrait, setPendingPortrait] = useState<File | null>(null);
const [pendingPortraitUrl, setPendingPortraitUrl] = useState("");
const pendingPortraitUrlRef = useRef("");
const portraitFileRef = useRef<HTMLInputElement | null>(null);
function clearPendingPortrait() {
if (pendingPortraitUrlRef.current) URL.revokeObjectURL(pendingPortraitUrlRef.current);
pendingPortraitUrlRef.current = "";
setPendingPortrait(null);
setPendingPortraitUrl("");
}
function dismiss() {
clearPendingPortrait();
close();
}
useBodyScrollLock(open);
const { mounted, show } = useOverlayTransition(open, close);
const { mounted, show } = useOverlayTransition(open, saving ? undefined : dismiss);
useEffect(() => {
clearPendingPortrait();
if (!model) return;
setName(model.name);
setDescription(model.description || "");
setSaving(false);
}, [model?.id]);
useEffect(() => () => {
if (pendingPortraitUrlRef.current) URL.revokeObjectURL(pendingPortraitUrlRef.current);
}, []);
if (!mounted || !model) return null;
const currentModel = model;
const portraitUrl = pendingPortraitUrl || model.portrait;
const isDirty = Boolean(pendingPortrait) || name.trim() !== model.name || description.trim() !== (model.description || "");
const zoomKey = (p: Preview) => (e: KeyboardEvent) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onZoom(p); } };
async function save() {
if (currentModel.is_official || !name.trim() || saving) return;
setSaving(true);
try {
let updated: ModelEntity;
if (pendingPortrait) {
const form = new FormData();
form.append("file", pendingPortrait);
form.append("name", name.trim());
form.append("description", description.trim());
updated = await api.uploadModelPortrait(currentModel.id, form);
} else {
updated = await api.updateLibraryModel(currentModel.id, { name: name.trim(), description: description.trim() });
}
onSaved(updated);
clearPendingPortrait();
setName(updated.name);
setDescription(updated.description || "");
onNotify?.("success", "模特资料已保存");
} catch (error) {
onNotify?.("error", error instanceof Error ? error.message : "保存失败");
} finally {
setSaving(false);
}
}
function selectPortrait(file?: File) {
if (!file || currentModel.is_official || saving) return;
clearPendingPortrait();
const url = URL.createObjectURL(file);
pendingPortraitUrlRef.current = url;
setPendingPortrait(file);
setPendingPortraitUrl(url);
}
return createPortal(
<div className={`modal-bg${show ? " show" : ""}`} onClick={close}>
<div className={`modal-bg${show ? " show" : ""}`} onClick={() => { if (!saving) dismiss(); }}>
<div className="modal model-detail-modal" onClick={(event) => event.stopPropagation()}>
<span className="corner-tr">+</span><span className="corner-bl">+</span>
<div className="modal-h">
<div className="ic-m"><User size={16} /></div>
<div className="ti">
{model.name}
<span>{model.is_official ? "官方模板" : model.source === "upload" ? "真人上传" : "AI 生成"}</span>
模特详情
<span>模特 · {model.name}</span>
</div>
<button className="x modal-x" type="button" onClick={close} aria-label="关闭"><X size={14} /></button>
<button className="x modal-x" type="button" disabled={saving} onClick={dismiss} aria-label="关闭"><X size={14} /></button>
</div>
<div className="modal-b model-detail-b">
<div
className={`placeholder model-detail-portrait${model.portrait ? " has-mock-media" : ""}`}
style={model.portrait ? mediaStyle(model.portrait) : undefined}
role={model.portrait ? "button" : undefined}
tabIndex={model.portrait ? 0 : undefined}
onClick={model.portrait ? () => onZoom({ src: model.portrait, kind: "image", name: model.name }) : undefined}
onKeyDown={model.portrait ? zoomKey({ src: model.portrait, kind: "image", name: model.name }) : undefined}
>
{!model.portrait && <span className="ph-frame">无图</span>}
<div className="model-detail-left">
<div className="model-detail-section-h">
<strong>形象图</strong>
<div className="model-detail-section-actions">
<span className="mono">// PORTRAIT</span>
{!model.is_official && (
<button className="btn btn-sm" type="button" disabled={saving} onClick={() => portraitFileRef.current?.click()}>
<Upload size={13} />{pendingPortrait ? "重新选择" : model.portrait ? "替换形象图" : "上传形象图"}
</button>
)}
</div>
</div>
<input ref={portraitFileRef} type="file" accept="image/*" hidden onChange={(event) => { const file = event.target.files?.[0]; event.target.value = ""; selectPortrait(file); }} />
<div
className={`placeholder model-detail-portrait${portraitUrl ? " has-mock-media" : ""}`}
style={portraitUrl ? mediaStyle(portraitUrl) : undefined}
role={portraitUrl ? "button" : undefined}
tabIndex={portraitUrl ? 0 : undefined}
onClick={portraitUrl ? () => onZoom({ src: portraitUrl, kind: "image", name: pendingPortrait ? `${name || model.name} · 待保存形象图` : model.name }) : undefined}
onKeyDown={portraitUrl ? zoomKey({ src: portraitUrl, kind: "image", name: pendingPortrait ? `${name || model.name} · 待保存形象图` : model.name }) : undefined}
>
{!portraitUrl && <span className="ph-frame">无图</span>}
</div>
<div className="model-detail-tags mono">
{model.is_official && <span className="pill info">官方模板</span>}
<span className="pill neutral">{model.source === "upload" ? "真人上传" : "AI 生成"}</span>
{pendingPortrait && <span className="pill info">待保存</span>}
</div>
</div>
<div className="model-detail-tags mono">
{model.is_official && <span className="pill info">官方模板</span>}
<span className="pill neutral">{model.source === "upload" ? "真人上传" : "AI 生成"}</span>
</div>
{model.description && <p className="model-detail-desc">{model.description}</p>}
<div className="model-detail-label mono">// 三视图</div>
<div
className={`placeholder model-detail-triview${model.triview ? " has-mock-media" : ""}`}
style={model.triview ? mediaStyle(model.triview) : undefined}
role={model.triview ? "button" : undefined}
tabIndex={model.triview ? 0 : undefined}
onClick={model.triview ? () => onZoom({ src: model.triview, kind: "image", name: `${model.name} · 三视图` }) : undefined}
onKeyDown={model.triview ? zoomKey({ src: model.triview, kind: "image", name: `${model.name} · 三视图` }) : undefined}
>
{!model.triview && <span className="ph-frame mono">// 无三视图</span>}
<div className="model-detail-right">
<div>
<div className="model-detail-section-h">
<strong>三视图</strong>
<div className="model-detail-section-actions">
<span className="mono">// 可选资产</span>
{!model.is_official && (
<button className="btn btn-sm" type="button" disabled title={model.portrait ? "真实生成与计费将在下一步接通" : "请先设置模特形象图"}>
<RefreshCw size={13} />{model.triview ? "重新生成 · 20 积分" : "生成三视图 · 20 积分"}
</button>
)}
</div>
</div>
<div
className={`placeholder model-detail-triview${model.triview ? " has-mock-media" : ""}`}
style={model.triview ? mediaStyle(model.triview) : undefined}
role={model.triview ? "button" : undefined}
tabIndex={model.triview ? 0 : undefined}
onClick={model.triview ? () => onZoom({ src: model.triview, kind: "image", name: `${model.name} · 三视图` }) : undefined}
onKeyDown={model.triview ? zoomKey({ src: model.triview, kind: "image", name: `${model.name} · 三视图` }) : undefined}
>
{!model.triview && <span className="ph-frame mono">// 暂无三视图 · 模特仍可正常使用</span>}
</div>
</div>
<div className="model-detail-form">
<div className="field">
<label className="field-label" htmlFor="model-edit-name">模特名称</label>
<input id="model-edit-name" className="input" maxLength={255} disabled={model.is_official || saving} value={name} onChange={(event) => setName(event.target.value)} />
</div>
<div className="field">
<label className="field-label" htmlFor="model-edit-description">模特描述 / 提示词</label>
<textarea id="model-edit-description" className="textarea" rows={4} disabled={model.is_official || saving} placeholder="补充模特特征、风格或生成提示词" value={description} onChange={(event) => setDescription(event.target.value)} />
</div>
<div className="field-hint mono">// 编辑模特资料不会回写已存在的视频项目角色</div>
</div>
</div>
</div>
<div className="modal-f">
{model.is_official && <span className="model-detail-readonly mono">// 官方模板仅供查看</span>}
<button className="btn" type="button" disabled={saving} onClick={dismiss}>关闭</button>
{!model.is_official && <button className="btn btn-primary" type="button" disabled={saving || !name.trim() || !isDirty} onClick={() => void save()}>{saving ? "保存中…" : "保存修改"}</button>}
</div>
</div>
</div>,
document.body,
@@ -203,7 +316,16 @@ export function ModelsPage({ onNotify }: { onNotify?: (type: "success" | "error"
</div>
)}
<ModelDetailModal model={detail} close={() => setDetail(null)} onZoom={setPreview} />
<ModelDetailModal
model={detail}
close={() => setDetail(null)}
onZoom={setPreview}
onSaved={(updated) => {
setItems((list) => list.map((item) => item.id === updated.id ? updated : item));
setDetail(updated);
}}
onNotify={onNotify}
/>
<MediaLightbox open={!!preview} src={preview?.src || ""} kind={preview?.kind} name={preview?.name} close={() => setPreview(null)} />
</div>
);
core/frontend/src/routes/pipeline.tsx
+87 -55
View File
@@ -7,7 +7,7 @@ import type { Notice, Page } from "./route-config";
import { money, stageOrder, statusPill } from "./stage-config";
import { CornerMarks, Decorations, Sidebar, ToastLike } from "../components/app-shell";
import { MediaLightbox, useBodyScrollLock } from "../components/overlays";
import { ActorLibrary } from "../components/actor-library";
import { ModelLibrary } from "../components/model-library";
import { ReviewBadge, type ReviewStatus } from "../components/review-badge";
import { IconKitSvg } from "../components/IconKitSvg";
@@ -472,16 +472,16 @@ export function PipelinePage(props: {
onAdoptBaseAsset: (groupId: string, assetId: string) => void | Promise<unknown>;
onSetAdoptState: (groupId: string, state: "adopted" | "unadopted") => void | Promise<unknown>;
onDeleteBaseAsset: (groupId: string) => void | Promise<unknown>;
// 流程步骤4 · 演员库:用现有资产替换基础资产卡 / AI 生成演员 / 本地上传演员
// 流程步骤4 · 模特库：用现有模特替换角色参考图 / AI 生成模特 / 本地上传模特
// target:已生成卡传 {group_id};seed 占位卡还没 group 传 {kind,label}(后端按 label 命中/建组)
onAttachBaseAsset: (target: { group_id?: string; kind?: "product" | "person" | "scene"; label?: string }, assetId: string) => void | Promise<unknown>;
onGenerateActor: (prompt: string) => Promise<{ assets: Asset[] } | null>;
// 本地上传演员:返回上传后的 Asset(供添加人物工作台进右侧栏)
onUploadActor: (file: File) => Promise<Asset | null>;
onGenerateModel: (prompt: string) => Promise<{ assets: Asset[] } | null>;
// 本地上传模特：返回形象 Asset，供添加模特工作台保存。
onUploadModel: (file: File) => Promise<Asset | null>;
// 流程步骤4 · 据某一版立绘生成它配套的三视图(三视图与立绘 1:1 绑定)
onGenerateTriview: (portraitGroupId: string) => Promise<{ id: string } | null>;
// 流程步骤4 · 添加人物工作台命名:把名字写回该人物资产
onRenameActor?: (assetId: string, name: string) => Promise<unknown>;
// 流程步骤4 · 添加模特工作台命名：同步写回形象资产名称。
onRenameModel?: (assetId: string, name: string) => Promise<unknown>;
onGenerateStoryboard: (prompt: string) => void | Promise<unknown>;
// 单场重跑(只重出该 shot 的分镜图)/ 采用某场某历史版本
onRerunStoryboardShot?: (shotId: string, prompt?: string) => Promise<unknown>;
@@ -502,7 +502,7 @@ export function PipelinePage(props: {
const {
project, loading, navigate, user, team, products, projects, assets, billing, notice, unreadCount, avatarChar, logout, onNotify,
textModels, onAdoptScript, onUpdateShot, onAddShot, onDeleteShot, onRerunShot, onSaveProjectMeta, onAdoptVideoVersion, onGenerateVoiceover,
onGenerateBaseAsset, onAdoptBaseAsset, onSetAdoptState, onDeleteBaseAsset, onAttachBaseAsset, onGenerateActor, onUploadActor, onGenerateTriview, onRenameActor, onGenerateStoryboard, onRerunStoryboardShot, onAdoptStoryboardShotVersion, onPollStoryboardQuiet, onSkipStoryboard,
onGenerateBaseAsset, onAdoptBaseAsset, onSetAdoptState, onDeleteBaseAsset, onAttachBaseAsset, onGenerateModel, onUploadModel, onGenerateTriview, onRenameModel, onGenerateStoryboard, onRerunStoryboardShot, onAdoptStoryboardShotVersion, onPollStoryboardQuiet, onSkipStoryboard,
onSubmitVideo, onSubmitAllVideos, onPollVideosQuiet, exportResult, onRefreshExport, onRefreshProject,
onUploadVideoSegment, onUploadBgm, onSaveTimeline, onSubmitExport
} = props;
@@ -636,8 +636,8 @@ export function PipelinePage(props: {
const [triPanelOpen, setTriPanelOpen] = useState(false);
const [triPreviewId, setTriPreviewId] = useState<string | null>(null);
// 通用「选已有素材替换」选图层。商品三视图(取 product_image、按商品过滤)与场景(取 scene、团队全量)共用一套。
// 人物不走这里——人物有专门的演员库(ActorLibrary,含模特库/三视图工作台),对人物是对的。
// 旧 bug:场景卡「替换」误用了演员库 → 列的是角色数据。现在场景改走本选图层。
// 角色不走这里——角色有专门的模特选择器(含模特库/角色三视图工作台),对角色是对的。
// 旧 bug:场景卡「替换」误用了模特选择器 → 列的是角色数据。现在场景改走本选图层。
type AssetPick = {
title: string;
category: "product_image" | "scene";
@@ -784,12 +784,9 @@ export function PipelinePage(props: {
delBusy(busyKey);
}
}
// 流程步骤4 · 生成立绘后链式配套三视图(人物专用):新立绘(返回组的 adopted_asset)→ 据它生成新三视图
async function genPersonWithTri(prompt: string, label: string | undefined, busyKey: string) {
const g = await genBaseAsset("person", prompt, label, busyKey);
const newAsset = g?.adopted_asset;
if (newAsset) await genTriview(newAsset, `${busyKey}:tri`);
return g;
// 流程步骤4 · 生成人物立绘；三视图只在角色详情里手动生成。
async function genPersonPortrait(prompt: string, label: string | undefined, busyKey: string) {
return await genBaseAsset("person", prompt, label, busyKey);
}
// ── 流程步骤4 · 实体提取闸门(进资产趴入口):不自动花钱,用户点按钮才提取/生成 ──
// idle=露三按钮 / running=露 loading;提取后 metadata.script_entities 落库、或已有资产 → 闸门由渲染层自动隐藏
@@ -799,13 +796,13 @@ export function PipelinePage(props: {
const extractPollRef = useRef(0); // 提取轮询定时器句柄
const extractStartedRef = useRef(false); // 是否已有一条轮询在跑(防认领与手点双轮询)
type ExtractEntity = { id: string; type: "character" | "scene"; name: string; visual_prompt: string; ref_index: number };
// 提取完成后(mode≠only)按返回实体循环出参考图(立绘/三视图/场景图)
// 提取完成后(mode≠only)按返回实体循环出参考图(立绘/场景图；三视图手动生成)
async function runGenForEntities(entities: ExtractEntity[], mode: "gen" | "full") {
setExtractMsg("已认出角色 / 场景,正在生成参考图…");
for (const e of 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); // 立绘 + 三视图
if (mode === "full") await genPersonPortrait(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); // 场景图
@@ -843,7 +840,7 @@ export function PipelinePage(props: {
extractPollRef.current = window.setInterval(() => { void tick(); }, 3000);
void tick();
}
// only=只提取关键词(不出图) / gen=提取+生成角色场景(立绘+场景图) / full=提取+全套(立绘+三视图+场景图)
// only=只提取关键词(不出图) / gen=提取+生成角色场景(立绘+场景图) / full=提取+生成角色场景(三视图手动生成)
async function runExtract(mode: "only" | "gen" | "full") {
if (extractState === "running") return;
setExtractErr("");
@@ -945,12 +942,30 @@ export function PipelinePage(props: {
const [adPortraitId, setAdPortraitId] = useState<string | null>(null); // 当前查看的立绘 asset id(组内候选)
const [adTriId, setAdTriId] = useState<string | null>(null); // 当前查看的三视图 asset id
const [adPrompt, setAdPrompt] = useState("");
// 角色立绘升级为模特的状态按「形象资产 id」记录；后端精确查询，不能用全量列表猜测。
const [enrolledModelAssets, setEnrolledModelAssets] = useState<Set<string>>(() => new Set());
const [modelEnrollmentLoading, setModelEnrollmentLoading] = useState(false);
const [modelEnrollmentBusy, setModelEnrollmentBusy] = useState(false);
async function loadModelEnrollment(assetId: string | null | undefined) {
if (!assetId) return;
setModelEnrollmentLoading(true);
try {
const result = await api.listModels({ portraitAsset: assetId, pageSize: 1 });
if (result.results.length) setEnrolledModelAssets((known) => new Set(known).add(assetId));
} catch {
// 查询失败时保留可升级入口；提交接口本身仍是幂等的，不会重复建模特。
} finally {
setModelEnrollmentLoading(false);
}
}
useBodyScrollLock(Boolean(adDetail));
function openAssetDetail(kind: "person" | "scene", entity: AssetEntity) {
setAdDetail({ kind, key: entity.key });
setAdPortraitId(entity.group.adopted_asset ?? entity.versions.at(-1) ?? null);
const portraitAssetId = entity.group.adopted_asset ?? entity.versions.at(-1) ?? null;
setAdPortraitId(portraitAssetId);
setAdTriId(null); // 跟随当前立绘的最新三视图
setAdPrompt(entity.group.prompt ?? "");
if (kind === "person") void loadModelEnrollment(portraitAssetId);
}
// seed(未生成)卡也能点进详情:还没组,用脚本名(=key)+ 当前提示词开一个「空壳」详情。
// 进去先生成立绘;三视图按既有逻辑(无立绘则禁用)天然挡住。生成完刷新 → 同 key(=名字)自动切到真实体。
@@ -960,31 +975,30 @@ export function PipelinePage(props: {
setAdTriId(null);
setAdPrompt(promptValue);
}
// 流程步骤4 · 演员库覆盖层:replace 带要替换的目标(已生成卡=groupId;seed 占位卡还没组=kind+label);
// browse 带 studio 直接进「添加人物工作台」
const [actorLib, setActorLib] = useState<{ mode: "browse" | "replace"; studio?: boolean; groupId?: string; seedKind?: "person" | "scene"; seedLabel?: string; addNew?: boolean } | null>(null);
function openActorReplace(entity: AssetEntity) {
setActorLib({ mode: "replace", groupId: entity.group.id });
// 模特库覆盖层：replace 带替换目标；browse + studio 直接进“添加模特”。
const [modelLib, setModelLib] = useState<{ mode: "browse" | "replace"; studio?: boolean; groupId?: string; seedKind?: "person" | "scene"; seedLabel?: string; addNew?: boolean } | null>(null);
function openModelReplace(entity: AssetEntity) {
setModelLib({ mode: "replace", groupId: entity.group.id });
}
// seed 占位卡「替换」:还没 group,记 kind+label,选演员后由后端按 label 命中/建组再挂
function openActorReplaceSeed(kind: "person" | "scene", tag: string) {
setActorLib({ mode: "replace", seedKind: kind, seedLabel: tag });
// seed 占位卡“替换”：还没组，选模特后由后端按 label 命中/建组再挂。
function openModelReplaceSeed(kind: "person" | "scene", tag: string) {
setModelLib({ mode: "replace", seedKind: kind, seedLabel: tag });
}
// 场景「替换」:走通用选图层(取团队场景图),而非人物专用的演员库(修复:场景替换误列角色数据)。
// 场景“替换”走通用选图层（取团队场景图），不使用模特库。
function openSceneReplaceSeed(tag: string) {
setAssetPick({ title: "选择场景素材", category: "scene", target: { kind: "scene", label: tag }, uploadCategory: "scene", uploadName: `${tag || "场景"}·场景图` });
}
function openSceneReplaceEntity(groupId: string, label?: string) {
setAssetPick({ title: "选择场景素材", category: "scene", target: { group_id: groupId }, uploadCategory: "scene", uploadName: `${label || "场景"}·场景图` });
}
async function pickActor(assetId: string, assetName?: string) {
if (actorLib?.mode === "replace") {
if (actorLib.groupId) await onAttachBaseAsset({ group_id: actorLib.groupId }, assetId);
// 新增人物(无既有 group / 无脚本标签):用所选演员名当 label 建一个新人物组挂上
else if (actorLib.addNew && actorLib.seedKind) await onAttachBaseAsset({ kind: actorLib.seedKind, label: (assetName || "").trim() }, assetId);
else if (actorLib.seedKind) await onAttachBaseAsset({ kind: actorLib.seedKind, label: actorLib.seedLabel }, assetId);
async function pickModel(assetId: string, assetName?: string) {
if (modelLib?.mode === "replace") {
if (modelLib.groupId) await onAttachBaseAsset({ group_id: modelLib.groupId }, assetId);
// 新增角色（无既有 group / 无脚本标签）：用所选模特名建立角色组并挂上形象资产。
else if (modelLib.addNew && modelLib.seedKind) await onAttachBaseAsset({ kind: modelLib.seedKind, label: (assetName || "").trim() }, assetId);
else if (modelLib.seedKind) await onAttachBaseAsset({ kind: modelLib.seedKind, label: modelLib.seedLabel }, assetId);
}
setActorLib(null);
setModelLib(null);
}
useEffect(() => {
if (!adDetail) return;
@@ -2441,7 +2455,7 @@ 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;
// 进资产趴【不再自动生成基础资产】——原先这里会自动 genPersonWithTri/genBaseAsset 出图、直接扣用户费,
// 进资产趴【不再自动生成基础资产】——原先这里会自动 genPersonPortrait/genBaseAsset 出图、直接扣用户费,
// 用户有"被掏口袋"感。改为:进资产趴盖半透明蒙版 + 三按钮(只提取 / 提取+生成角色场景 / 提取+全套),
// 由用户点了才提取/生成(见下方 STAGE 2 的 extract gate 与 runExtract)。
@@ -3065,8 +3079,8 @@ export function PipelinePage(props: {
<div className="sec-h">
<h3>{KIND_LABEL[kind]} · {entities.length} 个</h3>
<span className="spacer"></span>
{/* 对齐设计稿:克制的小按钮(人物去演员库工作台;场景直接生成一版) */}
<button className="btn btn-sm" type="button" data-stop disabled={isBusy(customBusy)} onClick={() => { if (kind === "person") setActorLib({ mode: "replace", seedKind: "person", addNew: true }); else setSceneDrafts((d) => [...d, { id: `scene-draft-${Date.now()}`, title: "", prompt: genPrompt }]); }}>{isBusy(customBusy) ? "生成中…" : `+ 新增${KIND_LABEL[kind]}`}</button>
{/* 对齐设计稿：角色从模特库选择，场景直接生成一版。 */}
<button className="btn btn-sm" type="button" data-stop disabled={isBusy(customBusy)} onClick={() => { if (kind === "person") setModelLib({ mode: "replace", seedKind: "person", addNew: true }); else setSceneDrafts((d) => [...d, { id: `scene-draft-${Date.now()}`, title: "", prompt: genPrompt }]); }}>{isBusy(customBusy) ? "生成中…" : `+ 新增${KIND_LABEL[kind]}`}</button>
</div>
<div className="asset-grid-2">
{/* 新增场景:本地占位草稿卡(可改标题 + 提示词),编辑完点「AI 生成」才出图;出图成功后移除草稿 */}
@@ -3133,7 +3147,7 @@ export function PipelinePage(props: {
<div className="hstack"><strong style={{ fontSize: "13.5px", cursor: "pointer" }} onClick={() => openSeedDetail(kind, tag, promptValue)}>{tag}</strong><span className="spacer"></span><span className="pill neutral"><span className="dot"></span>来自脚本</span></div>
<PromptBox key={seedKey} value={promptValue} onChange={(v) => setAssetPromptDraft((m) => ({ ...m, [seedKey]: v }))} />
<div className="hstack" style={{ marginTop: 10 }}>
<button className="btn btn-ghost btn-sm" type="button" data-stop disabled={busy} onClick={() => kind === "scene" ? openSceneReplaceSeed(tag) : openActorReplaceSeed(kind, tag)}>替换</button>
<button className="btn btn-ghost btn-sm" type="button" data-stop disabled={busy} onClick={() => kind === "scene" ? openSceneReplaceSeed(tag) : openModelReplaceSeed(kind, tag)}>替换</button>
<span className="spacer"></span>
<button className="btn btn-primary btn-sm" type="button" data-stop disabled={busy} onClick={() => { const p = (assetPromptDraft[seedKey] ?? tagPrompt(tag)).trim() || tagPrompt(tag); void genBaseAsset(kind, p, tag, seedKey); }}>{busy ? "生成中…" : "AI 生成"}</button>
</div>
@@ -3196,7 +3210,7 @@ export function PipelinePage(props: {
<div className="hstack" style={{ marginTop: 10 }}>
<button className="btn btn-ghost btn-sm" type="button" data-stop disabled={busy} onClick={() => { const p = (assetPromptDraft[entity.key] ?? grp.prompt ?? "").trim() || genPrompt; const ref = kind === "person" && grp.adopted_asset ? grp.adopted_asset : undefined; void genBaseAsset(kind, p, entity.name, entBK, ref); }}>{busy ? "生成中…" : "重跑"}</button>
<span className="spacer"></span>
<button className="btn btn-ghost btn-sm" type="button" data-stop onClick={() => kind === "scene" ? openSceneReplaceEntity(entity.group.id, entity.name) : openActorReplace(entity)}>替换</button>
<button className="btn btn-ghost btn-sm" type="button" data-stop onClick={() => kind === "scene" ? openSceneReplaceEntity(entity.group.id, entity.name) : openModelReplace(entity)}>替换</button>
</div>
</div>
</div>
@@ -4098,7 +4112,8 @@ export function PipelinePage(props: {
<div className="ad-thumbs">
{portraitVersions.map((assetId) => {
const u = candUrl(grp, assetId);
return <div className={`thumb${assetId === viewPortraitAsset ? " active" : ""}${u ? " has-mock-media" : ""}`} key={assetId} role="button" tabIndex={0} title="切换立绘版本(三视图跟着切)" style={u ? mediaStyle(u) : undefined} onClick={() => { setAdPortraitId(assetId); setAdTriId(null); }} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setAdPortraitId(assetId); setAdTriId(null); } }} />;
const selectPortrait = () => { setAdPortraitId(assetId); setAdTriId(null); if (isPerson) void loadModelEnrollment(assetId); };
return <div className={`thumb${assetId === viewPortraitAsset ? " active" : ""}${u ? " has-mock-media" : ""}`} key={assetId} role="button" tabIndex={0} title="切换立绘版本(三视图跟着切)" style={u ? mediaStyle(u) : undefined} onClick={selectPortrait} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); selectPortrait(); } }} />;
})}
</div>
)}
@@ -4160,7 +4175,7 @@ export function PipelinePage(props: {
</button>
<button className="btn btn-ghost btn-sm" type="button" onClick={() => {
if (adDetail.kind === "scene") { isSeed ? openSceneReplaceSeed(entity.name) : openSceneReplaceEntity(entity.group.id, entity.name); }
else { isSeed ? openActorReplaceSeed(adDetail.kind, entity.name) : openActorReplace(entity); }
else { isSeed ? openModelReplaceSeed(adDetail.kind, entity.name) : openModelReplace(entity); }
}}>替换</button>
</div>
</div>
@@ -4171,6 +4186,25 @@ export function PipelinePage(props: {
<div className="ad-foot-stats">
{portraitUrl && <button className="ad-stat-btn" type="button" onClick={() => void downloadAssetImage(viewPortraitAsset, `${entity.name}-立绘`)}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" /></svg>下载立绘</button>}
</div>
{isPerson && <button
className="btn"
type="button"
disabled={loading || modelEnrollmentLoading || modelEnrollmentBusy || !viewPortraitAsset || enrolledModelAssets.has(viewPortraitAsset)}
title={enrolledModelAssets.has(viewPortraitAsset) ? "无需重复升级" : undefined}
onClick={async () => {
if (!viewPortraitAsset) return;
setModelEnrollmentBusy(true);
try {
await api.enrollModelFromAsset(viewPortraitAsset, entity.name);
setEnrolledModelAssets((known) => new Set(known).add(viewPortraitAsset));
onNotify?.("success", "已升级为模特，可在模特库中复用");
} catch (error) {
onNotify?.("error", error instanceof Error && error.message ? error.message : "升级为模特失败，请重试");
} finally {
setModelEnrollmentBusy(false);
}
}}
>{modelEnrollmentBusy ? "升级中…" : modelEnrollmentLoading ? "检查中…" : enrolledModelAssets.has(viewPortraitAsset) ? "该角色形象已在模特库" : "升级为模特"}</button>}
<button className="btn btn-primary" type="button" disabled={loading || !viewPortraitAsset} onClick={async () => {
// 应用当前角色 = 采用 + 自动送审:不再要用户应用完还得手动点灰盾送审(ZWQ#7)。
// 立绘(person)/三视图(tri_view)都属送审类;送审异步(processing→绿盾),失败由 submitAssetReview 自行提示。
@@ -4234,18 +4268,16 @@ export function PipelinePage(props: {
</div>
</div>
)}
{/* 流程步骤4 · 演员库:浏览 / 添加演员(AI生成·本地上传)/ 替换回填 */}
<ActorLibrary
open={Boolean(actorLib)}
mode={actorLib?.mode || "browse"}
initialStudio={actorLib?.studio}
assets={assets}
onClose={() => setActorLib(null)}
onPick={pickActor}
onGenerate={onGenerateActor}
onUpload={onUploadActor}
onGenerateTriview={onGenerateTriview}
onRename={onRenameActor}
{/* 流程步骤4 · 模特库：浏览 / 添加模特（AI 生成·本地上传）/ 替换回填 */}
<ModelLibrary
open={Boolean(modelLib)}
mode={modelLib?.mode || "browse"}
initialStudio={modelLib?.studio}
onClose={() => setModelLib(null)}
onPick={pickModel}
onGenerate={onGenerateModel}
onUpload={onUploadModel}
onRename={onRenameModel}
onRefresh={() => void onRefreshProject()}
/>
<MediaLightbox open={!!preview} src={preview?.src || ""} kind={preview?.kind} name={preview?.name} close={() => setPreview(null)} />
core/frontend/src/types.ts
+1 -1
View File
@@ -242,7 +242,7 @@ export type Asset = {
origin_task?: string | null;
is_deleted?: boolean;
purged_at?: string | null;
// 是否在「资产库」列表展示:图片生成的成图自动 true(R109);演员立绘暂存 false,「保存人物」后置 true
// 是否在「资产库」列表展示:图片生成成图自动 true(R109);模特候选/项目角色资料不进入资产库
in_library?: boolean;
// 归属商品 id(后端解析:metadata.product_id 或 origin_task→project→product),无归属为 null
product?: string | null;