CookSleep/gpt_image_playground

基于 OpenAI gpt-image-2.5 API 的图片生成与编辑工具

🎨 GPT Image Playground – 这是什么

GPT Image Playground 是一个基于浏览器的 UI,用于 OpenAI 的 gpt-image-2.5(及兼容)图像生成 API。它让您可以完全在网页上创建、编辑和管理图像,并将所有内容存储在浏览器本地 (IndexedDB),因此无需服务器端存储。


核心功能 (如 README 所述)

功能 您将获得什么
文字转图像 & 图像转图像 根据提示词生成图片,或提供最多 16 张参考图像及遮罩进行引导式编辑。
批处理 & 迭代工作流 在一个请求中创建多张图像,将任何结果提升为新的参考图像,并在下一轮继续编辑。
流式预览 Images API 和较新的 Responses API 均可流式传输中间步骤,让您在最终图像完成前看到部分结果。
透明背景支持 选择 API 原生 (模型返回 alpha 通道) 或 本地后处理 (在浏览器中去除绿色/洋红色背景) 以输出 PNG/WebP。
代理模式 (多轮聊天) 一个具备上下文记忆的对话助手,可自动调用图像工具,支持对先前图片的 @-引用,执行并行批处理生成,并可选择执行网络搜索。
分支 & 重做 编辑或重新生成任何聊天轮次,创建一个隔离图像参考的独立分支。
细粒度参数追踪 UI 显示确切的尺寸、质量、延迟,甚至是 API 实际使用的模型重写提示词,并提供快速预设尺寸 (1K/2K/4K) 及自动舍入至模型限制。
仅限本地的历史记录 & 图库 所有任务、缩略图和元数据均存储在 IndexedDB 中,并透过 SHA-256 进行去重。您可以将任务组织成命名集合、拖放排序、重新命名,并将任何集合导出为 ZIP 文件。
多提供者配置 内置支持 OpenAI 兼容端点、sub2api (async)、fal.ai,以及透过 JSON 定义的任何自定义 HTTP 提供者。每个提供者都可以拥有自己的 API 密钥、模型、超时、代理设置和透明背景处理方法。
API 代理 & CORS 处理 当部署在服务器后方 (Docker, Vercel, Cloudflare Workers) 时,您可以启用同源 /api-proxy/ 来转发请求,避免浏览器 CORS 限制。
Codex-CLI 兼容性 如果您将应用程序指向 Codex-CLI 端点,UI 将自动把多图像请求拆分为并发的单图像调用,并公开 Codex 支持的额外参数。
基于 URL 的快速填写 透过新增查询参数 (apiUrl, apiKey, model, …) 您可以预先填写配置 – 这对于书签或将工具嵌入其他网站非常方便。

技术堆栈 (基于徽章列和典型的 Vite 项目)

  • 前端: React 19 + TypeScript,使用 Vite 构建。
  • 样式 / UI: 可能是 Tailwind/Ant Design 风格的组件 (未明确列出,但此类仪表板很常见)。
  • 状态 & 存储: 浏览器 IndexedDB 用于持久化本地历史记录;SHA-256 哈希用于去重。
  • 构建 & 部署: 支持静态网站托管 (Vercel, GitHub Pages, Cloudflare Workers) 以及运行 Nginx 代理 + 构建资产的 Docker 镜像。

如何运行

  1. 一键云端 – 部署于 Vercel, GitHub Pages, 或 Cloudflare Workers。设置环境变量 VITE_DEFAULT_API_URL (或 JSON 配置) 指向您的图像生成端点。
  2. Docker – 拉取 ghcr.io/cooksleep/gpt_image_playground:latest 并运行,可选择启用 ENABLE_API_PROXY 以隐藏真实的 API URL。
  3. 本地开发 – npm install && npm run dev。您可以新增 dev-proxy.config.json 以在开发期间绕过 CORS。
  4. 静态构建 – npm run build 会产生一个 dist/ 文件夹,您可以使用任何静态网页服务器进行服务。

谁会使用它?

  • 艺术家 & 设计师 想要一个快速的 UI 来使用 OpenAI 的图像模型,而无需编写代码。
  • 产品团队 测试提示词想法或批处理生成资产。
  • 开发人员 需要一个沙盒来实验不同的 API 提供者 (OpenAI, fal.ai, 自定义自托管端点),然后再将其整合到自己的应用程序中。
  • 教育工作者 / 爱好者 寻找一个自托管、隐私优先的图像生成游乐场。

快速入门检查清单

  • 取得兼容服务 (OpenAI, fal.ai, sub2api 网关等) 的 API 密钥。
  • 透过您偏好的方式部署并设置 VITE_DEFAULT_API_URL (或使用 URL 填写参数)。
  • 开启网页 UI,新增配置 (或使用预填的配置),然后开始生成!

授权

该项目以 MIT License 发布,因此您可以自由分叉、修改和自托管。

相关

  • Dispatch
  • Dispatch
  • Dispatch
  • Dispatch
  • 项目