video-flow/docs/EDITOR_README.md

Video Flow Editor - 视频编辑器

概述

Video Flow Editor 是一个基于浏览器的视频编辑器，支持多轨道时间轴编辑，与现有的 AI 视频生成工作流无缝集成。

架构

┌─────────────────────────────────────────────────────────────┐
│                    React Frontend (:3000)                    │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │  Remotion   │  │  Timeline   │  │    Track Panel      │  │
│  │  预览播放器  │  │   时间轴    │  │   轨道属性面板      │  │
│  └─────────────┘  └─────────────┘  └─────────────────────┘  │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                   FastAPI Backend (:8000)                    │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │  项目管理   │  │  编辑器 API  │  │     合成 API        │  │
│  └─────────────┘  └─────────────┘  └─────────────────────┘  │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                    Celery + Redis                            │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │  任务队列   │  │  Worker 1   │  │    Worker N...      │  │
│  └─────────────┘  └─────────────┘  └─────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

功能特性

编辑功能

• ✅ 视频裁剪 - 在时间轴上拖拽调整视频起止点
• ✅ 旁白编辑 - 修改文本后重新生成 TTS
• ✅ 花字编辑 - 修改花字内容和样式
• ✅ BGM 管理 - 选择和替换背景音乐
• ✅ 字幕编辑 - 修改字幕文本和时间

预览功能

• ✅ Remotion 实时预览 - 浏览器端实时渲染
• ✅ 多轨道显示 - 视频/音频/字幕/花字/BGM
• ✅ 播放头控制 - 拖拽快速定位

导出功能

• ✅ 异步合成 - 任务队列处理，不阻塞界面
• ✅ 进度查询 - 实时查看合成进度
• ✅ 下载成片 - 合成完成后直接下载

快速开始

开发环境

# 1. 安装依赖
pip install -r requirements.txt
cd web && npm install && cd ..

# 2. 启动 Redis (需要 Docker)
docker run -d --name redis -p 6379:6379 redis:7-alpine

# 3. 启动后端
uvicorn api.main:app --reload --port 8000

# 4. 启动 Worker
celery -A api.celery_app worker --loglevel=info

# 5. 启动前端
cd web && npm run dev

Docker 环境

# 一键启动所有服务
docker-compose up -d

# 扩展 Worker 数量
docker-compose scale worker=3

# 查看日志
docker-compose logs -f worker

端口规划

服务	端口	说明
React Editor	3000	视频编辑器前端
FastAPI	8000	REST API
Streamlit	8502	原有工作流调试界面
Redis	6379	任务队列

API 接口

编辑器状态

GET  /api/editor/{project_id}/state  - 获取编辑器状态
POST /api/editor/{project_id}/state  - 保存编辑器状态

TTS 生成

POST /api/editor/generate-voiceover
{
    "text": "要转换的文本",
    "voice_type": "zh_female_santongyongns_saturn_bigtts",
    "target_duration": 3.0  // 可选
}

视频合成

POST /api/compose/render
{
    "project_id": "PROJ-xxx",
    "video_clips": [...],
    "voiceover_clips": [...],
    "subtitle_clips": [...],
    "fancy_text_clips": [...],
    "bgm_clip": {...}
}

GET /api/compose/status/{task_id}  - 查询合成进度

扩展性

水平扩展

# 增加 Worker 数量
docker-compose scale worker=5

性能监控

• Celery Flower: celery -A api.celery_app flower
• Redis 监控: redis-cli monitor

与工作流的集成

编辑器自动读取工作流生成的素材：

1. 用户在 Streamlit 完成视频生成工作流
2. 点击"编辑"按钮跳转到编辑器
3. 编辑器自动加载项目的所有素材到时间轴
4. 用户进行精细编辑
5. 导出最终成品

技术栈

• 前端: React 18 + TypeScript + Vite + Remotion
• 后端: FastAPI + Celery + Redis
• 视频处理: FFmpeg (Worker 中运行)
• 数据库: SQLite / PostgreSQL