5分钟上手GPT Image Playground从API Key到首张AI绘图只需3步【免费下载链接】gpt_image_playground基于 OpenAI gpt-image-2 API 的图片生成与编辑工具项目地址: https://gitcode.com/gh_mirrors/gp/gpt_image_playgroundGPT Image Playground 是一款基于 OpenAI gpt-image-2 API 的开源 AI 图片生成与编辑工具提供简洁精美的 Web 界面支持文本生图、参考图编辑、遮罩局部修改、批量生成与多轮 Agent 对话。所有历史任务与图片均纯本地存储在浏览器 IndexedDB 中不经过任何第三方服务器兼顾了流畅体验与隐私安全。下面带你用 3 步从零配置 API Key 到生成并管理自己的第一张 AI 绘图 为什么选择 GPT Image Playground4 大核心亮点在开始之前先看看这款 AI 绘图工具强在哪里多供应商接入内置 OpenAI 兼容接口Images API / Responses API、sub2api 异步接口、fal.ai还支持通过 JSON 导入自定义 HTTP 供应商接口不标准也能用参考图 遮罩编辑最多上传 16 张参考图支持剪贴板粘贴与拖拽内置可视化遮罩编辑器适合局部重绘纯本地隐私存储历史记录、收藏夹、生成图片全部保存在浏览器本地支持一键打包导出 ZIP 备份Agent 多轮对话模式基于 Responses API 对话式生图支持上下文记忆、引用图片、并发生成多张关联图第一步配置 API Key 与 API 地址2分钟打开页面后点击右上角的 ⚙️ 设置按钮进入API 配置面板服务商类型选择 OpenAI兼容接口、sub2api异步或 fal.ai也可创建自定义供应商API URL填入你的 API Base URL如https://api.openai.com/v1末尾带/时不再自动补/v1前缀API Key填入你的密钥输入框自带密码遮挡与切换显示按钮API 接口OpenAI 兼容接口可选Images API (/v1/images)或Responses API (/v1/responses)新手保持默认即可模型 ID默认gpt-image-2按你的服务商要求填写配置完成后即可保存支持创建多个 API 配置并随时切换。配置面板源码见 src/components/SettingsModal.tsx多供应商逻辑在 src/lib/apiProfiles.ts。如果你打算二次部署仓库还内置了 gpt-image-config.example.json 预置配置模板可让访问者打开页面就自动带入你的配置。第二步输入提示词生成你的第一张 AI 绘图回到主界面底部输入栏就是全部生成入口从左到右依次可设置参数说明新手建议提示词描述你想生成的画面支持引用参考图写得越具体效果越好尺寸auto 或自定义宽高自动规整到模型安全范围先用 auto质量auto / low / medium / highmedium 性价比最高格式PNG / JPEG / WebP需要透明背景选 PNG透明背景支持 API 原生或本地后处理双模式图标、贴纸场景开启数量单次生成张数大于 1 时并发生成1 起步试效果上传参考图后还可以打开遮罩编辑器涂抹需要修改的区域实现精准局部重绘——这部分逻辑见 src/lib/maskPreprocess.ts。输入提示词点击右侧蓝色发送按钮任务卡出现在画廊中生成过程支持流式接收中间步骤图像不用干等 ⏳第三步管理历史图库批量下载与管理生成完成后这张图会自动进入历史画廊。点击任务卡可打开详情弹窗这里有一个非常实用的功能——实际参数对比自动提取 API 响应中真实生效的尺寸、质量、耗时甚至模型改写后的提示词与你的请求参数高亮对比帮你判断模型到底听话到什么程度。日常管理方面它几乎把图库管理做满了搜索与状态过滤顶部搜索框支持按提示词、参数筛选任务收藏夹体系创建多个命名收藏夹同一任务可归入多个收藏夹支持按收藏夹批量打包 ZIP 下载源码在 src/components/favorites/批量选择桌面端鼠标拖拽框选、Ctrl/⌘ 连选选中后弹出收藏、下载、删除等批量操作条进阶玩法Agent 多轮对话生图主界面右上角的Agent按钮可以切换到对话式生成模式你用自然语言描述需求Agent 理解上下文后按需调用图像工具支持引用前文图片继续迭代还能在一次轮次中并发生成多张关联图例如一套连贯的电商宣传图。分支切换、重新生成、可选 Web 搜索一应俱全工作区实现在 src/components/AgentWorkspace.tsx。如何部署 GPT Image Playground 到自有服务器想长期自用或分享给团队项目提供 5 种部署方式详见 README.md 的部署与使用章节Vercel 一键部署推荐导入仓库自动构建设置环境变量VITE_DEFAULT_API_URL即可预置 API 配置GitHub Pages通过 Actions 工作流发布静态页面Cloudflare Workers执行npm run deploy:cf一键上传Docker官方镜像 Nginx支持同源代理隐藏真实 API 地址部署文件见 deploy/Dockerfile 与 deploy/nginx.conf本地开发克隆仓库后执行下面两条命令几秒就能跑起来npm install npm run dev遇到浏览器跨域CORS限制时可开启 API 代理转发调试接口异常还可以启动内置故障模拟服务文档见 docs/mock-image-api.md。常见问题Q生成的图片和我的提示词会被上传吗不会。所有数据只存在你浏览器的 IndexedDB 中SHA-256 去重压缩可随时一键打包导出备份换设备前记得先导出。Q提示接口跨域或连接失败怎么办优先确认 API URL 是否正确注意/v1前缀规则国内访问非 HTTPS 接口建议使用 GitHub Pages 版本或自行部署并开启代理。Q模型改写了我的提示词Responses API 默认会附加防改写指令任务详情弹窗里可以对比模型实际使用的提示词遇到接口异常改写行为时界面会智能提示开启对应的兼容模式。按以上 3 步走下来5 分钟内你就能拥有自己的 AI 绘图工作台配置 Key、出第一张图、建立自己的图库。祝你创作愉快 ✨【免费下载链接】gpt_image_playground基于 OpenAI gpt-image-2 API 的图片生成与编辑工具项目地址: https://gitcode.com/gh_mirrors/gp/gpt_image_playground创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 5分钟上手GPT Image Playground：从API Key到首张AI绘图，只需3步
5分钟上手GPT Image Playground从API Key到首张AI绘图只需3步【免费下载链接】gpt_image_playground基于 OpenAI gpt-image-2 API 的图片生成与编辑工具项目地址: https://gitcode.com/gh_mirrors/gp/gpt_image_playgroundGPT Image Playground 是一款基于 OpenAI gpt-image-2 API 的开源 AI 图片生成与编辑工具提供简洁精美的 Web 界面支持文本生图、参考图编辑、遮罩局部修改、批量生成与多轮 Agent 对话。所有历史任务与图片均纯本地存储在浏览器 IndexedDB 中不经过任何第三方服务器兼顾了流畅体验与隐私安全。下面带你用 3 步从零配置 API Key 到生成并管理自己的第一张 AI 绘图 为什么选择 GPT Image Playground4 大核心亮点在开始之前先看看这款 AI 绘图工具强在哪里多供应商接入内置 OpenAI 兼容接口Images API / Responses API、sub2api 异步接口、fal.ai还支持通过 JSON 导入自定义 HTTP 供应商接口不标准也能用参考图 遮罩编辑最多上传 16 张参考图支持剪贴板粘贴与拖拽内置可视化遮罩编辑器适合局部重绘纯本地隐私存储历史记录、收藏夹、生成图片全部保存在浏览器本地支持一键打包导出 ZIP 备份Agent 多轮对话模式基于 Responses API 对话式生图支持上下文记忆、引用图片、并发生成多张关联图第一步配置 API Key 与 API 地址2分钟打开页面后点击右上角的 ⚙️ 设置按钮进入API 配置面板服务商类型选择 OpenAI兼容接口、sub2api异步或 fal.ai也可创建自定义供应商API URL填入你的 API Base URL如https://api.openai.com/v1末尾带/时不再自动补/v1前缀API Key填入你的密钥输入框自带密码遮挡与切换显示按钮API 接口OpenAI 兼容接口可选Images API (/v1/images)或Responses API (/v1/responses)新手保持默认即可模型 ID默认gpt-image-2按你的服务商要求填写配置完成后即可保存支持创建多个 API 配置并随时切换。配置面板源码见 src/components/SettingsModal.tsx多供应商逻辑在 src/lib/apiProfiles.ts。如果你打算二次部署仓库还内置了 gpt-image-config.example.json 预置配置模板可让访问者打开页面就自动带入你的配置。第二步输入提示词生成你的第一张 AI 绘图回到主界面底部输入栏就是全部生成入口从左到右依次可设置参数说明新手建议提示词描述你想生成的画面支持引用参考图写得越具体效果越好尺寸auto 或自定义宽高自动规整到模型安全范围先用 auto质量auto / low / medium / highmedium 性价比最高格式PNG / JPEG / WebP需要透明背景选 PNG透明背景支持 API 原生或本地后处理双模式图标、贴纸场景开启数量单次生成张数大于 1 时并发生成1 起步试效果上传参考图后还可以打开遮罩编辑器涂抹需要修改的区域实现精准局部重绘——这部分逻辑见 src/lib/maskPreprocess.ts。输入提示词点击右侧蓝色发送按钮任务卡出现在画廊中生成过程支持流式接收中间步骤图像不用干等 ⏳第三步管理历史图库批量下载与管理生成完成后这张图会自动进入历史画廊。点击任务卡可打开详情弹窗这里有一个非常实用的功能——实际参数对比自动提取 API 响应中真实生效的尺寸、质量、耗时甚至模型改写后的提示词与你的请求参数高亮对比帮你判断模型到底听话到什么程度。日常管理方面它几乎把图库管理做满了搜索与状态过滤顶部搜索框支持按提示词、参数筛选任务收藏夹体系创建多个命名收藏夹同一任务可归入多个收藏夹支持按收藏夹批量打包 ZIP 下载源码在 src/components/favorites/批量选择桌面端鼠标拖拽框选、Ctrl/⌘ 连选选中后弹出收藏、下载、删除等批量操作条进阶玩法Agent 多轮对话生图主界面右上角的Agent按钮可以切换到对话式生成模式你用自然语言描述需求Agent 理解上下文后按需调用图像工具支持引用前文图片继续迭代还能在一次轮次中并发生成多张关联图例如一套连贯的电商宣传图。分支切换、重新生成、可选 Web 搜索一应俱全工作区实现在 src/components/AgentWorkspace.tsx。如何部署 GPT Image Playground 到自有服务器想长期自用或分享给团队项目提供 5 种部署方式详见 README.md 的部署与使用章节Vercel 一键部署推荐导入仓库自动构建设置环境变量VITE_DEFAULT_API_URL即可预置 API 配置GitHub Pages通过 Actions 工作流发布静态页面Cloudflare Workers执行npm run deploy:cf一键上传Docker官方镜像 Nginx支持同源代理隐藏真实 API 地址部署文件见 deploy/Dockerfile 与 deploy/nginx.conf本地开发克隆仓库后执行下面两条命令几秒就能跑起来npm install npm run dev遇到浏览器跨域CORS限制时可开启 API 代理转发调试接口异常还可以启动内置故障模拟服务文档见 docs/mock-image-api.md。常见问题Q生成的图片和我的提示词会被上传吗不会。所有数据只存在你浏览器的 IndexedDB 中SHA-256 去重压缩可随时一键打包导出备份换设备前记得先导出。Q提示接口跨域或连接失败怎么办优先确认 API URL 是否正确注意/v1前缀规则国内访问非 HTTPS 接口建议使用 GitHub Pages 版本或自行部署并开启代理。Q模型改写了我的提示词Responses API 默认会附加防改写指令任务详情弹窗里可以对比模型实际使用的提示词遇到接口异常改写行为时界面会智能提示开启对应的兼容模式。按以上 3 步走下来5 分钟内你就能拥有自己的 AI 绘图工作台配置 Key、出第一张图、建立自己的图库。祝你创作愉快 ✨【免费下载链接】gpt_image_playground基于 OpenAI gpt-image-2 API 的图片生成与编辑工具项目地址: https://gitcode.com/gh_mirrors/gp/gpt_image_playground创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考