Overview
This project demonstrates how to build an AI-powered product image generator that transforms basic product photos into professional marketing shots. Users upload a product image and receive three professionally styled variations: clean product shots, lifestyle scenes, and hero shots with dramatic lighting.Video
GitHub repo
Clone this repo and follow the instructions in theREADME.md file to get started.
View the product image generator repo
Click here to view the full code in our examples repository on GitHub. You can fork it and use it
as a starting point for your project.
Tech stack
- Next.js – frontend React framework
- Replicate – AI image generation using the
google/nano-bananaimage-to-image model - UploadThing – file upload management and server callbacks
- Cloudflare R2 – scalable image storage with public URLs
How it works
The application orchestrates image generation through two main tasks:generateImages coordinates batch processing, while generateImage handles individual style generation.
Each generation task enhances prompts with style-specific instructions, calls Replicate’s google/nano-banana image-to-image model, creates waitpoint tokens for async webhook handling, and uploads results to Cloudflare R2. The frontend displays real-time progress updates via React hooks as tasks complete.
Style presets include clean product shots (white background), lifestyle scenes (person holding product), and hero shots (dramatic lighting).
Relevant code
- Image generation tasks – batch processing with waitpoints for Replicate webhook callbacks (
app/trigger/generate-images.ts) - Upload handler – UploadThing integration that triggers batch generation (
app/api/uploadthing/core.ts) - Real-time progress UI – live task updates using React hooks (
app/components/GeneratedCard.tsx) - Custom prompt interface – user-defined style generation (
app/components/CustomPromptCard.tsx) - Main app component – layout and state management (
app/ProductImageGenerator.tsx)
Learn more
- Waitpoints – pause tasks for async webhook callbacks
- React hooks – real-time task updates and frontend integration
- Batch operations – parallel task execution patterns
- Replicate API – AI model integration
- UploadThing – file upload handling and server callbacks