# chenshuo2004/cs-board architecture

> Architecture diagram of the GitHub repository chenshuo2004/cs-board, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/chenshuo2004/cs-board
- Repository: https://github.com/chenshuo2004/cs-board

## Overview

白板声画工坊是本地 AI 视频制作工作台。用户在制作台提交文案、参考音频及可选风格/人物素材；系统克隆音色、拆解内容、生成插画，再按旁白节奏渲染白板动画或动态信息图并合成 MP4。前端还提供音色库、画风库、IndexTTS 设置、历史任务和独立文生图。README 描述了完整产品流程；未展示的 API 处理细节及部分渲染调用关系不作确定推断。

Main entry points: [`webapp/server.py`](https://github.com/chenshuo2004/cs-board/blob/main/webapp/server.py) (本地 API 与任务编排), [`web/app/page.tsx`](https://github.com/chenshuo2004/cs-board/blob/main/web/app/page.tsx) (制作台), [`scripts/render_infographic.py`](https://github.com/chenshuo2004/cs-board/blob/main/scripts/render_infographic.py) (动态信息图生成), [`scripts/render_stream_whiteboard.py`](https://github.com/chenshuo2004/cs-board/blob/main/scripts/render_stream_whiteboard.py) (白板动画生成)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["制作体验"]
  node_creator["制作台<br/>[page.tsx]"]
  node_libraries["资源管理<br/>[library-pages.tsx]"]
  node_image_lab["文生图工作台<br/>[page.tsx]"]
end

subgraph group_orchestration["任务编排"]
  node_api["本地 API 与任务编排<br/>[server.py]"]
  node_queue["制作队列与恢复<br/>[server.py]"]
  node_local_assets[("本地任务与素材<br/>[server.py]")]
  node_voice_library[("本地音色库<br/>[server.py]")]
  node_style_library[("画风库<br/>[server.py]")]
end

subgraph group_media["媒体生成"]
  node_tts{{"IndexTTS 服务"}}
  node_text_model{{"文本模型"}}
  node_image_model{{"图片模型"}}
  node_semantic_timing["语义时间轴"]
  node_key_text["重点词叠加<br/>[add_key_text.py]"]
  node_infographic["动态信息图生成"]
end

subgraph group_rendering["渲染输出"]
  node_whiteboard["白板动画生成"]
  node_stream_renderer["流式渲染工具<br/>[stream_render.py]"]
  node_remotion["信息图视频组件<br/>[video.tsx]"]
  node_composition["Remotion 合成入口<br/>[root.tsx]"]
  node_mp4["MP4 成片"]
end

node_maker(("视频创作者"))

node_maker -->|"提交素材"| node_creator
node_creator -->|"创建任务"| node_api
node_libraries -->|"管理资源"| node_api
node_image_lab -->|"请求生成"| node_api
node_creator -.->|"复用音色"| node_voice_library
node_creator -.->|"选择画风"| node_style_library
node_api -->|"排队恢复"| node_queue
node_api -.->|"保存任务素材"| node_local_assets
node_api -.->|"读取音色"| node_voice_library
node_api -.->|"读取画风"| node_style_library
node_api -->|"克隆音色"| node_tts
node_api -->|"拆解文案"| node_text_model
node_api -->|"生成插画"| node_image_model
node_api -->|"对齐旁白"| node_semantic_timing
node_api -->|"叠加重点词"| node_key_text
node_api -.->|"启动动画渲染"| node_whiteboard
node_api -.->|"生成信息图"| node_infographic
node_whiteboard -->|"调用渲染"| node_stream_renderer
node_infographic -.->|"使用合成入口"| node_composition
node_composition -->|"注册组件"| node_remotion
node_remotion -.->|"渲染视频"| node_mp4
node_api -->|"导出成片"| node_mp4

click node_creator "https://github.com/chenshuo2004/cs-board/blob/main/web/app/page.tsx"
click node_libraries "https://github.com/chenshuo2004/cs-board/blob/main/web/app/library-pages.tsx"
click node_image_lab "https://github.com/chenshuo2004/cs-board/blob/main/web/app/image-generator/page.tsx"
click node_api "https://github.com/chenshuo2004/cs-board/blob/main/webapp/server.py"
click node_queue "https://github.com/chenshuo2004/cs-board/blob/main/webapp/server.py"
click node_local_assets "https://github.com/chenshuo2004/cs-board/blob/main/webapp/server.py"
click node_voice_library "https://github.com/chenshuo2004/cs-board/blob/main/webapp/server.py"
click node_style_library "https://github.com/chenshuo2004/cs-board/blob/main/webapp/server.py"
click node_semantic_timing "https://github.com/chenshuo2004/cs-board/blob/main/scripts/semantic_timeline.py"
click node_key_text "https://github.com/chenshuo2004/cs-board/blob/main/scripts/add_key_text.py"
click node_infographic "https://github.com/chenshuo2004/cs-board/blob/main/scripts/render_infographic.py"
click node_whiteboard "https://github.com/chenshuo2004/cs-board/blob/main/scripts/render_stream_whiteboard.py"
click node_stream_renderer "https://github.com/chenshuo2004/cs-board/blob/main/scripts/stream_render.py"
click node_remotion "https://github.com/chenshuo2004/cs-board/blob/main/video_renderer/src/video.tsx"
click node_composition "https://github.com/chenshuo2004/cs-board/blob/main/video_renderer/src/root.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_creator,node_libraries,node_image_lab toneBlue
class node_api,node_queue,node_local_assets,node_voice_library,node_style_library toneAmber
class node_tts,node_text_model,node_image_model,node_semantic_timing,node_key_text,node_infographic toneMint
class node_whiteboard,node_stream_renderer,node_remotion,node_composition,node_mp4 toneRose
class node_maker toneIndigo
```

## Components

### 制作体验

- [制作台](https://github.com/chenshuo2004/cs-board/blob/main/web/app/page.tsx): `web/app/page.tsx`
- [资源管理](https://github.com/chenshuo2004/cs-board/blob/main/web/app/library-pages.tsx): `web/app/library-pages.tsx`
- [文生图工作台](https://github.com/chenshuo2004/cs-board/blob/main/web/app/image-generator/page.tsx): `web/app/image-generator/page.tsx`

### 任务编排

- [本地 API 与任务编排](https://github.com/chenshuo2004/cs-board/blob/main/webapp/server.py): `webapp/server.py`
- [制作队列与恢复](https://github.com/chenshuo2004/cs-board/blob/main/webapp/server.py): `webapp/server.py`
- [本地任务与素材](https://github.com/chenshuo2004/cs-board/blob/main/webapp/server.py): `webapp/server.py`
- [本地音色库](https://github.com/chenshuo2004/cs-board/blob/main/webapp/server.py): `webapp/server.py`
- [画风库](https://github.com/chenshuo2004/cs-board/blob/main/webapp/server.py): `webapp/server.py`

### 媒体生成

- **IndexTTS 服务**
- **文本模型**
- **图片模型**
- [语义时间轴](https://github.com/chenshuo2004/cs-board/blob/main/scripts/semantic_timeline.py): `scripts/semantic_timeline.py`
- [重点词叠加](https://github.com/chenshuo2004/cs-board/blob/main/scripts/add_key_text.py): `scripts/add_key_text.py`
- [动态信息图生成](https://github.com/chenshuo2004/cs-board/blob/main/scripts/render_infographic.py): `scripts/render_infographic.py`

### 渲染输出

- [白板动画生成](https://github.com/chenshuo2004/cs-board/blob/main/scripts/render_stream_whiteboard.py): `scripts/render_stream_whiteboard.py`
- [流式渲染工具](https://github.com/chenshuo2004/cs-board/blob/main/scripts/stream_render.py): `scripts/stream_render.py`
- [信息图视频组件](https://github.com/chenshuo2004/cs-board/blob/main/video_renderer/src/video.tsx): `video_renderer/src/video.tsx`
- [Remotion 合成入口](https://github.com/chenshuo2004/cs-board/blob/main/video_renderer/src/root.tsx): `video_renderer/src/root.tsx`
- **MP4 成片**

### Other components

- **视频创作者**

## Connections

- 视频创作者 → 制作台: 提交素材 (evidence: `README.md`)
- 制作台 → 本地 API 与任务编排: 创建任务 (evidence: `README.md`)
- 资源管理 → 本地 API 与任务编排: 管理资源 (evidence: `web/app/library-pages.tsx`)
- 文生图工作台 → 本地 API 与任务编排: 请求生成 (evidence: `web/app/image-generator/page.tsx`)
- 制作台 → 本地音色库: 复用音色 (evidence: `README.md`)
- 制作台 → 画风库: 选择画风 (evidence: `README.md`)
- 本地 API 与任务编排 → 制作队列与恢复: 排队恢复 (evidence: `webapp/server.py`)
- 本地 API 与任务编排 → 本地任务与素材: 保存任务素材 (evidence: `webapp/server.py`)
- 本地 API 与任务编排 → 本地音色库: 读取音色 (evidence: `webapp/server.py`)
- 本地 API 与任务编排 → 画风库: 读取画风 (evidence: `webapp/server.py`)
- 本地 API 与任务编排 → IndexTTS 服务: 克隆音色 (evidence: `README.md`)
- 本地 API 与任务编排 → 文本模型: 拆解文案 (evidence: `README.md`)
- 本地 API 与任务编排 → 图片模型: 生成插画 (evidence: `README.md`)
- 本地 API 与任务编排 → 语义时间轴: 对齐旁白 (evidence: `webapp/server.py`)
- 本地 API 与任务编排 → 重点词叠加: 叠加重点词 (evidence: `webapp/server.py`)
- 本地 API 与任务编排 → 白板动画生成: 启动动画渲染
- 本地 API 与任务编排 → 动态信息图生成: 生成信息图
- 白板动画生成 → 流式渲染工具: 调用渲染 (evidence: `scripts/render_stream_whiteboard.py`)
- 动态信息图生成 → Remotion 合成入口: 使用合成入口
- Remotion 合成入口 → 信息图视频组件: 注册组件 (evidence: `video_renderer/src/root.tsx`)
- 信息图视频组件 → MP4 成片: 渲染视频
- 本地 API 与任务编排 → MP4 成片: 导出成片 (evidence: `README.md`)