diff --git a/RULES.md b/RULES.md index 5458dd6..dc45301 100644 --- a/RULES.md +++ b/RULES.md @@ -15,7 +15,7 @@ ## 部署事实 - 平台：VPS `76.13.31.179`（Ubuntu 24.04 / Docker Compose / Coolify Traefik） -- 发布状态：已部署并验证（2026-05-19，右侧三栏主体管线：竖向参考帧池 + 转换层 + 主体元素，旧主体模板区移出主路径 + 逐句时间轴移到原版视频下方并支持双行文案 + 波形同框时间对齐画面胶片 + 胶片密度按钮上移波形顶部 + 去分隔线 + 胶片上下错落 + body 顶层原位大放大 + 隐藏源视频工作区音频解析摘要卡 + 隐藏工作区顶部状态提示条 + 三字段候选生成工作流 + 折叠紧凑候选区）；`https://marketing.skg.com` 已启用应用内登录页，未登录 API 返回 401，认证后首页 200；容器内 `/health` 返回 `ok:true` +- 发布状态：已部署并验证（2026-05-19，右侧三栏主体管线：竖向参考帧池 + 转换层 + 主体元素，参考帧缩略图填充裁切 + hover 左侧紧凑预览 + 转换层多参考滚动，旧主体模板区移出主路径 + 逐句时间轴移到原版视频下方并支持双行文案 + 波形同框时间对齐画面胶片 + 胶片密度按钮上移波形顶部 + 去分隔线 + 胶片上下错落 + body 顶层原位大放大 + 隐藏源视频工作区音频解析摘要卡 + 隐藏工作区顶部状态提示条 + 三字段候选生成工作流 + 折叠紧凑候选区）；`https://marketing.skg.com` 已启用应用内登录页，未登录 API 返回 401，认证后首页 200；容器内 `/health` 返回 `ok:true` - 主站 / 前端：`https://marketing.skg.com` - API / 后端：`https://marketing.skg.com/api` - 代码仓库 / Gitea：`https://git.kang-kang.com/kangwan/20260512-skg-tk` diff --git a/docs/source-analysis.html b/docs/source-analysis.html index ae4e689..1cf6391 100644 --- a/docs/source-analysis.html +++ b/docs/source-analysis.html @@ -594,12 +594,12 @@ web/app/globals.css全局主题变量、登录页视觉样式、信息流工作台同源品牌 token、ReactFlow 样式引用，以及本地开发态 nextjs-portal 遮挡隐藏规则。工作台在 skg-board-theme 内定义 --skg-gold-1、--skg-gold-2、--skg-cream、--skg-bg-*、--skg-text-*、--skg-radius-* 和按钮阴影等变量，并新增 skg-board-brand、skg-stat-card、skg-primary-action、skg-secondary-action、skg-empty-state 等样式。暗色工作台复用登录页金色聚焦、米白主按钮和弱暖光氛围；明亮模式通过 skg-board-theme--light 复用同一套结构，改成暖白底、白色 panel、黑底主 CTA 和深色文本，不另起一套界面。 web/app/page.tsx产品工作台主状态：jobs、activeJobId、生成任务状态；主渲染为全屏素材输入列 + 信息流广告复刻工作表；“开始分析”会把 job 放入并行素材分析队列，下载完成后触发 triggerTranscribe 解析音频，并触发 analyzeJob 自动抽 12 张参考帧，形成“音频文案路 + 视频视觉路”同步推进；底部吸附音频条和旧全局浮动主题按钮不再从主界面渲染，避免和工作台内的明暗模式切换重复。 web/components/ad-recreation-board.tsx信息流广告复刻工作表：顶部先展示与登录页连续的 SKG brand strip，包含 SKG 字标、“未来健康 · 营销内容工作台”和“营销内容工作台 · TK 二创”；右侧素材/任务/视频/文案统计改为米白 stat 卡片，主动作按钮统一走 skg-primary-action，次动作走 skg-secondary-action，空状态复用 AnimatedLoginCharacters。buildWorkflowSteps 仍统一生成 01-09 流程顺序、状态和判定依据，WorkflowStepBadge / PipelineLane / 分镜列标题也继续共用同一套编号；但完整 WorkflowOrderBar、右侧素材/视频/音频/文案/参考帧需求 chips、文案依据下拉和“音频文案、抽帧参考、相似主体、产品素材池”四个状态条不再默认渲染在工作区顶部。左侧素材输入只负责链接/上传和任务切换，不再重复放横版原视频预览；右侧源视频工作区直接进入核心操作。讲话人、节奏和背景音分析仍写入 AudioScript，但不再作为“音频解析结果”卡片默认渲染；主工作区左侧宽度调整为 430-460px，上方是按 9:16 显示的竖版原视频播放器，播放器内覆盖“当前点抽帧”，按当前播放秒数手动补参考帧，播放器下方是逐句时间轴，英文和中文都最多显示两行；右侧上方是无标题的波形与切点参考框，下方是参考帧池；下一行只保留“相似主体 / 主体模板”。音频波形用参考图式的连续灰色包络显示响度、停顿和密集爆点，顶部把低/中/高密度按钮和当前播放秒数、总时长、鼠标指针停点秒数直接放在波形上方。视频播放时通过 requestAnimationFrame 平滑驱动波形播放线，同时同步高亮并滚动当前句；点击音频波形或字幕行会跳转原视频时间。音频波形下方同框渲染无标题的 TimelineFilmstrip 临时画面胶片，前端按低/中/高密度从源视频 canvas 截取预览缩略图，并按 frame.time / duration 的百分比定位到和波形同一条时间轴上；波形与胶片之间不显示分隔横线，胶片轨道贴近波形，缩略图轻微上下错落并倾斜重叠排列，hover 时用同一张胶片卡在原位置生成固定顶层克隆，约 4.8 倍放大并自动限制在视口内，避免被工作区、滚动容器或相邻面板遮挡；点击胶片只跳转原视频时间，不写入任务数据，只有拖进 SourceKeyframePicker 参考帧池时才调用手动抽帧并正式加入 job.frames。右侧参考帧池的主入口是“自动抽帧 12 张”，一键按动作峰值目标重新抽取 12 张源视频参考帧，优先抓手势、表情变化、节奏点和镜头变化；缩略图按竖版完整比例显示不裁切并用更多列紧凑铺开，点选状态直接叠在参考帧池缩略图上，鼠标停留会通过固定浮层放大展示完整帧。“生成 10 张高清图”放在下方相似主体白底视图区，不和抽参考按钮平齐；如果用户没有勾选帧，默认把全部关键帧作为主体参考，勾选后只传已选帧；生成区可在“透明骨架 / 普通真人”之间切换，可选择桌面导入的 5 套内置形象作为创意方向，并可填写统一主体方向，例如年轻女性、更运动、更高级。关键帧和相似主体白底视图都用更小的竖版缩略图密排；白底视图只展示每个 view 的最新一张，缩略图上提供“重新生成这一张”和“删除这一张”，单张重生会用 replace_views=true 替换同一视角。前端调用 generateSubjectAssets 时按主体类型传 subject_style=transparent_human 或 source_actor，按需传 character_id，并使用 reconstruction_mode=similar；后端会把关键帧和内置形象视为同一个主体的创意证据，并锁定同一性别表现、年龄段、体型、材质、风格和视觉身份，同时生成全身多视角 + 肩颈正/左右近景 + 后颈肩背特写，避免整套图出现男女性别、老少年龄或样式混杂。主体生成完成后会形成 subject_consensus_brief，主体模板保存区可预览/编辑这段 brief。音频结果下方是信息流复刻分镜工作台：顶部产品参考区是“同一产品素材池”，不限量上传产品图，不做不同产品身份判断；上传原图推荐长边 1200-2000px、短边至少 600px，但后端会统一生成最长边 1600px、JPEG 92 的 AI 工作副本，并回显尺寸、自动转换和风险标注；上传后按“套在脖子上的 U 形肩颈按摩仪”进行同一产品批量识别，左/右按佩戴者身体左右、上/下按佩戴方向，额外标注内外侧、开口方向、局部结构点、背景类型、用途标签、生成风险和备注，用户只检查备注，鼠标悬停通过固定浮层显示大图预览，能盖过滚动容器和分镜框架；缺视角补图失败时保留重试入口。脚本区在分镜行上方提供“作者想法”和“整片改写”，每行新口播文案可直接编辑并可单段 AI 改写，分镜时间和原内容列压缩为窄摘要列，新口播列进一步收窄，把横向空间留给画面规划和首尾帧。每条音频分镜纵向排列，行内从左到右串起原内容、新口播文案、画面规划/产品融入和历史候选视频槽；画面规划区先选择镜头类型（人物/情绪、人物+产品、产品特写、场景过渡），再用人物/产品开关、首帧规划、尾帧规划和产品出现方式决定这一条到底需不需要产品图或相似主体参考。当前主流程暂停直接调用视频模型，不再提供“生成本条 · Seedance”或“一键提交全部”视频入口；行内新增“首尾帧闸门”，分别显示/生成首帧和尾帧，旧 keyframe 类型首尾帧会被忽略，只认真正的 asset 首尾帧。生成首尾帧时调用 generateSceneAsset，主体只传 subject_brief，不再传主体图；产品按端点选择最多 1-2 张硬参考图，默认正面，侧面/后颈/厚度/特写等关键词会额外补一张对应视角。关键帧只作为前置主体重构证据和行数据承载位置，不再作为后续视频首尾帧参考。视频候选槽只展示历史候选和待生成占位，按钮改为“保存本条规划 / 保存全部规划”。只有该行勾选“产品”时，首尾帧生成才会从产品素材池按端点视角策略自动挑选最多 1-2 张相关产品图；未勾选产品时不会把产品图提交给首尾帧/后续生视频模型，并走纯文字首尾帧。只有该行勾选“人物”时，才会把主体 brief 注入 prompt；否则 prompt 会明确禁止强行添加主角式透明骨架人，后端也不会再给产品特写强加透明骨架人约束。ModelTrace 会在音频解析、产品识别/补图、相似主体高清视图包、脚本改写等入口旁直接展示模型名；所有生图入口都显示并使用 gpt-image-2，没有其他图片模型 fallback；点击后用固定浮层展示模型链路、输入输出和回退逻辑。旧分镜卡、抽帧控制和视频生成组件仍保留在文件里，但当前主路径不渲染。 - SourceSubjectPipeline源视频工作区右侧主体管线主路径：三栏分别是竖向 参考帧池、转换层 和 主体元素。参考帧池保留自动 12 张、胶片拖入正式成帧、点击勾选和删除；参考帧本身可拖到转换层。转换层不是抠图区，而是参考创新生成入口：拖入 1-2 张关键帧后自动调用 generateSubjectAssets，也保留手动重生按钮；可选择透明骨架/真人、完整 10 张或常用 4 张，并填写统一方向。主体元素区显示生成出的主体套图，缩略图复用 MediaAssetTile，支持 hover 放大、单张重生和删除。旧下方 SourceReferenceBuildPanel 不再主路径渲染。 + SourceSubjectPipeline源视频工作区右侧主体管线主路径：三栏分别是竖向 参考帧池、转换层 和 主体元素。参考帧池保留自动 12 张、胶片拖入正式成帧、点击勾选和删除；参考帧缩略图用 object-cover 填充小卡减少黑边，hover 预览通过 MediaAssetTile 的左侧紧凑浮层显示，避免盖住转换层。参考帧本身可拖到转换层。转换层不是抠图区，而是参考创新生成入口：拖入 1-2 张关键帧后自动调用 generateSubjectAssets，也保留手动重生按钮；转换层参考图列表有滚动上限，拖入多张不会挤掉下方控制；可选择透明骨架/真人、完整 10 张或常用 4 张，并填写统一方向。主体元素区显示生成出的主体套图，缩略图复用 MediaAssetTile，支持 hover 放大、单张重生和删除。旧下方 SourceReferenceBuildPanel 不再主路径渲染。 AudioStoryboardPlanPanel 三字段候选生成当前分镜主路径：每行是左右双栏，左侧默认显示 skg_copy_*、scene_one_line_*、action_one_line_* 三组中英字段，右侧直接显示视频候选横向轨。用户改中文镜像后，字段失焦会通过 refineStoryboard 优化对应英文主值，失败时退回 translateText；英文仍是后续 prompt 主值。quickPlanStoryboard 把三字段和主体 brief 展开为完整 StoryboardScene，generateStoryboardVideo 的 count 可由单行数字控件选择，候选新生成后持续向右追加，不再用 4-grid 撑高每行。整片生成同样可选择每行数量，并以 concurrency=1 按行排队提交。产品素材池、批量控制、每行主体区和高级区都可折叠，高级抽屉仍展示旧 6 字段、首尾帧 prompt 和首尾帧资产槽，但客户默认不用先处理首尾帧。 web/components/resource-library/library-drawer.tsx全局资源中心浮窗：由工作台顶部“资源库”按钮打开，叠加在工作台上方但不阻塞主界面；尺寸、位置和当前 Tab 写入 localStorage["skg-resource-library-drawer"]。提示词 Tab 固定 5 列（场景描述、视频描述、主体描述、SKG 文案、产品角度），每列先显示 use_count 排名前 5 的“常用”，再按月份倒序分组；提示词节点常驻复制按钮，hover 可选英文/中文/双语复制，并调用 use 接口。素材 Tab 固定 4 列（主体、产品、场景、视频），节点不可拖动，按月份倒序硬编码排列；“应用到当前 job”只调用后端复制接口，得到普通 ImageRef(kind="asset") 后再写入产品素材池或复制 ID。浮窗顶部最近 24 小时横条混合显示提示词和素材；新建提示词、上传素材、删除前查引用、详情侧栏都在该组件内完成。 AdRecreationBoard 主题切换顶部指标区左侧有“明亮/暗色”按钮，使用 Sun / Moon 图标切换 skg-board-theme--light 类名，并把选择写入 localStorage["skg-board-theme"]。暗色仍是默认模式；明亮模式只改变工作台外观，不改变任务、素材、分镜、模型调用或接口数据。 SourceReferenceBuildPanel旧的“相似主体 / 主体模板”大面板代码仍保留在文件里，方便以后恢复模板库复用、入库命名和自定义视图选择；但当前源视频工作区主路径已经由 SourceSubjectPipeline 承接，不再在页面下方渲染这块，避免和“参考帧池 → 转换层 → 主体元素”重复。 - web/components/media-asset-tile.tsx项目内媒体素材缩略图基底组件：图片、视频、抽帧、产品图、相似主体图、首尾帧和视频候选默认从这里获得统一交互。组件负责缩略图显示、顶层固定浮层 hover 放大、删除按钮、重新生成等操作按钮、忙碌遮罩和图片/视频共用预览，避免每个新板块重复手写不同的媒体交互。画面胶片是例外：为了保持胶片原位浏览，不使用额外弹出预览，只让胶片缩略图自己在轨道内放大。 + web/components/media-asset-tile.tsx项目内媒体素材缩略图基底组件：图片、视频、抽帧、产品图、相似主体图、首尾帧和视频候选默认从这里获得统一交互。组件负责缩略图显示、顶层固定浮层 hover 放大、删除按钮、重新生成等操作按钮、忙碌遮罩和图片/视频共用预览，避免每个新板块重复手写不同的媒体交互。hover 预览支持 previewPlacement 和 previewMaxWidth，参考帧池用左侧紧凑预览避免遮住转换层；画面胶片是例外：为了保持胶片原位浏览，不使用额外弹出预览，只让胶片缩略图自己在轨道内放大。 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，避免登录面板或输入框遮挡时草地失去鼠标响应。 @@ -1109,6 +1109,17 @@ ProductRefStateItem {

