CookSleep/gpt_image_playground

💡 提示：Vercel 体验版使用 .dev 域名，受安全策略限制通常只能调用 HTTPS 接口。需要调用内网或本地 HTTP API 时，请使用 GitHub Pages 版本或自行部署。

	摸鱼 AI ，让 AI API 接入更简单。明码标价，充值 1:1，支持 GPT、Claude、Gemini 等主流模型，重新定义「便宜 · 稳定 · 高速」
	JuCodex 为企业级用户打造的高可用、低延迟、极致性价比的中转站，提供 Codex、Claude Code、Grok 等主流大模型中转服务，新用户注册送 3 元（QQ 邮箱），永久承诺 0 水 0 替、模型 100% 保真。生图工作台
	APIMart 是专注 AI 图片/视频生成的低价 API 平台，GPT-Image-2 低至 $0.006/张，1 美元可出图 160+ 张。图片、视频一套异步 API 通吃，提交任务拿 ID、回调取结果，跑批万张不超时、换模型不改代码。按量付费、无月费，通过此注册链接注册即可开用。
	MaruCode 是一家偶尔做做慈善的小破站 API，自营号池，主要提供 OpenAI、Anthropic、GPT Image 等主流模型，支持 Websocket 协议，明码标价(OAI 0.3x, A÷ 1.7x)，透明汇率(1:1)，新用户注册送 1 刀。生图工作台🖼️
	Sublyx 是一家稳定高效的 AI API 聚合网关，支持 OpenAI、Claude、Grok、Codex、gpt-image-2 等主流模型，兼容 OpenAI SDK、Claude Code、Codex、Cherry Studio 等常用工具。通过链接注册并使用优惠码 IMG2，可额外领取 10 刀额度。生图工作台

点击展开截图展示

桌面端主界面

任务详情与实际参数

桌面端批量选择

桌面端 Agent 模式

移动端主界面

移动端侧滑多选

• 参考图与遮罩：最多 16 张参考图（支持剪贴板和拖拽），内置遮罩编辑器，自动预处理以符合官方分辨率限制。

• 画板标注：在空白画布或参考图上用画笔、文字、图形和像素橡皮擦标注修改意图，完成后作为参考图；画板与遮罩编辑器可缩放平移（Alt / Ctrl + 滚轮、Alt + 拖动、双指捏合）。

• 评论标注：在画板中用评论工具点击图片添加评论，以“@图N 评论”插入提示词，发送时附上评论在图中的位置（如 (X=52%, Y=41%)），复用任务时可恢复。

• 批量与迭代：支持单次多图生成；一键将满意结果转为参考图，无缝开启下一轮修改。

• 多提示词批量提交：在习惯配置中开启后，可一次粘贴多条提示词（以两个空行分隔），共用参考图和参数；支持排队或并发（默认上限 10），可随时查看进度或停止。

• 流式生成预览：Images API 与 Responses API 模式均支持流式接收中间步骤图像，缓解连接超时问题。

• 透明背景：画廊模式下选择 PNG 或 WebP 后可开启，可在 API 配置页为每个配置分别选择 API 原生或本地后处理。

  • API 原生：直接请求模型返回透明通道，需接口和模型支持。接口返回“不支持透明背景”类错误时，应用会提示切换为本地后处理。
  • 本地后处理：要求模型使用纯绿或纯洋红背景，结果返回后在浏览器中去除背景色，按所选格式保存。适合图标、贴纸、单主体素材；主体有复杂发丝、半透明材质、强反光或颜色接近背景色时，边缘可能残留或误抠。

• 多轮对话与上下文记忆：基于 Responses API，Agent 理解上下文并按需调用图像工具；可用 @ 引用参考图或之前生成的图片，也会自动识别上下文中的图片。
• 并发批量生成：generate_image_batch 在一轮中并发生成多张关联图像，continue_generation 自动追加新一轮以处理依赖关系。
• 分支与重新生成：编辑重发或重新生成某轮消息会产生可切换的分支，图片引用只在当前分支内解析。
• 画廊同步与隔离删除：Agent 生成的图片同步到画廊；删除对话默认保留画廊记录，删除画廊任务时自动清理对话中的图片引用。
• 可选 Web 搜索：可开启 web_search 工具，Agent 会在需要时搜索网络信息并附带引用链接。

• 智能尺寸控制：提供 1K/2K/4K 预设，自定义宽高时自动规整到模型安全范围（16 的倍数、总像素校验等）。
• 实际参数对比：提取 API 响应中实际生效的尺寸、质量、耗时和模型改写后的提示词，与请求参数高亮对比。

