CookSleep/gpt_image_playground

🎨 GPT Image Playground – What It Is

GPT Image Playground is a web‑based front‑end for OpenAI’s gpt-image-2 (and compatible) image‑generation APIs. It lets you create and edit images directly in the browser, storing every request and result locally (in IndexedDB) so nothing is sent to a third‑party server.

Core capabilities

Feature	What you get
Text‑to‑image & image‑to‑image	Write a prompt, upload up to 16 reference images, add a mask, and generate new pictures.
Batch & iterative workflow	Generate many images in one call; promote any result to a reference image for the next round with a single click.
Streaming preview	While the model is working you see intermediate frames, avoiding long “blank” waits.
Transparent‑background support	Choose native API mode (if the provider returns an alpha channel) or a local post‑process that removes a solid‑color background.
Agent (chat) mode	A multi‑turn conversational UI that remembers context, can call the image tool automatically, and even perform optional web searches.
Branching & redo	Edit or regenerate any step; the UI creates a new branch so you can switch between alternatives without losing history.
Rich history & gallery	All tasks are saved locally, viewable in a waterfall‑style gallery, organized into user‑named collections, searchable, and exportable as a ZIP.
Multiple API providers	Built‑in support for OpenAI‑compatible endpoints, sub2api (async), fal.ai, and any custom HTTP provider via a JSON definition.
Per‑profile configuration	Store several API profiles (different keys, models, timeouts, proxy settings) and switch instantly.
Proxy & CORS handling	Optional same‑origin /api‑proxy/ that can be enabled in Docker or Vercel deployments to bypass browser CORS restrictions.

Tech stack

• Frontend: React 19 + TypeScript, bundled with Vite.
• State & storage: Browser IndexedDB (SHA‑256 deduplication) for offline‑only history.
• Styling: Tailwind CSS (implicit from the badge styling).
• Deployment: Static build (npm run build) that can be served on Vercel, GitHub Pages, Cloudflare Workers, Docker (NGINX‑wrapped), or any static file host.
• Backend: None required; all heavy lifting is done by the remote image‑generation APIs.

How to get started

1. Pick a deployment method – one‑click Vercel, GitHub Pages Action, Cloudflare Workers, Docker, or run locally with npm run dev.
2. Provide a preset API configuration – via the VITE_DEFAULT_API_URL (or DEFAULT_API_URL in Docker) environment variable. You can supply a plain URL, a URL with query parameters, or a full JSON file that defines multiple profiles and custom providers.
3. Open the UI – the hosted site (e.g., https://gpt-image-playground.cooksleep.dev) loads the preset, asks for your API key, and you’re ready to generate images.

Typical use cases

• Creative professionals who need quick mock‑ups, stickers, or icons with transparent backgrounds.
• Developers testing prompt engineering for the new gpt-image-2 model without writing code.
• Teams that want a shared, privacy‑preserving gallery of generated assets (everything stays in the browser).
• Experimenters exploring multi‑step image workflows via the Agent chat mode, including automated web‑search augmentation.

---

TL;DR: GPT Image Playground is an open‑source, React‑based UI that turns OpenAI‑compatible image‑generation APIs into a fully featured, locally‑stored, multi‑profile, batch‑capable playground, with optional conversational “Agent” mode and easy deployment to any static‑hosting platform.