# FlowVideo

**Repository Path**: dom-project/FlowVideo

## Basic Information

- **Project Name**: FlowVideo
- **Description**: FlowVideo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-16
- **Last Updated**: 2026-09-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FlowVideo Web

c

## 功能

### 文生图 `/`

- ComfyUI 本地调用，工作流：Z-Image-Turbo
- 异步排队出图：可连续提交，表单不锁定；状态约 **4 秒** 轮询一次
- 比例约束宽高（改一边另一边联动）；完成图可点击放大预览
- 队列持久化到本机 `localStorage`（`flowvideo.home.jobs`），刷新可续查
- 「清空队列」会同时清空 `public/images/gen/` 入库图

### 剧本首尾帧 `/storyboard`

- 粘贴小说 / 剧本 → DeepSeek 分镜（**分镜数量由 AI 自判**）
- 全片画风锁定（正向 / 负面词），提示词语言可选中 / 英 / 双语
- 人物 `identity_lock` 五官定妆锚点，保证各镜人物外貌一致
- 输出资产：人物肖像 / 场景 / 道具 / 首尾帧提示词
- 镜间切换字段 `cut_to_next` / `cut_note`（硬切、转场等由模型判断）
- **分镜可编辑**：添加、前方/后方插入、删除；节拍与首尾帧可改
- 生成分镜后左侧可收起为顶部脚本条，腾出画布空间
- **草稿箱长存储**：JSON 落盘到 `public/storyboards/drafts/`
- 单条或批量排队出图（复用 ComfyUI / `useImageQueue`）

### 画风管理 `/styles`

- 按大类管理：电影 / 动漫 / 绘本 / 3D / 国风 / 其他
- 每条画风含正向、负面提示词；可设默认画风
- 数据保存在本机浏览器（`flowvideo.stylePresets` 等）
- 内置画风可通过版本号自动同步文案；支持「恢复内置」

### 资源管理 `/assets`

- Tab：**文生图** / **分镜资源**；右侧显示当前 Tab 张数与体积
- 单张删除、清空全部文生图、按草稿清空分镜图
- 清空文生图时同步清除首页队列缓存

## 技术栈

- Next.js 16（App Router）
- React 19 + antd 6 + Tailwind CSS 4
- ComfyUI HTTP API
- DeepSeek Chat Completions（JSON 输出）

## 环境要求

