添加视频复刻和优化脚本旁白
This commit is contained in:
Azmat@qq.com
@@ -0,0 +1,324 @@
|
||||
// 视频复刻 · 上传参考视频 → 视频提炼接口 → 可编辑提示词。
|
||||
// 拆解跟生成脚本同一套接口口径:模型下拉 + Gemini 3.1 Pro 官转看图。
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { ArrowLeft, ArrowRight, FileVideo, Save, ScanLine, ScanSearch } from "lucide-react";
|
||||
import { api } from "../api";
|
||||
import { publicModelDisplayName } from "../model-display";
|
||||
import type { ModelConfig } from "../types";
|
||||
import type { NavigateFn } from "./route-config";
|
||||
|
||||
export const REMIX_PROMPT_KEY = "fc-remix-prompt";
|
||||
const REMIX_DRAFT_KEY = "vr-digest-draft";
|
||||
|
||||
type RemixDraft = {
|
||||
prompt: string;
|
||||
duration: number;
|
||||
shots: number;
|
||||
rhythm: string;
|
||||
fileName: string;
|
||||
fileSize: number;
|
||||
modelId: string;
|
||||
};
|
||||
|
||||
function loadDraft(): RemixDraft | null {
|
||||
try {
|
||||
const raw = localStorage.getItem(REMIX_DRAFT_KEY);
|
||||
if (!raw) return null;
|
||||
const draft = JSON.parse(raw) as RemixDraft;
|
||||
if (typeof draft.prompt !== "string" || !draft.prompt.trim()) return null;
|
||||
return draft;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function saveDraft(draft: RemixDraft) {
|
||||
try {
|
||||
localStorage.setItem(REMIX_DRAFT_KEY, JSON.stringify(draft));
|
||||
localStorage.setItem(REMIX_PROMPT_KEY, draft.prompt);
|
||||
} catch {
|
||||
/* 隐私模式写满时静默,内存态仍可用 */
|
||||
}
|
||||
}
|
||||
|
||||
const VIDEO_DIGEST_MAX_BYTES = 200 * 1024 * 1024;
|
||||
|
||||
function formatSize(bytes: number) {
|
||||
if (bytes < 1024 * 1024) return `${Math.max(1, Math.round(bytes / 1024))} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function shotCount(text: string, frames: number) {
|
||||
const marks = text.match(/【第\s*\d+\s*镜】/g);
|
||||
return marks?.length || frames || 0;
|
||||
}
|
||||
|
||||
function rhythmCopy(text: string) {
|
||||
if (/快节奏|紧凑/.test(text)) return "快节奏种草";
|
||||
if (/慢节奏|舒缓/.test(text)) return "慢节奏展示";
|
||||
const form = text.match(/形式[：:]\s*([^\n]+)/);
|
||||
if (form?.[1]) return form[1].trim().slice(0, 12);
|
||||
return "按参考片节奏";
|
||||
}
|
||||
|
||||
function isGemini31(model: ModelConfig) {
|
||||
const blob = `${model.name} ${model.display_name}`.toLowerCase();
|
||||
return blob.includes("gemini-3.1") || blob.includes("gemini 3.1") || model.name === "gemini-3.1-pro-preview";
|
||||
}
|
||||
|
||||
function pickDigestModel(models: ModelConfig[]) {
|
||||
const active = models.filter((model) => model.status === "active" && isGemini31(model));
|
||||
return (
|
||||
active.find((model) => /官转/.test(model.display_name))
|
||||
|| active.find((model) => model.name === "gemini-3.1-pro-preview")
|
||||
|| active[0]
|
||||
|| null
|
||||
);
|
||||
}
|
||||
|
||||
export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }: {
|
||||
textModels?: ModelConfig[];
|
||||
onNotify: (type: "success" | "error" | "info", text: string) => void;
|
||||
onBack: () => void;
|
||||
navigate: NavigateFn;
|
||||
}) {
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [draft] = useState(loadDraft);
|
||||
const [prompt, setPrompt] = useState(draft?.prompt || "");
|
||||
const [duration, setDuration] = useState(draft?.duration || 0);
|
||||
const [shots, setShots] = useState(draft?.shots || 0);
|
||||
const [rhythm, setRhythm] = useState(draft?.rhythm || "");
|
||||
const [fileName, setFileName] = useState(draft?.fileName || "");
|
||||
const [fileSize, setFileSize] = useState(draft?.fileSize || 0);
|
||||
const [modelId, setModelId] = useState(draft?.modelId || "");
|
||||
const [modelMenuOpen, setModelMenuOpen] = useState(false);
|
||||
const done = prompt.length > 0;
|
||||
|
||||
const digestModels = useMemo(
|
||||
() => textModels.filter((model) => model.status === "active" && isGemini31(model)),
|
||||
[textModels]
|
||||
);
|
||||
const defaultModel = useMemo(() => pickDigestModel(digestModels), [digestModels]);
|
||||
const activeModelId = modelId || defaultModel?.id || "";
|
||||
const activeModel = digestModels.find((model) => model.id === activeModelId) || defaultModel;
|
||||
const activeModelName = publicModelDisplayName(activeModel, "Gemini 3.1 Pro 官转");
|
||||
const estimatedPoints = Math.round(Number(activeModel?.unit_price || 0));
|
||||
|
||||
useEffect(() => {
|
||||
if (!modelMenuOpen) return;
|
||||
const close = (event: MouseEvent) => {
|
||||
if (!(event.target as HTMLElement).closest(".vr-model-pick")) setModelMenuOpen(false);
|
||||
};
|
||||
document.addEventListener("click", close);
|
||||
return () => document.removeEventListener("click", close);
|
||||
}, [modelMenuOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!prompt.trim()) return;
|
||||
saveDraft({
|
||||
prompt,
|
||||
duration,
|
||||
shots,
|
||||
rhythm,
|
||||
fileName: file?.name || fileName,
|
||||
fileSize: file?.size || fileSize,
|
||||
modelId: activeModelId,
|
||||
});
|
||||
}, [prompt, duration, shots, rhythm, file, fileName, fileSize, activeModelId]);
|
||||
|
||||
const pickFile = (next: File | null) => {
|
||||
if (!next) return;
|
||||
if (!/\.(mp4|mov|m4v|webm)$/i.test(next.name)) {
|
||||
onNotify("error", "只支持 mp4 / mov / m4v / webm 四种视频格式");
|
||||
return;
|
||||
}
|
||||
if (next.size > VIDEO_DIGEST_MAX_BYTES) {
|
||||
onNotify("error", "视频不能超过 200MB,请压缩后再传");
|
||||
return;
|
||||
}
|
||||
setFile(next);
|
||||
setFileName(next.name);
|
||||
setFileSize(next.size);
|
||||
};
|
||||
|
||||
const analyze = async () => {
|
||||
if (!file || busy) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append("file", file);
|
||||
if (activeModelId) fd.append("model_config_id", activeModelId);
|
||||
const digest = await api.extractVideoDigest(fd);
|
||||
const text = digest.text.trim();
|
||||
setPrompt(text);
|
||||
setDuration(digest.duration);
|
||||
setShots(shotCount(text, digest.frames));
|
||||
setRhythm(rhythmCopy(text));
|
||||
setFileName(file.name);
|
||||
setFileSize(file.size);
|
||||
onNotify("success", `已拆出 ${digest.duration} 秒 · 取了 ${digest.frames} 帧,请先逐镜核对`);
|
||||
} catch (error) {
|
||||
onNotify("error", error instanceof Error && error.message ? error.message : "视频拆解失败，请重试");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const savePrompt = async () => {
|
||||
const text = prompt.trim();
|
||||
if (!text) return;
|
||||
sessionStorage.setItem(REMIX_PROMPT_KEY, text);
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
onNotify("success", "提示词已保存，可继续生成或直接粘贴");
|
||||
} catch {
|
||||
onNotify("success", "提示词已保存，可继续生成视频");
|
||||
}
|
||||
};
|
||||
|
||||
const continueGenerate = () => {
|
||||
const text = prompt.trim();
|
||||
if (!text) return;
|
||||
sessionStorage.setItem(REMIX_PROMPT_KEY, text);
|
||||
navigate("freeCreate");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="vr-page">
|
||||
<div className="vr-inner">
|
||||
<header className="page-head">
|
||||
<div className="vr-title-row">
|
||||
<button type="button" className="btn btn-ghost vr-back" aria-label="返回上一入口页面" onClick={onBack}>
|
||||
<ArrowLeft />
|
||||
</button>
|
||||
<div>
|
||||
<h1>视频复刻</h1>
|
||||
<div className="sub">
|
||||
上传参考视频，拆解镜头、动作、运镜和节奏，生成可编辑提示词
|
||||
<span className="mono">[ /remix ]</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="vr-grid">
|
||||
<section className="vr-panel">
|
||||
<div className="section-h">
|
||||
<h2>上传参考视频</h2>
|
||||
<span className="more">// 视频提炼</span>
|
||||
</div>
|
||||
<p className="vr-lead">建议使用主体清晰、镜头完整的电商短视频。拆解稿会落在右侧，先逐镜改完再去生成。</p>
|
||||
<div className="vr-step">
|
||||
<div className="vr-step-h">
|
||||
<strong>参考视频</strong>
|
||||
<span>MP4 / MOV · 最长 3 分钟 · 200MB</span>
|
||||
</div>
|
||||
<label className={`vr-upload${file ? " has-file" : ""}`}>
|
||||
<input
|
||||
type="file"
|
||||
accept="video/mp4,video/quicktime,.mp4,.mov,.m4v,.webm"
|
||||
hidden
|
||||
onChange={(event) => {
|
||||
pickFile(event.target.files?.[0] || null);
|
||||
event.target.value = "";
|
||||
}}
|
||||
/>
|
||||
<span>
|
||||
<FileVideo />
|
||||
<strong>{file?.name || fileName || "点击上传参考视频"}</strong>
|
||||
<small>
|
||||
{file
|
||||
? `${formatSize(file.size)} · 视频已就绪，可开始拆解`
|
||||
: fileName
|
||||
? `${formatSize(fileSize)} · 上次拆解还在，刷新不会丢。要重拆请再选一次文件`
|
||||
: "上传后抽帧拆解镜头结构与节奏"}
|
||||
</small>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="vr-actions">
|
||||
<div className="vr-meta">
|
||||
{digestModels.length > 0 ? (
|
||||
<div className={`chip-wrap vr-model-pick${modelMenuOpen ? " open" : ""}`}>
|
||||
<button type="button" className="chip" title="选择视频提炼模型" onClick={() => setModelMenuOpen((open) => !open)}>
|
||||
{activeModelName}
|
||||
<svg className="caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6" /></svg>
|
||||
</button>
|
||||
<div className="chip-menu">
|
||||
{digestModels.map((model) => (
|
||||
<div
|
||||
key={model.id}
|
||||
className={`mi${model.id === activeModelId ? " selected" : ""}`}
|
||||
role="menuitemradio"
|
||||
aria-checked={model.id === activeModelId}
|
||||
tabIndex={0}
|
||||
onClick={() => { setModelId(model.id); setModelMenuOpen(false); }}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter" || event.key === " ") {
|
||||
event.preventDefault();
|
||||
setModelId(model.id);
|
||||
setModelMenuOpen(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{publicModelDisplayName(model)}
|
||||
<svg className="mi-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<span>{estimatedPoints > 0 ? `视频解析预计消耗 ${estimatedPoints} 积分` : "视频解析按一次文本模型计费"}</span>
|
||||
</div>
|
||||
<button type="button" className="btn btn-primary" disabled={!file || busy} onClick={() => void analyze()}>
|
||||
{busy ? <span className="spinner" aria-hidden="true" /> : <ScanSearch />}
|
||||
<span>{busy ? "正在拆解…" : done ? "重新拆解" : "开始拆解"}</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside className={`vr-result${done ? " has-result" : ""}`}>
|
||||
{!done ? (
|
||||
<div className="vr-placeholder">
|
||||
<div>
|
||||
<ScanLine />
|
||||
<strong>{busy ? "正在抽帧拆解这条视频" : "等待视频解析"}</strong>
|
||||
<span>{busy ? "大约需要半分钟。拆解稿会落在这里，请先逐镜核对再去生成。" : "完成后将在这里展示镜头摘要和复刻提示词"}</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="vr-analysis">
|
||||
<div className="section-h">
|
||||
<h2>视频拆解完成</h2>
|
||||
<span className="more">[ {shots} SHOTS ]</span>
|
||||
</div>
|
||||
<p className="vr-lead">已识别 {shots} 个镜头。拆解必然有错，先改「拆解存疑」再继续生成。</p>
|
||||
<div className="vr-summary">
|
||||
<span>视频时长<strong>{duration} 秒</strong></span>
|
||||
<span>镜头数量<strong>{shots} 镜</strong></span>
|
||||
<span>内容节奏<strong>{rhythm}</strong></span>
|
||||
</div>
|
||||
<textarea
|
||||
className="textarea vr-prompt"
|
||||
value={prompt}
|
||||
onChange={(event) => setPrompt(event.target.value)}
|
||||
/>
|
||||
<div className="vr-actions">
|
||||
<button type="button" className="btn" onClick={() => void savePrompt()}>
|
||||
<Save />
|
||||
保存提示词
|
||||
</button>
|
||||
<button type="button" className="btn btn-primary" onClick={continueGenerate}>
|
||||
<span>继续生成视频</span>
|
||||
<ArrowRight />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user