• 瀑布流与画廊：历史任务自动保存，支持按状态过滤、全屏大图预览与快捷下载。
• 多收藏夹管理：同一任务可归入多个收藏夹；概览页显示封面和任务数，进入后可叠加搜索与状态筛选；支持拖拽排序、重命名、设为默认和按收藏夹打包下载 ZIP。
• 失败任务重试：重试方式可选新建任务或覆盖原任务（不限失败任务）；覆盖时保留创建时间和收藏，耗时重新计算。
• 快捷批量操作：桌面端支持拖拽框选、Ctrl/⌘ 连选，移动端支持侧滑多选，便于批量收藏与清理。
• 图片查看与下载：大图预览支持左右滑动切换，移动端可长按弹出操作菜单，支持快捷下载与批量下载。
• 性能与隐私：记录和图片只保存在本地（网页版为 IndexedDB，客户端为本机数据目录），SHA-256 去重压缩，不经过第三方服务器；可打包导出 ZIP 备份。

• 多配置管理：保存多个 API 配置（供应商、API Key、模型等）并快速切换；可一键复制当前配置到列表底部，配置和供应商列表均可拖拽排序。
• 多模型切换：模型 ID 可用逗号分隔填写多个（如 gpt-image-2.5-sunburst, gpt-image-2），在首页切换，按配置分别记住；预置配置、URL 传参与导入导出均支持此写法。
• 多供应商接入：内置 OpenAI 兼容接口（Images API / Responses API）、sub2api（异步）、fal.ai（队列），并可通过 JSON 导入自定义 HTTP 供应商（同步/异步任务）。
• Agent 模式独立 API 配置：Agent 可使用原生（Responses API）或混合（Responses API + Images API）的独立配置，适配不支持 image_generation 工具的供应商或模型。
• API 代理：OpenAI 兼容接口与 fal.ai 均可配置自定义代理；OpenAI 兼容接口还可走同源 /api-proxy/，由 Docker 或本地开发服务器转发，绕开浏览器 CORS 限制。
• Codex CLI 兼容模式：上游为 Codex CLI 时，按其实际支持的参数发送请求，并把多图生成拆成并发单图。
• 提示词防改写：Responses API 始终在请求前加入防改写指令；开启 Codex CLI 模式后，Images API 也会加入。
• 智能诊断提示：检测到接口异常改写或缺少常规参数时，提示开启相应的兼容模式。
• 习惯配置：提交后清空输入、重启后保留输入、临时复用历史任务的 API 配置、重试方式、关闭提示词防改写、界面字体、系统通知、自动检查更新等。
• 版本更新：启动时检查新版本并展示更新说明；客户端可直接下载并安装更新。

Windows 用户可以直接安装桌面客户端；网页版可以部署到 Vercel、GitHub Pages、Cloudflare Workers、Docker 或任意静态文件服务器。

部署时可以通过环境变量 VITE_DEFAULT_API_URL 提供预置配置：部署端预先加入用户配置列表的 API 配置，格式与用户自建的配置相同，用户打开页面通常只需补充 API Key。

完整写法见 预置配置，其余变量见 环境变量。

仓库中的 GitHub Actions 工作流分别负责客户端、Vercel、GitHub Pages 和 Docker 镜像，不需要的可在 Actions 中选中对应工作流后停用（Disable workflow）。

npm install
npm run tauri:dev
npm run tauri:build

VITE_DEFAULT_API_URL=https://api.openai.com/v1

VITE_DEFAULT_API_URL=https://api.openai.com/v1

VITE_DEFAULT_API_URL=https://api.openai.com/v1

npx wrangler login
npm run deploy:cf

docker run -d -p 8080:80 \
  -e DEFAULT_API_URL=https://api.openai.com/v1 \
  ghcr.io/cooksleep/gpt_image_playground:latest

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

docker run -d -p 8080:80 \
  -v ./gpt-image-config.json:/config/gpt-image-config.json:ro \
  -e DEFAULT_API_URL=/config/gpt-image-config.json \
  ghcr.io/cooksleep/gpt_image_playground:latest

docker run -d -p 8080:80 \
  -e DEFAULT_API_URL= \
  -e API_PROXY_URL=https://real-api.example.com/v1 \
  -e ENABLE_API_PROXY=true \
  -e LOCK_API_PROXY=true \
  ghcr.io/cooksleep/gpt_image_playground:latest

VITE_DEFAULT_API_URL=https://api.openai.com/v1

npm install
npm run dev

cp dev-proxy.config.example.json dev-proxy.config.json

npm run mock:api

npm run build

以下变量适用于所有部署方式。使用时注意：