变更记录

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

+
+
+

2026-05-19 · 优化参考帧池预览和多参考转换

+ UI +
+
+

问题：参考帧池默认 hover 大图向右弹出，遮挡转换层；竖版缩略图用完整 contain 显示时黑边太多；转换层拖入多张参考帧后也可能挤占生成控制区。

+

改动：MediaAssetTile 新增 previewPlacement 和 previewMaxWidth；SourceSubjectPipeline 的参考帧池改为左侧紧凑 hover 预览，缩略图用 object-cover 填充小卡，转换层参考列表增加滚动上限。

+

影响：参考帧仍可点击多选、拖入转换层和删除；多张参考会在转换层内滚动，不会把下方生成按钮挤走。

+
+

2026-05-19 · 右侧改为参考帧池到主体元素管线

diff --git a/web/components/ad-recreation-board.tsx b/web/components/ad-recreation-board.tsx index 188e92b..992afc9 100644 --- a/web/components/ad-recreation-board.tsx +++ b/web/components/ad-recreation-board.tsx @@ -3226,7 +3226,11 @@ function SourceSubjectPipeline({ label={`参考帧 ${String(index + 1).padStart(2, "0")}`} meta={`${frame.timestamp.toFixed(1)}s`} className="h-24" - objectFit="contain" + objectFit="cover" + previewObjectFit="contain" + previewPlacement="left" + previewMaxWidth={320} + previewClassName="p-2" selected={selected || conversionFrameIndices.includes(frame.index)} title={`${selected ? "已选 · 点击取消" : "点击选择"} · 拖到转换层生成主体套图`} onClick={() => onToggleFrame(frame.index)} @@ -3283,7 +3287,7 @@ function SourceSubjectPipeline({
拖入 1-2 张参考帧后自动生成主体套图；这里做参考创新，不抠原图。
-
+
{conversionFrames.map((frame, index) => (
{String(index + 1).padStart(2, "0")}} /> diff --git a/web/components/media-asset-tile.tsx b/web/components/media-asset-tile.tsx index 5432dec..9f2885c 100644 --- a/web/components/media-asset-tile.tsx +++ b/web/components/media-asset-tile.tsx @@ -14,6 +14,8 @@ type MediaAssetAction = { tone?: "neutral" | "cyan" | "rose" } +type MediaAssetPreviewPlacement = "auto" | "left" | "right" + type MediaAssetTileProps = { kind?: "image" | "video" src?: string @@ -29,6 +31,8 @@ type MediaAssetTileProps = { objectFit?: "contain" | "cover" previewObjectFit?: "contain" | "cover" previewClassName?: string + previewPlacement?: MediaAssetPreviewPlacement + previewMaxWidth?: number selected?: boolean disabled?: boolean busy?: boolean @@ -55,15 +59,21 @@ function mediaObjectClass(fit: "contain" | "cover") { return fit === "cover" ? "object-cover" : "object-contain" } -function previewPosition(event: ReactMouseEvent) { +function previewPosition(event: ReactMouseEvent, placement: MediaAssetPreviewPlacement, maxWidth: number) { const margin = 16 - const previewWidth = Math.min(520, window.innerWidth - margin * 2) + const previewWidth = Math.min(maxWidth, window.innerWidth - margin * 2) const previewHeight = Math.min(760, window.innerHeight - margin * 2) - let left = event.clientX + 18 + let left = placement === "left" ? event.clientX - previewWidth - 18 : event.clientX + 18 let top = event.clientY + 18 - if (left + previewWidth > window.innerWidth - margin) left = event.clientX - previewWidth - 18 + if (placement === "auto" && left + previewWidth > window.innerWidth - margin) left = event.clientX - previewWidth - 18 + if (placement === "right" && left + previewWidth > window.innerWidth - margin) left = window.innerWidth - previewWidth - margin + if (placement === "left" && left < margin) left = margin if (top + previewHeight > window.innerHeight - margin) top = window.innerHeight - previewHeight - margin - return { left: Math.max(margin, left), top: Math.max(margin, top) } + return { + left: Math.max(margin, Math.min(left, window.innerWidth - previewWidth - margin)), + top: Math.max(margin, top), + width: previewWidth, + } } export function MediaAssetTile({ @@ -81,6 +91,8 @@ export function MediaAssetTile({ objectFit = "contain", previewObjectFit, previewClassName = "", + previewPlacement = "auto", + previewMaxWidth = 520, selected = false, disabled = false, busy = false, @@ -96,7 +108,7 @@ export function MediaAssetTile({ actions = [], disablePreview = false, }: MediaAssetTileProps) { - const [position, setPosition] = useState<{ left: number; top: number } | null>(null) + const [position, setPosition] = useState<{ left: number; top: number; width: number } | null>(null) const mediaSrc = src || poster || "" const canPreview = !!mediaSrc && !disablePreview const fit = mediaObjectClass(objectFit) @@ -104,7 +116,7 @@ export function MediaAssetTile({ const updatePreview = (event: ReactMouseEvent) => { if (!canPreview) return - setPosition(previewPosition(event)) + setPosition(previewPosition(event, previewPlacement, previewMaxWidth)) } const media = kind === "video" && src ? ( @@ -136,7 +148,7 @@ export function MediaAssetTile({ ? createPortal(
{kind === "video" && src ? (