| title | Product image generator using Replicate and Trigger.dev |
|---|---|
| sidebarTitle | Product image generator |
| description | AI-powered product image generator that transforms basic product photos into professional marketing shots using Replicate's image generation models |
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.
Clone this repo and follow the instructions in the README.md file to get started.
<Card title="View the product image generator repo" icon="GitHub" href="https://github.com/triggerdotdev/examples/tree/main/product-image-generator"
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.
- 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
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).
- 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)
- 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