1. Node.js 18+
2. 本机已启动 [ComfyUI](https://github.com/comfyanonymous/ComfyUI)（默认 `http://127.0.0.1:8188`）
3. ComfyUI 已放置 Z-Image-Turbo 相关模型：

```
ComfyUI/models/
├── text_encoders/qwen_3_4b.safetensors
├── diffusion_models/z_image_turbo_bf16.safetensors
└── vae/ae.safetensors
```

4. DeepSeek API Key（剧本分镜页需要）

## 快速开始

```bash
npm install
```

在项目根目录配置 `.env`：

```env
COMFYUI_URL=http://127.0.0.1:8188
DEEPSEEK_API_KEY=sk-你的密钥
# 可选，默认 deepseek-chat
# DEEPSEEK_MODEL=deepseek-chat
# 公司代理/自签证书导致 TLS 失败时打开
DEEPSEEK_INSECURE_TLS=1
```

启动：

```bash
npm run dev
```

打开：

| 页面 | 地址 |
|------|------|
| 文生图 | http://localhost:3000 |
| 剧本首尾帧 | http://localhost:3000/storyboard |
| 画风管理 | http://localhost:3000/styles |
| 资源管理 | http://localhost:3000/assets |

## 目录结构

```
src/
├── app/
│   ├── page.jsx                      # 文生图首页
│   ├── storyboard/page.jsx           # 剧本首尾帧
│   ├── styles/page.jsx               # 画风管理
│   ├── assets/page.jsx               # 资源管理
│   ├── layout.jsx
│   └── api/
│       ├── comfyUi/
│       │   ├── route.js              # POST 提交 / GET 查询
│       │   └── workflow/t2Image.js
│       ├── deepseek/storyboard/route.js
│       └── storyboard/
│           ├── drafts/route.js       # 草稿 CRUD
│           └── assets/route.js       # 图片列表 / 入库 / 删除
├── api/
│   ├── comfyUi/t2Image.js
│   ├── storyboard.js
│   └── z-image/image_z_image_turbo.json
├── components/AppNav.jsx
├── hooks/useImageQueue.js            # 出图队列（约 4s 轮询）
├── lib/stylePresets.js               # 画风预设
└── styles/globals.css

public/
├── images/gen/                       # 首页文生图入库
└── storyboards/
    ├── drafts/                       # 草稿 JSON
    └── assets/<草稿ID>/              # 分镜出图
```

## 本地存储约定

| Key / 路径 | 说明 |
|------------|------|
| `flowvideo.home.jobs` | 首页出图队列 |
| `flowvideo.stylePresets` | 画风列表 |
| `flowvideo.styleDefaultId` | 默认画风 ID |
| `flowvideo.styleBuiltinRev` | 内置画风版本（低于代码常量时自动刷新） |
| `flowvideo.storyboard.draftId` | 上次打开的分镜草稿 |
| `flowvideo.storyboard.imgShort` | 分镜出图短边 |
| `flowvideo.storyboard.promptLang` | 提示词语言 `zh` / `en` / `both` |
| `public/images/gen/` | 文生图文件 |
| `public/storyboards/drafts/*.json` | 分镜工程（含 jobs） |
| `public/storyboards/assets/<id>/` | 分镜入库图 |

## 草稿箱 / 资源 API

生成内容写入磁盘，刷新或重开草稿可恢复。

| 方法 | 路径 | 说明 |
|------|------|------|
| `GET` | `/api/storyboard/drafts` | 草稿列表 |
| `GET` | `/api/storyboard/drafts?id=` | 读取单个草稿（含 jobs） |
| `POST` | `/api/storyboard/drafts` | 新建或覆盖保存 |
| `DELETE` | `/api/storyboard/drafts?id=` | 删除草稿及图片 |
| `GET` | `/api/storyboard/assets?scope=all\|gen\|storyboard` | 列出入库图 |
| `POST` | `/api/storyboard/assets` | Comfy 图下载入库（有 `draftId` → 分镜目录，否则 → gen） |
| `DELETE` | `/api/storyboard/assets` | `{ url }` 删单文件；`{ draftId }` 清草稿图；`{ clearGen: true }` 清 gen |

DeepSeek 分镜成功后会自动入库；出图完成后自动落盘并回写草稿。

## API 说明

### ComfyUI 代理

| 方法 | 路径 | 说明 |
|------|------|------|
| `POST` | `/api/comfyUi` | 提交文生图，立即返回 `promptId` |
| `GET` | `/api/comfyUi?promptId=` | 查询任务状态：`pending` / `done` / `error` |

`POST` body：

```json
{
  "prompt": "提示词",
  "negative": "可选负面词",
  "width": 1088,
  "height": 1088
}
```

宽高限制在 `512–2048`，并自动对齐到 16 的倍数。

### DeepSeek 分镜

| 方法 | 路径 | 说明 |
|------|------|------|
| `POST` | `/api/deepseek/storyboard` | 小说 → JSON 分镜与提示词 |

`POST` body 大致包含小说正文、锁定画风、提示词语言等。分镜数量由模型按叙事节奏自行判断（一般约 3–20 镜）。

返回大致结构：

```json
{
  "success": true,
  "data": {
    "title": "",
    "summary": "",
    "characters": [{ "id", "name", "portrait_prompt", "appearance" }],
    "scenes": [{ "id", "name", "prompt", "description" }],
    "props": [{ "id", "name", "prompt", "description" }],
    "shots": [{
      "index": 1,
      "beat": "",
      "first_frame_prompt": "",
      "last_frame_prompt": "",
      "cut_to_next": "",
      "cut_note": "",
      "character_ids": [],
      "scene_id": "",
      "prop_ids": []
    }]
  }
}
```

## 出图默认尺寸

| 类型 | 宽 × 高 |
|------|---------|
| 文生图默认 | 1088 × 1088 |
| 人物肖像 | 832 × 1104（3:4） |
| 场景 / 首尾帧 | 1344 × 768（16:9） |
| 道具 | 1088 × 1088 |

## 常用脚本

```bash
npm run dev          # 开发
npm run build        # 构建
npm run start        # 生产启动
npm run lint         # ESLint
npm run format       # Prettier
```

## 注意事项

- `.env` 含密钥，请勿提交到 git
- 首次出图需加载模型，耗时可能较长；前端按任务独立计时并轮询（约 4s）
- 页面为视口锁定布局，内容在面板内滚动
- 控制台若出现 `VM####` / `reportAllChanges` / `startTime` 一类报错，多为浏览器扩展注入，与业务代码无关