How to Clone Facetune

Create a Facetune-style selfie retouch app called Glowtouch as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
A narrow portrait-retouch editor. Manual tools (smooth, heal, whiten, brighten, adjust, filters) run client-side on a canvas; AI tools (background swap, headshot) call an image API. Freemium: free exports watermarked, premium unlocks everything plus AI credits.

## Screens
- Marketing landing: interactive before/after slider hero, feature cards, pricing (weekly/yearly toggle, yearly highlighted 'save 80%'), FAQ accordion
- Editor (authed): centered photo canvas, bottom tool rail, contextual intensity slider, undo/redo stack, hold-to-compare, top-right Export
- AI Studio: background presets + headshot styles, credit cost badge, async job with a loading state and result gallery
- My Photos: grid of edits with re-edit / download
- Paywall modal: benefits, yearly-preselected plan, 3-day trial note, restore link
- Profile: subscription + credit balance, manage plan

## Prisma schema
User (id, email, name, isPremium, trialEndsAt, aiCredits), Photo (id, userId, originalUrl, editedUrl, createdAt), Edit (id, photoId, tool, paramsJson), AiJob (id, userId, type, status, inputUrl, outputUrl, creditsSpent)

## Logic
- Non-destructive edit model: store an ordered stack of edits as JSON; re-render the canvas by replaying them so 'reset' and 'compare' are trivial
- Implement smoothing with a masked Gaussian/bilateral pass on a WebGL or Skia canvas; heal with a clone-stamp from nearby pixels; whiten/brighten as masked curve adjustments
- Face-dependent tools (whiten, brighten) need landmark regions - call a face-landmark API and cache the result per photo; hide those tools gracefully if detection fails
- Export: if free, composite a watermark; if premium, clean export. Gate AI Studio behind isPremium and decrement aiCredits per job
- Stub the AI API behind a single async function (createAiJob) that currently returns a placeholder after a timeout - structure it so a real provider (Replicate/fal) drops in
- The 3-day trial sets isPremium with trialEndsAt = now + 3 days (mock checkout is fine; structure it so Stripe replaces it)

## Style
Bright premium-beauty: pink-to-peach gradients, white editor surface, rounded-2xl, glossy pill buttons, Poppins. Mobile-first portrait layout, big touch targets.
Floating contextual sliders with numeric readouts; a held compare button; subtle haptic-feeling transitions.
Keep accent color only on the active tool and the primary CTA so the photo stays the hero.

Seed: one demo user with 100 AI credits and 3 sample photos with edit stacks.

Build a production-quality Facetune-style portrait retouch app. Mobile-first PWA now; the editor's gesture and render layer should be portable to a React Native + Skia port later.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa
- Canvas: WebGL via a thin shader layer (or @shopify/react-native-skia in the RN port) for masked filters; keep an immutable, replayable edit stack
- Supabase: Postgres, Auth, Storage for originals/exports
- Stripe Billing: weekly + yearly, 3-day trial; customer portal
- AI: a provider-agnostic ImageService interface; first implementation calls Replicate/fal for matting + generation

