fix: move subject results below conversion layer

2026-05-20 20:39:28 +08:00
parent f0f2203eed
commit 5bffd6308e
3 changed files with 30 additions and 16 deletions
--- a/RULES.md
+++ b/RULES.md
@@ -11,7 +11,7 @@
 - 详见 `CLAUDE.md` 立项决策段 + `.memory/plan.md` 七步管线拆解
 - 风格：`04-Dark-Gallery-Ambient`（路径：`~/Projects/research/20260305-网页风格库/04-Dark-Gallery-Ambient.md`）
 - 第一冲刺：步骤 1-4（下载 / 拆轨 / 关键帧 / ASR+翻译）
- 当前产品方向（2026-05-20 再确认）：信息流广告快速复刻默认进入“三字段候选生成”工作流。主界面为“左侧素材输入列 + 右侧信息流复刻工作表”；工作台以 1800x1000 为基准操作画布，不同显示器或浏览器宽度下保持同一框架，并按常见桌面宽度落到预设缩放档位（0.72/0.76/0.8/0.86/0.92/1/1.06/1.16/1.24/1.34/1.48/1.6），保留适度左右呼吸感，缩放后高度小于视口时上下居中，必要时允许纵向滚动，不通过 `xl/2xl` 断点重排核心操作区。用户粘贴 TK 链接或上传视频后点击“开始分析”，系统自动下载源视频；下载完成后并行启动两条路：音频文案路提取原音频文案/字幕，并分析讲话人、语速节奏、背景音乐/环境声/音效；视频视觉路自动抽取参考帧。源视频工作区右侧主体链路是“参考帧池 → 转换层 → 主体元素”：参考帧池竖向排列；转换层是轻量对话式生图确认区，参考图可通过左侧缩略图 `+`、参考帧拖拽、胶片拖拽或本地图片拖入进入转换层，用户选择 GPT/Gemini 套件后先分析参考图；识别结果里的特征 chip 只作为“保留元素”本地选择，点亮=保留、再点取消，点击不立即请求模型，随下一条发送消息提交；用户再在下方发送区发送复刻/创新/卡通和画面要求，界面只显示当前生成要求摘要、保留元素和收起记录计数，不展示重复模型确认话术，生成数量通过发送区旁边的张数控件控制；后端返回英文出图 prompt 后必须弹窗确认，用户点确认才生成对应数量的统一多角度套图。右侧主体元素区的套图输出、文件夹分组、单张重生、删除和 hover 预览逻辑保持不变。旧下方“相似主体 / 主体模板库”不再作为主路径。波形下方的画面胶片只是临时预览，点击只跳转原视频时间点，双击或拖进参考帧池才正式加入关键帧，已加入的胶片直接显示“已添加”。产品图上传后独立形成产品资产包，自动识别视角/结构/比例并补缺角度。分镜工作台按逐句时间轴默认只露“文案 / 场景一句话 / 人物+产品+动作”，产品素材池、批量控制、三字段、视频候选和高级区都必须可折叠；视频候选无内容时默认不占大面积，有候选时默认只显示迷你缩略条，展开后才显示 4-grid。单条默认生成 4 个视频候选，顶部支持整片批量生成候选；首尾帧、视觉规划、产品出现方式和旧 6 字段保留在“高级”抽屉与后端 quick-plan 自动展开中，不能再作为客户默认闸门。
+- 当前产品方向（2026-05-20 再确认）：信息流广告快速复刻默认进入“三字段候选生成”工作流。主界面为“左侧素材输入列 + 右侧信息流复刻工作表”；工作台以 1800x1000 为基准操作画布，不同显示器或浏览器宽度下保持同一框架，并按常见桌面宽度落到预设缩放档位（0.72/0.76/0.8/0.86/0.92/1/1.06/1.16/1.24/1.34/1.48/1.6），保留适度左右呼吸感，缩放后高度小于视口时上下居中，必要时允许纵向滚动，不通过 `xl/2xl` 断点重排核心操作区。用户粘贴 TK 链接或上传视频后点击“开始分析”，系统自动下载源视频；下载完成后并行启动两条路：音频文案路提取原音频文案/字幕，并分析讲话人、语速节奏、背景音乐/环境声/音效；视频视觉路自动抽取参考帧。源视频工作区主体链路改为“上方参考帧池 + 转换层、下方主体元素结果栏”：参考帧池竖向排列；转换层是轻量对话式生图确认区，参考图可通过左侧缩略图 `+`、参考帧拖拽、胶片拖拽或本地图片拖入进入转换层，用户选择 GPT/Gemini 套件后先分析参考图；识别结果里的特征 chip 只作为“保留元素”本地选择，点亮=保留、再点取消，点击不立即请求模型，随下一条发送消息提交；用户再在下方发送区发送复刻/创新/卡通和画面要求，界面只显示当前生成要求摘要、保留元素和收起记录计数，不展示重复模型确认话术，生成数量通过发送区旁边的张数控件控制；后端返回英文出图 prompt 后必须弹窗确认，用户点确认才生成对应数量的统一多角度套图。主体元素结果栏在转换层下方横向展示套图输出、文件夹分组、单张重生、删除和 hover 预览，空态只保留紧凑提示，不再挤占右侧整列。旧下方“相似主体 / 主体模板库”不再作为主路径。波形下方的画面胶片只是临时预览，点击只跳转原视频时间点，双击或拖进参考帧池才正式加入关键帧，已加入的胶片直接显示“已添加”。产品图上传后独立形成产品资产包，自动识别视角/结构/比例并补缺角度。分镜工作台按逐句时间轴默认只露“文案 / 场景一句话 / 人物+产品+动作”，产品素材池、批量控制、三字段、视频候选和高级区都必须可折叠；视频候选无内容时默认不占大面积，有候选时默认只显示迷你缩略条，展开后才显示 4-grid。单条默认生成 4 个视频候选，顶部支持整片批量生成候选；首尾帧、视觉规划、产品出现方式和旧 6 字段保留在“高级”抽屉与后端 quick-plan 自动展开中，不能再作为客户默认闸门。

 ## 部署事实
 - 平台：VPS `76.13.31.179`（Ubuntu 24.04 / Docker Compose / Coolify Traefik）
