# ai168-comic-app

**Repository Path**: holyhandcn/ai168-comic-app

## Basic Information

- **Project Name**: ai168-comic-app
- **Description**: AI168 Comic AI 驱动的漫剧制作 — 从剧本到动画视频的全自动流水线。
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2026-07-29
- **Last Updated**: 2026-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI168 Comic

AI 驱动的漫剧制作 — 从剧本到动画视频的全自动流水线。

📺 **系统介绍**：

本网站全程由 AI 驱动开发

## 功能特性

- **剧本导入** — 支持上传 TXT/DOCX/PDF 文件，AI 自动解析文本、提取角色、智能分集，流程可视化
- **分集管理** — 项目级分集列表，角色按集关联，支持手动创建或导入自动分集
- **角色管理** — 项目级角色管理，主角/配角分区展示，支持跨集复用和按集独立解析
- **剧本创作** — 手动编写或 AI 辅助生成剧本
- **角色提取** — AI 自动从剧本中提取角色并生成详细视觉描述
- **角色四视图** — 为每个角色生成四视图参考图（正面/四分之三/侧面/背面），确保后续帧画面一致性
- **智能分镜** — AI 将剧本拆解为专业镜头列表（含构图、灯光、运镜指令）
- **首尾帧生成** — 为每个镜头生成起始帧和结束帧关键画面（首尾帧模式 / 场景参考帧模式）
- **视频提示词** — AI 基于分镜描述和参考帧自动生成视频提示词，支持直接编辑
- **视频生成** — 基于首尾帧插值生成动画视频片段
- **视频合成** — 将所有片段拼接为完整动画，支持字幕烧录
- **分镜工作流** — 分镜编辑抽屉、角色内联面板、看板视图三种协作视图，支持单张分镜精细编辑
- **帧图管理** — 生成帧支持手动上传替换及一键清除
- **资源下载** — 支持最终视频下载及全部素材打包下载
- **多语言** — 中文 / English / 日本語 / 한국어
- **风格自适应** — 自动识别剧本风格（动漫/写实等），角色四视图与首尾帧生成均匹配对应风格
- **视频比例** — 支持 16:9 / 9:16 / 1:1 / 自适应比例，首尾帧与视频生成统一比例
- **多模型** — 支持 OpenAI、Gemini、Kling、Seedance、Veo 等多家 AI 供应商，可按项目配置

## 技术栈

| 层级 | 技术 |
|------|------|
| 前端框架 | Next.js 16 (App Router) + React 19 |
| 样式 | Tailwind CSS 4 |
| 状态管理 | Zustand |
| 国际化 | next-intl |
| 数据库 | SQLite + Drizzle ORM |
| AI 文本 | OpenAI / Gemini (via AI SDK) + 自研 Provider 工厂 |
| AI 图像 | OpenAI DALL-E / Gemini Imagen / Kling / DashScope / Ollama |
| AI 视频 | Seedance / Kling / Veo / Wan Video / UCloud Seedance |
| 外部 Agent | 百炼 / Dify / Coze 工作流 |
| 视频处理 | FFmpeg (fluent-ffmpeg) |
| 桌面端 | Tauri v2 (Rust) |
| 包管理 | pnpm |

## 架构概览

### 数据模型

15 张核心表，以项目为中心：

```
projects ──┬── episodes（分集）
           ├── characters（角色）
           ├── scenes（场景）
           ├── storyboard_versions（分镜版本）
           ├── shots ──┬── shot_assets（镜头素材，统一表+版本回溯）
           │           ├── dialogues（对白）
           │           └── shot_actions（动作）
           ├── character_relations（角色关系）
           ├── character_costumes（角色服装）
           ├── mood_board_images（情绪板）
           ├── import_logs（导入日志）
           ├── prompt_templates / prompt_versions / prompt_presets（提示词模板 + 版本历史 + 预设）
           ├── prompt_ab_tests（A/B 测试）
           ├── tasks（任务队列）
           ├── agents / agent_bindings（外部 AI Agent 绑定）
           └── model_configs（模型配置）
```

`shot_assets` 为统一资产表，通过 `type` 字段区分首帧/尾帧/参考图/视频，`asset_version` 实现多版本回溯。

### AI 供应商架构

双层工厂模式，统一接口、可插拔：

```
AIProvider（接口）
├── generateText(prompt, options)
└── generateImage(prompt, options)

VideoProvider（接口）
└── generateVideo(params)

Provider 工厂 ──┬── OpenAI（文本/图像）
                ├── Gemini（文本/图像）
                ├── Kling Image / Kling Video
                ├── DashScope（通义万相图像）
                ├── Seedance / UCloud Seedance（视频）
                ├── Veo（Google 视频）
                ├── Wan Video
                └── Ollama（本地图像）
```

文本生成走 AI SDK（`createLanguageModel`），视频生成走独立 `VideoProvider`，各供应商实现统一接口。

### 生成管道

8 步串行流水线，通过后台任务队列异步执行：

