CookSleep/gpt_image_playground

🎨 GPT Image Playground – 是什么

GPT Image Playground 是 OpenAI 的 gpt-image-2（及兼容）图像生成 API 的基于网页的前端。它允许您在浏览器中直接创建和编辑图像，所有请求和结果均本地存储（在 IndexedDB 中），因此不会发送到第三方服务器。

核心功能

功能	你能获得什么
文本到图像 & 图像到图像	输入提示词，上传最多 16 张参考图像，添加遮罩，生成新图片。
批量与迭代工作流	一次调用生成多张图像；单击即可将任意结果提升为下一轮的参考图像。
流式预览	模型运行时可看到中间帧，避免长时间“空白”等待。
透明背景支持	选择原生 API 模式（如果提供方返回 alpha 通道）或本地后处理，移除纯色背景。
代理（聊天）模式	多轮对话式 UI，可记忆上下文，能自动调用图像工具，甚至执行可选的网络搜索。
分支与重做	编辑或重新生成任意步骤；UI 会创建新分支，可在不丢失历史的情况下切换替代方案。
丰富历史与画廊	所有任务均本地保存，以瀑布流式画廊查看，可按用户命名的集合组织、搜索，并导出为 ZIP。
多 API 提供商支持	内置支持 OpenAI 兼容端点、sub2api（异步）、fal.ai，以及通过 JSON 定义的任意自定义 HTTP 提供商。
按配置文件设置	可存储多个 API 配置文件（不同密钥、模型、超时、代理设置），并即时切换。
代理与 CORS 处理	可选的同源 /api-proxy/，在 Docker 或 Vercel 部署中启用，以绕过浏览器 CORS 限制。

技术栈

• 前端：React 19 + TypeScript，使用 Vite 打包。
• 状态与存储：浏览器 IndexedDB（SHA‑256 去重）用于仅离线历史记录。
• 样式：Tailwind CSS（从徽章样式隐式继承）。
• 部署：静态构建（npm run build），可部署于 Vercel、GitHub Pages、Cloudflare Workers、Docker（NGINX 包装）、或任何静态文件托管平台。
• 后端：无需；所有重载工作由远程图像生成 API 完成。

如何开始

1. 选择部署方式 – 一键部署 Vercel、GitHub Pages Action、Cloudflare Workers、Docker，或使用 npm run dev 本地运行。
2. 提供预设 API 配置 – 通过 VITE_DEFAULT_API_URL（Docker 中为 DEFAULT_API_URL）环境变量。可提供普通 URL、带查询参数的 URL，或定义多个配置文件和自定义提供者的完整 JSON 文件。
3. 打开 UI – 托管站点（如 https://gpt-image-playground.cooksleep.dev）加载预设，提示输入 API 密钥，即可开始生成图像。

典型使用场景

• 创意专业人士：需要快速生成带透明背景的原型图、贴纸或图标。
• 开发者：无需编写代码即可测试 gpt-image-2 模型的提示工程。
• 团队：希望拥有共享且保护隐私的生成资产画廊（所有内容均保留在浏览器中）。
• 实验者：通过代理聊天模式探索多步骤图像工作流，包括自动网络搜索增强。

---

TL;DR: GPT Image Playground 是一个开源、基于 React 的 UI，将 OpenAI 兼容的图像生成 API 转化为一个功能齐全、本地存储、多配置文件、支持批量处理的沙盒环境，支持可选的对话式“代理”模式，并可轻松部署到任何静态托管平台。