[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-833":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":35,"readmeContent":36,"aiSummary":37,"trendingCount":16,"starSnapshotCount":16,"syncStatus":38,"lastSyncTime":39,"discoverSource":40},833,"gpt_image_playground","CookSleep\u002Fgpt_image_playground","CookSleep","基于 OpenAI gpt-image-2 API 的图片生成与编辑工具","https:\u002F\u002Fgpt-image-playground.cooksleep.dev",null,"TypeScript",2341,625,4,5,0,128,337,1293,384,30.39,"MIT License",false,"main",true,[27,28,29,30,31,32,33,34],"gpt-image","image-editing","image-generation","openai","react","tailwindcss","typescript","vite","2026-06-12 02:00:19","# GPT Image Playground\n\n基于 OpenAI 图像生成接口的图片生成与编辑工具。提供简洁精美的 Web UI，支持文本生图、参考图与遮罩编辑，数据纯本地化存储，带来流畅的历史记录与参数管理体验。\n\n> 若需调用非 HTTPS 的内网或本地 HTTP API，请使用 GitHub Pages 版本或自行部署，Vercel 部署的体验版绑定的 `.dev` 域名因安全策略通常要求接口必须为 HTTPS。\n\n[**🌐 Vercel 在线体验**](https:\u002F\u002Fgpt-image-playground.cooksleep.dev)  |  [**🌐 GitHub Pages 在线体验**](https:\u002F\u002Fcooksleep.github.io\u002Fgpt_image_playground)\n\n---\n\n## 📸 界面预览\n\n\u003Cdetails>\n\u003Csummary>\u003Cb>点击展开截图展示\u003C\u002Fb>\u003C\u002Fsummary>\n\u003Cbr>\n\n\u003Cdiv align=\"center\">\n  \u003Cb>桌面端主界面\u003C\u002Fb>\u003Cbr>\n  \u003Cimg src=\"docs\u002Fimages\u002Fexample_pc_1.png\" alt=\"桌面端主界面\" \u002F>\n\u003C\u002Fdiv>\n\n\u003Cbr>\n\n\u003Cdiv align=\"center\">\n  \u003Cb>任务详情与实际参数\u003C\u002Fb>\u003Cbr>\n  \u003Cimg src=\"docs\u002Fimages\u002Fexample_pc_2.png\" alt=\"任务详情与实际参数\" \u002F>\n\u003C\u002Fdiv>\n\n\u003Cbr>\n\n\u003Cdiv align=\"center\">\n  \u003Cb>桌面端批量选择\u003C\u002Fb>\u003Cbr>\n  \u003Cimg src=\"docs\u002Fimages\u002Fexample_pc_3.png\" alt=\"桌面端批量选择\" \u002F>\n\u003C\u002Fdiv>\n\n\u003Cbr>\n\n\u003Cdiv align=\"center\">\n  \u003Cb>移动端主界面\u003C\u002Fb>\u003Cbr>\n  \u003Cimg src=\"docs\u002Fimages\u002Fexample_mb_1.jpg\" alt=\"移动端主界面\" width=\"420\" \u002F>\n\u003C\u002Fdiv>\n\n\u003Cbr>\n\n\u003Cdiv align=\"center\">\n  \u003Cb>移动端侧滑多选\u003C\u002Fb>\u003Cbr>\n  \u003Cimg src=\"docs\u002Fimages\u002Fexample_mb_2.jpg\" alt=\"移动端侧滑多选\" width=\"420\" \u002F>\n\u003C\u002Fdiv>\n\n\u003C\u002Fdetails>\n\n---\n\n## ✨ 核心特性\n\n### 🎨 强大的图像生成与编辑\n- **双模接口支持**：自由切换使用常规 `Images API` (`\u002Fv1\u002Fimages`) 或 `Responses API` (`\u002Fv1\u002Fresponses`)。\n- **参考图与遮罩**：支持上传最多 16 张参考图（支持剪贴板和拖拽）。内置可视化遮罩编辑器，自动预处理以符合官方分辨率限制。\n- **批量与迭代**：支持单次多图生成；一键将满意结果转为参考图，无缝开启下一轮修改。\n\n### ⚙️ 精细化参数追踪\n- **智能尺寸控制**：提供 1K\u002F2K\u002F4K 快速预设，自定义宽高时会自动规整至模型安全范围（16 的倍数、总像素校验等）。\n- **实际参数对比**：自动提取 API 响应中真实生效的尺寸、质量、耗时以及**模型改写后的提示词**，与你的请求参数高亮对比。\n\n### 📁 高效历史管理 (纯本地)\n- **瀑布流与画廊**：历史任务自动保存，支持按状态过滤、全屏大图预览与快捷下载。\n- **快捷批量操作**：桌面端支持鼠标拖拽框选、Ctrl\u002F⌘ 连选，移动端支持顺滑侧滑多选；轻松实现批量收藏与清理。\n- **极致性能与隐私**：所有记录与图片均存放在浏览器 IndexedDB 中（采用 SHA-256 去重压缩），不经过任何第三方服务器。支持一键打包导出 ZIP 备份。\n\n### 🔌 API 兼容增强\n- **Codex CLI 兼容模式**：专为非标准 API (如 Codex CLI) 打造。开启后自动固定无效参数，将 Images API 的多图请求拆分为并发单图。\n- **提示词防改写**：Responses API 会始终在请求文本前加入强制指令防止提示词被改写；开启 Codex CLI 模式后，Images API 也会获得同等保护。\n\n---\n\n## 🚀 部署与使用\n\n支持多种部署与开发方式。无论使用哪种方式，你都可以预设默认的 API 节点。\n\n\u003Cdetails>\n\u003Csummary>\u003Cstrong>▲ 方式一：Vercel 一键部署 (推荐)\u003C\u002Fstrong>\u003C\u002Fsummary>\n\n[![Deploy with Vercel](https:\u002F\u002Fvercel.com\u002Fbutton)](https:\u002F\u002Fvercel.com\u002Fnew\u002Fclone?repository-url=https%3A%2F%2Fgithub.com%2FCookSleep%2Fgpt_image_playground&project-name=gpt-image-playground&repository-name=gpt-image-playground)\n\n点击上方按钮导入仓库即可，Vercel 会自动执行构建并部署静态文件。\n\n**配置默认 API URL**：在 Vercel 项目的 **Settings → Environment Variables** 中添加 `VITE_DEFAULT_API_URL`（如 `https:\u002F\u002Fapi.openai.com\u002Fv1`），然后重新部署即可生效。\n\n**配置自动更新**：\n\n本项目已在 `vercel.json` 中关闭了默认的自动部署。若需在同步 GitHub 上游代码后自动更新 Vercel 部署：\n\n1. 在 Vercel 项目设置 **Settings -> Git** 的 **Deploy Hooks** 中创建一个名为 `Release` 的 Hook（Branch 填 `main`）并复制生成的 URL。\n2. 在你 Fork 的 GitHub 仓库设置 **Settings -> Secrets and variables -> Actions** 中，新建 Secret `VERCEL_DEPLOY_HOOK`，填入刚才的 URL。\n\n此后，每次在 GitHub 点击 **Sync fork** 同步上游，都会自动触发 Vercel 构建部署最新版。\n\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>\u003Cstrong>🐳 方式二：Docker 部署\u003C\u002Fstrong>\u003C\u002Fsummary>\n\n官方镜像已发布至 GitHub Container Registry。Docker 部署支持在运行时注入默认配置。\n\n**环境变量说明：**\n\n- `DEFAULT_API_URL`：设置页面上默认显示的 API 地址。\n- `API_PROXY_URL`：配置内置代理实际转发到的目标 API 地址（仅开启代理时有效）。\n- `ENABLE_API_PROXY`：设为 `true` 开启容器内置 Nginx 同源代理，用于解决浏览器跨域（CORS）限制。开启后，浏览器将请求同源的 `\u002Fapi-proxy\u002F`，再由 Nginx 转发至 `API_PROXY_URL`。\n- `HOST` \u002F `PORT`：指定容器内 Nginx 监听的地址和端口（默认 `0.0.0.0:80`）。\n\n> ⚠️ **安全警告**：开启 API 代理后，任何人都能将你的服务器作为代理来请求目标 API。建议仅在有访问控制（如 IP 白名单）或本地网络中开启。\n\n> 💡 **兼容迁移**：旧版本中的 `API_URL` 已拆分为 `DEFAULT_API_URL` 和 `API_PROXY_URL`。容器启动时会自动将遗留的 `API_URL` 作为两个新变量的兜底值，实现无缝兼容。建议更新配置文件，逐步迁移至新变量。\n\n**1. Docker CLI 示例**\n\n```bash\ndocker run -d -p 8080:80 \\\n  -e DEFAULT_API_URL=https:\u002F\u002Fapi.openai.com\u002Fv1 \\\n  -e ENABLE_API_PROXY=true \\\n  -e API_PROXY_URL=https:\u002F\u002Fapi.openai.com\u002Fv1 \\\n  ghcr.io\u002Fcooksleep\u002Fgpt_image_playground:latest\n```\n\n*(注：使用 host 网络时加 `--network host`，修改容器监听端口使用 `-e PORT=28080`)*\n\n**2. Docker Compose 示例**\n\n```yaml\nservices:\n  gpt-image-playground:\n    image: ghcr.io\u002Fcooksleep\u002Fgpt_image_playground:latest\n    environment:\n      - DEFAULT_API_URL=https:\u002F\u002Fapi.openai.com\u002Fv1\n    ports:\n      - \"8080:80\"\n    restart: unless-stopped\n```\n\n**更新说明：**\n\n使用 `latest` 标签时，重新拉取镜像并重启即可更新（如 `docker compose pull && docker compose up -d`）。若需固定版本可使用官方提供的版本号标签（如 `0.2.x`）。\n\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>\u003Cstrong>💻 方式三：本地开发与静态构建\u003C\u002Fstrong>\u003C\u002Fsummary>\n\n**1. 环境准备与启动**\n\n你可以在项目根目录新建 `.env.local` 文件配置默认 API URL（如 `VITE_DEFAULT_API_URL=https:\u002F\u002Fapi.openai.com\u002Fv1`）。然后安装依赖并启动：\n\n```bash\nnpm install\nnpm run dev\n```\n\n**2. 本地开发跨域代理 (可选)**\n\n如果在本地开发时遇到浏览器的 CORS 限制，可开启本地代理转发：\n\n```bash\ncp dev-proxy.config.example.json dev-proxy.config.json\n```\n\n修改 `dev-proxy.config.json`，将 `target` 设置为真实的图片接口地址。重启开发服务器后，在页面设置中开启 **API 代理** 即可（请求将被转发如 `http:\u002F\u002Flocalhost:5173\u002Fapi-proxy\u002F... -> target\u002F...`）。此功能仅在 `npm run dev` 阶段生效，不会影响打包产物。\n\n**3. 构建静态产物**\n\n```bash\nnpm run build\n```\n\n构建输出的文件位于 `dist\u002F` 目录下，可将其部署至任何静态文件服务器（如普通 Nginx、GitHub Pages、Netlify 等）。\n\n\u003C\u002Fdetails>\n\n---\n\n## 🛠️ API 配置与 URL 传参\n\n点击页面右上角的 **设置 (⚙️)**，可以配置模型、密钥与其他参数。\n\n- **双接口模式**：支持 `Images API` (需填写 GPT Image 模型，如 `gpt-image-2`) 和 `Responses API` (需填写支持该工具的文本模型，如 `gpt-5.5`)。\n- **API 代理**：开启后，浏览器将请求同源的 `\u002Fapi-proxy\u002F` 路径，交由当前部署环境（Docker 或 本地开发）代理转发至真实 API，以绕开浏览器 CORS 限制。\n- **Codex CLI 模式**：如果你在使用源于 Codex CLI 的 API，可以在 `API URL` 右侧开启该模式。开启后会禁用不支持的 `quality` 参数，Images API 的多图生成也将改为并发单图请求。此外，提示词文本开头会加入简短的防改写指令，防止模型偏离原意。（注：Responses API 无论是否开启此模式，都会默认加入防改写指令）。\n- **智能诊断提示**：当应用检测到接口返回的提示词被强制改写，或缺少官方 API 常规返回的参数时，会主动提示你是否针对当前配置组合开启 Codex CLI 模式。\n\n### URL 传参快速填充\n\n应用支持通过 URL 查询参数快速填入配置，非常适合创建书签或集成分享：\n\n- `?apiUrl=https:\u002F\u002F你的代理地址.com`\n- `?apiKey=sk-xxxx`\n- `?apiMode=images` 或 `?apiMode=responses`（未传时默认为 `images`）\n- `?codexCli=true`（强制开启 Codex CLI 模式）\n\n例如，集成到 New API 的聊天系统：\n\n```text\nhttps:\u002F\u002Fgpt-image-playground.cooksleep.dev?apiUrl={address}&apiKey={key}\n```\n\n```text\nhttps:\u002F\u002Fcooksleep.github.io\u002Fgpt_image_playground?apiUrl={address}&apiKey={key}\n```\n\n---\n\n## 💻 技术栈\n\n- **前端框架**：[React 19](https:\u002F\u002Freact.dev\u002F) + [TypeScript](https:\u002F\u002Fwww.typescriptlang.org\u002F)\n- **构建工具**：[Vite](https:\u002F\u002Fvite.dev\u002F)\n- **样式方案**：[Tailwind CSS 3](https:\u002F\u002Ftailwindcss.com\u002F)\n- **状态管理**：[Zustand](https:\u002F\u002Fzustand.docs.pmnd.rs\u002F)\n\n## 📄 许可证 & 致谢\n\n本项目基于 [MIT License](LICENSE) 开源。\n\n特别致谢：[LINUX DO](https:\u002F\u002Flinux.do)\n\n## ⭐ Star History\n\n[![Star History Chart](https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=CookSleep\u002Fgpt_image_playground&type=Date)](https:\u002F\u002Fwww.star-history.com\u002F#CookSleep\u002Fgpt_image_playground&Date)\n","GPT Image Playground 是一个基于 OpenAI gpt-image-2 接口的图片生成与编辑工具。它提供了一个简洁美观的 Web 界面，支持文本生图、参考图上传及遮罩编辑等功能，并且所有数据均在本地存储，确保了用户数据的安全性和隐私性。项目使用 TypeScript 编写，结合了 React 和 Tailwind CSS 等现代前端技术栈，使得界面既响应迅速又易于维护。此外，通过 Vercel 或 GitHub Pages 可轻松部署在线版本，特别适合需要快速原型设计、创意图像生成或对现有图片进行再创作的场景。无论是个人创作者还是团队协作，都能从中受益。",2,"2026-06-11 02:39:41","CREATED_QUERY"]