diff --git a/docs/source-analysis.html b/docs/source-analysis.html index ad81098..97ce276 100644 --- a/docs/source-analysis.html +++ b/docs/source-analysis.html @@ -588,7 +588,7 @@ web/next.config.mjsNext.js 构建配置：静态导出、图片不走优化、禁用开发环境左下角 Next Dev Indicator，并移除 Next 16 已不支持的 eslint 顶层配置，避免本地 dev 出现配置 Issue 提示。 web/app/globals.css全局主题变量、登录页视觉样式、ReactFlow 样式引用，以及本地开发态 nextjs-portal 遮挡隐藏规则。 web/app/page.tsx产品工作台主状态：jobs、activeJobId、生成任务状态；主渲染为全屏素材输入列 + 音频解析工作表；“开始”编排状态只负责在下载完成后自动触发 triggerTranscribe，不再默认触发抽帧、Vision 扫描或分镜初稿保存；底部吸附音频条不再从主界面渲染。 - web/components/ad-recreation-board.tsx信息流广告音频解析工作表：左侧素材输入；右侧展示视频下载状态、默认折叠的音频文案依据，以及统一的音频解析结果面板；面板顶部是一行讲话人/节奏/背景音摘要，下方左侧为原视频播放器、右侧为逐句时间轴，底部横向音频波形用参考图式的连续灰色包络显示响度、停顿和密集爆点。视频播放时通过 requestAnimationFrame 平滑驱动波形播放线，同时同步高亮并滚动当前句；点击音频波形或字幕行会跳转原视频时间。旧分镜卡、抽帧控制和视频生成组件仍保留在文件里，但当前主路径不渲染。 + web/components/ad-recreation-board.tsx信息流广告音频解析工作表：左侧素材输入；右侧展示视频下载状态、默认折叠的音频文案依据，以及统一的音频解析结果面板；面板顶部是一行讲话人/节奏/背景音摘要，下方左侧为原视频播放器、右侧为逐句时间轴，底部横向音频波形用参考图式的连续灰色包络显示响度、停顿和密集爆点。视频播放时通过 requestAnimationFrame 平滑驱动波形播放线，同时同步高亮并滚动当前句；点击音频波形或字幕行会跳转原视频时间。音频结果下方新增 SKG 分镜规划表：按逐句时间轴生成结构作用、SKG 新文案、画面规划、产品融入，并支持逐行定向抽参考帧。旧分镜卡、抽帧控制和视频生成组件仍保留在文件里，但当前主路径不渲染。 web/app/login/page.tsx生产登录页：访问账号/访问密钥表单、保持登录、错误/成功状态；当前只在原版 Digital Oasis 动态背景上叠加一个组合登录框，桌面端左侧是动态角色，右侧是图标化登录表单；面板左上角展示官网 SKG 字标和中文“营销内容工作台”系统标识。 web/app/login/layout.tsx登录路由专属 layout：覆盖全站默认网页标题和描述为空，避免 /login 继承工作台 metadata 后在页面源码里继续出现登录界面文字以外的文案。 web/components/login/oasis-canvas.tsx登录页全屏动态视觉层：用 iframe 直接承载下载包 web/public/oasis-source/index.html 的原 WebGPU / Three.js 草场源码；父级登录页只覆盖自己的文案和表单，并在捕获阶段把全局鼠标坐标同时用原生事件和 postMessage 转发给 iframe，避免登录面板或输入框遮挡时草地失去鼠标响应。 @@ -626,6 +626,7 @@ web/app/page.tsx -> 音频解析工作表：web/components/ad-recreation-board.tsx -> 开始：创建/激活 job → 下载完成后自动触发音频处理 -> 左侧素材输入列 + 右侧默认折叠的音频文案依据 + 统一音频解析结果面板（声音摘要在上，原视频与逐句时间轴并排，底部连续响度波形联动） + -> SKG 分镜规划表：逐句时间轴 → 结构作用 / SKG 新文案 / 画面规划 / 产品融入 → 定向抽参考帧 -> 底部音频条：不再渲染，音频结果集中到右侧工作表 -> 旧节点/深度素材面板：web/components/nodes/index.tsx、web/components/lightbox.tsx、web/components/storyboard-workbench.tsx（底层保留，当前不作为主入口） -> API 契约：web/lib/api.ts @@ -650,6 +651,11 @@ api/main.py
主要源码AudioIntakePanel / AudioIntakeStatus in web/components/ad-recreation-board.tsx；复用 triggerTranscribe 和 AudioScript。
适合怎么描述“原视频播放、连续响度波形、逐句时间轴滚动、高亮和跳转联动还需要怎么调整”。
+
+
你看到的区域SKG 分镜规划表
+
主要源码AudioStoryboardPlanPanel、buildAudioStoryboardRows in web/components/ad-recreation-board.tsx；逐行定向抽帧复用 onAddManualFrameForJob。
+
适合怎么描述“按音频逐句生成产品分镜、每行怎样改写 SKG 文案、如何定向抽帧和进入元素提取”。
+
你看到的区域旧深度素材面板（当前不作为主路径）
主要源码FrameLightbox；按“原图/清洗、主体资产、首尾帧、产品融合、审核”五个页签组织；左侧只放主图/框选画布，但主体资产页左侧改为全部已清洗/已选参考帧网格，首尾帧页左侧显示全部关键帧并可勾选人物/机位参考。主体识别页会显示透明骨架人目标和 Vision 验收分数。清洗页右侧支持一键清洗未处理帧、单张替换清洗版和一键替换全部待应用清洗版；批量替换顺序调用 applyCleanedFrame，不新增后端接口。产品融合页左侧是纵向 6 行镜头工作表：顶部选择 5 个内置透明骨架人角色之一，并常驻显示桌面四张真实 SKG 产品角度图；每行只显示已预填场景/产品使用/享受描述、秒数、生成按钮和可横向追加的视频历史结果，产品图和结果视频都支持鼠标停留放大预览。描述词内置 36 条镜头语言模板，按“建立出场、产品入画、佩戴贴合、使用感受、生活延展、收尾记忆”排列，并且会按角色自动改写场景气质、使用动作和享受状态。每行还内置角色参考图调度：例如正面/半身用于出场，侧面/背部特写用于佩戴贴合，半身/背部特写用于收尾产品记忆点。点击“换一组”只刷新 6 行描述词。四张桌面 SKG 产品图是真实产品真源，所选角色 7 张参考图是人物身份参考，生成时分别通过 copyProductLibraryAsset 与 copyCharacterLibraryAssets 自动写入当前 job；视频 prompt 要求产品作为外置刚性实物合成到后颈外侧，禁止穿模、融进透明身体或重绘产品。不再暴露产品角度槽、产品融合辅助栏、产品图库选择器或首尾帧槽。主体资产页只确认一个统一主体，后端按参考重绘六张纯背景、占满画面的标准站立透明骨架人资产图；首尾帧页保留给旧流程/单独生图，不再是产品融合必填步骤。相关接口包括 cleanupFrame、applyCleanedFrame、addElement、generateSubjectAssets、generateSceneAsset、copyProductLibraryAsset 和 copyCharacterLibraryAssets。
@@ -941,6 +947,18 @@ SubjectAsset {

变更记录

这个记录不是 git log 的替代品。它记录“产品理解发生了什么变化、影响了哪些源码、你以后描述需求时该怎么说”。后续每次改功能都要补一条。

+
+
+

2026-05-17 · 新增 SKG 分镜规划表

+ UI + Workflow +
+
+

问题：信息流复刻不应该先全量抽帧和提元素，也不能空写分镜；主线应先按音频内容规划产品分镜，再按每条分镜定向抽参考帧。

+

改动：web/components/ad-recreation-board.tsx 新增 AudioStoryboardPlanPanel：从 job.transcript 生成逐行 SKG 分镜规划表，包含时间段、原内容、结构作用、SKG 新文案、画面规划、产品融入和参考帧状态。每行“抽参考帧”调用现有手动加帧接口，在对应时间段中点抽取原视频参考帧。

+

影响：web/components/ad-recreation-board.tsx、docs/source-analysis.html。当前第一版先做前端规划和定向抽帧入口，暂不新增后端持久化字段；后续可在此表基础上接入模型改写、元素提取和单条视频生成。

+
+

2026-05-17 · 平滑音频波形播放线

diff --git a/web/components/ad-recreation-board.tsx b/web/components/ad-recreation-board.tsx index cf20709..cdbbcfd 100644 --- a/web/components/ad-recreation-board.tsx +++ b/web/components/ad-recreation-board.tsx @@ -66,6 +66,19 @@ type AudioFeature = { type AudioFeatureStatus = "idle" | "loading" | "ready" | "failed" +type AudioStoryboardRow = { + index: number + start: number + end: number + source: string + role: string + skgCopy: string + visualPlan: string + referencePlan: string + keyElements: string + productIntegration: string +} + const controlClass = "h-10 rounded-md border border-white/10 bg-black/55 px-3 text-[12px] text-white outline-none transition focus:border-cyan-300/60 disabled:cursor-not-allowed disabled:opacity-40" @@ -205,6 +218,75 @@ function buildFallbackScene(job: Job, frame: KeyFrame, order: number): Storyboar } } +function classifyAudioRole(text: string, index: number, total: number) { + const lower = text.toLowerCase() + if (index === 0) return "开场钩子" + if (index >= total - 2 || /discount|code|shipping|link|limited|sold out|grab|recommend|tiktok/.test(lower)) return "转化收口" + if (/can't|dont|don't|if |when |tired|stress|pain|crave|bloated|puffy|ready/.test(lower)) return "痛点推进" + if (/help|can |reduce|improve|relax|lower|stabilize|clear|less/.test(lower)) return "利益证明" + if (/use|try|apple|product|bottle|one month/.test(lower)) return "方案过渡" + return "节奏承接" +} + +function buildSkgCopy(role: string, index: number) { + const variants: Record = { + "开场钩子": [ + "如果你也经常低头刷手机、久坐办公，肩颈紧绷可能已经在悄悄影响状态。", + "每天盯屏几个小时，脖子和肩膀的疲惫会比你想得更早出现。", + ], + "痛点推进": [ + "脖子发紧、肩膀沉、抬头不舒服，不一定要等到很难受才处理。", + "通勤、办公、带娃、刷手机叠在一起，肩颈很容易一直处在紧绷状态。", + ], + "利益证明": [ + "SKG 颈部按摩仪贴合后颈和肩颈两侧，把热敷感和揉按感带到真正紧的位置。", + "戴上后不用占手，工作间隙、居家放松、睡前都能快速进入舒缓节奏。", + ], + "方案过渡": [ + "这一镜把原片的讲解节奏换成 SKG 使用步骤：拿起、佩戴、贴合、放松。", + "让产品自然进入画面，重点不是硬推，而是把肩颈紧绷到放松的变化拍清楚。", + ], + "转化收口": [ + "如果你也想把肩颈放松变成日常习惯，可以先从这台 SKG 开始。", + "最后用清晰产品特写和轻松状态收住，让用户知道现在就可以入手。", + ], + "节奏承接": [ + "延续原片短句快节奏，把每一句都落到一个具体肩颈场景或产品动作。", + "这一句作为过渡，画面从痛点切到产品，让节奏继续往下走。", + ], + } + const list = variants[role] ?? variants["节奏承接"] + return list[index % list.length] +} + +function buildVisualPlan(role: string) { + if (role === "开场钩子") return "竖屏近景口播开场，人物轻揉脖子或转动肩颈，直接建立疲惫感。" + if (role === "痛点推进") return "沿用原视频的表情、手势和节奏，画面强调低头、久坐、肩颈紧绷。" + if (role === "利益证明") return "产品进入画面并佩戴到后颈，切到肩颈贴合、按键、热敷/揉按感的细节。" + if (role === "转化收口") return "产品清晰特写 + 人物放松表情收尾，保留信息流广告的快速行动感。" + return "保持原片同类构图和运镜，把画面内容替换成 SKG 肩颈放松场景。" +} + +function buildAudioStoryboardRows(job: Job | null): AudioStoryboardRow[] { + if (!job?.transcript.length) return [] + return job.transcript.map((segment, index) => { + const source = segment.zh?.trim() || segment.en?.trim() || "原音频文案待补充" + const role = classifyAudioRole(`${segment.en} ${segment.zh}`, index, job.transcript.length) + return { + index: segment.index, + start: segment.start, + end: segment.end, + source, + role, + skgCopy: buildSkgCopy(role, index), + visualPlan: buildVisualPlan(role), + referencePlan: `从原视频 ${segment.start.toFixed(1)}-${segment.end.toFixed(1)}s 定向抽 1-2 张参考帧。`, + keyElements: role === "利益证明" ? "佩戴动作、产品位置、手部按键、放松表情" : "口播构图、人物动作、表情节奏、场景光线", + productIntegration: "把原片产品/道具语境替换为 SKG 白色 U 形颈部按摩仪，产品必须外置佩戴在肩颈位置。", + } + }) +} + export function AdRecreationBoard({ data, onGenerateVideo, @@ -461,6 +543,11 @@ export function AdRecreationBoard({
+
@@ -794,6 +881,128 @@ function AudioIntakePanel({ job }: { job: Job | null }) { ) } +function AudioStoryboardPlanPanel({ + job, + onAddFrame, + onOpenFrame, +}: { + job: Job | null + onAddFrame?: (jobId: string, t: number) => Promise | void + onOpenFrame?: (idx: number) => void +}) { + const [busyRow, setBusyRow] = useState(null) + const rows = useMemo(() => buildAudioStoryboardRows(job), [job]) + const orderedFrames = useMemo(() => job ? [...job.frames].sort((a, b) => a.timestamp - b.timestamp) : [], [job]) + + const framesForRow = (row: AudioStoryboardRow) => + orderedFrames.filter((frame) => frame.timestamp >= row.start - 0.2 && frame.timestamp <= row.end + 0.2).slice(0, 3) + + const addReferenceFrame = async (row: AudioStoryboardRow) => { + if (!job || !onAddFrame) return + const t = clampNumber((row.start + row.end) / 2, 0, Math.max(job.duration || row.end, row.end)) + setBusyRow(row.index) + try { + await onAddFrame(job.id, t) + } finally { + setBusyRow(null) + } + } + + if (!job) return null + + return ( +
+
+
+ } title="SKG 分镜规划表" /> +

先按音频内容规划产品分镜，再按每条分镜定向抽参考帧和关键元素。

+
+
+ 0} detail={rows.length ? `${rows.length} 条` : "待音频"} /> + 0} detail={orderedFrames.length ? `${orderedFrames.length} 张` : "待抽帧"} /> + 0} detail="先规划" /> +
+
+ + {rows.length ? ( +
+
+
时间
+
结构
+
原内容
+
SKG 新文案
+
画面规划 / 产品融入
+
参考帧
+
下一步
+
+
+ {rows.map((row) => { + const refs = framesForRow(row) + const busy = busyRow === row.index + return ( +
+
{row.start.toFixed(1)}-{row.end.toFixed(1)}s
+
+ {row.role} +
+
{row.source}
+
{row.skgCopy}
+
+
{row.visualPlan}
+
+ + {row.productIntegration} +
+
+
+ {refs.length ? ( +
+ {refs.map((frame) => ( + + ))} +
+ ) : ( + {row.referencePlan} + )} +
+
+ +
+ + {refs.length ? "下一步提元素" : "先抽帧"} +
+
+
+ ) + })} +
+
+ ) : ( + + )} +
+ ) +} + function AudioWaveform({ features, status,