I built a full-stack Next.js application centered around a multi-step wizard. Users pick a category, choose a character and background, upload their photo, and receive a personalized portrait within seconds.
The critical UX decision was adopting a free-preview model. Instead of a pay-first gate, the system generates a watermarked preview instantly. Users see their portrait before spending a dollar. This removed the biggest friction point -asking someone to pay for something they've never seen.
Server-side watermarking applies a multi-layer protection pipeline (hue shifting, strategic blurring, noise, text overlay) using Sharp. The watermark is robust enough to prevent screenshot theft but subtle enough that the portrait still sells itself. Clean originals never touch the frontend until payment clears.
The image generation pipeline sends user photos to Google's Gemini model with carefully engineered prompts -each refined through dozens of iterations to preserve facial identity while transforming everything else. Character-specific if/then blocks handle costume logic, face anchoring patterns prevent the model from altering features, and safety-filter-aware wording avoids content blocks.
