tldraw + FastAPI FastAPI+ React React+ TypeScript TypeScript + PostgreSQL+ Redis+ Docker+ LangGraph+ SQLModel

用 LangGraph 多智能体流水线把故事创意编排成漫剧视频成片

LangGraph 负责多阶段编排与恢复执行,FastAPI/SQLModel 支撑后端 API 与持久化,tldraw 提供画布审阅

✓ 可恢复/可取消/可反馈的流程✓ WebSocket 实时进度展示 ✕ 不适合直接用于工业生产环境

方案简介

openOii 是一个以 LangGraph 为核心的 AI 漫剧生成学习项目,定位为「故事想法 → 多智能体协作 → 漫剧成片」。它把一个故事创意串成规划(Outline/Plan)、角色与分镜生成(Render)、视频生成与合成(Compose/Critic)的完整多阶段 AI 生成链路,并用无限画布展示过程与结果。

该项目的重点在于验证多阶段编排、恢复执行、实时进度与前后端协作:后端基于 FastAPI + SQLModel + LangGraph,基础设施使用 PostgreSQL 与 Redis,前端使用 React 18 + TypeScript,并以 tldraw 实现无限画布,供用户审阅角色、分镜与生成结果。

适合人群:想学习 LangGraph 多智能体编排的开发者、对 AI 视频/漫剧生成流程感兴趣的独立创作者。注意作者明确警告这是一个学习/演示项目,不适合直接用于工业生产环境。

亮点与能力

该项目实际具备的能力包括:

  • 多阶段 AI 生成链路:Outline/Plan/Render/Compose/Critic 等专家 Agent 接力完成从规划到成片
  • WebSocket 实时进度:生成过程实时推送给前端
  • 可恢复 / 可取消 / 可反馈的 run 流程
  • tldraw 无限画布:审阅角色、分镜与结果,画布选中可绑定实体到对话与 Inspector
  • 前端环境变量配置面板:在线管理模型与基础服务
  • 九宫格分镜 + 单格重做,支持多选批量重做与多格反馈
  • Skill 库驱动编排入口:保留 story-anime / character-design / quick-short 等常用简单 Skill
  • Universe + Asset + StyleTemplate 资产复用,支持 IP 宇宙章节与共享角色

组成与分工

  • LangGraph:多智能体编排核心,通过 approval 节点中的 interrupt()Command(resume=…) 实现 HITL 人工介入,app/orchestration/driver.py 抽出 interrupt 循环
  • FastAPI:后端 API 框架,暴露 API Docs(/docs)
  • SQLModel:数据模型与持久化(如 Project.skill_id 持久化)
  • React 18 + TypeScript:前端框架,构建导演台界面
  • tldraw:无限画布,承载角色、分镜与生成流程的可视化与选中绑定
  • PostgreSQL + Redis:基础设施层,支撑数据存储与任务状态
  • Docker:通过 docker-compose 一键启动全部服务
  • uv:Python 依赖管理与后端运行
  • pnpm:前端包管理与脚本执行

前置要求

运行该项目需要:

  • Docker 与 docker-compose(用于一键启动 PostgreSQL、Redis 等基础设施)
  • Python 后端使用 uv 管理依赖
  • 前端使用 pnpm 管理依赖

安装依赖的命令:

后端:
bash
cd backend
uv sync

前端:
bash
cd frontend
pnpm install

实施步骤

从零到跑通的完整步骤:

1. 准备环境变量

复制后端环境变量示例文件:

bash
cp backend/.env.example backend/.env

2. 启动服务

使用 docker-compose 一键启动:

bash
docker-compose up -d

3. 访问验证

  • Frontend: http://localhost:15173
  • API Docs: http://localhost:18765/docs

使用与配置要点

本地开发模式下可分别启动前后端:

后端:
bash
cd backend
uv run uvicorn app.main:app --reload --host 0.0.0.0 --port 18765

前端:
bash
cd frontend
pnpm install
pnpm dev

日常验证与测试命令:

bash

backend

cd backend
uv run pytest
uv run ruff check app tests

frontend

cd frontend
pnpm test
pnpm build

前端质量验收标准包括:pnpm exec vitest(touched + related)green、pnpm build / tsc green,以及手动验证打开项目观察 run/recovery chrome、选中分镜格、查看反馈绑定与单格重做等交互。

注意事项与常见问题

  • 作者明确警告:这是一个 LangGraph 学习 / 演示项目,重点是验证多阶段编排、恢复执行、实时进度与前后端协作,不适合直接用于工业生产环境
  • 复杂实验流明确不做:拉片复刻已从产品面移除(catalog/UI/API 已卸),真视频上传多模态、画布图编默认不做。
  • Skill 库只保留 3 个常用简单 Skill(story-anime / character-design / quick-short),不做只有 catalog 名没有 directives/template 的薄壳 Skill。
  • 复刻原则是复刻产品原语,不 1:1 抄 UI、不追闭源模型护城河;不做闭源视频模型供应链与积分体系。

优缺点

  • ✓ 可恢复/可取消/可反馈的流程
  • ✓ WebSocket 实时进度展示
  • ✕ 不适合直接用于工业生产环境

出处

本方案挖掘自开源项目 xeronsh/openOii,方案内容与实施命令均来自其 README 原文。

方案出处
xeronsh/openOii:故事想法 → 多智能体协作 → 漫剧成片 | 基于 LangGraph 的 AI 漫剧生成平台
395 star 故事想法 → 多智能体协作 → 漫剧成片 | 基于 LangGraph 的 AI 漫剧生成平台

本方案由真实开源项目挖掘整理,实施命令均来自其 README 原文,安装使用请遵循项目开源协议。