Indigo Nebula AI — 漫剧一键生成平台开发记录-尧图网站建设

技术栈 FastAPI + Vue3 + Redis + MySQL + Docker Compose。开发周期：2026 年暑期项目实训。

一、项目概述

Indigo Nebula AI 是一个面向短视频创作者的AI 漫剧制作平台，目标是把"灵感→小说→角色→分镜→图片→视频→配音→成片"这七步流程，全部用一个大模型工作流串起来，实现"一句话生成短视频"。

1.1 业务背景

传统短视频生产里，编剧、分镜、美术、剪辑、配音往往需要多人协作；而这个项目试图让个人创作者只输入一段故事灵感或主题，系统就能自动：

生成小说大纲与章节；

从小说中抽取角色；

把小说拆成分镜脚本；

根据分镜生成图片；

把图片生成视频片段；

给视频配上 AI 语音；

最终合成 MP4 成片。

1.2 核心体验

全流程覆盖：7 步工作流在一个平台闭环完成；

可编辑可干预：每一环节的 AI 产出都能人工修改、重生成、上下文联调；

模型可替换：用户可在后台配置自己的大模型 API Key（智谱、阿里、OpenAI 兼容等）。

二、技术选型

2.1 后端

技术	用途	说明
FastAPI	Web 框架	异步接口、自动 OpenAPI 文档
MySQL	主数据库	用户、作品、角色、分镜、历史记录等
Redis	队列 + 缓存	小说生成队列、任务进度
SQLAlchemy（裸 SQL + 连接池）	数据访问	用 pymysql + DBUtils 做连接池
python-jose / passlib	JWT + 密码加密	用户鉴权
python-multipart	文件上传	素材上传
imageio-ffmpeg	视频合成	后端自带 ffmpeg 二进制，无需系统安装
edge-tts	AI 配音	微软 Edge 神经语音，免费可用

2.2 前端

技术	用途
Vue 3 + Vite	单页应用
TypeScript	类型安全
Pinia	状态管理
Tailwind CSS 3.4	原子化样式
Sass	全局主题变量
Material Symbols	图标系统

2.3 部署

技术	用途
Docker	容器化
Docker Compose	四服务编排：MySQL / Redis / Backend / Frontend
Nginx	前端静态服务 + 反代`/api`、`/static`

三、系统架构

3.1 后端模块划分

app/api：路由层，按业务模块拆分；

app/services：业务逻辑层；

app/repositories：数据访问层（裸 SQL）；

app/providers：外部 AI 服务抽象（文本生成、文生图、视频、TTS）；

app/workers：异步任务工作线程（小说生成队列、导出守护进程）。

3.2 前端目录结构

src/views：页面；

src/components：组件（布局 + UI + 业务）；

src/stores：Pinia 状态；

src/features：按业务域拆分的状态与逻辑。

四、核心功能实现

4.1 小说生成（步骤 1）

早期前端写死走了本地 mock，生成的章节内容全是"水稿"（同一段话重复 N 次）。后来改成真实调用后端POST /api/novel/create，后端用 Redis 队列排队，worker 线程逐章调用智谱 GLM-4-Flash，生成真实小说内容。

关键修改点：

前端stores/novel.ts新增真实生成与轮询进度；

后端NovelCreateRequest的枚举与前端 6 个风格选项对齐；

prompt 中约束标题不再带"第 X 章"前缀，避免章节名重复。

4.2 角色管理（步骤 2）

用智谱 GLM-4-Flash 从小说正文中抽取角色名、外貌、性格、声线等字段。抽取后人工可编辑，保存到角色库。

4.3 分镜设计（步骤 3）

把小说章节按场景拆成若干 shot（镜头）。每个 shot 包含：场景描述、台词、运镜、画面描述、时长。支持批量出图、批量出视频。

4.4 图片生成（步骤 4）

默认走阿里通义千问 qwen-image-2.0-pro，候选：智谱 CogView-3。根据 shot 的画面描述生成对应图片，并回写到 shot 上。

4.5 视频生成（步骤 5）

默认走智谱 CogVideoX-Flash（免费通道）。把图片 + prompt 送进视频模型，生成短视频片段。这个环节是性能瓶颈：单镜生成可能耗时 30s ~ 180s，早期是同步 HTTP 阻塞，后续已识别为需异步队列改造。

4.6 配音剪辑（步骤 6）

用edge-tts把台词转成 MP3，按 shot 顺序拼接音频，再与视频片段对齐合成。

4.7 预览导出（步骤 7）

用FFmpeg把音频、视频片段、转场合成为最终 MP4，存放在/app/static/exports，通过 Nginx/static路径对外访问。

五、部署方案：Docker Compose 全栈

为了把项目搬到腾讯云服务器（2C2G / 40G SSD / Ubuntu 24.04 / Docker 27.5.1），我编写了一整套 Docker Compose 部署配置。

5.1 生成的部署文件

文件	说明
`docker-compose.yml`/`compose.yaml`	四服务编排（MySQL / Redis / backend / frontend）
`backend/Dockerfile`	python:3.12-slim，非 root 用户，阿里云 PyPI 镜像
`front-end/Dockerfile`	node:22-alpine 多阶段构建
`front-end/nginx.conf`+`nginx-main.conf`	Nginx 反代`/api`、`/static`，SPA 回退
`mysql-init/01-create-databases.sql`	自动创建`ai_studio`库
`.env.example`	部署变量模板
`docs/Docker Compose 部署教程.md`	完整操作教程

5.2 资源限制

