feat(core): 脚本 agent 真流式思考动画 + 场景图16:9 + 资产卡/审核标修复 + 模型收敛
- 进度区改竖线时间轴:推理模型 reasoning_content 逐字转发(volcano),状态字=模型实时最新一句+秒数+折叠展开思考全文(替代旧 ProgressStream/ThinkingStream) - 场景基础资产出图改 16:9(run_base_asset_task size + 提取提示词横屏) - 已出图立绘主卡不再被在途轮询任务误盖转圈 - 审核态随项目详情持久下发(BaseAssetGroup.adopted_asset_review),刷新不丢徽章 - 设定卡加「← 返回」回三选项;模型选择器固定按 created_at 排序(默认豆包2.0Pro) - 新增 reasoning 转发回归测试 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
seaislee1209
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
675b4db0aa
commit
4c21d85ba1
@@ -530,17 +530,32 @@
|
||||
.chat-tagedit-row .tagedit-chip.add { border-color: var(--heat); color: var(--heat); }
|
||||
.chat-tagedit-row .tagedit-chip.remove { color: var(--black-alpha-48); text-decoration: line-through; }
|
||||
|
||||
/* ── 行33 · 进度提示流 ── */
|
||||
.progress-stream { display: flex; flex-direction: column; gap: 6px; }
|
||||
.progress-stream .ps-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; animation: psRowIn .28s ease; }
|
||||
.progress-stream .ps-row .ps-dot { width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--heat); flex: 0 0 6px; }
|
||||
.progress-stream .ps-row.past { color: var(--black-alpha-48); }
|
||||
.progress-stream .ps-row.past .ps-dot { background: var(--black-alpha-24); }
|
||||
.progress-stream .ps-row.active { color: var(--accent-black); }
|
||||
.progress-stream .ps-row.active .ps-dot { animation: prog-pulse 1.2s ease-in-out infinite; }
|
||||
.progress-stream.done { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; font-size: 13px; color: var(--accent-forest); }
|
||||
.progress-stream.done .ps-check { width: 16px; height: 16px; display: grid; place-items: center; background: var(--forest-bg); color: var(--accent-forest); border-radius: 50%; flex: 0 0 16px; }
|
||||
.progress-stream.done .ps-check svg { width: 10px; height: 10px; }
|
||||
/* ── 行33 · 进度时间轴(竖线串步骤 · 当前步光扫+秒数 · 思考折叠展开)── */
|
||||
.progress-timeline { display: flex; flex-direction: column; }
|
||||
.progress-timeline .pt-row { display: flex; gap: 10px; animation: ptRowIn .28s ease; }
|
||||
.progress-timeline .pt-rail { position: relative; flex: 0 0 12px; display: flex; justify-content: center; }
|
||||
.progress-timeline .pt-rail::after { content: ""; position: absolute; top: 11px; bottom: -5px; left: 50%; width: 1px; transform: translateX(-50%); background: var(--border-faint); }
|
||||
.progress-timeline .pt-row:last-child .pt-rail::after { display: none; }
|
||||
.progress-timeline .pt-dot { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--heat); flex: 0 0 7px; z-index: 1; }
|
||||
.progress-timeline .pt-row:not(.done):not(.active) .pt-dot { background: var(--ink-4); }
|
||||
.progress-timeline .pt-row.active .pt-dot { animation: pt-pulse 1.4s ease-in-out infinite; }
|
||||
.progress-timeline .pt-main { flex: 1; min-width: 0; padding-bottom: 9px; }
|
||||
.progress-timeline .pt-line { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.45; }
|
||||
.progress-timeline .pt-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
|
||||
.progress-timeline .pt-row.done .pt-text { color: var(--ink-3); }
|
||||
.progress-timeline .pt-text.shimmer {
|
||||
background: linear-gradient(90deg, var(--ink-2) 0%, var(--ink-2) 42%, var(--ink-4) 50%, var(--ink-2) 58%, var(--ink-2) 100%);
|
||||
background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
|
||||
-webkit-text-fill-color: transparent; color: transparent; animation: pt-sweep 1.6s linear infinite;
|
||||
}
|
||||
.progress-timeline .pt-sec { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); letter-spacing: .02em; flex: 0 0 auto; }
|
||||
.progress-timeline .pt-caret { flex: 0 0 auto; padding: 0 2px; background: none; border: 0; cursor: pointer; color: var(--ink-4); font-size: 15px; line-height: 1; transition: transform .18s ease; }
|
||||
.progress-timeline .pt-caret:hover { color: var(--ink-2); }
|
||||
.progress-timeline .pt-caret.open { transform: rotate(90deg); }
|
||||
.progress-timeline .pt-think { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--ink-3); white-space: pre-wrap; word-break: break-word; max-height: 168px; overflow-y: auto; border-left: 1px solid var(--border-faint); padding-left: 8px; }
|
||||
@keyframes ptRowIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
|
||||
@keyframes pt-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--heat-12); } 50% { box-shadow: 0 0 0 5px transparent; } }
|
||||
@keyframes pt-sweep { from { background-position: 140% 0; } to { background-position: -40% 0; } }
|
||||
|
||||
/* ── 行32 · 长文本折叠 ── */
|
||||
.clamp-lines { display: -webkit-box; -webkit-line-clamp: var(--clamp-lines, 10); -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
|
||||
|
||||
@@ -364,27 +364,58 @@ function DraftShotCard({ draft, onCommit, onCancel }: {
|
||||
);
|
||||
}
|
||||
|
||||
// 行33 · 进度提示流气泡:steps 逐条滚动;done 后折叠成一行「已完成」结果
|
||||
function ProgressStream({ steps, done }: { steps?: string[]; done?: boolean }) {
|
||||
// 行33 · 进度时间轴节点:每步一个点,竖线串起;模型调用那步(id=generate)会进入「思考」态。
|
||||
type StepNode = { id: string; label: string; done?: boolean; think?: boolean };
|
||||
|
||||
// 行33 · 进度时间轴(参考主流 AI 应用的流式+推理体感):
|
||||
// 竖线串起每步;当前步状态字「光扫」+ 秒数;generate 步思考态用模型实时思考最新一句做状态字,
|
||||
// 右侧 › 折叠/展开思考全文(默认收起);完成后收成「已完成思考 · 用时 Xs」。非推理模型无思考节点,照常跑步骤。
|
||||
function ProgressTimeline({ steps, reasoning, stream, done, startedAt }: { steps?: StepNode[]; reasoning?: string; stream?: string; done?: boolean; startedAt?: number }) {
|
||||
const [openThink, setOpenThink] = useState(false);
|
||||
const [now, setNow] = useState(() => Date.now());
|
||||
const bodyRef = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
if (done) return;
|
||||
const t = window.setInterval(() => setNow(Date.now()), 1000);
|
||||
return () => window.clearInterval(t);
|
||||
}, [done]);
|
||||
useEffect(() => { if (openThink && bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight; }, [reasoning, openThink]);
|
||||
|
||||
const list = steps ?? [];
|
||||
if (done) {
|
||||
return (
|
||||
<div className="progress-stream done">
|
||||
<span className="ps-check" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
|
||||
</span>
|
||||
已完成 {list.length} 步思考 · 镜头脚本已生成
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const elapsed = startedAt ? Math.max(0, Math.round((now - startedAt) / 1000)) : 0;
|
||||
const activeId = !done ? ([...list].reverse().find((s) => !s.done)?.id ?? null) : null;
|
||||
// 思考流最新一句(按句末标点/换行切)= 动态状态字,不写死
|
||||
const latestThought = (() => {
|
||||
const parts = (reasoning ?? "").split(/[\n。.!?！？;；]/).map((s) => s.trim()).filter(Boolean);
|
||||
return parts.length ? parts[parts.length - 1] : "";
|
||||
})();
|
||||
const preamble = (stream ?? "").trim();
|
||||
|
||||
return (
|
||||
<div className="progress-stream">
|
||||
{list.map((step, i) => {
|
||||
const isLast = i === list.length - 1;
|
||||
<div className={`progress-timeline${done ? " done" : ""}`}>
|
||||
{list.map((s) => {
|
||||
const rowDone = !!s.done || !!done;
|
||||
const active = s.id === activeId;
|
||||
const hasThink = s.id === "generate" && (reasoning ?? "").length > 0;
|
||||
let text = s.label;
|
||||
if (s.id === "generate") {
|
||||
if (rowDone) text = hasThink ? `已完成思考 · 用时 ${elapsed}s` : (preamble || s.label);
|
||||
else if (s.think) text = latestThought || "思考";
|
||||
else text = preamble || s.label;
|
||||
}
|
||||
return (
|
||||
<div className={`ps-row${isLast ? " active" : " past"}`} key={i}>
|
||||
<span className="ps-dot" aria-hidden="true"></span>
|
||||
<span className="ps-text">{step}</span>
|
||||
<div className={`pt-row${rowDone ? " done" : ""}${active ? " active" : ""}`} key={s.id}>
|
||||
<span className="pt-rail" aria-hidden="true"><span className="pt-dot"></span></span>
|
||||
<div className="pt-main">
|
||||
<div className="pt-line">
|
||||
<span className={`pt-text${active ? " shimmer" : ""}`}>{text}</span>
|
||||
{active && startedAt ? <span className="pt-sec">{elapsed}s</span> : null}
|
||||
{hasThink ? (
|
||||
<button type="button" className={`pt-caret${openThink ? " open" : ""}`} aria-label={openThink ? "收起思考" : "展开思考"} onClick={() => setOpenThink((v) => !v)}>›</button>
|
||||
) : null}
|
||||
</div>
|
||||
{hasThink && openThink ? <div className="pt-think" ref={bodyRef}>{reasoning}</div> : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@@ -811,7 +842,7 @@ export function PipelinePage(props: {
|
||||
const chatBodyRef = useRef<HTMLDivElement | null>(null);
|
||||
// 对话记录(本地会话态):生成动作可追溯,不再是「点了按钮、对话区永远空着」
|
||||
// kind=progress:进度提示流(行33),steps 逐条滚动出现,done 后折叠成一行结果
|
||||
type ChatMsg = { id: number; role: "ai" | "user"; text: string; time: string; kind?: "progress"; steps?: string[]; stream?: string; done?: boolean; auto?: boolean };
|
||||
type ChatMsg = { id: number; role: "ai" | "user"; text: string; time: string; kind?: "progress"; steps?: StepNode[]; stream?: string; reasoning?: string; done?: boolean; startedAt?: number; auto?: boolean };
|
||||
const nowHm = () => new Date().toTimeString().slice(0, 5);
|
||||
const msgIdRef = useRef(1);
|
||||
const nextMsgId = () => msgIdRef.current++;
|
||||
@@ -898,7 +929,7 @@ export function PipelinePage(props: {
|
||||
async function runScriptGeneration(prompt: string, userLabel?: string, source?: string, mode?: "auto" | "theme" | "revise", targetIndex?: number) {
|
||||
pushMsg("user", userLabel || prompt);
|
||||
const progressId = nextMsgId();
|
||||
setChatMsgs((list) => [...list, { id: progressId, role: "ai", text: "", kind: "progress", steps: [], stream: "", done: false, time: nowHm() }]);
|
||||
setChatMsgs((list) => [...list, { id: progressId, role: "ai", text: "", kind: "progress", steps: [], stream: "", reasoning: "", done: false, startedAt: Date.now(), time: nowHm() }]);
|
||||
// 指定镜号 = 精准改一镜,强制走 revise(后端读全脚本上下文、只动那一镜)
|
||||
const agentMode = targetIndex != null ? "revise" : (mode ?? mapSourceToMode(source ?? chatMode));
|
||||
const baseVersionId = agentMode === "revise" ? currentScript?.id : undefined;
|
||||
@@ -919,14 +950,35 @@ export function PipelinePage(props: {
|
||||
(evt) => {
|
||||
receivedEvent = true;
|
||||
if (evt.type === "tool") {
|
||||
// 工具卡:running 时把 label 滚进进度流(done/error 暂只用于结束态)
|
||||
if (evt.status === "running" && typeof evt.label === "string") {
|
||||
const label = evt.label;
|
||||
setChatMsgs((list) => list.map((m) => (m.id === progressId ? { ...m, steps: [...(m.steps ?? []), label] } : m)));
|
||||
}
|
||||
} else if (evt.type === "delta" && typeof evt.text === "string") {
|
||||
// 工具卡 → 时间轴节点:running 入列/置活动,done 标完成(extract/check 只发 done 也入列)
|
||||
const sid = String((evt as { id?: unknown }).id || "");
|
||||
if (!sid) return;
|
||||
const label = typeof evt.label === "string" ? evt.label : undefined;
|
||||
const running = evt.status === "running";
|
||||
setChatMsgs((list) => list.map((m) => {
|
||||
if (m.id !== progressId) return m;
|
||||
const steps = [...(m.steps ?? [])];
|
||||
const idx = steps.findIndex((s) => s.id === sid);
|
||||
if (idx === -1) steps.push({ id: sid, label: label ?? sid, done: !running });
|
||||
else steps[idx] = { ...steps[idx], ...(label ? { label } : {}), ...(running ? {} : { done: true }) };
|
||||
return { ...m, steps };
|
||||
}));
|
||||
} else if (evt.type === "reasoning" && typeof evt.text === "string") {
|
||||
// 推理模型思考流:逐字累积,并把 generate 步置「思考态」(状态字 = 思考最新一句)
|
||||
const piece = evt.text;
|
||||
setChatMsgs((list) => list.map((m) => (m.id === progressId ? { ...m, stream: (m.stream ?? "") + piece } : m)));
|
||||
setChatMsgs((list) => list.map((m) => {
|
||||
if (m.id !== progressId) return m;
|
||||
const steps = (m.steps ?? []).map((s) => (s.id === "generate" ? { ...s, think: true } : s));
|
||||
return { ...m, reasoning: (m.reasoning ?? "") + piece, steps };
|
||||
}));
|
||||
} else if (evt.type === "delta" && typeof evt.text === "string") {
|
||||
// 出正文 = 思考结束:generate 步退出思考态,状态字转成模型那句真前言
|
||||
const piece = evt.text;
|
||||
setChatMsgs((list) => list.map((m) => {
|
||||
if (m.id !== progressId) return m;
|
||||
const steps = (m.steps ?? []).map((s) => (s.id === "generate" ? { ...s, think: false } : s));
|
||||
return { ...m, stream: (m.stream ?? "") + piece, steps };
|
||||
}));
|
||||
} else if (evt.type === "saved") {
|
||||
ok = true;
|
||||
} else if (evt.type === "error") {
|
||||
@@ -2194,8 +2246,7 @@ export function PipelinePage(props: {
|
||||
<div className="bubble">
|
||||
{msg.kind === "progress"
|
||||
? <>
|
||||
<ProgressStream steps={msg.steps} done={msg.done} />
|
||||
{msg.stream ? <div style={{ marginTop: 6, opacity: 0.85, whiteSpace: "pre-wrap" }}>{msg.stream}</div> : null}
|
||||
<ProgressTimeline steps={msg.steps} reasoning={msg.reasoning} stream={msg.stream} done={msg.done} startedAt={msg.startedAt} />
|
||||
</>
|
||||
: <CollapsibleText text={msg.text} maxLines={10} />}
|
||||
</div>
|
||||
@@ -2222,6 +2273,8 @@ export function PipelinePage(props: {
|
||||
</label>
|
||||
<div className="setup-rec">根据商品目标人群推荐</div>
|
||||
<div className="setup-foot">
|
||||
{/* ← 返回:收起设定卡,回到「AI全生/一句话主题/自带脚本」三选项页 */}
|
||||
<button type="button" className="btn btn-ghost btn-sm" onClick={() => setSetupOpen(false)}>← 返回</button>
|
||||
<button type="button" className="btn btn-ghost btn-sm" onClick={() => {
|
||||
// 重新推荐:随机换一组,模拟「再推荐」(纯前端,后端会从 prompt 推断)
|
||||
setSetupStyle(SETUP_STYLE_KEYS[Math.floor(Math.random() * SETUP_STYLE_KEYS.length)] || setupStyle);
|
||||
@@ -2529,8 +2582,13 @@ export function PipelinePage(props: {
|
||||
const mainUrl = groupMainUrl(grp);
|
||||
const promptValue = assetPromptDraft[entity.key] ?? grp.prompt ?? "";
|
||||
const entBK = `ent:${kind}:${entity.key}`;
|
||||
const busy = isBusy(entBK) || isBusy(`${entBK}:tri`) || pendingHas(kind, entity.name);
|
||||
const rs = kind === "person" && grp.adopted_asset ? assetReview(grp.adopted_asset) : "";
|
||||
// 已生成卡(有 mainUrl)只在本次主动重跑(本地 isBusy)时转圈;
|
||||
// 不再被轮询到的在途任务(可能是残留/重复/三视图同名任务)误盖成「生成中」——
|
||||
// 否则刷新后已出图的卡会无故转圈。仅当还没出图(mainUrl 空)才用 pendingHas 兜底。
|
||||
const busy = isBusy(entBK) || isBusy(`${entBK}:tri`) || (!mainUrl && pendingHas(kind, entity.name));
|
||||
// 审核态:优先本地轮询的实时态(processing→终态),回退项目详情持久下发的 adopted_asset_review
|
||||
// (刷新后轮询 map 为空也能回显;不再依赖 byId,因为页面没喂全量 assets)
|
||||
const rs = kind === "person" && grp.adopted_asset ? (reviews[grp.adopted_asset] || grp.adopted_asset_review || "") : "";
|
||||
return (
|
||||
<div className="asset-card-2" data-asset-kind={kind} data-asset-id={entity.key} key={entity.key}>
|
||||
<div className={`placeholder thumb-2${mainUrl && !busy ? " has-mock-media" : ""}`} style={mainUrl && !busy ? { ...mediaStyle(mainUrl), cursor: "pointer" } : { cursor: "pointer" }}
|
||||
@@ -2545,7 +2603,7 @@ export function PipelinePage(props: {
|
||||
<strong style={{ fontSize: "13.5px", cursor: "pointer" }} onClick={() => openAssetDetail(kind, entity)}>{entity.name}</strong>
|
||||
<span className="spacer"></span>
|
||||
{rs === "active" && <span className="pill ok" title="火山真人审核已通过"><span className="dot"></span>审核✓</span>}
|
||||
{rs === "failed" && <span className="pill err" title={`审核未过:${byId.get(grp.adopted_asset!)?.review_error || "建议改提示词重新生成"}`}><span className="dot"></span>审核✗</span>}
|
||||
{rs === "failed" && <span className="pill err" title={`审核未过:${grp.adopted_asset_review_error || byId.get(grp.adopted_asset!)?.review_error || "建议改提示词重新生成"}`}><span className="dot"></span>审核✗</span>}
|
||||
{rs === "processing" && <span className="pill neutral"><span className="dot"></span>审核中</span>}
|
||||
</div>
|
||||
<PromptBox key={entity.key} value={promptValue} onChange={(v) => setAssetPromptDraft((m) => ({ ...m, [entity.key]: v }))} />
|
||||
|
||||
@@ -208,6 +208,9 @@ export type Project = {
|
||||
adopted_asset_url?: string;
|
||||
candidate_assets: string[];
|
||||
candidate_asset_urls?: Record<string, string>;
|
||||
// 采用资产的火山审核态(随项目详情持久下发,刷新后仍可回显徽章)
|
||||
adopted_asset_review?: string;
|
||||
adopted_asset_review_error?: string;
|
||||
// 流程步骤4 · label = 该资产对应的脚本提取标签(人物/场景名),把生成结果归回标签卡
|
||||
metadata?: { label?: string } & Record<string, unknown>;
|
||||
created_at?: string;
|
||||
|
||||
Reference in New Issue
Block a user