Peinture：让AI画图从调API变成点按钮的浏览器应用

想象这样一个场景：你是一位独立游戏开发者，想要为自己的游戏制作宣传图；或者你是一位内容创作者，需要为文章配一张独特的插画。传统方式下，你需要翻阅API文档、配置认证密钥、处理各种报错——光是调试接口可能就耗掉半小时。现在，一个叫 Peinture 的开源项目正在改变这件事：它把主流AI画图模型全部装进一个深色主题的网页应用中，你只需要输入提示词，按下生成键，5秒钟后图片就出现在眼前。

图1：Peinture 主界面

Peinture 是一款由个人开发者 Amery2010 于2025年12月发布的 AI 图像生成框架，短短几个月内已在 GitHub 收获 679 颗星、271 次 Fork。这个增长曲线在个人独立开发的前端项目中相当罕见。它被标记在 Hugging Face 生态下，并被收录于 z-image-turbo 相关推荐中。

为什么这个项目值得关注

一、一次集成四大平台，用户无需多窗口切换

AI 画图生态的最大痛点不是模型不够好，而是平台太分散。Hugging Face 有免费的推理端点但需要排队；Gitee AI 提供中文友好的接口；Model Scope 是阿里云旗下的模型库；A4F（All for AI）则聚合了各种模型资源。

Peinture 的核心设计思路是统一的抽象层：无论你选择哪个底层服务商，在界面上看到的操作方式完全一致。它通过 TypeScript 实现了一套完整的服务适配层（services/ 目录下有 hfService.ts、giteeService.ts、customService.ts 等），每个服务文件都遵循统一的调用协议，将不同平台的 API 差异屏蔽在内部。

具体支持的模型阵容包括：

• 图像生成：GPT Image 2、Nano Banana 2、Z-Image Turbo、Qwen Image、Ovis Image、FLUX.1 Schnell/Dev/Krea、FLUX.2
• 图像编辑：Qwen-Image-Edit（支持参考图、多轮对话优化提示词）
• 视频生成：Wan 2.2（5秒动态视频，Hugging Face 和 Gitee AI 均支持）
• 文本优化：OpenAI 5.4、Gemini 3.1 Pro、DeepSeek V4、Qwen3

这套模型矩阵覆盖了从快速草稿到精修输出的完整工作流，而且全是无需本地 GPU 的云端推理模式。

二、专业级图像编辑器，直接在浏览器里

Peinture 不只是一个文生图工具，它还内置了一套完整的图像编辑器。编辑模式下，用户可以用画笔或矩形选择工具精确圈定修改区域，加载最多3张参考图让AI理解风格偏好，调用AI提示词优化器把模糊想法扩展为详细英文描述，最后通过4倍放大输出配合 RealESRGAN 超分辨率模型完成精修。

图2：图像编辑器功能

这种「文生图 + 图生图 + 编辑 + 超分」的四合一能力，通常需要串联多个工具才能实现，而 Peinture 将它们整合在同一个 Web 应用中，切换成本几乎为零。

三、三种存储方案，从隐私到协作全覆盖

Peinture 提供了三种图片存储方式：

• OPFS（浏览器本地）：个人日常使用，数据不出设备，隐私性最高
• S3 / R2 / MinIO：团队协作、多设备同步
• WebDAV：自建NAS、已有网盘生态

特别是 OPFS（Origin Private File System）方案，这是浏览器较新的存储 API，相比 LocalStorage 有更大的存储配额和更高的读写性能。用户的历史记录、Token 配置全部存在本地，没有任何服务端追踪。

四、Live Motion：将静态图变成5秒短视频

Peinture 还支持图生视频功能，调用 Wan 2.2 模型，将一张静态图片转化为5秒的动态影像。在云画廊（Cloud Gallery）视图中可以直接预览和分享。

图3：云端画廊

技术架构解析

前端技术栈

