A web-based playground to interact with OpenAI's gpt-image-1 model for generating and editing images.
- 🎨 Image Generation Mode: Create new images from text prompts.
- 🖌️ Image Editing Mode: Modify existing images based on text prompts and optional masks.
- ⚙️ Full API Parameter Control: Access and adjust all relevant parameters supported by the OpenAI Images API directly through the UI (size, quality, output format, compression, background, moderation, number of images).
- 🎭 Integrated Masking Tool: Easily create or upload masks directly within the editing mode to specify areas for modification. Draw directly on the image to generate a mask.
- 📜 Detailed History & Cost Tracking:
- View a comprehensive history of all your image generations and edits.
- See the parameters used for each request.
- Get detailed API token usage and estimated cost breakdowns ($USD) for each operation.
- View the full prompt used for each history item. (hint: click the $ amount on the image)
- View total historical API cost.
- 🖼️ Flexible Image Output View: View generated image batches as a grid or select individual images for a closer look.
- 🚀 Send to Edit: Quickly send any generated or history image directly to the editing form.
- 📋 Paste to Edit: Paste images directly from your clipboard into the Edit mode's source image area.
- 💾 Storage: Images are saved automatically to ./generated-images and your generation history is saved in your browser's local storage.
Follow these steps to get the playground running locally.
You need an OpenAI API key to use this application.
-
If you don't have a
.env.localfile, create one. -
Add your OpenAI API key to the
.env.localfile:OPENAI_API_KEY=your_openai_api_key_here
Important: Keep your API key secret. The
.env.localfile is included in.gitignoreby default to prevent accidental commits.
If you need to use an OpenAI-compatible API endpoint (e.g., a local model server or a different provider), you can specify its base URL using the OPENAI_API_BASE_URL environment variable in your .env.local file:
OPENAI_API_KEY=your_openai_api_key_here
OPENAI_API_BASE_URL=your_compatible_api_endpoint_hereIf OPENAI_API_BASE_URL is not set, the application will default to the standard OpenAI API endpoint.
Navigate to the project directory in your terminal and install the necessary packages:
npm install
# or
# yarn install
# or
# pnpm install
# or
# bun installStart the Next.js development server:
npm run dev
# or
# yarn dev
# or
# pnpm dev
# or
# bun devOpen http://localhost:3000 in your web browser. You should now be able to use the gpt-image-1 Playground!
Contributions are welcome! Issues and feature requests, not as much welcome but I'll think about it.
MIT