基于 OpenAI gpt-image-2 接口的图片生成与编辑工具。提供简洁的 Web UI，支持文本生成图片、参考图编辑、可视化参数调节、历史记录管理与本地数据导入导出。
在线体验： https://cooksleep.github.io/gpt_image_playground/
主界面
任务详情
移动端适配
- 文本生图：输入提示词，调用
images/generations接口生成图片。 - 参考图编辑：支持上传最多 16 张参考图，调用
images/edits接口进行图片编辑。支持文件选择、粘贴和拖拽三种方式。 - 批量生成：单次可设置生成多张图片。
- 智能尺寸选择器：支持
auto、按1K / 2K / 4K结合常用比例自动计算分辨率，同时也支持手动输入自定义宽高。 - 自动规整：为了兼容模型限制，自定义尺寸会自动向下规整到最接近的 16 倍数。
- 预设反推：打开尺寸选择弹窗时，会自动根据当前尺寸匹配对应的预设比例。
- 其他选项：支持调整质量 (
low,medium,high)、输出格式 (PNG,JPEG,WebP)、压缩率 (0-100) 以及审核强度。
- 瀑布流任务卡片：直观展示生成缩略图、提示词、参数和耗时。支持按状态筛选与关键词搜索。
- 快速复用：一键将历史记录的配置与提示词回填到输入框。
- 迭代生成：支持将生成的输出结果直接添加到参考图列表中，进行下一轮迭代编辑。
- 画廊与详情：点击任务卡片可查看完整输入输出，支持大图浏览。
- 快捷操作：支持图片右键或移动端长按唤出自定义菜单，快速复制或下载图片。
- IndexedDB 存储：所有任务记录与图片数据均存储在浏览器的 IndexedDB 中，数据绝不离开本地。
- 性能优化：参考图采用内存缓存与延迟存储机制，图片采用 SHA-256 哈希自动去重，并在每次启动时自动清理孤立的图片碎片。
- 导入与导出：支持将完整数据打包为 ZIP 导出。导出的 ZIP 内包含原始图片文件（非 base64）和记录图片元数据的
manifest.json，方便备份与迁移。
支持多种部署与使用方式，推荐使用 Docker 进行一键部署。
项目已将镜像发布至 GitHub Container Registry。你可以通过环境变量 API_URL 注入默认的 API 节点。
使用 Docker CLI：
docker run -d -p 8080:80 \
-e API_URL=https://api.openai.com \
ghcr.io/cooksleep/gpt_image_playground:latest使用 Docker Compose：
services:
gpt-image-playground:
image: ghcr.io/cooksleep/gpt_image_playground:latest
environment:
- API_URL=https://api.openai.com
ports:
- "8080:80"
restart: unless-stopped浏览器访问 http://localhost:8080，在页面右上角设置中填入 API Key 即可使用。
(注：官方镜像同时提供带版本号的标签，如 0.1.11 或 0.1)
本项目内置了 GitHub Actions 工作流。当你将本项目 Fork 到自己的仓库后，只需推送打上 v* 标签的代码，即可自动触发部署。
- 进入你的仓库 Settings → Pages。
- 将 Source 选项改为 GitHub Actions。
- 推送版本标签：
git tag v0.1.2 git push origin v0.1.2
- 等待 Action 运行完毕，即可访问你的专属 GitHub Pages。
-
环境准备 (可选) 你可以在项目根目录新建
.env.local文件，配置构建时的默认 API URL：VITE_DEFAULT_API_URL=https://api.openai.com
-
安装依赖与启动开发服务器
npm install npm run dev
随后浏览器访问
http://localhost:5173。 -
构建静态产物
npm run build
构建输出的文件会存放在
dist/目录下，你可以将其部署到任何静态文件服务器（如 Nginx、Vercel、Netlify 等）。
点击页面右上角的设置图标，你可以随时更改 API 相关的配置。 应用支持通过 URL 查询参数快速填充配置，非常适合书签或分享给他人使用：
?apiUrl=https://你的代理地址.com?apiKey=sk-xxxx
例如：
- 接入 New API 聊天应用：
https://cooksleep.github.io/gpt_image_playground?apiUrl={address}&apiKey={key}
- 框架：React 19 + TypeScript
- 构建工具：Vite
- 样式：Tailwind CSS 3
- 状态管理：Zustand
- 数据存储：浏览器的 IndexedDB API