--- a/docs/source-analysis.html
+++ b/docs/source-analysis.html
--- a/web/components/ad-recreation-board.tsx
+++ b/web/components/ad-recreation-board.tsx
@@ -3938,7 +3938,8 @@ function SourceSubjectPipeline({

  return (
    <>
-    <div className="grid grid-cols-[170px_minmax(285px,0.95fr)_minmax(0,1.05fr)] gap-2">
+    <div className="space-y-2">
+      <div className="grid grid-cols-[150px_minmax(0,1fr)] gap-2">
      <div className="min-w-0">
        <div className="mb-2 flex items-center justify-between gap-2">
          <SectionTitle icon={<ImageIcon className="h-4 w-4" />} title="参考帧池" />
@@ -4316,6 +4317,7 @@ function SourceSubjectPipeline({
          ) : null}
        </div>
      </div>
+      </div>

      <div className="min-w-0">
        <div className="mb-2 flex items-center justify-between gap-2">
@@ -4324,7 +4326,7 @@ function SourceSubjectPipeline({
            {subjectAssetPacks.length ? `${subjectAssetPacks.length} 套` : "待生成"}
          </span>
        </div>
-        <div className="min-h-[500px] rounded-md border border-white/10 bg-black/32 p-2">
+        <div className="rounded-md border border-white/10 bg-black/32 p-2">
          {subjectBusyFor ? (
            <div className="mb-2 rounded-md border border-cyan-200/20 bg-cyan-300/[0.07] px-2.5 py-2 text-[10px] leading-snug text-cyan-50/70">
              正在生成{reconstructionModeConfig(subjectBusyFor.mode).label} {subjectBusyFor.viewCount} 张；参考 {subjectBusyFor.sourceCount || "自主描述"}。
@@ -4333,7 +4335,7 @@ function SourceSubjectPipeline({
            </div>
          ) : null}
          {subjectAssetPacks.length ? (
-            <div className="space-y-2">
+            <div className="grid grid-cols-[minmax(0,1fr)_260px] gap-2">
              {activeSubjectPack ? (
                <div className="rounded-md border border-[#d6b36a]/28 bg-[#d6b36a]/[0.07] p-2">
                  <div className="mb-2 flex items-center justify-between gap-2">
@@ -4347,7 +4349,7 @@ function SourceSubjectPipeline({
                      {activeSubjectPack.assets.length} 张
                    </span>
                  </div>
-                  <div className="grid max-h-[300px] grid-cols-[repeat(auto-fill,minmax(88px,1fr))] gap-2 overflow-y-auto pr-0.5">
+                  <div className="flex max-h-[190px] gap-2 overflow-x-auto pb-1">
                    {activeSubjectPack.assets.map((asset) => {
                      const busyMode = subjectAssetBusy?.endsWith(asset.id) ? subjectAssetBusy.split(":")[0] : ""
                      const status = subjectAssetStatus(asset)
@@ -4363,7 +4365,7 @@ function SourceSubjectPipeline({
                          alt={asset.label || asset.view}
                          label={asset.label || subjectViewLabel(asset.view)}
                          meta={subjectAssetStatusLabel(asset)}
-                          className={`aspect-[9/16] ${running ? "bg-black/40" : failed ? "bg-rose-950/30" : "bg-white"}`}
+                          className={`aspect-[9/16] w-[86px] shrink-0 ${running ? "bg-black/40" : failed ? "bg-rose-950/30" : "bg-white"}`}
                          objectFit="contain"
                          busy={running}
                          emptyText={failed ? "失败" : running ? "生成中" : undefined}
@@ -4387,8 +4389,8 @@ function SourceSubjectPipeline({
                  </div>
                </div>
              ) : null}
-              <div className="max-h-32 overflow-auto rounded-md border border-white/10 bg-black/24 p-1.5">
-                <div className="grid grid-cols-[repeat(auto-fill,minmax(112px,1fr))] gap-1.5">
+              <div className="max-h-[244px] overflow-auto rounded-md border border-white/10 bg-black/24 p-1.5">
+                <div className="grid grid-cols-1 gap-1.5">
                  {subjectAssetPacks.map((pack, index) => {
                    const active = activeSubjectPack?.key === pack.key
                    return (
@@ -4418,8 +4420,8 @@ function SourceSubjectPipeline({
              </div>
            </div>
          ) : (
-            <div className="flex h-40 items-center justify-center rounded border border-dashed border-white/12 px-3 text-center text-[10.5px] leading-snug text-white/34">
-              转换层生成完成后，这里会展示可用于后续分镜的主体套图。
+            <div className="flex h-20 items-center justify-center rounded border border-dashed border-white/12 px-3 text-center text-[10.5px] leading-snug text-white/34">
+              转换层生成完成后，这里会横向展示主体套图。
            </div>
          )}
        </div>