AI 画板

这是一个可公开预览的 AI 画板：单页前端与 NestJS API 同进程托管，支持文本生成图片，也可上传参考图做图生图。生产环境挂在本站路径 `/ai-canvas/`，与博客同域反代，作品页一点即可试用。

设计目标

• 可演示：访客无需本地环境，打开路径即可创作
• 链路完整：提示词 → 模型生成 → OSS 落盘 → 列表回看
• 上传不绕后端大文件：参考图走 OSS Post 直传，签名由服务端签发
• 同域嵌入：`PUBLIC_BASE_PATH` 适配子路径，前端 API 自动加前缀
• 公开场景可兜底：生成接口按 IP 简易限流，降低滥用成本

你能做什么

1. 在「创作」页输入中文 / 英文描述，一键文生图
2. 可选上传参考图，走图生图（编辑）模式
3. 在「列表」页浏览本会话内生成记录，支持删除元数据
4. 结果图保存在阿里云 OSS，链接可直接打开或另存

从设计到实现

1. 交互与界面

• 移动优先的单页 `public/index.html`（原生 HTML / CSS / JS + axios）
• 底部导航在「列表 / 创作」间切换；创作区含提示词、参考图预览、生成状态与结果面板
• 上传成功后展示 OSS URL，生成完成后可预览与保存

2. 生成链路

• 服务端用官方 `dashscope-sdk-official` 调用通义万相
  • 文生图：`wan2.6-t2i`
  • 图生图：`wan2.6-image`（多模态输入 text + image）
• 模型返回临时图 URL 后，服务端拉取并转存到自有 Bucket，再写入内存作品列表
• DTO 经 `class-validator` 校验：`prompt` 必填，可选 `imageUrl` / `size` / `promptExtend` / `watermark`

3. OSS 直传与回存

• `GET /ai/oss/upload-signature`：签发浏览器直传 Policy（AccessKey 不进前端）
• 浏览器 `FormData` POST 到 OSS；成功后用返回的公开 URL 作为图生图输入
• 生成结果：`uploadFromUrl` 再写入 `OSS_PREFIX`，保证作品链接长期可用

4. 子路径与静态托管

• Nest `ServeStatic` 托管 `public/`，首页由控制器注入 `base-path` meta
• 前端统一 `api('/ai/...')`，本地无前缀、生产为 `/ai-canvas`
• 宝塔 Nginx `location ^~ /ai-canvas/` 反代到容器 `127.0.0.1:3001`，剥离路径前缀

5. 安全与部署

• `POST /ai/image` 进程内按 IP 限流（例如每分钟少量次数）
• `trust proxy` 以便反代后识别真实客户端 IP
• Docker Compose 独立项目名 `ai-canvas`，内存上限约 384m，与博客容器共存于同一台 ECS
• 图库元数据在内存中；容器重启后列表清空，OSS 上的文件仍在

技术栈一览

层	技术
前端	静态 HTML/CSS/JS、axios
后端	NestJS 11、ConfigModule、ValidationPipe
模型	DashScope 万相 `wan2.6-t2i` / `wan2.6-image`
对象存储	阿里云 OSS（直传 Policy + 服务端回存）
部署	Docker Compose、宝塔 Nginx 路径反代、阿里云 ECS

关键接口

方法	路径	说明
`GET`	`/ai/image/list`	作品列表
`POST`	`/ai/image`	文生图 / 图生图
`DELETE`	`/ai/image/:id`	删除列表记录
`GET`	`/ai/oss/upload-signature`	OSS 直传签名

相关链接

• 在线预览：/ai-canvas/
• 代码仓库：Charon0327/ai-canvas