CookSleep/gpt_image_playground

基于 OpenAI gpt-image-2.5 API 的图片生成与编辑工具

🎨 GPT Image Playground – What It Is

GPT Image Playground is a browser‑based UI for OpenAI’s gpt‑image‑2.5 (and compatible) image‑generation APIs. It lets you create, edit, and manage images entirely from a web page, storing everything locally in the browser (IndexedDB) so no server‑side storage is required.

Core capabilities (as described in the README)

Feature What you get
Text‑to‑image & image‑to‑image Generate pictures from a prompt, or supply up to 16 reference images plus a mask for guided edits.
Batch & iterative workflow Create many images in one request, promote any result to a new reference image, and continue editing in a new round.
Streaming preview Both the Images API and the newer Responses API can stream intermediate steps so you see partial results before the final image finishes.
Transparent‑background support Choose API‑native (model returns an alpha channel) or local post‑processing (green/magenta background is stripped in the browser) for PNG/WebP output.
Agent mode (multi‑turn chat) A conversational assistant that remembers context, can call the image tool automatically, supports @‑references to previous pictures, runs parallel batch generations, and can optionally perform web searches.
Branching & redo Edit or regenerate any chat turn, creating a separate branch that isolates image references.
Fine‑grained parameter tracking UI shows the exact size, quality, latency and even the model‑rewritten prompt that the API actually used, with quick‑preset sizes (1K/2K/4K) and automatic rounding to model limits.
Local‑only history & galleries All tasks, thumbnails, and metadata live in IndexedDB, de‑duplicated with SHA‑256. You can organise tasks into named collections, drag‑drop reorder, rename, and export any collection as a ZIP file.
Multi‑provider configuration Built‑in support for OpenAI‑compatible endpoints, sub2api (async), fal.ai, and any custom HTTP provider via a JSON definition. Each provider can have its own API key, model, timeout, proxy settings, and transparent‑background method.
API proxy & CORS handling When deployed behind a server (Docker, Vercel, Cloudflare Workers) you can enable a same‑origin /api‑proxy/ that forwards requests, avoiding browser CORS limits.
Codex‑CLI compatibility If you point the app at a Codex‑CLI endpoint, the UI will automatically split multi‑image requests into concurrent single‑image calls and expose the extra parameters Codex supports.
URL‑based quick‑fill By adding query parameters (apiUrl, apiKey, model, …) you can pre‑populate a configuration – handy for bookmarks or embedding the tool in other sites.

Tech stack (from the badge line and typical Vite projects)

  • Frontend: React 19 + TypeScript, built with Vite.
  • Styling / UI: Likely Tailwind/Ant Design‑style components (not explicitly listed but typical for such dashboards).
  • State & storage: Browser IndexedDB for persistent local history; SHA‑256 hashing for de‑duplication.
  • Build & deployment: Supports static‑site hosts (Vercel, GitHub Pages, Cloudflare Workers) and a Docker image that runs an Nginx proxy + the built assets.

How to run it

  1. One‑click cloud – Deploy on Vercel, GitHub Pages, or Cloudflare Workers. Set the environment variable VITE_DEFAULT_API_URL (or a JSON config) to point at your image‑generation endpoint.
  2. Docker – Pull ghcr.io/cooksleep/gpt_image_playground:latest and run, optionally enabling ENABLE_API_PROXY to hide the real API URL.
  3. Local development – npm install && npm run dev. You can add a dev-proxy.config.json to work around CORS during development.
  4. Static build – npm run build produces a dist/ folder you can serve with any static web server.

Who might use it?

  • Artists & designers who want a quick UI for OpenAI’s image model without writing code.
  • Product teams testing prompt ideas or batch‑generating assets.
  • Developers who need a sandbox to experiment with different API providers (OpenAI, fal.ai, custom self‑hosted endpoints) before integrating them into their own apps.
  • Educators / hobbyists looking for a self‑hosted, privacy‑first image‑generation playground.

Quick start checklist

  • Obtain an API key for a compatible service (OpenAI, fal.ai, a sub2api gateway, etc.).
  • Deploy via your preferred method and set VITE_DEFAULT_API_URL (or use the URL‑fill parameters).
  • Open the web UI, add a configuration (or use the pre‑filled one), and start generating!

License

The project is released under the MIT License, so you’re free to fork, modify, and self‑host.

Related

  • Dispatch
    OpenAI gpt-image-1 API Release

    OpenAI has released gpt-image-1, a natively multimodal image generation model available via API, enabling developers to integrate professional-grade image generation and editing into their own platforms.

  • Dispatch
    Creating Images with ChatGPT: Guide to AI Image Generation

    OpenAI provides a comprehensive guide on using ChatGPT to generate and refine production-ready images through plain-language prompts and iterative editing.

  • Dispatch
    OpenAI GPT-4o Image Generation Release

    OpenAI has integrated native image generation into GPT-4o, enabling precise text rendering, multi-turn refinements, and high-fidelity photorealism within a single multimodal model.

  • Dispatch
    ChatGPT Images 2.5 Release Notes

    OpenAI has released ChatGPT Images 2.5, featuring 50% lower latency, improved reference photo fidelity, and new creative tools like Sketch and templates.

  • Project
    basketikun/chatgpt2api

    An OpenAI-compatible API proxy that reverse-engineers ChatGPT's web capabilities to provide image generation and editing services with built-in account pool management.