Full-Stack · Multimodal AI · Production · 1 day build

AI Image Composer

A Polish creative studio was spending hours on trial-and-error prompting to produce personalized AI paintings for clients. The bottleneck was identity replacement — getting the client's face into a scene without quality loss. Built a production web app in one day that turns this into a 30-second workflow.

30 secPer artwork from upload to result — was hours of manual work per image
1 dayFrom requirement to production deployment
85–90%Daily team adoption from day one — simpler than the manual process
Mobile-firstOptimized for phones and field usage, not just desktop demo
How it works

The workflow

  • User uploads source photo + selects style template from the UI.
  • Canvas API extracts face region with masking — no external preprocessing.
  • Gemini multimodal API performs identity-preserving style transfer in the cloud.
  • Result delivered in the browser within seconds, ready to download or share.
Engineering choices

Why this approach

  • Chose AI generation over geometric transformation (SAM2 segmentation) — adoption mattered more than technical elegance.
  • React 19 for instant UI feedback without page reloads.
  • Google Cloud Run deployment for zero-config serverless backend scaling.
  • Mobile-first design: target users work on phones at client visits.
Business impact

What changed

  • Hours of manual prompting per artwork → 30 seconds per artwork.
  • 85-90% daily team adoption from day one — because it was simpler than the old workflow.
  • Studio can now handle 10x more client orders without additional staff.
  • Same-day delivery of personalized artwork replaced next-day or longer turnaround.
Your use case

Similar problems I can solve

  • Any creative or marketing team producing personalized visual content at volume.
  • Product photography automation for e-commerce.
  • Automated mockup generation for interior design or retail sales teams.
  • Custom AI image workflows integrated into existing business tools.
Engineering Deep Dive

Multimodal Identity Preservation & Edge Processing Pipeline

Client-side preprocessing with Canvas API: Mobile camera photos often exceed 12 MB in raw resolution. Uploading full uncompressed payloads introduces network latency and spikes bandwidth costs. The frontend uses the HTML5 Canvas API to perform client-side orientation normalization, smart downscaling, and facial bounding-box alpha segmentation. Only the essential cropped facial region is streamed to the backend, cutting network payload size by over 80%.

Multimodal conditioning & style blending: The application pairs the extracted facial features with high-fidelity artistic style templates via the Gemini multimodal API. Custom negative prompt controls prevent unnatural smoothing, plastic skin artifacts, and uncanny valley distortions while preserving recognizable eye geometry, smile shape, and facial contours. Output resolution is calibrated for large-format fine-art canvas printing.

Stateless privacy & zero-storage security: To guarantee GDPR compliance when processing personal client photos, the Cloud Run backend functions completely statelessly. Photos are never written to disk, databases, or object storage. The image is processed entirely in memory, delivered back to the client browser over HTTPS within 30 seconds, and immediately wiped from RAM.

FAQ

Frequently Asked Questions

How much manual work does AI image automation save for creative businesses?
This AI image composer reduced artwork production time from hours of manual prompting and Photoshop editing to a 30-second automated workflow. For creative studios and e-commerce brands producing high volumes of visual assets, this represents a 95%+ reduction in manual production overhead.
How does the pipeline preserve client identity without distortion?
The system combines Canvas API facial bounding-box segmentation with Gemini multimodal conditioning. By isolating facial landmarks before style transfer and applying structured negative prompting, the tool retains exact facial proportions, eye shape, and likeness while seamlessly adapting hair and lighting to the chosen painterly style.
Which businesses in Germany and the EU benefit most from automated image workflows?
E-commerce merchants with large product catalogs, interior designers needing on-the-fly room mockups, digital advertising agencies, and personalized gift studios. Automating repetitive graphic rendering eliminates bottlenecks and frees design staff for high-value creative direction.
How are customer data privacy and GDPR compliance handled?
Customer photos are processed strictly in volatile RAM on Google Cloud Run and streamed back directly to the client session. No biometric data or original photographs are stored in databases or persistent file storage, guaranteeing strict compliance with European data privacy standards.
Can this pipeline integrate with existing shop systems like Shopify or WooCommerce?
Yes. The service exposes a lightweight REST API that connects directly to product catalog webhooks, digital asset managers, or headless e-commerce backends. When a customer uploads a portrait or photo at checkout, the rendering pipeline triggers automatically, producing print-ready composite assets for fulfillment without manual graphic designer intervention.
Tech stack

Tools used

React 19TypeScriptGemini AICanvas APINode.jsGoogle Cloud RunDocker
Need to automate your creative workflow?

I build multimodal AI tools for creative and marketing teams. Custom image automation, product photography, visual content pipelines. Let's talk.

Contact me Read the article All projects
← Back to projects