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

完善视频提炼和视频复刻完善提交测试

Browse Source
This commit is contained in:
Azmat@qq.com
2026-08-28 10:15:15 +08:00
parent 52c5cdae1d
commit 849b14a0f6
33 changed files with 1475 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/frontend/src/routes/ai-tools.tsx
+9 -3
View File
@@ -29,6 +29,7 @@ import {
} from "lucide-react";
import type { AITask, Asset, ImageConversation, ImageConversationTask, ModelConfig, ModelEntity, Product, WorkbenchTask } from "../types";
import { api } from "../api";
import { useFileDrop } from "../components/use-file-drop";
import { imageModelPickerOptions } from "../model-display";
import { ModelLibrary } from "../components/model-library";
import { SkeletonRows, SystemLoading } from "../components/loading";
@@ -711,14 +712,19 @@ export function ImageWorkbenchPage({
// YYX#14:无真封面时回退到按商品名匹配的 mock 图,与商品库一致显图,不再露灰占位
return p.cover_preview_url || primary?.preview_url || productMockCoverUrl(p.title);
};
function pickReference(event: ChangeEvent<HTMLInputElement>) {
const files = Array.from(event.target.files || []);
function acceptReferences(files: File[]) {
if (!files.length) return;
// 追加到已选(支持多次点 + 累加),逐张生成本地预览;file 留着提交时上传
setRefImages((prev) => [...prev, ...files.map((f) => ({ name: f.name, url: URL.createObjectURL(f), file: f }))]);
}
function pickReference(event: ChangeEvent<HTMLInputElement>) {
acceptReferences(Array.from(event.target.files || []));
event.target.value = "";
}
const refDrop = useFileDrop(acceptReferences, { accept: (f) => f.type.startsWith("image/") });
const imageModels = modelConfigs.filter((model) => model.capability.includes("image"));
// 团队价格系数(差异化调价):预估所见即所扣;拉不到按标准价 1
const [priceMultiplier, setPriceMultiplier] = useState(1);
@@ -1741,7 +1747,7 @@ export function ImageWorkbenchPage({
</div>
)}
</div>
<div className="image-composer">
<div className={`image-composer${refDrop.dragging ? " is-dragover" : ""}`} {...refDrop.dropProps}>
<div className="image-composer-main">
<div>
<button type="button" className="image-reference-button" title="上传参考图" onClick={() => refInputRef.current?.click()}>
core/frontend/src/routes/models.tsx
+19 -3
View File
@@ -3,6 +3,7 @@ import type { ChangeEvent, CSSProperties, KeyboardEvent } from "react";
import { createPortal } from "react-dom";
import { Check, RefreshCw, Settings2, Trash2, Upload, User, UserPlus, X } from "lucide-react";
import { api } from "../api";
import { useFileDrop } from "../components/use-file-drop";
import { generationErrorText } from "../generation-error";
import type { ModelEntity } from "../types";
import { SystemLoading } from "../components/loading";
@@ -120,6 +121,11 @@ function ModelDetailModal({ model, close, onZoom, onSaved, onNotify, onBillingCh
setSaving(false);
}
}
const portraitDrop = useFileDrop(
(files) => selectPortrait(files[0]),
{ disabled: saving, accept: (f) => f.type.startsWith("image/") }
);
function selectPortrait(file?: File) {
if (!file || currentModel.is_official || saving) return;
clearPendingPortrait();
@@ -203,7 +209,8 @@ function ModelDetailModal({ model, close, onZoom, onSaved, onNotify, onBillingCh
</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" : ""}`}
className={`placeholder model-detail-portrait${portraitUrl ? " has-mock-media" : ""}${portraitDrop.dragging ? " is-dragover" : ""}`}
{...(model.is_official ? {} : portraitDrop.dropProps)}
style={portraitUrl ? mediaStyle(portraitUrl) : undefined}
role={portraitUrl ? "button" : undefined}
tabIndex={portraitUrl ? 0 : undefined}
@@ -307,9 +314,18 @@ export function ModelsPage({ onNotify, onBillingChanged }: {
useEffect(() => { setSelected(new Set()); }, [tab]);
const modelDrop = useFileDrop(
(files) => { void acceptModelFile(files[0]); },
{ disabled: uploading, accept: (f) => f.type.startsWith("image/") }
);
async function onPick(e: ChangeEvent<HTMLInputElement>) {
const file = e.target.files?.[0];
e.target.value = "";
await acceptModelFile(file);
}
async function acceptModelFile(file?: File | null) {
if (!file) return;
setUploading(true);
try {
@@ -357,7 +373,7 @@ export function ModelsPage({ onNotify, onBillingChanged }: {
</button>
<button className="ml-primary" type="button" disabled={uploading} onClick={() => fileRef.current?.click()}>
<UserPlus />
<span>{uploading ? "上传中…" : "添加模特"}</span>
<span>{uploading ? "上传中…" : modelDrop.dragging ? "松开即可添加" : "添加模特"}</span>
</button>
<input ref={fileRef} type="file" accept="image/*" hidden onChange={onPick} />
</div>
@@ -388,7 +404,7 @@ export function ModelsPage({ onNotify, onBillingChanged }: {
<span>点右上「添加模特」上传一张形象图，或在图片/视频流程里生成</span>
</div>
) : (
<div className="ml-grid">
<div className={`ml-grid${modelDrop.dragging ? " is-dragover" : ""}`} {...modelDrop.dropProps}>
{items.map((m) => {
const selectable = !m.is_official;
const isSelected = selected.has(m.id);
core/frontend/src/routes/pipeline.tsx
+39 -13
View File
@@ -888,9 +888,33 @@ export function PipelinePage(props: {
delBusy(busyKey);
}
}
// 流程步骤4 · 生成人物立绘(App 层自动接力三视图)
async function genPersonPortrait(prompt: string, label: string | undefined, busyKey: string) {
return await genBaseAsset("person", prompt, label, busyKey);
// 流程步骤4 · 生成人物立绘 → 出图后自动接力三视图(用户不必再进详情弹窗手点「AI 生成三视图」;
// 弹窗里那个按钮保留,用于重跑 / 补生成)。后端 generate-base-asset 已带 auto_triview 自动接力,
// 这里只做「保持转圈 + 兜底」:立绘落库后先确认后端已把三视图任务排上,排上了就把 loading 交给
// pending-assets 轮询;真没排上(旧后端 / 接力异常)才补发一次,避免重复出图重复扣费。
async function genPersonPortrait(prompt: string, label: string | undefined, busyKey: string, referenceAssetId?: string) {
const res = await genBaseAsset("person", prompt, label, busyKey, referenceAssetId);
const portraitId = res?.adopted_asset || "";
if (!portraitId) return res;
// 立绘的 busy 已在 genBaseAsset 里落回,这里立刻把三视图的 busy 顶上,卡片不闪「已就绪」
const triKeys = [...new Set([busyKey, ...entityGenKeys("person", label)])].map((k) => `${k}:tri`);
triKeys.forEach(addBusy);
try {
let chained = false;
for (let i = 0; i < 3 && !chained; i += 1) {
try {
const pending = (await api.pendingAssets(project.id)).pending || [];
chained = pending.some((p) => p.is_triview && p.triview_of === portraitId);
} catch {
/* 网络抖动:下一轮再看 */
}
if (!chained && i < 2) await new Promise((resolve) => window.setTimeout(resolve, 3000));
}
if (!chained) await onGenerateTriview(portraitId);
} finally {
triKeys.forEach(delBusy);
}
return res;
}
// ── 流程步骤4 · 实体提取闸门(进资产趴入口):不自动花钱,用户点按钮才提取/生成 ──
// idle=露三按钮 / running=露 loading;提取后 metadata.script_entities 落库、或已有资产 → 闸门由渲染层自动隐藏
@@ -906,8 +930,7 @@ export function PipelinePage(props: {
for (const e of entities) {
const bk = `seed:${e.type === "character" ? "person" : "scene"}:${e.name}`;
if (e.type === "character") {
if (mode === "full") await genPersonPortrait(e.visual_prompt, e.name, bk);
else await genBaseAsset("person", e.visual_prompt, e.name, bk);
await genPersonPortrait(e.visual_prompt, e.name, bk); // 立绘出完自动接力三视图
} else {
await genBaseAsset("scene", e.visual_prompt, e.name, bk);
}
@@ -2944,6 +2967,7 @@ export function PipelinePage(props: {
if (activeDot !== 2 && viewStage !== 2) return;
let stopped = false;
let timer = 0;
let idleTicks = 0; // 连续「无在途」次数:立绘刚出片、后端接力的三视图任务可能晚半拍才入库,别一空就停
const tick = async () => {
if (document.hidden) { if (!stopped) timer = window.setTimeout(tick, 4000); return; } // 后台不空跑(纯读),保留心跳回前台即恢复
try {
@@ -2961,7 +2985,9 @@ export function PipelinePage(props: {
prevPendingIdsRef.current = list.map((pending) => pending.id);
setPendingGen(list.map((p) => ({ kind: p.kind, label: p.label, is_triview: p.is_triview, triview_of: p.triview_of })));
// 没有在途出图、本地也没有生成在跑 → 没什么可等,停轮询;再点生成(genBusy 变)时本 effect 会重订阅恢复。
if (list.length === 0 && genBusy.size === 0) { stopped = true; return; }
// 连空两轮(~8s)才停:立绘落库瞬间后端才接力建三视图任务,一空就停会把「三视图生成中」整条漏掉。
idleTicks = list.length === 0 && genBusy.size === 0 ? idleTicks + 1 : 0;
if (idleTicks >= 2) { stopped = true; return; }
} catch {
/* 忽略,下一轮再试 */
}
@@ -3722,7 +3748,7 @@ export function PipelinePage(props: {
{kind === "scene" ? <Image /> : <UsersRound />}
<span>{kind === "scene" ? "场景库替换" : "模特库替换"}</span>
</button>
<button className="as-ai-btn" type="button" data-stop disabled={busy} onClick={() => { const p = (assetPromptDraft[seedKey] ?? tagPrompt(tag)).trim() || tagPrompt(tag); void genBaseAsset(kind, p, tag, seedKey); }}>
<button className="as-ai-btn" type="button" data-stop disabled={busy} onClick={() => { const p = (assetPromptDraft[seedKey] ?? tagPrompt(tag)).trim() || tagPrompt(tag); void (kind === "person" ? genPersonPortrait(p, tag, seedKey) : genBaseAsset(kind, p, tag, seedKey)); }}>
<Sparkles /><span>{busy ? "生成中…" : "AI 生成"}</span>
</button>
</div>
@@ -3738,7 +3764,6 @@ export function PipelinePage(props: {
const portraitBusy = genKeys.some((k) => isBusy(k)) || (!mainUrl && pendingHas(kind, entity.name));
const triBusy = kind === "person" && (genKeys.some((k) => isBusy(`${k}:tri`)) || pendingTriFor(kind, entity));
const busy = portraitBusy || triBusy;
const loadingText = kind === "person" && mainUrl ? "三视图生成中…" : "生成中…";
const rs = (kind === "person" || kind === "scene") && grp.adopted_asset ? (reviews[grp.adopted_asset] || grp.adopted_asset_review || "") : "";
const previewState = `${mainUrl ? " ready" : busy ? " generating" : " pending"}${busy ? " generating" : ""}`;
return (
@@ -3763,7 +3788,7 @@ export function PipelinePage(props: {
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); openAssetDetail(kind, entity); } }}
>
{kind === "person" && mainUrl ? <img className="as-gen-photo" src={mainUrl} alt="" /> : null}
{busy ? <span className={`asset-card-loading${mainUrl ? " veil" : ""}`}><span className="asset-spinner" aria-hidden="true"></span><span>{loadingText}</span></span> : null}
{busy ? <span className={`asset-card-loading${mainUrl ? " veil" : ""}`}><span className="asset-spinner" aria-hidden="true"></span><span>生成中…</span></span> : null}
</div>
<div className="as-gen-meta">
<h4 onClick={() => openAssetDetail(kind, entity)}>{entity.name}</h4>
@@ -3789,7 +3814,7 @@ export function PipelinePage(props: {
{kind === "scene" ? <Image /> : <UsersRound />}
<span>{kind === "scene" ? "场景库替换" : "模特库替换"}</span>
</button>
<button className="as-ai-btn" 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); }}>
<button className="as-ai-btn" 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 (kind === "person" ? genPersonPortrait(p, entity.name, entBK, ref) : genBaseAsset(kind, p, entity.name, entBK)); }}>
<Sparkles /><span>{busy ? "生成中…" : mainUrl ? "重新生成" : "AI 生成"}</span>
</button>
</div>
@@ -4743,7 +4768,8 @@ export function PipelinePage(props: {
// 重跑立绘 → 追加新立绘并自动接力该版三视图。
// 角色重跑:若该角色已有当前立绘,传它作参考图 → 后端走 image_edit 参考立绘+提示词,保持同一人物一致(不重抽随机人)。
const ref = isPerson && viewPortraitAsset ? viewPortraitAsset : undefined;
await genBaseAsset(isPerson ? "person" : "scene", prompt, entity!.name, pBK, ref);
if (isPerson) await genPersonPortrait(prompt, entity!.name, pBK, ref);
else await genBaseAsset("scene", prompt, entity!.name, pBK);
setAdPortraitId(null); setAdTriId(null);
}
async function regenTri() {
@@ -4770,7 +4796,7 @@ export function PipelinePage(props: {
{/* 同三视图:大图随数据(portraitUrl)走,出图完成即显示,不被在途 busyPortrait 卡转圈 */}
<div className={`placeholder ad-lead-img${portraitUrl ? " has-mock-media" : ""}`} style={portraitUrl ? mediaStyle(portraitUrl) : undefined}>
{!portraitUrl && (busyPortrait
? <div style={{ display: "flex", flexDirection: "column", gap: 8, alignItems: "center" }}><span className="spinner" aria-hidden="true"></span><span className="ph-frame">立绘生成中…</span></div>
? <div style={{ display: "flex", flexDirection: "column", gap: 8, alignItems: "center" }}><span className="spinner" aria-hidden="true"></span><span className="ph-frame">生成中…</span></div>
: <span className="ph-frame">立绘</span>)}
</div>
{portraitUrl && <button className="ad-zoom-btn" type="button" title="查看大图" onClick={() => setPreview({ src: portraitUrl, kind: "image", name: `${entity.name} · 立绘` })}>{zoomSvg}</button>}
@@ -4805,7 +4831,7 @@ export function PipelinePage(props: {
避免「缩略图已出、大图还在转圈」——busyTri 只在「还没任何结果」时显示生成中占位 */}
<div className={`placeholder${triUrl ? " has-mock-media" : ""}`} style={triUrl ? mediaStyle(triUrl) : undefined}>
{!triUrl && (busyTri
? <div style={{ display: "flex", flexDirection: "column", gap: 8, alignItems: "center" }}><span className="spinner" aria-hidden="true"></span><span className="ph-frame">三视图生成中…</span></div>
? <div style={{ display: "flex", flexDirection: "column", gap: 8, alignItems: "center" }}><span className="spinner" aria-hidden="true"></span><span className="ph-frame">生成中…</span></div>
: <span className="ph-frame">正 / 侧 / 背 · 三视图</span>)}
{triUrl && busyTri && <span className="sb-gen-veil" aria-hidden="true"><span className="spinner" /></span>}
</div>
core/frontend/src/routes/products.tsx
+8 -1
View File
@@ -3,6 +3,7 @@ import { createPortal } from "react-dom";
import type { ChangeEvent, CSSProperties, FormEvent, KeyboardEvent } from "react";
import { ArrowLeft, Check, ChevronDown, Grid2X2, List, PackagePlus, PackageX, Search, Settings2, Trash2, X } from "lucide-react";
import { ConfirmModal, MediaLightbox, SuccessModal } from "../components/overlays";
import { useFileDrop } from "../components/use-file-drop";
import { ReviewBadge, type ReviewStatus } from "../components/review-badge";
import { ProductCreateDrawer } from "../components/product-create-drawer";
import {
@@ -786,9 +787,15 @@ export function ProductDetailPage({ product, projects, initialTab = "assets", na
return () => { alive = false; };
}, [product?.id, product.cover_asset, assetReload]);
const imgDrop = useFileDrop((files) => { void uploadProductImage(files[0]); }, { disabled: uploading });
async function onPickProductImage(event: ChangeEvent<HTMLInputElement>) {
const file = event.target.files?.[0];
event.target.value = "";
await uploadProductImage(file);
}
async function uploadProductImage(file?: File | null) {
if (!file || !onUploadImage) return;
setUploading(true);
try {
@@ -1163,7 +1170,7 @@ export function ProductDetailPage({ product, projects, initialTab = "assets", na
</div>
);
})}
<div className="img-upload" id="ov-img-add" title="上传图片" role="button" tabIndex={0} onClick={() => imgInputRef.current?.click()} onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); imgInputRef.current?.click(); } }}>
<div className={`img-upload${imgDrop.dragging ? " is-dragover" : ""}`} {...imgDrop.dropProps} id="ov-img-add" title="上传图片" role="button" tabIndex={0} onClick={() => imgInputRef.current?.click()} onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); imgInputRef.current?.click(); } }}>
{uploading ? (
<span className="ph-frame" style={{ fontSize: 12 }}>上传中…</span>
) : (
core/frontend/src/routes/quick-create.tsx
+49 -6
View File
@@ -21,6 +21,7 @@ import {
} from "lucide-react";
import { api, ApiError, type QuickCreateJob } from "../api";
import { ConfirmModal, OverlayPortal, useBodyScrollLock } from "../components/overlays";
import { useFileDrop } from "../components/use-file-drop";
import { forgetQuickCreateJob, readQuickCreateJobId, rememberQuickCreateJob, stripQuickCreateSuffix } from "../quick-create-lock";
import type { ModelConfig } from "../types";
import {
@@ -135,6 +136,9 @@ export function QuickCreatePage({
const [submitting, setSubmitting] = useState(false);
const [cancelling, setCancelling] = useState(false);
const [confirmCancel, setConfirmCancel] = useState(false);
// 进页面先向后端确认有没有在跑的任务。localStorage 可能被清、也可能换了浏览器,
// 只认它会让刷新后看到一张空表单,用户以为没任务又提交一次 —— 那会重复建商品、重复扣费。
const [restoring, setRestoring] = useState(true);
const [serviceUnavailable, setServiceUnavailable] = useState(false);
const [unavailableMessage, setUnavailableMessage] = useState("");
const [pollEpoch, setPollEpoch] = useState(0);
@@ -183,8 +187,19 @@ export function QuickCreatePage({
}))
.catch(() => undefined);
void api.quickCreateHistory()
.then((payload) => setHistory((payload.results || []).filter(jobIsComplete)))
.catch(() => undefined);
.then((payload) => {
setHistory((payload.results || []).filter(jobIsComplete));
const running = payload.inflight || null;
if (running) {
setJob(running);
setJobId(running.id);
rememberQuickCreateJob(running.id);
} else if (!savedJobId()) {
forgetQuickCreateJob();
}
})
.catch(() => undefined)
.finally(() => setRestoring(false));
}, []);
useEffect(() => {
@@ -325,7 +340,7 @@ export function QuickCreatePage({
setPlaying({ url, title: title || "预览视频" });
}
function selectImages(files: FileList | null) {
function selectImages(files: FileList | File[] | null) {
const selected = Array.from(files || []).filter((file) => file.type.startsWith("image/"));
setImages((current) => {
const room = Math.max(0, 9 - savedImages.length - current.length);
@@ -386,6 +401,10 @@ export function QuickCreatePage({
}
async function startGeneration() {
if (restoring) {
onNotify?.("info", "正在读取任务状态，请稍候");
return;
}
if (!name.trim() || (!images.length && !savedImages.length)) {
onNotify?.("info", "请先填写商品名称并上传商品图片");
return;
@@ -433,7 +452,16 @@ export function QuickCreatePage({
onNotify?.("success", "一键成片任务已启动");
onProjectCreated?.();
} catch (error) {
if (error instanceof ApiError && error.status === 503) {
if (error instanceof ApiError && error.status === 409) {
// 后端单飞闸:已有任务在跑。直接接上它,别让用户对着报错干瞪眼。
const running = (error.payload as { inflight?: QuickCreateJob } | undefined)?.inflight;
if (running) {
setJob(running);
setJobId(running.id);
rememberQuickCreateJob(running.id);
}
onNotify?.("info", error.message || "已有一个一键成片正在进行中");
} else if (error instanceof ApiError && error.status === 503) {
setServiceUnavailable(true);
setUnavailableMessage(error.message || "一键成片服务暂不可用，请稍后再试");
onNotify?.("info", error.message || "一键成片服务暂不可用，请稍后再试");
@@ -520,6 +548,7 @@ export function QuickCreatePage({
}
const isGenerating = submitting || job?.status === "queued" || job?.status === "running";
const imageDrop = useFileDrop((files) => selectImages(files), { disabled: isGenerating });
const isComplete = job?.status === "succeeded";
const isCancelled = job?.status === "cancelled";
const isFailed = !isGenerating && !isComplete && (job?.status === "failed" || isCancelled || serviceUnavailable);
@@ -547,6 +576,7 @@ export function QuickCreatePage({
const estimatedPoints = videoEstimate.points > 0 ? videoEstimate.points + sceneCount * 60 : sceneCount * 240;
const shellClass = [
"quick-create-shell",
restoring ? "is-restoring" : "",
isGenerating ? "is-generating" : "",
isComplete ? "is-complete" : "",
isFailed ? "is-failed" : "",
@@ -562,7 +592,11 @@ export function QuickCreatePage({
</header>
<div className={shellClass} id="quickCreateShell">
<section className="quick-create-panel quick-form-panel">
<section
className={`quick-create-panel quick-form-panel${restoring ? " is-locked" : ""}`}
aria-busy={restoring}
inert={restoring}
>
<div className="quick-form-copy">
<h2>告诉我们这是什么商品</h2>
</div>
@@ -614,7 +648,10 @@ export function QuickCreatePage({
<div className="quick-field">
<span className="quick-field-label"><span>商品图片</span><small>必填 · 最多9张</small></span>
<div className={`quick-upload${imageCount ? " has-images" : ""}`}>
<div
className={`quick-upload${imageCount ? " has-images" : ""}${imageDrop.dragging ? " is-dragover" : ""}`}
{...imageDrop.dropProps}
>
<input ref={imageInputRef} type="file" accept="image/jpeg,image/png,image/webp" multiple onChange={(event) => { selectImages(event.target.files); event.currentTarget.value = ""; }} />
{imageCount ? (
<div className="quick-upload-filled">
@@ -686,6 +723,12 @@ export function QuickCreatePage({
</section>
<section className="quick-create-panel quick-status-panel" aria-live="polite">
<div className="quick-state quick-state-restoring" role="status">
<div className="quick-restoring-spinner" aria-hidden="true" />
<h2>正在读取任务状态</h2>
<p>确认有没有正在进行的一键成片，稍候</p>
</div>
<div className="quick-state quick-state-ready">
<div className="quick-ready-orbit"><span className="quick-ready-icon"><Sparkles /></span></div>
<h2>核心参数可选，其余自动完成</h2>
core/frontend/src/routes/settings.tsx
+11 -4
View File
@@ -10,6 +10,7 @@ import {
} from "lucide-react";
import type { LoginSession, Team, User, UserPreference } from "../types";
import { TeamModal } from "../components/overlays";
import { useFileDrop } from "../components/use-file-drop";
type SectionKey = "profile" | "security" | "notify" | "pref" | "display";
@@ -346,13 +347,18 @@ export function SettingsPage({
setModal("avatar");
}
function onPickAvatar(event: ChangeEvent<HTMLInputElement>) {
const file = event.target.files?.[0];
function acceptAvatar(file?: File | null) {
if (!file) return;
setAvatarFile(file);
setAvatarPreview(URL.createObjectURL(file));
}
function onPickAvatar(event: ChangeEvent<HTMLInputElement>) {
acceptAvatar(event.target.files?.[0]);
}
const avatarDrop = useFileDrop((files) => acceptAvatar(files[0]), { disabled: savingAvatar });
async function handleUploadAvatar() {
if (!avatarFile || savingAvatar) return;
setSavingAvatar(true);
@@ -717,7 +723,8 @@ export function SettingsPage({
onChange={onPickAvatar}
/>
<div
className="upload-zone"
className={`upload-zone${avatarDrop.dragging ? " dragover" : ""}`}
{...avatarDrop.dropProps}
role="button"
tabIndex={0}
aria-label="点击选择图片上传"
@@ -732,7 +739,7 @@ export function SettingsPage({
<span className="uz-ic">
<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-4" /><polyline points="17 8 12 3 7 8" /><line x1="12" y1="3" x2="12" y2="15" /></svg>
</span>
<div><strong>点击选择</strong> · 图片文件</div>
<div><strong>{avatarDrop.dragging ? "松开即可上传" : "点击选择"}</strong> · 图片文件</div>
<span className="uz-hint">JPG / PNG / WebP · ≤ 2 MB · 推荐 256 × 256</span>
</div>
core/frontend/src/routes/video-remix.tsx
+99 -36
View File
@@ -13,6 +13,7 @@ import {
PanelsTopLeft,
Play,
RectangleVertical,
RefreshCw,
Save,
ScanLine,
ScanSearch,
@@ -21,6 +22,7 @@ import {
} from "lucide-react";
import { api, ApiError } from "../api";
import { ConfirmModal, MediaLightbox } from "../components/overlays";
import { useFileDrop } from "../components/use-file-drop";
import type { ModelConfig, VideoDigestHistory, VideoDigestJob } from "../types";
import type { NavigateFn } from "./route-config";
@@ -167,6 +169,8 @@ export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }:
const [openHistoryId, setOpenHistoryId] = useState("");
const [playing, setPlaying] = useState<VideoDigestHistory | null>(null);
const [confirmCancel, setConfirmCancel] = useState(false);
// 进页面先向后端确认有没有在跑的提炼,确认完再决定显示表单还是进度
const [restoring, setRestoring] = useState(true);
const promptRef = useRef<HTMLTextAreaElement>(null);
const completedNoticeRef = useRef("");
const abortRef = useRef<AbortController | null>(null);
@@ -236,21 +240,31 @@ export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }:
}
let cancelled = false;
void (async () => {
await loadHistory();
const listed = await loadHistory();
if (cancelled) return;
// 优先信服务端:列表接口会回本团队在跑的那条。localStorage 可能被清、
// 也可能换了浏览器/标签页,只认它会让「退出再进来任务就没了」。
const inflight = listed?.inflight || null;
const stored = readJobId();
if (!stored) return;
const restoreId = (inflight ? jobIdOf(inflight) : "") || stored;
if (!restoreId) {
forgetJob();
setRestoring(false);
return;
}
try {
const job = await api.getVideoDigest(stored);
const job = inflight && jobIdOf(inflight) === restoreId
? inflight
: await api.getVideoDigest(restoreId);
if (cancelled) return;
if (job.status === "processing") {
if (!job.video_url && !job.cover_url) {
forgetJob();
void api.cancelVideoDigest(stored).catch(() => undefined);
return;
}
// 之前这里在「拿不到封面/原片直链」时把任务取消掉 —— 那是拿渲染缩略图的
// 能力去判活,TOS 慢一点或签名失败就误杀正在跑的任务。一律恢复并续上轮询,
// 真死掉的由后端 expire_stale_team_digests(15 分钟)回收。
applyJobMeta(job);
setJobId(stored);
setJobId(restoreId);
rememberJob(restoreId);
setRestoring(false);
return;
}
if (job.status === "succeeded") {
@@ -260,7 +274,9 @@ export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }:
/* 过期 / 已取消 / 不存在:当没任务 */
}
forgetJob();
})();
})().finally(() => {
if (!cancelled) setRestoring(false);
});
return () => {
cancelled = true;
};
@@ -322,6 +338,11 @@ export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }:
};
}, [pollId, onNotify]);
const videoDrop = useFileDrop(
(files) => { void pickFile(files[0] || null); },
{ disabled: analyzing }
);
const pickFile = async (next: File | null) => {
if (!next || analyzing) return;
if (!/\.(mp4|mov|m4v|webm)$/i.test(next.name)) {
@@ -391,6 +412,19 @@ export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }:
setJobId(id);
} catch (error) {
if (userCancelledRef.current || (error instanceof DOMException && error.name === "AbortError")) return;
if (error instanceof ApiError && error.status === 409) {
// 后端单飞闸:已有提炼在跑。直接接上它,别让用户对着报错干瞪眼。
const running = (error.payload as { inflight?: VideoDigestJob } | undefined)?.inflight;
if (running) {
const id = jobIdOf(running);
applyJobMeta(running);
rememberJob(id);
setWatchId("");
setJobId(id);
}
onNotify("info", error.message || "已有一个视频正在提炼中");
return;
}
onNotify("error", error instanceof Error && error.message ? error.message : "视频拆解失败，请重试");
} finally {
setSubmitting(false);
@@ -460,6 +494,7 @@ export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }:
const stage: ProgressStage = analyzing ? "analyze" : hasResult ? "prompt" : file || remoteVideoUrl ? "analyze" : "upload";
const panelClass = [
"video-result-panel remix-information-panel",
restoring ? "is-restoring" : "",
hasResult ? "has-result" : "",
analyzing ? "is-analyzing" : "",
].filter(Boolean).join(" ");
@@ -496,32 +531,54 @@ export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }:
</div>
<div className="video-flow-grid remix-flow-grid">
<section className="video-flow-panel video-remix-upload-panel">
<section
className={`video-flow-panel video-remix-upload-panel${restoring ? " is-locked" : ""}`}
aria-busy={restoring}
inert={restoring}
>
<h2>上传参考视频</h2>
<div className="video-flow-step">
<div className="video-flow-step-head">
<strong>参考视频</strong>
<span>MP4 / MOV · 最长 60 秒</span>
<span>MP4 / MOV · 最长 3 分钟 · ≤200MB</span>
</div>
{previewUrl ? (
<div className="video-upload-field has-file has-preview">
<video src={previewUrl} poster={coverUrl || undefined} controls playsInline preload="metadata" />
<label className={`remix-replace-video${analyzing ? " is-disabled" : ""}`}>
<input
type="file"
accept="video/mp4,video/quicktime,video/webm"
hidden
disabled={analyzing}
onChange={(event) => {
void pickFile(event.target.files?.[0] || null);
event.target.value = "";
}}
/>
更换视频
</label>
<div
className={`video-upload-field has-file has-preview${videoDrop.dragging ? " is-dragover" : ""}`}
{...videoDrop.dropProps}
>
<div className="video-upload-preview">
<video src={previewUrl} poster={coverUrl || undefined} controls playsInline preload="metadata" />
<div className="video-upload-preview-meta">
<strong>{fileName || file?.name || "参考视频"}</strong>
<small>
{analyzing
? "正在提炼分镜稿…"
: [duration ? `${duration} 秒` : "", ratio, fileMetaCopy(kind, fileSize, width, height)]
.filter(Boolean).join(" · ")}
</small>
</div>
<label className={`video-upload-change${analyzing ? " is-disabled" : ""}`}>
<input
type="file"
accept="video/mp4,video/quicktime,video/webm"
hidden
disabled={analyzing}
onChange={(event) => {
void pickFile(event.target.files?.[0] || null);
event.target.value = "";
}}
/>
<RefreshCw />
更换视频
</label>
</div>
</div>
) : (
<label className="video-upload-field">
<label
className={`video-upload-field${videoDrop.dragging ? " is-dragover" : ""}`}
{...videoDrop.dropProps}
>
<input
type="file"
accept="video/mp4,video/quicktime,video/webm"
@@ -534,7 +591,7 @@ export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }:
/>
<span>
<FileVideo />
<strong>点击上传参考视频</strong>
<strong>{videoDrop.dragging ? "松开即可上传" : "点击或拖拽上传参考视频"}</strong>
<small>上传后自动识别镜头结构与内容节奏</small>
</span>
</label>
@@ -544,7 +601,7 @@ export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }:
<button
type="button"
className="primary-action"
disabled={analyzing || !canAnalyze}
disabled={restoring || analyzing || !canAnalyze}
onClick={() => void analyze()}
>
<ScanSearch />
@@ -554,6 +611,13 @@ export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }:
</section>
<aside className={panelClass} aria-live="polite">
<div className="remix-restoring-state" role="status" aria-live="polite">
<div className="remix-restoring-content">
<span className="remix-restoring-spinner" aria-hidden="true" />
<strong>正在读取任务状态</strong>
<span>确认有没有正在进行的提炼，稍候</span>
</div>
</div>
<div className="video-result-placeholder">
<div>
<span className="remix-placeholder-icon"><ScanLine /></span>
@@ -568,6 +632,7 @@ export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }:
</div>
<strong>正在提炼提示词</strong>
<span>离开页面也不会中断，稍后回来即可查看结果</span>
<div className="remix-generating-bar" aria-hidden="true"><span /></div>
<button type="button" className="secondary-action remix-cancel-analyze" onClick={() => setConfirmCancel(true)}>
<X />
取消
@@ -616,6 +681,10 @@ export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }:
<div><h2>提示词内容</h2></div>
</div>
<div className="remix-prompt-head-actions">
<button type="button" className="primary-action remix-prompt-head-btn" onClick={() => continueGenerate()}>
<span>生成视频</span>
<ArrowRight />
</button>
<button type="button" className="secondary-action remix-prompt-head-btn" onClick={() => void savePrompt()}>
<Save />
保存提示词
@@ -629,12 +698,6 @@ export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }:
value={prompt}
onChange={(event) => setPrompt(event.target.value)}
/>
<div className="video-flow-actions remix-prompt-actions">
<button type="button" className="primary-action" onClick={() => continueGenerate()}>
<span>生成视频</span>
<ArrowRight />
</button>
</div>
</div>
</section>
core/frontend/src/routes/video-replace.tsx
+199 -29
View File
@@ -20,6 +20,7 @@ import {
} from "lucide-react";
import { api, ApiError } from "../api";
import { OverlayPortal, useBodyScrollLock } from "../components/overlays";
import { useFileDrop } from "../components/use-file-drop";
import {
DEFAULT_BILLING_RATES,
FC_MODELS,
@@ -37,6 +38,13 @@ const JOB_KEY = "airshelf:video-replace-job";
const MODE_KEY = "airshelf:video-replace-mode";
const CHARACTER_MARK = "[视频复刻·角色]";
const VIDEO_ACCEPT = "video/mp4,video/quicktime";
// 商品复刻的参考视频只用来提炼分镜稿，不发火山，所以能到 60 秒；
// 角色复刻仍把参考视频直传火山，卡死在火山的 15 秒。
const PRODUCT_SOURCE_PURPOSE = "video_replace_product";
const REF_SECONDS_MAX = { product: 60, character: 15 } as const;
const REF_BYTES_MAX = { product: 200 * 1024 * 1024, character: 50 * 1024 * 1024 } as const;
// 火山单次出片上限。参考视频更长时不报错,成片按这个截断,提示词里会要求模型压缩改编。
const SEEDANCE_MAX_OUTPUT_SECONDS = 15;
type ProductSource = "library" | "temporary" | "";
type ReplaceMode = "product" | "character";
@@ -50,7 +58,7 @@ const REPLACE_MODE_COPY = {
videoReady: "视频已就绪，将先提炼分镜稿再复刻",
libraryTitle: "从商品库选择",
libraryEmpty: "选择已创建的商品",
temporaryTitle: "临时上传商品",
temporaryTitle: "临时上传素材",
temporaryEmpty: "仅用于本次任务 · 最多 9 张",
temporaryNoun: "商品图",
temporaryFallback: "临时商品素材",
@@ -170,8 +178,9 @@ function formatClock(seconds: number) {
}
function clampDuration(seconds: number) {
const rounded = Math.round(Number(seconds) || 15);
return Math.min(15, Math.max(4, rounded || 15));
const rounded = Math.round(Number(seconds) || SEEDANCE_MAX_OUTPUT_SECONDS);
// 60 秒参考视频不是错误:成片取火山能出的最长,分镜稿由模型压缩改编。
return Math.min(SEEDANCE_MAX_OUTPUT_SECONDS, Math.max(4, rounded || SEEDANCE_MAX_OUTPUT_SECONDS));
}
function isCharacterRemix(task?: Partial<FreeVideoTask> | null) {
@@ -240,6 +249,24 @@ function productImageCount(product: Product) {
return product.images?.filter((image) => image.asset || image.preview_url).length || 0;
}
/** 选中后这次实际会带给模型的参考图。三视图是 standalone 资产,不在 images 里,单独点名。 */
function librarySelectionDetail(mode: ReplaceMode, product: Product | null, model: ModelEntity | null) {
if (mode === "character") {
if (!model) return "";
const parts = [model.portrait ? "定妆照" : "", model.triview ? "三视图" : ""].filter(Boolean);
return parts.length ? `将带上 ${parts.join(" + ")}` : "";
}
if (!product) return "";
const count = productImageCount(product) || (product.cover_preview_url ? 1 : 0);
const parts = [count ? `${count} 张商品图` : ""];
parts.push(product.triview_preview_url ? "三视图" : "");
const kept = parts.filter(Boolean);
if (!kept.length) return "";
return product.triview_preview_url
? `将带上 ${kept.join(" + ")}`
: `将带上 ${kept.join("")} · 该商品还没有三视图`;
}
function modelCover(model: ModelEntity) {
return model.portrait || model.triview || "";
}
@@ -266,8 +293,12 @@ export function VideoReplacePage({
const [models, setModels] = useState<ModelEntity[]>([]);
const [replaceMode, setReplaceMode] = useState<ReplaceMode>(readReplaceMode);
const [videoFile, setVideoFile] = useState<File | null>(null);
// 选完立刻用本地 objectURL 放预览,不等上传回来 —— 用户要先看见自己选的片子
const [videoPreview, setVideoPreview] = useState("");
const [videoRef, setVideoRef] = useState<FreeVideoRef | null>(null);
const [videoUploading, setVideoUploading] = useState(false);
// 进页面先向后端确认有没有在跑的任务,确认完再决定显示表单还是进度
const [restoring, setRestoring] = useState(true);
const [videoMeta, setVideoMeta] = useState({ duration: 0, width: 0, height: 0 });
const [source, setSource] = useState<ProductSource>("");
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
@@ -314,6 +345,7 @@ export function VideoReplacePage({
const productReady = source === "library"
? (replaceMode === "character" ? Boolean(selectedModel) : Boolean(selectedProduct))
: (tempFiles.length > 0 || tempAssetRefs.length > 0);
const librarySelected = source === "library" && Boolean(replaceMode === "character" ? selectedModel : selectedProduct);
const libraryPreview = replaceMode === "character"
? (selectedModel ? modelCover(selectedModel) : "")
: (selectedProduct ? productCover(selectedProduct) : "");
@@ -345,7 +377,9 @@ export function VideoReplacePage({
],
}, billingRates);
const points = estimated.points || 220;
const generating = Boolean(job && isInFlight(job.status)) || submitting || videoUploading;
// 上传参考视频不算「正在复刻」:右侧面板要保持待命,只在上传区自己显示进度。
// 生成按钮不会因此被误点 —— videoReady 要等 asset_id 回来才为真。
const generating = Boolean(job && isInFlight(job.status)) || submitting;
const digesting = Boolean(job && isDigesting(job));
// 商品复刻提交后先进拆解态;审核态是角色复刻专有(参考视频直传火山才需要送审)。
const reviewing = !digesting && (submitting || Boolean(job && (job.review_stage === "reviewing" || job.status === "created")));
@@ -353,6 +387,7 @@ export function VideoReplacePage({
const resultCopy = hasResult && job ? REPLACE_MODE_COPY[modeFromTask(job)] : copy;
const panelClass = [
"video-result-panel replace-result-panel",
restoring ? "is-restoring" : "",
generating ? "is-generating" : "",
reviewing || digesting ? "is-reviewing" : "",
hasResult ? "has-result" : "",
@@ -367,11 +402,40 @@ export function VideoReplacePage({
try {
const data = await api.videoReplaceTasks(0, 50);
setHistory((data.results || []).filter((item) => item.status === "succeeded"));
return data;
} catch {
/* 历史失败不挡当前复刻 */
return null;
}
};
// 恢复在跑的任务。拉到之前一律显示「读取中」——否则用户以为没任务,又传一次。
const restoreInflight = async () => {
const data = await loadHistory();
const running = data?.inflight || null;
if (running) {
// 静默恢复:只把进度接上。不要走 fillFormFromTask —— 它会弹 toast、滚动页面,
// 还依赖商品/模特列表加载完,拿来做刷新恢复会又吵又不稳。
setJob(running);
setJobId(running.id);
rememberJob(running.id);
const mode = modeFromTask(running);
setReplaceMode(mode);
rememberReplaceMode(mode);
const video = videoRefFromTask(running);
if (video?.url) setVideoPreview(video.url);
setVideoRef(video ? { ...video, type: "video", role: "reference_video", label: video.label || "参考视频" } : null);
setFilledSubjectName(subjectNameFromTask(running));
setVideoMeta({
duration: Number(video?.duration || running.duration || 0),
...sizeFromRatio(running.aspect_ratio || "9:16"),
});
} else {
forgetJob();
}
setRestoring(false);
};
useEffect(() => {
void api.products(100).then((payload) => setProducts(payload.results || [])).catch(() => undefined);
void api.listModels({ pageSize: 200 }).then((payload) => setModels((payload.results || []).filter((item) => !item.is_deleted))).catch(() => undefined);
@@ -382,7 +446,7 @@ export function VideoReplacePage({
multiplier: Number(config.team_price_multiplier) || 1,
}))
.catch(() => undefined);
void loadHistory();
void restoreInflight();
}, []);
useEffect(() => {
@@ -455,7 +519,10 @@ export function VideoReplacePage({
const pickVideo = async (file: File | null) => {
if (!file) return;
const check = await checkRefFile(file);
const check = await checkRefFile(file, {
maxSeconds: REF_SECONDS_MAX[replaceMode],
maxVideoBytes: REF_BYTES_MAX[replaceMode],
});
if (!check.ok) {
onNotify("error", check.error);
return;
@@ -465,11 +532,13 @@ export function VideoReplacePage({
return;
}
setVideoFile(file);
setVideoPreview(URL.createObjectURL(file));
setVideoUploading(true);
setJob((current) => (current && isInFlight(current.status) ? current : null));
if (job && !isInFlight(job.status)) setJob(null);
const form = new FormData();
form.append("file", file);
if (replaceMode === "product") form.append("purpose", PRODUCT_SOURCE_PURPOSE);
try {
const uploaded = await api.uploadFreeVideoRef(form);
setVideoRef({
@@ -490,13 +559,14 @@ export function VideoReplacePage({
} catch (error) {
setVideoFile(null);
setVideoRef(null);
setVideoPreview("");
onNotify("error", error instanceof Error ? error.message : "参考视频上传失败");
} finally {
setVideoUploading(false);
}
};
const addTempImages = (files: FileList | null) => {
const addTempImages = (files: FileList | File[] | null) => {
const incoming = [...(files || [])].filter((file) => IMAGE_TYPES.includes(file.type));
if (!incoming.length) {
onNotify("error", "请选择 JPG、PNG 或 WebP 图片");
@@ -530,8 +600,33 @@ export function VideoReplacePage({
if (job && !isInFlight(job.status)) setJob(null);
};
useEffect(() => {
// 换一条预览或离开页面时释放 objectURL,不然一路选下去会攒一堆 blob
if (!videoPreview.startsWith("blob:")) return;
return () => URL.revokeObjectURL(videoPreview);
}, [videoPreview]);
const tempDrop = useFileDrop(
(files) => addTempImages(files),
{ disabled: generating }
);
const videoDrop = useFileDrop(
(files) => { void pickVideo(files[0] || null); },
{ disabled: generating || videoUploading }
);
const switchReplaceMode = (next: ReplaceMode) => {
if (next === replaceMode || generating) return;
// 商品复刻能传 60 秒，角色复刻只能 15 秒。带着超长视频切过去会一路走到提交才报错，
// 这里直接清掉并说明原因。
const tooLongForNext = (videoMeta.duration || 0) > REF_SECONDS_MAX[next] + 0.5;
if (tooLongForNext) {
setVideoFile(null);
setVideoRef(null);
setVideoPreview("");
setVideoMeta({ duration: 0, width: 0, height: 0 });
}
setReplaceMode(next);
rememberReplaceMode(next);
setSource("");
@@ -544,7 +639,12 @@ export function VideoReplacePage({
setPendingModelId("");
setLibraryOpen(false);
if (job && !isInFlight(job.status)) setJob(null);
onNotify("info", `已切换为${REPLACE_MODE_COPY[next].modeLabel}`);
onNotify(
"info",
tooLongForNext
? `已切换为${REPLACE_MODE_COPY[next].modeLabel}，参考视频最长 ${REF_SECONDS_MAX[next]} 秒，请重新上传`
: `已切换为${REPLACE_MODE_COPY[next].modeLabel}`
);
};
const confirmLibrarySelection = () => {
@@ -647,6 +747,17 @@ export function VideoReplacePage({
forgetJob();
}
} catch (error) {
if (error instanceof ApiError && error.status === 409) {
// 后端单飞闸:已有复刻在跑。直接接上它,别让用户对着报错干瞪眼。
const running = (error.payload as { inflight?: FreeVideoTask } | undefined)?.inflight;
if (running) {
setJob(running);
setJobId(running.id);
rememberJob(running.id);
}
onNotify("info", error.message || "已有一个视频正在复刻中");
return;
}
onNotify("error", error instanceof Error ? error.message : "视频复刻提交失败");
} finally {
setSubmitting(false);
@@ -666,6 +777,8 @@ export function VideoReplacePage({
setReplaceMode(mode);
rememberReplaceMode(mode);
setVideoFile(null);
// 从历史「重新生成」回填时也要把原视频放进预览框,否则第 1 步看起来像没选
setVideoPreview(video.url || "");
setVideoRef({
...video,
type: "video",
@@ -750,7 +863,11 @@ export function VideoReplacePage({
</header>
<div className="video-flow-grid">
<section className="video-flow-panel replace-flow-panel">
<section
className={`video-flow-panel replace-flow-panel${restoring ? " is-locked" : ""}`}
aria-busy={restoring}
inert={restoring}
>
<h2>准备复刻素材</h2>
<div className="replace-mode-switch" role="tablist" aria-label="选择视频复刻功能">
<button
@@ -781,9 +898,17 @@ export function VideoReplacePage({
<div className="video-flow-step">
<div className="video-flow-step-head">
<strong>1. 参考视频</strong>
<span>MP4 / MOV · 最长 15 秒</span>
<span>MP4 / MOV · 最长 {REF_SECONDS_MAX[replaceMode]} 秒</span>
</div>
<label className={`video-upload-field${videoReady ? " has-file" : ""}`}>
<div
className={[
"video-upload-field",
videoReady ? "has-file" : "",
videoPreview ? "has-preview" : "",
videoDrop.dragging ? "is-dragover" : "",
].filter(Boolean).join(" ")}
{...videoDrop.dropProps}
>
<input
ref={videoInputRef}
type="file"
@@ -794,12 +919,40 @@ export function VideoReplacePage({
event.target.value = "";
}}
/>
<span>
<FileVideo2 />
<strong>{videoFile?.name || (videoReady ? "参考视频已就绪" : "点击上传参考视频")}</strong>
<small>{videoReady ? copy.videoReady : copy.videoEmpty}</small>
</span>
</label>
{videoPreview ? (
<div className="video-upload-preview">
<video src={videoPreview} controls playsInline preload="metadata" />
<div className="video-upload-preview-meta">
<strong>{videoFile?.name || filledSubjectName || "参考视频"}</strong>
<small>
{videoUploading
? "正在上传参考视频…"
: `${formatClock(videoMeta.duration)} · ${ratioCopy(aspectRatio)} · ${copy.videoReady}`}
</small>
</div>
<button
type="button"
className="video-upload-change"
disabled={generating || videoUploading}
onClick={() => videoInputRef.current?.click()}
>
<RefreshCw />
更换视频
</button>
</div>
) : (
<button
type="button"
className="video-upload-trigger"
disabled={generating}
onClick={() => videoInputRef.current?.click()}
>
<FileVideo2 />
<strong>{videoDrop.dragging ? "松开即可上传" : "点击或拖拽上传参考视频"}</strong>
<small>{copy.videoEmpty}</small>
</button>
)}
</div>
</div>
<div className="video-flow-step">
@@ -810,30 +963,34 @@ export function VideoReplacePage({
<div className="product-replace-options">
<button
type="button"
className={`replace-product-method${source === "library" ? " active" : ""}${libraryPreview ? " has-product-preview" : ""}`}
className={`replace-product-method${source === "library" ? " active" : ""}${librarySelected ? " has-product-preview" : ""}`}
onClick={() => {
if (replaceMode === "character") setPendingModelId(selectedModel?.id || "");
else setPendingProductId(selectedProduct?.id || "");
setLibraryOpen(true);
}}
>
{libraryPreview ? <img className="replace-product-method-background" src={libraryPreview} alt="" aria-hidden="true" /> : <img className="replace-product-method-background" alt="" aria-hidden="true" />}
<span className="replace-product-method-icon"><LibraryBig /></span>
<span className="replace-product-method-icon">
{librarySelected && libraryPreview
? <img src={libraryPreview} alt="" aria-hidden="true" />
: <LibraryBig />}
</span>
<span className="replace-product-method-copy">
<strong>{copy.libraryTitle}</strong>
<small>
{source === "library" && (replaceMode === "character" ? selectedModel : selectedProduct)
? `已选择 · ${replaceMode === "character" ? selectedModel?.name : selectedProduct?.title}`
: copy.libraryEmpty}
</small>
<strong>
{librarySelected
? (replaceMode === "character" ? selectedModel?.name : selectedProduct?.title)
: copy.libraryTitle}
</strong>
<small>{librarySelected ? librarySelectionDetail(replaceMode, selectedProduct, selectedModel) || copy.libraryTitle : copy.libraryEmpty}</small>
</span>
<ChevronRight />
</button>
<div
className={`replace-product-method replace-temporary-method${source === "temporary" ? " active" : ""}${tempDisplay.length ? " has-images" : ""}`}
className={`replace-product-method replace-temporary-method${source === "temporary" ? " active" : ""}${tempDisplay.length ? " has-images" : ""}${tempDrop.dragging ? " is-dragover" : ""}`}
role="button"
tabIndex={0}
{...tempDrop.dropProps}
onClick={() => tempInputRef.current?.click()}
onKeyDown={(event) => {
if (event.key === "Enter" || event.key === " ") {
@@ -846,7 +1003,13 @@ export function VideoReplacePage({
<span className="replace-product-method-icon"><Upload /></span>
<span className="replace-product-method-copy">
<strong>{copy.temporaryTitle}</strong>
<small>{tempDisplay.length ? `已上传 ${tempDisplay.length} 张${copy.temporaryNoun}` : copy.temporaryEmpty}</small>
<small>
{tempDrop.dragging
? "松开即可添加"
: tempDisplay.length
? `已上传 ${tempDisplay.length} 张${copy.temporaryNoun}`
: copy.temporaryEmpty}
</small>
</span>
<ImagePlus />
{tempDisplay.length ? (
@@ -924,7 +1087,7 @@ export function VideoReplacePage({
<button
type="button"
className="primary-action"
disabled={!videoReady || !productReady || generating}
disabled={restoring || !videoReady || !productReady || generating}
onClick={() => void startGeneration()}
>
<Replace />
@@ -934,6 +1097,13 @@ export function VideoReplacePage({
</section>
<aside className={panelClass} aria-live="polite">
<div className="replace-restoring-state" role="status" aria-live="polite">
<div className="replace-restoring-content">
<span className="replace-restoring-spinner" aria-hidden="true" />
<strong>正在读取任务状态</strong>
<span>确认有没有正在进行的复刻，稍候</span>
</div>
</div>
<div className="video-result-placeholder">
<div>
<div className="replace-placeholder-visual">