# drama

**Repository Path**: iutils/drama

## Basic Information

- **Project Name**: drama
- **Description**: AI漫剧创作平台
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-10
- **Last Updated**: 2026-06-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎬 AI漫剧创作平台

基于 Vue3 + Node.js + OpenAI兼容接口 的漫剧全流程创作工具。支持文本、图片、视频三类模型独立配置，对接任意OpenAI兼容平台。

## 功能模块

| 模块 | 功能 |
|------|------|
| 项目管理 | 创建/编辑/删除项目，自定义名称、类型和封面 |
| 剧集管理 | 项目下剧集增删改查，自动排序 |
| 剧本创作 | AI流式生成漫剧剧本，支持编辑完善 |
| 分镜创作 | AI分析剧本自动拆解分镜脚本，批量生成分镜图 |
| 固定角色 | 角色管理 + AI生成立绘 + 场景背景图生成 |
| 视频生成 | 分镜图转视频，异步任务提交+状态查询 |

## 技术栈

- **前端**: Vue 3 + Vue Router + Pinia + TailwindCSS + Vite
- **后端**: Node.js + Express + OpenAI SDK
- **AI接口**: OpenAI兼容协议，支持任意兼容平台（智谱AI、DeepSeek、通义千问等）
  - 文本/图片/视频三通道独立配置 API Key、Base URL、模型名
- **存储**: JSON 文件存储，生成图片/视频按日期存放于 `outputs/`

## 快速开始

### 1. 启动后端

```bash
cd backend
npm install
npm run dev
```

服务运行在 `http://localhost:3001`

### 2. 启动前端

```bash
cd frontend
npm install
npm run dev
```

访问 `http://localhost:5173`

### 3. 配置 AI 模型

在页面右上角点击 **⚙️ 模型配置**，分别填入文本/图片/视频的：

- **API Key** — 平台密钥
- **Base URL** — API 端点地址
- **模型名称** — 具体模型ID

配置实时生效，无需重启服务。

## 创作流程

1. **创建项目** → 设置名称、类型、封面
2. **固定角色** → 手动添加角色，AI自动生成立绘和场景图
3. **创建剧集** → 在项目下创建各集
4. **剧本创作** → 进入剧集，AI根据角色信息流式生成剧本
5. **分镜创作** → AI分析剧本自动拆解分镜，生成分镜图（手机竖屏 576×1024）
6. **视频生成** → 点击 🎬 提交异步任务，通过 🔍 查询生成状态（手机竖屏 720×1280）
7. **编辑完善** → 手动修改剧本、分镜细节和转场效果

## API 接口

### 项目管理 `/api/projects`
| 方法 | 路径 | 说明 |
|------|------|------|
| GET | `/` | 获取项目列表 |
| POST | `/` | 创建项目 |
| GET | `/:id` | 获取项目详情 |
| PUT | `/:id` | 更新项目 |
| DELETE | `/:id` | 删除项目 |

### 剧集管理 `/api/episodes`
| 方法 | 路径 | 说明 |
|------|------|------|
| GET | `/` | 获取剧集列表（按 projectId 过滤） |
| POST | `/` | 创建剧集 |
| PUT | `/:id` | 更新剧集 |
| DELETE | `/:id` | 删除剧集 |

### 剧本创作 `/api/scripts`
| 方法 | 路径 | 说明 |
|------|------|------|
| POST | `/generate` | 流式生成剧本（SSE） |
| POST | `/` | 保存剧本 |
| GET | `/:id` | 获取剧本 |
| PUT | `/:id` | 更新剧本内容 |

### 分镜创作 `/api/storyboard`
| 方法 | 路径 | 说明 |
|------|------|------|
| POST | `/generate` | AI生成分镜脚本 |
| GET | `/:id` | 获取分镜数据 |
| PUT | `/:id` | 更新分镜数据 |
| POST | `/:id/generate-images` | 批量生成分镜图 |
| POST | `/:id/shots/:shotIndex/image` | 生成单张分镜图 |
| POST | `/:id/shots/:shotIndex/video` | 提交视频生成任务 |
| GET | `/:id/shots/:shotIndex/video/status` | 查询单个视频任务状态 |
| POST | `/:id/generate-all-videos` | 批量提交所有视频任务 |
| GET | `/:id/video-status` | 批量查询所有视频任务状态 |
| GET | `/:id/composite` | 获取视频合成播放数据 |

### 角色管理 `/api/characters`
| 方法 | 路径 | 说明 |
|------|------|------|
| GET | `/` | 获取角色列表 |
| POST | `/` | 创建角色 |
| PUT | `/:id` | 更新角色 |
| DELETE | `/:id` | 删除角色 |
| POST | `/:id/generate-image` | AI生成角色立绘 |
| POST | `/generate-scene` | AI生成场景背景图 |

### 配置管理 `/api/config`
| 方法 | 路径 | 说明 |
|------|------|------|
| GET | `/` | 获取当前配置 |
| POST | `/` | 更新配置（实时生效） |

## 项目结构

```
drama/
├── backend/
│   ├── server.js              # Express 服务入口
│   ├── config.js              # 统一配置管理
│   ├── routes/
│   │   ├── projects.js        # 项目管理路由
│   │   ├── episodes.js        # 剧集管理路由
│   │   ├── scripts.js         # 剧本创作路由
│   │   ├── storyboard.js      # 分镜+图片+视频路由
│   │   ├── characters.js      # 角色管理路由
│   │   └── config.js          # 配置读写路由
│   ├── utils/
│   │   ├── ai.js              # AI客户端（OpenAI兼容，文本/图片/视频）
│   │   └── store.js           # JSON文件存储层
│   ├── data/                  # JSON数据存储
│   └── outputs/               # 生成图片/视频（按日期）
├── frontend/
│   ├── src/
│   │   ├── views/
│   │   │   ├── Projects.vue        # 项目列表
│   │   │   ├── ProjectDetail.vue   # 项目详情（标签布局）
│   │   │   ├── Episodes.vue        # 剧集管理
│   │   │   ├── ScriptEditor.vue    # 剧本创作
│   │   │   ├── StoryboardView.vue  # 分镜创作
│   │   │   └── Characters.vue      # 角色管理
│   │   ├── components/
│   │   │   └── ModelConfig.vue     # 模型配置弹窗
│   │   ├── api/index.js            # API封装
│   │   └── router/index.js         # 路由配置
│   └── vite.config.js
└── README.md
```