一个纯前端、零后端的 AI 绘画工作台。填上你自己的 OpenAI / NewAPI 兼容接口就能画图,所有数据(接口 Key、图片、历史)全部留在你本机浏览器,部署即静态托管。
- 零后端:浏览器直连接口,无服务器、无账号、无云同步。
- 标准 images 协议:文生图走
images/generations,带参考图自动走images/edits(OpenAI 兼容);旧版chat/auto预设会自动迁移为images。 - 参考图 / 多轮改图:把一张或多张素材(含以往生成结果)设为参考图再生成(单次最多 16 张,全部随请求发送)—— 多轮改图就是"拿旧图当参考"的特例,无会话状态;参考图失效时会明确提示,不会静默降级为文生图。
- 消息可编辑:生成后可直接编辑该条 prompt,并以新内容 + 原参数/参考图重新生成,历史里的消息文本同步更新。
- 素材来源可区分:素材库按「AI 生成 / 我的上传 / 导入」筛选,格子上带来源角标,素材多了也不混。
- 批量数量核对:请求 N 张但接口实际只返回 M 张时,结果卡明确告警并保留接口原始返回,不再静默丢图。
- 本地素材库:图片以 Blob 存 IndexedDB,默认不过期;元数据与图字节分离,一图可多处复用不重复占用;仍被历史记录引用的素材不会被直接删除。
- 长任务友好:生图请求不设置客户端自动超时,会持续等待中转站响应;可随时手动取消,页面刷新后遗留任务会标记为中断。接口已返回外链图片时,图片下载仍有 60 秒保护。
- 工作区与移动端:支持工作区、会话历史、统一搜索(
Ctrl/⌘ K),以及移动端导航抽屉和素材库入口。 - 存储管理:查看用量、删除素材;支持整库 zip 导出/导入与备份提醒。
- 备份与分享(均不含 API Key):
- 整库 zip 导出 / 导入(换机、换浏览器迁移)。
- 接口预设分享(对方导入后自填 Key)。
- 单次生成"配方"分享(含参考图,对方用自己的接口复现)。
npm install
npm run dev # 本地开发
npm run build # 构建静态产物到 dist/
npm run preview # 预览构建产物
npm test # 运行测试首次使用:点击「添加接口」→ 填 Base URL / API Key / 模型 → 「测试连接」→ 保存 → 输入描述 → 生成。
生图等待说明:工作台不会替接口设置 120 秒或其他固定的客户端超时。部分中转站会在较长时间后返回结果,期间可以手动取消;如果页面被刷新,正在进行的任务会被标记为“页面已刷新中断”。
npm run build 产出的 dist/ 是纯静态资源,可托管到任意静态服务器、对象存储、GitHub Pages 等。构建已用相对路径(base: './'),支持部署到子路径。
仓库已内置 .github/workflows/deploy.yml：push 到 main 即自动构建并发布（也可在 Actions 页手动触发）。首次启用需一步手动设置：
- 在 GitHub 仓库 Settings → Pages → Build and deployment → Source 选 GitHub Actions。
- push 到
main，等待 Actions 跑完。 - 访问 https://my-final.github.io/draw/（项目部署在
/draw/子路径，base: './'已适配，资源不会 404）。
混合内容提醒：github.io 是 https 站点,浏览器会拦截页面里对 http 接口的请求（混合内容）。请确保你填的接口 Base URL 是 https;否则请求会被静默拦截。
点击下方按钮,将本仓库 fork 到你的 GitHub 账号后,可直接部署到对应平台:
各平台均提供免费额度,部署后即可获得自己的公开访问地址。构建参数一致:
| 平台 | 构建命令 | 输出目录 | 说明 |
|---|---|---|---|
| Vercel | npm run build |
dist |
按钮 clone 后自动识别 |
| Netlify | npm run build |
dist |
按钮 clone 后自动识别 |
| Cloudflare Pages | npm run build |
dist |
框架预设选 Vite 即可 |
| GitHub Pages | — | — | fork 后参见上文「GitHub Pages(自动)」,由内置 Actions 自动发布 |
- CORS:浏览器直连第三方接口受同源策略限制。"支持任何接口"以该接口允许跨域为前提;不允许跨域的接口在纯前端下无法直连(错误提示会区分 CORS/网络、鉴权、其他)。
- 连通性探测:「测试连接」只
GET /v1/models,不会触发画图计费。 - 生图请求:生成接口不设客户端固定超时,因此中转站可以在较长时间后返回已计费的结果;用户可在界面主动取消。接口返回外链图片后,下载阶段有 60 秒超时保护。
- API Key 明文:纯前端无安全隐藏处,Key 存 localStorage 明文,请勿在公共设备保存;界面提供「一键清除凭据」。
- 浏览器存储:IndexedDB 可能在存储压力下被浏览器清理;重要素材请用整库 zip 导出备份。
前端:Vue 3(Composition API + <script setup>)+ Pinia 状态管理 · Vite 构建 · 标准 OpenAI images 协议适配层(generations / edits 自动路由)。
存储:idb(IndexedDB)存图 Blob 与生成记录,元数据与图字节分离、一图可多处复用;localStorage 存接口预设、主题、会话标题等轻量偏好。
测试:Vitest 单元测试 + fake-indexeddb,覆盖生成管线、删除引用感知、分享脱敏、工作区等回归。
样式:纯 CSS 设计系统(design tokens,深/浅双主题),不依赖 UI 框架;图标为内联 SVG(Lucide 风格)。
工具:JSZip(整库 zip 备份 / 恢复)。
数据模型:assets(图 Blob) 与 generations(生成事件)分离,以 id 相互引用。
适配层 :统一 generate();无参考图 → generations,有参考图 → edits;生成请求不设客户端超时。
生命周期:用户可主动取消;刷新后遗留 pending 自动收口;删除会话/工作区时同步清理活跃请求与孤儿产物。
存储 :Blob 落库,显示走 URL.createObjectURL 并集中释放;引用感知删除避免历史记录裂图。
分享 :所有分享级导出强制经 stripKey() 剥离 Key(有测试锁定)。
详见 openspec/changes/archive/2026-07-11-bootstrap-drawing-workbench/ (proposal / design / specs / tasks)。
MIT © MY-Final
如果这个项目对你有帮助,欢迎点个 ⭐ Star 支持一下。