点击上方按钮导入仓库即可，Vercel 会自动执行构建并部署静态文件。

配置 VITE_DEFAULT_API_URL：在 Vercel 项目的 Settings → Environment Variables 中添加，然后重新部署。该变量支持三种填法：

1. 普通 API 地址（如 https://api.openai.com/v1）→ 页面打开时自动填入默认 API 地址。
2. 带参数的应用链接（如 https://你的域名?apiUrl=...&model=...）→ 同时预设 API 地址、API Key、模型等多个字段。可用参数见：URL 传参快速填充。
3. 自定义服务商链接（公开可访问的 .json 文件地址，或含 ?settings={URL 编码后的 JSON} 参数的分享链接）→ 页面启动时自动导入自定义服务商，不会把该链接当作 API 请求地址。配置和示例见：自定义服务商。

仅展示默认配置：设置 VITE_SHOW_DEFAULT_CONFIG_ONLY=true 后，前端会隐藏多配置切换和服务商类型切换，只允许使用默认配置。

绑定自定义域名 (国内直连)：Vercel 默认分配的 .vercel.app 域名在国内通常无法直接访问。如果你希望在国内直连访问，请在 Vercel 项目的 Settings → Domains 中绑定你自己的域名。

配置自动更新：

本项目已在 vercel.json 中关闭了默认的自动部署。若需在同步 GitHub 上游代码后自动更新 Vercel 部署：

1. 在 Vercel 项目设置 Settings -> Git 的 Deploy Hooks 中创建一个名为 Release 的 Hook（Branch 填 main）并复制生成的 URL。
2. 在你 Fork 的 GitHub 仓库设置 Settings -> Secrets and variables -> Actions 中，新建 Secret VERCEL_DEPLOY_HOOK，填入刚才的 URL。

此后，每次在 GitHub 点击 Sync fork 同步包含新 Release 的上游代码时，都会自动触发 Vercel 构建部署。普通提交不会触发部署。

项目已内置 Wrangler 配置，可将 Vite 构建产物作为 Cloudflare Workers 静态资源部署。

1. 登录 Cloudflare

npx wrangler login

2. 部署到 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:cf

PowerShell 示例：

$env:VITE_DEFAULT_API_URL="https://api.openai.com/v1"; npm run deploy:cf

VITE_DEFAULT_API_URL 支持三种填法：

1. 普通 API 地址（如 https://api.openai.com/v1）→ 页面打开时自动填入默认 API 地址。
2. 带参数的应用链接（如 https://你的域名?apiUrl=...&model=...）→ 同时预设 API 地址、API Key、模型等多个字段。可用参数见：URL 传参快速填充。
3. 自定义服务商链接（公开可访问的 .json 文件地址，或含 ?settings={URL 编码后的 JSON} 参数的分享链接）→ 页面启动时自动导入自定义服务商，不会把该链接当作 API 请求地址。配置和示例见：自定义服务商。

仅展示默认配置：构建前设置 VITE_SHOW_DEFAULT_CONFIG_ONLY=true 后，前端会隐藏多配置切换和服务商类型切换，只允许使用默认配置。

官方镜像已发布至 GitHub Container Registry。Docker 部署支持在运行时注入默认配置。

环境变量说明：

• DEFAULT_API_URL：设置默认 API 配置，支持三种填法：
  1. 普通 API 地址（如 https://api.openai.com/v1）→ 页面打开时自动填入默认 API 地址。
  2. 带参数的应用链接（如 https://你的域名?apiUrl=...&model=...）→ 同时预设 API 地址、API Key、模型等多个字段。可用参数见：URL 传参快速填充。
  3. 自定义服务商链接（公开可访问的 .json 文件地址，或含 ?settings={URL 编码后的 JSON} 参数的分享链接）→ 页面启动时自动导入自定义服务商。配置和示例见：自定义服务商。
• API_PROXY_URL：配置内置代理实际转发到的完整 API 基础地址（仅开启代理时有效）。代理不会自动补 /v1，OpenAI 兼容接口通常必须填写到版本前缀，如 https://api.openai.com/v1。
• ENABLE_API_PROXY：设为 true 开启容器内置 Nginx 同源代理，用于解决浏览器跨域（CORS）限制。开启后，前端 API 代理 开关默认开启，浏览器会请求同源的 /api-proxy/{接口相对路径}，再由 Nginx 拼接到 API_PROXY_URL 后转发；用户仍可在设置中手动关闭。
• LOCK_API_PROXY：设为 true 时，在 ENABLE_API_PROXY=true 的前提下将前端 API 代理 开关强制锁定为开启，用户无法关闭。
• SHOW_DEFAULT_CONFIG_ONLY：设为 true 后，前端会隐藏多配置切换和服务商类型切换，只允许使用默认配置。
• HOST / PORT：指定容器内 Nginx 监听的地址和端口（默认 0.0.0.0:80）。