• 构建时变量需在构建前设置。
• Docker 使用去掉 VITE_ 前缀的同名变量，在容器启动时读取。
• Docker 和客户端的专用变量见各自的部署方式。

旧变量 VITE_SHOW_DEFAULT_CONFIG_ONLY／SHOW_DEFAULT_CONFIG_ONLY 仍可使用，等同于对应的 SHOW_PRESET_CONFIG_ONLY。

VITE_DEFAULT_API_URL 支持三种写法。

1. API 地址

VITE_DEFAULT_API_URL=https://api.openai.com/v1

适合只提供一个配置的部署：

• 自动创建 ID 为 default-openai 的 OpenAI 兼容预置配置，模型、超时等使用应用默认值。
• 地址末尾带 / 时直接拼接接口，不补 /v1。
• 之后改用 JSON 或导入链接时，把 id 设为 default-openai 即可继续更新这个配置。

2. API 地址 + 查询参数

VITE_DEFAULT_API_URL=https://api.openai.com/v1?model=gpt-image-2.5-sunburst&apiMode=images

在地址后追加参数，预填 Key、模型等字段。可用参数与下文 URL 传参快速填充 相同（profileId 除外）。

3. 完整 JSON

需要预置多个配置、自定义供应商或 Agent 时，按下文 JSON 格式编写，再用以下任一方式提供：

• 仓库内或本地文件（推荐）：填写相对项目根目录的路径，如 ./gpt-image-config.example.json。Docker 中填写容器内路径，宿主机文件需挂载到容器内。
• 远程文件：填写以 .json 结尾的 HTTP／HTTPS 地址，只需部署服务器能访问（可位于内网），用户浏览器不必能访问。
• 导入链接：在 Vercel 在线体验 或 GitHub Pages 在线体验 中配置好后，复制配置的导入链接（含 ?settings= 参数，不勾选“New API 变量配置”）。链接只包含当前选中的配置及其关联的自定义供应商。

VITE_DEFAULT_API_URL=./gpt-image-config.example.json
VITE_DEFAULT_API_URL=https://example.com/gpt-image-config.json
VITE_DEFAULT_API_URL=https://你的域名?settings=%7B%22profiles%22%3A%5B...%5D%7D

文件路径和远程地址会在构建、开发服务器启动或容器启动时读取，并内嵌到页面中。

重新部署时

• 参数更新：API 地址、模型、超时等与上次部署快照比较。部署值变化时覆盖一次本地值，之后保留用户修改，直到部署值再次变化。
• API Key：始终由用户在本地管理，重新部署不覆盖。
• 排序与删除：预置配置可拖动；预置配置和预置供应商均可删除，删除后重新部署不会恢复。需要锁定参数或禁止删除时，使用上文的限制变量。
• 下线预置清理：部署端移除某个预置后，若用户未修改过且无历史任务引用，自动从本地删除；否则转为普通配置保留。
• 失效供应商清理：随预置引入的自定义供应商不再被任何配置使用、且从未被用户修改时，自动清理。

顶层字段：

• profiles（数组）：预置的 API 配置列表，每项对应用户配置列表中的一个配置。
• customProviders（可选数组）：自定义供应商定义，见下文 自定义供应商。只使用内置供应商（OpenAI 兼容、sub2api（异步）、fal.ai）时可省略。
• agent（可选对象）：Agent 的独立 API 模式及文本、图像配置选择，见下方示例。

profiles 中每项的字段：

补充说明：

• id：之后的链接（查询参数 profileId、settings 链接）或预置 JSON 携带相同 ID 时，直接更新该配置而非新建。应用内普通分享链接会省略此字段。
• baseUrl：未以 / 结尾时按 OpenAI 规则补齐 /v1；以 / 结尾时直接基于该地址请求。
• transparentBackgroundMethod 默认值：OpenAI 兼容和 fal.ai 为 "api"；自定义供应商的生成和编辑请求都映射了 $params.background 时为 "api"，否则为 "local"。

{
  "profiles": [
    {
      "id": "my-openai",
      "name": "我的 OpenAI 配置",
      "description": "使用前请阅读 [接口说明](https://example.com/docs)。",
      "provider": "openai",
      "baseUrl": "https://api.openai.com/v1",
      "model": "gpt-image-2.5-sunburst"
    }
  ]
}

{
  "profiles": [
    {
      "id": "openai-main",
      "name": "OpenAI",
      "provider": "openai",
      "baseUrl": "https://api.openai.com/v1",
      "model": "gpt-image-2.5-sunburst",
      "isDefault": true
    },
    {
      "id": "sub2api-profile",
      "name": "sub2api 异步",
      "provider": "sb2api-async",
      "baseUrl": "https://api.example.com/v1",
      "model": "gpt-image-2.5-sunburst"
    },
    {
      "id": "fal-profile",
      "name": "fal.ai",
      "provider": "fal",
      "baseUrl": "",
      "model": "openai/gpt-image-2"
    }
  ]
}

