# AI Canvas Studio 架构图

本文档保存可放到官网或产品文档中的 Mermaid 架构图。后续如果开发官网，可以直接把这些图放进架构说明区，也可以拆成 React 组件渲染。

## 产品架构

```mermaid
flowchart TB
  User["创作者 / 设计师 / 运营"] --> CanvasApp["AI 画布 Web App"]

  subgraph WebLayer["AI 画布 Web App"]
    Canvas["无限画布"]
    Toolbar["AI 工具面板"]
    AssetPanel["素材面板"]
    LayerPanel["图层面板"]
    HistoryPanel["历史 / 版本"]
    ExportPanel["导出面板"]
  end

  CanvasApp --> WebLayer
  WebLayer --> BFF["Canvas BFF / API Gateway"]

  subgraph Backend["应用后端"]
    BFF --> ProjectService["项目服务"]
    BFF --> CanvasService["画布状态服务"]
    BFF --> AssetService["素材服务"]
    BFF --> GenerationService["生成任务编排"]
    BFF --> BillingService["用量与计费服务"]
    BFF --> AuditService["安全与审计服务"]
  end

  subgraph AIPlatform["AI 模型平台"]
    GenerationService --> ModelRegistry["模型注册中心"]
    GenerationService --> ModelRouter["模型路由"]
    ModelRouter --> TextToImage["文生图模型"]
    ModelRouter --> ImageToImage["图生图模型"]
    ModelRouter --> Inpaint["局部重绘模型"]
    ModelRouter --> Outpaint["扩图模型"]
    ModelRouter --> Cutout["抠图 / 分割模型"]
    ModelRouter --> Upscale["高清放大模型"]
    ModelRouter --> Video["视频模型"]
  end

  subgraph Infra["基础设施"]
    Queue["任务队列"]
    ObjectStore["对象存储 / CDN"]
    Database["Postgres"]
    Redis["Redis 缓存"]
    Observability["日志 / 指标 / 链路追踪"]
  end

  GenerationService --> Queue
  AssetService --> ObjectStore
  ProjectService --> Database
  CanvasService --> Database
  GenerationService --> Redis
  Backend --> Observability
```

## 生成任务流程

```mermaid
sequenceDiagram
  actor User as 用户
  participant Canvas as 画布 Web App
  participant API as Canvas API
  participant Registry as 模型注册中心
  participant Router as 模型路由
  participant Queue as 任务队列
  participant Provider as 模型供应商
  participant Store as 对象存储

  User->>Canvas: 选择工具、提示词、参考图和模型
  Canvas->>API: 创建生成任务
  API->>Registry: 校验模型能力和参数 schema
  Registry-->>API: 返回能力、费用、限制和供应商配置
  API->>Queue: 写入归一化生成任务
  Queue->>Router: 分发任务
  Router->>Provider: 调用供应商 API
  Provider-->>Router: 返回生成媒体或失败原因
  Router->>Store: 保存输出素材
  Router-->>API: 更新任务状态和素材 ID
  API-->>Canvas: 推送任务状态
  Canvas-->>User: 将结果插入画布
```

## 模型动态切换

```mermaid
flowchart LR
  Tool["当前工具"] --> Capability["所需模型能力"]
  Selection["选中对象 / 输入素材"] --> Capability
  Preference["质量 / 速度 / 成本偏好"] --> Capability
  Capability --> Registry["模型注册中心"]
  Registry --> Available["可用模型列表"]
  Available --> ParameterSchema["动态参数 schema"]
  ParameterSchema --> UI["自适应参数面板"]
  UI --> NormalizedTask["归一化 AI 任务"]
  NormalizedTask --> Router["供应商路由"]
  Router --> ProviderA["供应商 A"]
  Router --> ProviderB["供应商 B"]
  Router --> ProviderC["供应商 C"]
```

## 官网表达建议

官网架构区可以围绕四句话展开：

- 一个画布：承载生成、编辑、对比和导出。
- 一个模型注册中心：统一管理文生图、图生图、局部编辑和视频模型。
- 一个任务编排层：处理排队、重试、兜底、计费和审计。
- 一个资产层：保存项目、素材、生成历史和可复现参数。

## 技术选型建议

| 层级 | 建议 |
|---|---|
| 前端框架 | Next.js / React |
| 画布引擎 | Konva、Fabric.js，或参考 tldraw 的自研对象层 |
| 状态管理 | Zustand 或 Redux Toolkit |
| 任务状态 | SSE 优先，复杂协作场景再引入 WebSocket |
| 后端 | Node.js/NestJS、Python/FastAPI，或现有团队熟悉的服务框架 |
| 队列 | BullMQ、Celery、Sidekiq 或云队列 |
| 数据库 | Postgres |
| 缓存 | Redis |
| 素材存储 | S3/OSS/COS + CDN |
| 监控 | OpenTelemetry + 日志/指标/告警平台 |