⚠️ 安全警告：开启 API 代理后，任何人都能将你的服务器作为代理来请求目标 API。建议仅在有访问控制（如 IP 白名单）或本地网络中开启。

💡 隐藏真实 API 地址：如果不希望用户在前端看到真实的 API 上游地址，可以配合 ENABLE_API_PROXY=true 和 LOCK_API_PROXY=true 强制所有请求走服务器代理，再将 API_PROXY_URL 设为真实的 API 上游地址。根据使用的服务商类型，DEFAULT_API_URL 的填法不同：

• OpenAI 兼容接口：将 DEFAULT_API_URL 留空或填写一个占位地址（如 https://proxy）。
• 自定义服务商：将 DEFAULT_API_URL 设为配置 URL（.json 或带 settings 参数的分享 URL），配置 JSON 中 profile 的 baseUrl 留空或填占位地址，并设置 apiProxy:true。

这样前端设置页只会显示空值或占位地址，真实 API 地址仅存在于服务器侧的 API_PROXY_URL，不会暴露给用户。

自定义服务商开启代理仅支持同步返回图片的配置；包含 taskIdPath 或 poll 的异步任务自定义服务商暂不支持 API 代理。

💡 兼容迁移：旧版本中的 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 LOCK_API_PROXY=true \
  -e API_PROXY_URL=https://api.openai.com/v1 \
  ghcr.io/cooksleep/gpt_image_playground:latest

隐藏真实 API 地址示例（OpenAI 兼容接口）：

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

上例中设置页的 API URL 为空，实际请求通过代理转发到 API_PROXY_URL。

隐藏真实 API 地址示例（同步自定义服务商）：

docker run -d -p 8080:80 \
  -e DEFAULT_API_URL='https://example.com/?settings={"customProviders":[...],"profiles":[{"baseUrl":"","apiProxy":true,...}]}' \
  -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

上例中 DEFAULT_API_URL 为同步自定义服务商分享 URL，profile 的 baseUrl 留空且 apiProxy:true；真实 API 地址仅在 API_PROXY_URL 中配置，前端不可见。异步任务自定义服务商暂不支持开启代理。

(注：使用 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）。然后安装依赖并启动：

VITE_DEFAULT_API_URL 支持三种填法：

1. 普通 API 地址（如 https://api.openai.com/v1）→ 页面打开时自动填入默认 API 地址。
2. 带参数的应用链接（如 https://你的域名?apiUrl=...&model=...）→ 同时预设 API 地址、API Key、模型等多个字段。可用参数见：URL 传参快速填充。
3. 自定义服务商链接（公开可访问的 .json 文件地址，或含 ?settings={URL 编码后的 JSON} 参数的分享链接）→ 页面启动时自动导入自定义服务商，不会把该链接当作 API 请求地址。配置和示例见：自定义服务商。

仅展示默认配置：在 .env.local 中加入 VITE_SHOW_DEFAULT_CONFIG_ONLY=true 后，前端会隐藏多配置切换和服务商类型切换，只允许使用默认配置。

npm install
npm run dev

2. 本地开发跨域代理 (可选)

如果在本地开发时遇到浏览器的 CORS 限制，可开启本地代理转发：

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

修改 dev-proxy.config.json，将 target 设置为真实的完整 API 基础地址。代理不会自动补 /v1，OpenAI 兼容接口通常必须填写到版本前缀，如 https://api.example.com/v1。重启开发服务器后，在页面设置中开启 API 代理 即可（请求将被转发如 http://localhost:5173/api-proxy/... -> target/...）。此功能仅在 npm run dev 阶段生效，不会影响打包产物。

3. 本地故障模拟 API (可选)

如果需要复现图片 URL 跨域、接口返回结构异常、原始响应查看等问题，可启动内置模拟服务：

npm run mock:api

使用方式见 本地故障模拟 API。

4. 构建静态产物

npm run build

构建输出的文件位于 dist/ 目录下，可将其部署至任何静态文件服务器（如普通 Nginx、GitHub Pages、Netlify 等）。