工业级 AI 漫剧与视频生成工作台
Industrial AI Motion Comic & Video Workbench
基础代码来自 https://github.com/Will-Water/CineGen-AI
AI漫剧工场 是一个专为 AI 漫剧 (Motion Comics)、动态漫画 及 影视分镜 (Animatic) 设计的专业生产力工具。
项目摒弃了传统的"抽卡式"生成,采用 "Script-to-Asset-to-Keyframe" 的工业化工作流。通过深度集成多个大模型,实现了对角色一致性、场景连续性以及镜头运动的精准控制。
- 前端框架: React 19 + TypeScript
- 样式方案: Tailwind CSS (索尼工业设计风格)
- 数据存储: IndexedDB (本地浏览器数据库,数据隐私安全,无后端依赖)
- 构建工具: Vite
传统的 Text-to-Video 往往难以控制具体的运镜和起止画面。CineGen 引入了动画制作中的 关键帧 (Keyframe) 概念:
- 先画后动:先生成精准的起始帧 (Start) 和结束帧 (End)
- 插值生成:利用 Veo/豆包 模型在两帧之间生成平滑的视频过渡
- 资产约束:所有画面生成均受到"角色定妆照"和"场景概念图"的强约束,杜绝人物变形
| 阶段 | 核心功能 | 主要特性 |
|---|---|---|
| Phase 01 | 剧本与故事 | AI剧本生成、角色/场景管理、分镜清单自动生成 |
| Phase 02 | 资产与选角 | 角色定妆照生成、场景概念图、衣橱系统(多套造型) |
| Phase 03 | 导演工作台 | 关键帧制作、一键视频生成、批量制作、造型切换 |
| Phase 04 | 成片与导出 | 视频片段合并、批量导出、资源打包 |
- 📋 项目仪表盘: 可视化项目列表、快速创建/编辑/删除项目
- 🤖 AI 剧本生成: 支持提示词生成或直接输入剧本,自动解析结构化数据
- 👥 角色与场景管理: 支持多角色、多场景,智能生成参考图
- 👔 衣橱系统: 为每个角色管理多套造型,保持面部一致性
- 🎞 一键制作: 自动生成起始帧+结束帧+视频,智能判断状态
- ⚡ 批量操作: 批量生成所有角色/场景/视频,支持进度追踪
- 🔗 视频合并: 集成 Coze 工作流,支持视频片段智能合并
- 📦 资源导出: 一键导出所有关键帧和视频资源
- 🎨 画面风格: 9种风格(仙侠、卡通、水墨、赛博朋克等)
- 📏 图片尺寸: 横屏16:9 / 竖屏9:16
- 🎲 组图数量: 1-9张连续宫格图
- ⏱️ 目标时长: 30秒/60秒/2分钟/5分钟/自定义
- 🌐 输出语言: 中文/英语/日语/法语/西班牙语
- 🎭 影视类型: 14种类型(剧情、动作、科幻、喜剧等)
| 提供商 | 能力 | 优势 |
|---|---|---|
| DeepSeek | 剧本生成、镜头清单、视觉提示词 | 高性价比、优秀中文理解 |
| 豆包 | 剧本生成、镜头清单、视觉提示词 | 中文优化、多模态支持 |
| 云雾 | 剧本生成、镜头清单、视觉提示词、视频生成 | 视频能力强、运镜精准 |
| Gemini | 文生图(Nano Banana)、图生视频 | 全球领先、速度快、质量稳定 |
| 提供商 | 核心特性 |
|---|---|
| 豆包 | 高质量图像、多尺寸、角色一致性、连续宫格图(1-9张)、风格控制 |
| Gemini | 超高速生成、高质量图像、自定义尺寸、参考图支持 |
| 提供商 | 核心特性 |
|---|---|
| 豆包 | 首尾帧插值、参考图驱动、时长控制、宫格图连续帧模式 |
| 云雾 | 高质量视频、起始帧驱动、首尾帧插值、时长控制 |
Coze 工作流集成:
- 🔗 视频片段智能合并
- 📊 时间轴同步
- 🎯 端到端视频处理
- 📥 一键导出
App.tsx (主应用)
├── Sidebar.tsx (侧边导航)
├── Dashboard.tsx (项目列表)
├── StageScript.tsx (剧本与故事)
├── StageAssets.tsx (资产与选角)
├── StageDirector.tsx (导演工作台)
└── StageExport.tsx (成片与导出)
ModelService (统一模型服务层)
├── deepseekService.ts (DeepSeek API)
├── doubaoService.ts (豆包 API)
├── geminiService.ts (Gemini API)
├── yunwuService.ts (云雾 API)
└── openaiService.ts (OpenAI API - 计划中)
其他服务
├── cozeService.ts (Coze 工作流)
├── modelConfigService.ts (模型配置管理)
└── storageService.ts (IndexedDB 数据存储)
React Hooks: useState、useEffect、useRef
数据流:
ProjectState (全局项目状态)
├── 基础信息 (id, title, createdAt, lastModified)
├── 阶段状态 (stage)
├── 项目设置 (风格、尺寸、语言、时长等)
├── 剧本数据 (角色、场景、段落)
└── 分镜数据 (镜头、关键帧、视频、造型)
# 安装依赖
npm install
# 启动开发服务器
npm run dev| 提供商 | 官网地址 |
|---|---|
| Google Gemini | https://aistudio.google.com/ |
| 豆包 | https://www.doubao.com/ |
| 云雾 | https://yunwu.ai/ |
| DeepSeek | https://www.deepseek.com/ |
在应用首页配置页面输入密钥并保存。
步骤一: 创建项目,输入项目名称
步骤二: 选择 AI 生成或直接输入剧本,生成分镜脚本
步骤三: 一键生成角色定妆照和场景概念图,为角色添加多套造型
步骤四: 在导演工作台选择镜头,点击"一键制作"生成图片和视频
步骤五: 批量制作所有镜头,或单个调整关键帧和视觉提示词
步骤六: 选择完成的镜头,点击"开始合并",导出最终视频
Q: API 密钥配置后不生效?
A: 确保点击了"保存配置"按钮,密钥会存储到浏览器 localStorage
Q: 图片/视频生成失败?
A: 检查以下几点:
- API 密钥是否正确且已开通相应服务权限
- 网络连接是否正常
- 是否有足够的 API 配额
- 查看浏览器控制台错误信息
Q: 角色在不同镜头中变形?
A: 确保使用"角色定妆"生成的参考图作为约束,或在导演台选择一致的角色造型
Q: 连续宫格图生成失败?
A: 检查组图数量设置 (1-9),确保文生图模型支持该数量
Q: 视频合并失败?
A: 确保已成功生成所有需要的视频片段,Coze 工作流 ID 配置正确
- 当前版本: 1.0.0
- 构建工具: Vite
- React 版本: 19.x
- TypeScript 版本: 5.x
Built for Creators, by CineGen.
祝您创作愉快!🎬✨