```
1. script_outline     → 剧本大纲生成
2. script_parse       → 剧本解析（分场、分角色）
3. character_extract  → 角色提取 + 属性
4. character_image    → 角色四视图参考图生成
5. shot_split         → 智能分镜（构图、灯光、运镜指令）
6. frame_generate     → 首尾帧/参考帧生成（按 generationMode）
7. video_generate     → 视频生成（逐镜头调用视频模型）
8. video_assemble     → 视频合成 + 字幕渲染（FFmpeg）
```

两种生成模式：**keyframe 模式**（首帧+尾帧插值）和 **reference 模式**（单参考图生成）。

### 任务队列

- 基于 SQLite 的轻量队列，无外部依赖（无 Redis/RabbitMQ）
- Worker 每 2 秒轮询，单任务超时 10 分钟
- 启动时自动恢复崩溃遗留的 `running` 任务
- 失败自动重试（最多 3 次）

### 提示词模板系统

三层可定制：

```
Registry（内置 30+ 模板）
├── Global 模板（用户级覆盖）
└── Project 模板（项目级覆盖）
     └── 版本历史（prompt_versions）
          └── A/B 测试（prompt_ab_tests）
```

Preset 预设支持批量切换。

### 状态管理（Zustand）

6 个 Store：

| Store | 职责 |
|-------|------|
| project-store | 项目/分集数据 + 防 stale 请求守卫 |
| auth-store | 鉴权（固定用户 + localStorage 持久化）|
| model-store | 模型配置 + Provider 列表 |
| agent-store | 外部 AI Agent 绑定 |
| episode-store | 分集列表 |
| prompt-template-store | 提示词模板 |

### 项目结构分层

```
src/
├── app/                              # Next.js App Router
│   ├── [locale]/                     # 国际化路由
│   │   ├── (dashboard)/              # 项目列表首页
│   │   ├── login/                    # 登录页
│   │   ├── project/[id]/             # 项目编辑（主流程）
│   │   │   ├── script/               # 脚本编辑
│   │   │   ├── characters/           # 角色管理
│   │   │   ├── storyboard/           # 分镜
│   │   │   ├── preview/              # 预览
│   │   │   ├── import/               # 脚本导入
│   │   │   └── episodes/             # 分集
│   │   │       └── [episodeId]/
│   │   │           ├── script/       # 单集脚本
│   │   │           ├── storyboard/   # 单集分镜
│   │   │           └── preview/      # 单集预览
│   │   └── settings/                 # 全局设置
│   └── api/                          # RESTful API 路由
│       ├── projects/[id]/            # 项目 CRUD + 生成管道
│       ├── agents/                   # AI Agent CRUD
│       ├── models/list/              # 模型列表
│       └── ...
├── components/
│   ├── ui/                           # 基础 UI（按钮、输入框等）
│   ├── editor/                       # 编辑器核心组件
│   ├── prompt-templates/             # 提示词模板编辑器
│   └── settings/                     # 设置页组件
├── lib/
│   ├── ai/                           # AI 层
│   │   ├── types.ts                  # 统一接口定义
│   │   ├── provider-factory.ts       # Provider 工厂
│   │   ├── providers/                # 各供应商实现
│   │   ├── prompts/                  # 所有 AI 提示词模板
│   │   └── agent-caller.ts           # 外部 Agent 调用
│   ├── pipeline/                     # 生成管道（8 步）
│   ├── task-queue/                   # 后台任务队列
│   ├── db/                           # 数据库连接与 schema
│   ├── video/                        # FFmpeg 视频处理
│   └── ...
├── stores/                           # Zustand 状态管理
├── hooks/                            # 自定义 React Hooks
├── i18n/                             # 国际化配置
├── middleware.ts                     # Next.js 中间件
└── instrumentation.ts                # Next.js Instrumentation 钩子
```

### 外部 Agent 支持

平台内置三方 AI Agent 工作流调用能力，可作为 Pipeline 的替代或补充方案：

| 平台 | 协议 | 用途 |
|------|------|------|
| 百炼（阿里云） | DashScope API | 剧本生成/解析/角色提取等 |
| Dify | Workflow API | 自定义工作流编排 |
| Coze | Workflow API | 扣子工作流 |

Agent 按类别与项目绑定（`agent_bindings` 表），生成时通过 `agent-caller.ts` 调度。支持 `agents/dify/` 下预置的 Dify 工作流 YAML 模板。

### 启动流程

```
bootstrap()
  1. runMigrations()           → Drizzle 数据库迁移
  2. initializeProviders()     → 加载模型配置
  3. registerPipelineHandlers()→ 注册 8 步 pipeline
  4. startWorker()             → 启动任务队列
  5. 注册 SIGTERM/SIGINT 清理  → 优雅关闭
```

### 架构亮点

| 模式 | 体现 |
|------|------|
| 工厂模式 | Provider 工厂动态创建 AI 供应商实例 |
| 策略模式 | 每种 AI 供应商实现同一接口，可插拔替换 |
| 队列 + Worker | 异步处理长耗时 AI 生成任务 |
| 统一资产表 | 单表兼顾不同生成模式、多版本历史 |
| 零外部依赖 | 无 Redis/消息队列，全部基于 SQLite |
| 优雅降级 | Stale 请求守卫、任务超时/重试、崩溃恢复 |

