---
title: "Building \"Your Funny Face\" — An AI Caricature Generator with Lovable"
slug: building-your-funny-face-ai-caricature-generator
summary: "A comprehensive deep-dive into building a full-stack AI caricature generator with Lovable, featuring Google Gemini image generation, an innovative emotion-to-music AI pipeline, Stripe monetization, Cloudflare Workers for dynamic OG tags, and a detailed reprompt chain analysis of 100+ development iterations."
tags: ai, lovable, gemini, full-stack, cloudflare, stripe, case-study
ai_model: Claude (article), Gemini 3 Pro Image Preview (caricatures), Gemini 2.5 Flash (enrichment)
published_at: 2026-02-21T20:20:30.859251+00:00
canonical_url: https://jarkkolietolahti.com/articles/building-your-funny-face-ai-caricature-generator
markdown_url: https://cemecdwfdvdbvpvowuln.supabase.co/functions/v1/content-md?slug=building-your-funny-face-ai-caricature-generator
---

# Building "Your Funny Face" — An AI Caricature Generator with Lovable

*A deep dive into building a full-stack AI-powered caricature app using Lovable, Google Gemini, Stripe, ElevenLabs, and Cloudflare Workers — from first prompt to production.*

![Architecture Overview](/assets/your-funny-face-architecture.png)

## What Is Your Funny Face?

