docs/guides/example-projects/product-image-generator.mdx
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 controls className="w-full aspect-video" src="https://content.trigger.dev/product-image-generator-example.mp4" />
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. </Card>
google/nano-banana image-to-image modelThe 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).
app/trigger/generate-images.ts)app/api/uploadthing/core.ts)app/components/GeneratedCard.tsx)app/components/CustomPromptCard.tsx)app/ProductImageGenerator.tsx)