## 快速开始

## React版
- GitCode[主库]: [https://gitcode.com/ai168/ai168-comic-react.git](https://gitcode.com/ai168/ai168-comic-react.git)
- Gitee: [https://gitee.com/zhanghuibo/ai168-comic-react.git](https://gitee.com/zhanghuibo/ai168-comic-react.git)
- GitHub: [https://github.com/1213912309/ai168-comic-react.git](https://github.com/1213912309/ai168-comic-react.git)

##  vue3版--开发中
- GitCode[主库]: [https://gitcode.com/ai168/ai168-comic-vue3.git](https://gitcode.com/ai168/ai168-comic-vue3.git)
- Gitee: [https://gitee.com/zhanghuibo/ai168-comic-vue3.git](https://gitee.com/zhanghuibo/ai168-comic-vue3.git)
- GitHub: [https://github.com/1213912309/ai168-comic-vue3.git](https://github.com/1213912309/ai168-comic-vue3.git)

## 客户端版 — Tauri 桌面端

- GitCode[主库]: [https://gitcode.com/ai168/ai168-comic-app.git](https://gitcode.com/ai168/ai168-comic-app.git)
- Gitee: [https://gitee.com/zhanghuibo/ai168-comic-app.git](https://gitee.com/zhanghuibo/ai168-comic-app.git)
- GitHub: [https://github.com/1213912309/ai168-comic-app.git](https://github.com/1213912309/ai168-comic-app.git)

桌面客户端基于 **Tauri v2** 封装，内嵌 Node.js 运行 Next.js 后端，支持 macOS / Windows。

### 默认登录账号

启动后访问登录页面，使用以下默认账号登录：

| 账号 | 密码 |
|------|------|
| `admin` | `admin123` |

### 环境要求

- **Node.js** v18+（推荐 v24.14.0）
- **pnpm** — 包管理
- **FFmpeg** — 视频合成必需（`brew install ffmpeg` / `apt install ffmpeg`）
- **Rust** 1.70+ — Tauri 构建必需（`curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh`）
- **系统依赖**:
  - macOS: Xcode Command Line Tools（`xcode-select --install`）
  - Windows: Visual Studio Build Tools + WebView2（Win10+ 已内置）
  - Linux: `libwebkit2gtk-4.1-dev`, `libappindicator3-dev`, `librsvg2-dev` 等

### 开发模式（热更新）

```bash
# 1. 安装前端依赖
pnpm install

# 2. 初始化数据库
pnpm drizzle-kit push

# 3. 启动桌面端（自动清理残留 + 启动 Tauri + Next.js 热更新）
pnpm tauri:dev
```

> `pnpm tauri:dev` 会自动执行：
> 1. 运行 `scripts/cleanup.sh` — 杀掉残留的旧进程，释放 3000 端口
> 2. 运行 `pnpm dev` — 启动 Next.js 开发服务器（端口 3000）
> 3. 编译 Rust 并打开 Tauri 桌面窗口（直连 dev server，跳过 sidecar）

### 构建与打包

```bash
# 1. 安装依赖
pnpm install

# 2. 下载 Node.js 运行时（用于 sidecar 打包）
bash src-tauri/scripts/download-node.sh

# 3. 构建 Next.js 并准备 standalone 资源
bash src-tauri/scripts/prepare-standalone.sh

# 4. 构建 Tauri 桌面安装包
pnpm tauri build
```

**构建产物位置：**

| 平台 | 产物路径 |
|------|---------|
| macOS | `src-tauri/target/release/bundle/dmg/AI168\ Comic\ Builder.dmg` |
| Windows | `src-tauri/target/release/bundle/msi/AI168\ Comic\ Builder.msi` |

**构建说明：**
- 首次构建会下载 Rust crate 依赖，耗时较长
- 安装包约 150~200MB（含 Node.js runtime + Next.js standalone）

## QQ交流群
- QQ交流1群：83711992

## 微信交流群
<img src="images/20260602160035_95_2.jpg" width="200" alt="微信" />
<img src="images/20260602160037_96_2.jpg" width="200" alt="微信" />

## 钉钉交流群
<img src="images/qrcode.png" width="200" alt="微信" />

## 感谢所有赞助者的慷慨相助，感谢每一位关注项目的朋友，我会继续加油💪

<img src="images/20260529145554_87_2.jpg" width="200" alt="微信" />
<img src="images/20260529150343_89_2.jpg" width="200" alt="支付宝" />

## 如何提反馈建议
- 直接项目下创建Issues
- 作者邮箱反馈:huibo.zhang@foxmail.com
- 群聊反馈
- 扫码添加作者微信好友
## License

[Apache License 2.0](./LICENSE)

## 声明
- 本项目可自由使用、修改和传播，作者不承担任何责任或担保。
- 本项目使用 AI 技术，部分功能可能涉及隐私和数据安全问题，请谨慎使用。
- 本项目不涉及任何政治话题，请勿在项目中生成发表任何观点和评论。
- 本项目不涉及任何敏感话题，请勿在项目中生成发表任何敏感内容。