Educational Development Program: Build Apps with Google AI Studio
Source: Dev.to
Project Overview
This entry for the Educational Development Program: Build Apps with Google AI Studio showcases MockupGen, an app that transforms amateur product photos into professional‑looking e‑commerce mockups. It helps Shopify store managers and casual sellers create polished product images without a photo studio.
Application Features
- Upload & Style Selection – Users upload a product photo and choose a background style (e.g., pristine white studio, lifestyle kitchen, outdoor natural environment, minimalist desktop, gradient background).
- Gemini‑Generated Description – Gemini analyzes the uploaded image and produces an optimized product description.
- Background Swap – The app replaces the original background with the selected professional setting while preserving the product itself.
- Side‑by‑Side Comparison – Original and transformed images are displayed next to each other.
- Download & Retry – A download button lets users save the result, and a “Try Another Style” button regenerates the mockup with a different background.
- Design – Clean, modern UI in dark mode.
Iterative Improvements
Aspect‑Ratio Preservation
To maintain product fidelity, the app now automatically detects and preserves the aspect ratio of the original image for the output.
Image API Prompt Enhancements
When calling the Image API for background swapping, the prompt now includes explicit instructions:
Preserve the exact colors, proportions, shape, and details of the original product.
Do not modify, recolor, reshape, or alter the product in any way. Only replace the surrounding background.Before generating the mockup, Gemini describes the product in detail (colors, materials, dimensions, distinctive features) and this description is added as a constraint to the Image API request.
Switch to Gemini Native Image Editing
The previous approach using an external Image API did not yield the desired fidelity. The solution was to switch to Gemini 3 Flash (Nano Banana), which supports native image editing with reference images.
The prompt sent to Gemini now looks like:
Take this exact product [reference image] and place it in a [selected background style].
Keep the product exactly as it appears in the reference image — same colors, same proportions, same details.
Only change the background environment. The product should look photorealistic and properly scaled in the new setting.This native approach significantly improves preservation of the original product while changing only the background.
Live Demo
The most valuable takeaway from this program was learning how to chain multiple AI models together and mastering instruction engineering at every stage of the creation process. 🚀