## Critical architecture
- Editing is non-destructive: state is { originalUrl, edits: Edit[] }; rendering replays edits into the GL pipeline so undo/redo, compare and reset are pure operations
- Face-dependent tools (whiten, brighten, reshape) need landmarks - call a face-landmark API/model and cache the result per photo; degrade gracefully (hide reshape) if detection fails
- AI jobs are async and metered: createJob writes an ai_jobs row, a server route invokes the provider, a webhook/poll updates status; credits are decremented server-side ONLY (clients can't grant themselves credits)
- Be explicit that accurate face-reshaping and matting are model/API dependencies, not something we hand-roll

## Schema
profiles (id, is_premium, trial_ends_at, ai_credits), photos (id, user_id, original_path, edited_path), edits (id, photo_id, ordinal, tool, params jsonb), ai_jobs (id, user_id, type, status, input_path, output_path, credits_spent). RLS on every table; storage paths are per-user and signed.

## Implementation order
1. Scaffold, Supabase schema + RLS, auth, photo upload to storage
2. Canvas core: GL pipeline, the edit-stack model, brightness/contrast/warmth adjustments + filters, undo/redo, hold-to-compare
3. Retouch tools: skin smoothing (masked bilateral), heal/clone, whiten/brighten masked to landmark regions
4. Export: watermark for free, clean for premium; paywall + Stripe Checkout with trial; webhook sets is_premium
5. AI Studio: ImageService interface, background matting/swap and headshot generation, ai_jobs + credit metering server-side
6. PWA polish: installable, offline shell, share-sheet export

## Quality bar
- Tools feel instant: filter changes render at 60fps on a mid phone; brush strokes don't block the main thread
- No premium tool or clean export is reachable by a free client (verify server-side)
- Conversion events to PostHog (editor_opened, tool_used, paywall_shown, trial_started)

Start with step 1 and the RLS policies, then show me the edit-stack types before building the GL pipeline.

Design the complete UI for a Facetune-style selfie retouch app called Glowtouch. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: bright, glossy premium-beauty - soft pink-to-peach gradients, abundant white space, rounded-2xl cards, glossy pill buttons, Poppins type, gentle shadows. The editor surface is near-white so the photo is always the hero.

## Screens

### 1. Marketing landing
- Hero with a draggable before/after slider over a portrait, serif-free headline 'Your best selfie, in one tap', glossy CTA
- Three feature cards (Smooth, Background, AI Headshots) with soft icons, pricing toggle (weekly $4.99 / yearly $29.99 with SAVE 80% badge), FAQ accordion, light footer

### 2. Editor (the centerpiece)
- Photo centered on a clean canvas with a subtle checkerboard behind transparency
- Bottom horizontal tool rail with icon+label chips: Smooth, Heal, Whiten, Brighten, Background, Adjust, Filters
- When a tool is active, a floating intensity slider appears above the rail; top bar has Undo, Redo, a held 'Compare' eye, and an Export button
- A small 'AI' sparkle button that opens AI Studio

### 3. AI Studio sheet
- Bottom sheet with two tabs: Backgrounds (preset thumbnails - Studio, Gradient, Office, Beach) and Headshots (style cards - Corporate, Creative, LinkedIn)
- Each option shows a credit cost chip; a 'Generate' CTA; a result strip with the generated variants and a 'use' action; a clear note that generation takes a few seconds

### 4. My Photos
- Responsive grid of edited photos with a hover/long-press menu: Re-edit, Download, Delete; empty state with an 'Upload a selfie' dropzone

### 5. Paywall modal
- Glass card over a blurred editor: benefit checklist (No watermark, All tools, AI credits), plan selector (yearly preselected with badge), 3-day trial timeline graphic, primary CTA, restore-purchase link

### 6. Profile
- Avatar header, credit-balance card with a 'Get more' chip, subscription status row, account rows

### 7. Empty + loading states
- Editor empty state: a friendly 'Upload a selfie' dropzone with a sample-photo shortcut
- AI generation loading: a shimmering placeholder card with a 'this takes a few seconds' caption and a credit-spent note

Fully responsive, designed mobile-first in portrait. Use realistic content: tool tooltips, sample retouched portraits, headshot style names. Make the before/after slider and the tool rail feel tactile.
Keep the editor chrome minimal so the photo dominates; let accent color appear only on the active tool and the primary CTA.

Build a selfie retouching app (Facetune model) called Glowtouch.

## Entities
- Photo: user, originalUrl, editedUrl, createdAt
- Edit: photo reference, tool (smooth/heal/whiten/brighten/background/adjust/filter), paramsJson, ordinal
- AiJob: user, type (background/headshot), status (queued/done/failed), inputUrl, outputUrl, creditsSpent
- UserProfile: isPremium, trialEndsAt, aiCredits

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: uses manual tools; exports carry a watermark; AI Studio is locked
- Premium user: clean exports, all tools, monthly AI credits
- Admin: dashboard (total users, premium count, AI jobs run), can adjust a user's credits

## Pages
1. Landing: before/after hero, pricing (weekly $4.99 / yearly $29.99 with trial), FAQ
2. Editor: photo canvas, tool rail (smooth/heal/whiten/brighten/background/adjust/filters), intensity slider, undo/redo, compare, export
3. AI Studio: background presets and headshot styles, each with a credit cost, async generation with a result gallery
4. My Photos: grid of edits with re-edit and download
5. Profile: subscription status, credit balance, account
6. Admin: users table and AI-job log

## Rules
- Free exports add a watermark; premium exports are clean
- AI Studio requires premium and spends one credit per job; block when credits = 0
- Trial sets isPremium true and trialEndsAt = now + 3 days; revert to free after expiry
- State clearly in the app that AI background and headshot features depend on an external image API

## Look & feel
Bright premium-beauty: pink-to-peach gradients, white editor surface, rounded cards, glossy buttons. Mobile-first portrait.

Seed with one admin user, one demo user with 100 credits, and 3 sample edited photos.