服务器只有 2GB 内存，Compose 里对每个服务做了mem_limit和cpus限制，并加了 Redis 内存上限。2GB 机器上建议额外创建 2GB Swap，否则同时构建前后端会 OOM。

5.3 构建顺序

同时构建前后端容易把内存吃满，教程建议：

5.4 安全与凭证

.env已加入.gitignore；

用户自管 API Key 用 Fernet 加密落库；

MySQL 端口只绑127.0.0.1，公网只暴露 80/443。

六、前端 iOS 风格重构

最近一轮把前端从 Material Design 3 全面切换为iOS 原生设计语言，但功能与页面结构完全不变。

6.1 设计 Token 替换

没有改 Tailwind 类的名字（否则全站几十处视图要重写），而是把 token 的"值"全部替换成 iOS 系统值：

主色：#007AFF（systemBlue）

背景：#F2F2F7（systemGroupedBackground）

卡片：#FFFFFF+ 圆角 16px / 20px

字体：-apple-system/SF Pro Text/Display

阴影：iOS 三级轻阴影

毛玻璃：backdrop-filter: blur(20px)+bg-white/70

6.2 布局改造

侧栏 → 底部 Tab Bar：毛玻璃、图标 + 文字、选中 systemBlue、底部安全区；

顶栏 → iOS 大标题导航栏：34px 大标题 + 滚动收缩为 17px inline；

卡片 → 分组列表/圆角卡片：更轻量、留白更大。

6.3 组件层

改造了 5 个基础组件并新增 5 个 iOS 组件：

已有组件改造	新增 iOS 组件
BaseButton	GroupedList
BaseCard	ListRow
BaseModal	IosSwitch
BaseEmptyState	IosNavBar
BaseSpinner	SegmentedControl
	PullToRefresh

6.4 下拉刷新（Pull-to-Refresh）

针对"素材资源库"视图接入了 iOS 风格下拉刷新：阻尼 0.5、阈值 64px、顶部下拉触发、松手回弹。该组件为通用组件，其它列表页直接包裹即可复用。

七、遇到的问题与解决方案

7.1 前端生成的是"水稿"（内容重复）

现象：小说正文生成把同一段话重复 N 遍。

根因：前端stores/novel.ts写死走了本地 mock，且调用的后端接口不存在（404 后回退 mock）。

解决：前端改为真实调用POST /api/novel/create并轮询进度；后端补齐枚举对齐与 prompt 约束。

7.2 requirements.txt 依赖缺失

现象：本地能跑，但 Docker 容器启动后报ModuleNotFoundError。

根因：原requirements.txt只列了 9 个包，缺python-dotenv、cryptography（Fernet 加密）、DBUtils（连接池）、pydantic、edge-tts、pillow。

解决：补全依赖，容器构建与运行全部通过。

7.3 vite 8 / rolldown 实验版的 SFC 解析 bug

现象：本地npm run build报错main.css:114:16等，但 CSS 和 SFC 结构完全合法。

根因：项目原用vite ^8（rolldown 实验版），解析含<style>的 Vue SFC 时会错乱地把 script 内容当 CSS 解析。

解决：把package.json中的 vite 降级到稳定版^5.4.10，配套@vitejs/plugin-vue ^5、vue-tsc ^2、typescript ^5.6，容器内全新安装后构建正常。

7.4 容器内权限问题

现象：后端容器用非 root 用户启动后，应用无法创建/app/runtime目录。

根因：Dockerfile中/app目录仍属 root，非 root 用户无写权限。

解决：Dockerfile 里chown -R app:app /app，确保运行时目录、静态目录、缓存目录均可写。

7.5 导出 URL 与静态资源路径

现象：配音/成片文件能生成，但前端播放时 URL 404。

根因：后端用EXPORT_PUBLIC_BASE_URL拼接成片 URL，需要与 Nginx 的/static/反代路径一致。

解决：.env中设EXPORT_PUBLIC_BASE_URL=http://114.132.239.20，Nginx 把/static反代到后端，后端静态目录挂持久卷。

八、项目现状与下一步

8.1 已就绪

✅ 小说、角色、分镜、图片、视频、配音、导出 7 步主链路跑通

✅ 后端 Docker 化 + 依赖补全

✅ 前端 iOS 设计语言全面替换 + 下拉刷新组件

✅ Docker Compose 全栈部署配置与教程

8.2 仍需优化

视频生成异步化：当前单镜出视频仍是同步 HTTP，需改成任务队列 + 持久化作业表，解决超时、并发、断点续跑。

续写 / 单章重生成：后端暂无对应接口，仍走前端 mock。

图片出图参数：尺寸、数量、风格强度等 UI 已画但后端未真正读取。

HTTPS + 域名：目前用公网 IP，后续可配 Nginx + SSL 证书。

九、总结

这个项目让我完整走了一次"AI 产品从业务设计到部署上线"的链路。最深的体会是：AI 项目难的不是调模型，而是把模型的不确定性封装成稳定的工程流程。小说生成、视频生成、TTS、FFmpeg 合成，每一个环节都可能因为 API 超时、格式不兼容、资源不足而卡住，真正要做的是队列、重试、状态机、资源隔离。

前端方面，"不改类名、只换 token 值"是我做的最正确的设计决策，它让 iOS 重构在几天内覆盖全站，而不是逐页重写。这也说明，好的设计系统（Design System）是重构的前提。

如果你也在做类似的 AI 内容生成平台，欢迎在评论区交流：模型选型、队列设计、前端组件化、Docker 部署，都可以聊。

资讯详情

Indigo Nebula AI — 漫剧一键生成平台开发记录