基于 OpenAI 图像生成接口的图片生成与编辑工具。提供简洁精美的 Web UI，支持文本生图、参考图与遮罩编辑，数据纯本地化存储，带来流畅的历史记录与参数管理体验。
若需调用非 HTTPS 的内网或本地 HTTP API，请使用 GitHub Pages 版本或自行部署，Vercel 部署的体验版绑定的
.dev域名因安全策略通常要求接口必须为 HTTPS。
🌐 Vercel 在线体验 | 🌐 GitHub Pages 在线体验
点击展开截图展示
- 双模接口支持：自由切换使用常规
Images API(/v1/images) 或Responses API(/v1/responses)。 - 参考图与遮罩：支持上传最多 16 张参考图（支持剪贴板和拖拽）。内置可视化遮罩编辑器，自动预处理以符合官方分辨率限制。
- 批量与迭代：支持单次多图生成；一键将满意结果转为参考图，无缝开启下一轮修改。
- 智能尺寸控制：提供 1K/2K/4K 快速预设，自定义宽高时会自动规整至模型安全范围（16 的倍数、总像素校验等）。
- 实际参数对比：自动提取 API 响应中真实生效的尺寸、质量、耗时以及模型改写后的提示词，与你的请求参数高亮对比。
- 瀑布流与画廊：历史任务自动保存，支持按状态过滤、全屏大图预览与快捷下载。
- 快捷批量操作：桌面端支持鼠标拖拽框选、Ctrl/⌘ 连选，移动端支持顺滑侧滑多选；轻松实现批量收藏与清理。
- 极致性能与隐私：所有记录与图片均存放在浏览器 IndexedDB 中（采用 SHA-256 去重压缩），不经过任何第三方服务器。支持一键打包导出 ZIP 备份。
- Codex CLI 兼容模式：专为非标准 API (如 Codex CLI) 打造。开启后应用 Codex CLI 实际支持的参数，将 Images API 的多图请求拆分为并发单图。
- 提示词防改写：Responses API 会始终在请求文本前加入强制指令防止提示词被改写；开启 Codex CLI 模式后，Images API 也会获得同等保护。
支持多种部署与开发方式。无论使用哪种方式，你都可以预设默认的 API 节点。
▲ 方式一：Vercel 一键部署 (推荐)
点击上方按钮导入仓库即可，Vercel 会自动执行构建并部署静态文件。
配置默认 API URL：在 Vercel 项目的 Settings → Environment Variables 中添加 VITE_DEFAULT_API_URL（如 https://api.openai.com/v1），然后重新部署即可生效。
配置自动更新：
本项目已在 vercel.json 中关闭了默认的自动部署。若需在同步 GitHub 上游代码后自动更新 Vercel 部署：
- 在 Vercel 项目设置 Settings -> Git 的 Deploy Hooks 中创建一个名为
Release的 Hook（Branch 填main）并复制生成的 URL。 - 在你 Fork 的 GitHub 仓库设置 Settings -> Secrets and variables -> Actions 中，新建 Secret
VERCEL_DEPLOY_HOOK，填入刚才的 URL。
此后，每次在 GitHub 点击 Sync fork 同步上游，都会自动触发 Vercel 构建部署最新版。
☁️ 方式二：Cloudflare Workers 部署
项目已内置 Wrangler 配置，可将 Vite 构建产物作为 Cloudflare Workers 静态资源部署。
1. 登录 Cloudflare
npx wrangler login2. 部署到 Workers
npm run deploy:cf部署脚本会先执行 npm run build，再通过 wrangler deploy 上传 dist/ 目录。
配置默认 API URL：Cloudflare Workers 的环境变量不会自动改写已经构建好的静态文件。若需预设默认 API 地址，请在构建前设置 VITE_DEFAULT_API_URL 后再部署。
VITE_DEFAULT_API_URL=https://api.openai.com/v1 npm run deploy:cfPowerShell 示例：
$env:VITE_DEFAULT_API_URL="https://api.openai.com/v1"; npm run deploy:cf🐳 方式三：Docker 部署
官方镜像已发布至 GitHub Container Registry。Docker 部署支持在运行时注入默认配置。
环境变量说明：
DEFAULT_API_URL：设置页面上默认显示的 API 地址。API_PROXY_URL：配置内置代理实际转发到的目标 API 地址（仅开启代理时有效）。ENABLE_API_PROXY：设为true开启容器内置 Nginx 同源代理，用于解决浏览器跨域（CORS）限制。开启后，浏览器将请求同源的/api-proxy/，再由 Nginx 转发至API_PROXY_URL。HOST/PORT：指定容器内 Nginx 监听的地址和端口（默认0.0.0.0:80）。
⚠️ 安全警告：开启 API 代理后，任何人都能将你的服务器作为代理来请求目标 API。建议仅在有访问控制（如 IP 白名单）或本地网络中开启。
💡 兼容迁移：旧版本中的
API_URL已拆分为DEFAULT_API_URL和API_PROXY_URL。容器启动时会自动将遗留的API_URL作为两个新变量的兜底值，实现无缝兼容。建议更新配置文件，逐步迁移至新变量。
1. Docker CLI 示例
docker run -d -p 8080:80 \
-e DEFAULT_API_URL=https://api.openai.com/v1 \
-e ENABLE_API_PROXY=true \
-e API_PROXY_URL=https://api.openai.com/v1 \
ghcr.io/cooksleep/gpt_image_playground:latest(注：使用 host 网络时加 --network host，修改容器监听端口使用 -e PORT=28080)
2. Docker Compose 示例
services:
gpt-image-playground:
image: ghcr.io/cooksleep/gpt_image_playground:latest
environment:
- DEFAULT_API_URL=https://api.openai.com/v1
ports:
- "8080:80"
restart: unless-stopped更新说明：
使用 latest 标签时，重新拉取镜像并重启即可更新（如 docker compose pull && docker compose up -d）。若需固定版本可使用官方提供的版本号标签（如 0.2.x）。
💻 方式四：本地开发与静态构建
1. 环境准备与启动
你可以在项目根目录新建 .env.local 文件配置默认 API URL（如 VITE_DEFAULT_API_URL=https://api.openai.com/v1）。然后安装依赖并启动：
npm install
npm run dev2. 本地开发跨域代理 (可选)
如果在本地开发时遇到浏览器的 CORS 限制，可开启本地代理转发：
cp dev-proxy.config.example.json dev-proxy.config.json修改 dev-proxy.config.json，将 target 设置为真实的图片接口地址。重启开发服务器后，在页面设置中开启 API 代理 即可（请求将被转发如 http://localhost:5173/api-proxy/... -> target/...）。此功能仅在 npm run dev 阶段生效，不会影响打包产物。
3. 构建静态产物
npm run build构建输出的文件位于 dist/ 目录下，可将其部署至任何静态文件服务器（如普通 Nginx、GitHub Pages、Netlify 等）。
点击页面右上角的 设置 (⚙️)，可以配置模型、密钥与其他参数。
- 双接口模式：支持
Images API(需填写 GPT Image 模型，如gpt-image-2) 和Responses API(需填写支持该工具的文本模型，如gpt-5.5)。 - API 代理：开启后，浏览器将请求同源的
/api-proxy/路径，交由当前部署环境（Docker 或 本地开发）代理转发至真实 API，以绕开浏览器 CORS 限制。 - 习惯配置：支持设置提交任务后是否清空输入框，以及重启后是否加载上次的输入框。关闭“重启后加载上次的输入框”后，将不再持久化提示词和参考图。
- Codex CLI 兼容模式：如果你在使用源于 Codex CLI 的 API，可以开启该模式。开启后应用 Codex CLI 实际支持的参数，Images API 的多图生成也将改为并发单图请求。此外，提示词文本开头会加入简短的防改写指令，防止模型偏离原意。（注：Responses API 无论是否开启此模式，都会默认加入防改写指令）。
- 智能诊断提示：当应用检测到接口返回的提示词被强制改写，或缺少官方 API 常规返回的参数时，会主动提示你是否针对当前配置组合开启 Codex CLI 模式。
应用支持通过 URL 查询参数快速填入配置，非常适合创建书签或集成分享。根据你的服务商类型，选择对应的方式：
方式一：标准 OpenAI 兼容服务商 直接使用简短的查询参数配置：
?apiUrl=https://你的代理地址.com?apiKey=sk-xxxx?apiMode=images或?apiMode=responses（未传时默认为images）?model=gpt-image-2（未传时按apiMode使用默认模型）?codexCli=true（开启 Codex CLI 兼容模式）
例如，集成到 New API 的聊天系统：
https://gpt-image-playground.cooksleep.dev?apiUrl={address}&apiKey={key}&model={model}
https://cooksleep.github.io/gpt_image_playground?apiUrl={address}&apiKey={key}&model={model}
方式二：自定义格式服务商
如果需要导入自定义格式的 API 配置，请使用 settings 参数并传入 URL 编码后的完整 JSON：
?settings={URL编码后的JSON}（只读取customProviders和profiles列表）
推荐在项目内的 设置 - API 配置 - 服务商类型 - 创建自定义服务商 - AI 一键生成与导入 完成配置生成与导入后，在 API 配置 - 当前配置 - 复制icon 处一键复制可导入配置的 URL（可选择不包含 API key）
JSON 结构示例：
{
"customProviders": [
{
"id": "custom-example-task",
"name": "示例异步任务服务商",
"submit": {
"path": "images/generations",
"method": "POST",
"contentType": "json",
"body": {
"model": "$profile.model",
"prompt": "$prompt",
"size": "$params.size",
"quality": "$params.quality",
"output_format": "$params.output_format",
"output_compression": "$params.output_compression",
"n": "$params.n",
"image_urls": "$inputImages.dataUrls"
},
"taskIdPath": "data.0.task_id"
},
"poll": {
"path": "tasks/{task_id}",
"method": "GET",
"intervalSeconds": 5,
"statusPath": "data.status",
"successValues": ["completed"],
"failureValues": ["failed", "cancelled"],
"errorPath": "data.error.message",
"result": {
"imageUrlPaths": ["data.result.images.*.url.*"],
"b64JsonPaths": []
}
}
}
],
"profiles": [
{
"name": "示例异步任务服务商",
"provider": "custom-example-task",
"baseUrl": "https://api.example.com/v1",
"model": "example-image-model",
"apiMode": "images"
}
]
}第三方服务商可以参考 自定义服务商 LLM 提示词，让 LLM 根据自己的 API 文档生成可导入的完整配置。导入后只需要在设置里补充 API Key。
- 前端框架：React 19 + TypeScript
- 构建工具：Vite
- 样式方案：Tailwind CSS 3
- 状态管理：Zustand
本项目基于 MIT License 开源。
特别致谢：LINUX DO