Peinture 的前端技术选型非常现代：React 19 + TypeScript 5.8 充分利用了 React 的并发渲染特性；Vite 6 让开发服务器冷启动时间几乎为0；Tailwind CSS 提供原子化CSS方案大幅提升 UI 迭代效率；Zustand 5 作为轻量级状态管理替代 Redux，API 简洁且支持持久化；Vitest 4 单元测试框架与 Vite 深度集成。

代码组织

项目采用标准的 React 单页应用结构，关键目录职责清晰：

• services/：各平台的 API 适配层（核心），hfService.ts 封装 Hugging Face 推理端点，giteeService.ts 封装码云AI API，customService.ts 处理自定义 OpenAI 兼容接口
• store/：Zustand 状态管理（5个store），configStore.ts 管理全局配置（API Key、主题等），dataStore.ts 管理生成数据（图片历史、任务队列）
• views/：三大主视图，CreationView.tsx（创作）、ImageEditorView.tsx（编辑）、CloudGalleryView.tsx（画廊）
• hooks/：9个自定义 Hook 封装复杂逻辑，包括 useCreationGeneration.ts 和 useEditorGeneration.ts

值得注意的是 hooks/ 目录下的文件封装了图像生成和编辑的核心逻辑，包括 Gradio 推理端点的 SSE 轮询、Token 重试队列、以及错误处理。这套模式解决了 Gradio 公开端点常见的排队和限流问题。

Gradio API 集成机制

Hugging Face 上的大多数图像模型以 Gradio 应用形式托管。Peinture 通过自定义的 uploadToGradio() 和 runGradioTask() 函数实现了一套完整的 Gradio API 交互协议：先通过 /gradio_api/upload 端点提交参考图，再 POST 到 /gradio_api/queue/join 获取排队位置，然后通过 /gradio_api/queue/data 的 Server-Sent Events 实时获取推理进度，当推理服务返回 429（配额耗尽）时，自动切换备用 Token 并重试。

这套机制使得应用可以在 Hugging Face 免费推理端点上稳定运行，而不需要用户自己部署 GPU 服务器。

部署体验：一键 Docker，真正零门槛

Peinture 提供了完整的 Docker 部署方案，一行命令即可启动：

docker-compose up -d

Dockerfile 采用了经典的两阶段构建：第一阶段用 node:20-alpine 构建 React 应用，通过 pnpm install 和 pnpm build 生成 dist 产物；第二阶段用 nginx:alpine 提供静态服务，将构建产物 COPY 到 /usr/share/nginx/html。无需 GPU，无需复杂配置，只要有 Docker 环境，3分钟内可以从零运行起完整的图像生成应用。

对于前端开发者而言，传统的本地开发模式（npm run dev）也完全可用，但需要自己准备各平台的 API Token。

局限性与使用门槛

尽管 Peinture 将使用门槛大幅降低，但它并非没有局限。首先，应用本身免费，但各平台推理 API 需要用户自己获取 Token，部分平台如 Hugging Face 有免费额度，Gitee AI 和 Model Scope 通常需要付费订阅。其次，依赖 Gradio 公开端点的排队机制，当服务端负载高时可能遇到长时间等待或超时，当前实现通过 Token 轮换和重试来缓解，但没有熔断机制。第三，项目没有明确的开源许可证，商用前需联系作者确认。第四，当前 UI 适配了桌面浏览器，移动端的长宽比选择等交互尚未优化。

总结

Peinture 解决的不是模型问题，而是接口体验问题。它把散落在 Hugging Face、Gitee AI、Model Scope 和 A4F 上的 AI 画图能力，聚合为一个统一的、漂亮的、深色主题的 Web 界面。对于不想折腾 API 文档的普通用户，它是一扇零门槛的入口；对于开发者，它可以作为学习 React + TypeScript 现代前端架构、以及多平台 API 集成模式的教学级参考项目。

随着 AI 图像生成模型的能力持续增强，类似 Peinture 这样专注于降低使用门槛、聚焦使用体验的工具型应用，预计将在2026年迎来更大的增长空间。