OpenAI ImageGen Demo
https://github.com/openai/openai-imagegen-demo- Category
- AI Tools
- Rank
- No. 1504Tools index
Previous survey · No. 1510 ·
- Pricing
- Open Source
- Type
- APP
- Builder
- openai
- GitHub
- 71 stars
- Date
About
Next.js photobooth app built on the OpenAI Image API — a reference for image-generation product flows.
What it does
This photobooth turns a captured or uploaded portrait into several styled variations. Users choose up to four presets, watch partial results stream in, preview finished images fullscreen, and download them.
Why it's ranked here
It offers a focused, understandable example of a complete portrait transformation flow, not merely an API request. Centralized presets, generation settings, session state, browser image resizing, streamed progress, and download behavior make the product decisions easy to study.
What's good
The six presets pair readable labels with explicit prompts that preserve identity, pose, expression, and composition. Uploaded images are resized when their longest side exceeds 1536 pixels. Style identifiers are deduplicated, validated against the catalog, and capped before use. API middleware checks origin or referrer and requires JSON for POST requests.
Tradeoffs
The experience is deliberately narrow: portraits, six fixed styles, portrait output, and at most four selections. Requests live in browser session storage, so this is not a persistent gallery or account-based workflow. The package exposes development, build, start, and lint scripts, but no test script.
How to use it well
Use it when prototyping a consumer image-editing flow or learning how capture, preset selection, streamed progress, preview, and download fit together. Customize the style catalog and centralized generation defaults first. It does not cover durable storage, user accounts, a general image editor, or automated testing.
Technical notes+
package.json defines a private Next.js 15 application using React 19, TypeScript 5, Tailwind CSS 4, Radix Slot, Lucide, ESLint, and npm scripts for development, build, start, and lint. lib/constants.ts centralizes the four-style limit plus GPT Image 2, 1024x1536, high-quality PNG, and two partial-image defaults. lib/sse.ts parses and formats named server-sent events. lib/photobooth-session.ts validates base64 image data URLs and normalized styles before restoring session state. lib/browser/file-utils.ts reads uploads, downsizes images through canvas, and triggers downloads. middleware.ts protects API paths with origin or referrer checks and enforces JSON POST bodies.
Observed
- License
- MIT, including commercial use, modification, and distribution
- Primary language
- TypeScript
- Packaging
- Private npm package with development, build, start, and lint scripts
- Interface
- Next.js web application using the OpenAI Image API in edit mode
- Platform
- Browser-based photobooth served by Next.js
- Framework stack
- Next.js 15, React 19, Tailwind CSS 4, and shadcn/ui primitives
- Generation model
- GPT Image 2
- Testing surface
- No test script is defined in package.json
Read from README.md, package.json, lib/sse.ts, lib/utils.ts, lib/constants.ts, lib/photobooth-styles.ts, lib/photobooth-results.ts, lib/photobooth-session.ts, lib/photobooth-style-utils.ts, lib/browser/file-utils.ts, middleware.ts, next-env.d.ts, next.config.ts, eslint.config.mjs, postcss.config.mjs.
What it can do
Generate images from text descriptions
Text prompt describing desired image → AI-generated image
Create photobooth-style images
User interaction with photobooth interface → Generated photo in photobooth format
Process image generation requests
Image generation parameters and settings → Processed image file
Demonstrate OpenAI Image API integration
API calls and parameters → Reference implementation example
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.