# 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
- ✅ 播放头控制 - 拖拽快速定位

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

## 快速开始

### 开发环境

```bash
# 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 环境

```bash
# 一键启动所有服务
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}  - 查询合成进度
```

## 扩展性

### 水平扩展

```bash
# 增加 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