chore: sync code and project files

2026-01-09 14:09:16 +08:00
parent 3d1fb37769
commit 30d7eb4b35
94 changed files with 12706 additions and 255 deletions
--- a/docs/EDITOR_README.md
+++ b/docs/EDITOR_README.md
@@ -0,0 +1,164 @@
+# 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
+