[Your Funny Face](https://your-funny-face.lovable.app/) is an AI-powered web application that transforms selfies into fun, exaggerated caricatures. Users upload a photo, choose a style prompt, and receive a unique cartoon portrait generated by Google Gemini's image generation model — all in seconds.

The app has generated **83+ caricatures** since launch and includes features like:

- 📸 **Camera capture, upload, or paste** — multiple ways to submit your selfie
- 🎨 **Custom style prompts** — choose from presets or write your own (Pro)
- 🎵 **AI-generated background music** — each caricature gets its own mood-matched soundtrack
- 🎡 **Community gallery wheels** — scrolling carousels of shared caricatures with auto-play
- 💳 **Stripe monetization** — Pro subscriptions for power users
- 🔒 **Privacy-first design** — original photos are deleted immediately after processing
- 🔗 **Social sharing with dynamic OG images** — via Cloudflare Workers reverse proxy

![Caricature Examples](/assets/your-funny-face-caricatures.png)

---

## Architecture Overview

The application follows a modern serverless architecture built entirely within the Lovable platform:

```
┌─────────────────────────────────────────────────────┐
│                    Frontend (React + Vite)           │
│  ┌──────────┐  ┌──────────┐  ┌──────────────────┐  │
│  │ Photo    │  │ Prompt   │  │ Gallery Wheels   │  │
│  │ Capture  │  │ Selector │  │ (Embla Carousel) │  │
│  └────┬─────┘  └────┬─────┘  └──────────────────┘  │
│       └──────┬───────┘                               │
└──────────────┼───────────────────────────────────────┘
               ▼
┌──────────────────────────────────────────────────────┐
│              Edge Functions (Deno / Supabase)         │
│  ┌──────────────────┐  ┌────────────────────────┐   │
│  │ generate-         │  │ enrich-caricature      │   │
│  │ caricature        │  │ (description + music)  │   │
│  │ → Gemini 3 Pro    │  │ → Gemini 2.5 Flash     │   │
│  │   Image Preview   │  │ → ElevenLabs SFX       │   │
│  └──────────────────┘  └────────────────────────┘   │
│  ┌──────────────────┐  ┌────────────────────────┐   │
│  │ get-caricature   │  │ create-checkout        │   │
│  │ (share/OG data)  │  │ (Stripe payments)      │   │
│  └──────────────────┘  └────────────────────────┘   │
└──────────────────────────────────────────────────────┘
               ▼
┌──────────────────────────────────────────────────────┐
│              Data Layer (Supabase)                    │
│  ┌──────────┐  ┌──────────┐  ┌──────────────────┐  │
│  │ Auth     │  │ Storage  │  │ PostgreSQL       │  │
│  │ (users)  │  │ (images) │  │ (caricatures,    │  │
│  │          │  │          │  │  rate_limits,     │  │
│  │          │  │          │  │  pro_purchases)   │  │
│  └──────────┘  └──────────┘  └──────────────────┘  │
└──────────────────────────────────────────────────────┘
               ▼
┌──────────────────────────────────────────────────────┐
│              CDN / Proxy (Cloudflare)                 │
│  Worker: your-funny-face.com/*                       │
│  ┌─────────────────┐  ┌─────────────────────────┐   │
│  │ Bot → OG HTML   │  │ Human → Lovable origin  │   │
│  │ (dynamic meta)  │  │ (React SPA passthrough) │   │
│  └─────────────────┘  └─────────────────────────┘   │
└──────────────────────────────────────────────────────┘
```

---

## Reprompt Chain Analysis: From Concept to Production

This project went through a fascinating iterative development process entirely through AI-assisted prompting. Here's a reconstruction of the development timeline based on the git history and conversation prompts:

### Phase 1: Core MVP (Day 1-2)
**Goal:** Get a working caricature generator

1. **Initial prompt:** "Create an AI caricature generator" → Scaffolded React app with photo capture
2. **Image generation:** Connected to Lovable AI Gateway using `google/gemini-3-pro-image-preview` for image-to-image transformation
3. **Storage:** Set up Supabase Storage bucket for generated caricatures
4. **Basic flow:** Photo → Edge Function → Gemini → Storage → Display result

**Key re-prompts in this phase:**
- "Add camera capture support" → Integrated `getUserMedia` API
- "Add paste from clipboard" → Added paste event listener
- "Store the generated images" → Created Supabase Storage bucket with RLS policies

### Phase 2: Social Features (Day 2-3)
**Goal:** Let users share their caricatures

5. **Share system:** Created `share_id` generation and `/share/:shareId` route
6. **Gallery:** Built community gallery with public caricatures
7. **Wheels/Carousels:** Implemented Embla-based auto-scrolling carousels of shared caricatures

**Key re-prompts:**
- "Add sharing functionality" → Created share links and share page
- "Show community creations on homepage" → Built `HomepageWheels` component
- "Make the gallery scroll automatically" → Added Embla autoplay plugin

### Phase 3: Dynamic OG Tags (Day 3-5) — The Adventure
**Goal:** Show the actual caricature image when links are shared on social media

This was the most complex phase, requiring multiple iterations:

8. **First attempt:** Cloudflare Worker on subdomain `share.your-funny-face.com`
9. **Problem:** OG image URL was constructed from `shareId`, but actual filenames differed → 404 errors
10. **Fix:** Worker now calls `get-caricature` Edge Function to fetch the real `image_url`
11. **Problem:** Two different URLs for sharing (subdomain for bots, main domain for humans)
12. **Solution:** Unified to single URL via catch-all Cloudflare Worker reverse proxy
13. **Problem:** Lovable didn't recognize the domain through Cloudflare's proxy → "Project not found"
14. **Solution:** Worker explicitly proxies to `your-funny-face.lovable.app` origin
15. **OG image optimization:** Added Supabase image transforms (`/render/image/`) for smaller previews

**Reprompt count for OG alone: ~15 iterations** — This demonstrates how infrastructure challenges (DNS, proxying, domain recognition) often require more iteration than feature code.

### Phase 4: Monetization (Day 4-5)
**Goal:** Add Pro subscriptions

16. **Stripe integration:** Connected Stripe for payment processing
17. **Pro features:** Custom prompts, higher rate limits, more styles
18. **Rate limiting:** IP-based rate limiting with separate limits for free/Pro users
19. **Pro verification:** Checks both `pro_purchases` table and Stripe subscription status

### Phase 5: AI Enrichment (Day 5-7)
**Goal:** Add AI-generated descriptions and music to caricatures

20. **Description generation:** Uses Gemini 2.5 Flash to write 2-3 sentence descriptions of each caricature
21. **"FeelingToMusicPrompt" pipeline:** A novel multi-step AI pipeline:
    - Step 1: AI extracts emotional signals from the description (via tool calling)
    - Step 2: Maps emotions to music parameters (tempo, instruments, energy)
    - Step 3: Generates a music prompt for ElevenLabs
    - Step 4: ElevenLabs generates background music
22. **Speech bubbles:** Typewriter-animated speech bubbles on gallery wheels showing descriptions

**This is one of the most creative uses of AI chaining** — the caricature's visual mood determines its soundtrack through a structured emotion extraction → music generation pipeline.

### Phase 6: Polish & Privacy (Day 7+)
23. **Privacy filters:** Users can apply blur/privacy filters before sharing
24. **Dark mode:** Full theme support with `next-themes`
25. **Audio fallbacks:** Web Audio API synthesized sounds when ElevenLabs API is unavailable
26. **Admin tools:** Gallery moderation, analytics dashboard, prompt management

---

## Key Technical Decisions

### Why Gemini 3 Pro Image Preview?
The `google/gemini-3-pro-image-preview` model was chosen for caricature generation because it excels at image-to-image transformation with creative interpretation. Unlike standard image generation models, it can analyze a photo and produce a stylistically transformed version while preserving the subject's likeness.

### The Emotion-to-Music Pipeline
Perhaps the most innovative feature. Instead of assigning random background music, each caricature gets a personalized soundtrack:

```
Description → AI Emotion Extraction → Mood Mapping → Music Prompt → ElevenLabs
    ↓              ↓                      ↓              ↓
"A cheerful   [cheerful,         "Major key,        Generated
 portrait     playful]           bright bounce,     35-45s loop
 with big     energy: medium     80-110 BPM..."
 smile..."    intensity: 0.6
```

### Cloudflare Workers as Reverse Proxy
Social media bots (Facebook, Twitter, LinkedIn) don't execute JavaScript, so they can't see React-rendered content. The Cloudflare Worker intercepts bot requests and serves pre-rendered HTML with dynamic OG meta tags, while passing human traffic through to the React SPA.

---

## Lessons Learned

1. **OG meta tags are harder than they look** — Getting dynamic social previews working across all platforms required ~15 prompt iterations and multiple architecture pivots.

2. **AI chaining creates emergent behavior** — The emotion→music pipeline produces surprisingly coherent results. Each caricature genuinely "feels" different.

3. **Rate limiting is essential from day one** — The free ElevenLabs API key was quickly flagged for "unusual activity" due to concurrent requests.

4. **Privacy-first design builds trust** — Deleting original photos immediately after processing is both technically sound and user-reassuring.

5. **Lovable + Supabase + Cloudflare = production-ready stack** — The entire application, from auth to payments to AI to CDN, was built through conversational AI development.

---

## Stats at a Glance

| Metric | Value |
|--------|-------|
| Caricatures generated | 83+ |
| Pro subscribers | 1 |
| Edge functions | 18 |
| AI models used | 3 (Gemini Pro, Gemini Flash, ElevenLabs) |
| External integrations | 4 (Stripe, ElevenLabs, Cloudflare Workers, Supabase) |
| Development prompts (estimated) | 100+ |
| Lines of edge function code | ~3,000+ |

---

## Try It Yourself

Head over to [your-funny-face.lovable.app](https://your-funny-face.lovable.app/) and create your own AI caricature. It's free — no signup required for your first few creations.

*Built with [Lovable](https://lovable.dev) — the AI-powered full-stack development platform.*