Poster Painter is a small BYOK web app that turns an uploaded image into a rough, flat poster painting. It preserves the subject from the upload, then applies a handmade risograph/gouache-inspired style: spot colors, paper grain, dry edges, black ink marks, and a small abstract signature-like scribble.
BYOK means "bring your own key": each person runs the app with their own OpenAI API key, so the project maintainer does not pay for everyone else's generations.
- Upload any JPG, PNG, or WebP image.
- Generate one painted version next to the original.
- Preserve the uploaded subject type: people stay people, toys stay toys, animals stay animals, objects stay objects.
- Use OpenAI image editing through a private server route.
- Keep the OpenAI API key on the server, never in the browser.
- Minimal Next.js app with no database.
Clone the project, install dependencies, and create your environment file:
npm install
cp .env.example .envOpen .env and add your OpenAI API key:
OPENAI_API_KEY=your-openai-api-key
OPENAI_IMAGE_MODEL=gpt-image-1.5Start the local server:
npm run devOpen:
http://localhost:3000
The browser handles the upload and preview. The server route at app/api/generate/route.js receives the image, sends it to OpenAI's image editing API, and returns the generated PNG as a data URL.
The prompt is written to separate content from style:
- The uploaded image controls the subject, props, pose, and composition.
- The app controls the visual treatment: flat poster colors, paper texture, rough ink, and risograph-like grain.
| Name | Required | Description |
|---|---|---|
OPENAI_API_KEY |
Yes | Your private OpenAI API key. |
OPENAI_IMAGE_MODEL |
No | Image model to use. Defaults to gpt-image-1.5. |
npm run dev
npm run build
npm run start
npm run lintThis app can be deployed anywhere that supports Next.js server routes, such as Vercel, Railway, Render, or a VPS.
For public deployments, do not put an OpenAI key in client-side code. Keep it as a private server environment variable.
Uploaded images are sent to your running server and then to OpenAI for generation. This starter does not store uploads or generated images in a database. If you deploy it publicly, update this section with your own privacy policy and retention behavior.
Issues and pull requests are welcome. See CONTRIBUTING.md.
MIT. See LICENSE.