agent.apiConfigMode 决定 Agent 是否使用独立的 API 配置：

• off：沿用当前 API 配置。
• native：文本模型通过 Responses API 调用 image_generation 工具生成图片。
• hybrid：文本模型调用自定义工具，再由图像模型生成图片，适用于文本模型不支持原生图像工具的情况。

{
  "profiles": [
    {
      "id": "default-openai",
      "name": "图像配置",
      "provider": "openai",
      "baseUrl": "https://api.example.com/v1",
      "model": "image-model",
      "apiMode": "images",
      "isDefault": true
    },
    {
      "id": "default-openai-agent",
      "name": "文本配置",
      "provider": "openai",
      "baseUrl": "https://api.example.com/v1",
      "model": "text-model",
      "apiMode": "responses"
    }
  ],
  "agent": {
    "apiConfigMode": "hybrid",
    "textProfileId": "default-openai-agent",
    "imageProfileId": "default-openai"
  }
}

• textProfileId 和 imageProfileId 引用 profiles 中的 ID。
• 文本配置须使用 OpenAI 兼容的 Responses API；图像配置可使用任意支持的供应商。
• agent 及其三个字段都可省略，随部署更新和锁定的规则与预置配置相同。

完整示例见 gpt-image-config.agent.example.json。

API 不是标准 OpenAI 格式时，在预置 JSON 的 customProviders 中定义请求和响应结构。每个供应商需有唯一的 id，由 profiles 中的 provider 字段引用。

接口不在 /v1 路径下时，将 baseUrl 设为以 / 结尾。例如 baseUrl 为 https://api.example.com/、submit.path 为 api/image-tasks 时，实际请求地址为 https://api.example.com/api/image-tasks。

获取供应商定义

• AI 生成：在 Vercel 在线体验 或 GitHub Pages 在线体验 的 设置 → API 配置 → 供应商类型 → 创建自定义供应商 → AI 一键生成与导入 中粘贴第三方 API 文档生成配置，再复制该配置的导入链接作为预置值。
• 手动生成：将 自定义供应商 LLM 提示词 和第三方 API 文档发给任意 LLM，获取完整 JSON。

完整 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": [
    {
      "id": "example-profile",
      "name": "示例异步任务供应商",
      "provider": "custom-example-task",
      "baseUrl": "https://api.example.com/v1",
      "model": "gpt-image-2.5-sunburst",
      "apiMode": "images"
    }
  ]
}

通过 URL 查询参数快速填入 OpenAI 兼容配置，适合创建书签或集成分享。

在客户端中，复制带 apiUrl 或 settings 参数的导入链接后切回客户端，即会提示导入。

集成示例（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}

public/announcements.json 定义启动时显示的公告卡片，随应用一起打包。

• 添加公告：在数组中追加一个对象，媒体文件放在 public/announcements/ 中。
• 关闭公告：自行部署时把该文件改为 []。

media.src 为不以 / 开头的相对路径；html 页面需引用同目录下的外部 .css、.js 文件。

when 是一个对象，每个键都要满足：

• 值可以是字面量（等于）、数组（等于其中之一）或运算对象 { "eq" | "ne" | "gt" | "gte" | "lt" | "lte" | "in": 值 }。
• 可用 all、any、not 组合条件。
• 条件写错时该条公告不显示，并在控制台提示。

示例：

[
  { "id": "web-windows", "title": "网页版 Windows 用户", "content": "……", "when": { "platform": "web", "os": "windows" } },
  { "id": "power-user", "title": "已生成超过 100 张图片", "content": "……", "when": { "imageCount": { "gt": 100 } } }
]

本项目内置以下两款字体，由 VITE_BUILTIN_FONT_SOURCE 决定从公共 CDN 加载还是使用 fonts/ 目录中的字体文件。完整许可文本位于 third-party-licenses/，也可在应用的“设置 → 关于 → 字体与第三方许可”中查看。

• HarmonyOS Sans SC 为官方未经修改的 TTF 文件（Regular、Medium、Bold）。
• Maple Mono NF CN 取自官方 v7.9 Release 的 Regular 字重，按 OFL 转换为 woff2 格式，未改动字形和名称。

本项目基于 MIT License 开源。

特别致谢：LINUX DO

如果这个项目对你有帮助，欢迎通过爱发电赞助支持，你的每一份鼓励都是持续更新的动力！