基于 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) 打造。开启后自动固定无效参数，将 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 构建部署最新版。
🐳 方式二：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，可以在
API URL右侧开启该模式。开启后会禁用不支持的quality参数，Images API 的多图生成也将改为并发单图请求。此外，提示词文本开头会加入简短的防改写指令，防止模型偏离原意。（注：Responses API 无论是否开启此模式，都会默认加入防改写指令）。 - 智能诊断提示：当应用检测到接口返回的提示词被强制改写，或缺少官方 API 常规返回的参数时，会主动提示你是否针对当前配置组合开启 Codex CLI 模式。
应用支持通过 URL 查询参数快速填入配置，非常适合创建书签或集成分享：
?apiUrl=https://你的代理地址.com?apiKey=sk-xxxx?apiMode=images或?apiMode=responses（未传时默认为images）?codexCli=true（强制开启 Codex CLI 模式）
例如，集成到 New API 的聊天系统：
https://gpt-image-playground.cooksleep.dev?apiUrl={address}&apiKey={key}
https://cooksleep.github.io/gpt_image_playground?apiUrl={address}&apiKey={key}
- 前端框架：React 19 + TypeScript
- 构建工具：Vite
- 样式方案：Tailwind CSS 3
- 状态管理：Zustand
本项目基于 MIT License 开源。
特别致谢：LINUX DO