📖 概览
本管线将 AIOM 语音合成 + 对口型 与 HyperFrames HTML/GSAP 模板渲染结合，三步把一段文案变成口播视频：
① 文案输入
→
② 语音合成
→
③ 对口型
→
④ 字幕对齐
→
⑤ HyperFrames渲染
→
✅ 成品视频
| 项目 | 说明 |
|---|
| 管线位置 | D:\merchant-templates\pipeline\ |
| 模板位置 | D:\merchant-templates\pipeline\templates\merchant-video\ |
| 运行环境 | Node.js 22+ (ESM) |
| 渲染引擎 | HyperFrames v0.6.4 |
| 依赖服务 | AIOM API / hihookeji API |
📁 文件结构
pipeline/
├── pipeline.js # 主调度器
├── .env # API 凭证配置
├── package.json # Node 依赖
├── modules/
│ ├── aiom-client.js # AIOM/hihookeji API 客户端
│ ├── subtitle-aligner.js # 字幕对齐 (echogarden / 估算)
│ ├── template-injector.js # 模板注入 (场景时间 + __DATA)
│ ├── renderer.js # HyperFrames 渲染封装
│ └── utils.js # FFmpeg / 下载 / 工具函数
├── templates/
│ └── merchant-video/ # 口播视频模板 (7场景 + 字幕)
└── work/ # 工作目录 (自动创建)
└── job-xxx/ # 每次运行的任务目录
🚀 快速开始
前置条件
- Node.js 22+
- FFmpeg (路径:
D:\episodes\episode1-hf\ffmpeg.exe)
- HyperFrames CLI:
npx hyperframes@0.6.4
- AIOM API 凭证 (已配置在
.env)
一键运行
node pipeline.js --mode full ^
--copy "大家好，品质优选推荐好产品，限时特惠只要99元！" ^
--voice 女声 ^
--video-id 51
分步运行
第一步：仅合成语音
node pipeline.js --mode voice-only --copy "文案内容..."
第二步：仅注入模板 + 渲染
node pipeline.js --mode inject-only ^
--audio "D:\path\to\audio.mp3" ^
--video "D:\path\to\lipsync.mp4" ^
--copy "文案内容..."
参数说明
| 参数 | 说明 | 默认值 |
|---|
--mode | 运行模式: full / voice-only / inject-only | full |
--copy | 文案内容（必填） | - |
--voice | 音色标签: 女声 / 男声 | 女声 |
--video-id | 人物视频素材ID | 自动选 |
--brand | 商家名称 | 品质优选 |
--quality | 渲染质量: draft / production | draft |
--gpu | 启用 GPU 渲染加速 | false |
--keywords | 关键词高亮映射 (JSON) | {} |
🎨 模板结构
模板位于 templates/merchant-video/，包含 7 个场景 + 动态字幕：
| 场景 | 场景ID | 内容 | 默认占比 |
|---|
| 1 | scene1-intro | 开场介绍 + 品牌名 | ~12% |
| 2 | scene2-rejection | 引出问题 | ~10% |
| 3 | scene3-pointless | 旧方案不行 | ~13% |
| 4 | scene4-six | 解决方案（全屏） | ~13% |
| 5 | scene5-benefits | 卖点价值 | ~18% |
| 6 | scene6-only-ones | 特色强调（全屏） | ~8% |
| 7 | scene7-cta | CTA 引导 + 价格 | ~21% |
💡 提示：场景时长根据文案总时长按比例分配，每个场景最少 1 秒。全屏场景（4/6）人物视频从底部切换到满屏。
字幕系统
字幕由 compositions/captions.html 控制，从 __DATA.captions.segments 读取：
- 逐字高亮：已读白色 → 正在读蓝色/橙色 → 未读灰色
- 关键词用橙色
#f09025 高亮
- 每段字幕 fadeIn 0.16s + 停留 0.18s + 切换 0.06s
人物面部模式
- BOTTOM 模式：人物在画面下半部分，场景文字在上半部分
- FULLSCREEN 模式：人物全屏显示，适合需要突出视觉吸引力的场景
- 过渡动画 0.32s，expo.inOut 缓动
⏱ 字幕对齐
字幕对齐采用三级策略，自动降级：
- echogarden DTW 强制对齐 — 最准，从对口型视频提取音频做对齐
- SRT 文件解析 — 用户提供 SRT 则解析逐字时间
- 均匀估算 — 按总时长 + 字数均匀分配（降级后备）
⚠ 注意：echogarden 首次需要联网下载模型（约 200MB）。如网络不通会自动降级为均匀估算，字幕精度会降低。
⚙️ 配置
API 凭证 (.env)
AIOM_TOKEN=sat_xxx...
AIOM_API_KEY=ak_xxx...
CHUANGKE_TOKEN=xxx...
CHUANGKE_SK=
AIOM_MODE=step_by_step
DEFAULT_VOICE_TAG=女声
DEFAULT_VIDEO_TAG=正面
RENDER_QUALITY=draft
模板自定义
场景权重在 template-injector.js 的 SCENE_WEIGHTS 数组调整：
const SCENE_WEIGHTS = [
{ id: 'scene1-intro', weight: 0.15 },
{ id: 'scene2-rejection', weight: 0.10 },
{ id: 'scene3-pointless', weight: 0.12 },
{ id: 'scene4-six', weight: 0.15 },
{ id: 'scene5-benefits', weight: 0.20 },
{ id: 'scene6-only-ones', weight: 0.08 },
{ id: 'scene7-cta', weight: 0.20 },
];
❓ 常见问题
渲染出来的视频没有声音？
HyperFrames 偶尔会丢失音频流。渲染器会自动执行 FFmpeg 后处理合并音频。
如何提高渲染质量？
node pipeline.js --mode inject-only --quality production --gpu ...
如何自定义场景文字？
场景内容从 __DATA.scenes[] 读取，智能体/大模型可动态生成文案内容传到管线。
支持什么尺寸？
默认 1080×1920（竖屏短视频），可在 index.html 和 hyperframes.json 中调整。
对口型没反应？
确认 .env 中 CHUANGKE_TOKEN 已配置，且人物视频素材存在。对口型需要 1~5 分钟处理时间。