feat: move material intake into sidebar
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -2478,17 +2478,34 @@ export function AdRecreationBoard({
|
|||||||
<div className="skg-board-ambient pointer-events-none fixed inset-0" />
|
<div className="skg-board-ambient pointer-events-none fixed inset-0" />
|
||||||
<div className="relative z-10 mx-auto min-h-screen w-full min-w-[1280px] max-w-[1920px] px-4 py-4 xl:px-5">
|
<div className="relative z-10 mx-auto min-h-screen w-full min-w-[1280px] max-w-[1920px] px-4 py-4 xl:px-5">
|
||||||
<div className="skg-board-shell flex gap-4 p-4">
|
<div className="skg-board-shell flex gap-4 p-4">
|
||||||
<WorkbenchRail
|
<div className="flex shrink-0 gap-3 self-stretch">
|
||||||
job={job}
|
<WorkbenchRail
|
||||||
jobsCount={jobs.length}
|
job={job}
|
||||||
audioReady={audioReady}
|
jobsCount={jobs.length}
|
||||||
visualReady={visualReady}
|
audioReady={audioReady}
|
||||||
subjectAssetCount={subjectAssetCount}
|
visualReady={visualReady}
|
||||||
generatedVideoCount={generatedVideos.length}
|
subjectAssetCount={subjectAssetCount}
|
||||||
onOpenLibrary={() => setLibraryOpen(true)}
|
generatedVideoCount={generatedVideos.length}
|
||||||
onToggleTheme={toggleBoardTheme}
|
onOpenLibrary={() => setLibraryOpen(true)}
|
||||||
boardTheme={boardTheme}
|
onToggleTheme={toggleBoardTheme}
|
||||||
/>
|
boardTheme={boardTheme}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="w-[320px] shrink-0">
|
||||||
|
<MaterialColumn
|
||||||
|
data={data}
|
||||||
|
step={workflow.input}
|
||||||
|
jobs={jobs}
|
||||||
|
job={job}
|
||||||
|
activeJobId={activeJobId}
|
||||||
|
url={url}
|
||||||
|
setUrl={setUrl}
|
||||||
|
fileRef={fileRef}
|
||||||
|
onSubmitUrl={submitUrl}
|
||||||
|
onStartProduction={startProduction}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex min-w-0 flex-1 flex-col gap-3">
|
<div className="flex min-w-0 flex-1 flex-col gap-3">
|
||||||
<header className="skg-board-topbar flex items-center justify-between gap-4 rounded-[20px] border border-white/10 bg-white/[0.04] px-4 py-3">
|
<header className="skg-board-topbar flex items-center justify-between gap-4 rounded-[20px] border border-white/10 bg-white/[0.04] px-4 py-3">
|
||||||
@@ -2502,7 +2519,7 @@ export function AdRecreationBoard({
|
|||||||
</div>
|
</div>
|
||||||
<p className="mt-2 truncate text-[12px] text-white/42">源视频分析、转换层确认、主体套图、逐句分镜和视频候选集中生产。</p>
|
<p className="mt-2 truncate text-[12px] text-white/42">源视频分析、转换层确认、主体套图、逐句分镜和视频候选集中生产。</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid min-w-[560px] grid-cols-5 gap-2 text-[11px]">
|
<div className="grid min-w-[440px] grid-cols-5 gap-2 text-[11px]">
|
||||||
<Metric label="素材" value={`${jobs.length}`} />
|
<Metric label="素材" value={`${jobs.length}`} />
|
||||||
<Metric label="当前" value={shortId(activeJobId)} />
|
<Metric label="当前" value={shortId(activeJobId)} />
|
||||||
<Metric label="视频" value={job?.video_url ? "ready" : "-"} />
|
<Metric label="视频" value={job?.video_url ? "ready" : "-"} />
|
||||||
@@ -2511,67 +2528,52 @@ export function AdRecreationBoard({
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div className="grid min-h-0 flex-1 grid-cols-[340px_minmax(0,1fr)] gap-3">
|
<section className="skg-board-panel flex min-h-0 flex-1 flex-col rounded-[20px] border border-white/10 bg-white/[0.035] shadow-2xl">
|
||||||
<MaterialColumn
|
<header className="shrink-0 border-b border-white/10 p-3">
|
||||||
data={data}
|
<div className="flex items-center justify-between gap-4">
|
||||||
step={workflow.input}
|
<div className="min-w-0">
|
||||||
jobs={jobs}
|
<div className="flex items-center gap-2">
|
||||||
job={job}
|
<span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/12 bg-white/[0.07] text-[#c8cd19]"><Mic className="h-4 w-4" /></span>
|
||||||
activeJobId={activeJobId}
|
<WorkflowStepBadge step={workflow.source} compact />
|
||||||
url={url}
|
<h2 className="text-[15px] font-semibold leading-tight text-white">视频拆解</h2>
|
||||||
setUrl={setUrl}
|
|
||||||
fileRef={fileRef}
|
|
||||||
onSubmitUrl={submitUrl}
|
|
||||||
onStartProduction={startProduction}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<section className="skg-board-panel flex min-h-0 flex-col rounded-[20px] border border-white/10 bg-white/[0.035] shadow-2xl">
|
|
||||||
<header className="shrink-0 border-b border-white/10 p-3">
|
|
||||||
<div className="flex items-center justify-between gap-4">
|
|
||||||
<div className="min-w-0">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/12 bg-white/[0.07] text-[#c8cd19]"><Mic className="h-4 w-4" /></span>
|
|
||||||
<WorkflowStepBadge step={workflow.source} compact />
|
|
||||||
<h2 className="text-[15px] font-semibold leading-tight text-white">视频拆解</h2>
|
|
||||||
</div>
|
|
||||||
<div className="mt-1 truncate text-[11px] text-white/38" title={statusMessage}>
|
|
||||||
{statusMessage || "下载源视频后解析音频，再抽参考帧并生成相似主体。"}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex shrink-0 items-center gap-2">
|
<div className="mt-1 truncate text-[11px] text-white/38" title={statusMessage}>
|
||||||
<ModelTrace trace={audioModelTrace(runtimeModels)} compact />
|
{statusMessage || "下载源视频后解析音频，再抽参考帧并生成相似主体。"}
|
||||||
<ActionButton disabled={!job?.video_url || audioRunning} onClick={() => data.onTranscribeAudio?.(job?.id)}>
|
|
||||||
<Mic className="h-3.5 w-3.5" />
|
|
||||||
解析音频
|
|
||||||
</ActionButton>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
<div className="flex shrink-0 items-center gap-2">
|
||||||
|
<ModelTrace trace={audioModelTrace(runtimeModels)} compact />
|
||||||
<div className="min-h-0 flex-1 overflow-y-auto p-4">
|
<ActionButton disabled={!job?.video_url || audioRunning} onClick={() => data.onTranscribeAudio?.(job?.id)}>
|
||||||
<AudioIntakePanel
|
<Mic className="h-3.5 w-3.5" />
|
||||||
job={job}
|
解析音频
|
||||||
selectedFrames={data.selectedFrames}
|
</ActionButton>
|
||||||
onToggleFrame={data.onToggleFrame}
|
</div>
|
||||||
onJobUpdate={data.onJobUpdate}
|
|
||||||
onAddFrame={data.onAddManualFrameForJob}
|
|
||||||
onDeleteFrame={data.onDeleteFrameForJob}
|
|
||||||
runtimeModels={runtimeModels}
|
|
||||||
/>
|
|
||||||
<AudioStoryboardPlanPanel
|
|
||||||
job={job}
|
|
||||||
selectedFrames={data.selectedFrames}
|
|
||||||
onJobUpdate={data.onJobUpdate}
|
|
||||||
onDeleteVideo={data.onDeleteVideo}
|
|
||||||
runtimeModels={runtimeModels}
|
|
||||||
productStep={workflow.product}
|
|
||||||
scriptStep={workflow.script}
|
|
||||||
sceneStep={workflow.scene}
|
|
||||||
videoStep={workflow.video}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</header>
|
||||||
</div>
|
|
||||||
|
<div className="min-h-0 flex-1 overflow-y-auto p-4">
|
||||||
|
<AudioIntakePanel
|
||||||
|
job={job}
|
||||||
|
selectedFrames={data.selectedFrames}
|
||||||
|
onToggleFrame={data.onToggleFrame}
|
||||||
|
onJobUpdate={data.onJobUpdate}
|
||||||
|
onAddFrame={data.onAddManualFrameForJob}
|
||||||
|
onDeleteFrame={data.onDeleteFrameForJob}
|
||||||
|
runtimeModels={runtimeModels}
|
||||||
|
/>
|
||||||
|
<AudioStoryboardPlanPanel
|
||||||
|
job={job}
|
||||||
|
selectedFrames={data.selectedFrames}
|
||||||
|
onJobUpdate={data.onJobUpdate}
|
||||||
|
onDeleteVideo={data.onDeleteVideo}
|
||||||
|
runtimeModels={runtimeModels}
|
||||||
|
productStep={workflow.product}
|
||||||
|
scriptStep={workflow.script}
|
||||||
|
sceneStep={workflow.scene}
|
||||||
|
videoStep={workflow.video}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -2683,7 +2685,7 @@ function MaterialColumn({
|
|||||||
? job.video_url ? "重新解析" : "重新下载"
|
? job.video_url ? "重新解析" : "重新下载"
|
||||||
: "开始分析"
|
: "开始分析"
|
||||||
return (
|
return (
|
||||||
<section className="skg-board-panel flex min-h-0 flex-col gap-3 rounded-[20px] border border-white/10 bg-white/[0.035] p-3 shadow-2xl">
|
<section className="skg-board-panel flex h-full min-h-[514px] flex-col gap-3 rounded-[20px] border border-white/10 bg-white/[0.035] p-3 shadow-2xl">
|
||||||
<header className="shrink-0 border-b border-white/10 pb-3">
|
<header className="shrink-0 border-b border-white/10 pb-3">
|
||||||
<div className="mb-2 flex items-center gap-2">
|
<div className="mb-2 flex items-center gap-2">
|
||||||
<span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/12 bg-white/[0.07] text-[#c8cd19]"><Plus className="h-4 w-4" /></span>
|
<span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/12 bg-white/[0.07] text-[#c8cd19]"><Plus className="h-4 w-4" /></span>
|
||||||
|
|||||||
Reference in New Issue
Block a user