Chutibe 无限画布

Chutibe 无限画布是一个围绕 AI 图片生成与局部编辑设计的可视化工作空间。用户可以在同一张无限画布上摆放图片、绘制编辑区域、添加箭头和文字标注，并把生成结果稳定地放回指定位置。

在线体验：https://api.chutibe.com/canvas/projects

本仓库是公开展示仓库，只包含少量纯逻辑代码。项目管理、画布持久化、鉴权、媒体存储、生成服务和部署代码均未公开。

主要功能

• 无限空间编排：自由移动、缩放和组织多张图片及标注。
• 框选生成区域：先确定结果应出现的位置和尺寸，再发起生成任务。
• 标注式局部编辑：使用箭头、文字和矩形区域表达修改意图。
• 主体图与多参考图：指定一张主体图，并选择最多四张视觉参考图。
• 生成结果稳定落位：结果保持原始比例，以用户框选区域中心为锚点，不打断当前画布视角。
• 项目保存与恢复：画布内容、进行中的任务和生成结果可以恢复。
• 分享查看：可为画布项目生成只读分享入口。

典型工作流

1. 创建一个画布项目并上传素材。
2. 在画布上排列主体图和参考图。
3. 选择主体图，添加局部标注或绘制生成区域。
4. 输入修改要求并提交任务。
5. 结果完成后自动出现在预定区域，继续对比、标注或迭代。

精选核心代码

src/canvas-core.ts 公开了几段与画布体验直接相关的逻辑：

• 生成提交锁：防止用户连续点击产生重复任务。
• 中心定位：按框选区域中心放置结果，并保持生成图宽高比。
• 参考图校验：要求明确主体图并限制参考图数量。
• 参考图版式：把主体图和参考图计算为稳定的组合输入布局。

公开代码不依赖生产数据库或内部 API，可单独阅读和进行 TypeScript 检查。

技术侧重点

• Next.js / React / TypeScript
• tldraw 画布交互
• 图片资产与几何坐标系统
• 异步任务提交、轮询与恢复
• 多参考图片合成
• 持久化画布快照与只读分享

本地检查精选代码

npm install
npm run typecheck

产品矩阵

• 创作台：https://api.chutibe.com/studio/zh/create
• 无限画布：https://api.chutibe.com/canvas/projects
• 电商制图：https://api.chutibe.com/studio/zh/ecommerce

公开范围说明

本仓库不包含完整 UI、服务端路由、用户数据模型、访问令牌、对象存储、模型调用、计费逻辑或生产环境配置。线上产品的安全边界和工程实现以实际服务为准。