CookSleep/gpt_image_playground

🎨 GPT Image Playground – 是什麼

GPT Image Playground 是 OpenAI 的 gpt-image-2（及相容）影像生成 API 的瀏覽器端前端。它讓您可在瀏覽器中直接創建與編輯影像，所有請求與結果皆本地儲存（於 IndexedDB 中），因此不會傳送至第三方伺服器。

核心功能

功能	你能獲得什麼
文字轉影像 & 影像轉影像	輸入提示詞，上傳最多 16 張參考影像，加入遮罩，生成新影像。
批次與迭代工作流程	一次呼叫生成多張影像；單點即可將任意結果提升為下一個回合的參考影像。
串流預覽	模型運作時可看見中間畫格，避免長時間「空白」等待。
透明背景支援	選擇原生 API 模式（若提供者回傳 alpha 通道）或本地後處理，移除純色背景。
代理（聊天）模式	多輪對話式 UI，可記憶上下文，能自動呼叫影像工具，甚至執行可選的網路搜尋。
分支與重做	編輯或重新產生任意步驟；UI 會建立新分支，可在不遺失歷史的情況下切換替代方案。
豐富歷史與畫廊	所有任務皆本地儲存，以瀑布流式畫廊檢視，可依使用者命名的集合整理、搜尋，並匯出為 ZIP。
多 API 提供者支援	內建支援 OpenAI 相容端點、sub2api（非同步）、fal.ai，以及透過 JSON 定義的任意自訂 HTTP 提供者。
按設定檔配置	可儲存多個 API 設定檔（不同金鑰、模型、逾時、代理設定），並即時切換。
代理與 CORS 處理	可選的同源 /api-proxy/，可在 Docker 或 Vercel 部署中啟用，以繞過瀏覽器 CORS 限制。

技術堆疊

• 前端：React 19 + TypeScript，使用 Vite 打包。
• 狀態與儲存：瀏覽器 IndexedDB（SHA‑256 去重）用於僅離線歷史記錄。
• 樣式：Tailwind CSS（從徽章樣式隱式繼承）。
• 部署：靜態建構（npm run build），可部署於 Vercel、GitHub Pages、Cloudflare Workers、Docker（NGINX 包裝）、或任何靜態檔案主機。
• 後端：無需；所有重負載工作由遠端影像生成 API 完成。

如何開始

1. 選擇部署方式 – 一鍵部署 Vercel、GitHub Pages Action、Cloudflare Workers、Docker，或使用 npm run dev 本地執行。
2. 提供預設 API 設定 – 透過 VITE_DEFAULT_API_URL（Docker 中為 DEFAULT_API_URL）環境變數。可提供一般 URL、帶查詢參數的 URL，或定義多個設定檔和自訂提供者的完整 JSON 檔案。
3. 開啟 UI – 托管網站（如 https://gpt-image-playground.cooksleep.dev）載入預設，提示輸入 API 金鑰，即可開始生成影像。

常見使用情境

• 創意專業人士：需要快速產生帶透明背景的原型圖、貼紙或圖示。
• 開發者：無需撰寫程式碼即可測試 gpt-image-2 模型的提示工程。
• 團隊：希望擁有共享且保護隱私的生成資產畫廊（所有內容均保留在瀏覽器中）。
• 實驗者：透過代理聊天模式探索多階段影像工作流程，包括自動網路搜尋增強。

---

TL;DR: GPT Image Playground 是一個開源、基於 React 的 UI，將 OpenAI 相容的影像生成 API 轉化為功能齊全、本地儲存、多設定檔、支援批次處理的沙盒環境，支援可選的對話式「代理」模式，並可輕鬆部署至任何靜態主機平台。