Initial commit of the Ad Generator Lite project, including backend services, frontend components, and configuration files. Added core functionalities for ad generation, user management, and image processing, along with a structured matrix system for ad testing.

.gitignore

@@ -0,0 +1,129 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# Virtual Environment
+venv/
+env/
+ENV/
+env.bak/
+venv.bak/
+.venv
+
+# Environment variables
+.env
+.env.local
+.env.*.local
+.env.production
+.env.development
+
+# IDE / Editors
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+.DS_Store
+*.sublime-project
+*.sublime-workspace
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# pytest
+.pytest_cache/
+.coverage
+htmlcov/
+.tox/
+.hypothesis/
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Node.js / Next.js (root level)
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# Next.js (if built at root)
+.next/
+out/
+build/
+.vercel
+
+# Generated assets
+assets/generated/*
+!assets/generated/.gitkeep
+
+# Database
+*.db
+*.sqlite
+*.sqlite3
+
+# Logs
+*.log
+logs/
+*.log.*
+
+# OS
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Temporary files
+*.tmp
+*.temp
+*.bak
+*.swp
+*~
+
+# Docker
+.dockerignore
+
+# Testing
+.pytest_cache/
+.coverage
+htmlcov/
+.tox/
+
+# TypeScript
+*.tsbuildinfo
+
+# Misc
+*.pem
+.cache/
+.temp/

Dockerfile

@@ -0,0 +1,32 @@
+# Use Python 3.11 slim image
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Create output directory for generated images
+RUN mkdir -p assets/generated
+
+# Expose port (Hugging Face Spaces uses port 7860 by default, but we'll use 8000)
+EXPOSE 8000
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1
+ENV PORT=8000
+
+# Run the application
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

README.md

@@ -1,10 +1,154 @@
----
-title: Creative Breakthrough
-emoji: 😻
-colorFrom: green
-colorTo: blue
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Ad Generator Lite
+
+Generate high-converting ad creatives for Home Insurance and GLP-1 niches using psychological triggers and AI-powered image generation.
+
+## Features
+
+- **Multiple Generation Modes**:
+  - Standard generation with randomization
+  - Batch generation for multiple ads
+  - Angle × Concept matrix system (100 angles × 100 concepts)
+  - Extensive generation with researcher → creative director → designer → copywriter flow
+
+- **Image Generation**: Supports multiple models (z-image-turbo, nano-banana, nano-banana-pro, imagen-4-ultra, recraft-v3, ideogram-v3, photon, seedream-3)
+
+- **Image Correction**: AI-powered image correction for spelling mistakes and visual issues
+
+- **Database Storage**: MongoDB integration for storing generated ads
+
+- **Authentication**: JWT-based authentication system
+
+## Setup
+
+### Environment Variables
+
+Copy `.env.example` to `.env` and fill in your API keys:
+
+```bash
+cp .env.example .env
+```
+
+Required variables:
+- `OPENAI_API_KEY`: Your OpenAI API key
+- `REPLICATE_API_TOKEN`: Your Replicate API token
+- `JWT_SECRET_KEY`: Secret key for JWT tokens (change in production!)
+
+Optional variables:
+- `MONGODB_URL`: MongoDB connection string (for database features)
+- R2 Storage credentials (for cloud image storage)
+
+### Running Locally
+
+1. Install dependencies:
+```bash
+pip install -r requirements.txt
+```
+
+2. Run the server:
+```bash
+uvicorn main:app --reload
+```
+
+3. Access the API at `http://localhost:8000`
+
+### API Documentation
+
+Once running, visit:
+- API docs: `http://localhost:8000/docs`
+- Alternative docs: `http://localhost:8000/redoc`
+
+## Deployment on Hugging Face Spaces
+
+This app is configured for deployment on Hugging Face Spaces using Docker.
+
+### Steps to Deploy
+
+1. **Create a new Space** on Hugging Face:
+   - Go to https://huggingface.co/spaces
+   - Click "Create new Space"
+   - Choose "Docker" as the SDK
+   - Name your space (e.g., `your-username/ad-generator-lite`)
+
+2. **Push your code** to the Space:
+   ```bash
+   git clone https://huggingface.co/spaces/your-username/ad-generator-lite
+   cd ad-generator-lite
+   # Copy your files here
+   git add .
+   git commit -m "Initial commit"
+   git push
+   ```
+
+3. **Set Environment Variables**:
+   - Go to your Space settings
+   - Navigate to "Variables and secrets"
+   - Add all required environment variables from `.env.example`
+   - **Important**: Set `JWT_SECRET_KEY` to a secure random string
+
+4. **Wait for Build**:
+   - Hugging Face will automatically build and deploy your Docker container
+   - Check the "Logs" tab for build progress
+
+### Space Configuration
+
+The `huggingface.yml` file configures:
+- Docker-based deployment
+- Port 8000 for the FastAPI app
+- Health check endpoint
+
+### Accessing Your Deployed App
+
+Once deployed, your app will be available at:
+```
+https://your-username-ad-generator-lite.hf.space
+```
+
+## API Endpoints
+
+### Authentication
+- `POST /auth/login` - Login and get JWT token
+
+### Generation
+- `POST /generate` - Generate single ad (requires auth)
+- `POST /generate/batch` - Generate multiple ads (requires auth)
+- `POST /matrix/generate` - Generate using Angle × Concept matrix (requires auth)
+- `POST /matrix/testing` - Generate testing matrix
+- `POST /extensive/generate` - Extensive generation flow (requires auth)
+
+### Matrix System
+- `GET /matrix/angles` - List all 100 angles
+- `GET /matrix/concepts` - List all 100 concepts
+- `GET /matrix/angle/{key}` - Get specific angle details
+- `GET /matrix/concept/{key}` - Get specific concept details
+- `GET /matrix/compatible/{angle_key}` - Get compatible concepts
+
+### Image Correction
+- `POST /api/correct` - Correct image for spelling/visual issues (requires auth)
+
+### Database
+- `GET /db/stats` - Get database statistics (requires auth)
+- `GET /db/ads` - List stored ads (requires auth)
+- `GET /db/ad/{ad_id}` - Get specific ad
+- `DELETE /db/ad/{ad_id}` - Delete ad (requires auth)
+
+### Health
+- `GET /health` - Health check
+- `GET /` - API information
+
+## Supported Niches
+
+- `home_insurance`: Fear, urgency, savings, authority, guilt strategies
+- `glp1`: Shame, transformation, FOMO, authority, simplicity strategies
+
+## Matrix System
+
+The app includes a systematic Angle × Concept matrix:
+- **100 Angles**: Psychological triggers (10 categories)
+- **100 Concepts**: Visual approaches (10 categories)
+- **10,000 possible combinations**
+
+Formula: 1 Offer → 5-8 Angles → 3-5 Concepts per angle
+
+## License
+
+[Add your license here]

config.py

@@ -0,0 +1,70 @@
+"""Configuration settings for the ad generator."""
+
+from pydantic_settings import BaseSettings, SettingsConfigDict
+from typing import Optional
+
+
+class Settings(BaseSettings):
+    """Application settings loaded from environment variables."""
+    
+    model_config = SettingsConfigDict(
+        env_file=".env",
+        env_file_encoding="utf-8",
+        case_sensitive=False,
+        extra="ignore",
+    )
+    
+    # OpenAI API Key (required for copy generation)
+    openai_api_key: str
+    
+    # Replicate API Token (required for image generation)
+    replicate_api_token: str
+    
+    # Database (MongoDB)
+    mongodb_url: Optional[str] = None
+    mongodb_db_name: str = "creative_breakthrough"
+    
+    # R2 Storage (Cloudflare R2)
+    r2_endpoint: Optional[str] = None
+    r2_bucket_name: Optional[str] = None
+    r2_access_key: Optional[str] = None
+    r2_secret_key: Optional[str] = None
+    r2_public_domain: Optional[str] = None  # Optional: Custom domain for public URLs (e.g., "cdn.example.com")
+    
+    # LLM Settings
+    llm_model: str = "gpt-4o-mini"  # Cost-effective model
+    llm_temperature: float = 0.95  # High for variety
+    
+    # Vision API Settings
+    vision_model: str = "gpt-4o"  # Vision-capable model for image analysis
+    
+    # Third Flow (Extensive) GPT Model Settings
+    third_flow_model: str = "gpt-4o"  # Model for researcher, creative_director, designer, copywriter
+    # Options: "gpt-4o", "gpt-4o-mini", "gpt-4-turbo", "gpt-4"
+    
+    # Image Generation Settings (same models as creative-breakthrough project)
+    image_model: str = "z-image-turbo"  # Z-Image Turbo - fast and high quality
+    # Alternative models: "nano-banana", "nano-banana-pro", "imagen-4-ultra", "recraft-v3", "ideogram-v3", "photon", "seedream-3", "gpt-image-1.5"
+    image_width: int = 1024
+    image_height: int = 1024
+    
+    # Output Settings
+    output_dir: str = "assets/generated"
+    
+    # Production & Storage Settings
+    environment: str = "development"  # "development" or "production"
+    save_images_locally: bool = True  # Whether to save images locally
+    local_image_retention_hours: int = 24  # Hours to keep images locally before cleanup (only in production)
+    
+    # Auth Settings
+    jwt_secret_key: str = "your-secret-key-change-in-production"  # Change this in production!
+    jwt_algorithm: str = "HS256"
+    jwt_expiration_hours: int = 24
+    
+    # Debug
+    debug: bool = False
+
+
+# Global settings instance
+settings = Settings()
+

create_user.py

@@ -0,0 +1,185 @@
+#!/usr/bin/env python3
+"""
+CLI script to create users manually.
+This script is for backend-only user creation (not exposed in frontend).
+
+Usage:
+    python create_user.py <username> <password>
+    
+Example:
+    python create_user.py admin mypassword123
+"""
+
+import asyncio
+import sys
+import os
+
+# Add current directory to path
+sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
+
+from services.database import db_service
+from services.auth import auth_service
+
+
+async def create_user(username: str, password: str):
+    """Create a new user."""
+    # Connect to database
+    print("Connecting to database...")
+    connected = await db_service.connect()
+    if not connected:
+        print("❌ Failed to connect to database. Please check your MONGODB_URL configuration.")
+        return False
+    
+    try:
+        # Check if user already exists
+        existing_user = await db_service.get_user(username)
+        if existing_user:
+            print(f"❌ User '{username}' already exists!")
+            return False
+        
+        # Hash password
+        print(f"Creating user '{username}'...")
+        hashed_password = auth_service.hash_password(password)
+        
+        # Create user
+        user_id = await db_service.create_user(username, hashed_password)
+        
+        if user_id:
+            print(f"✅ User '{username}' created successfully!")
+            print(f"   User ID: {user_id}")
+            print(f"\nYou can now login with:")
+            print(f"   Username: {username}")
+            print(f"   Password: {password}")
+            return True
+        else:
+            print(f"❌ Failed to create user '{username}'")
+            return False
+    
+    except Exception as e:
+        print(f"❌ Error creating user: {e}")
+        return False
+    
+    finally:
+        await db_service.disconnect()
+
+
+async def list_users():
+    """List all users."""
+    print("Connecting to database...")
+    connected = await db_service.connect()
+    if not connected:
+        print("❌ Failed to connect to database. Please check your MONGODB_URL configuration.")
+        return
+    
+    try:
+        users = await db_service.list_users()
+        if not users:
+            print("No users found.")
+        else:
+            print(f"\nFound {len(users)} user(s):\n")
+            for user in users:
+                print(f"  - {user['username']}")
+                print(f"    Created: {user.get('created_at', 'N/A')}")
+                print()
+    
+    except Exception as e:
+        print(f"❌ Error listing users: {e}")
+    
+    finally:
+        await db_service.disconnect()
+
+
+async def delete_user(username: str):
+    """Delete a user."""
+    print("Connecting to database...")
+    connected = await db_service.connect()
+    if not connected:
+        print("❌ Failed to connect to database. Please check your MONGODB_URL configuration.")
+        return False
+    
+    try:
+        # Confirm deletion
+        confirm = input(f"Are you sure you want to delete user '{username}'? (yes/no): ")
+        if confirm.lower() != "yes":
+            print("Cancelled.")
+            return False
+        
+        deleted = await db_service.delete_user(username)
+        if deleted:
+            print(f"✅ User '{username}' deleted successfully!")
+            return True
+        else:
+            print(f"❌ User '{username}' not found or could not be deleted.")
+            return False
+    
+    except Exception as e:
+        print(f"❌ Error deleting user: {e}")
+        return False
+    
+    finally:
+        await db_service.disconnect()
+
+
+def print_usage():
+    """Print usage instructions."""
+    print("""
+User Management Script
+
+Usage:
+    python create_user.py create <username> <password>  - Create a new user
+    python create_user.py list                           - List all users
+    python create_user.py delete <username>              - Delete a user
+
+Examples:
+    python create_user.py create admin mypassword123
+    python create_user.py list
+    python create_user.py delete admin
+    """)
+
+
+async def main():
+    """Main entry point."""
+    if len(sys.argv) < 2:
+        print_usage()
+        return
+    
+    command = sys.argv[1].lower()
+    
+    if command == "create":
+        if len(sys.argv) != 4:
+            print("❌ Error: Username and password required")
+            print("Usage: python create_user.py create <username> <password>")
+            return
+        
+        username = sys.argv[2]
+        password = sys.argv[3]
+        
+        if len(username) < 3:
+            print("❌ Error: Username must be at least 3 characters")
+            return
+        
+        if len(password) < 6:
+            print("❌ Error: Password must be at least 6 characters")
+            return
+        
+        await create_user(username, password)
+    
+    elif command == "list":
+        await list_users()
+    
+    elif command == "delete":
+        if len(sys.argv) != 3:
+            print("❌ Error: Username required")
+            print("Usage: python create_user.py delete <username>")
+            return
+        
+        username = sys.argv[2]
+        await delete_user(username)
+    
+    else:
+        print(f"❌ Unknown command: {command}")
+        print_usage()
+
+
+if __name__ == "__main__":
+    asyncio.run(main())

data/__init__.py

@@ -0,0 +1,2 @@
+# Data module - psychological triggers and patterns
+

data/angles.py

@@ -0,0 +1,297 @@
+"""
+Affiliate Marketing Angles Framework (Lite Version)
+100 angles organized into 10 categories.
+Angles answer: "Why should I care?" (Psychological WHY)
+"""
+
+from typing import Dict, List, Any, Optional
+from enum import Enum
+import random
+
+
+class AngleCategory(str, Enum):
+    """Angle categories."""
+    EMOTIONAL = "emotional"
+    FINANCIAL = "financial"
+    CONVENIENCE = "convenience"
+    IDENTITY = "identity"
+    AUTHORITY = "authority"
+    SOCIAL_PROOF = "social_proof"
+    URGENCY = "urgency"
+    INTELLECTUAL = "intellectual"
+    CURIOSITY = "curiosity"
+    PROBLEM_SOLUTION = "problem_solution"
+
+
+# Complete angles framework - 100 angles (10 per category)
+ANGLES = {
+    AngleCategory.EMOTIONAL: {
+        "name": "Emotional & Psychological",
+        "angles": [
+            {"key": "fear_loss", "name": "Fear / Loss Prevention", "trigger": "Fear", "example": "Don't lose your home to disaster"},
+            {"key": "anxiety_reduction", "name": "Anxiety Reduction", "trigger": "Relief", "example": "Sleep better knowing you're protected"},
+            {"key": "security_safety", "name": "Security / Safety", "trigger": "Security", "example": "Your family's safety is our priority"},
+            {"key": "peace_of_mind", "name": "Peace of Mind", "trigger": "Relief", "example": "Peace of mind for just $X/month"},
+            {"key": "stress_relief", "name": "Stress Relief", "trigger": "Relief", "example": "End the stress of [problem]"},
+            {"key": "relief_escape", "name": "Relief / Escape", "trigger": "Relief", "example": "Finally escape [problem]"},
+            {"key": "confidence_boost", "name": "Confidence Boost", "trigger": "Pride", "example": "Feel confident about your future"},
+            {"key": "hope_optimism", "name": "Hope / Optimism", "trigger": "Hope", "example": "A brighter future starts today"},
+            {"key": "guilt_responsibility", "name": "Guilt (Family)", "trigger": "Guilt", "example": "Do it for your family"},
+            {"key": "pride_self_worth", "name": "Pride / Self-worth", "trigger": "Pride", "example": "You deserve the best"},
+            {"key": "emotional_connection", "name": "Emotional Connection", "trigger": "Belonging", "example": "Feel connected to what matters"},
+            {"key": "nostalgia", "name": "Nostalgia", "trigger": "Emotion", "example": "Remember when things were simpler"},
+            {"key": "empowerment", "name": "Empowerment", "trigger": "Pride", "example": "Take control of your future"},
+        ]
+    },
+    AngleCategory.FINANCIAL: {
+        "name": "Financial",
+        "angles": [
+            {"key": "save_money", "name": "Save Money", "trigger": "Greed", "example": "Save $600/year"},
+            {"key": "cut_hidden_costs", "name": "Cut Hidden Costs", "trigger": "Anger", "example": "Stop paying hidden fees"},
+            {"key": "avoid_overpaying", "name": "Avoid Overpaying", "trigger": "Anger", "example": "Stop overpaying for [service]"},
+            {"key": "financial_freedom", "name": "Financial Freedom", "trigger": "Desire", "example": "Achieve financial freedom"},
+            {"key": "budget_control", "name": "Budget Control", "trigger": "Control", "example": "Take control of your budget"},
+            {"key": "price_comparison", "name": "Price Comparison", "trigger": "Greed", "example": "Compare prices in 30 seconds"},
+            {"key": "smart_spending", "name": "Smart Spending", "trigger": "Pride", "example": "Make smart financial choices"},
+            {"key": "long_term_value", "name": "Long-Term Value", "trigger": "Greed", "example": "Invest in your future"},
+            {"key": "roi_investment", "name": "ROI / Investment", "trigger": "Greed", "example": "Get 3x return on investment"},
+            {"key": "cost_transparency", "name": "Cost Transparency", "trigger": "Trust", "example": "100% transparent pricing"},
+            {"key": "hidden_fees_exposed", "name": "Hidden Fees Exposed", "trigger": "Anger", "example": "No hidden fees, ever"},
+            {"key": "money_back", "name": "Money-Back Guarantee", "trigger": "Security", "example": "Get your money back if not satisfied"},
+            {"key": "payment_flexibility", "name": "Payment Flexibility", "trigger": "Convenience", "example": "Pay your way, when you want"},
+        ]
+    },
+    AngleCategory.CONVENIENCE: {
+        "name": "Convenience & Ease",
+        "angles": [
+            {"key": "fast_instant", "name": "Fast / Instant", "trigger": "Convenience", "example": "Get a quote in 30 seconds"},
+            {"key": "simple_easy", "name": "Simple / Easy", "trigger": "Convenience", "example": "It's that simple"},
+            {"key": "no_paperwork", "name": "No Paperwork", "trigger": "Convenience", "example": "No paperwork required"},
+            {"key": "no_phone_calls", "name": "No Phone Calls", "trigger": "Convenience", "example": "No phone calls needed"},
+            {"key": "one_click", "name": "One-Click / Few Steps", "trigger": "Convenience", "example": "Get started in 3 steps"},
+            {"key": "beginner_friendly", "name": "Beginner-Friendly", "trigger": "Security", "example": "Perfect for beginners"},
+            {"key": "done_for_you", "name": "Done-For-You", "trigger": "Convenience", "example": "We handle everything"},
+            {"key": "hassle_free", "name": "Hassle-Free", "trigger": "Convenience", "example": "100% hassle-free"},
+            {"key": "low_effort", "name": "Low Effort", "trigger": "Convenience", "example": "Minimal effort, maximum results"},
+            {"key": "time_saving", "name": "Time Saving", "trigger": "Convenience", "example": "Save 10 hours per week"},
+            {"key": "automated_process", "name": "Automated Process", "trigger": "Convenience", "example": "Fully automated, zero work"},
+            {"key": "instant_access", "name": "Instant Access", "trigger": "Convenience", "example": "Get instant access now"},
+            {"key": "no_waiting", "name": "No Waiting", "trigger": "Convenience", "example": "No waiting, start immediately"},
+        ]
+    },
+    AngleCategory.IDENTITY: {
+        "name": "Identity & Personalization",
+        "angles": [
+            {"key": "age_based", "name": "Age-Based", "trigger": "Personalization", "example": "Special rates for seniors 65+"},
+            {"key": "location_based", "name": "Location-Based", "trigger": "Personalization", "example": "Best rates in [location]"},
+            {"key": "profession_specific", "name": "Profession-Specific", "trigger": "Personalization", "example": "Special rates for teachers"},
+            {"key": "life_stage", "name": "Life Stage", "trigger": "Personalization", "example": "Perfect for new homeowners"},
+            {"key": "lifestyle_match", "name": "Lifestyle Match", "trigger": "Personalization", "example": "Fits your lifestyle"},
+            {"key": "people_like_you", "name": "People Like You", "trigger": "Social Proof", "example": "Join thousands like you"},
+            {"key": "custom_fit", "name": "Custom Fit", "trigger": "Personalization", "example": "Customized just for you"},
+            {"key": "personal_relevance", "name": "Personal Relevance", "trigger": "Personalization", "example": "Built specifically for you"},
+            {"key": "niche_targeting", "name": "Niche Targeting", "trigger": "Personalization", "example": "Designed for [niche]"},
+            {"key": "localized_offer", "name": "Localized Offer", "trigger": "Personalization", "example": "Best deals in [city]"},
+            {"key": "behavioral_match", "name": "Behavioral Match", "trigger": "Personalization", "example": "Fits your lifestyle perfectly"},
+            {"key": "preference_based", "name": "Preference-Based", "trigger": "Personalization", "example": "Tailored to your preferences"},
+            {"key": "demographic_specific", "name": "Demographic-Specific", "trigger": "Personalization", "example": "Made for people like you"},
+        ]
+    },
+    AngleCategory.AUTHORITY: {
+        "name": "Authority & Trust",
+        "angles": [
+            {"key": "expert_backed", "name": "Expert-Backed", "trigger": "Authority", "example": "Recommended by experts"},
+            {"key": "industry_standard", "name": "Industry Standard", "trigger": "Authority", "example": "The industry standard"},
+            {"key": "government_related", "name": "Government-Related", "trigger": "Authority", "example": "Government-approved program"},
+            {"key": "trusted_millions", "name": "Trusted by Millions", "trigger": "Social Proof", "example": "Trusted by 2M+ customers"},
+            {"key": "years_experience", "name": "Years of Experience", "trigger": "Authority", "example": "20+ years of experience"},
+            {"key": "certified_verified", "name": "Certified / Verified", "trigger": "Authority", "example": "Certified and verified"},
+            {"key": "brand_reputation", "name": "Brand Reputation", "trigger": "Authority", "example": "Trusted brand name"},
+            {"key": "compliance", "name": "Compliance / Regulation", "trigger": "Authority", "example": "Fully compliant and regulated"},
+            {"key": "awards_recognition", "name": "Awards / Recognition", "trigger": "Authority", "example": "Award-winning service"},
+            {"key": "risk_free", "name": "Risk-Free", "trigger": "Security", "example": "100% risk-free guarantee"},
+            {"key": "industry_leader", "name": "Industry Leader", "trigger": "Authority", "example": "The industry leader"},
+            {"key": "proven_track_record", "name": "Proven Track Record", "trigger": "Authority", "example": "Proven results over decades"},
+        ]
+    },
+    AngleCategory.SOCIAL_PROOF: {
+        "name": "Social Proof & Validation",
+        "angles": [
+            {"key": "testimonials", "name": "Testimonials", "trigger": "Social Proof", "example": "See what customers say"},
+            {"key": "reviews_ratings", "name": "Reviews / Ratings", "trigger": "Social Proof", "example": "4.8/5 stars from 10K+ reviews"},
+            {"key": "mass_adoption", "name": "Mass Adoption", "trigger": "Social Proof", "example": "Join 2M+ users"},
+            {"key": "case_studies", "name": "Case Studies", "trigger": "Social Proof", "example": "See real success stories"},
+            {"key": "word_of_mouth", "name": "Word of Mouth", "trigger": "Social Proof", "example": "Recommended by friends"},
+            {"key": "community_trust", "name": "Community Trust", "trigger": "Social Proof", "example": "Trusted by our community"},
+            {"key": "real_stories", "name": "Real Stories", "trigger": "Social Proof", "example": "Real stories from real customers"},
+            {"key": "viral_popularity", "name": "Viral Popularity", "trigger": "FOMO", "example": "Going viral on [platform]"},
+            {"key": "trending_now", "name": "Trending Now", "trigger": "FOMO", "example": "Trending now"},
+            {"key": "most_chosen", "name": "Most Chosen", "trigger": "Social Proof", "example": "The most chosen option"},
+            {"key": "peer_recommendation", "name": "Peer Recommendation", "trigger": "Social Proof", "example": "Recommended by your peers"},
+            {"key": "success_rate", "name": "High Success Rate", "trigger": "Social Proof", "example": "95% success rate"},
+        ]
+    },
+    AngleCategory.URGENCY: {
+        "name": "Urgency & Scarcity",
+        "angles": [
+            {"key": "limited_time", "name": "Limited Time", "trigger": "FOMO", "example": "Limited time offer - ends Friday"},
+            {"key": "ending_soon", "name": "Ending Soon", "trigger": "FOMO", "example": "Offer ending in 48 hours"},
+            {"key": "price_increase", "name": "Price Increase Warning", "trigger": "FOMO", "example": "Prices increasing on [date]"},
+            {"key": "seasonal_change", "name": "Seasonal Change", "trigger": "FOMO", "example": "Spring special - ends soon"},
+            {"key": "renewal_reminder", "name": "Policy Renewal", "trigger": "FOMO", "example": "Renew before [date] to save"},
+            {"key": "countdown", "name": "Countdown", "trigger": "FOMO", "example": "Only 24 hours left"},
+            {"key": "last_chance", "name": "Last Chance", "trigger": "FOMO", "example": "Last chance to save"},
+            {"key": "market_shift", "name": "Market Shift", "trigger": "FOMO", "example": "Market rates changing soon"},
+            {"key": "deadline_pressure", "name": "Deadline Pressure", "trigger": "FOMO", "example": "Deadline: [date]"},
+            {"key": "miss_out_avoidance", "name": "Miss-Out Avoidance", "trigger": "FOMO", "example": "Don't miss this opportunity"},
+            {"key": "early_bird", "name": "Early Bird Special", "trigger": "FOMO", "example": "Early bird pricing ends soon"},
+            {"key": "flash_sale", "name": "Flash Sale", "trigger": "FOMO", "example": "Flash sale - 24 hours only"},
+        ]
+    },
+    AngleCategory.INTELLECTUAL: {
+        "name": "Intellectual / Smart Choice",
+        "angles": [
+            {"key": "insider_knowledge", "name": "Insider Knowledge", "trigger": "Curiosity", "example": "Insider tip: [secret]"},
+            {"key": "avoid_mistakes", "name": "Avoid Common Mistakes", "trigger": "Fear", "example": "Avoid these 5 common mistakes"},
+            {"key": "educated_decision", "name": "Educated Decision", "trigger": "Pride", "example": "Make an educated decision"},
+            {"key": "comparison_logic", "name": "Comparison Logic", "trigger": "Pride", "example": "Compare and choose wisely"},
+            {"key": "transparency", "name": "Transparency", "trigger": "Trust", "example": "100% transparent pricing"},
+            {"key": "informed_buyer", "name": "Informed Buyer", "trigger": "Pride", "example": "For informed buyers"},
+            {"key": "data_driven", "name": "Data-Driven", "trigger": "Authority", "example": "Backed by data"},
+            {"key": "rational_choice", "name": "Rational Choice", "trigger": "Pride", "example": "The rational choice"},
+            {"key": "what_experts_do", "name": "What Experts Do", "trigger": "Authority", "example": "What experts do"},
+            {"key": "optimization", "name": "Optimization", "trigger": "Pride", "example": "Optimize your [thing]"},
+            {"key": "smart_investment", "name": "Smart Investment", "trigger": "Pride", "example": "The smart investment choice"},
+            {"key": "evidence_based", "name": "Evidence-Based", "trigger": "Authority", "example": "Backed by research and data"},
+        ]
+    },
+    AngleCategory.CURIOSITY: {
+        "name": "Curiosity & Pattern Interrupt",
+        "angles": [
+            {"key": "shocking_stats", "name": "Shocking Stats", "trigger": "Curiosity", "example": "Shocking stat: [number]"},
+            {"key": "did_you_know", "name": "Did You Know?", "trigger": "Curiosity", "example": "Did you know [fact]?"},
+            {"key": "open_loops", "name": "Open Loops", "trigger": "Curiosity", "example": "Thousands doing THIS instead"},
+            {"key": "contrarian", "name": "Contrarian Claims", "trigger": "Curiosity", "example": "Why everyone is wrong about [thing]"},
+            {"key": "myth_busting", "name": "Myth Busting", "trigger": "Curiosity", "example": "Myth busted: [myth]"},
+            {"key": "unexpected_truth", "name": "Unexpected Truth", "trigger": "Curiosity", "example": "The truth about [thing]"},
+            {"key": "hidden_secrets", "name": "Hidden Secrets", "trigger": "Curiosity", "example": "The hidden secret to [thing]"},
+            {"key": "scroll_stopper", "name": "Scroll Stopper", "trigger": "Curiosity", "example": "Stop scrolling - read this"},
+            {"key": "pattern_break", "name": "Pattern Break", "trigger": "Curiosity", "example": "This breaks all patterns"},
+            {"key": "curiosity_gap", "name": "Curiosity Gap", "trigger": "Curiosity", "example": "What is THIS?"},
+            {"key": "reveal_secret", "name": "Reveal Secret", "trigger": "Curiosity", "example": "The secret they don't want you to know"},
+            {"key": "unexpected_benefit", "name": "Unexpected Benefit", "trigger": "Curiosity", "example": "The benefit nobody talks about"},
+        ]
+    },
+    AngleCategory.PROBLEM_SOLUTION: {
+        "name": "Problem–Solution",
+        "angles": [
+            {"key": "pain_point", "name": "Pain Point Highlight", "trigger": "Anger", "example": "Tired of [problem]?"},
+            {"key": "frustration_relief", "name": "Frustration Relief", "trigger": "Relief", "example": "End your frustration with [problem]"},
+            {"key": "complexity_simplified", "name": "Complexity Simplified", "trigger": "Convenience", "example": "We make [thing] simple"},
+            {"key": "confusion_clarity", "name": "Confusion → Clarity", "trigger": "Relief", "example": "From confusion to clarity"},
+            {"key": "overwhelm_reduction", "name": "Overwhelm Reduction", "trigger": "Relief", "example": "Stop feeling overwhelmed"},
+            {"key": "direct_fix", "name": "Direct Fix", "trigger": "Relief", "example": "The direct fix for [problem]"},
+            {"key": "shortcut", "name": "Shortcut", "trigger": "Convenience", "example": "The shortcut to [goal]"},
+            {"key": "better_alternative", "name": "Better Alternative", "trigger": "Desire", "example": "A better alternative to [current]"},
+            {"key": "replace_old_way", "name": "Replace Old Way", "trigger": "Desire", "example": "Replace the old way"},
+            {"key": "modern_solution", "name": "Modern Solution", "trigger": "Desire", "example": "The modern solution to [problem]"},
+            {"key": "pain_elimination", "name": "Pain Elimination", "trigger": "Relief", "example": "Eliminate [problem] forever"},
+            {"key": "simplified_complexity", "name": "Simplified Complexity", "trigger": "Convenience", "example": "We simplified the complex"},
+            {"key": "one_click_solution", "name": "One-Click Solution", "trigger": "Convenience", "example": "Solve it in one click"},
+        ]
+    },
+}
+
+
+def get_all_angles() -> List[Dict[str, Any]]:
+    """Get all angles as a flat list."""
+    all_angles = []
+    for category, data in ANGLES.items():
+        for angle in data["angles"]:
+            angle_copy = angle.copy()
+            angle_copy["category"] = data["name"]
+            angle_copy["category_key"] = category
+            all_angles.append(angle_copy)
+    return all_angles
+
+
+def get_angles_by_category(category: AngleCategory) -> List[Dict[str, Any]]:
+    """Get angles for a specific category."""
+    return ANGLES.get(category, {}).get("angles", [])
+
+
+def get_angle_by_key(key: str) -> Optional[Dict[str, Any]]:
+    """Get a specific angle by key."""
+    for category, data in ANGLES.items():
+        for angle in data["angles"]:
+            if angle["key"] == key:
+                angle_copy = angle.copy()
+                angle_copy["category"] = data["name"]
+                angle_copy["category_key"] = category
+                return angle_copy
+    return None
+
+
+def get_random_angles(count: int = 6, diverse: bool = True) -> List[Dict[str, Any]]:
+    """Get random angles, optionally ensuring diversity across categories."""
+    if diverse:
+        # Select one from each category first
+        selected = []
+        categories = list(ANGLES.keys())
+        random.shuffle(categories)
+        
+        for category in categories[:count]:
+            angles = ANGLES[category]["angles"]
+            angle = random.choice(angles).copy()
+            angle["category"] = ANGLES[category]["name"]
+            angle["category_key"] = category
+            selected.append(angle)
+        
+        return selected[:count]
+    else:
+        all_angles = get_all_angles()
+        return random.sample(all_angles, min(count, len(all_angles)))
+
+
+def get_angles_for_niche(niche: str) -> List[Dict[str, Any]]:
+    """Get angles best suited for a niche."""
+    niche_lower = niche.lower()
+    
+    # Niche-specific angle recommendations
+    if "insurance" in niche_lower:
+        recommended_keys = [
+            "fear_loss", "peace_of_mind", "save_money", "price_comparison",
+            "trusted_millions", "limited_time", "avoid_mistakes", "pain_point"
+        ]
+    elif "glp" in niche_lower or "weight" in niche_lower:
+        recommended_keys = [
+            "confidence_boost", "pride_self_worth", "before_after_shock",
+            "testimonials", "trending_now", "modern_solution", "shortcut"
+        ]
+    else:
+        # Default mix
+        recommended_keys = [
+            "save_money", "fast_instant", "testimonials", "limited_time",
+            "shocking_stats", "pain_point"
+        ]
+    
+    angles = []
+    for key in recommended_keys:
+        angle = get_angle_by_key(key)
+        if angle:
+            angles.append(angle)
+    
+    return angles
+
+
+# Top performing angles for initial testing
+TOP_ANGLES = [
+    "save_money", "fear_loss", "fast_instant", "expert_backed",
+    "testimonials", "limited_time", "age_based", "pain_point"
+]
+
+
+def get_top_angles() -> List[Dict[str, Any]]:
+    """Get top performing angles for initial testing."""
+    return [get_angle_by_key(key) for key in TOP_ANGLES if get_angle_by_key(key)]
+

data/concepts.py

@@ -0,0 +1,282 @@
+"""
+Affiliate Marketing Concepts Framework (Lite Version)
+100 concepts organized into 10 categories.
+Concepts answer: "How do I show it visually?" (Creative HOW)
+"""
+
+from typing import Dict, List, Any, Optional
+from enum import Enum
+import random
+
+
+class ConceptCategory(str, Enum):
+    """Concept categories."""
+    VISUAL_STRUCTURE = "visual_structure"
+    UGC_NATIVE = "ugc_native"
+    STORYTELLING = "storytelling"
+    COMPARISON = "comparison"
+    AUTHORITY = "authority"
+    SOCIAL_PROOF = "social_proof"
+    SCROLL_STOPPING = "scroll_stopping"
+    EDUCATIONAL = "educational"
+    PERSONALIZATION = "personalization"
+    CTA_FOCUSED = "cta_focused"
+
+
+# Complete concepts framework - 100 concepts (10 per category)
+CONCEPTS = {
+    ConceptCategory.VISUAL_STRUCTURE: {
+        "name": "Visual Structure",
+        "concepts": [
+            {"key": "before_after", "name": "Before vs After", "structure": "Left=pain, Right=solution", "visual": "Split-screen transformation"},
+            {"key": "split_screen", "name": "Split Screen", "structure": "Two halves comparison", "visual": "Vertical or horizontal split"},
+            {"key": "checklist", "name": "Checklist / Tick Marks", "structure": "List with checkmarks", "visual": "Clean list, prominent checks"},
+            {"key": "bold_headline", "name": "Bold Headline Image", "structure": "Headline dominates", "visual": "Large bold typography"},
+            {"key": "text_first", "name": "Text-First Image", "structure": "Text primary, image secondary", "visual": "Clear typography hierarchy"},
+            {"key": "minimalist", "name": "Minimalist Design", "structure": "White space, minimal elements", "visual": "Clean lines, focused"},
+            {"key": "big_numbers", "name": "Big Numbers Visual", "structure": "Numbers dominate", "visual": "Huge numbers, bold type"},
+            {"key": "highlight_circle", "name": "Highlight / Circle Focus", "structure": "Circle on key element", "visual": "Red circles, arrows"},
+            {"key": "step_by_step", "name": "Step-by-Step Visual", "structure": "Step 1 → 2 → 3", "visual": "Clear flow, numbered"},
+            {"key": "icon_based", "name": "Icon-Based Layout", "structure": "Icons represent features", "visual": "Clear icons, organized"},
+            {"key": "grid_layout", "name": "Grid Layout", "structure": "Organized grid format", "visual": "Clean grid, easy to scan"},
+            {"key": "timeline_visual", "name": "Timeline Visual", "structure": "Time-based progression", "visual": "Clear timeline flow"},
+            {"key": "infographic_style", "name": "Infographic Style", "structure": "Information graphics", "visual": "Data visualization"},
+        ]
+    },
+    ConceptCategory.UGC_NATIVE: {
+        "name": "UGC & Native",
+        "concepts": [
+            {"key": "selfie_style", "name": "Selfie-Style Image", "structure": "Phone camera angle", "visual": "Casual, authentic feel"},
+            {"key": "casual_phone", "name": "Casual Phone Shot", "structure": "Mobile perspective", "visual": "Unpolished, authentic"},
+            {"key": "pov", "name": "POV Perspective", "structure": "First-person view", "visual": "Immersive feel"},
+            {"key": "just_found", "name": "Just Found This", "structure": "Discovery moment", "visual": "Excited, sharing"},
+            {"key": "organic_feed", "name": "Organic Feed Style", "structure": "Native to platform", "visual": "Doesn't look like ad"},
+            {"key": "influencer", "name": "Influencer-Style", "structure": "Polished but authentic", "visual": "Influencer aesthetic"},
+            {"key": "low_production", "name": "Low-Production Authentic", "structure": "Raw, unpolished", "visual": "Authentic feel"},
+            {"key": "reaction", "name": "Reaction Shot", "structure": "Emotional reaction", "visual": "Clear emotion visible"},
+            {"key": "screenshot", "name": "Screenshot-Style", "structure": "Device screenshot", "visual": "Realistic screenshot"},
+            {"key": "story_frame", "name": "Story Frame", "structure": "Vertical story format", "visual": "Story-style layout"},
+            {"key": "behind_scenes", "name": "Behind the Scenes", "structure": "Raw, unedited look", "visual": "Authentic, unpolished"},
+            {"key": "day_in_life", "name": "Day in the Life", "structure": "Daily routine snapshot", "visual": "Relatable daily moments"},
+            {"key": "unboxing_style", "name": "Unboxing Style", "structure": "Product reveal moment", "visual": "Discovery excitement"},
+        ]
+    },
+    ConceptCategory.STORYTELLING: {
+        "name": "Storytelling",
+        "concepts": [
+            {"key": "emotional_snapshot", "name": "Emotional Snapshot", "structure": "Single emotional moment", "visual": "Authentic expression"},
+            {"key": "relatable_moment", "name": "Relatable Daily Moment", "structure": "Everyday scene", "visual": "Relatable situation"},
+            {"key": "micro_story", "name": "Micro-Story Scene", "structure": "Small story moment", "visual": "Narrative feel"},
+            {"key": "life_situation", "name": "Life Situation", "structure": "Real-life context", "visual": "Authentic situation"},
+            {"key": "decision_moment", "name": "Decision Moment", "structure": "Decision point", "visual": "Contemplative"},
+            {"key": "problem_awareness", "name": "Problem Awareness Scene", "structure": "Problem visible", "visual": "Awareness moment"},
+            {"key": "turning_point", "name": "Turning Point Frame", "structure": "Transformation moment", "visual": "Change visible"},
+            {"key": "relief_moment", "name": "Relief Moment", "structure": "Relief visible", "visual": "Peace visible"},
+            {"key": "success_moment", "name": "Success Moment", "structure": "Success visible", "visual": "Achievement visible"},
+            {"key": "future_projection", "name": "Future Projection", "structure": "Future vision", "visual": "Aspirational"},
+            {"key": "journey_arc", "name": "Journey Arc", "structure": "Complete transformation story", "visual": "Full journey visible"},
+            {"key": "milestone_moment", "name": "Milestone Moment", "structure": "Key achievement moment", "visual": "Celebration visible"},
+        ]
+    },
+    ConceptCategory.COMPARISON: {
+        "name": "Comparison & Logic",
+        "concepts": [
+            {"key": "side_by_side_table", "name": "Side-by-Side Table", "structure": "Comparison table", "visual": "Checkmarks/crosses"},
+            {"key": "old_vs_new", "name": "Old Way vs New Way", "structure": "Old vs new comparison", "visual": "Modern highlighted"},
+            {"key": "choice_elimination", "name": "Choice Elimination", "structure": "Others crossed out", "visual": "Winner clear"},
+            {"key": "feature_breakdown", "name": "Feature Breakdown", "structure": "Features compared", "visual": "Easy to compare"},
+            {"key": "pros_cons", "name": "Pros vs Cons", "structure": "Pros on one side, cons other", "visual": "Balanced view"},
+            {"key": "ranking", "name": "Ranking Visual", "structure": "Ranked list", "visual": "Top highlighted"},
+            {"key": "winner_highlight", "name": "Winner Highlight", "structure": "Winner highlighted", "visual": "Others dimmed"},
+            {"key": "bar_scale", "name": "Bar / Scale Visual", "structure": "Visual bars/scales", "visual": "Easy to compare"},
+            {"key": "price_stack", "name": "Price Stack", "structure": "Prices stacked", "visual": "Savings visible"},
+            {"key": "value_breakdown", "name": "Value Breakdown", "structure": "Value components", "visual": "Easy to understand"},
+            {"key": "versus_comparison", "name": "Versus Comparison", "structure": "Head-to-head comparison", "visual": "Clear winner"},
+            {"key": "feature_matrix", "name": "Feature Matrix", "structure": "Feature comparison grid", "visual": "Easy comparison"},
+        ]
+    },
+    ConceptCategory.AUTHORITY: {
+        "name": "Authority & Trust",
+        "concepts": [
+            {"key": "expert_portrait", "name": "Expert Portrait", "structure": "Professional portrait", "visual": "Trustworthy appearance"},
+            {"key": "badge_seal", "name": "Badge / Seal Visual", "structure": "Badges prominent", "visual": "Official look"},
+            {"key": "certification", "name": "Certification Overlay", "structure": "Cert overlaid", "visual": "Official"},
+            {"key": "media_mention", "name": "Media Mention Style", "structure": "Media logos/quotes", "visual": "Credible"},
+            {"key": "professional_setting", "name": "Professional Setting", "structure": "Office/professional space", "visual": "Clean, organized"},
+            {"key": "office_scene", "name": "Office / Desk Scene", "structure": "Office environment", "visual": "Professional"},
+            {"key": "institutional", "name": "Institutional Look", "structure": "Official design", "visual": "Institutional"},
+            {"key": "data_backed", "name": "Data-Backed Visual", "structure": "Charts, graphs", "visual": "Data visible"},
+            {"key": "chart_graph", "name": "Chart / Graph Snapshot", "structure": "Chart dominates", "visual": "Easy to read"},
+            {"key": "trust_signals", "name": "Trust Signal Stack", "structure": "Multiple trust elements", "visual": "Organized signals"},
+            {"key": "credentials_display", "name": "Credentials Display", "structure": "Certifications shown", "visual": "Official credentials"},
+            {"key": "partnership_logos", "name": "Partnership Logos", "structure": "Partner brands visible", "visual": "Trusted partnerships"},
+        ]
+    },
+    ConceptCategory.SOCIAL_PROOF: {
+        "name": "Social Proof",
+        "concepts": [
+            {"key": "testimonial_screenshot", "name": "Testimonial Screenshot", "structure": "Screenshot format", "visual": "Authentic testimonial"},
+            {"key": "review_stars", "name": "Review Stars Visual", "structure": "Stars dominate", "visual": "Large stars, rating"},
+            {"key": "quote_card", "name": "Quote Card", "structure": "Quote as main visual", "visual": "Clear, readable"},
+            {"key": "case_study_frame", "name": "Case Study Frame", "structure": "Case study format", "visual": "Results visible"},
+            {"key": "crowd", "name": "Crowd Visual", "structure": "Many people visible", "visual": "Popular feel"},
+            {"key": "others_like_you", "name": "Others Like You", "structure": "Similar people", "visual": "Relatable, authentic"},
+            {"key": "real_customer", "name": "Real Customer Photo", "structure": "Real customer shown", "visual": "Authentic, relatable"},
+            {"key": "comment_screenshot", "name": "Comment Screenshot", "structure": "Comments visible", "visual": "Realistic comments"},
+            {"key": "ugc_collage", "name": "UGC Collage", "structure": "Multiple UGC pieces", "visual": "Collage format"},
+            {"key": "community", "name": "Community Visual", "structure": "Community visible", "visual": "Belonging feel"},
+            {"key": "user_spotlight", "name": "User Spotlight", "structure": "Individual user featured", "visual": "Personal success story"},
+            {"key": "group_success", "name": "Group Success", "structure": "Multiple success stories", "visual": "Collective achievement"},
+        ]
+    },
+    ConceptCategory.SCROLL_STOPPING: {
+        "name": "Scroll-Stopping",
+        "concepts": [
+            {"key": "shock_headline", "name": "Shock Headline", "structure": "Shocking headline dominates", "visual": "Bold, high contrast"},
+            {"key": "red_warning", "name": "Big Red Warning Text", "structure": "Red warning prominent", "visual": "Large red text"},
+            {"key": "unusual_contrast", "name": "Unusual Contrast", "structure": "High contrast, unusual colors", "visual": "Stands out"},
+            {"key": "pattern_break", "name": "Pattern Break Design", "structure": "Different from expected", "visual": "Unexpected"},
+            {"key": "unexpected_image", "name": "Unexpected Image", "structure": "Surprising visual", "visual": "Attention-grabbing"},
+            {"key": "bold_claim", "name": "Bold Claim Card", "structure": "Bold claim prominent", "visual": "Large text"},
+            {"key": "glitch_highlight", "name": "Glitch / Highlight", "structure": "Glitch effect", "visual": "Modern"},
+            {"key": "disruptive_color", "name": "Disruptive Color Use", "structure": "Unexpected colors", "visual": "Disruptive"},
+            {"key": "meme_style", "name": "Meme-Style Image", "structure": "Meme format", "visual": "Shareable"},
+            {"key": "visual_tension", "name": "Visual Tension", "structure": "Tension in visual", "visual": "Engaging"},
+            {"key": "bold_typography", "name": "Bold Typography Focus", "structure": "Typography dominates", "visual": "Text-first impact"},
+            {"key": "motion_blur", "name": "Motion Blur Effect", "structure": "Dynamic movement feel", "visual": "Energy and action"},
+        ]
+    },
+    ConceptCategory.EDUCATIONAL: {
+        "name": "Educational & Explainer",
+        "concepts": [
+            {"key": "how_it_works", "name": "How It Works", "structure": "Process explanation", "visual": "Step-by-step"},
+            {"key": "three_step", "name": "3-Step Process", "structure": "Step 1→2→3", "visual": "Simple flow"},
+            {"key": "flow_diagram", "name": "Flow Diagram", "structure": "Flowchart format", "visual": "Easy to follow"},
+            {"key": "simple_explainer", "name": "Simple Explainer", "structure": "Simple explanation", "visual": "Easy to understand"},
+            {"key": "faq", "name": "FAQ Visual", "structure": "FAQ format", "visual": "Clear Q&A"},
+            {"key": "mistake_callout", "name": "Mistake Callout", "structure": "Mistakes highlighted", "visual": "Avoid them"},
+            {"key": "do_dont", "name": "Do / Don't Visual", "structure": "Do vs Don't", "visual": "Easy to understand"},
+            {"key": "learning_card", "name": "Learning Card", "structure": "Card with content", "visual": "Educational"},
+            {"key": "visual_guide", "name": "Visual Guide", "structure": "Guide format", "visual": "Instructional"},
+            {"key": "instructional", "name": "Instructional Frame", "structure": "Instruction format", "visual": "Easy to follow"},
+            {"key": "tip_card", "name": "Tip Card", "structure": "Quick tip format", "visual": "Actionable advice"},
+            {"key": "checklist_visual", "name": "Checklist Visual", "structure": "Checklist format", "visual": "Easy to follow"},
+        ]
+    },
+    ConceptCategory.PERSONALIZATION: {
+        "name": "Call-Out & Personalization",
+        "concepts": [
+            {"key": "if_you_are", "name": "If You Are X…", "structure": "Direct callout", "visual": "Specific group"},
+            {"key": "age_specific", "name": "Age-Specific Visual", "structure": "Age-specific imagery", "visual": "Relatable"},
+            {"key": "location_specific", "name": "Location-Specific", "structure": "Location visible", "visual": "Local feel"},
+            {"key": "role_based", "name": "Role-Based Scene", "structure": "Role-specific scene", "visual": "Relatable"},
+            {"key": "lifestyle_scene", "name": "Lifestyle Match", "structure": "Lifestyle visible", "visual": "Match"},
+            {"key": "identity_mirror", "name": "Identity Mirror", "structure": "Identity reflected", "visual": "Connection"},
+            {"key": "targeted_headline", "name": "Targeted Headline", "structure": "Targeted headline", "visual": "Relevant"},
+            {"key": "personalized_hook", "name": "Personalized Hook", "structure": "Personalized opening", "visual": "Connection"},
+            {"key": "segment_callout", "name": "Segment Callout", "structure": "Segment-specific", "visual": "Targeted"},
+            {"key": "direct_address", "name": "Direct Address", "structure": "Direct address format", "visual": "Personal"},
+            {"key": "custom_message", "name": "Custom Message", "structure": "Personalized message", "visual": "One-on-one feel"},
+            {"key": "targeted_audience", "name": "Targeted Audience Visual", "structure": "Specific audience shown", "visual": "Relatable group"},
+        ]
+    },
+    ConceptCategory.CTA_FOCUSED: {
+        "name": "CTA-Focused",
+        "concepts": [
+            {"key": "button_focused", "name": "Button-Focused Image", "structure": "Button prominent", "visual": "Action-oriented"},
+            {"key": "arrow_flow", "name": "Arrow-Directed Flow", "structure": "Arrows point to CTA", "visual": "Directional"},
+            {"key": "highlighted_cta", "name": "Highlighted CTA Box", "structure": "CTA box stands out", "visual": "Clear"},
+            {"key": "action_words", "name": "Action Words Overlay", "structure": "Action words prominent", "visual": "Urgent"},
+            {"key": "click_prompt", "name": "Click Prompt Visual", "structure": "Click prompt visible", "visual": "Action-oriented"},
+            {"key": "tap_here", "name": "Tap-Here Cue", "structure": "Tap here visible", "visual": "Mobile-friendly"},
+            {"key": "next_step", "name": "Next Step Highlight", "structure": "Next step prominent", "visual": "Action-oriented"},
+            {"key": "simple_cta", "name": "Simple CTA Card", "structure": "Simple card with CTA", "visual": "Minimal"},
+            {"key": "countdown_cta", "name": "Countdown CTA", "structure": "Countdown + CTA", "visual": "Urgent"},
+            {"key": "final_push", "name": "Final Push Frame", "structure": "Final push format", "visual": "Urgent, action"},
+            {"key": "pulsing_cta", "name": "Pulsing CTA", "structure": "Animated attention", "visual": "Eye-catching action"},
+            {"key": "multi_cta", "name": "Multiple CTAs", "structure": "Multiple action options", "visual": "Flexible engagement"},
+        ]
+    },
+}
+
+
+def get_all_concepts() -> List[Dict[str, Any]]:
+    """Get all concepts as a flat list."""
+    all_concepts = []
+    for category, data in CONCEPTS.items():
+        for concept in data["concepts"]:
+            concept_copy = concept.copy()
+            concept_copy["category"] = data["name"]
+            concept_copy["category_key"] = category
+            all_concepts.append(concept_copy)
+    return all_concepts
+
+
+def get_concepts_by_category(category: ConceptCategory) -> List[Dict[str, Any]]:
+    """Get concepts for a specific category."""
+    return CONCEPTS.get(category, {}).get("concepts", [])
+
+
+def get_concept_by_key(key: str) -> Optional[Dict[str, Any]]:
+    """Get a specific concept by key."""
+    for category, data in CONCEPTS.items():
+        for concept in data["concepts"]:
+            if concept["key"] == key:
+                concept_copy = concept.copy()
+                concept_copy["category"] = data["name"]
+                concept_copy["category_key"] = category
+                return concept_copy
+    return None
+
+
+def get_random_concepts(count: int = 5, diverse: bool = True) -> List[Dict[str, Any]]:
+    """Get random concepts, optionally ensuring diversity across categories."""
+    if diverse:
+        selected = []
+        categories = list(CONCEPTS.keys())
+        random.shuffle(categories)
+        
+        for category in categories[:count]:
+            concepts = CONCEPTS[category]["concepts"]
+            concept = random.choice(concepts).copy()
+            concept["category"] = CONCEPTS[category]["name"]
+            concept["category_key"] = category
+            selected.append(concept)
+        
+        return selected[:count]
+    else:
+        all_concepts = get_all_concepts()
+        return random.sample(all_concepts, min(count, len(all_concepts)))
+
+
+# Top performing concepts for initial testing
+TOP_CONCEPTS = [
+    "before_after", "selfie_style", "problem_awareness",
+    "side_by_side_table", "relatable_moment"
+]
+
+
+def get_top_concepts() -> List[Dict[str, Any]]:
+    """Get top performing concepts for initial testing."""
+    return [get_concept_by_key(key) for key in TOP_CONCEPTS if get_concept_by_key(key)]
+
+
+def get_compatible_concepts(angle_trigger: str) -> List[Dict[str, Any]]:
+    """Get concepts compatible with a psychological trigger."""
+    # Compatibility mapping
+    compatibility = {
+        "Fear": ["before_after", "shock_headline", "red_warning", "problem_awareness"],
+        "Relief": ["before_after", "relief_moment", "success_moment", "turning_point"],
+        "Greed": ["big_numbers", "price_stack", "value_breakdown", "side_by_side_table"],
+        "FOMO": ["countdown_cta", "red_warning", "crowd", "trending"],
+        "Social Proof": ["testimonial_screenshot", "review_stars", "real_customer", "crowd"],
+        "Authority": ["expert_portrait", "badge_seal", "data_backed", "certification"],
+        "Curiosity": ["shock_headline", "unexpected_image", "pattern_break", "bold_claim"],
+        "Pride": ["success_moment", "before_after", "winner_highlight"],
+        "Convenience": ["three_step", "how_it_works", "simple_explainer"],
+        "Trust": ["trust_signals", "badge_seal", "real_customer", "testimonial_screenshot"],
+    }
+    
+    concept_keys = compatibility.get(angle_trigger, [])
+    return [get_concept_by_key(key) for key in concept_keys if get_concept_by_key(key)]
+

data/containers.py

@@ -0,0 +1,434 @@
+"""
+Container Types - Visual container styles for ad creatives.
+These simulate different interface styles to make ads feel native and authentic.
+"""
+
+from typing import Dict, Any, List, Optional
+import random
+
+
+# Complete list of container types with visual guidance
+CONTAINER_TYPES: Dict[str, Dict[str, Any]] = {
+    "imessage": {
+        "name": "iMessage",
+        "description": "iOS iMessage screenshot style",
+        "visual_guidance": "iOS iMessage screenshot style, blue/green message bubbles, iPhone interface, authentic conversation look",
+        "font_style": "San Francisco, system font",
+        "colors": {
+            "primary": "#007AFF",  # iOS blue
+            "secondary": "#34C759",  # iOS green
+            "background": "#FFFFFF",
+            "text": "#000000",
+        },
+        "best_for": ["personal connection", "conversation", "informal offers"],
+        "authenticity_tips": [
+            "Include battery %, time, signal bars",
+            "Use realistic conversation format",
+            "Keep messages short (2-4 messages)",
+        ],
+    },
+    "whatsapp": {
+        "name": "WhatsApp",
+        "description": "WhatsApp chat screenshot style",
+        "visual_guidance": "WhatsApp chat interface, green bubbles, checkmarks, authentic conversation feel",
+        "font_style": "Helvetica Neue, system font",
+        "colors": {
+            "primary": "#25D366",  # WhatsApp green
+            "secondary": "#128C7E",
+            "background": "#ECE5DD",
+            "text": "#000000",
+        },
+        "best_for": ["personal recommendations", "peer-to-peer", "urgent messages"],
+        "authenticity_tips": [
+            "Include double checkmarks (read receipts)",
+            "Add timestamps",
+            "Use typical WhatsApp formatting",
+        ],
+    },
+    "sms": {
+        "name": "SMS/Text",
+        "description": "Standard SMS text message style",
+        "visual_guidance": "Android/iOS SMS interface, simple text bubbles, notification style",
+        "font_style": "Roboto or San Francisco",
+        "colors": {
+            "primary": "#2196F3",
+            "secondary": "#4CAF50",
+            "background": "#FFFFFF",
+            "text": "#000000",
+        },
+        "best_for": ["urgent alerts", "personal messages", "time-sensitive offers"],
+        "authenticity_tips": [
+            "Keep messages very short",
+            "Use typical SMS abbreviations",
+            "Include carrier/time info",
+        ],
+    },
+    "bank_alert": {
+        "name": "Bank Alert",
+        "description": "Bank transaction notification style",
+        "visual_guidance": "Bank transaction notification style, red alert box, bank app UI, urgent notification aesthetic",
+        "font_style": "Arial, Helvetica, system font",
+        "colors": {
+            "primary": "#D32F2F",  # Alert red
+            "secondary": "#1976D2",  # Bank blue
+            "background": "#FFFFFF",
+            "text": "#212121",
+        },
+        "best_for": ["financial urgency", "savings alerts", "money-related offers"],
+        "authenticity_tips": [
+            "Use official-looking format",
+            "Include dollar amounts",
+            "Add bank-style icons",
+        ],
+    },
+    "news_chyron": {
+        "name": "News Chyron",
+        "description": "Breaking news ticker style",
+        "visual_guidance": "Breaking news ticker style, red/white scrolling text bar, news channel aesthetic, urgent feel",
+        "font_style": "Impact, Arial Black, bold sans-serif",
+        "colors": {
+            "primary": "#FF0000",  # Breaking news red
+            "secondary": "#FFFFFF",
+            "background": "#000000",
+            "text": "#FFFFFF",
+        },
+        "best_for": ["breaking announcements", "urgent news", "time-sensitive offers"],
+        "authenticity_tips": [
+            "Use BREAKING/ALERT prefix",
+            "Include news channel logo area",
+            "Add scrolling ticker effect",
+        ],
+    },
+    "email_notification": {
+        "name": "Email Notification",
+        "description": "Email notification/preview style",
+        "visual_guidance": "Email notification style, email client interface, notification badge, real email app look",
+        "font_style": "System font, Segoe UI, Roboto",
+        "colors": {
+            "primary": "#1A73E8",  # Gmail blue
+            "secondary": "#EA4335",  # Notification badge
+            "background": "#FFFFFF",
+            "text": "#202124",
+        },
+        "best_for": ["official communications", "professional offers", "formal announcements"],
+        "authenticity_tips": [
+            "Include sender, subject, preview",
+            "Add unread badge if relevant",
+            "Use email timestamp format",
+        ],
+    },
+    "reddit_post": {
+        "name": "Reddit Post",
+        "description": "Reddit post/comment style",
+        "visual_guidance": "Reddit discussion style, Reddit UI, comment thread appearance, authentic forum look",
+        "font_style": "Noto Sans, Arial",
+        "colors": {
+            "primary": "#FF4500",  # Reddit orange
+            "secondary": "#0079D3",  # Reddit blue
+            "background": "#DAE0E6",
+            "text": "#1A1A1B",
+        },
+        "best_for": ["social proof", "user discussions", "authentic testimonials"],
+        "authenticity_tips": [
+            "Include upvote counts",
+            "Add username (anonymous style)",
+            "Use subreddit reference",
+        ],
+    },
+    "system_notification": {
+        "name": "System Notification",
+        "description": "iOS/Android system notification popup",
+        "visual_guidance": "iOS/Android system notification style - plain white or gray rounded rectangle box, NO gradients, NO emojis, NO decorative elements, simple system font, minimal text, authentic OS notification appearance",
+        "font_style": "San Francisco, Roboto, system font only",
+        "colors": {
+            "primary": "#000000",
+            "secondary": "#666666",
+            "background": "#F2F2F2",
+            "text": "#000000",
+        },
+        "best_for": ["urgent alerts", "app notifications", "system messages"],
+        "authenticity_tips": [
+            "NO emojis or decorative elements",
+            "Keep to 1-2 short lines",
+            "Use app icon if relevant",
+        ],
+        "avoid": ["emojis", "decorative elements", "gradients", "colorful backgrounds"],
+    },
+    "push_notification": {
+        "name": "Push Notification",
+        "description": "Mobile app push notification style",
+        "visual_guidance": "Mobile push notification banner, app icon, brief text, swipe-to-view format",
+        "font_style": "System font",
+        "colors": {
+            "primary": "#007AFF",
+            "secondary": "#8E8E93",
+            "background": "#FFFFFF",
+            "text": "#000000",
+        },
+        "best_for": ["app alerts", "time-sensitive messages", "quick updates"],
+        "authenticity_tips": [
+            "Include app icon",
+            "Very short headline (5-7 words)",
+            "Add timestamp (e.g., 'now', '2m ago')",
+        ],
+    },
+    "sticky_note": {
+        "name": "Sticky Note",
+        "description": "Handwritten sticky note overlay",
+        "visual_guidance": "Yellow sticky note overlay on image, handwritten-style text, authentic note appearance, slightly wrinkled paper texture",
+        "font_style": "Handwriting fonts, marker style",
+        "colors": {
+            "primary": "#FFEB3B",  # Sticky note yellow
+            "secondary": "#FFC107",
+            "background": "#FFEB3B",
+            "text": "#000000",
+        },
+        "best_for": ["personal reminders", "quick tips", "informal notes"],
+        "authenticity_tips": [
+            "Slight angle/tilt",
+            "Handwritten font style",
+            "Paper texture/wrinkles",
+        ],
+    },
+    "memo": {
+        "name": "Internal Memo",
+        "description": "Office memo/document style",
+        "visual_guidance": "Internal memo document style, typewriter font, yellow/white paper, authentic document appearance",
+        "font_style": "Courier, typewriter fonts",
+        "colors": {
+            "primary": "#000000",
+            "secondary": "#333333",
+            "background": "#FFFFCC",  # Paper yellow
+            "text": "#000000",
+        },
+        "best_for": ["official announcements", "leaked documents", "internal secrets"],
+        "authenticity_tips": [
+            "Add CONFIDENTIAL stamp if relevant",
+            "Include date, to/from fields",
+            "Paper texture/fold marks",
+        ],
+    },
+    "browser_alert": {
+        "name": "Browser Alert",
+        "description": "Browser popup/alert dialog",
+        "visual_guidance": "Browser dialog box, alert icons, OK/Cancel buttons, system alert aesthetic",
+        "font_style": "System font, Segoe UI",
+        "colors": {
+            "primary": "#0078D4",  # Windows blue
+            "secondary": "#D83B01",  # Warning orange
+            "background": "#FFFFFF",
+            "text": "#000000",
+        },
+        "best_for": ["urgent warnings", "system alerts", "confirmation messages"],
+        "authenticity_tips": [
+            "Include browser chrome",
+            "Add alert icon",
+            "Button styling",
+        ],
+    },
+    "social_post": {
+        "name": "Social Media Post",
+        "description": "Facebook/Instagram post style",
+        "visual_guidance": "Social media feed post, user profile, likes/comments, authentic social feel",
+        "font_style": "Helvetica, system font",
+        "colors": {
+            "primary": "#1877F2",  # Facebook blue
+            "secondary": "#E4405F",  # Instagram pink
+            "background": "#FFFFFF",
+            "text": "#1C1E21",
+        },
+        "best_for": ["social proof", "user content", "organic feel"],
+        "authenticity_tips": [
+            "Include profile picture",
+            "Add like/comment counts",
+            "Use platform-specific formatting",
+        ],
+    },
+    "standard": {
+        "name": "Standard Ad",
+        "description": "Clean, professional ad format",
+        "visual_guidance": "Clean ad layout, professional design, clear headline and CTA",
+        "font_style": "Clean sans-serif fonts",
+        "colors": {
+            "primary": "#2196F3",
+            "secondary": "#FF9800",
+            "background": "#FFFFFF",
+            "text": "#212121",
+        },
+        "best_for": ["professional campaigns", "brand awareness", "general advertising"],
+        "authenticity_tips": [
+            "Clear visual hierarchy",
+            "Prominent CTA",
+            "Brand-consistent design",
+        ],
+    },
+    "telegram": {
+        "name": "Telegram",
+        "description": "Telegram chat message style",
+        "visual_guidance": "Telegram chat interface, blue message bubbles, Telegram UI, authentic messaging look",
+        "font_style": "Roboto, system font",
+        "colors": {
+            "primary": "#3390EC",  # Telegram blue
+            "secondary": "#0088CC",
+            "background": "#FFFFFF",
+            "text": "#000000",
+        },
+        "best_for": ["personal messages", "group chats", "informal communication"],
+        "authenticity_tips": [
+            "Include Telegram UI elements",
+            "Use typical Telegram formatting",
+            "Add read receipts if relevant",
+        ],
+    },
+    "slack": {
+        "name": "Slack",
+        "description": "Slack workspace message style",
+        "visual_guidance": "Slack workspace interface, channel messages, Slack UI, professional team communication",
+        "font_style": "Lato, Slack font",
+        "colors": {
+            "primary": "#4A154B",  # Slack purple
+            "secondary": "#36C5F0",
+            "background": "#FFFFFF",
+            "text": "#1D1C1D",
+        },
+        "best_for": ["team communication", "workplace announcements", "professional updates"],
+        "authenticity_tips": [
+            "Include channel name",
+            "Add user avatar",
+            "Use Slack message formatting",
+        ],
+    },
+    "instagram_story": {
+        "name": "Instagram Story",
+        "description": "Instagram story frame style",
+        "visual_guidance": "Instagram story format, vertical 9:16 aspect ratio, story UI elements, authentic Instagram look",
+        "font_style": "Instagram font, system font",
+        "colors": {
+            "primary": "#E4405F",  # Instagram pink
+            "secondary": "#833AB4",
+            "background": "#000000",
+            "text": "#FFFFFF",
+        },
+        "best_for": ["social media engagement", "story-style content", "mobile-first ads"],
+        "authenticity_tips": [
+            "Vertical format (9:16)",
+            "Include story UI elements",
+            "Use Instagram-style fonts",
+        ],
+    },
+    "tiktok_style": {
+        "name": "TikTok Style",
+        "description": "TikTok video frame style",
+        "visual_guidance": "TikTok video frame, vertical format, TikTok UI overlay, authentic TikTok appearance",
+        "font_style": "TikTok font, bold sans-serif",
+        "colors": {
+            "primary": "#000000",
+            "secondary": "#FE2C55",  # TikTok red
+            "background": "#000000",
+            "text": "#FFFFFF",
+        },
+        "best_for": ["youth engagement", "viral content", "trending topics"],
+        "authenticity_tips": [
+            "Vertical video format",
+            "Bold text overlays",
+            "Trending style elements",
+        ],
+    },
+    "linkedin_post": {
+        "name": "LinkedIn Post",
+        "description": "LinkedIn feed post style",
+        "visual_guidance": "LinkedIn feed post, professional network UI, LinkedIn interface, authentic professional look",
+        "font_style": "LinkedIn font, professional sans-serif",
+        "colors": {
+            "primary": "#0077B5",  # LinkedIn blue
+            "secondary": "#000000",
+            "background": "#FFFFFF",
+            "text": "#000000",
+        },
+        "best_for": ["professional networking", "B2B marketing", "career-focused content"],
+        "authenticity_tips": [
+            "Include profile elements",
+            "Professional tone",
+            "LinkedIn-style formatting",
+        ],
+    },
+    "app_store_listing": {
+        "name": "App Store Listing",
+        "description": "App store screenshot style",
+        "visual_guidance": "App store listing screenshot, app icon, ratings, screenshots, authentic app store appearance",
+        "font_style": "San Francisco, system font",
+        "colors": {
+            "primary": "#007AFF",  # iOS blue
+            "secondary": "#FF9500",
+            "background": "#FFFFFF",
+            "text": "#000000",
+        },
+        "best_for": ["app promotion", "mobile apps", "app features"],
+        "authenticity_tips": [
+            "Include app icon",
+            "Star ratings",
+            "App store UI elements",
+        ],
+    },
+    "email_signature": {
+        "name": "Email Signature",
+        "description": "Professional email signature style",
+        "visual_guidance": "Professional email signature, contact info, logo, authentic email signature appearance",
+        "font_style": "Arial, Helvetica, professional fonts",
+        "colors": {
+            "primary": "#000000",
+            "secondary": "#666666",
+            "background": "#FFFFFF",
+            "text": "#000000",
+        },
+        "best_for": ["professional communication", "B2B outreach", "formal announcements"],
+        "authenticity_tips": [
+            "Include contact information",
+            "Professional formatting",
+            "Company logo if relevant",
+        ],
+    },
+}
+
+
+def get_all_containers() -> Dict[str, Dict[str, Any]]:
+    """Get all available container types."""
+    return CONTAINER_TYPES
+
+
+def get_container(key: str) -> Optional[Dict[str, Any]]:
+    """Get a specific container type by key."""
+    return CONTAINER_TYPES.get(key.lower().replace(" ", "_"))
+
+
+def get_random_container() -> Dict[str, Any]:
+    """Get a random container type."""
+    key = random.choice(list(CONTAINER_TYPES.keys()))
+    return {"key": key, **CONTAINER_TYPES[key]}
+
+
+def get_container_visual_guidance(container_key: str) -> str:
+    """Get visual guidance for a container type."""
+    container = get_container(container_key)
+    if container:
+        return container.get("visual_guidance", "")
+    return f"Container type: {container_key}, authentic appearance"
+
+
+def get_native_containers() -> List[str]:
+    """Get container types that look like native app interfaces."""
+    native = ["imessage", "whatsapp", "sms", "system_notification", "push_notification", "email_notification"]
+    return native
+
+
+def get_ugc_containers() -> List[str]:
+    """Get container types that look like user-generated content."""
+    ugc = ["reddit_post", "social_post", "sticky_note", "memo"]
+    return ugc
+
+
+def get_alert_containers() -> List[str]:
+    """Get container types that create urgency."""
+    alerts = ["bank_alert", "news_chyron", "browser_alert", "system_notification"]
+    return alerts
+

data/frameworks.py

@@ -0,0 +1,393 @@
+"""
+Ad Frameworks - Different structural approaches for ad creatives.
+Each framework has a unique style and is suited for different marketing goals.
+"""
+
+from typing import Dict, Any, List, Optional
+import random
+
+
+# Complete list of 10 ad frameworks with detailed configurations
+FRAMEWORKS: Dict[str, Dict[str, Any]] = {
+    "breaking_news": {
+        "name": "Breaking News",
+        "description": "Creates urgency through news-style presentation, feels like breaking news",
+        "best_for": ["announcements", "limited offers", "new discoveries", "price drops"],
+        "visual_style": "News channel aesthetic, red/white ticker, urgent feel",
+        "hook_examples": [
+            "BREAKING: Home Insurance Rates Drop 40%",
+            "URGENT: Limited Time Savings Available Now",
+            "ALERT: New Insurance Savings Discovered",
+            "FLASH: This Week Only - Save $500",
+            "EXCLUSIVE: Secret Savings Method Revealed",
+        ],
+        "headline_style": "ALL CAPS with news prefix (BREAKING:, URGENT:, ALERT:)",
+        "tone": "Urgent, newsworthy, time-sensitive",
+        "psychological_triggers": ["FOMO", "Urgency", "Curiosity"],
+    },
+    "mobile_post": {
+        "name": "Mobile Post",
+        "description": "Optimized for mobile scrolling, short and punchy",
+        "best_for": ["quick engagement", "thumb-stopping content", "social feeds"],
+        "visual_style": "Mobile-first design, clean, easy to read on small screens",
+        "hook_examples": [
+            "Save $500/Year in 2 Minutes",
+            "Get Your Quote - Tap to Start",
+            "See Your Savings Instantly",
+            "One tap. Big savings.",
+            "30 seconds to lower rates",
+        ],
+        "headline_style": "Short, punchy, action-oriented (under 8 words)",
+        "tone": "Quick, casual, conversational",
+        "psychological_triggers": ["Convenience", "Speed", "Ease"],
+    },
+    "before_after": {
+        "name": "Before/After",
+        "description": "Shows transformation, contrast between old and new state",
+        "best_for": ["transformations", "improvements", "results showcase"],
+        "visual_style": "Split-screen comparison, clear before/after contrast",
+        "hook_examples": [
+            "From $200/Month to $50/Month",
+            "Before: High Rates. After: Big Savings",
+            "Transform Your Insurance Costs Today",
+            "See What Changed Everything",
+            "The Difference One Call Made",
+        ],
+        "headline_style": "Comparison format, specific numbers, transformation language",
+        "tone": "Results-focused, proof-based, transformation",
+        "psychological_triggers": ["Transformation", "Proof", "Results"],
+    },
+    "testimonial": {
+        "name": "Testimonial",
+        "description": "Social proof through customer stories and reviews",
+        "best_for": ["trust building", "social proof", "credibility"],
+        "visual_style": "Quote cards, star ratings, real customer photos",
+        "hook_examples": [
+            "Join 50,000+ Happy Customers",
+            "Rated 5 Stars by Thousands",
+            "See Why Customers Love Us",
+            '"Best decision I ever made"',
+            "Real people. Real savings.",
+        ],
+        "headline_style": "Quote format, numbers, social proof indicators",
+        "tone": "Trustworthy, relatable, authentic",
+        "psychological_triggers": ["Social Proof", "Trust", "Belonging"],
+    },
+    "lifestyle": {
+        "name": "Lifestyle",
+        "description": "Aspirational imagery showing the desired lifestyle",
+        "best_for": ["aspiration", "emotional connection", "dream selling"],
+        "visual_style": "Aspirational imagery, happy people, dream scenarios",
+        "hook_examples": [
+            "Live Life Fully Protected",
+            "Drive with Complete Confidence",
+            "Peace of Mind on Every Journey",
+            "The Life You Deserve",
+            "Freedom Starts Here",
+        ],
+        "headline_style": "Aspirational, emotional, lifestyle-focused",
+        "tone": "Aspirational, emotional, inspiring",
+        "psychological_triggers": ["Aspiration", "Desire", "Freedom"],
+    },
+    "educational": {
+        "name": "Educational",
+        "description": "Provides value through information and tips",
+        "best_for": ["authority building", "value-first approach", "complex topics"],
+        "visual_style": "Infographic style, lists, clear information hierarchy",
+        "hook_examples": [
+            "3 Things Your Insurance Agent Won't Tell You",
+            "The Hidden Costs of Cheap Insurance",
+            "What Every Homeowner Must Know",
+            "Learn the Secret to Lower Rates",
+            "5 Mistakes That Cost You Money",
+        ],
+        "headline_style": "Numbers, curiosity gaps, valuable information promise",
+        "tone": "Informative, helpful, authoritative",
+        "psychological_triggers": ["Curiosity", "Knowledge", "Fear of Missing Out"],
+    },
+    "comparison": {
+        "name": "Comparison",
+        "description": "Compares to competitors or alternatives",
+        "best_for": ["differentiation", "competitive positioning", "value demonstration"],
+        "visual_style": "Side-by-side comparison, checkmarks vs X marks",
+        "hook_examples": [
+            "Why Customers Are Switching",
+            "The Difference Is Clear",
+            "Compare and Save Hundreds",
+            "What Others Charge vs Our Price",
+            "See the Better Option",
+        ],
+        "headline_style": "Comparison language, competitive positioning",
+        "tone": "Confident, comparative, fact-based",
+        "psychological_triggers": ["Comparison", "Value", "Smart Choice"],
+    },
+    "storytelling": {
+        "name": "Storytelling",
+        "description": "Narrative-driven content that tells a story",
+        "best_for": ["emotional connection", "memorable content", "brand building"],
+        "visual_style": "Narrative imagery, sequential scenes, story elements",
+        "hook_examples": [
+            "When Sarah Lost Everything...",
+            "The Day That Changed My Life",
+            "I Never Thought It Would Happen to Me",
+            "Here's What Happened Next",
+            "The Story Nobody Tells You",
+        ],
+        "headline_style": "Narrative hooks, story beginnings, curiosity builders",
+        "tone": "Narrative, emotional, personal",
+        "psychological_triggers": ["Empathy", "Curiosity", "Emotion"],
+    },
+    "problem_solution": {
+        "name": "Problem/Solution",
+        "description": "Identifies a problem and presents the solution",
+        "best_for": ["pain point targeting", "solution selling", "problem awareness"],
+        "visual_style": "Problem visualization, solution presentation, relief imagery",
+        "hook_examples": [
+            "Tired of High Insurance Rates?",
+            "Finally, a Solution That Works",
+            "The Problem Nobody Talks About",
+            "End Your Insurance Frustration",
+            "There's a Better Way",
+        ],
+        "headline_style": "Problem questions, solution statements, relief language",
+        "tone": "Empathetic, problem-aware, solution-focused",
+        "psychological_triggers": ["Pain Relief", "Problem Awareness", "Hope"],
+    },
+    "authority": {
+        "name": "Authority",
+        "description": "Establishes expertise and credibility",
+        "best_for": ["credibility building", "expert positioning", "trust establishment"],
+        "visual_style": "Professional imagery, credentials, expert endorsements",
+        "hook_examples": [
+            "Expert-Recommended Insurance",
+            "Backed by 50 Years of Experience",
+            "What the Pros Know About Insurance",
+            "Industry-Leading Protection",
+            "Trusted by Professionals",
+        ],
+        "headline_style": "Authority indicators, credentials, expert language",
+        "tone": "Professional, authoritative, trustworthy",
+        "psychological_triggers": ["Authority", "Trust", "Expertise"],
+    },
+    "scarcity": {
+        "name": "Scarcity",
+        "description": "Creates urgency through limited availability",
+        "best_for": ["limited offers", "exclusive deals", "time-sensitive promotions"],
+        "visual_style": "Countdown timers, limited stock indicators, exclusive badges",
+        "hook_examples": [
+            "Only 50 Spots Left This Month",
+            "Limited Availability - Act Fast",
+            "Exclusive Offer for First 100",
+            "While Supplies Last",
+            "Don't Miss Your Chance",
+        ],
+        "headline_style": "Numbers, time limits, availability language",
+        "tone": "Urgent, exclusive, time-sensitive",
+        "psychological_triggers": ["FOMO", "Urgency", "Exclusivity"],
+    },
+    "benefit_stack": {
+        "name": "Benefit Stack",
+        "description": "Lists multiple benefits in quick succession",
+        "best_for": ["value demonstration", "feature highlights", "quick scanning"],
+        "visual_style": "Bullet points, checkmarks, organized list format",
+        "hook_examples": [
+            "Save Money, Save Time, Save Stress",
+            "3 Benefits in One Solution",
+            "Everything You Need, All in One",
+            "More Coverage, Lower Cost, Better Service",
+            "Protection + Savings + Peace of Mind",
+        ],
+        "headline_style": "Multiple benefits, parallel structure, value stacking",
+        "tone": "Value-focused, comprehensive, efficient",
+        "psychological_triggers": ["Value", "Convenience", "Completeness"],
+    },
+    "risk_reversal": {
+        "name": "Risk Reversal",
+        "description": "Removes risk and uncertainty from the decision",
+        "best_for": ["overcoming objections", "building confidence", "reducing hesitation"],
+        "visual_style": "Guarantee badges, risk-free indicators, confidence builders",
+        "hook_examples": [
+            "100% Risk-Free Guarantee",
+            "Try It Free - No Commitment",
+            "Cancel Anytime, No Questions",
+            "Money-Back Guarantee",
+            "No Risk, All Reward",
+        ],
+        "headline_style": "Guarantee language, risk removal, confidence builders",
+        "tone": "Reassuring, confident, risk-free",
+        "psychological_triggers": ["Security", "Trust", "Risk Reduction"],
+    },
+    "contrarian": {
+        "name": "Contrarian",
+        "description": "Challenges conventional wisdom or expectations",
+        "best_for": ["differentiation", "attention-grabbing", "thought leadership"],
+        "visual_style": "Bold statements, unexpected visuals, pattern breaks",
+        "hook_examples": [
+            "Why Everything You Know About Insurance Is Wrong",
+            "The Unpopular Truth About Rates",
+            "Stop Following the Crowd",
+            "The Counter-Intuitive Way to Save",
+            "What They Don't Want You to Know",
+        ],
+        "headline_style": "Contrarian statements, pattern breaks, unexpected angles",
+        "tone": "Bold, provocative, thought-provoking",
+        "psychological_triggers": ["Curiosity", "Differentiation", "Intellectual"],
+    },
+    "case_study": {
+        "name": "Case Study",
+        "description": "Shows real results and specific outcomes",
+        "best_for": ["proof demonstration", "results showcase", "credibility"],
+        "visual_style": "Before/after data, specific numbers, real examples",
+        "hook_examples": [
+            "How Sarah Saved $1,200 in 6 Months",
+            "Real Results from Real Customers",
+            "The Exact Steps That Worked",
+            "See the Numbers That Matter",
+            "From Problem to Solution: The Journey",
+        ],
+        "headline_style": "Specific examples, real names, concrete results",
+        "tone": "Proof-based, specific, results-focused",
+        "psychological_triggers": ["Proof", "Social Proof", "Results"],
+    },
+    "interactive": {
+        "name": "Interactive",
+        "description": "Engages through questions, quizzes, or participation",
+        "best_for": ["engagement", "personalization", "interaction"],
+        "visual_style": "Interactive elements, questions, quiz formats",
+        "hook_examples": [
+            "Take Our 30-Second Quiz",
+            "Answer 3 Questions, Get Your Rate",
+            "See If You Qualify in 60 Seconds",
+            "What's Your Insurance Personality?",
+            "Find Your Perfect Match",
+        ],
+        "headline_style": "Questions, interactive prompts, participation language",
+        "tone": "Engaging, interactive, personalized",
+        "psychological_triggers": ["Engagement", "Personalization", "Curiosity"],
+    },
+}
+
+# Framework examples by niche
+NICHE_FRAMEWORK_EXAMPLES: Dict[str, Dict[str, List[str]]] = {
+    "home_insurance": {
+        "breaking_news": [
+            "BREAKING: Home Insurance Rates Drop 40%",
+            "ALERT: New Homeowner Discounts Available",
+            "URGENT: Rate Freeze Ends Friday",
+        ],
+        "mobile_post": [
+            "Protect Your Home in 3 Minutes",
+            "One Quote. Big Savings.",
+            "Tap to See Your Rate",
+        ],
+        "before_after": [
+            "Before: $2,400/year. After: $1,200/year",
+            "Old policy vs New savings",
+            "What switching saved me",
+        ],
+        "testimonial": [
+            '"I saved $1,200 on my first year"',
+            "Join 100,000+ protected homeowners",
+            "Rated #1 by customers like you",
+        ],
+        "problem_solution": [
+            "Worried your home isn't covered?",
+            "Stop overpaying for insurance",
+            "End the coverage gaps",
+        ],
+    },
+    "glp1": {
+        "breaking_news": [
+            "NEW: FDA-Approved Weight Loss Solution",
+            "ALERT: Limited Appointments Available",
+            "EXCLUSIVE: Online Consultations Now Open",
+        ],
+        "before_after": [
+            "Her 60-Day Transformation",
+            "What Changed in 90 Days",
+            "The Results Speak for Themselves",
+        ],
+        "testimonial": [
+            '"I finally found what works"',
+            "Thousands have transformed",
+            "Real patients. Real results.",
+        ],
+        "lifestyle": [
+            "Feel Confident Again",
+            "The Energy to Live Fully",
+            "Your New Chapter Starts Here",
+        ],
+        "authority": [
+            "Doctor-Recommended Solution",
+            "Clinically Proven Results",
+            "Backed by Medical Research",
+        ],
+        "scarcity": [
+            "Only 20 Appointments This Week",
+            "Limited Spots Available",
+            "Join the Waitlist Now",
+        ],
+        "risk_reversal": [
+            "100% Satisfaction Guarantee",
+            "Try Risk-Free for 30 Days",
+            "No Commitment Required",
+        ],
+        "case_study": [
+            "How Maria Lost 30 Pounds in 3 Months",
+            "Real Patient Results",
+            "The Transformation Journey",
+        ],
+    },
+}
+
+
+def get_all_frameworks() -> Dict[str, Dict[str, Any]]:
+    """Get all available frameworks."""
+    return FRAMEWORKS
+
+
+def get_framework(key: str) -> Optional[Dict[str, Any]]:
+    """Get a specific framework by key."""
+    return FRAMEWORKS.get(key)
+
+
+def get_random_framework() -> Dict[str, Any]:
+    """Get a random framework."""
+    key = random.choice(list(FRAMEWORKS.keys()))
+    return {"key": key, **FRAMEWORKS[key]}
+
+
+def get_frameworks_for_niche(niche: str, count: int = 3) -> List[Dict[str, Any]]:
+    """Get recommended frameworks for a niche."""
+    niche_lower = niche.lower().replace(" ", "_").replace("-", "_")
+    
+    # Niche-specific framework preferences
+    niche_preferences = {
+        "home_insurance": ["testimonial", "problem_solution", "authority", "before_after", "lifestyle"],
+        "glp1": ["before_after", "testimonial", "lifestyle", "authority", "problem_solution"],
+    }
+    
+    # Get preferred frameworks or use all
+    preferred_keys = niche_preferences.get(niche_lower, list(FRAMEWORKS.keys()))
+    
+    # Add remaining frameworks for variety
+    all_keys = preferred_keys + [k for k in FRAMEWORKS.keys() if k not in preferred_keys]
+    
+    # Select count frameworks with some randomization
+    selected = all_keys[:count]
+    random.shuffle(selected)
+    
+    return [{"key": k, **FRAMEWORKS[k]} for k in selected]
+
+
+def get_framework_hook_examples(framework_key: str, niche: Optional[str] = None) -> List[str]:
+    """Get hook examples for a framework, optionally niche-specific."""
+    if niche:
+        niche_key = niche.lower().replace(" ", "_").replace("-", "_")
+        niche_examples = NICHE_FRAMEWORK_EXAMPLES.get(niche_key, {}).get(framework_key, [])
+        if niche_examples:
+            return niche_examples
+    
+    framework = FRAMEWORKS.get(framework_key)
+    return framework.get("hook_examples", []) if framework else []
+

data/glp1.py

@@ -0,0 +1,683 @@
+"""
+GLP-1 (Weight Loss) - Complete Psychological Arsenal
+All strategies: shame, transformation, FOMO, authority, simplicity, etc.
+Updated with winning ad patterns from high-converting creative analysis.
+"""
+
+# Strategy categories with hooks and descriptions
+STRATEGIES = {
+    # ==========================================================================
+    # NEW: WINNING STRATEGIES FROM HIGH-CONVERTING AD ANALYSIS
+    # ==========================================================================
+    
+    "accusation_opener": {
+        "name": "Accusation Opener",
+        "description": "Direct accusation triggers immediate emotional response",
+        "hooks": [
+            "Still Overweight?",
+            "Another Failed Diet?",
+            "Still Hiding Your Body?",
+            "Tired Of The Lies?",
+            "How Many More Diets Will Fail?",
+            "Still Making Excuses?",
+            "Wasted Money On Diets That Don't Work?",
+            "Why Are You Still Struggling?",
+            "Avoiding The Mirror Again?",
+            "How Long Will You Wait?",
+            "Still Wearing Baggy Clothes To Hide?",
+            "Done Lying To Yourself?",
+        ],
+        "visual_styles": [
+            "person on scale looking frustrated, candid documentary",
+            "oversized clothes on person, accusatory framing",
+            "mirror reflection with accusatory text overlay",
+            "pile of diet books and unused gym equipment",
+            "frustrated person looking at reflection, vintage feel",
+            "before photo style, raw and honest",
+        ],
+    },
+    
+    "curiosity_gap": {
+        "name": "Curiosity Gap",
+        "description": "Open loop with 'THIS' or 'Secret' demands click",
+        "hooks": [
+            "Thousands Are Losing Weight After Discovering THIS",
+            "Doctors Are Prescribing THIS Instead Of Diets",
+            "What Celebrities Have Used For Years",
+            "The Weight Loss Secret They Tried To Hide",
+            "Everyone's Losing Weight Except You. Here's Why.",
+            "What Hollywood Knew For Years Is Now Available",
+            "After THIS, Dieting Becomes Obsolete",
+            "The ONE Thing That Actually Works",
+            "What Your Doctor Isn't Telling You",
+            "People Are Ditching Diets For THIS",
+            "The Method That's Changing Everything",
+            "Discover What Everyone's Talking About",
+        ],
+        "visual_styles": [
+            "transformation collage with 'THIS' callout, documentary style",
+            "person revealing secret, candid testimonial",
+            "before/after with mysterious 'secret' overlay",
+            "celebrity transformation reference, tabloid aesthetic",
+            "dramatic reveal moment, old footage feel",
+            "person sharing discovery, authentic UGC style",
+        ],
+    },
+    
+    "specific_numbers": {
+        "name": "Specific Numbers",
+        "description": "Oddly specific numbers create instant believability",
+        "hooks": [
+            "Lost 47 lbs In 90 Days",
+            "Down 23 lbs In 6 Weeks",
+            "Dropped 4 Dress Sizes In 8 Weeks",
+            "Lost 67 lbs Without Exercise",
+            "From 247 lbs to 168 lbs",
+            "12 lbs Gone In The First Month",
+            "Lost 38 lbs Before Her Reunion",
+            "Dropped 52 lbs After Starting THIS",
+            "91 Days: Lost 41 lbs",
+            "From Size 18 to Size 8",
+            "Lost 1.2 lbs Per Day",
+            "Down 29 lbs In 10 Weeks",
+        ],
+        "visual_styles": [
+            "scale showing specific number, close-up documentary",
+            "before/after with specific weight numbers visible",
+            "measuring tape showing inches lost",
+            "old jeans that are now too big, specific sizes shown",
+            "calendar tracking progress with numbers",
+            "weight loss chart with specific data points",
+        ],
+    },
+    
+    "before_after_proof": {
+        "name": "Before/After Proof",
+        "description": "Transformation proof creates immediate desire",
+        "hooks": [
+            "Same Person. 90 Days Apart.",
+            "Is This Even The Same Person?",
+            "The Transformation That Shocked Everyone",
+            "From THIS to THIS In 12 Weeks",
+            "Unrecognizable In 90 Days",
+            "Her Friends Didn't Recognize Her",
+            "The Picture That Went Viral",
+            "From Hiding To Showing Off",
+            "Watch The Transformation",
+            "Before Anyone Asks: Yes, It's The Same Person",
+            "Jaw-Dropping 90-Day Results",
+            "The Change Everyone's Talking About",
+        ],
+        "visual_styles": [
+            "dramatic split-screen before/after, same outfit",
+            "timeline showing 30/60/90 day progress",
+            "same location before/after comparison",
+            "loose pants/old clothes proof shot",
+            "side-by-side full body transformation",
+            "progress photos documentary style",
+        ],
+    },
+    
+    "quiz_interactive": {
+        "name": "Quiz/Interactive",
+        "description": "Quiz format drives engagement and self-selection",
+        "hooks": [
+            "How Much Weight Could You Lose?",
+            "Take The 30-Second Quiz",
+            "What's Your Weight Loss Type?",
+            "See If You Qualify",
+            "Answer 3 Questions. See Your Results.",
+            "Calculate Your Potential Weight Loss",
+            "Find Your Starting Point",
+            "Check Your Eligibility Now",
+            "Tap Your Age To See Results",
+            "What's Your Goal Weight?",
+            "Select Your Starting Weight",
+            "How Much Do You Want To Lose?",
+        ],
+        "visual_styles": [
+            "quiz interface with weight options, app screenshot",
+            "goal weight selector, clean UI",
+            "Notes app style checklist: 10-20 lbs, 20-40 lbs, 40+ lbs",
+            "interactive calculator showing potential results",
+            "age/weight selector buttons",
+            "eligibility checker interface mockup",
+        ],
+    },
+    
+    "authority_transfer": {
+        "name": "Authority Transfer",
+        "description": "Transfer trust from medical/celebrity authority",
+        "hooks": [
+            "FDA-Approved Weight Loss",
+            "Doctor-Prescribed. Clinically Proven.",
+            "Used By 15 Million Patients",
+            "What Doctors Prescribe Their Own Families",
+            "The Medical Breakthrough Of The Decade",
+            "Backed By Harvard Research",
+            "Endorsed By Leading Endocrinologists",
+            "The Prescription Celebrities Pay Thousands For",
+            "Clinically Proven 20%+ Weight Loss",
+            "What Oprah, Elon And Millions Know",
+            "Peer-Reviewed Science. Real Results.",
+            "The Treatment Doctors Trust",
+        ],
+        "visual_styles": [
+            "FDA approval badge, medical document aesthetic",
+            "doctor in white coat, professional clinical setting",
+            "scientific study graphics, research paper style",
+            "celebrity transformation reference, tabloid feel",
+            "medical prescription pad aesthetic",
+            "clinical trial results visualization",
+        ],
+    },
+    
+    "identity_targeting": {
+        "name": "Identity Targeting",
+        "description": "Direct demographic callout creates self-selection",
+        "hooks": [
+            "Women Over 40: This Changes Everything",
+            "If You've Tried Every Diet And Failed...",
+            "For People Who've Struggled For Years",
+            "Busy Moms Are Losing Weight Without Dieting",
+            "Over 50 And Struggling To Lose Weight?",
+            "If Nothing Has Worked For You Before...",
+            "For Anyone Who's Given Up On Diets",
+            "People With 30+ lbs To Lose",
+            "If You've Been Overweight For 10+ Years",
+            "Yo-Yo Dieters: This Is Different",
+            "For Those Who Hate The Gym",
+            "If Willpower Has Never Been Enough",
+        ],
+        "visual_styles": [
+            "relatable person matching demographic, candid shot",
+            "real woman 40-60 in transformation moment",
+            "busy mom in everyday setting, authentic",
+            "person in regular clothes, not fitness model",
+            "testimonial portrait, trustworthy face",
+            "before/after of relatable person",
+        ],
+    },
+    
+    "insider_secret": {
+        "name": "Insider Secret",
+        "description": "Exclusivity and hidden knowledge framing",
+        "hooks": [
+            "Hollywood's Best-Kept Secret",
+            "What Big Pharma Doesn't Want You To Know",
+            "The Industry Secret Finally Revealed",
+            "How Celebrities Really Lose Weight",
+            "The Method They Tried To Keep Hidden",
+            "What Doctors Know But Won't Tell You",
+            "The Weight Loss Trick No One Talks About",
+            "Finally: The Truth About Weight Loss",
+            "What The Diet Industry Hides",
+            "The Secret Behind Celebrity Transformations",
+            "Insider Knowledge Now Available To Everyone",
+            "The Method They Don't Advertise",
+        ],
+        "visual_styles": [
+            "reveal/exposed documentary style",
+            "person sharing secret, intimate UGC feel",
+            "tabloid expose aesthetic, revealing truth",
+            "hidden document being shown",
+            "before/after celebrity transformation style",
+            "insider testimonial, candid shot",
+        ],
+    },
+    
+    # ==========================================================================
+    # ORIGINAL STRATEGIES (UPDATED WITH VINTAGE VISUAL STYLES)
+    # ==========================================================================
+    
+    "shame_insecurity": {
+        "name": "Shame & Insecurity",
+        "description": "Trigger personal shame and body insecurity",
+        "hooks": [
+            "Tired of hiding your body?",
+            "Still wearing baggy clothes?",
+            "How long will you keep lying to yourself?",
+            "The mirror doesn't lie",
+            "Everyone notices. They just don't say it.",
+            "Summer is coming...",
+            "When's the last time you felt confident?",
+            "Still avoiding photos?",
+            "How many more events will you skip?",
+            "Your body is holding you back",
+            "Stop making excuses",
+            "The scale doesn't lie. Neither does your reflection.",
+            "Are you embarrassed to undress?",
+            "How many diets have failed you?",
+        ],
+        "visual_styles": [
+            "person looking in mirror, disappointed, vintage film grain",
+            "oversized clothes, hiding body, documentary candid",
+            "scale showing high number, old footage aesthetic",
+            "person avoiding camera, raw authentic moment",
+            "closet full of clothes that don't fit, nostalgic feel",
+            "person looking at old photos, sepia tones",
+        ],
+    },
+    
+    "transformation_desire": {
+        "name": "Transformation & Desire",
+        "description": "Appeal to transformation and aspiration",
+        "hooks": [
+            "Imagine fitting into your old jeans",
+            "Get your confidence back",
+            "Become the person you were meant to be",
+            "Your best self is waiting",
+            "Turn heads again",
+            "Feel sexy for the first time in years",
+            "Reclaim your body",
+            "The glow-up you deserve",
+            "Finally love what you see in the mirror",
+            "Your transformation starts today",
+            "Become unrecognizable in 90 days",
+            "The body you've always wanted",
+            "Unlock the best version of yourself",
+            "From invisible to irresistible",
+        ],
+        "visual_styles": [
+            "dramatic before/after transformation",
+            "confident person in fitted clothes",
+            "person checking out reflection, smiling",
+            "beach body, confidence pose",
+            "person getting compliments",
+            "transformation timeline photos",
+        ],
+    },
+    
+    "fomo": {
+        "name": "Fear of Missing Out",
+        "description": "Create fear of being left behind",
+        "hooks": [
+            "Hollywood's secret is finally available",
+            "Celebrities have used this for years",
+            "Everyone is losing weight except you",
+            "Don't be the last to know",
+            "Limited supply - high demand",
+            "Waitlist growing daily",
+            "The weight loss revolution you're missing",
+            "While you're reading this, someone is transforming",
+            "Why does everyone look better except you?",
+            "The secret they tried to hide from you",
+            "TikTok's viral weight loss trend",
+            "The A-list solution now available to you",
+            "What Oprah, Elon, and millions know",
+            "The shortage is real. Act now.",
+        ],
+        "visual_styles": [
+            "celebrity transformation reference",
+            "trending hashtag graphics",
+            "viral social media aesthetic",
+            "before/after celebrity style",
+            "exclusive access imagery",
+            "sold out, limited availability badges",
+        ],
+    },
+    
+    "social_rejection_acceptance": {
+        "name": "Social Rejection & Acceptance",
+        "description": "Leverage social dynamics and dating",
+        "hooks": [
+            "They'll finally see the REAL you",
+            "Stop being invisible",
+            "Dating becomes easier",
+            "People treat you differently when you're thin",
+            "Your ex will regret leaving",
+            "Make them jealous",
+            "Get the attention you deserve",
+            "Stop being overlooked",
+            "First impressions matter. Yours is failing.",
+            "They're judging you. Change the verdict.",
+            "Imagine being the hot one in your friend group",
+            "Turn rejection into attraction",
+            "From friend-zoned to desired",
+            "Become someone people want to be around",
+        ],
+        "visual_styles": [
+            "confident person at social event",
+            "person getting attention, admired",
+            "dating app success aesthetic",
+            "group of friends, confident person",
+            "romantic couple, attractive partners",
+            "person commanding room, confident",
+        ],
+    },
+    
+    "medical_authority": {
+        "name": "Medical Authority",
+        "description": "Leverage medical credibility and science",
+        "hooks": [
+            "FDA-approved",
+            "Doctor-prescribed",
+            "Clinically proven",
+            "Used by 15 million patients",
+            "Backed by Harvard research",
+            "Your doctor won't tell you about this",
+            "Big Pharma's best-kept secret",
+            "The science is undeniable",
+            "Medical breakthrough of the decade",
+            "Doctors are prescribing this to their own families",
+            "Clinical trials prove 20%+ weight loss",
+            "The medication celebrities pay thousands for",
+            "Peer-reviewed. Science-backed. Life-changing.",
+            "What every endocrinologist knows",
+        ],
+        "visual_styles": [
+            "doctor in white coat, professional",
+            "FDA approval badge",
+            "clinical study graphics",
+            "medical office setting",
+            "scientific research aesthetic",
+            "prescription medication style",
+        ],
+    },
+    
+    "urgency_scarcity": {
+        "name": "Urgency & Scarcity",
+        "description": "Create time pressure and limited availability",
+        "hooks": [
+            "Shortage alert - limited doses available",
+            "Insurance may stop covering soon",
+            "Prices increasing next month",
+            "Get in before the waitlist",
+            "Supply chain issues - act now",
+            "Only accepting 50 new patients this month",
+            "The shortage is getting worse",
+            "Pharmacy stock running low",
+            "Manufacturer limiting supply",
+            "Price hike coming in 30 days",
+            "Don't miss the enrollment window",
+            "Available for a limited time",
+        ],
+        "visual_styles": [
+            "countdown timer, urgent",
+            "low stock warning",
+            "sold out badges",
+            "limited availability graphics",
+            "pharmacy shelves nearly empty",
+            "urgent notification style",
+        ],
+    },
+    
+    "guilt": {
+        "name": "Guilt",
+        "description": "Trigger guilt about health and family",
+        "hooks": [
+            "Your kids need a healthy parent",
+            "Don't miss their graduation",
+            "How many more years will you lose?",
+            "Life is passing you by",
+            "You deserve to feel good",
+            "Stop punishing yourself",
+            "Your family needs you around",
+            "What example are you setting?",
+            "They're worried about you",
+            "You're not just hurting yourself",
+            "Your grandkids deserve to know you",
+            "Every pound is a year off your life",
+            "You owe it to yourself",
+            "Stop letting yourself down",
+        ],
+        "visual_styles": [
+            "parent with children, health focus",
+            "family moments, active lifestyle",
+            "grandparent playing with grandkids",
+            "health warning, medical imagery",
+            "funeral aesthetic, mortality reminder",
+            "empty chair at family gathering",
+        ],
+    },
+    
+    "simplicity_laziness": {
+        "name": "Simplicity & Laziness",
+        "description": "Emphasize ease and minimal effort",
+        "hooks": [
+            "No diet. No exercise. Just results.",
+            "One injection, that's it",
+            "Lose weight while you sleep",
+            "The lazy way to get thin",
+            "Stop torturing yourself with diets",
+            "Finally, something that actually works",
+            "No gym required",
+            "Eat what you want and still lose weight",
+            "The effortless weight loss solution",
+            "Works while you Netflix",
+            "No willpower needed",
+            "The anti-diet diet",
+            "Stop counting calories forever",
+            "The 10-second daily routine that melts fat",
+        ],
+        "visual_styles": [
+            "person relaxing, effortless",
+            "simple injection graphic",
+            "no gym, no diet icons",
+            "person eating favorite foods",
+            "couch to confidence transformation",
+            "simple 1-2-3 step process",
+        ],
+    },
+    
+    "comparison_envy": {
+        "name": "Comparison & Envy",
+        "description": "Compare to others who succeeded",
+        "hooks": [
+            "She lost 47 lbs. What's your excuse?",
+            "Same age. Different body.",
+            "While you're reading this, someone is getting results",
+            "Your coworker's secret weapon",
+            "Why does she look 10 years younger?",
+            "They started where you are now",
+            "Same starting point. Different ending.",
+            "She was bigger than you. Look at her now.",
+            "What's her secret? (Now it's yours)",
+            "Your high school reunion is coming...",
+            "Everyone's getting results except you",
+            "They found the answer. Why haven't you?",
+        ],
+        "visual_styles": [
+            "side by side comparison",
+            "success story testimonial",
+            "before/after same person",
+            "two people comparison",
+            "results showcase gallery",
+            "transformation collage",
+        ],
+    },
+    
+    "before_after_shock": {
+        "name": "Before/After Shock",
+        "description": "Dramatic visual transformations",
+        "hooks": [
+            "90 days. 50 lbs. Real person.",
+            "The same person. Unbelievable.",
+            "Is this even the same person?",
+            "Wait until you see the after...",
+            "Jaw-dropping transformation",
+            "You won't believe your eyes",
+            "The most incredible transformation ever",
+            "From XL to S in 4 months",
+            "Lost half her body weight",
+            "From plus-size to model",
+            "The picture that broke the internet",
+            "This can be you",
+        ],
+        "visual_styles": [
+            "dramatic before/after split screen",
+            "timeline transformation 30/60/90 days",
+            "same outfit, different body",
+            "scale showing massive loss",
+            "measuring tape victory",
+            "loose pants, weight loss proof",
+        ],
+    },
+    
+    "future_pacing": {
+        "name": "Future Pacing",
+        "description": "Help them visualize their future self",
+        "hooks": [
+            "Picture yourself at your goal weight",
+            "6 months from now...",
+            "Your future self will thank you",
+            "This time next year...",
+            "Imagine summer with your dream body",
+            "What will you do when you hit your goal?",
+            "The vacation you've been putting off",
+            "The dress you've been saving",
+            "Finally, that beach trip",
+            "Your wedding, your reunion, your moment",
+            "Close your eyes. See yourself thin.",
+            "The life that's waiting for you",
+        ],
+        "visual_styles": [
+            "aspirational lifestyle imagery",
+            "beach vacation, confident person",
+            "dream wedding, fitting dress",
+            "vision board aesthetic",
+            "future self visualization",
+            "bucket list experiences",
+        ],
+    },
+    
+    "loss_aversion": {
+        "name": "Loss Aversion",
+        "description": "Emphasize what they're losing by not acting",
+        "hooks": [
+            "Every day you wait is another day wasted",
+            "How many more years will you lose to this?",
+            "You're not getting younger",
+            "Time is running out on your metabolism",
+            "Each year makes it harder",
+            "Your 20s are gone. Don't waste your 30s too.",
+            "The best years of your life - spent overweight?",
+            "Missed opportunities don't come back",
+            "Your youth is slipping away",
+            "Obesity is stealing your life",
+            "The experiences you're missing",
+            "Life is passing you by while you stay stuck",
+        ],
+        "visual_styles": [
+            "hourglass, time running out",
+            "calendar pages flipping",
+            "missed opportunities montage",
+            "aging comparison, health decline",
+            "before it's too late imagery",
+            "now vs never contrast",
+        ],
+    },
+}
+
+# All hooks flattened for random selection
+ALL_HOOKS = []
+for strategy in STRATEGIES.values():
+    ALL_HOOKS.extend(strategy["hooks"])
+
+# All visual styles flattened
+ALL_VISUAL_STYLES = []
+for strategy in STRATEGIES.values():
+    ALL_VISUAL_STYLES.extend(strategy["visual_styles"])
+
+# Strategy names for random selection
+STRATEGY_NAMES = list(STRATEGIES.keys())
+
+# Creative directions for variety - Updated with winning patterns
+# Note: These are TONE/APPROACH, not structural formats (use frameworks.py for structure)
+CREATIVE_DIRECTIONS = [
+    "accusatory",          # Still overweight? style
+    "curiosity-driven",    # THIS/Secret style
+    "numbers-focused",     # 47 lbs in 90 days style
+    "proof-transformation", # Before/after evidence (use "before_after" framework for structure)
+    "quiz-interactive",    # How much could you lose?
+    "authority-medical",   # FDA/Doctor style (use "authority" framework for structure)
+    "identity-targeted",   # Women over 40...
+    "insider-reveal",      # Hollywood secret
+    "urgent",
+    "aspirational",
+]
+
+# Visual aesthetic styles (documentary/authentic formats for ad images)
+# Note: These are aesthetic styles, not emotional moods (see data/visuals.py for emotional moods)
+VISUAL_MOODS = [
+    "documentary-candid",   # Real people, unposed
+    "vintage-authentic",    # Old footage feel
+    "transformation-proof", # Before/after evidence
+    "ui-screenshot",        # Quiz, calculator
+    "medical-clinical",     # Doctor/FDA aesthetic
+    "celebrity-tabloid",    # Reveal/transformation
+    "raw-testimonial",      # UGC feel
+    "warm-nostalgic",       # Amber, sepia tones
+]
+
+# Ad copy templates
+COPY_TEMPLATES = [
+    {
+        "structure": "hook_then_cta",
+        "format": "{hook}\n\n{supporting_text}\n\n👉 {cta}",
+    },
+    {
+        "structure": "question_answer",
+        "format": "{question}\n\n{answer}\n\n{cta}",
+    },
+    {
+        "structure": "before_after",
+        "format": "BEFORE: {before}\n\nAFTER: {after}\n\n{cta}",
+    },
+    {
+        "structure": "stat_hook",
+        "format": "⚠️ {statistic}\n\n{explanation}\n\n{cta}",
+    },
+    {
+        "structure": "story_hook",
+        "format": "{story_opening}\n\n{story_middle}\n\n{cta}",
+    },
+    {
+        "structure": "testimonial",
+        "format": '"{testimonial}"\n\n- {name}, lost {weight}\n\n{cta}',
+    },
+]
+
+# CTAs for variety - Updated with high-converting patterns
+CTAS = [
+    # Discovery/Eligibility CTAs (highest conversion)
+    "See If You Qualify",
+    "Check Your Eligibility",
+    "Take The Quiz",
+    "Calculate Your Results",
+    "See How Much You Could Lose",
+    
+    # Action CTAs
+    "Start Your Transformation",
+    "Get Your Personalized Plan",
+    "Claim Your Consultation",
+    "Learn More",
+    "See Your Options",
+    
+    # Urgency CTAs
+    "Start Now",
+    "Don't Wait Another Day",
+    "Begin Today",
+    "Get Started",
+    
+    # Specific CTAs
+    "Get Your Prescription",
+    "Join Thousands Who Transformed",
+    "See Real Results",
+]
+
+
+def get_niche_data():
+    """Return all GLP-1 data for the generator."""
+    return {
+        "niche": "glp1",
+        "strategies": STRATEGIES,
+        "all_hooks": ALL_HOOKS,
+        "all_visual_styles": ALL_VISUAL_STYLES,
+        "strategy_names": STRATEGY_NAMES,
+        "creative_directions": CREATIVE_DIRECTIONS,
+        "visual_moods": VISUAL_MOODS,
+        "copy_templates": COPY_TEMPLATES,
+        "ctas": CTAS,
+    }
+

data/home_insurance.py

@@ -0,0 +1,741 @@
+"""
+Home Insurance - Complete Psychological Arsenal
+All strategies: fear, shame, urgency, greed, authority, loss aversion, etc.
+Updated with winning ad patterns from high-converting creative analysis.
+"""
+
+# ============================================================================
+# SECTION 1: PSYCHOLOGICAL STRATEGIES
+# ============================================================================
+
+STRATEGIES = {
+    # ------------------------------------------------------------------------
+    # Winning Strategies (High-Converting Patterns)
+    # ------------------------------------------------------------------------
+    
+    "accusation_opener": {
+        "name": "Accusation Opener",
+        "description": "Direct accusation triggers immediate loss aversion - 'OVERPAYING?' style",
+        "hooks": [
+            "OVERPAYING?",
+            "Still Overpaying For Home Insurance?",
+            "Wasting $1,247/year On Insurance?",
+            "Are You Being Overcharged?",
+            "Paying Too Much? Most Homeowners Are.",
+            "Your Insurance Company Is Overcharging You",
+            "Stop Getting Ripped Off",
+            "You're Probably Paying Double",
+            "Why Are You Still Paying Full Price?",
+            "Being Overcharged Without Knowing It?",
+            "Throwing Money Away Every Month?",
+            "Your Premium Is Too High. Here's Proof.",
+        ],
+        "visual_styles": [
+            "person holding fan of $100 bills, hiding face, accusatory",
+            "frustrated senior looking at insurance bill, red 'OVERPAYING?' text",
+            "money flying away from house, loss visualization",
+            "comparison of high vs low price with red X on high price",
+            "person counting money with worried expression",
+            "wallet being emptied, coins and bills falling out",
+        ],
+    },
+    
+    "curiosity_gap": {
+        "name": "Curiosity Gap",
+        "description": "Open loop with 'THIS' or 'Instead' demands click - highest CTR pattern",
+        "hooks": [
+            "Seniors Are Ditching Their Home Insurance & Doing This Instead",
+            "Thousands of homeowners are dropping their home insurance after THIS",
+            "Homeowners Over 50 Are Switching To THIS",
+            "What Smart Seniors Know About Home Insurance",
+            "The Secret Insurance Companies Don't Want You To Know",
+            "Everyone's Switching. Here's Why.",
+            "This Is Why Your Neighbors Pay Less",
+            "What 847 Homeowners In Your Area Just Discovered",
+            "The Loophole Seniors Are Using",
+            "They Found Something Better. Have You?",
+            "After Seeing THIS, You'll Never Overpay Again",
+            "One Simple Change Saves Thousands",
+        ],
+        "visual_styles": [
+            "senior man looking at utility meter or electric box, candid documentary",
+            "collage with Social Security card and government building",
+            "person reading document with surprised expression",
+            "group of seniors with knowing expressions",
+            "person pointing at hidden information, reveal moment",
+            "before/after document comparison with circled numbers",
+        ],
+    },
+    
+    "specific_price_anchor": {
+        "name": "Specific Price Anchor",
+        "description": "Oddly specific prices ($97.33 not $100) create instant believability",
+        "hooks": [
+            "Home Insurance for as low as $43/month",
+            "Home Insurance with coverage as low as $43/month",
+            "$97.33/month For Full Coverage",
+            "Pay Just $47/month Instead of $200+",
+            "Locked In At $52/month",
+            "Full Protection For $1.50/day",
+            "Coverage From $39/month",
+            "$67/month Beats Your Current Rate",
+            "Most Seniors Qualify For $49/month",
+            "Switch And Pay Just $83/month",
+            "Rates Starting At $37.50/month",
+        ],
+        "visual_styles": [
+            "giant price number $43 in teal/bold color, age buttons below",
+            "clean white background, price dominant, age selector: 21-40, 41-64, 65+",
+            "BLACK FRIDAY style with specific price and gold balloons",
+            "price comparison showing crossed-out high price, new low price",
+            "calculator interface showing specific savings number",
+            "receipt or bill showing exact monthly amount",
+        ],
+    },
+    
+    "before_after_proof": {
+        "name": "Before/After Proof",
+        "description": "Specific savings numbers with visual proof creates social proof",
+        "hooks": [
+            "WAS: $1,701 → NOW: $583",
+            "How I Dropped My Premium By $1,118/year",
+            "Paid $2,400. Now Pay $876.",
+            "From $189/month To $67/month",
+            "Cut My Bill In Half. Here's How.",
+            "Saved $1,247 In 5 Minutes",
+            "Before: $2,100/year After: $720/year",
+            "My Neighbor Showed Me How To Save $800",
+            "Real Savings: $1,456 Less Per Year",
+            "Went From Overpaying To Saving Big",
+            "The 5-Minute Switch That Saved Me $1,100",
+        ],
+        "visual_styles": [
+            "real woman 50-60 holding document with circled numbers, testimonial",
+            "before/after price bar: red 'WAS' vs green 'NOW'",
+            "split screen: old bill vs new bill with circles",
+            "person giving thumbs up with savings numbers visible",
+            "calculator or phone showing savings calculation",
+            "happy couple reviewing lower insurance bill together",
+        ],
+    },
+    
+    "quiz_interactive": {
+        "name": "Quiz/Interactive",
+        "description": "Quiz format drives engagement and self-selection",
+        "hooks": [
+            "What Year Was Your House Built?",
+            "Tap Your Age To Calculate Your New Payment",
+            "Answer 3 Questions. See Your Rate.",
+            "How Old Is Your Home?",
+            "Check Your Eligibility In 60 Seconds",
+            "Take The 30-Second Quiz",
+            "Select Your Age Bracket",
+            "What's Your Home Worth?",
+            "Find Your New Rate - 2 Questions",
+            "See If You Qualify",
+            "Quick Quiz: How Much Can You Save?",
+            "Select Your State To See Rates",
+        ],
+        "visual_styles": [
+            "iPhone Notes app dark mode with checkboxes: Before 1970, 1970-1999, etc.",
+            "age selector buttons: 21-40 (yellow), 41-64 (blue), 65+ (red)",
+            "quiz interface with multiple choice options",
+            "clean UI with 'Tap below to see your rate'",
+            "interactive calculator mockup",
+            "state selection dropdown or map interface",
+        ],
+    },
+    
+    "authority_transfer": {
+        "name": "Authority Transfer",
+        "description": "Transfer trust from government/institutions - highest trust pattern",
+        "hooks": [
+            "State Farm Brings Welfare!",
+            "Sponsored by the US Government and State Farm",
+            "Government Program For Senior Homeowners",
+            "New State Program Cuts Insurance Costs",
+            "Federal Assistance For Homeowners Over 50",
+            "Official: Seniors Qualify For Reduced Rates",
+            "State-Approved Savings Program",
+            "Government-Backed Insurance Savings",
+            "Medicare-Age Homeowners: New Benefit Available",
+            "Social Security Recipients: Check Eligibility",
+            "Official Notice: Rate Reduction Program",
+            "State Insurance Commission Announces Savings",
+        ],
+        "visual_styles": [
+            "government eagle seal, official document aesthetic",
+            "Social Security card with government building background",
+            "official letterhead style with seal and formal typography",
+            "state capitol building with official banner",
+            "government form aesthetic with checkboxes",
+            "presidential seal or state seal visible",
+        ],
+    },
+    
+    "identity_targeting": {
+        "name": "Identity Targeting",
+        "description": "Direct demographic callout creates instant self-selection",
+        "hooks": [
+            "Seniors Won't Have To Pay More Than $49 A Month",
+            "Homeowners Over 50: Check Your Eligibility",
+            "Senior homeowners over the age of 50...",
+            "If You're 50+ And Own A Home, Read This",
+            "Attention: Homeowners Born Before 1975",
+            "For Homeowners 55 And Older",
+            "65+ Homeowners: New Rate Available",
+            "Baby Boomers: Insurance Relief Is Here",
+            "Retired Homeowners: Special Program",
+            "If You Own A Home And You're Over 50...",
+            "Senior Citizen Home Insurance Rates",
+            "Homeowners Turning 65 This Year",
+        ],
+        "visual_styles": [
+            "four senior faces in portrait style, dignified, relatable",
+            "real senior couple in front of their home",
+            "senior looking at camera, trustworthy expression",
+            "multiple seniors of different ethnicities, inclusive",
+            "senior holding document, testimonial style",
+            "elderly hands holding house keys or insurance papers",
+        ],
+    },
+    
+    "insider_secret": {
+        "name": "Insider Secret",
+        "description": "Exclusivity and hidden knowledge framing",
+        "hooks": [
+            "The Easiest Way To Cut Home Insurance Bills",
+            "What Insurance Companies Don't Want You To Know",
+            "The Loophole That Saves Thousands",
+            "Former Agent Reveals Industry Secret",
+            "The Trick Your Insurance Company Hides",
+            "Why Insiders Pay 40% Less",
+            "The One Thing That Cuts Your Premium In Half",
+            "What They Don't Tell You About Home Insurance",
+            "Insurance Industry Insider Speaks Out",
+            "The Secret Smart Homeowners Use",
+            "Hidden Discount Most People Miss",
+            "The Backdoor To Lower Rates",
+        ],
+        "visual_styles": [
+            "person whispering or revealing secret, documentary candid",
+            "document being unveiled or revealed",
+            "insider/whistleblower aesthetic, anonymous feel",
+            "magnifying glass over insurance document",
+            "hidden text being exposed or highlighted",
+            "person looking over shoulder, sharing secret",
+        ],
+    },
+    
+    # ------------------------------------------------------------------------
+    # Core Psychological Strategies
+    # ------------------------------------------------------------------------
+    
+    "fear_based": {
+        "name": "Fear-Based",
+        "description": "Trigger fear of loss, disaster, and worst-case scenarios",
+        "hooks": [
+            "Your home could be gone tomorrow",
+            "One spark. Everything lost.",
+            "93% of homeowners are UNDERINSURED",
+            "Will your family be homeless?",
+            "Storm season is HERE - are you ready?",
+            "Your neighbor's house burned down last week",
+            "What if you can't afford to rebuild?",
+            "Bankruptcy from one disaster",
+            "Fire doesn't wait. Neither should you.",
+            "8 minutes. That's how fast you can lose everything.",
+            "The average house fire costs $287,000",
+            "Are you gambling with your family's safety?",
+        ],
+        "visual_styles": [
+            "burning house at night with vintage film grain, documentary footage",
+            "flooded living room with old VHS quality, damage visible",
+            "storm damage to roof, aged documentary photography",
+            "worried family looking at damaged home, candid shot",
+            "fire truck responding, old news footage aesthetic",
+            "tornado approaching, vintage weather broadcast style",
+        ],
+    },
+    
+    "urgency_scarcity": {
+        "name": "Urgency & Scarcity",
+        "description": "Create time pressure and limited availability",
+        "hooks": [
+            "Rates increasing in 48 hours",
+            "Last chance for 2024 pricing",
+            "Only 23 spots left at this rate",
+            "Offer expires midnight",
+            "Insurers are DROPPING coverage in your area",
+            "Lock in before it's too late",
+            "Price hike coming January 1st",
+            "Limited-time discount ending soon",
+            "Your quote expires in 24 hours",
+            "Enrollment window closing",
+            "Act now or pay 30% more next month",
+            "Final warning: rates going up",
+        ],
+        "visual_styles": [
+            "countdown timer graphic, urgent red colors",
+            "calendar with deadline circled",
+            "clock showing almost midnight",
+            "red URGENT stamp on documents",
+            "limited time banner, expiring offer",
+        ],
+    },
+    
+    "social_proof_fomo": {
+        "name": "Social Proof & FOMO",
+        "description": "Show others are doing it, create fear of missing out",
+        "hooks": [
+            "847 homeowners in your area switched THIS WEEK",
+            "Your neighbors are protected. Are you?",
+            "Join 2.3 million smart homeowners",
+            "Why is everyone switching?",
+            "The #1 choice for homeowners in 2024",
+            "9 out of 10 homeowners recommend this",
+            "Everyone on your street has coverage. Except you?",
+            "Don't be the last one unprotected",
+            "Over 500,000 claims paid this year",
+            "Rated #1 by Consumer Reports",
+            "The insurance your neighbors trust",
+            "Smart homeowners are making the switch",
+        ],
+        "visual_styles": [
+            "happy neighborhood, protected homes",
+            "map showing covered homes in area",
+            "crowd of satisfied customers",
+            "testimonial collage of happy families",
+            "5-star rating badges, trust indicators",
+        ],
+    },
+    
+    "guilt_shame": {
+        "name": "Guilt & Shame",
+        "description": "Trigger guilt about family responsibility",
+        "hooks": [
+            "Can you look your family in the eye without protection?",
+            "Your kids are counting on you",
+            "Don't let them down",
+            "Responsible homeowners don't gamble with their family's future",
+            "What will you tell your kids when there's nothing left?",
+            "A real parent protects their family",
+            "Your spouse trusts you to keep them safe",
+            "Failure to protect is a choice",
+            "They're depending on you. Don't fail them.",
+            "Would your family forgive you?",
+            "Every night without coverage is a risk to your family",
+            "What kind of homeowner are you?",
+        ],
+        "visual_styles": [
+            "parent looking worried at sleeping children",
+            "family photo with protective imagery",
+            "father looking at burned home, regret",
+            "mother holding child, concerned expression",
+            "empty picture frame, lost memories",
+        ],
+    },
+    
+    "greed_savings": {
+        "name": "Greed & Savings",
+        "description": "Appeal to desire to save money and get more",
+        "hooks": [
+            "You're overpaying by $1,247/year",
+            "Stop throwing money away",
+            "Get $500 back instantly",
+            "Why pay more for less?",
+            "Save up to 40% on your premium",
+            "Free quote reveals your savings",
+            "Most homeowners can save $800+",
+            "You're leaving money on the table",
+            "Switch and save in 5 minutes",
+            "Same coverage. Half the price.",
+            "Get more coverage for less money",
+            "Stop wasting money on overpriced insurance",
+        ],
+        "visual_styles": [
+            "stack of cash, money savings",
+            "piggy bank overflowing with coins",
+            "comparison chart showing savings",
+            "happy couple reviewing lower bills",
+            "calculator showing big savings number",
+            "wallet with money, financial freedom",
+        ],
+    },
+    
+    "authority_trust": {
+        "name": "Authority & Trust",
+        "description": "Leverage expert credibility and insider knowledge",
+        "hooks": [
+            "Former agent reveals the truth",
+            "Industry insider secret exposed",
+            "A+ rated, 50 years trusted",
+            "Backed by Warren Buffett",
+            "Exposed: The coverage gap trap",
+            "Insurance agent confessions",
+            "The dirty secret of cheap policies",
+            "What your agent isn't telling you",
+            "BBB accredited with zero complaints",
+            "Trusted by Fortune 500 companies",
+            "Licensed in all 50 states",
+        ],
+        "visual_styles": [
+            "professional insurance agent, trustworthy",
+            "A+ rating badge, gold seal",
+            "official documents, certificates",
+            "expert in business attire",
+            "trust badges, security icons",
+            "newspaper headline style, exposed",
+        ],
+    },
+    
+    "loss_aversion": {
+        "name": "Loss Aversion",
+        "description": "Emphasize what they stand to lose",
+        "hooks": [
+            "Everything you've worked for - GONE in 8 minutes",
+            "Average fire destroys $287,000 in belongings",
+            "You can't get back what's already ash",
+            "Your memories. Your savings. Your future. Gone.",
+            "One lawsuit could take everything",
+            "Imagine losing it all tomorrow",
+            "The average flood destroys 20 years of memories",
+            "Your life's work, wiped out in an hour",
+            "What would you save if you only had 2 minutes?",
+            "Some things can never be replaced",
+            "Everything you own could be gone by morning",
+            "Your equity, your memories, your peace of mind",
+        ],
+        "visual_styles": [
+            "before/after disaster comparison",
+            "pile of ash where home used to be",
+            "family photo partially burned",
+            "empty lot where house stood",
+            "destroyed personal belongings",
+            "wallet with nothing inside",
+        ],
+    },
+    
+    "anchoring": {
+        "name": "Anchoring",
+        "description": "Compare high value to low cost",
+        "hooks": [
+            "Coverage worth $500,000 for just $47/month",
+            "Compared to losing everything, $1.50/day is nothing",
+            "Full protection for less than your Netflix subscription",
+            "Your home is worth $400K. Protection is $39/month.",
+            "Rebuild cost: $350,000. Coverage cost: $52/month.",
+            "Insurance: $40/month. Disaster recovery: $500,000.",
+            "Skip one coffee a day. Protect everything you own.",
+            "The cost of not having insurance: everything",
+            "$1.25/day protects $500,000 in assets",
+            "Cheaper than your daily coffee habit",
+        ],
+        "visual_styles": [
+            "scale comparing cost vs value",
+            "coffee cup vs house comparison",
+            "small price tag vs big house",
+            "simple math equation graphic",
+            "price comparison infographic",
+        ],
+    },
+    
+    "simplicity": {
+        "name": "Simplicity & Ease",
+        "description": "Emphasize how easy it is to get covered",
+        "hooks": [
+            "Get covered in 3 minutes",
+            "One click. Full protection.",
+            "No paperwork. No hassle.",
+            "Quote in 60 seconds",
+            "The easiest insurance you'll ever buy",
+            "Set it and forget it protection",
+            "Online in minutes, protected for years",
+            "Skip the agent. Save time and money.",
+            "Apply from your couch",
+            "Instant quote, instant coverage",
+            "The lazy homeowner's insurance solution",
+            "Why is getting insurance still this hard? (It isn't anymore)",
+        ],
+        "visual_styles": [
+            "person on phone, relaxed",
+            "simple 3-step process graphic",
+            "checkmark, done, complete icons",
+            "happy person on couch with laptop",
+            "clean, minimal interface screenshot",
+        ],
+    },
+    
+    "comparison_envy": {
+        "name": "Comparison & Envy",
+        "description": "Compare to others who are better protected",
+        "hooks": [
+            "Your neighbor pays less and gets more coverage",
+            "Why are smart homeowners switching?",
+            "They're protected. Why aren't you?",
+            "Same house. Same street. Half the premium.",
+            "What do they know that you don't?",
+            "The Jones family just saved $800. Your turn.",
+            "Your colleague's home is protected. Is yours?",
+            "Everyone's switching. What are you waiting for?",
+            "Don't be the only unprotected house on the block",
+            "Your neighbor's claim was covered. Would yours be?",
+        ],
+        "visual_styles": [
+            "two houses side by side, one protected",
+            "neighbor comparison graphic",
+            "protected house vs exposed house",
+            "happy neighbor vs worried neighbor",
+            "community map showing coverage",
+        ],
+    },
+    
+    "transformation": {
+        "name": "Transformation & Peace",
+        "description": "Show the transformation from worry to peace",
+        "hooks": [
+            "From worried to worry-free in 5 minutes",
+            "Sleep soundly knowing you're covered",
+            "Finally, peace of mind for your family",
+            "Stop worrying. Start living.",
+            "Imagine never worrying about disasters again",
+            "The weight off your shoulders",
+            "From stressed to blessed",
+            "Live your life. We'll protect your home.",
+            "Worry-free homeownership starts here",
+            "Breathe easy. You're protected.",
+        ],
+        "visual_styles": [
+            "relaxed family in protected home",
+            "person sleeping peacefully",
+            "before/after: worried vs happy homeowner",
+            "sunny day, secure home",
+            "family enjoying life, not worrying",
+        ],
+    },
+}
+
+# ============================================================================
+# SECTION 2: HIGH-CONVERTING VISUAL LIBRARY
+# ============================================================================
+
+PROTECTION_SAFETY_VISUALS = [
+    "family inside home, warm lights on, night outside",
+    "house surrounded by subtle glowing shield",
+    "parent locking the front door while kids inside",
+    "calm home while storm clouds gather in distance",
+    "hands holding a small house icon",
+    "roof + checkmark overlay",
+]
+
+DISASTER_FEAR_VISUALS = [
+    "half image: safe home / damaged neighborhood",
+    "flood water stopping at doorstep",
+    "fire smoke behind intact house",
+    "fallen tree near but not on the house",
+    "cracked wall close-up",
+    "burnt house blurred in background, intact one sharp",
+]
+
+FAMILY_EMOTIONAL_VISUALS = [
+    "parents hugging kids inside living room",
+    "child doing homework at dining table",
+    "family movie night at home",
+    "newborn in nursery",
+    "elderly parents sitting peacefully at home",
+]
+
+FIRST_TIME_HOMEBUYER_VISUALS = [
+    "couple holding house keys",
+    "empty living room with boxes",
+    "first night sleeping on mattress on floor",
+    "SOLD sign outside house",
+    "smiling couple + nervous body language",
+]
+
+ASSET_INVESTMENT_VISUALS = [
+    "beautiful home at sunset",
+    "clean driveway + car parked",
+    "home with subtle price tag icon",
+    "blueprint / house plan overlay",
+    "before/after renovation shots",
+]
+
+PROBLEM_RISK_VISUALS = [
+    "leaking ceiling",
+    "broken window",
+    "short-circuit sparks (safe depiction)",
+    "burst pipe under sink",
+    "mold on wall",
+    "roof damage after storm",
+]
+
+RELIEF_VISUALS = [
+    "sunlight after rain over house",
+    "rainbow behind neighborhood",
+    "family relaxing on couch",
+    "home with covered tag",
+    "coffee mug + window rain outside",
+]
+
+MORTGAGE_BANK_VISUALS = [
+    "official-looking documents",
+    "laptop with insurance form open",
+    "house + bank icon",
+    "EMI letter on table",
+    "calculator + paperwork",
+]
+
+COMPARISON_CHOICE_VISUALS = [
+    "covered vs uncovered home split",
+    "cheap insurance vs proper coverage",
+    "umbrella over house vs rain",
+    "shield vs lightning bolt",
+]
+
+MINIMAL_SYMBOLIC_VISUALS = [
+    "simple house icon + shield",
+    "line-art house with lock",
+    "home inside heart shape",
+    "roof outline with checkmark",
+    "key + house silhouette",
+]
+
+LIFESTYLE_VISUALS = [
+    "quiet suburban morning",
+    "weekend BBQ in backyard",
+    "dog running in yard",
+    "home decorated for festivals",
+    "neighborhood aerial shot",
+]
+
+TEXT_FIRST_VISUALS = [
+    "text overlay: 'This home is insured. Is yours?'",
+    "text overlay: 'Most homeowners are underinsured.'",
+    "text overlay: 'Hope is not a plan.'",
+    "text overlay: 'One storm can change everything.'",
+]
+
+SEASONAL_VISUALS = [
+    "monsoon rain (flood angle)",
+    "summer heat (fire risk)",
+    "winter storms",
+    "festival decorations (emotional peak)",
+]
+
+HIGH_CONVERTING_VISUAL_LIBRARY = (
+    PROTECTION_SAFETY_VISUALS +
+    DISASTER_FEAR_VISUALS +
+    FAMILY_EMOTIONAL_VISUALS +
+    FIRST_TIME_HOMEBUYER_VISUALS +
+    ASSET_INVESTMENT_VISUALS +
+    PROBLEM_RISK_VISUALS +
+    RELIEF_VISUALS +
+    MORTGAGE_BANK_VISUALS +
+    COMPARISON_CHOICE_VISUALS +
+    MINIMAL_SYMBOLIC_VISUALS +
+    LIFESTYLE_VISUALS +
+    TEXT_FIRST_VISUALS +
+    SEASONAL_VISUALS
+)
+
+# ============================================================================
+# SECTION 3: CREATIVE ELEMENTS
+# ============================================================================
+
+CREATIVE_DIRECTIONS = [
+    "accusatory",          # Direct accusation style
+    "curiosity-driven",    # Open loop/secret style
+    "price-focused",       # Price anchor emphasis
+    "proof-based",        # Evidence/testimonial style (note: use testimonial framework for structure)
+    "quiz-interactive",    # Interactive/engagement style
+    "authority-backed",    # Authority/trust transfer
+    "identity-targeted",   # Demographic callout
+    "insider-reveal",      # Exclusive/hidden knowledge
+    "urgent",              # Time-sensitive urgency
+    # Note: "testimonial" removed - use "testimonial" framework instead for structure
+]
+
+# Visual aesthetic styles (documentary/authentic formats for ad images)
+# Note: These are aesthetic styles, not emotional moods (see data/visuals.py for emotional moods)
+VISUAL_MOODS = [
+    "documentary-candid",      # Documentary photography style
+    "vintage-authentic",       # Vintage/retro aesthetic
+    "proof-testimonial",       # Testimonial/evidence style
+    "ui-screenshot",          # Native app interface style
+    "official-institutional",  # Official/document style
+    "warm-nostalgic",         # Warm, nostalgic tones
+    "raw-unpolished",         # Raw, unpolished UGC feel
+    "news-expose",            # News/editorial style
+]
+
+COPY_TEMPLATES = [
+    {
+        "structure": "hook_then_cta",
+        "format": "{hook}\n\n{supporting_text}\n\n👉 {cta}",
+    },
+    {
+        "structure": "question_answer",
+        "format": "{question}\n\n{answer}\n\n{cta}",
+    },
+    {
+        "structure": "stat_hook",
+        "format": "⚠️ {statistic}\n\n{explanation}\n\n{cta}",
+    },
+    {
+        "structure": "story_hook",
+        "format": "{story_opening}\n\n{story_middle}\n\n{cta}",
+    },
+]
+
+CTAS = [
+    "Check Your Eligibility",
+    "See If You Qualify",
+    "Check Eligibility Now",
+    "Tap To See Your Rate",
+    "Calculate Your Savings",
+    "Get Your Free Quote",
+    "See Your New Rate",
+    "Find Out How Much You Can Save",
+    "Click To See Your Savings",
+    "Get Protected Now",
+    "Start Saving Today",
+    "Don't Miss This",
+    "Claim Your Rate",
+    "Seniors: Check Your Rate",
+    "See Senior Rates",
+    "50+: Get Your Quote",
+]
+
+# ============================================================================
+# SECTION 4: AGGREGATED DATA
+# ============================================================================
+
+STRATEGY_NAMES = list(STRATEGIES.keys())
+
+ALL_HOOKS = []
+for strategy in STRATEGIES.values():
+    ALL_HOOKS.extend(strategy["hooks"])
+
+ALL_VISUAL_STYLES = []
+for strategy in STRATEGIES.values():
+    ALL_VISUAL_STYLES.extend(strategy["visual_styles"])
+ALL_VISUAL_STYLES.extend(HIGH_CONVERTING_VISUAL_LIBRARY)
+
+# ============================================================================
+# SECTION 5: DATA EXPORT
+# ============================================================================
+
+def get_niche_data():
+    """Return all home insurance data for the generator."""
+    return {
+        "niche": "home_insurance",
+        "strategies": STRATEGIES,
+        "all_hooks": ALL_HOOKS,
+        "all_visual_styles": ALL_VISUAL_STYLES,
+        "strategy_names": STRATEGY_NAMES,
+        "creative_directions": CREATIVE_DIRECTIONS,
+        "visual_moods": VISUAL_MOODS,
+        "copy_templates": COPY_TEMPLATES,
+        "ctas": CTAS,
+    }

data/hooks.py

@@ -0,0 +1,156 @@
+"""
+Hook Styles and Power Words - Language elements for compelling ad copy.
+"""
+
+from typing import Dict, Any, List, Optional
+import random
+
+HOOK_STYLES: Dict[str, Dict[str, Any]] = {
+    "question": {
+        "name": "Question Hook",
+        "description": "Starts with a question to engage curiosity",
+        "examples": ["What if you could save $500/year?", "Are you overpaying for insurance?", "Tired of high premiums?"],
+        "trigger": "Curiosity",
+    },
+    "statement": {
+        "name": "Statement Hook",
+        "description": "Bold declaration that demands attention",
+        "examples": ["The secret to affordable insurance", "Most people don't know this trick", "The truth about insurance rates"],
+        "trigger": "Curiosity",
+    },
+    "number": {
+        "name": "Number Hook",
+        "description": "Uses specific numbers for credibility",
+        "examples": ["3 ways to cut insurance costs", "Save $847 in 5 minutes", "97% of users see results"],
+        "trigger": "Logic",
+    },
+    "transformation": {
+        "name": "Transformation Hook",
+        "description": "Shows before/after change",
+        "examples": ["From $200/month to $50/month", "Before: worried. After: protected.", "The change that saved everything"],
+        "trigger": "Transformation",
+    },
+    "urgency": {
+        "name": "Urgency Hook",
+        "description": "Creates time pressure",
+        "examples": ["Limited time: Save 40% today", "Offer expires Friday", "Last chance for this rate"],
+        "trigger": "FOMO",
+    },
+    "notification": {
+        "name": "Notification-Style Hook",
+        "description": "Mimics system notifications",
+        "examples": ["ALERT: Rates dropping now", "New message: Your savings are waiting", "Notice: Rate change detected"],
+        "trigger": "Urgency",
+    },
+    "curiosity_gap": {
+        "name": "Curiosity Gap Hook",
+        "description": "Creates information gap that needs closing",
+        "examples": ["The reason your rates are so high", "What they don't want you to know", "The hidden trick insurance companies hate"],
+        "trigger": "Curiosity",
+    },
+    "pattern_interrupt": {
+        "name": "Pattern Interrupt Hook",
+        "description": "Breaks expected patterns to grab attention",
+        "examples": ["Stop saving money (hear me out)", "I was wrong about insurance", "The worst advice that actually works"],
+        "trigger": "Surprise",
+    },
+    "social_proof": {
+        "name": "Social Proof Hook",
+        "description": "Leverages others' actions or opinions",
+        "examples": ["Join 50,000+ satisfied customers", "Why thousands are switching", "Rated 5 stars by 10,000+ users"],
+        "trigger": "Social Proof",
+    },
+    "benefit": {
+        "name": "Benefit-First Hook",
+        "description": "Leads with the primary benefit",
+        "examples": ["Save $500/year on home insurance", "Get coverage in 5 minutes", "Lower rates, better coverage"],
+        "trigger": "Greed",
+    },
+    "shocking_revelation": {
+        "name": "Shocking Revelation Hook",
+        "description": "Reveals surprising or shocking information",
+        "examples": ["The insurance trick that saves you $1,000", "What insurance companies don't want you to know", "The hidden cost of cheap insurance"],
+        "trigger": "Curiosity",
+    },
+    "direct_command": {
+        "name": "Direct Command Hook",
+        "description": "Tells the reader exactly what to do",
+        "examples": ["Stop overpaying today", "Get your quote now", "Compare rates in 60 seconds"],
+        "trigger": "Action",
+    },
+    "statistic_driven": {
+        "name": "Statistic-Driven Hook",
+        "description": "Uses compelling statistics to grab attention",
+        "examples": ["9 out of 10 people overpay", "Save an average of $847 per year", "97% see results in 30 days"],
+        "trigger": "Logic",
+    },
+    "story_opener": {
+        "name": "Story Opener Hook",
+        "description": "Begins a narrative that draws the reader in",
+        "examples": ["Last month, Sarah discovered something that changed everything", "Three years ago, I made a mistake that cost me thousands", "The day I found out I was overpaying..."],
+        "trigger": "Curiosity",
+    },
+    "contrarian_statement": {
+        "name": "Contrarian Statement Hook",
+        "description": "Challenges conventional wisdom",
+        "examples": ["Everything you know about insurance is wrong", "The worst advice that actually works", "Why the popular choice is the wrong choice"],
+        "trigger": "Curiosity",
+    },
+    "empathy_first": {
+        "name": "Empathy-First Hook",
+        "description": "Shows understanding of the reader's situation",
+        "examples": ["Tired of confusing insurance policies?", "Frustrated with rising rates?", "Wish insurance was simpler?"],
+        "trigger": "Empathy",
+    },
+    "exclusive_access": {
+        "name": "Exclusive Access Hook",
+        "description": "Offers special or limited access",
+        "examples": ["Exclusive offer for new customers only", "VIP access to special rates", "Invitation-only pricing"],
+        "trigger": "Exclusivity",
+    },
+}
+
+POWER_WORDS: Dict[str, List[str]] = {
+    "urgency": ["Now", "Today", "Hurry", "Instant", "Fast", "Quick", "Limited", "Deadline", "Expires", "Final", "Last chance", "Act now"],
+    "exclusivity": ["Exclusive", "Secret", "Hidden", "Private", "VIP", "Insider", "Confidential", "Elite", "Special", "Rare"],
+    "savings": ["Free", "Save", "Discount", "Deal", "Bargain", "Value", "Affordable", "Bonus", "Extra", "Reward", "Cashback"],
+    "trust": ["Guaranteed", "Proven", "Certified", "Verified", "Official", "Trusted", "Reliable", "Secure", "Safe", "Protected"],
+    "transformation": ["Transform", "Change", "Unlock", "Discover", "Reveal", "Breakthrough", "Revolutionary", "New", "Improved", "Ultimate"],
+    "emotion": ["Love", "Happy", "Joy", "Peace", "Confident", "Proud", "Relieved", "Excited", "Amazing", "Incredible"],
+    "fear": ["Warning", "Danger", "Risk", "Threat", "Avoid", "Mistake", "Problem", "Crisis", "Emergency", "Alert"],
+    "curiosity": ["Discover", "Learn", "Find out", "See why", "Uncover", "Secret", "Mystery", "Surprising", "Shocking", "Revealed"],
+    "social_proof": ["Popular", "Trending", "Best-selling", "Top-rated", "Award-winning", "Recommended", "Thousands", "Millions", "Join"],
+    "action": ["Get", "Start", "Try", "Claim", "Grab", "Take", "Join", "Sign up", "Subscribe", "Download", "Order", "Apply"],
+}
+
+CTA_TEMPLATES: Dict[str, List[str]] = {
+    "action": ["Get Started", "Get Your Quote", "Start Saving", "Claim Your Discount", "See Your Rate", "Get Protected"],
+    "urgency": ["Get It Now", "Claim Today", "Don't Miss Out", "Act Now", "Limited Time", "Last Chance"],
+    "curiosity": ["Learn More", "See How", "Find Out", "Discover More", "See If You Qualify", "Check Eligibility"],
+    "value": ["Save Now", "Get Free Quote", "Compare & Save", "See Your Savings", "Unlock Savings", "Get Best Rate"],
+    "low_commitment": ["Try Free", "No Obligation", "See for Yourself", "Take a Look", "Explore Options", "Check It Out"],
+}
+
+def get_all_hook_styles() -> Dict[str, Dict[str, Any]]:
+    return HOOK_STYLES
+
+def get_hook_style(key: str) -> Optional[Dict[str, Any]]:
+    return HOOK_STYLES.get(key)
+
+def get_random_hook_style() -> Dict[str, Any]:
+    key = random.choice(list(HOOK_STYLES.keys()))
+    return {"key": key, **HOOK_STYLES[key]}
+
+def get_power_words(category: Optional[str] = None, count: int = 5) -> List[str]:
+    if category and category in POWER_WORDS:
+        words = POWER_WORDS[category]
+    else:
+        words = [w for cat_words in POWER_WORDS.values() for w in cat_words]
+    return random.sample(words, min(count, len(words)))
+
+def get_random_cta(style: Optional[str] = None) -> str:
+    if style and style in CTA_TEMPLATES:
+        ctas = CTA_TEMPLATES[style]
+    else:
+        ctas = [c for style_ctas in CTA_TEMPLATES.values() for c in style_ctas]
+    return random.choice(ctas)

data/triggers.py

@@ -0,0 +1,141 @@
+"""
+Psychological Triggers - Core emotional drivers that make ads convert.
+"""
+
+from typing import Dict, Any, List, Optional
+import random
+
+PSYCHOLOGICAL_TRIGGERS: Dict[str, Dict[str, Any]] = {
+    "fear": {
+        "name": "Fear / Loss Aversion",
+        "description": "Fear of losing what you have or missing out on protection",
+        "copy_angles": ["Don't risk losing your home", "Protect what matters most", "Before disaster strikes"],
+        "visual_cues": ["warning signs", "protection imagery", "security elements"],
+        "color_palette": "warning",
+        "best_for": ["insurance", "security", "protection services"],
+    },
+    "greed": {
+        "name": "Greed / Savings",
+        "description": "Desire to save money, get more value, maximize gain",
+        "copy_angles": ["Save $500+ per year", "Get more for less", "Maximize your savings"],
+        "visual_cues": ["money imagery", "savings charts", "discount badges"],
+        "color_palette": "savings",
+        "best_for": ["financial products", "deals", "discounts"],
+    },
+    "fomo": {
+        "name": "FOMO (Fear of Missing Out)",
+        "description": "Anxiety about missing a limited opportunity",
+        "copy_angles": ["Limited time offer", "Only 50 spots left", "Offer expires soon"],
+        "visual_cues": ["countdown timers", "urgency badges", "scarcity indicators"],
+        "color_palette": "urgency",
+        "best_for": ["sales", "launches", "limited offers"],
+    },
+    "authority": {
+        "name": "Authority / Expertise",
+        "description": "Trust in experts, credentials, and established institutions",
+        "copy_angles": ["Doctor recommended", "Expert approved", "Industry leading"],
+        "visual_cues": ["credentials", "certifications", "professional imagery"],
+        "color_palette": "trust",
+        "best_for": ["health", "professional services", "premium products"],
+    },
+    "social_proof": {
+        "name": "Social Proof",
+        "description": "Following what others are doing, trust in numbers",
+        "copy_angles": ["Join 50,000+ customers", "5-star rated", "Most popular choice"],
+        "visual_cues": ["star ratings", "customer counts", "testimonials"],
+        "color_palette": "trust",
+        "best_for": ["consumer products", "services", "subscriptions"],
+    },
+    "curiosity": {
+        "name": "Curiosity",
+        "description": "Desire to learn, discover, and fill knowledge gaps",
+        "copy_angles": ["The secret they don't want you to know", "Discover how", "What they won't tell you"],
+        "visual_cues": ["mystery elements", "reveal moments", "hidden information"],
+        "color_palette": "premium",
+        "best_for": ["educational content", "reveals", "discoveries"],
+    },
+    "belonging": {
+        "name": "Belonging / Community",
+        "description": "Desire to be part of a group, tribe, or community",
+        "copy_angles": ["Join the community", "Be part of something", "Welcome to the family"],
+        "visual_cues": ["group imagery", "community symbols", "togetherness"],
+        "color_palette": "calm",
+        "best_for": ["memberships", "communities", "brands"],
+    },
+    "transformation": {
+        "name": "Transformation",
+        "description": "Desire for change, improvement, and becoming better",
+        "copy_angles": ["Transform your life", "Become the best version", "Change everything"],
+        "visual_cues": ["before/after", "progression imagery", "improvement indicators"],
+        "color_palette": "energy",
+        "best_for": ["fitness", "personal development", "lifestyle"],
+    },
+    "relief": {
+        "name": "Relief / Pain Relief",
+        "description": "Escaping pain, stress, or uncomfortable situations",
+        "copy_angles": ["End the stress", "Finally get relief", "Stop the pain"],
+        "visual_cues": ["relaxation imagery", "relief moments", "calm scenes"],
+        "color_palette": "calm",
+        "best_for": ["health", "stress relief", "solutions"],
+    },
+    "pride": {
+        "name": "Pride / Self-Worth",
+        "description": "Feeling good about oneself, achievements, and status",
+        "copy_angles": ["You deserve the best", "Treat yourself", "You've earned it"],
+        "visual_cues": ["success imagery", "achievement symbols", "premium elements"],
+        "color_palette": "premium",
+        "best_for": ["luxury", "premium products", "self-care"],
+    },
+    "urgency": {
+        "name": "Urgency / Time Pressure",
+        "description": "Need to act quickly before time runs out",
+        "copy_angles": ["Act now", "Today only", "Time is running out"],
+        "visual_cues": ["clocks", "timers", "urgent badges"],
+        "color_palette": "urgency",
+        "best_for": ["sales", "deadlines", "limited offers"],
+    },
+    "exclusivity": {
+        "name": "Exclusivity",
+        "description": "Desire for special access, VIP treatment, insider status",
+        "copy_angles": ["Exclusive offer", "VIP access", "By invitation only"],
+        "visual_cues": ["VIP badges", "exclusive tags", "premium styling"],
+        "color_palette": "premium",
+        "best_for": ["premium products", "memberships", "exclusive deals"],
+    },
+}
+
+# Trigger combinations that work well together
+TRIGGER_COMBINATIONS: List[Dict[str, Any]] = [
+    {"primary": "fear", "secondary": "urgency", "name": "Fear + Urgency", "description": "Creates immediate action through fear of loss"},
+    {"primary": "greed", "secondary": "fomo", "name": "Savings + FOMO", "description": "Limited-time savings opportunity"},
+    {"primary": "social_proof", "secondary": "authority", "name": "Proof + Authority", "description": "Expert-backed with customer validation"},
+    {"primary": "transformation", "secondary": "curiosity", "name": "Transform + Curiosity", "description": "Discover the secret to transformation"},
+    {"primary": "relief", "secondary": "social_proof", "name": "Relief + Proof", "description": "Join thousands who found relief"},
+    {"primary": "exclusivity", "secondary": "urgency", "name": "Exclusive + Urgent", "description": "Limited VIP opportunity"},
+]
+
+def get_all_triggers() -> Dict[str, Dict[str, Any]]:
+    return PSYCHOLOGICAL_TRIGGERS
+
+def get_trigger(key: str) -> Optional[Dict[str, Any]]:
+    return PSYCHOLOGICAL_TRIGGERS.get(key)
+
+def get_random_trigger() -> Dict[str, Any]:
+    key = random.choice(list(PSYCHOLOGICAL_TRIGGERS.keys()))
+    return {"key": key, **PSYCHOLOGICAL_TRIGGERS[key]}
+
+def get_trigger_combination() -> Dict[str, Any]:
+    return random.choice(TRIGGER_COMBINATIONS)
+
+def get_triggers_for_niche(niche: str) -> List[Dict[str, Any]]:
+    niche_lower = niche.lower().replace(" ", "_").replace("-", "_")
+    niche_triggers = {
+        "home_insurance": ["fear", "greed", "social_proof", "authority", "relief"],
+        "glp1": ["transformation", "pride", "social_proof", "authority", "relief"],
+    }
+    trigger_keys = niche_triggers.get(niche_lower, list(PSYCHOLOGICAL_TRIGGERS.keys())[:5])
+    return [{"key": k, **PSYCHOLOGICAL_TRIGGERS[k]} for k in trigger_keys if k in PSYCHOLOGICAL_TRIGGERS]
+
+def get_copy_angles_for_trigger(trigger_key: str) -> List[str]:
+    trigger = get_trigger(trigger_key)
+    return trigger.get("copy_angles", []) if trigger else []

data/visuals.py

@@ -0,0 +1,126 @@
+"""
+Visual Elements - Colors, typography, styles, and image generation guidance.
+"""
+
+from typing import Dict, Any, List, Optional
+import random
+
+COLOR_PALETTES: Dict[str, Dict[str, Any]] = {
+    "urgency": {"primary": "#FF0000", "secondary": "#FF4500", "accent": "#FFD700", "background": "#000000", "text": "#FFFFFF"},
+    "trust": {"primary": "#1976D2", "secondary": "#0D47A1", "accent": "#4CAF50", "background": "#FFFFFF", "text": "#212121"},
+    "savings": {"primary": "#4CAF50", "secondary": "#2E7D32", "accent": "#FFD700", "background": "#FFFFFF", "text": "#212121"},
+    "energy": {"primary": "#FF9800", "secondary": "#F57C00", "accent": "#FFEB3B", "background": "#FFFFFF", "text": "#212121"},
+    "premium": {"primary": "#212121", "secondary": "#424242", "accent": "#FFD700", "background": "#FFFFFF", "text": "#212121"},
+    "calm": {"primary": "#00BCD4", "secondary": "#0097A7", "accent": "#B2EBF2", "background": "#FFFFFF", "text": "#212121"},
+    "health": {"primary": "#4CAF50", "secondary": "#81C784", "accent": "#2196F3", "background": "#E8F5E9", "text": "#212121"},
+    "warning": {"primary": "#F44336", "secondary": "#D32F2F", "accent": "#FFEB3B", "background": "#FFF3E0", "text": "#212121"},
+}
+
+TYPOGRAPHY_STYLES: Dict[str, Dict[str, Any]] = {
+    "system": {"name": "System/Native", "fonts": ["Arial", "Helvetica", "San Francisco", "Roboto"], "best_for": ["notifications", "system alerts"]},
+    "bold_impact": {"name": "Bold Impact", "fonts": ["Impact", "Arial Black", "Bebas Neue", "Anton"], "best_for": ["headlines", "breaking news"]},
+    "modern_clean": {"name": "Modern Clean", "fonts": ["Montserrat", "Lato", "Open Sans", "Poppins"], "best_for": ["professional ads", "lifestyle"]},
+    "handwritten": {"name": "Handwritten", "fonts": ["Indie Flower", "Dancing Script", "Pacifico", "Caveat"], "best_for": ["testimonials", "personal notes"]},
+    "typewriter": {"name": "Typewriter", "fonts": ["Courier", "Courier New", "American Typewriter"], "best_for": ["memos", "documents"]},
+    "newspaper": {"name": "Newspaper", "fonts": ["Times New Roman", "Georgia", "Playfair Display"], "best_for": ["news style", "editorial"]},
+}
+
+VISUAL_STYLES: List[Dict[str, Any]] = [
+    {"key": "ugc_authentic", "name": "UGC Authentic", "prompt_guidance": "Casual phone camera snapshot, authentic feel, slightly imperfect, natural lighting"},
+    {"key": "clean_minimal", "name": "Clean Minimal", "prompt_guidance": "Clean minimal design, white space, simple composition, modern aesthetic"},
+    {"key": "bold_graphic", "name": "Bold Graphic", "prompt_guidance": "Bold graphic design, high contrast, strong colors, impactful visual"},
+    {"key": "lifestyle_aspirational", "name": "Lifestyle Aspirational", "prompt_guidance": "Aspirational lifestyle photography, happy people, warm lighting"},
+    {"key": "documentary_real", "name": "Documentary Real", "prompt_guidance": "Documentary style, candid shots, real moments, natural light"},
+    {"key": "screenshot_native", "name": "Screenshot Native", "prompt_guidance": "Mobile app screenshot, native UI elements, authentic interface"},
+    {"key": "news_editorial", "name": "News Editorial", "prompt_guidance": "News publication style, editorial photography, professional"},
+    {"key": "retro_nostalgic", "name": "Retro Nostalgic", "prompt_guidance": "Retro aesthetic, vintage colors, nostalgic feel"},
+    {"key": "dark_dramatic", "name": "Dark Dramatic", "prompt_guidance": "Dark dramatic lighting, moody atmosphere, cinematic"},
+    {"key": "bright_optimistic", "name": "Bright Optimistic", "prompt_guidance": "Bright cheerful photography, optimistic feel, positive energy"},
+    {"key": "corporate_professional", "name": "Corporate Professional", "prompt_guidance": "Corporate photography, business setting, professional attire, clean office environment"},
+    {"key": "street_style", "name": "Street Style", "prompt_guidance": "Urban street photography, candid moments, city backdrop, authentic urban feel"},
+    {"key": "studio_clean", "name": "Studio Clean", "prompt_guidance": "Studio photography, controlled lighting, clean background, product-focused"},
+    {"key": "cinematic_epic", "name": "Cinematic Epic", "prompt_guidance": "Cinematic wide shots, epic scale, dramatic composition, film-like quality"},
+    {"key": "handheld_casual", "name": "Handheld Casual", "prompt_guidance": "Handheld camera feel, slight motion blur, casual framing, everyday moments"},
+]
+
+CAMERA_ANGLES: List[str] = [
+    "eye level shot", "slightly low angle (empowering)", "slightly high angle (overview)", "close-up portrait",
+    "medium shot", "wide establishing shot", "over-the-shoulder shot", "POV first-person perspective", "candid angle",
+    "dutch angle (tilted)", "bird's eye view", "worm's eye view", "extreme close-up", "two-shot (two people)",
+    "group shot", "profile shot", "three-quarter angle", "top-down view", "oblique angle",
+]
+
+LIGHTING_STYLES: List[str] = [
+    "natural daylight", "golden hour warm light", "soft diffused light", "harsh direct sunlight",
+    "indoor ambient lighting", "dramatic side lighting", "backlit silhouette", "overcast soft light",
+    "rim lighting", "softbox lighting", "window light", "neon lighting", "candlelight warm",
+    "studio lighting", "natural window light", "dramatic chiaroscuro", "soft ambient glow",
+]
+
+COMPOSITIONS: List[str] = [
+    "rule of thirds", "centered subject", "leading lines to subject", "frame within frame",
+    "negative space emphasis", "symmetrical balance", "asymmetrical dynamic", "diagonal composition",
+    "golden ratio", "triangular composition", "circular composition", "layered depth",
+    "foreground/background separation", "depth of field focus", "repetitive patterns", "contrasting elements",
+]
+
+VISUAL_MOODS: List[str] = [
+    "urgent and alarming", "calm and reassuring", "exciting and energetic", "trustworthy and professional",
+    "warm and friendly", "bold and confident", "subtle and sophisticated", "raw and authentic",
+    "hopeful and optimistic", "serious and authoritative", "playful and fun", "mysterious and intriguing",
+    "inspiring and motivational", "comfortable and cozy", "dynamic and action-packed", "peaceful and serene",
+]
+
+NEGATIVE_PROMPTS: List[str] = [
+    "no watermarks", "no logos", "no brand marks", "no stock photo aesthetic", "no overly polished professional photography",
+    "no perfect studio lighting", "no corporate photography style", "no artificial perfection", "no text errors",
+    "no distorted faces", "no extra limbs", "no AI artifacts", "no blurry main subjects", "no over-processed HDR look",
+]
+
+NICHE_VISUAL_GUIDANCE: Dict[str, Dict[str, Any]] = {
+    "home_insurance": {
+        "subjects": ["family in front of home", "house exterior", "homeowner looking confident", "couple reviewing papers"],
+        "props": ["insurance documents", "house keys", "tablet showing coverage", "family photos"],
+        "avoid": ["disasters", "fire or floods", "stressed expressions", "dark settings"],
+        "color_preference": "trust",
+    },
+    "glp1": {
+        "subjects": ["confident person smiling", "active lifestyle scenes", "healthy meal preparation", "doctor consultation"],
+        "props": ["fitness equipment", "healthy food", "comfortable clothing"],
+        "avoid": ["before/after weight comparisons", "measuring tapes", "scales prominently", "needle close-ups"],
+        "color_preference": "health",
+    },
+}
+
+def get_color_palette(trigger: str) -> Dict[str, str]:
+    return COLOR_PALETTES.get(trigger, COLOR_PALETTES["trust"])
+
+def get_random_visual_style() -> Dict[str, Any]:
+    return random.choice(VISUAL_STYLES)
+
+def get_random_camera_angle() -> str:
+    return random.choice(CAMERA_ANGLES)
+
+def get_random_lighting() -> str:
+    return random.choice(LIGHTING_STYLES)
+
+def get_random_composition() -> str:
+    return random.choice(COMPOSITIONS)
+
+def get_random_mood() -> str:
+    return random.choice(VISUAL_MOODS)
+
+def get_niche_visual_guidance(niche: str) -> Optional[Dict[str, Any]]:
+    return NICHE_VISUAL_GUIDANCE.get(niche.lower().replace(" ", "_").replace("-", "_"))
+
+def build_negative_prompt() -> str:
+    return ", ".join(NEGATIVE_PROMPTS)
+
+def get_random_visual_elements() -> Dict[str, Any]:
+    return {
+        "style": get_random_visual_style(),
+        "camera_angle": get_random_camera_angle(),
+        "lighting": get_random_lighting(),
+        "composition": get_random_composition(),
+        "mood": get_random_mood(),
+    }

frontend/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1,144 @@
+# Ad Generator Lite - Frontend
+
+Modern Next.js dashboard for generating and managing ad creatives for Home Insurance and GLP-1 niches.
+
+## Features
+
+- **Single Ad Generation**: Generate individual ads with randomized strategies
+- **Batch Generation**: Create multiple ads at once for testing
+- **Matrix System**: Generate ads using specific angle × concept combinations
+- **Gallery**: Browse, filter, and manage all generated ads
+- **Testing Matrix Builder**: Create systematic testing matrices
+- **Export**: Download images, export JSON/CSV, copy ad copy
+
+## Tech Stack
+
+- **Next.js 16** with App Router
+- **TypeScript** for type safety
+- **Tailwind CSS** for styling
+- **Zustand** for state management
+- **React Hook Form** + **Zod** for form validation
+- **Axios** for API calls
+- **React Hot Toast** for notifications
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+ and npm
+- Backend API running on `http://localhost:8000` (or configure `NEXT_PUBLIC_API_URL`)
+
+### Installation
+
+```bash
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+```
+
+The app will be available at `http://localhost:3000`
+
+### Environment Variables
+
+Create a `.env.local` file:
+
+```env
+NEXT_PUBLIC_API_URL=http://localhost:8000
+```
+
+## Project Structure
+
+```
+frontend/
+├── app/                    # Next.js pages (App Router)
+│   ├── page.tsx           # Dashboard
+│   ├── generate/          # Generation pages
+│   ├── gallery/           # Gallery pages
+│   └── matrix/            # Matrix system pages
+├── components/            # React components
+│   ├── ui/               # Base UI components
+│   ├── generation/       # Generation components
+│   ├── gallery/          # Gallery components
+│   └── matrix/           # Matrix components
+├── lib/                   # Utilities
+│   ├── api/              # API client
+│   ├── hooks/            # Custom hooks
+│   └── utils/            # Utility functions
+├── store/                # Zustand stores
+├── types/                # TypeScript types
+└── styles/               # Global styles
+```
+
+## Available Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run start` - Start production server
+- `npm run lint` - Run ESLint
+
+## API Integration
+
+The frontend integrates with the FastAPI backend. All API endpoints are defined in `lib/api/endpoints.ts` and use the axios client in `lib/api/client.ts`.
+
+## Features Overview
+
+### Dashboard
+- Quick stats (total ads, by niche, system status)
+- Recent ads preview
+- Quick action buttons
+
+### Generation
+- **Single**: Generate one ad with configurable image count
+- **Batch**: Generate multiple ads (1-20) with 1-3 images each
+- **Matrix**: Select specific angle and concept combinations
+
+### Gallery
+- Grid view of all ads
+- Filter by niche, method, search
+- Pagination
+- Bulk actions (select, delete)
+- Ad detail view with full copy and metadata
+
+### Matrix System
+- Browse all 100 angles and 100 concepts
+- View compatibility between angles and concepts
+- Generate testing matrices for systematic optimization
+- Export matrices as JSON/CSV
+
+## Development
+
+### Adding New Components
+
+1. Create component in appropriate `components/` subdirectory
+2. Use TypeScript for type safety
+3. Follow existing patterns for styling (Tailwind CSS)
+4. Use UI components from `components/ui/`
+
+### State Management
+
+Use Zustand stores in `store/`:
+- `generationStore` - Current generation state
+- `galleryStore` - Gallery filters, pagination, selection
+- `matrixStore` - Matrix angles, concepts, selections
+
+### API Calls
+
+All API calls should use functions from `lib/api/endpoints.ts` which provide:
+- Type safety
+- Error handling
+- Automatic toast notifications
+
+## Building for Production
+
+```bash
+npm run build
+npm start
+```
+
+The production build will be optimized and ready for deployment.
+
+## License
+
+Same as the main project.

frontend/app/gallery/[id]/page.tsx

@@ -0,0 +1,512 @@
+"use client";
+
+import React, { useEffect, useState, useCallback } from "react";
+import { useParams, useRouter } from "next/navigation";
+import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import { Button } from "@/components/ui/Button";
+import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
+import { getAd, deleteAd, listAds } from "@/lib/api/endpoints";
+import { formatDate, formatNiche, getImageUrl, getImageUrlFallback } from "@/lib/utils/formatters";
+import { downloadImage, copyToClipboard, exportAsJSON } from "@/lib/utils/export";
+import { toast } from "react-hot-toast";
+import { ArrowLeft, ArrowRight, Download, Copy, Trash2, FileJson, Wand2 } from "lucide-react";
+import type { AdCreativeDB, ImageCorrectResponse } from "@/types/api";
+import { CorrectionModal } from "@/components/generation/CorrectionModal";
+
+export default function AdDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const adId = params.id as string;
+
+  const [ad, setAd] = useState<AdCreativeDB | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [imageError, setImageError] = useState(false);
+  const [allAds, setAllAds] = useState<AdCreativeDB[]>([]);
+  const [currentIndex, setCurrentIndex] = useState<number>(-1);
+  const [showCorrectionModal, setShowCorrectionModal] = useState(false);
+
+  useEffect(() => {
+    loadAd();
+    loadAllAds();
+  }, [adId]);
+
+  useEffect(() => {
+    if (ad) {
+      const { primary, fallback } = getImageUrlFallback(ad.image_url, ad.image_filename);
+      setImageSrc(primary || fallback);
+      setImageError(false);
+      const index = allAds.findIndex((a) => a.id === ad.id);
+      setCurrentIndex(index);
+    } else {
+      setImageSrc(null);
+      setImageError(false);
+    }
+  }, [ad, allAds]);
+
+  const navigateToPrevious = useCallback(() => {
+    if (currentIndex > 0 && allAds.length > 0) {
+      const previousAd = allAds[currentIndex - 1];
+      router.push(`/gallery/${previousAd.id}`);
+    }
+  }, [currentIndex, allAds, router]);
+
+  const navigateToNext = useCallback(() => {
+    if (currentIndex >= 0 && currentIndex < allAds.length - 1) {
+      const nextAd = allAds[currentIndex + 1];
+      router.push(`/gallery/${nextAd.id}`);
+    }
+  }, [currentIndex, allAds, router]);
+
+  const hasPrevious = currentIndex > 0;
+  const hasNext = currentIndex >= 0 && currentIndex < allAds.length - 1;
+
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+        return;
+      }
+      if (e.key === "ArrowLeft" && hasPrevious) {
+        e.preventDefault();
+        navigateToPrevious();
+      } else if (e.key === "ArrowRight" && hasNext) {
+        e.preventDefault();
+        navigateToNext();
+      }
+    };
+    window.addEventListener("keydown", handleKeyPress);
+    return () => window.removeEventListener("keydown", handleKeyPress);
+  }, [hasPrevious, hasNext, navigateToPrevious, navigateToNext]);
+
+  const loadAd = async () => {
+    setIsLoading(true);
+    try {
+      const data = await getAd(adId);
+      setAd(data);
+    } catch (error: any) {
+      toast.error("Failed to load ad");
+      router.push("/gallery");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const loadAllAds = async () => {
+    try {
+      const response = await listAds({ limit: 1000, offset: 0 });
+      setAllAds(response.ads);
+    } catch (error: any) {
+      console.error("Failed to load ads list:", error);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!confirm("Are you sure you want to delete this ad?")) return;
+    try {
+      await deleteAd(adId);
+      toast.success("Ad deleted");
+      router.push("/gallery");
+    } catch (error: any) {
+      toast.error("Failed to delete ad");
+    }
+  };
+
+  const handleDownloadImage = async () => {
+    if (!ad?.image_url && !ad?.image_filename) {
+      toast.error("No image available");
+      return;
+    }
+    try {
+      const imageUrl = getImageUrl(ad.image_url, ad.image_filename);
+      if (imageUrl) {
+        await downloadImage(imageUrl, ad.image_filename || `ad-${ad.id}.png`);
+        toast.success("Image downloaded");
+      }
+    } catch (error) {
+      toast.error("Failed to download image");
+    }
+  };
+
+  const handleCopyText = async (text: string, label: string) => {
+    try {
+      await copyToClipboard(text);
+      toast.success(`${label} copied`);
+    } catch (error) {
+      toast.error("Failed to copy");
+    }
+  };
+
+  const handleExportJSON = () => {
+    if (!ad) return;
+    exportAsJSON(ad, `ad-${ad.id}.json`);
+    toast.success("JSON exported");
+  };
+
+  const handleImageError = () => {
+    if (!ad) return;
+    const { fallback } = getImageUrlFallback(ad.image_url, ad.image_filename);
+    if (!imageError && fallback && imageSrc) {
+      setImageSrc(fallback);
+      setImageError(true);
+    } else {
+      setImageSrc(null);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+          <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  if (!ad) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-gray-500 mb-4">Ad not found</p>
+          <Link href="/gallery">
+            <Button variant="primary">Back to Gallery</Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-cyan-50/30">
+      {/* Header */}
+      <div className="sticky top-0 z-50 bg-white/90 backdrop-blur-md border-b border-blue-100 shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
+          <Link href="/gallery">
+            <Button variant="ghost" size="sm" className="text-blue-600 hover:text-blue-700 hover:bg-blue-50">
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Gallery
+            </Button>
+          </Link>
+          
+          {allAds.length > 0 && currentIndex >= 0 && (
+            <div className="flex items-center gap-2">
+              <div className="relative group">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={navigateToPrevious}
+                  disabled={!hasPrevious}
+                  className="text-blue-600 hover:bg-blue-50 disabled:text-gray-300"
+                >
+                  <ArrowLeft className="h-4 w-4" />
+                </Button>
+                {hasPrevious && (
+                  <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
+                    Previous (←)
+                  </span>
+                )}
+              </div>
+              <span className="text-sm font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent min-w-[60px] text-center">
+                {currentIndex + 1} / {allAds.length}
+              </span>
+              <div className="relative group">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={navigateToNext}
+                  disabled={!hasNext}
+                  className="text-blue-600 hover:bg-blue-50 disabled:text-gray-300"
+                >
+                  <ArrowRight className="h-4 w-4" />
+                </Button>
+                {hasNext && (
+                  <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
+                    Next (→)
+                  </span>
+                )}
+              </div>
+            </div>
+          )}
+
+          <div className="flex items-center gap-1">
+            <div className="relative group">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowCorrectionModal(true)}
+                className="text-amber-600 hover:bg-amber-50"
+              >
+                <Wand2 className="h-4 w-4" />
+              </Button>
+              <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
+                Correct Image
+              </span>
+            </div>
+            <div className="relative group">
+              <Button variant="ghost" size="sm" onClick={handleDownloadImage} className="text-emerald-600 hover:bg-emerald-50">
+                <Download className="h-4 w-4" />
+              </Button>
+              <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
+                Download Image
+              </span>
+            </div>
+            <div className="relative group">
+              <Button variant="ghost" size="sm" onClick={handleExportJSON} className="text-violet-600 hover:bg-violet-50">
+                <FileJson className="h-4 w-4" />
+              </Button>
+              <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
+                Export JSON
+              </span>
+            </div>
+            <div className="relative group">
+              <Button variant="ghost" size="sm" onClick={handleDelete} className="text-red-500 hover:text-red-600 hover:bg-red-50">
+                <Trash2 className="h-4 w-4" />
+              </Button>
+              <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-red-600 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
+                Delete Ad
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+        {/* Main Content */}
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {/* Left - Image */}
+          <div className="space-y-4">
+            {imageSrc ? (
+              <div className="bg-white rounded-2xl shadow-lg shadow-blue-100/50 overflow-hidden ring-1 ring-blue-100">
+                <img
+                  src={imageSrc}
+                  alt={ad.headline}
+                  className="w-full h-auto"
+                  onError={handleImageError}
+                />
+              </div>
+            ) : (
+              <div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl shadow-lg aspect-square flex items-center justify-center ring-1 ring-blue-100">
+                <div className="text-blue-300 text-center">
+                  <svg className="w-16 h-16 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                  </svg>
+                  <p className="text-sm">No image</p>
+                </div>
+              </div>
+            )}
+
+            {/* Metadata */}
+            <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
+              <h3 className="text-xs font-bold text-blue-600 uppercase tracking-wider mb-4">Details</h3>
+              <div className="grid grid-cols-2 gap-3 text-sm">
+                <div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-3 border border-blue-100">
+                  <p className="text-blue-500 text-xs font-medium mb-1">Niche</p>
+                  <p className="font-semibold text-gray-800">{formatNiche(ad.niche)}</p>
+                </div>
+                {ad.generation_method && (
+                  <div className="bg-gradient-to-br from-cyan-50 to-teal-50 rounded-xl p-3 border border-cyan-100">
+                    <p className="text-cyan-600 text-xs font-medium mb-1">Method</p>
+                    <p className="font-semibold text-gray-800">{ad.generation_method}</p>
+                  </div>
+                )}
+                {ad.angle_name && (
+                  <div className="bg-gradient-to-br from-pink-50 to-rose-50 rounded-xl p-3 border border-pink-100">
+                    <p className="text-pink-500 text-xs font-medium mb-1">Angle</p>
+                    <p className="font-semibold text-gray-800">{ad.angle_name}</p>
+                  </div>
+                )}
+                {ad.concept_name && (
+                  <div className="bg-gradient-to-br from-violet-50 to-purple-50 rounded-xl p-3 border border-violet-100">
+                    <p className="text-violet-500 text-xs font-medium mb-1">Concept</p>
+                    <p className="font-semibold text-gray-800">{ad.concept_name}</p>
+                  </div>
+                )}
+                {ad.image_model && (
+                  <div className="bg-gradient-to-br from-emerald-50 to-green-50 rounded-xl p-3 border border-emerald-100">
+                    <p className="text-emerald-600 text-xs font-medium mb-1">Image Model</p>
+                    <p className="font-semibold text-gray-800">{ad.image_model}</p>
+                  </div>
+                )}
+                {ad.created_at && (
+                  <div className="bg-gradient-to-br from-amber-50 to-orange-50 rounded-xl p-3 border border-amber-100">
+                    <p className="text-amber-600 text-xs font-medium mb-1">Created</p>
+                    <p className="font-semibold text-gray-800">{formatDate(ad.created_at)}</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Right - Ad Copy */}
+          <div className="space-y-5">
+            {/* Headline */}
+            <div className="bg-white rounded-2xl shadow-lg shadow-blue-100/30 p-6 border-l-4 border-blue-500">
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1">
+                  {ad.title && (
+                    <p className="text-sm text-blue-600 font-medium mb-1">{ad.title}</p>
+                  )}
+                  <h1 className="text-2xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent leading-tight">
+                    {ad.headline}
+                  </h1>
+                </div>
+                <div className="relative group shrink-0">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleCopyText(ad.headline, "Headline")}
+                    className="text-blue-500 hover:bg-blue-50"
+                  >
+                    <Copy className="h-4 w-4" />
+                  </Button>
+                  <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-blue-600 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
+                    Copy Headline
+                  </span>
+                </div>
+              </div>
+              </div>
+
+            {/* Primary Text */}
+              {ad.primary_text && (
+              <div className="bg-white rounded-2xl shadow-md p-6 border-l-4 border-cyan-500">
+                <div className="flex items-start justify-between gap-4 mb-3">
+                  <h3 className="text-xs font-bold text-cyan-600 uppercase tracking-wider">Primary Text</h3>
+                  <div className="relative group">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleCopyText(ad.primary_text!, "Primary Text")}
+                      className="text-cyan-500 hover:bg-cyan-50"
+                    >
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                    <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-cyan-600 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
+                      Copy Text
+                    </span>
+                  </div>
+                </div>
+                <p className="text-gray-700 whitespace-pre-line leading-relaxed">{ad.primary_text}</p>
+                </div>
+              )}
+
+            {/* Description */}
+              {ad.description && (
+              <div className="bg-white rounded-2xl shadow-md p-6 border-l-4 border-violet-500">
+                <div className="flex items-start justify-between gap-4 mb-3">
+                  <h3 className="text-xs font-bold text-violet-600 uppercase tracking-wider">Description</h3>
+                  <div className="relative group">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleCopyText(ad.description!, "Description")}
+                      className="text-violet-500 hover:bg-violet-50"
+                    >
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                    <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-violet-600 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
+                      Copy Description
+                    </span>
+                  </div>
+                </div>
+                <p className="text-gray-700 leading-relaxed">{ad.description}</p>
+                </div>
+              )}
+
+            {/* Body Story */}
+            {ad.body_story && (
+              <div className="bg-white rounded-2xl shadow-md p-6 border-l-4 border-amber-500">
+                <div className="flex items-start justify-between gap-4 mb-3">
+                  <h3 className="text-xs font-bold text-amber-600 uppercase tracking-wider">Body Story</h3>
+                  <div className="relative group">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleCopyText(ad.body_story!, "Body Story")}
+                      className="text-amber-500 hover:bg-amber-50"
+                    >
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                    <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-amber-600 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
+                      Copy Story
+                    </span>
+                  </div>
+                </div>
+                <p className="text-gray-700 whitespace-pre-line leading-relaxed">{ad.body_story}</p>
+              </div>
+            )}
+
+            {/* CTA */}
+            {ad.cta && (
+              <div className="bg-gradient-to-r from-emerald-50 to-teal-50 rounded-2xl shadow-md p-6 border border-emerald-200">
+                <div className="flex items-start justify-between gap-4 mb-3">
+                  <h3 className="text-xs font-bold text-emerald-600 uppercase tracking-wider">Call to Action</h3>
+                  <div className="relative group">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleCopyText(ad.cta!, "CTA")}
+                      className="text-emerald-600 hover:bg-emerald-100"
+                    >
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                    <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-emerald-600 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
+                      Copy CTA
+                    </span>
+                  </div>
+                </div>
+                <p className="text-xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">{ad.cta}</p>
+              </div>
+            )}
+
+            {/* Psychological Angle */}
+            {ad.psychological_angle && (
+              <div className="bg-gradient-to-br from-pink-50 via-purple-50 to-blue-50 rounded-2xl p-6 border border-purple-200 shadow-md">
+                <div className="flex items-start justify-between gap-4 mb-3">
+                  <h3 className="text-xs font-bold text-purple-600 uppercase tracking-wider">🧠 Psychological Angle</h3>
+                  <div className="relative group">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleCopyText(ad.psychological_angle!, "Angle")}
+                      className="text-purple-500 hover:bg-purple-100"
+                    >
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                    <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-purple-600 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
+                      Copy Angle
+                    </span>
+                  </div>
+                </div>
+                <p className="text-gray-700 leading-relaxed">{ad.psychological_angle}</p>
+                {ad.why_it_works && (
+                  <div className="mt-4 pt-4 border-t border-purple-200">
+                    <p className="text-xs font-bold text-purple-600 uppercase tracking-wider mb-2">💡 Why It Works</p>
+                    <p className="text-gray-600 text-sm leading-relaxed">{ad.why_it_works}</p>
+                  </div>
+                )}
+                </div>
+              )}
+        </div>
+        </div>
+      </div>
+
+      {/* Correction Modal */}
+      <CorrectionModal
+        isOpen={showCorrectionModal}
+        onClose={() => setShowCorrectionModal(false)}
+        adId={adId}
+        ad={ad}
+        onSuccess={(result: ImageCorrectResponse) => {
+          // Update the displayed image if correction was successful
+          if (result.corrected_image?.image_url) {
+            setImageSrc(result.corrected_image.image_url);
+          }
+          // If a new ad was created, optionally navigate to it or reload the gallery
+          if (result.corrected_image?.ad_id) {
+            toast.success("Corrected image saved to gallery!");
+            // Optionally: router.push(`/gallery/${result.corrected_image.ad_id}`);
+          }
+        }}
+      />
+    </div>
+  );
+}

frontend/app/gallery/page.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import React, { useEffect, useState, useCallback } from "react";
+import { GalleryGrid } from "@/components/gallery/GalleryGrid";
+import { FilterBar } from "@/components/gallery/FilterBar";
+import { Button } from "@/components/ui/Button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import { listAds, deleteAd } from "@/lib/api/endpoints";
+import { useGalleryStore } from "@/store/galleryStore";
+import { toast } from "react-hot-toast";
+import { Download, Trash2, CheckSquare, Square } from "lucide-react";
+import type { AdFilters } from "@/types";
+
+export default function GalleryPage() {
+  const {
+    ads,
+    total,
+    limit,
+    offset,
+    filters,
+    selectedAds,
+    isLoading,
+    setAds,
+    setFilters,
+    setOffset,
+    toggleAdSelection,
+    clearSelection,
+    selectAll,
+    setIsLoading,
+    removeAd,
+  } = useGalleryStore();
+
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+
+  const loadAds = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      // Map generation_method filter values to backend values
+      let generationMethod: string | null | undefined = filters.generation_method;
+      if (generationMethod === "original") {
+        generationMethod = "standard"; // Backend uses "standard" for original method
+      }
+      // "angle_concept_matrix" and "extensive" map directly
+      
+      const response = await listAds({
+        niche: filters.niche || undefined,
+        generation_method: generationMethod || undefined,
+        limit,
+        offset,
+      });
+      
+      // Filter client-side for search only (text search is better done client-side)
+      let filteredAds = response.ads;
+      
+      if (filters.search) {
+        const searchLower = filters.search.toLowerCase();
+        filteredAds = filteredAds.filter(
+          (ad) =>
+            ad.headline?.toLowerCase().includes(searchLower) ||
+            ad.title?.toLowerCase().includes(searchLower) ||
+            ad.primary_text?.toLowerCase().includes(searchLower) ||
+            ad.description?.toLowerCase().includes(searchLower)
+        );
+      }
+
+      // Use the total from backend (it's already filtered by niche and generation_method)
+      // For search, we show the filtered count but this is only for current page
+      // In a production app, you'd want server-side search for accurate totals
+      const total = filters.search ? filteredAds.length : response.total;
+      setAds(filteredAds, total);
+    } catch (error: any) {
+      toast.error("Failed to load ads");
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [filters, limit, offset, setAds, setIsLoading]);
+
+  useEffect(() => {
+    loadAds();
+  }, [loadAds]);
+
+  const handleBulkDelete = async () => {
+    if (selectedAds.length === 0) return;
+
+    if (!confirm(`Are you sure you want to delete ${selectedAds.length} ad(s)?`)) {
+      return;
+    }
+
+    try {
+      await Promise.all(selectedAds.map((id) => deleteAd(id)));
+      selectedAds.forEach((id) => removeAd(id));
+      toast.success(`Deleted ${selectedAds.length} ad(s)`);
+      clearSelection();
+      loadAds();
+    } catch (error: any) {
+      toast.error("Failed to delete some ads");
+    }
+  };
+
+  const handlePageChange = (newOffset: number) => {
+    setOffset(newOffset);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  const totalPages = Math.ceil(total / limit);
+  const currentPage = Math.floor(offset / limit) + 1;
+
+  return (
+    <div className="min-h-screen pb-12">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-cyan-50 to-pink-50 py-12 mb-8">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="text-center animate-fade-in">
+            <h1 className="text-4xl md:text-5xl font-extrabold mb-4">
+              <span className="gradient-text">Gallery</span>
+            </h1>
+            <p className="text-lg text-gray-600">
+              {total} {total === 1 ? "ad" : "ads"} total
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="mb-8">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+            {selectedAds.length > 0 && (
+              <>
+                <Button variant="outline" size="sm" onClick={clearSelection}>
+                  <Square className="h-4 w-4 mr-1" />
+                  Deselect ({selectedAds.length})
+                </Button>
+                <Button variant="danger" size="sm" onClick={handleBulkDelete}>
+                  <Trash2 className="h-4 w-4 mr-1" />
+                  Delete Selected
+                </Button>
+              </>
+            )}
+            {selectedAds.length === 0 && ads.length > 0 && (
+              <Button variant="outline" size="sm" onClick={selectAll}>
+                <CheckSquare className="h-4 w-4 mr-1" />
+                Select All
+              </Button>
+            )}
+          </div>
+        </div>
+        </div>
+
+        <FilterBar filters={filters} onFiltersChange={setFilters} />
+
+      <div className="mt-6">
+        <GalleryGrid
+          ads={ads}
+          selectedAds={selectedAds}
+          onAdSelect={toggleAdSelection}
+          isLoading={isLoading}
+        />
+      </div>
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="mt-8 flex items-center justify-center space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handlePageChange(Math.max(0, offset - limit))}
+              disabled={offset === 0}
+            >
+              Previous
+            </Button>
+            <span className="text-sm text-gray-600">
+              Page {currentPage} of {totalPages}
+            </span>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handlePageChange(offset + limit)}
+              disabled={offset + limit >= total}
+            >
+              Next
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/app/generate/batch/page.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import React, { useState } from "react";
+import { BatchForm } from "@/components/generation/BatchForm";
+import { ProgressBar } from "@/components/ui/ProgressBar";
+import { Card, CardContent } from "@/components/ui/Card";
+import { generateBatch } from "@/lib/api/endpoints";
+import { toast } from "react-hot-toast";
+import { AdPreview } from "@/components/generation/AdPreview";
+import { Sparkles } from "lucide-react";
+import type { Niche, GenerateResponse } from "@/types/api";
+
+export default function BatchGeneratePage() {
+  const [results, setResults] = useState<GenerateResponse[]>([]);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handleGenerate = async (data: { niche: Niche; count: number; images_per_ad: number; image_model?: string | null }) => {
+    setResults([]);
+    setIsGenerating(true);
+    setProgress(0);
+    setCurrentIndex(0);
+
+    // Estimate time per ad (roughly 30-60 seconds per ad)
+    const estimatedTimePerAd = 45; // seconds
+    const totalEstimatedTime = data.count * estimatedTimePerAd;
+    let elapsedTime = 0;
+    const progressInterval = 500; // Update every 500ms
+
+    // Start progress simulation
+    const progressIntervalId = setInterval(() => {
+      elapsedTime += progressInterval / 1000; // Convert to seconds
+      // Calculate progress: start at 5%, reach 90% by estimated time
+      const progress = Math.min(90, 5 + (elapsedTime / totalEstimatedTime) * 85);
+      setProgress(progress);
+    }, progressInterval);
+
+    try {
+      const result = await generateBatch(data);
+      clearInterval(progressIntervalId);
+      setResults(result.ads);
+      setProgress(100);
+      toast.success(`Successfully generated ${result.count} ads!`);
+    } catch (error: any) {
+      clearInterval(progressIntervalId);
+      setProgress(0);
+      toast.error(error.message || "Failed to generate batch");
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen pb-12">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-cyan-50 to-pink-50 py-12 mb-8">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="text-center animate-fade-in">
+            <h1 className="text-4xl md:text-5xl font-extrabold mb-4">
+              <span className="gradient-text">Batch</span>
+              <span className="text-gray-900"> Generation</span>
+            </h1>
+            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+              Generate multiple ads at once for testing
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Left Column - Form */}
+        <div className="lg:col-span-1">
+          <BatchForm onSubmit={handleGenerate} isLoading={isGenerating} />
+          
+          {isGenerating && (
+            <Card variant="glass" className="mt-6 animate-scale-in">
+              <CardContent className="pt-6">
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-3">
+                      <div className="relative">
+                        <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full animate-ping opacity-20"></div>
+                        <div className="relative bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full p-2">
+                          <Sparkles className="h-5 w-5 text-white animate-pulse" />
+                        </div>
+                      </div>
+                      <div>
+                        <p className="font-semibold text-gray-900">Generating Batch Ads</p>
+                        <p className="text-sm text-gray-600">Creating multiple ad variations...</p>
+                      </div>
+                    </div>
+                  </div>
+                  <ProgressBar
+                    progress={progress}
+                    label="Batch Generation Progress"
+                    showPercentage={true}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+
+        {/* Right Column - Results */}
+        <div className="lg:col-span-2">
+          {results.length > 0 && (
+            <div className="space-y-6">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-semibold text-gray-900">
+                  Generated Ads ({results.length})
+                </h2>
+                <div className="flex space-x-2">
+                  {results.map((_, index) => (
+                    <button
+                      key={index}
+                      onClick={() => setCurrentIndex(index)}
+                      className={`px-3 py-1 rounded text-sm ${
+                        currentIndex === index
+                          ? "bg-blue-600 text-white"
+                          : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+                      }`}
+                    >
+                      {index + 1}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              
+              {results[currentIndex] && (
+                <AdPreview ad={results[currentIndex]} />
+              )}
+            </div>
+          )}
+
+          {!isGenerating && results.length === 0 && (
+            <Card variant="glass" className="text-center py-16">
+              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 mb-4">
+                <Sparkles className="h-8 w-8 text-white" />
+              </div>
+              <p className="text-gray-500 text-lg">Fill out the form and click "Generate Batch" to create multiple ads</p>
+            </Card>
+          )}
+        </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/generate/matrix/page.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import React, { useState } from "react";
+import { AngleSelector } from "@/components/matrix/AngleSelector";
+import { ConceptSelector } from "@/components/matrix/ConceptSelector";
+import { GenerationForm } from "@/components/generation/GenerationForm";
+import { GenerationProgressComponent } from "@/components/generation/GenerationProgress";
+import { AdPreview } from "@/components/generation/AdPreview";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import { Button } from "@/components/ui/Button";
+import { generateMatrixAd } from "@/lib/api/endpoints";
+import { Sparkles } from "lucide-react";
+import { useGenerationStore } from "@/store/generationStore";
+import { useMatrixStore } from "@/store/matrixStore";
+import { toast } from "react-hot-toast";
+import { IMAGE_MODELS } from "@/lib/constants/models";
+import type { Niche, MatrixGenerateResponse, AngleInfo, ConceptInfo } from "@/types/api";
+import type { GenerationProgress } from "@/types";
+
+export default function MatrixGeneratePage() {
+  const {
+    currentGeneration,
+    progress,
+    isGenerating,
+    setCurrentGeneration,
+    setProgress,
+    setIsGenerating,
+    setError,
+    reset,
+  } = useGenerationStore();
+
+  const { selectedAngle, selectedConcept, setSelectedAngle, setSelectedConcept } = useMatrixStore();
+
+  const [niche, setNiche] = useState<Niche>("home_insurance");
+  const [numImages, setNumImages] = useState(1);
+  const [imageModel, setImageModel] = useState<string | null>(null);
+
+  const handleGenerate = async () => {
+    if (!selectedAngle || !selectedConcept) {
+      toast.error("Please select both an angle and a concept");
+      return;
+    }
+
+    reset();
+    setIsGenerating(true);
+    setProgress({
+      step: "copy",
+      progress: 10,
+      message: "Generating ad with selected angle and concept...",
+    });
+
+    try {
+      const result = await generateMatrixAd({
+        niche,
+        angle_key: selectedAngle.key,
+        concept_key: selectedConcept.key,
+        num_images: numImages,
+        image_model: imageModel,
+      });
+
+      setCurrentGeneration(result);
+      setProgress({
+        step: "complete",
+        progress: 100,
+        message: "Ad generated successfully!",
+      });
+
+      toast.success("Ad generated successfully!");
+    } catch (error: any) {
+      setError(error.message || "Failed to generate ad");
+      setProgress({
+        step: "error",
+        progress: 0,
+        message: error.message || "An error occurred",
+      });
+      toast.error(error.message || "Failed to generate ad");
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen pb-12">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-cyan-50 to-pink-50 py-12 mb-8">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="text-center animate-fade-in">
+            <h1 className="text-4xl md:text-5xl font-extrabold mb-4">
+              <span className="gradient-text">Matrix</span>
+              <span className="text-gray-900"> Generation</span>
+            </h1>
+            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+              Generate ads using specific angle × concept combinations
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Left Column - Selection */}
+        <div className="lg:col-span-1 space-y-6">
+          <Card variant="glass" className="animate-slide-in">
+            <CardHeader>
+              <CardTitle>Configuration</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <label className="block text-sm font-semibold text-gray-700 mb-2">Niche</label>
+                <select
+                  className="w-full px-4 py-3 rounded-xl border-2 border-gray-300 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-250"
+                  value={niche}
+                  onChange={(e) => setNiche(e.target.value as Niche)}
+                >
+                  <option value="home_insurance">Home Insurance</option>
+                  <option value="glp1">GLP-1</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold text-gray-700 mb-2">Image Model</label>
+                <select
+                  className="w-full px-4 py-3 rounded-xl border-2 border-gray-300 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-250"
+                  value={imageModel || ""}
+                  onChange={(e) => setImageModel(e.target.value || null)}
+                >
+                  {IMAGE_MODELS.map((model) => (
+                    <option key={model.value} value={model.value}>
+                      {model.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold text-gray-700 mb-2">
+                  Number of Images: <span className="text-blue-600 font-bold">{numImages}</span>
+                </label>
+                <input
+                  type="range"
+                  min="1"
+                  max="5"
+                  step="1"
+                  className="w-full accent-blue-500"
+                  value={numImages}
+                  onChange={(e) => setNumImages(Number(e.target.value))}
+                />
+                <div className="flex justify-between text-xs text-gray-500 mt-1 font-medium">
+                  <span>1</span>
+                  <span>5</span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <AngleSelector
+            onSelect={setSelectedAngle}
+            selectedAngle={selectedAngle}
+          />
+
+          <ConceptSelector
+            onSelect={setSelectedConcept}
+            selectedConcept={selectedConcept}
+            angleKey={selectedAngle?.key}
+          />
+
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-full"
+            onClick={handleGenerate}
+            isLoading={isGenerating}
+            disabled={!selectedAngle || !selectedConcept}
+          >
+            Generate Ad
+          </Button>
+
+          {isGenerating && (
+            <GenerationProgressComponent progress={progress} />
+          )}
+        </div>
+
+        {/* Right Column - Preview */}
+        <div className="lg:col-span-2">
+          {currentGeneration ? (
+            <AdPreview ad={currentGeneration} />
+          ) : (
+            <div className="text-center py-12 text-gray-500">
+              <p>Select an angle and concept, then click "Generate Ad"</p>
+            </div>
+          )}
+        </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/generate/page.tsx

@@ -0,0 +1,563 @@
+"use client";
+
+import React, { useState } from "react";
+import { GenerationForm } from "@/components/generation/GenerationForm";
+import { BatchForm } from "@/components/generation/BatchForm";
+import { ExtensiveForm } from "@/components/generation/ExtensiveForm";
+import { GenerationProgressComponent } from "@/components/generation/GenerationProgress";
+import { AdPreview } from "@/components/generation/AdPreview";
+import { AngleSelector } from "@/components/matrix/AngleSelector";
+import { ConceptSelector } from "@/components/matrix/ConceptSelector";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import { Button } from "@/components/ui/Button";
+import { ProgressBar } from "@/components/ui/ProgressBar";
+import { generateAd, generateMatrixAd, generateBatch, generateExtensiveAd } from "@/lib/api/endpoints";
+import { useGenerationStore } from "@/store/generationStore";
+import { useMatrixStore } from "@/store/matrixStore";
+import { toast } from "react-hot-toast";
+import { Sparkles, Zap, Layers, Package, Workflow } from "lucide-react";
+import { IMAGE_MODELS } from "@/lib/constants/models";
+import type { Niche, GenerateResponse } from "@/types/api";
+
+type GenerationMode = "standard" | "matrix" | "batch" | "extensive";
+
+export default function GeneratePage() {
+  const [mode, setMode] = useState<GenerationMode>("standard");
+  const [niche, setNiche] = useState<Niche>("home_insurance");
+  const [numImages, setNumImages] = useState(1);
+  const [imageModel, setImageModel] = useState<string | null>(null);
+  const [batchResults, setBatchResults] = useState<GenerateResponse[]>([]);
+  const [currentBatchIndex, setCurrentBatchIndex] = useState(0);
+  const [batchProgress, setBatchProgress] = useState(0);
+
+  const {
+    currentGeneration,
+    progress,
+    isGenerating,
+    setCurrentGeneration,
+    setProgress,
+    setIsGenerating,
+    setError,
+    reset,
+  } = useGenerationStore();
+
+  const { selectedAngle, selectedConcept, setSelectedAngle, setSelectedConcept } = useMatrixStore();
+
+  const handleStandardGenerate = async (data: { niche: Niche; num_images: number; image_model?: string | null }) => {
+    reset();
+    setIsGenerating(true);
+    setProgress({
+      step: "copy",
+      progress: 10,
+      message: "Generating ad copy...",
+    });
+
+    try {
+      // Simulate progress updates
+      let currentProgress = 20;
+      const progressInterval = setInterval(() => {
+        currentProgress = Math.min(90, currentProgress + 5);
+        setProgress({
+          step: currentProgress < 50 ? "copy" : "image",
+          progress: currentProgress,
+          message: currentProgress < 50 ? "Generating ad copy..." : "Generating images...",
+        });
+      }, 1000);
+
+      // Generate ad
+      const result = await generateAd(data);
+
+      clearInterval(progressInterval);
+
+      setProgress({
+        step: "saving",
+        progress: 90,
+        message: "Saving to database...",
+      });
+
+      setCurrentGeneration(result);
+      setProgress({
+        step: "complete",
+        progress: 100,
+        message: "Ad generated successfully!",
+      });
+
+      toast.success("Ad generated successfully!");
+    } catch (error: any) {
+      setError(error.message || "Failed to generate ad");
+      setProgress({
+        step: "error",
+        progress: 0,
+        message: error.message || "An error occurred",
+      });
+      toast.error(error.message || "Failed to generate ad");
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleMatrixGenerate = async () => {
+    if (!selectedAngle || !selectedConcept) {
+      toast.error("Please select both an angle and a concept");
+      return;
+    }
+
+    reset();
+    setIsGenerating(true);
+    setProgress({
+      step: "copy",
+      progress: 10,
+      message: "Generating ad with selected angle and concept...",
+    });
+
+    try {
+      const result = await generateMatrixAd({
+        niche,
+        angle_key: selectedAngle.key,
+        concept_key: selectedConcept.key,
+        num_images: numImages,
+        image_model: imageModel,
+      });
+
+      setCurrentGeneration(result);
+      setProgress({
+        step: "complete",
+        progress: 100,
+        message: "Ad generated successfully!",
+      });
+
+      toast.success("Ad generated successfully!");
+    } catch (error: any) {
+      setError(error.message || "Failed to generate ad");
+      setProgress({
+        step: "error",
+        progress: 0,
+        message: error.message || "An error occurred",
+      });
+      toast.error(error.message || "Failed to generate ad");
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleBatchGenerate = async (data: { niche: Niche; count: number; images_per_ad: number; image_model?: string | null }) => {
+    setBatchResults([]);
+    setIsGenerating(true);
+    setBatchProgress(0);
+    setCurrentBatchIndex(0);
+
+    // Estimate time per ad (roughly 30-60 seconds per ad)
+    const estimatedTimePerAd = 45; // seconds
+    const totalEstimatedTime = data.count * estimatedTimePerAd;
+    let elapsedTime = 0;
+    const progressInterval = 500; // Update every 500ms
+
+    // Start progress simulation
+    const progressIntervalId = setInterval(() => {
+      elapsedTime += progressInterval / 1000; // Convert to seconds
+      // Calculate progress: start at 5%, reach 90% by estimated time
+      const progress = Math.min(90, 5 + (elapsedTime / totalEstimatedTime) * 85);
+      setBatchProgress(progress);
+    }, progressInterval);
+
+    try {
+      const result = await generateBatch(data);
+      clearInterval(progressIntervalId);
+      setBatchResults(result.ads);
+      setBatchProgress(100);
+      toast.success(`Successfully generated ${result.count} ads!`);
+    } catch (error: any) {
+      clearInterval(progressIntervalId);
+      setBatchProgress(0);
+      toast.error(error.message || "Failed to generate batch");
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleExtensiveGenerate = async (data: {
+    niche: Niche;
+    target_audience: string;
+    offer: string;
+    num_images: number;
+    num_strategies: number;
+    image_model?: string | null;
+  }) => {
+    reset();
+    setIsGenerating(true);
+    setProgress({
+      step: "copy",
+      progress: 10,
+      message: "Researching psychology triggers, angles, and concepts...",
+    });
+
+    try {
+      // Simulate progress updates for extensive
+      let currentProgress = 20;
+      const progressSteps = [
+        { step: "copy" as const, progress: 20, message: "Researching psychology triggers..." },
+        { step: "copy" as const, progress: 35, message: "Retrieving marketing knowledge..." },
+        { step: "copy" as const, progress: 50, message: "Creating creative strategies..." },
+        { step: "copy" as const, progress: 70, message: "Generating image prompts and copy..." },
+        { step: "image" as const, progress: 85, message: "Generating images..." },
+      ];
+      let stepIndex = 0;
+      
+      const progressInterval = setInterval(() => {
+        if (stepIndex < progressSteps.length) {
+          setProgress(progressSteps[stepIndex]);
+          stepIndex++;
+        } else {
+          currentProgress = Math.min(95, currentProgress + 2);
+          setProgress({
+            step: "image",
+            progress: currentProgress,
+            message: "Generating images...",
+          });
+        }
+      }, 2000);
+
+      // Generate ad using extensive
+      const result = await generateExtensiveAd(data);
+
+      clearInterval(progressInterval);
+
+      setProgress({
+        step: "saving",
+        progress: 90,
+        message: "Saving to database...",
+      });
+
+      setCurrentGeneration(result);
+      setProgress({
+        step: "complete",
+        progress: 100,
+        message: "Ad generated successfully!",
+      });
+
+      toast.success("Ad generated successfully using Extensive!");
+    } catch (error: any) {
+      setError(error.message || "Failed to generate ad");
+      setProgress({
+        step: "error",
+        progress: 0,
+        message: error.message || "An error occurred",
+      });
+      toast.error(error.message || "Failed to generate ad");
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen pb-12">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-cyan-50 to-pink-50 py-12 mb-8">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="text-center animate-fade-in">
+            <h1 className="text-4xl md:text-5xl font-extrabold mb-4">
+              <span className="gradient-text">Generate</span>
+              <span className="text-gray-900"> Ad</span>
+            </h1>
+            <p className="text-lg text-gray-600 max-w-2xl mx-auto mb-6">
+              Create high-converting ad creatives using standard, matrix, batch, or Extensive generation
+            </p>
+            
+            {/* Mode Toggle */}
+            <div className="flex items-center justify-center gap-3 flex-wrap">
+              <button
+                onClick={() => setMode("standard")}
+                className={`flex items-center gap-2 px-6 py-3 rounded-xl font-semibold transition-all duration-300 ${
+                  mode === "standard"
+                    ? "bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-lg scale-105"
+                    : "bg-white/80 backdrop-blur-sm text-gray-700 hover:bg-white/90 hover:scale-105 border border-gray-200"
+                }`}
+              >
+                <Zap className="h-5 w-5" />
+                Standard
+              </button>
+              <button
+                onClick={() => setMode("matrix")}
+                className={`flex items-center gap-2 px-6 py-3 rounded-xl font-semibold transition-all duration-300 ${
+                  mode === "matrix"
+                    ? "bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-lg scale-105"
+                    : "bg-white/80 backdrop-blur-sm text-gray-700 hover:bg-white/90 hover:scale-105 border border-gray-200"
+                }`}
+              >
+                <Layers className="h-5 w-5" />
+                Matrix
+              </button>
+              <button
+                onClick={() => setMode("batch")}
+                className={`flex items-center gap-2 px-6 py-3 rounded-xl font-semibold transition-all duration-300 ${
+                  mode === "batch"
+                    ? "bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-lg scale-105"
+                    : "bg-white/80 backdrop-blur-sm text-gray-700 hover:bg-white/90 hover:scale-105 border border-gray-200"
+                }`}
+              >
+                <Package className="h-5 w-5" />
+                Batch
+              </button>
+              <button
+                onClick={() => setMode("extensive")}
+                className={`flex items-center gap-2 px-6 py-3 rounded-xl font-semibold transition-all duration-300 ${
+                  mode === "extensive"
+                    ? "bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-lg scale-105"
+                    : "bg-white/80 backdrop-blur-sm text-gray-700 hover:bg-white/90 hover:scale-105 border border-gray-200"
+                }`}
+              >
+                <Workflow className="h-5 w-5" />
+                Extensive
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Left Column - Form and Configuration */}
+          <div className="lg:col-span-1 space-y-6">
+            {mode === "standard" ? (
+              <>
+                <div className="animate-slide-in">
+                  <GenerationForm 
+                    onSubmit={handleStandardGenerate} 
+                    isLoading={isGenerating} 
+                  />
+                </div>
+                
+                {isGenerating && (
+                  <div className="animate-scale-in">
+                    <GenerationProgressComponent progress={progress} />
+                  </div>
+                )}
+              </>
+            ) : mode === "matrix" ? (
+              <>
+                <Card variant="glass" className="animate-slide-in">
+                  <CardHeader>
+                    <CardTitle>Configuration</CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div>
+                      <label className="block text-sm font-semibold text-gray-700 mb-2">Niche</label>
+                      <select
+                        className="w-full px-4 py-3 rounded-xl border-2 border-gray-300 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-250"
+                        value={niche}
+                        onChange={(e) => setNiche(e.target.value as Niche)}
+                      >
+                        <option value="home_insurance">Home Insurance</option>
+                        <option value="glp1">GLP-1</option>
+                      </select>
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-semibold text-gray-700 mb-2">Image Model</label>
+                      <select
+                        className="w-full px-4 py-3 rounded-xl border-2 border-gray-300 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-250"
+                        value={imageModel || ""}
+                        onChange={(e) => setImageModel(e.target.value || null)}
+                      >
+                        {IMAGE_MODELS.map((model) => (
+                          <option key={model.value} value={model.value}>
+                            {model.label}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-semibold text-gray-700 mb-2">
+                        Number of Variations: <span className="text-blue-600 font-bold">{numImages}</span>
+                      </label>
+                      <input
+                        type="range"
+                        min="1"
+                        max="5"
+                        step="1"
+                        className="w-full accent-blue-500"
+                        value={numImages}
+                        onChange={(e) => setNumImages(Number(e.target.value))}
+                      />
+                      <div className="flex justify-between text-xs text-gray-500 mt-1 font-medium">
+                        <span>1</span>
+                        <span>5</span>
+                      </div>
+                      <p className="text-xs text-gray-500 mt-1">
+                        Each variation will have a unique image and slight copy variations
+                      </p>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <AngleSelector
+                  onSelect={setSelectedAngle}
+                  selectedAngle={selectedAngle}
+                />
+
+                <ConceptSelector
+                  onSelect={setSelectedConcept}
+                  selectedConcept={selectedConcept}
+                  angleKey={selectedAngle?.key}
+                />
+
+                <Button
+                  variant="primary"
+                  size="lg"
+                  className="w-full"
+                  onClick={handleMatrixGenerate}
+                  isLoading={isGenerating}
+                  disabled={!selectedAngle || !selectedConcept}
+                >
+                  Generate Ad
+                </Button>
+
+                {isGenerating && (
+                  <GenerationProgressComponent progress={progress} />
+                )}
+              </>
+            ) : mode === "batch" ? (
+              <>
+                <div className="animate-slide-in">
+                  <BatchForm 
+                    onSubmit={handleBatchGenerate} 
+                    isLoading={isGenerating} 
+                  />
+                </div>
+                
+                {isGenerating && (
+                  <Card variant="glass" className="mt-6 animate-scale-in">
+                    <CardContent className="pt-6">
+                      <div className="space-y-4">
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center space-x-3">
+                            <div className="relative">
+                              <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full animate-ping opacity-20"></div>
+                              <div className="relative bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full p-2">
+                                <Sparkles className="h-5 w-5 text-white animate-pulse" />
+                              </div>
+                            </div>
+                            <div>
+                              <p className="font-semibold text-gray-900">Generating Batch Ads</p>
+                              <p className="text-sm text-gray-600">Creating multiple ad variations...</p>
+                            </div>
+                          </div>
+                        </div>
+                        <ProgressBar
+                          progress={batchProgress}
+                          label="Batch Generation Progress"
+                          showPercentage={true}
+                        />
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+              </>
+            ) : (
+              <>
+                <div className="animate-slide-in">
+                  <ExtensiveForm 
+                    onSubmit={handleExtensiveGenerate} 
+                    isLoading={isGenerating} 
+                  />
+                </div>
+                
+                {isGenerating && (
+                  <div className="animate-scale-in">
+                    <GenerationProgressComponent progress={progress} />
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+
+          {/* Right Column - Preview */}
+          <div className="lg:col-span-2">
+            {mode === "batch" && batchResults.length > 0 ? (
+              <div className="space-y-6 animate-fade-in">
+                <div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg p-6 border border-gray-200">
+                  <div className="flex items-center justify-between flex-wrap gap-4">
+                    <div>
+                      <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
+                        Generated Ads
+                      </h2>
+                      <p className="text-sm text-gray-600 mt-1">
+                        {batchResults.length} {batchResults.length === 1 ? "ad" : "ads"} created
+                      </p>
+                    </div>
+                    <div className="flex space-x-2 flex-wrap gap-2">
+                      {batchResults.map((_, index) => (
+                        <button
+                          key={index}
+                          onClick={() => setCurrentBatchIndex(index)}
+                          className={`px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-300 ${
+                            currentBatchIndex === index
+                              ? "bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-lg scale-105"
+                              : "bg-white/80 backdrop-blur-sm text-gray-700 hover:bg-white hover:scale-105 border border-gray-200 shadow-sm"
+                          }`}
+                        >
+                          {index + 1}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+                
+                {batchResults[currentBatchIndex] && (
+                  <div className="bg-gradient-to-br from-slate-50 via-blue-50/30 to-cyan-50/30 rounded-2xl p-6">
+                    <AdPreview ad={batchResults[currentBatchIndex]} />
+                  </div>
+                )}
+              </div>
+            ) : currentGeneration ? (
+              <div className="animate-fade-in bg-gradient-to-br from-slate-50 via-blue-50/30 to-cyan-50/30 rounded-2xl p-6">
+                <AdPreview ad={currentGeneration} />
+              </div>
+            ) : (
+              <Card variant="glass" className="text-center py-20 border-2 border-dashed border-gray-300">
+                <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 mb-6 shadow-lg">
+                  <Sparkles className="h-10 w-10 text-white" />
+                </div>
+                <h3 className="text-xl font-bold text-gray-800 mb-3">
+                  {mode === "standard" 
+                    ? "Ready to Generate"
+                    : mode === "matrix"
+                    ? "Select Your Combination"
+                    : mode === "batch"
+                    ? "Batch Generation Ready"
+                    : "Extensive Generation Ready"
+                  }
+                </h3>
+                <p className="text-gray-600 text-base mb-4 max-w-md mx-auto leading-relaxed">
+                  {mode === "standard" 
+                    ? "Fill out the form and click 'Generate Ad' to create your ad creative"
+                    : mode === "matrix"
+                    ? "Select an angle and concept, then click 'Generate Ad' to create your ad creative"
+                    : mode === "batch"
+                    ? "Fill out the form and click 'Generate Batch' to create multiple ads at once"
+                    : "Fill out the form with target audience and offer, then click 'Generate with Extensive'"
+                  }
+                </p>
+                <div className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue-50 to-cyan-50 rounded-xl border border-blue-200">
+                  <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
+                  <p className="text-sm text-gray-600 font-medium">
+                    {mode === "standard"
+                      ? "Uses randomized strategies for variety"
+                      : mode === "matrix"
+                      ? "Uses specific angle × concept combinations for targeted testing"
+                      : mode === "batch"
+                      ? "Generate 1-20 ads at once for comprehensive testing and variety"
+                      : "Researcher → Creative Director → Designer → Copywriter flow with knowledge retrieval"
+                    }
+                  </p>
+                </div>
+              </Card>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/globals.css

@@ -0,0 +1,244 @@
+@import "tailwindcss";
+
+:root {
+  /* Color System - Vibrant Gradients */
+  --color-primary-start: #3b82f6; /* blue-500 */
+  --color-primary-end: #06b6d4; /* cyan-500 */
+  --color-secondary-start: #fb923c; /* orange-400 */
+  --color-secondary-end: #ec4899; /* pink-500 */
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  
+  /* Background */
+  --background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+  --foreground: #111827;
+  
+  /* Glassmorphism */
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.18);
+  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);
+  
+  /* Spacing */
+  --spacing-xs: 0.25rem; /* 4px */
+  --spacing-sm: 0.5rem; /* 8px */
+  --spacing-md: 1rem; /* 16px */
+  --spacing-lg: 1.5rem; /* 24px */
+  --spacing-xl: 2rem; /* 32px */
+  --spacing-2xl: 3rem; /* 48px */
+  --spacing-3xl: 4rem; /* 64px */
+  
+  /* Border Radius */
+  --radius-sm: 0.5rem; /* 8px */
+  --radius-md: 0.75rem; /* 12px */
+  --radius-lg: 1rem; /* 16px */
+  --radius-xl: 1.5rem; /* 24px */
+  
+  /* Transitions */
+  --transition-fast: 150ms ease-out;
+  --transition-base: 250ms ease-out;
+  --transition-slow: 350ms ease-out;
+}
+
+body {
+  background: var(--background);
+  background-attachment: fixed;
+  color: var(--foreground);
+  font-family: var(--font-inter), system-ui, -apple-system, sans-serif;
+  min-height: 100vh;
+}
+
+/* Gradient Background Animation */
+@keyframes gradient-shift {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+.gradient-bg {
+  background: linear-gradient(-45deg, #3b82f6, #06b6d4, #fb923c, #ec4899);
+  background-size: 400% 400%;
+  animation: gradient-shift 15s ease infinite;
+}
+
+/* Glassmorphism Effect */
+.glass {
+  background: var(--glass-bg);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+}
+
+/* Smooth Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.5s ease-out;
+}
+
+.animate-slide-in {
+  animation: slideIn 0.4s ease-out;
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.3s ease-out;
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+/* Hover Effects */
+.hover-lift {
+  transition: transform var(--transition-base), box-shadow var(--transition-base);
+}
+
+.hover-lift:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-xl);
+}
+
+.hover-glow {
+  transition: box-shadow var(--transition-base);
+}
+
+.hover-glow:hover {
+  box-shadow: var(--shadow-glow);
+}
+
+/* Gradient Text */
+.gradient-text {
+  background: linear-gradient(135deg, var(--color-primary-start), var(--color-primary-end));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.gradient-text-secondary {
+  background: linear-gradient(135deg, var(--color-secondary-start), var(--color-secondary-end));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(135deg, var(--color-primary-start), var(--color-primary-end));
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(135deg, var(--color-primary-end), var(--color-primary-start));
+}
+
+/* Selection */
+::selection {
+  background: rgba(59, 130, 246, 0.3);
+  color: inherit;
+}
+
+/* Shimmer animation for skeleton loaders */
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.animate-shimmer {
+  animation: shimmer 2s linear infinite;
+}
+
+/* Grid pattern background */
+.bg-grid-pattern {
+  background-image: 
+    linear-gradient(to right, rgba(0,0,0,0.1) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(0,0,0,0.1) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+
+/* Slow spin animation for icons */
+@keyframes spin-slow {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin-slow {
+  animation: spin-slow 3s linear infinite;
+}
+
+/* Enhanced gradient shift for progress bar */
+@keyframes gradient-shift {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}

frontend/app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { Toaster } from "react-hot-toast";
+import { ConditionalHeader } from "@/components/layout/ConditionalHeader";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+export const metadata: Metadata = {
+  title: "Creative Breakthrough",
+  description: "Generate high-converting ad creatives for Home Insurance and GLP-1 niches",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${inter.variable} font-sans antialiased bg-gray-50`}>
+        <ConditionalHeader />
+        <main className="min-h-screen">
+        {children}
+        </main>
+        <Toaster position="top-right" />
+      </body>
+    </html>
+  );
+}

frontend/app/login/page.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Input } from "@/components/ui/Input";
+import { Button } from "@/components/ui/Button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import { useAuthStore } from "@/store/authStore";
+import { login } from "@/lib/api/endpoints";
+import { Lock, User, Rocket, AlertCircle } from "lucide-react";
+import { toast } from "react-hot-toast";
+
+const loginSchema = z.object({
+  username: z.string().min(1, "Username is required"),
+  password: z.string().min(1, "Password is required"),
+});
+
+type LoginFormData = z.infer<typeof loginSchema>;
+
+export default function LoginPage() {
+  const router = useRouter();
+  const { isAuthenticated, login: setAuth } = useAuthStore();
+  const [isLoading, setIsLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema),
+  });
+
+  // Redirect if already authenticated
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.push("/");
+    }
+  }, [isAuthenticated, router]);
+
+  const onSubmit = async (data: LoginFormData) => {
+    setIsLoading(true);
+    try {
+      const response = await login(data.username, data.password);
+      setAuth(response.token, response.username);
+      toast.success("Login successful!");
+      router.push("/");
+    } catch (error: any) {
+      const errorMessage =
+        error.response?.data?.detail || error.message || "Login failed. Please check your credentials.";
+      toast.error(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-cyan-50 to-pink-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        {/* Logo and Title */}
+        <div className="text-center animate-fade-in">
+          <div className="flex justify-center mb-4">
+            <div className="relative">
+              <Rocket className="h-16 w-16 text-blue-500 animate-bounce" />
+              <div className="absolute inset-0 bg-blue-500/20 rounded-full blur-xl"></div>
+            </div>
+          </div>
+          <h1 className="text-4xl font-extrabold mb-2">
+            <span className="gradient-text">Creative</span>
+            <span className="text-gray-900"> Breakthrough</span>
+          </h1>
+          <p className="text-gray-600 text-lg">Sign in to your account</p>
+        </div>
+
+        {/* Login Card */}
+        <Card variant="glass" className="animate-scale-in" style={{ animationDelay: "0.2s" }}>
+          <CardHeader>
+            <CardTitle className="text-2xl text-center">Login</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+              <div>
+                <Input
+                  label="Username"
+                  type="text"
+                  placeholder="Enter your username"
+                  error={errors.username?.message}
+                  {...register("username")}
+                />
+              </div>
+
+              <div>
+                <Input
+                  label="Password"
+                  type="password"
+                  placeholder="Enter your password"
+                  error={errors.password?.message}
+                  {...register("password")}
+                />
+              </div>
+
+              <Button
+                type="submit"
+                variant="primary"
+                size="lg"
+                className="w-full"
+                isLoading={isLoading}
+              >
+                Sign In
+              </Button>
+            </form>
+
+            <div className="mt-6 p-4 bg-blue-50/50 rounded-xl border border-blue-200/50">
+              <div className="flex items-start space-x-3">
+                <AlertCircle className="h-5 w-5 text-blue-600 mt-0.5 flex-shrink-0" />
+                <div className="text-sm text-blue-800">
+                  <p className="font-semibold mb-1">Note:</p>
+                  <p>Credentials are managed manually. Please contact your administrator for access.</p>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/app/matrix/angles/page.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import { Input } from "@/components/ui/Input";
+import { Select } from "@/components/ui/Select";
+import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
+import { getAllAngles } from "@/lib/api/endpoints";
+import type { AnglesResponse } from "@/types/api";
+
+export default function AnglesPage() {
+  const [angles, setAngles] = useState<AnglesResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState<string>("");
+
+  useEffect(() => {
+    loadAngles();
+  }, []);
+
+  const loadAngles = async () => {
+    try {
+      const data = await getAllAngles();
+      setAngles(data);
+    } catch (error) {
+      console.error("Failed to load angles:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="flex items-center justify-center h-64">
+          <LoadingSpinner size="lg" />
+        </div>
+      </div>
+    );
+  }
+
+  if (!angles) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="text-center py-12">
+          <p className="text-gray-500">Failed to load angles</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Filter angles
+  let filteredAngles: Array<{ category: string; angle: any }> = [];
+  
+  Object.entries(angles.categories).forEach(([catKey, catData]) => {
+    if (selectedCategory && catKey !== selectedCategory) return;
+    
+    catData.angles.forEach((angle) => {
+      if (
+        !searchTerm ||
+        angle.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        angle.trigger.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        angle.key.toLowerCase().includes(searchTerm.toLowerCase())
+      ) {
+        filteredAngles.push({ category: catData.name, angle });
+      }
+    });
+  });
+
+  const categories = Object.entries(angles.categories).map(([key, data]) => ({
+    value: key,
+    label: `${data.name} (${data.angle_count})`,
+  }));
+
+  return (
+    <div className="min-h-screen pb-12">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-cyan-50 to-pink-50 py-12 mb-8">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="text-center animate-fade-in">
+            <h1 className="text-4xl md:text-5xl font-extrabold mb-4">
+              <span className="gradient-text">Angles</span>
+            </h1>
+            <p className="text-lg text-gray-600">
+              Browse all {angles.total_angles} available angles
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="mb-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Input
+          placeholder="Search angles..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+        <Select
+          options={[{ value: "", label: "All Categories" }, ...categories]}
+          value={selectedCategory}
+          onChange={(e) => setSelectedCategory(e.target.value)}
+        />
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {filteredAngles.map(({ category, angle }, index) => (
+          <Card key={angle.key} variant="glass" className="animate-scale-in hover-lift" style={{ animationDelay: `${index * 0.05}s` }}>
+            <CardContent className="pt-6">
+              <div className="mb-3">
+                <span className="text-xs font-bold px-3 py-1 bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-full">
+                  {category}
+                </span>
+              </div>
+              <h3 className="font-bold text-gray-900 mb-2 text-lg">{angle.name}</h3>
+              <p className="text-sm text-gray-600 mb-3">{angle.trigger}</p>
+              {angle.example && (
+                <p className="text-xs text-gray-500 italic mb-3">"{angle.example}"</p>
+              )}
+              <p className="text-xs text-gray-400 font-mono">{angle.key}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {filteredAngles.length === 0 && (
+        <div className="text-center py-12">
+          <p className="text-gray-500">No angles found matching your filters</p>
+        </div>
+      )}
+      </div>
+    </div>
+  );
+}

frontend/app/matrix/concepts/page.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import { Input } from "@/components/ui/Input";
+import { Select } from "@/components/ui/Select";
+import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
+import { getAllConcepts } from "@/lib/api/endpoints";
+import type { ConceptsResponse } from "@/types/api";
+
+export default function ConceptsPage() {
+  const [concepts, setConcepts] = useState<ConceptsResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState<string>("");
+
+  useEffect(() => {
+    loadConcepts();
+  }, []);
+
+  const loadConcepts = async () => {
+    try {
+      const data = await getAllConcepts();
+      setConcepts(data);
+    } catch (error) {
+      console.error("Failed to load concepts:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="flex items-center justify-center h-64">
+          <LoadingSpinner size="lg" />
+        </div>
+      </div>
+    );
+  }
+
+  if (!concepts) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="text-center py-12">
+          <p className="text-gray-500">Failed to load concepts</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Filter concepts
+  let filteredConcepts: Array<{ category: string; concept: any }> = [];
+  
+  Object.entries(concepts.categories).forEach(([catKey, catData]) => {
+    if (selectedCategory && catKey !== selectedCategory) return;
+    
+    catData.concepts.forEach((concept) => {
+      if (
+        !searchTerm ||
+        concept.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        concept.structure.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        concept.key.toLowerCase().includes(searchTerm.toLowerCase())
+      ) {
+        filteredConcepts.push({ category: catData.name, concept });
+      }
+    });
+  });
+
+  const categories = Object.entries(concepts.categories).map(([key, data]) => ({
+    value: key,
+    label: `${data.name} (${data.concept_count})`,
+  }));
+
+  return (
+    <div className="min-h-screen pb-12">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-cyan-50 to-pink-50 py-12 mb-8">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="text-center animate-fade-in">
+            <h1 className="text-4xl md:text-5xl font-extrabold mb-4">
+              <span className="gradient-text">Concepts</span>
+            </h1>
+            <p className="text-lg text-gray-600">
+              Browse all {concepts.total_concepts} available concepts
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="mb-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Input
+          placeholder="Search concepts..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+        <Select
+          options={[{ value: "", label: "All Categories" }, ...categories]}
+          value={selectedCategory}
+          onChange={(e) => setSelectedCategory(e.target.value)}
+        />
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {filteredConcepts.map(({ category, concept }, index) => (
+          <Card key={concept.key} variant="glass" className="animate-scale-in hover-lift" style={{ animationDelay: `${index * 0.05}s` }}>
+            <CardContent className="pt-6">
+              <div className="mb-3">
+                <span className="text-xs font-bold px-3 py-1 bg-gradient-to-r from-cyan-500 to-pink-600 text-white rounded-full">
+                  {category}
+                </span>
+              </div>
+              <h3 className="font-bold text-gray-900 mb-2 text-lg">{concept.name}</h3>
+              <p className="text-sm text-gray-600 mb-2">{concept.structure}</p>
+              <p className="text-xs text-gray-500 mb-3">{concept.visual}</p>
+              <p className="text-xs text-gray-400 font-mono">{concept.key}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {filteredConcepts.length === 0 && (
+        <div className="text-center py-12">
+          <p className="text-gray-500">No concepts found matching your filters</p>
+        </div>
+      )}
+      </div>
+    </div>
+  );
+}

frontend/app/matrix/page.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
+import { Button } from "@/components/ui/Button";
+import { Layers, Search, TestTube, Sparkles } from "lucide-react";
+
+export default function MatrixPage() {
+  return (
+    <div className="min-h-screen pb-12">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-cyan-50 to-pink-50 py-12 mb-8">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="text-center animate-fade-in">
+            <h1 className="text-4xl md:text-5xl font-extrabold mb-4">
+              <span className="gradient-text">Matrix</span>
+              <span className="text-gray-900"> System</span>
+            </h1>
+            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+              Explore the Angle × Concept matrix for systematic ad generation
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <Card variant="glass" className="animate-scale-in" style={{ animationDelay: "0.1s" }}>
+            <CardHeader>
+              <div className="p-3 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 w-fit mb-3">
+                <Layers className="h-6 w-6 text-white" />
+              </div>
+              <CardTitle>Generate with Matrix</CardTitle>
+              <CardDescription>
+                Select specific angle and concept combinations
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Link href="/generate/matrix">
+                <Button variant="primary" className="w-full group">
+                  <Sparkles className="h-4 w-4 mr-2 group-hover:rotate-12 transition-transform duration-300" />
+                  Generate Ad
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
+
+          <Card variant="glass" className="animate-scale-in" style={{ animationDelay: "0.2s" }}>
+            <CardHeader>
+              <div className="p-3 rounded-xl bg-gradient-to-br from-cyan-500 to-pink-600 w-fit mb-3">
+                <Search className="h-6 w-6 text-white" />
+              </div>
+              <CardTitle>Browse Angles</CardTitle>
+              <CardDescription>
+                Explore all 100 available angles
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Link href="/matrix/angles">
+                <Button variant="outline" className="w-full">View Angles</Button>
+              </Link>
+            </CardContent>
+          </Card>
+
+          <Card variant="glass" className="animate-scale-in" style={{ animationDelay: "0.3s" }}>
+            <CardHeader>
+              <div className="p-3 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 w-fit mb-3">
+                <Search className="h-6 w-6 text-white" />
+              </div>
+              <CardTitle>Browse Concepts</CardTitle>
+              <CardDescription>
+                Explore all 100 available concepts
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Link href="/matrix/concepts">
+                <Button variant="outline" className="w-full">View Concepts</Button>
+              </Link>
+            </CardContent>
+          </Card>
+
+          <Card variant="glass" className="md:col-span-2 lg:col-span-3 animate-scale-in" style={{ animationDelay: "0.4s" }}>
+            <CardHeader>
+              <div className="p-3 rounded-xl bg-gradient-to-br from-orange-500 to-pink-600 w-fit mb-3">
+                <TestTube className="h-6 w-6 text-white" />
+              </div>
+              <CardTitle>Testing Matrix Builder</CardTitle>
+              <CardDescription>
+                Generate systematic testing matrices for optimization
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Link href="/matrix/testing">
+                <Button variant="secondary" className="w-full group">
+                  <TestTube className="h-4 w-4 mr-2 group-hover:rotate-12 transition-transform duration-300" />
+                  Build Testing Matrix
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/matrix/testing/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import React from "react";
+import { TestingMatrixBuilder } from "@/components/matrix/TestingMatrixBuilder";
+
+export default function TestingMatrixPage() {
+  return (
+    <div className="min-h-screen pb-12">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-cyan-50 to-pink-50 py-12 mb-8">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="text-center animate-fade-in">
+            <h1 className="text-4xl md:text-5xl font-extrabold mb-4">
+              <span className="gradient-text">Testing Matrix</span>
+              <span className="text-gray-900"> Builder</span>
+            </h1>
+            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+              Create systematic testing matrices for ad optimization
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <TestingMatrixBuilder />
+      </div>
+    </div>
+  );
+}

frontend/app/page.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import React, { useEffect, useState, memo, useCallback } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import { Button } from "@/components/ui/Button";
+import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
+import { getDbStats, listAds } from "@/lib/api/endpoints";
+import { formatRelativeDate, formatNiche, getImageUrl, getImageUrlFallback } from "@/lib/utils/formatters";
+import { Home, Sparkles, Grid, TrendingUp, Database } from "lucide-react";
+import type { DbStatsResponse, AdCreativeDB } from "@/types/api";
+
+// Component for dashboard ad cards with image error handling
+const DashboardAdCard = memo(function DashboardAdCard({ 
+  ad, 
+  initialImageSrc, 
+  fallback, 
+  index 
+}: { 
+  ad: AdCreativeDB; 
+  initialImageSrc: string | null; 
+  fallback: string | null;
+  index: number;
+}) {
+  const [imageSrc, setImageSrc] = useState<string | null>(initialImageSrc);
+  const [imageError, setImageError] = useState(false);
+
+  const handleImageError = useCallback(() => {
+    if (!imageError && fallback && imageSrc === initialImageSrc) {
+      setImageSrc(fallback);
+      setImageError(true);
+    } else {
+      setImageSrc(null);
+    }
+  }, [imageError, fallback, imageSrc, initialImageSrc]);
+
+  return (
+    <Link
+      href={`/gallery/${ad.id}`}
+      className="block group animate-scale-in"
+      style={{ animationDelay: `${index * 0.1}s` }}
+    >
+      <Card variant="elevated" className="h-full overflow-hidden">
+        <CardContent className="p-0">
+          {(imageSrc || ad.image_filename || ad.image_url) && (
+            <div className="aspect-video bg-gradient-to-br from-gray-100 to-gray-200 rounded-t-2xl overflow-hidden relative flex items-center justify-center">
+              {imageSrc ? (
+                <Image
+                  src={imageSrc}
+                  alt={ad.headline}
+                  fill
+                  className="object-contain group-hover:scale-105 transition-transform duration-500"
+                  onError={handleImageError}
+                  loading="lazy"
+                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                  unoptimized={imageSrc.startsWith('http://') || imageSrc.includes('r2.cloudflarestorage.com') || imageSrc.includes('replicate.delivery')}
+                />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center">
+                  <div className="text-center text-gray-400">
+                    <svg className="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    </svg>
+                    <p className="text-xs">Image unavailable</p>
+                  </div>
+                </div>
+              )}
+              <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+            </div>
+          )}
+          <div className="p-5">
+            <div className="flex items-center justify-between mb-3">
+              <span className="text-xs font-bold px-3 py-1 bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-full">
+                {formatNiche(ad.niche)}
+              </span>
+              <span className="text-xs text-gray-500 font-medium">
+                {formatRelativeDate(ad.created_at)}
+              </span>
+            </div>
+            <h3 className="font-bold text-gray-900 line-clamp-2 mb-2 group-hover:text-blue-600 transition-colors">
+              {ad.headline}
+            </h3>
+            {ad.title && (
+              <p className="text-sm text-gray-600 line-clamp-1">
+                {ad.title}
+              </p>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+});
+
+export default function Dashboard() {
+  const [stats, setStats] = useState<DbStatsResponse | null>(null);
+  const [recentAds, setRecentAds] = useState<AdCreativeDB[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        // Load stats
+        const statsData = await getDbStats();
+        setStats(statsData);
+
+        // Load recent ads
+        const adsData = await listAds({ limit: 6 });
+        setRecentAds(adsData.ads);
+      } catch (error) {
+        console.error("Error loading dashboard data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadData();
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="flex items-center justify-center h-64">
+          <LoadingSpinner size="lg" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen pb-12">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-cyan-50 to-pink-50 py-16 mb-12">
+        <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="text-center animate-fade-in">
+            <h1 className="text-5xl md:text-6xl font-extrabold mb-4">
+              <span className="gradient-text">Creative</span>
+              <span className="text-gray-900"> Breakthrough</span>
+          </h1>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              Create high-converting ad creatives for Home Insurance and GLP-1 niches with AI-powered generation
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Stats Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+          <Card variant="glass" className="animate-scale-in" style={{ animationDelay: "0.1s" }}>
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-semibold text-gray-600 mb-1">Total Ads</p>
+                  <p className="text-3xl font-bold text-gray-900">
+                    {stats?.total_ads ?? 0}
+                  </p>
+                </div>
+                <div className="p-3 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 shadow-lg">
+                  <Database className="h-8 w-8 text-white" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card variant="glass" className="animate-scale-in" style={{ animationDelay: "0.2s" }}>
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-semibold text-gray-600 mb-1">Home Insurance</p>
+                  <p className="text-3xl font-bold text-gray-900">
+                    {stats?.by_niche?.home_insurance ?? 0}
+                  </p>
+                </div>
+                <div className="p-3 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 shadow-lg">
+                  <Home className="h-8 w-8 text-white" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card variant="glass" className="animate-scale-in" style={{ animationDelay: "0.3s" }}>
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-semibold text-gray-600 mb-1">GLP-1</p>
+                  <p className="text-3xl font-bold text-gray-900">
+                    {stats?.by_niche?.glp1 ?? 0}
+                  </p>
+                </div>
+                <div className="p-3 rounded-xl bg-gradient-to-br from-cyan-500 to-pink-600 shadow-lg">
+                  <TrendingUp className="h-8 w-8 text-white" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Quick Actions */}
+        <Card variant="glass" className="mb-8 animate-fade-in">
+          <CardHeader>
+            <CardTitle>Quick Actions</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Link href="/generate">
+                <Button variant="primary" size="lg" className="w-full group">
+                  <Sparkles className="h-5 w-5 mr-2 group-hover:rotate-12 transition-transform duration-300" />
+                  Generate New Ad
+                </Button>
+              </Link>
+              <Link href="/gallery">
+                <Button variant="secondary" size="lg" className="w-full group">
+                  <Grid className="h-5 w-5 mr-2 group-hover:rotate-12 transition-transform duration-300" />
+                  View Gallery
+                </Button>
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Recent Ads */}
+        <Card variant="glass" className="animate-fade-in">
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <CardTitle>Recent Ads</CardTitle>
+              <Link href="/gallery">
+                <Button variant="ghost" size="sm">View All</Button>
+              </Link>
+            </div>
+          </CardHeader>
+          <CardContent>
+            {recentAds.length === 0 ? (
+              <div className="text-center py-16">
+                <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 mb-4">
+                  <Sparkles className="h-10 w-10 text-white" />
+                </div>
+                <p className="text-gray-500 text-lg mb-4">No ads generated yet</p>
+                <Link href="/generate">
+                  <Button variant="primary">
+                    Generate Your First Ad
+                  </Button>
+                </Link>
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {recentAds.map((ad, index) => {
+                  const { primary, fallback } = getImageUrlFallback(ad.image_url, ad.image_filename);
+                  const initialSrc = primary || fallback;
+
+                  return (
+                    <DashboardAdCard
+                      key={ad.id}
+                      ad={ad}
+                      initialImageSrc={initialSrc}
+                      fallback={fallback}
+                      index={index}
+                    />
+                  );
+                })}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/components/gallery/AdCard.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import React, { useState, memo } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { Card, CardContent } from "@/components/ui/Card";
+import { formatRelativeDate, formatNiche, getImageUrl, getImageUrlFallback, truncateText } from "@/lib/utils/formatters";
+import type { AdCreativeDB } from "@/types/api";
+
+interface AdCardProps {
+  ad: AdCreativeDB;
+  isSelected?: boolean;
+  onSelect?: (adId: string) => void;
+}
+
+export const AdCard: React.FC<AdCardProps> = memo(({
+  ad,
+  isSelected = false,
+  onSelect,
+}) => {
+  const { primary, fallback } = getImageUrlFallback(ad.image_url, ad.image_filename);
+  const [imageSrc, setImageSrc] = useState<string | null>(primary || fallback);
+  const [imageError, setImageError] = useState(false);
+
+  const handleImageError = () => {
+    // Try fallback if primary failed
+    if (!imageError && fallback && imageSrc === primary) {
+      setImageSrc(fallback);
+      setImageError(true);
+    } else {
+      // Both failed, show placeholder
+      setImageSrc(null);
+    }
+  };
+
+  return (
+    <Card
+      variant={isSelected ? "glass" : "elevated"}
+      className={`cursor-pointer transition-all duration-300 group ${
+        isSelected ? "ring-4 ring-blue-500 ring-opacity-50 scale-105" : "hover:scale-105"
+      }`}
+      onClick={() => onSelect?.(ad.id)}
+    >
+      <Link href={`/gallery/${ad.id}`} onClick={(e) => e.stopPropagation()}>
+        <CardContent className="p-0">
+          {(imageSrc || ad.image_filename || ad.image_url) && (
+            <div className="aspect-video bg-gradient-to-br from-gray-100 to-gray-200 rounded-t-2xl overflow-hidden relative flex items-center justify-center">
+              {imageSrc ? (
+                <Image
+                  src={imageSrc}
+                  alt={ad.headline}
+                  fill
+                  className="object-contain group-hover:scale-105 transition-transform duration-500"
+                  onError={handleImageError}
+                  loading="lazy"
+                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                  unoptimized={imageSrc.startsWith('http://') || imageSrc.includes('r2.cloudflarestorage.com') || imageSrc.includes('replicate.delivery')}
+                />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center">
+                  <div className="text-center text-gray-400">
+                    <svg className="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    </svg>
+                    <p className="text-xs">Image unavailable</p>
+                  </div>
+                </div>
+              )}
+              <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+            </div>
+          )}
+          <div className="p-5">
+            <div className="flex items-center justify-between mb-3">
+              <span className="text-xs font-bold px-3 py-1 bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-full">
+                {formatNiche(ad.niche)}
+              </span>
+              <span className="text-xs text-gray-500 font-medium">
+                {formatRelativeDate(ad.created_at)}
+              </span>
+            </div>
+            <h3 className="font-bold text-gray-900 line-clamp-2 mb-2 group-hover:text-blue-600 transition-colors">
+              {truncateText(ad.headline, 60)}
+            </h3>
+            {ad.title && (
+              <p className="text-sm text-gray-600 line-clamp-1">
+                {ad.title}
+              </p>
+            )}
+            {ad.psychological_angle && (
+              <p className="text-xs text-gray-500 mt-2 line-clamp-1">
+                {truncateText(ad.psychological_angle, 50)}
+              </p>
+            )}
+          </div>
+        </CardContent>
+      </Link>
+    </Card>
+  );
+}, (prevProps, nextProps) => {
+  // Only re-render if ad data or selection state changes
+  return (
+    prevProps.ad.id === nextProps.ad.id &&
+    prevProps.isSelected === nextProps.isSelected &&
+    prevProps.ad.image_url === nextProps.ad.image_url
+  );
+});
+
+AdCard.displayName = "AdCard";

frontend/components/gallery/FilterBar.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import React from "react";
+import { Input } from "@/components/ui/Input";
+import { Select } from "@/components/ui/Select";
+import { Button } from "@/components/ui/Button";
+import { Card } from "@/components/ui/Card";
+import { X } from "lucide-react";
+import type { AdFilters } from "@/types";
+
+interface FilterBarProps {
+  filters: AdFilters;
+  onFiltersChange: (filters: Partial<AdFilters>) => void;
+}
+
+export const FilterBar: React.FC<FilterBarProps> = ({
+  filters,
+  onFiltersChange,
+}) => {
+  const handleFilterChange = (key: keyof AdFilters, value: string | null) => {
+    onFiltersChange({ [key]: value || null });
+  };
+
+  const clearFilters = () => {
+    onFiltersChange({
+      niche: null,
+      generation_method: null,
+      search: null,
+      date_from: null,
+      date_to: null,
+    });
+  };
+
+  const hasActiveFilters = Object.values(filters).some((v) => v !== null && v !== undefined);
+
+  return (
+    <Card variant="glass">
+      <div className="p-6 space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-bold gradient-text">Filters</h3>
+          {hasActiveFilters && (
+            <Button variant="ghost" size="sm" onClick={clearFilters} className="group">
+              <X className="h-4 w-4 mr-1 group-hover:rotate-90 transition-transform duration-300" />
+              Clear
+            </Button>
+          )}
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Input
+            placeholder="Search by headline or title..."
+            value={filters.search || ""}
+            onChange={(e) => handleFilterChange("search", e.target.value)}
+          />
+
+          <Select
+            options={[
+              { value: "", label: "All Niches" },
+              { value: "home_insurance", label: "Home Insurance" },
+              { value: "glp1", label: "GLP-1" },
+            ]}
+            value={filters.niche || ""}
+            onChange={(e) => handleFilterChange("niche", e.target.value || null)}
+          />
+
+          <Select
+            options={[
+              { value: "", label: "All Methods" },
+              { value: "original", label: "Original" },
+              { value: "angle_concept_matrix", label: "Matrix" },
+              { value: "extensive", label: "Extensive" },
+            ]}
+            value={filters.generation_method || ""}
+            onChange={(e) => handleFilterChange("generation_method", e.target.value || null)}
+          />
+        </div>
+      </div>
+    </Card>
+  );
+};

frontend/components/gallery/GalleryGrid.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import React from "react";
+import { AdCard } from "./AdCard";
+import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
+import type { AdCreativeDB } from "@/types/api";
+
+interface GalleryGridProps {
+  ads: AdCreativeDB[];
+  selectedAds: string[];
+  onAdSelect: (adId: string) => void;
+  isLoading?: boolean;
+}
+
+export const GalleryGrid: React.FC<GalleryGridProps> = ({
+  ads,
+  selectedAds,
+  onAdSelect,
+  isLoading = false,
+}) => {
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  if (ads.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-gray-500 mb-4">No ads found</p>
+        <p className="text-sm text-gray-400">Try adjusting your filters or generate a new ad</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+      {ads.map((ad) => (
+        <AdCard
+          key={ad.id}
+          ad={ad}
+          isSelected={selectedAds.includes(ad.id)}
+          onSelect={onAdSelect}
+        />
+      ))}
+    </div>
+  );
+};

frontend/components/generation/AdPreview.tsx

@@ -0,0 +1,357 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button } from "@/components/ui/Button";
+import { Download, Copy } from "lucide-react";
+import { downloadImage, copyToClipboard } from "@/lib/utils/export";
+import { getImageUrl, getImageUrlFallback } from "@/lib/utils/formatters";
+import { toast } from "react-hot-toast";
+import type { GenerateResponse, MatrixGenerateResponse } from "@/types/api";
+
+interface AdPreviewProps {
+  ad: GenerateResponse | MatrixGenerateResponse;
+}
+
+export const AdPreview: React.FC<AdPreviewProps> = ({ ad }) => {
+  const [imageErrors, setImageErrors] = useState<Record<number, boolean>>({});
+
+  const handleDownloadImage = async (imageUrl: string | null | undefined, filename: string | null | undefined) => {
+    if (!imageUrl && !filename) {
+      toast.error("No image URL available");
+      return;
+    }
+    
+    try {
+      const url = getImageUrl(imageUrl, filename);
+      if (url) {
+        await downloadImage(url, filename || `ad-${ad.id}.png`);
+        toast.success("Image downloaded");
+      }
+    } catch (error) {
+      toast.error("Failed to download image");
+    }
+  };
+
+  const handleCopyText = async (text: string, label: string) => {
+    try {
+      await copyToClipboard(text);
+      toast.success(`${label} copied`);
+    } catch (error) {
+      toast.error("Failed to copy");
+    }
+  };
+
+  const handleImageError = (index: number, image: { image_url?: string | null; filename?: string | null }) => {
+    if (!imageErrors[index]) {
+      const { fallback } = getImageUrlFallback(image.image_url, image.filename);
+      if (fallback) {
+        setImageErrors((prev) => ({ ...prev, [index]: true }));
+      }
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Images */}
+      {ad.images && ad.images.length > 0 && (
+        <div className="space-y-4">
+          {ad.images.length === 1 ? (
+            // Single image - full width with better styling
+            <div className="bg-white rounded-2xl shadow-lg shadow-blue-100/50 overflow-hidden ring-1 ring-blue-100">
+              {(() => {
+                const image = ad.images[0];
+                const { primary, fallback } = getImageUrlFallback(image.image_url, image.filename);
+                const imageUrl = imageErrors[0] ? fallback : (primary || fallback);
+                
+                return imageUrl ? (
+                  <div className="relative group">
+                    <img
+                      src={imageUrl}
+                      alt={ad.headline || "Ad image"}
+                      className="w-full h-auto"
+                      onError={() => handleImageError(0, image)}
+                    />
+                    <div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <div className="relative group/btn">
+                        <Button
+                          variant="primary"
+                          size="sm"
+                          onClick={() => handleDownloadImage(image.image_url, image.filename)}
+                          className="shadow-lg"
+                        >
+                          <Download className="h-4 w-4" />
+                        </Button>
+                        <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover/btn:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
+                          Download Image
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl aspect-square flex items-center justify-center ring-1 ring-blue-100">
+                    <div className="text-blue-300 text-center">
+                      <svg className="w-16 h-16 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                      </svg>
+                      <p className="text-sm">No image</p>
+                    </div>
+                  </div>
+                );
+              })()}
+              {ad.images[0].error && (
+                <div className="p-4 bg-red-50 border-t border-red-200">
+                  <p className="text-sm text-red-800">Error: {ad.images[0].error}</p>
+                </div>
+              )}
+            </div>
+          ) : (
+            // Multiple images - grid layout
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {ad.images.map((image, index) => {
+                const { primary, fallback } = getImageUrlFallback(image.image_url, image.filename);
+                const imageUrl = imageErrors[index] ? fallback : (primary || fallback);
+                
+                return (
+                  <div key={index} className="bg-white rounded-2xl shadow-lg shadow-blue-100/50 overflow-hidden ring-1 ring-blue-100">
+                    {imageUrl ? (
+                      <div className="relative group">
+                        <img
+                          src={imageUrl}
+                          alt={`Ad image ${index + 1}`}
+                          className="w-full h-auto"
+                          onError={() => handleImageError(index, image)}
+                        />
+                        <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                          <div className="relative group/btn">
+                            <Button
+                              variant="primary"
+                              size="sm"
+                              onClick={() => handleDownloadImage(image.image_url, image.filename)}
+                              className="shadow-lg"
+                            >
+                              <Download className="h-4 w-4" />
+                            </Button>
+                            <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover/btn:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
+                              Download
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="bg-gradient-to-br from-blue-50 to-cyan-50 aspect-square flex items-center justify-center">
+                        <div className="text-blue-300 text-center">
+                          <svg className="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                          </svg>
+                          <p className="text-xs">No image</p>
+                        </div>
+                      </div>
+                    )}
+                    {image.error && (
+                      <div className="p-3 bg-red-50 border-t border-red-200">
+                        <p className="text-xs text-red-800">Error: {image.error}</p>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Ad Copy Section */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Left Column - Main Copy */}
+        <div className="space-y-5">
+          {/* Title */}
+          {ad.title && (
+            <div className="bg-white rounded-2xl shadow-md p-6 border-l-4 border-indigo-500">
+              <div className="flex items-start justify-between gap-4 mb-3">
+                <h3 className="text-xs font-bold text-indigo-600 uppercase tracking-wider">Title</h3>
+                <div className="relative group">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleCopyText(ad.title!, "Title")}
+                    className="text-indigo-500 hover:bg-indigo-50"
+                  >
+                    <Copy className="h-4 w-4" />
+                  </Button>
+                  <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-indigo-600 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
+                    Copy Title
+                  </span>
+                </div>
+              </div>
+              <p className="text-lg font-semibold text-gray-800">{ad.title}</p>
+            </div>
+          )}
+
+          {/* Headline */}
+          <div className="bg-white rounded-2xl shadow-lg shadow-blue-100/30 p-6 border-l-4 border-blue-500">
+            <div className="flex items-start justify-between gap-4 mb-3">
+              <h3 className="text-xs font-bold text-blue-600 uppercase tracking-wider">Headline</h3>
+              <div className="relative group">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleCopyText(ad.headline, "Headline")}
+                  className="text-blue-500 hover:bg-blue-50"
+                >
+                  <Copy className="h-4 w-4" />
+                </Button>
+                <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-blue-600 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
+                  Copy Headline
+                </span>
+              </div>
+            </div>
+            <h1 className="text-2xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent leading-tight">
+              {ad.headline}
+            </h1>
+          </div>
+
+          {/* Primary Text */}
+          {ad.primary_text && (
+            <div className="bg-white rounded-2xl shadow-md p-6 border-l-4 border-cyan-500">
+              <div className="flex items-start justify-between gap-4 mb-3">
+                <h3 className="text-xs font-bold text-cyan-600 uppercase tracking-wider">Primary Text</h3>
+                <div className="relative group">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleCopyText(ad.primary_text!, "Primary Text")}
+                    className="text-cyan-500 hover:bg-cyan-50"
+                  >
+                    <Copy className="h-4 w-4" />
+                  </Button>
+                  <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-cyan-600 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
+                    Copy Text
+                  </span>
+                </div>
+              </div>
+              <p className="text-gray-700 whitespace-pre-line leading-relaxed">{ad.primary_text}</p>
+            </div>
+          )}
+
+          {/* Description */}
+          {ad.description && (
+            <div className="bg-white rounded-2xl shadow-md p-6 border-l-4 border-violet-500">
+              <div className="flex items-start justify-between gap-4 mb-3">
+                <h3 className="text-xs font-bold text-violet-600 uppercase tracking-wider">Description</h3>
+                <div className="relative group">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleCopyText(ad.description!, "Description")}
+                    className="text-violet-500 hover:bg-violet-50"
+                  >
+                    <Copy className="h-4 w-4" />
+                  </Button>
+                  <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-violet-600 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
+                    Copy Description
+                  </span>
+                </div>
+              </div>
+              <p className="text-gray-700 leading-relaxed">{ad.description}</p>
+            </div>
+          )}
+        </div>
+
+        {/* Right Column - Additional Info */}
+        <div className="space-y-5">
+          {/* Body Story */}
+          {ad.body_story && (
+            <div className="bg-white rounded-2xl shadow-md p-6 border-l-4 border-amber-500">
+              <div className="flex items-start justify-between gap-4 mb-3">
+                <h3 className="text-xs font-bold text-amber-600 uppercase tracking-wider">Body Story</h3>
+                <div className="relative group">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleCopyText(ad.body_story!, "Body Story")}
+                    className="text-amber-500 hover:bg-amber-50"
+                  >
+                    <Copy className="h-4 w-4" />
+                  </Button>
+                  <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-amber-600 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
+                    Copy Story
+                  </span>
+                </div>
+              </div>
+              <p className="text-gray-700 whitespace-pre-line leading-relaxed">{ad.body_story}</p>
+            </div>
+          )}
+
+          {/* CTA */}
+          {ad.cta && (
+            <div className="bg-gradient-to-r from-emerald-50 to-teal-50 rounded-2xl shadow-md p-6 border border-emerald-200">
+              <div className="flex items-start justify-between gap-4 mb-3">
+                <h3 className="text-xs font-bold text-emerald-600 uppercase tracking-wider">Call to Action</h3>
+                <div className="relative group">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleCopyText(ad.cta!, "CTA")}
+                    className="text-emerald-600 hover:bg-emerald-100"
+                  >
+                    <Copy className="h-4 w-4" />
+                  </Button>
+                  <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-emerald-600 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
+                    Copy CTA
+                  </span>
+                </div>
+              </div>
+              <p className="text-xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">{ad.cta}</p>
+            </div>
+          )}
+
+          {/* Psychological Angle */}
+          <div className="bg-gradient-to-br from-pink-50 via-purple-50 to-blue-50 rounded-2xl p-6 border border-purple-200 shadow-md">
+            <div className="flex items-start justify-between gap-4 mb-3">
+              <h3 className="text-xs font-bold text-purple-600 uppercase tracking-wider">🧠 Psychological Angle</h3>
+              <div className="relative group">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleCopyText(ad.psychological_angle, "Angle")}
+                  className="text-purple-500 hover:bg-purple-100"
+                >
+                  <Copy className="h-4 w-4" />
+                </Button>
+                <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-purple-600 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
+                  Copy Angle
+                </span>
+              </div>
+            </div>
+            <p className="text-gray-700 leading-relaxed">{ad.psychological_angle}</p>
+            {ad.why_it_works && (
+              <div className="mt-4 pt-4 border-t border-purple-200">
+                <p className="text-xs font-bold text-purple-600 uppercase tracking-wider mb-2">💡 Why It Works</p>
+                <p className="text-gray-600 text-sm leading-relaxed">{ad.why_it_works}</p>
+              </div>
+            )}
+          </div>
+
+          {/* Matrix Details */}
+          {"matrix" in ad && ad.matrix && (
+            <div className="bg-white rounded-2xl shadow-md p-6 border border-gray-200">
+              <h3 className="text-xs font-bold text-gray-600 uppercase tracking-wider mb-4">Matrix Details</h3>
+              <div className="space-y-4">
+                <div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-4 border border-blue-100">
+                  <p className="text-blue-500 text-xs font-medium mb-1">Angle</p>
+                  <p className="font-semibold text-gray-800">{ad.matrix.angle.name}</p>
+                  <p className="text-xs text-gray-500 mt-1">{ad.matrix.angle.trigger}</p>
+                </div>
+                <div className="bg-gradient-to-br from-violet-50 to-purple-50 rounded-xl p-4 border border-violet-100">
+                  <p className="text-violet-500 text-xs font-medium mb-1">Concept</p>
+                  <p className="font-semibold text-gray-800">{ad.matrix.concept.name}</p>
+                  <p className="text-xs text-gray-500 mt-1">{ad.matrix.concept.structure}</p>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/components/generation/BatchForm.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { generateBatchSchema } from "@/lib/utils/validators";
+import { Input } from "@/components/ui/Input";
+import { Select } from "@/components/ui/Select";
+import { Button } from "@/components/ui/Button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
+import { IMAGE_MODELS } from "@/lib/constants/models";
+import type { Niche } from "@/types/api";
+
+interface BatchFormProps {
+  onSubmit: (data: { niche: Niche; count: number; images_per_ad: number; image_model?: string | null }) => Promise<void>;
+  isLoading: boolean;
+}
+
+export const BatchForm: React.FC<BatchFormProps> = ({
+  onSubmit,
+  isLoading,
+}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+  } = useForm({
+    resolver: zodResolver(generateBatchSchema),
+    defaultValues: {
+      niche: "home_insurance" as Niche,
+      count: 5,
+      images_per_ad: 1,
+      image_model: null,
+    },
+  });
+
+  const count = watch("count");
+  const imagesPerAd = watch("images_per_ad");
+
+  return (
+    <Card variant="glass">
+      <CardHeader>
+        <CardTitle>Batch Generation</CardTitle>
+        <CardDescription>
+          Generate multiple ads at once for testing and variety
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          <Select
+            label="Niche"
+            options={[
+              { value: "home_insurance", label: "Home Insurance" },
+              { value: "glp1", label: "GLP-1" },
+            ]}
+            error={errors.niche?.message}
+            {...register("niche")}
+          />
+
+          <Select
+            label="Image Model"
+            options={IMAGE_MODELS.map(model => ({ value: model.value, label: model.label }))}
+            error={errors.image_model?.message}
+            {...register("image_model")}
+          />
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Number of Ads: {count}
+            </label>
+            <input
+              type="range"
+              min="1"
+              max="20"
+              step="1"
+              className="w-full"
+              {...register("count", { valueAsNumber: true })}
+            />
+            <div className="flex justify-between text-xs text-gray-500 mt-1">
+              <span>1</span>
+              <span>20</span>
+            </div>
+            {errors.count && (
+              <p className="mt-1 text-sm text-red-600">
+                {errors.count.message}
+              </p>
+            )}
+          </div>
+
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-2">
+              Variations per Ad: <span className="text-blue-600 font-bold">{imagesPerAd}</span>
+            </label>
+            <input
+              type="range"
+              min="1"
+              max="3"
+              step="1"
+              className="w-full accent-blue-500"
+              {...register("images_per_ad", { valueAsNumber: true })}
+            />
+            <div className="flex justify-between text-xs text-gray-500 mt-1 font-medium">
+              <span>1</span>
+              <span>3</span>
+            </div>
+            <p className="text-xs text-gray-500 mt-1">
+              Each variation will have a unique image and slight copy variations
+            </p>
+            {errors.images_per_ad && (
+              <p className="mt-1 text-sm text-red-600">
+                {errors.images_per_ad.message}
+              </p>
+            )}
+          </div>
+
+          <div className="bg-gradient-to-r from-blue-50 to-cyan-50 border border-blue-200 rounded-xl p-4">
+            <p className="text-sm font-semibold text-gray-800">
+              <strong>Estimated:</strong> {count} ads × {imagesPerAd} variation(s) = {count * imagesPerAd} total variations
+            </p>
+            <p className="text-xs text-gray-600 mt-1">
+              This may take several minutes to complete
+            </p>
+          </div>
+
+          <Button
+            type="submit"
+            variant="primary"
+            size="lg"
+            isLoading={isLoading}
+            className="w-full"
+          >
+            Generate Batch
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};

frontend/components/generation/CorrectionModal.tsx

@@ -0,0 +1,352 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { X, Wand2, Image as ImageIcon, CheckCircle2, AlertCircle, Loader2, Sparkles } from "lucide-react";
+import { correctImage } from "@/lib/api/endpoints";
+import type { ImageCorrectResponse, AdCreativeDB } from "@/types/api";
+import { ProgressBar } from "@/components/ui/ProgressBar";
+import { Button } from "@/components/ui/Button";
+import { Input } from "@/components/ui/Input";
+import { Card, CardContent } from "@/components/ui/Card";
+
+interface CorrectionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  adId: string;
+  ad?: AdCreativeDB | null;
+  onSuccess?: (result: ImageCorrectResponse) => void;
+}
+
+type CorrectionStep = "idle" | "input" | "analyzing" | "correcting" | "regenerating" | "complete" | "error";
+
+export const CorrectionModal: React.FC<CorrectionModalProps> = ({
+  isOpen,
+  onClose,
+  adId,
+  ad,
+  onSuccess,
+}) => {
+  const [step, setStep] = useState<CorrectionStep>("idle");
+  const [progress, setProgress] = useState(0);
+  const [result, setResult] = useState<ImageCorrectResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [userInstructions, setUserInstructions] = useState("");
+  const [useAutoAnalyze, setUseAutoAnalyze] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setStep("input");
+      setProgress(0);
+      setResult(null);
+      setError(null);
+      setUserInstructions("");
+      setUseAutoAnalyze(false);
+    } else {
+      // Reset state when modal closes
+      setStep("idle");
+      setProgress(0);
+      setResult(null);
+      setError(null);
+      setUserInstructions("");
+      setUseAutoAnalyze(false);
+    }
+  }, [isOpen]);
+
+  const handleCorrection = async () => {
+    if (!userInstructions && !useAutoAnalyze) {
+      setError("Please specify what you want to correct or enable auto-analysis");
+      return;
+    }
+
+    setStep("analyzing");
+    setProgress(0);
+    setError(null);
+    setResult(null);
+
+    try {
+      // Simulate progress updates
+      const progressInterval = setInterval(() => {
+        setProgress((prev) => {
+          if (prev < 90) {
+            return prev + 5;
+          }
+          return prev;
+        });
+      }, 500);
+
+      setStep("analyzing");
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      setStep("correcting");
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      setStep("regenerating");
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+
+      // Actually perform the correction
+      const response = await correctImage({ 
+        image_id: adId,
+        user_instructions: userInstructions || undefined,
+        auto_analyze: useAutoAnalyze,
+      });
+
+      clearInterval(progressInterval);
+      setProgress(100);
+
+      if (response.status === "success") {
+        setStep("complete");
+        setResult(response);
+        onSuccess?.(response);
+      } else {
+        setStep("error");
+        setError(response.error || "Correction failed");
+      }
+    } catch (err: any) {
+      setStep("error");
+      setError(err.response?.data?.detail || err.message || "Failed to correct image");
+      setProgress(0);
+    }
+  };
+
+  const getStepLabel = () => {
+    switch (step) {
+      case "input":
+        return "Specify Corrections";
+      case "analyzing":
+        return "Analyzing image...";
+      case "correcting":
+        return "Generating corrections...";
+      case "regenerating":
+        return "Regenerating with nano-banana-pro...";
+      case "complete":
+        return "Correction complete!";
+      case "error":
+        return "Error occurred";
+      default:
+        return "Starting correction...";
+    }
+  };
+
+  const getStepIcon = () => {
+    switch (step) {
+      case "complete":
+        return <CheckCircle2 className="h-6 w-6 text-green-500" />;
+      case "error":
+        return <AlertCircle className="h-6 w-6 text-red-500" />;
+      default:
+        return <Loader2 className="h-6 w-6 text-blue-500 animate-spin" />;
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
+      <div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+        {/* Header */}
+        <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 rounded-t-2xl z-10">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg">
+                <Wand2 className="h-5 w-5 text-white" />
+              </div>
+              <div>
+                <h2 className="text-xl font-bold text-gray-900">Correct Image</h2>
+                <p className="text-sm text-gray-500">
+                  {step === "input" 
+                    ? "Specify what you want to correct" 
+                    : "Analyzing and correcting your ad creative"}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={onClose}
+              className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+            >
+              <X className="h-5 w-5 text-gray-500" />
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 space-y-6">
+          {/* Input Step */}
+          {step === "input" && (
+            <div className="space-y-4">
+              <Card variant="glass">
+                <CardContent className="pt-6">
+                  <div className="space-y-4">
+                    <div>
+                      <label className="block text-sm font-semibold text-gray-700 mb-2">
+                        What would you like to correct?
+                      </label>
+                      <Input
+                        type="text"
+                        placeholder="e.g., 'Fix spelling: change Save 50% to Save 60%' or 'Adjust colors to be brighter' or 'Change headline text to X'"
+                        value={userInstructions}
+                        onChange={(e) => setUserInstructions(e.target.value)}
+                        className="w-full"
+                      />
+                      <p className="text-xs text-gray-500 mt-2">
+                        Be specific about what you want to change. Only the specified changes will be made.
+                      </p>
+                    </div>
+
+                    <div className="flex items-center gap-3 pt-2 border-t border-gray-200">
+                      <input
+                        type="checkbox"
+                        id="auto-analyze"
+                        checked={useAutoAnalyze}
+                        onChange={(e) => setUseAutoAnalyze(e.target.checked)}
+                        className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                      />
+                      <label htmlFor="auto-analyze" className="text-sm text-gray-700 cursor-pointer">
+                        Or let AI automatically analyze and suggest corrections
+                      </label>
+                    </div>
+
+                    {useAutoAnalyze && (
+                      <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-800">
+                        <p className="font-semibold mb-1">Auto-Analysis Mode</p>
+                        <p>AI will analyze the image for spelling mistakes and visual issues, then suggest corrections.</p>
+                      </div>
+                    )}
+
+                    {userInstructions && (
+                      <div className="bg-green-50 border border-green-200 rounded-lg p-3 text-sm text-green-800">
+                        <p className="font-semibold mb-1">Custom Correction Mode</p>
+                        <p>Only the changes you specified will be made. The rest of the image will be preserved.</p>
+                      </div>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+
+          {/* Progress Section */}
+          {step !== "input" && step !== "complete" && step !== "error" && (
+            <div className="space-y-4">
+              <div className="flex items-center gap-4">
+                {getStepIcon()}
+                <div className="flex-1">
+                  <p className="font-semibold text-gray-900">{getStepLabel()}</p>
+                  <ProgressBar progress={progress} showPercentage={true} className="mt-2" />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Error State */}
+          {step === "error" && (
+            <div className="bg-red-50 border border-red-200 rounded-xl p-4">
+              <div className="flex items-start gap-3">
+                <AlertCircle className="h-5 w-5 text-red-500 mt-0.5" />
+                <div className="flex-1">
+                  <h3 className="font-semibold text-red-900 mb-1">Correction Failed</h3>
+                  <p className="text-sm text-red-700">{error}</p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Success State */}
+          {step === "complete" && result && (
+            <div className="space-y-4">
+              <div className="bg-green-50 border border-green-200 rounded-xl p-4">
+                <div className="flex items-center gap-3">
+                  <CheckCircle2 className="h-5 w-5 text-green-500" />
+                  <div>
+                    <h3 className="font-semibold text-green-900">Correction Complete!</h3>
+                    <p className="text-sm text-green-700">Your image has been corrected successfully</p>
+                  </div>
+                </div>
+              </div>
+
+              {result.corrected_image?.image_url && (
+                <div className="space-y-3">
+                  <h3 className="font-semibold text-gray-900">Corrected Image</h3>
+                  <img
+                    src={result.corrected_image.image_url}
+                    alt="Corrected"
+                    className="w-full rounded-lg border border-gray-200"
+                  />
+                </div>
+              )}
+
+              {result.corrections && (
+                <div className="space-y-3">
+                  {result.corrections.spelling_corrections.length > 0 && (
+                    <div>
+                      <h3 className="font-semibold text-gray-900 mb-2">Spelling Corrections</h3>
+                      <div className="space-y-2">
+                        {result.corrections.spelling_corrections.map((correction, idx) => (
+                          <div
+                            key={idx}
+                            className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-sm"
+                          >
+                            <span className="font-medium text-red-600 line-through">
+                              {correction.detected}
+                            </span>{" "}
+                            →{" "}
+                            <span className="font-medium text-green-600">
+                              {correction.corrected}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {result.corrections.visual_corrections.length > 0 && (
+                    <div>
+                      <h3 className="font-semibold text-gray-900 mb-2">Visual Improvements</h3>
+                      <div className="space-y-2">
+                        {result.corrections.visual_corrections.map((correction, idx) => (
+                          <div
+                            key={idx}
+                            className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm"
+                          >
+                            <p className="font-medium text-gray-900">{correction.issue}</p>
+                            <p className="text-gray-600 mt-1">{correction.suggestion}</p>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="sticky bottom-0 bg-gray-50 border-t border-gray-200 px-6 py-4 rounded-b-2xl">
+          <div className="flex justify-end gap-3">
+            {step === "input" && (
+              <Button 
+                onClick={handleCorrection} 
+                variant="primary"
+                disabled={!userInstructions && !useAutoAnalyze}
+              >
+                <Sparkles className="h-4 w-4 mr-2" />
+                Start Correction
+              </Button>
+            )}
+            {step === "error" && (
+              <Button onClick={() => setStep("input")} variant="primary">
+                Try Again
+              </Button>
+            )}
+            <Button
+              onClick={onClose}
+              variant={step === "complete" ? "primary" : "secondary"}
+            >
+              {step === "complete" ? "Done" : "Close"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/components/generation/ExtensiveForm.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
+import { Select } from "@/components/ui/Select";
+import { IMAGE_MODELS } from "@/lib/constants/models";
+import type { Niche } from "@/types/api";
+
+const extensiveSchema = z.object({
+  niche: z.enum(["home_insurance", "glp1"]),
+  target_audience: z.string().min(1, "Target audience is required"),
+  offer: z.string().min(1, "Offer is required"),
+  num_images: z.number().min(1).max(3),
+  num_strategies: z.number().min(1).max(10),
+  image_model: z.string().nullable().optional(),
+});
+
+type ExtensiveFormData = z.infer<typeof extensiveSchema>;
+
+interface ExtensiveFormProps {
+  onSubmit: (data: {
+    niche: Niche;
+    target_audience: string;
+    offer: string;
+    num_images: number;
+    num_strategies: number;
+    image_model?: string | null;
+  }) => Promise<void>;
+  isLoading: boolean;
+}
+
+export const ExtensiveForm: React.FC<ExtensiveFormProps> = ({
+  onSubmit,
+  isLoading,
+}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+  } = useForm<ExtensiveFormData>({
+    resolver: zodResolver(extensiveSchema),
+    defaultValues: {
+      niche: "home_insurance" as Niche,
+      target_audience: "",
+      offer: "",
+      num_images: 1,
+      num_strategies: 5,
+      image_model: null,
+    },
+  });
+
+  const numImages = watch("num_images");
+  const numStrategies = watch("num_strategies");
+
+  return (
+    <Card variant="glass">
+      <CardHeader>
+        <CardTitle>Extensive Generation</CardTitle>
+        <CardDescription>
+          Researcher → Creative Director → Designer → Copywriter flow
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          <Select
+            label="Niche"
+            options={[
+              { value: "home_insurance", label: "Home Insurance" },
+              { value: "glp1", label: "GLP-1" },
+            ]}
+            error={errors.niche?.message}
+            {...register("niche")}
+          />
+
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-2">
+              Target Audience <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              className="w-full px-4 py-3 rounded-xl border-2 border-gray-300 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-250"
+              placeholder="e.g., US people over 50+ age"
+              {...register("target_audience")}
+            />
+            {errors.target_audience && (
+              <p className="text-red-500 text-xs mt-1">{errors.target_audience.message}</p>
+            )}
+          </div>
+
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-2">
+              Offer <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              className="w-full px-4 py-3 rounded-xl border-2 border-gray-300 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-250"
+              placeholder="e.g., Don't overpay your insurance"
+              {...register("offer")}
+            />
+            {errors.offer && (
+              <p className="text-red-500 text-xs mt-1">{errors.offer.message}</p>
+            )}
+          </div>
+
+          <Select
+            label="Image Model"
+            options={IMAGE_MODELS.map(model => ({ value: model.value, label: model.label }))}
+            error={errors.image_model?.message}
+            {...register("image_model")}
+          />
+
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-2">
+              Images per Strategy: <span className="text-blue-600 font-bold">{numImages}</span>
+            </label>
+            <input
+              type="range"
+              min="1"
+              max="3"
+              step="1"
+              className="w-full accent-blue-500"
+              {...register("num_images", { valueAsNumber: true })}
+            />
+            <div className="flex justify-between text-xs text-gray-500 mt-1 font-medium">
+              <span>1</span>
+              <span>3</span>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-2">
+              Number of Strategies: <span className="text-blue-600 font-bold">{numStrategies}</span>
+            </label>
+            <input
+              type="range"
+              min="1"
+              max="10"
+              step="1"
+              className="w-full accent-blue-500"
+              {...register("num_strategies", { valueAsNumber: true })}
+            />
+            <div className="flex justify-between text-xs text-gray-500 mt-1 font-medium">
+              <span>1</span>
+              <span>10</span>
+            </div>
+            <p className="text-xs text-gray-500 mt-1">
+              More strategies = more variety, but longer generation time
+            </p>
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="w-full bg-gradient-to-r from-blue-500 to-cyan-500 text-white font-bold py-4 px-6 rounded-xl hover:from-blue-600 hover:to-cyan-600 transition-all duration-300 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isLoading ? "Generating..." : "Generate with Extensive"}
+          </button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};

frontend/components/generation/GenerationForm.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { generateAdSchema } from "@/lib/utils/validators";
+import { Input } from "@/components/ui/Input";
+import { Select } from "@/components/ui/Select";
+import { Button } from "@/components/ui/Button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
+import { IMAGE_MODELS } from "@/lib/constants/models";
+import type { Niche } from "@/types/api";
+
+interface GenerationFormProps {
+  onSubmit: (data: { niche: Niche; num_images: number; image_model?: string | null }) => Promise<void>;
+  isLoading: boolean;
+}
+
+export const GenerationForm: React.FC<GenerationFormProps> = ({
+  onSubmit,
+  isLoading,
+}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+  } = useForm({
+    resolver: zodResolver(generateAdSchema),
+    defaultValues: {
+      niche: "home_insurance" as Niche,
+      num_images: 1,
+      image_model: null,
+    },
+  });
+
+  const numImages = watch("num_images");
+
+  return (
+    <Card variant="glass">
+      <CardHeader>
+        <CardTitle>Generate Ad</CardTitle>
+        <CardDescription>
+          Create a new ad creative using randomized strategies
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          <Select
+            label="Niche"
+            options={[
+              { value: "home_insurance", label: "Home Insurance" },
+              { value: "glp1", label: "GLP-1" },
+            ]}
+            error={errors.niche?.message}
+            {...register("niche")}
+          />
+
+          <Select
+            label="Image Model"
+            options={IMAGE_MODELS.map(model => ({ value: model.value, label: model.label }))}
+            error={errors.image_model?.message}
+            {...register("image_model")}
+          />
+
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-2">
+              Number of Variations: <span className="text-blue-600 font-bold">{numImages}</span>
+            </label>
+            <input
+              type="range"
+              min="1"
+              max="10"
+              step="1"
+              className="w-full accent-blue-500"
+              {...register("num_images", { valueAsNumber: true })}
+            />
+            <div className="flex justify-between text-xs text-gray-500 mt-1 font-medium">
+              <span>1</span>
+              <span>10</span>
+            </div>
+            <p className="text-xs text-gray-500 mt-1">
+              Each variation will have a unique image and slight copy variations
+            </p>
+            {errors.num_images && (
+              <p className="mt-1 text-sm text-red-600">
+                {errors.num_images.message}
+              </p>
+            )}
+          </div>
+
+          <Button
+            type="submit"
+            variant="primary"
+            size="lg"
+            isLoading={isLoading}
+            className="w-full"
+          >
+            Generate Ad
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};

frontend/components/generation/GenerationProgress.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent } from "@/components/ui/Card";
+import { ProgressBar } from "@/components/ui/ProgressBar";
+import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
+import { 
+  Sparkles, 
+  Image as ImageIcon, 
+  Database, 
+  CheckCircle2, 
+  AlertCircle,
+  Wand2,
+  Zap
+} from "lucide-react";
+import type { GenerationProgress } from "@/types";
+
+interface GenerationProgressProps {
+  progress: GenerationProgress;
+}
+
+const STEPS = [
+  { key: "copy", label: "Crafting Copy", icon: Sparkles, color: "from-blue-500 to-cyan-500", messages: [
+    "Brainstorming compelling headlines...",
+    "Writing persuasive ad copy...",
+    "Polishing the perfect message...",
+    "Adding psychological triggers...",
+  ]},
+  { key: "image", label: "Generating Images", icon: ImageIcon, color: "from-cyan-500 to-pink-500", messages: [
+    "Creating stunning visuals...",
+    "Bringing your vision to life...",
+    "Rendering high-quality images...",
+    "Adding creative flair...",
+  ]},
+  { key: "saving", label: "Saving", icon: Database, color: "from-pink-500 to-purple-500", messages: [
+    "Storing your creative...",
+    "Securing your masterpiece...",
+    "Almost done...",
+  ]},
+] as const;
+
+export const GenerationProgressComponent: React.FC<GenerationProgressProps> = ({
+  progress,
+}) => {
+  const stepProgress = {
+    idle: 0,
+    copy: 33,
+    image: 66,
+    saving: 90,
+    complete: 100,
+    error: 0,
+  };
+
+  const currentProgress = progress.progress || stepProgress[progress.step];
+  const currentStepIndex = STEPS.findIndex(s => s.key === progress.step);
+  const isComplete = progress.step === "complete";
+  const isError = progress.step === "error";
+
+  // Get random message for current step
+  const getStepMessage = () => {
+    if (progress.message) return progress.message;
+    const step = STEPS.find(s => s.key === progress.step);
+    if (step && step.messages.length > 0) {
+      const randomIndex = Math.floor(Math.random() * step.messages.length);
+      return step.messages[randomIndex];
+    }
+    return "Processing...";
+  };
+
+  return (
+    <Card variant="glass" className="overflow-hidden">
+      <CardContent className="pt-6">
+        <div className="space-y-6">
+          {/* Header with animated icon */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              {isComplete ? (
+                <div className="relative">
+                  <div className="absolute inset-0 bg-green-500 rounded-full animate-ping opacity-75"></div>
+                  <CheckCircle2 className="h-8 w-8 text-green-500 relative z-10" />
+                </div>
+              ) : isError ? (
+                <AlertCircle className="h-8 w-8 text-red-500 animate-pulse" />
+              ) : (
+                <div className="relative">
+                  <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full animate-ping opacity-20"></div>
+                  <div className="relative bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full p-2">
+                    <Wand2 className="h-5 w-5 text-white animate-spin-slow" />
+                  </div>
+                </div>
+              )}
+              <div>
+                <h3 className="text-lg font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
+                  {isComplete ? "Generation Complete!" : isError ? "Generation Failed" : "Creating Your Ad"}
+                </h3>
+                <p className="text-sm text-gray-600 mt-0.5">
+                  {isComplete ? "Your ad is ready!" : isError ? "Something went wrong" : getStepMessage()}
+                </p>
+              </div>
+            </div>
+            {progress.estimatedTimeRemaining && !isComplete && !isError && (
+              <div className="text-right">
+                <div className="flex items-center space-x-1 text-sm font-semibold text-gray-700">
+                  <Zap className="h-4 w-4 text-yellow-500 animate-pulse" />
+                  <span>~{Math.ceil(progress.estimatedTimeRemaining)}s</span>
+                </div>
+                <p className="text-xs text-gray-500">remaining</p>
+              </div>
+            )}
+          </div>
+
+          {/* Step Indicators */}
+          {!isComplete && !isError && (
+            <div className="flex items-center justify-between relative">
+              {/* Progress line */}
+              <div className="absolute top-5 left-0 right-0 h-0.5 bg-gray-200 -z-10">
+                <div 
+                  className="h-full bg-gradient-to-r from-blue-500 via-cyan-500 to-pink-500 transition-all duration-500 ease-out"
+                  style={{ width: `${currentProgress}%` }}
+                />
+              </div>
+              
+              {STEPS.map((step, index) => {
+                const StepIcon = step.icon;
+                const isActive = progress.step === step.key;
+                const isCompleted = currentStepIndex > index;
+                const isUpcoming = currentStepIndex < index;
+
+                return (
+                  <div key={step.key} className="flex flex-col items-center flex-1">
+                    <div className={`relative w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300 ${
+                      isActive 
+                        ? `bg-gradient-to-r ${step.color} shadow-lg scale-110 animate-pulse`
+                        : isCompleted
+                        ? "bg-gradient-to-r from-green-500 to-emerald-500 shadow-md"
+                        : "bg-gray-200"
+                    }`}>
+                      {isActive ? (
+                        <div className="text-white">
+                          <LoadingSpinner size="sm" />
+                        </div>
+                      ) : isCompleted ? (
+                        <CheckCircle2 className="h-5 w-5 text-white" />
+                      ) : (
+                        <StepIcon className={`h-5 w-5 ${isUpcoming ? "text-gray-400" : "text-white"}`} />
+                      )}
+                      {isActive && (
+                        <div className={`absolute inset-0 rounded-full bg-gradient-to-r ${step.color} animate-ping opacity-75`}></div>
+                      )}
+                    </div>
+                    <p className={`text-xs font-medium mt-2 text-center ${
+                      isActive 
+                        ? "text-gray-900 font-bold"
+                        : isCompleted
+                        ? "text-green-600"
+                        : "text-gray-400"
+                    }`}>
+                      {step.label}
+                    </p>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Progress Bar */}
+          <div className="space-y-2">
+            <div className="flex justify-between items-center">
+              <span className="text-sm font-semibold text-gray-700">Overall Progress</span>
+              <span className="text-sm font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
+                {Math.round(currentProgress)}%
+              </span>
+            </div>
+            <ProgressBar
+              progress={currentProgress}
+              showPercentage={false}
+            />
+          </div>
+
+          {/* Success State */}
+          {isComplete && (
+            <div className="mt-4 p-4 bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-xl animate-scale-in">
+              <div className="flex items-center space-x-3">
+                <CheckCircle2 className="h-6 w-6 text-green-600 flex-shrink-0" />
+                <div>
+                  <p className="text-sm font-semibold text-green-900">
+                    Ad generated successfully!
+                  </p>
+                  <p className="text-xs text-green-700 mt-0.5">
+                    Your creative is ready to use
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Error State */}
+          {isError && (
+            <div className="mt-4 p-4 bg-gradient-to-r from-red-50 to-pink-50 border-2 border-red-200 rounded-xl animate-scale-in">
+              <div className="flex items-center space-x-3">
+                <AlertCircle className="h-6 w-6 text-red-600 flex-shrink-0" />
+                <div>
+                  <p className="text-sm font-semibold text-red-900">
+                    Generation failed
+                  </p>
+                  <p className="text-xs text-red-700 mt-0.5">
+                    {progress.message || "An error occurred. Please try again."}
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

frontend/components/layout/ConditionalHeader.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import React from "react";
+import { usePathname } from "next/navigation";
+import { Header } from "./Header";
+
+export const ConditionalHeader: React.FC = () => {
+  const pathname = usePathname();
+  const isLoginPage = pathname === "/login";
+
+  if (isLoginPage) {
+    return null;
+  }
+
+  return <Header />;
+};

frontend/components/layout/Header.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { Home, Rocket, Grid, Layers, LogOut, User } from "lucide-react";
+import { useAuthStore } from "@/store/authStore";
+import { Button } from "@/components/ui/Button";
+
+export const Header: React.FC = () => {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { isAuthenticated, user, logout } = useAuthStore();
+  
+  const navItems = [
+    { href: "/", label: "Dashboard", icon: Home },
+    { href: "/generate", label: "Generate", icon: Rocket },
+    { href: "/gallery", label: "Gallery", icon: Grid },
+    { href: "/matrix", label: "Matrix", icon: Layers },
+  ];
+
+  const handleLogout = () => {
+    logout();
+    router.push("/login");
+  };
+  
+  return (
+    <header className="sticky top-0 z-50 glass border-b border-white/20 backdrop-blur-xl transition-all duration-300">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-20">
+          <div className="flex items-center">
+            <Link href="/" className="flex items-center space-x-3 group">
+              <div className="relative">
+                <Rocket className="h-8 w-8 text-blue-500 group-hover:text-cyan-500 transition-all duration-300 group-hover:scale-110 group-hover:-translate-y-1" />
+                <div className="absolute inset-0 bg-blue-500/20 rounded-full blur-xl group-hover:bg-cyan-500/20 transition-colors duration-300"></div>
+              </div>
+              <span className="text-2xl font-bold gradient-text group-hover:scale-105 transition-transform duration-300">
+                Creative Breakthrough
+              </span>
+            </Link>
+          </div>
+          
+          <div className="flex items-center space-x-4">
+            <nav className="hidden md:flex space-x-2">
+              {navItems.map((item) => {
+                const Icon = item.icon;
+                const isActive = pathname === item.href || 
+                  (item.href !== "/" && pathname?.startsWith(item.href));
+                
+                return (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    className={`relative flex items-center space-x-2 px-5 py-2.5 rounded-xl text-sm font-semibold transition-all duration-300 ${
+                      isActive
+                        ? "bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-lg scale-105"
+                        : "text-gray-700 hover:bg-white/50 hover:text-gray-900 hover:scale-105"
+                    }`}
+                  >
+                    <Icon className={`h-4 w-4 transition-transform duration-300 ${isActive ? "scale-110" : ""}`} />
+                    <span>{item.label}</span>
+                    {isActive && (
+                      <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500 to-cyan-500 opacity-50 blur-sm -z-10"></div>
+                    )}
+                  </Link>
+                );
+              })}
+            </nav>
+
+            {isAuthenticated ? (
+              <div className="flex items-center space-x-3">
+                <div className="hidden md:flex items-center space-x-2 px-4 py-2 rounded-xl bg-white/50 backdrop-blur-sm text-gray-700">
+                  <User className="h-4 w-4" />
+                  <span className="text-sm font-semibold">{user?.username}</span>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleLogout}
+                  className="flex items-center space-x-2"
+                >
+                  <LogOut className="h-4 w-4" />
+                  <span className="hidden sm:inline">Logout</span>
+                </Button>
+              </div>
+            ) : (
+              pathname !== "/login" && (
+                <Link href="/login">
+                  <Button variant="primary" size="sm">
+                    Login
+                  </Button>
+                </Link>
+              )
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};

frontend/components/matrix/AngleSelector.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import { Input } from "@/components/ui/Input";
+import { Select } from "@/components/ui/Select";
+import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
+import { getAllAngles } from "@/lib/api/endpoints";
+import { useMatrixStore } from "@/store/matrixStore";
+import type { AngleInfo, AnglesResponse } from "@/types/api";
+
+interface AngleSelectorProps {
+  onSelect?: (angle: AngleInfo) => void;
+  selectedAngle?: AngleInfo | null;
+}
+
+export const AngleSelector: React.FC<AngleSelectorProps> = ({
+  onSelect,
+  selectedAngle,
+}) => {
+  const { angles, isLoading, setAngles, setIsLoading } = useMatrixStore();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState<string>("");
+
+  useEffect(() => {
+    if (!angles) {
+      loadAngles();
+    }
+  }, []);
+
+  const loadAngles = async () => {
+    setIsLoading(true);
+    try {
+      const data = await getAllAngles();
+      setAngles(data);
+    } catch (error) {
+      console.error("Failed to load angles:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading && !angles) {
+    return (
+      <Card>
+        <CardContent className="pt-6">
+          <LoadingSpinner size="lg" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!angles) {
+    return (
+      <Card>
+        <CardContent className="pt-6">
+          <p className="text-gray-500">Failed to load angles</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Filter angles
+  let filteredAngles: Array<{ category: string; angle: any }> = [];
+  
+  Object.entries(angles.categories).forEach(([catKey, catData]) => {
+    if (selectedCategory && catKey !== selectedCategory) return;
+    
+    catData.angles.forEach((angle) => {
+      if (
+        !searchTerm ||
+        angle.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        angle.trigger.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        angle.key.toLowerCase().includes(searchTerm.toLowerCase())
+      ) {
+        filteredAngles.push({ category: catData.name, angle });
+      }
+    });
+  });
+
+  const categories = Object.entries(angles.categories).map(([key, data]) => ({
+    value: key,
+    label: data.name,
+  }));
+
+  return (
+    <Card variant="glass">
+      <CardHeader>
+        <CardTitle>Select Angle</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Input
+            placeholder="Search angles..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          <Select
+            options={[{ value: "", label: "All Categories" }, ...categories]}
+            value={selectedCategory}
+            onChange={(e) => setSelectedCategory(e.target.value)}
+          />
+        </div>
+
+        <div className="max-h-96 overflow-y-auto space-y-2">
+          {filteredAngles.length === 0 ? (
+            <p className="text-center text-gray-500 py-8">No angles found</p>
+          ) : (
+            filteredAngles.map(({ category, angle }) => (
+              <div
+                key={angle.key}
+                onClick={() => onSelect?.(angle)}
+                className={`p-3 rounded-lg border cursor-pointer transition-colors ${
+                  selectedAngle?.key === angle.key
+                    ? "border-blue-500 bg-blue-50"
+                    : "border-gray-200 hover:border-gray-300 hover:bg-gray-50"
+                }`}
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <h4 className="font-semibold text-gray-900">{angle.name}</h4>
+                    <p className="text-sm text-gray-600 mt-1">{angle.trigger}</p>
+                    <p className="text-xs text-gray-500 mt-1">{category}</p>
+                  </div>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

frontend/components/matrix/ConceptSelector.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import { Input } from "@/components/ui/Input";
+import { Select } from "@/components/ui/Select";
+import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
+import { getAllConcepts, getCompatibleConcepts } from "@/lib/api/endpoints";
+import { useMatrixStore } from "@/store/matrixStore";
+import type { ConceptInfo, ConceptsResponse } from "@/types/api";
+
+interface ConceptSelectorProps {
+  onSelect?: (concept: ConceptInfo) => void;
+  selectedConcept?: ConceptInfo | null;
+  angleKey?: string | null;
+}
+
+export const ConceptSelector: React.FC<ConceptSelectorProps> = ({
+  onSelect,
+  selectedConcept,
+  angleKey,
+}) => {
+  const { concepts, compatibleConcepts, isLoading, setConcepts, setCompatibleConcepts, setIsLoading } = useMatrixStore();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState<string>("");
+  const [showCompatibleOnly, setShowCompatibleOnly] = useState(false);
+
+  useEffect(() => {
+    if (!concepts) {
+      loadConcepts();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (angleKey && showCompatibleOnly) {
+      loadCompatibleConcepts(angleKey);
+    }
+  }, [angleKey, showCompatibleOnly]);
+
+  const loadConcepts = async () => {
+    setIsLoading(true);
+    try {
+      const data = await getAllConcepts();
+      setConcepts(data);
+    } catch (error) {
+      console.error("Failed to load concepts:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const loadCompatibleConcepts = async (key: string) => {
+    try {
+      const data = await getCompatibleConcepts(key);
+      // Convert compatible concepts to full ConceptInfo by fetching from all concepts
+      if (concepts) {
+        const fullConcepts: ConceptInfo[] = [];
+        for (const compat of data.compatible_concepts) {
+          // Find full concept info from all concepts
+          let found = false;
+          for (const [catKey, cat] of Object.entries(concepts.categories)) {
+            const fullConcept = cat.concepts.find((c) => c.key === compat.key);
+            if (fullConcept) {
+              // Add category to the concept
+              fullConcepts.push({
+                ...fullConcept,
+                category: cat.name,
+              });
+              found = true;
+              break;
+            }
+          }
+          // If not found, create a minimal version
+          if (!found) {
+            fullConcepts.push({
+              key: compat.key,
+              name: compat.name,
+              structure: compat.structure,
+              visual: "",
+              category: "",
+            });
+          }
+        }
+        setCompatibleConcepts(fullConcepts);
+      } else {
+        // Fallback to minimal concepts if full concepts not loaded
+        const minimalConcepts: ConceptInfo[] = data.compatible_concepts.map((c): ConceptInfo => ({
+          key: c.key,
+          name: c.name,
+          structure: c.structure,
+          visual: "",
+          category: "",
+        }));
+        setCompatibleConcepts(minimalConcepts);
+      }
+    } catch (error) {
+      console.error("Failed to load compatible concepts:", error);
+    }
+  };
+
+  if (isLoading && !concepts) {
+    return (
+      <Card>
+        <CardContent className="pt-6">
+          <LoadingSpinner size="lg" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!concepts) {
+    return (
+      <Card>
+        <CardContent className="pt-6">
+          <p className="text-gray-500">Failed to load concepts</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Filter concepts
+  let filteredConcepts: Array<{ category: string; concept: any }> = [];
+  const conceptsToUse = showCompatibleOnly && compatibleConcepts.length > 0
+    ? compatibleConcepts
+    : Object.values(concepts.categories).flatMap((cat) => cat.concepts);
+  
+  Object.entries(concepts.categories).forEach(([catKey, catData]) => {
+    if (selectedCategory && catKey !== selectedCategory) return;
+    
+    catData.concepts.forEach((concept) => {
+      if (
+        (!showCompatibleOnly || compatibleConcepts.some((c) => c.key === concept.key)) &&
+        (!searchTerm ||
+          concept.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          concept.structure.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          concept.key.toLowerCase().includes(searchTerm.toLowerCase()))
+      ) {
+        filteredConcepts.push({ category: catData.name, concept });
+      }
+    });
+  });
+
+  const categories = Object.entries(concepts.categories).map(([key, data]) => ({
+    value: key,
+    label: data.name,
+  }));
+
+  return (
+    <Card variant="glass">
+      <CardHeader>
+        <CardTitle>Select Concept</CardTitle>
+        {angleKey && (
+          <div className="mt-2">
+            <label className="flex items-center space-x-2">
+              <input
+                type="checkbox"
+                checked={showCompatibleOnly}
+                onChange={(e) => setShowCompatibleOnly(e.target.checked)}
+                className="rounded"
+              />
+              <span className="text-sm text-gray-600">Show compatible concepts only</span>
+            </label>
+          </div>
+        )}
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Input
+            placeholder="Search concepts..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          <Select
+            options={[{ value: "", label: "All Categories" }, ...categories]}
+            value={selectedCategory}
+            onChange={(e) => setSelectedCategory(e.target.value)}
+          />
+        </div>
+
+        <div className="max-h-96 overflow-y-auto space-y-2">
+          {filteredConcepts.length === 0 ? (
+            <p className="text-center text-gray-500 py-8">No concepts found</p>
+          ) : (
+            filteredConcepts.map(({ category, concept }) => (
+              <div
+                key={concept.key}
+                onClick={() => onSelect?.(concept)}
+                className={`p-3 rounded-lg border cursor-pointer transition-colors ${
+                  selectedConcept?.key === concept.key
+                    ? "border-blue-500 bg-blue-50"
+                    : "border-gray-200 hover:border-gray-300 hover:bg-gray-50"
+                }`}
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <h4 className="font-semibold text-gray-900">{concept.name}</h4>
+                    <p className="text-sm text-gray-600 mt-1">{concept.structure}</p>
+                    <p className="text-xs text-gray-500 mt-1">{category}</p>
+                  </div>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

frontend/components/matrix/TestingMatrixBuilder.tsx

@@ -0,0 +1,436 @@
+"use client";
+
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
+import { Button } from "@/components/ui/Button";
+import { Select } from "@/components/ui/Select";
+import { ProgressBar } from "@/components/ui/ProgressBar";
+import { generateTestingMatrix, generateMatrixAd } from "@/lib/api/endpoints";
+import { exportAsJSON, exportAsCSV } from "@/lib/utils/export";
+import { toast } from "react-hot-toast";
+import { Download, FileJson, FileSpreadsheet, Rocket, CheckSquare, Square } from "lucide-react";
+import { IMAGE_MODELS } from "@/lib/constants/models";
+import type { TestingMatrixResponse, CombinationInfo } from "@/types/api";
+import type { Niche } from "@/types/api";
+
+interface TestingMatrixBuilderProps {
+  onMatrixGenerated?: (matrix: TestingMatrixResponse) => void;
+}
+
+export const TestingMatrixBuilder: React.FC<TestingMatrixBuilderProps> = ({
+  onMatrixGenerated,
+}) => {
+  const router = useRouter();
+  const [niche, setNiche] = useState<Niche>("home_insurance");
+  const [strategy, setStrategy] = useState<"balanced" | "top_performers" | "diverse">("balanced");
+  const [angleCount, setAngleCount] = useState(6);
+  const [conceptCount, setConceptCount] = useState(5);
+  const [matrix, setMatrix] = useState<TestingMatrixResponse | null>(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [selectedCombinations, setSelectedCombinations] = useState<Set<string>>(new Set());
+  const [isGeneratingAds, setIsGeneratingAds] = useState(false);
+  const [generationProgress, setGenerationProgress] = useState({ current: 0, total: 0 });
+  const [numVariations, setNumVariations] = useState(1);
+  const [imageModel, setImageModel] = useState<string | null>(null);
+
+  const handleGenerate = async () => {
+    setIsGenerating(true);
+    try {
+      const result = await generateTestingMatrix({
+        niche,
+        angle_count: angleCount,
+        concept_count: conceptCount,
+        strategy,
+      });
+      setMatrix(result);
+      onMatrixGenerated?.(result);
+      toast.success(`Generated ${result.summary.total_combinations} combinations!`);
+    } catch (error: any) {
+      toast.error(error.message || "Failed to generate testing matrix");
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleExportJSON = () => {
+    if (!matrix) return;
+    exportAsJSON(matrix, `testing-matrix-${niche}-${Date.now()}.json`);
+    toast.success("Matrix exported as JSON");
+  };
+
+  const handleExportCSV = () => {
+    if (!matrix) return;
+    const csvData = matrix.combinations.map((combo) => ({
+      combination_id: combo.combination_id,
+      angle_key: combo.angle.key,
+      angle_name: combo.angle.name,
+      angle_trigger: combo.angle.trigger,
+      concept_key: combo.concept.key,
+      concept_name: combo.concept.name,
+      compatibility_score: combo.compatibility_score,
+    }));
+    exportAsCSV(csvData, `testing-matrix-${niche}-${Date.now()}.csv`);
+    toast.success("Matrix exported as CSV");
+  };
+
+  const toggleCombination = (combinationId: string) => {
+    const newSelected = new Set(selectedCombinations);
+    if (newSelected.has(combinationId)) {
+      newSelected.delete(combinationId);
+    } else {
+      newSelected.add(combinationId);
+    }
+    setSelectedCombinations(newSelected);
+  };
+
+  const selectAll = () => {
+    if (!matrix) return;
+    if (selectedCombinations.size === matrix.combinations.length) {
+      setSelectedCombinations(new Set());
+    } else {
+      setSelectedCombinations(new Set(matrix.combinations.map(c => c.combination_id)));
+    }
+  };
+
+  const handleGenerateAds = async () => {
+    if (!matrix) return;
+    
+    const combinationsToGenerate = selectedCombinations.size > 0
+      ? matrix.combinations.filter(c => selectedCombinations.has(c.combination_id))
+      : matrix.combinations;
+
+    if (combinationsToGenerate.length === 0) {
+      toast.error("Please select at least one combination");
+      return;
+    }
+
+    setIsGeneratingAds(true);
+    setGenerationProgress({ current: 0, total: combinationsToGenerate.length });
+
+    try {
+      const generatedAds = [];
+      
+      for (let i = 0; i < combinationsToGenerate.length; i++) {
+        const combo = combinationsToGenerate[i];
+        setGenerationProgress({ current: i + 1, total: combinationsToGenerate.length });
+        
+        try {
+          const result = await generateMatrixAd({
+            niche,
+            angle_key: combo.angle.key,
+            concept_key: combo.concept.key,
+            num_images: numVariations,
+            image_model: imageModel,
+          });
+          generatedAds.push(result);
+          toast.success(`Generated ad ${i + 1}/${combinationsToGenerate.length}`);
+        } catch (error: any) {
+          console.error(`Failed to generate ad for combination ${combo.combination_id}:`, error);
+          toast.error(`Failed to generate ad ${i + 1}/${combinationsToGenerate.length}`);
+        }
+      }
+
+      toast.success(`Successfully generated ${generatedAds.length} ads!`);
+      
+      // Navigate to gallery to see the results
+      setTimeout(() => {
+        router.push("/gallery");
+      }, 1500);
+    } catch (error: any) {
+      toast.error(error.message || "Failed to generate ads");
+    } finally {
+      setIsGeneratingAds(false);
+      setGenerationProgress({ current: 0, total: 0 });
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card variant="glass">
+        <CardHeader>
+          <CardTitle>Testing Matrix Builder</CardTitle>
+          <CardDescription>
+            Generate a systematic testing matrix for ad optimization
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <Select
+            label="Niche"
+            options={[
+              { value: "home_insurance", label: "Home Insurance" },
+              { value: "glp1", label: "GLP-1" },
+            ]}
+            value={niche}
+            onChange={(e) => setNiche(e.target.value as Niche)}
+          />
+
+          <Select
+            label="Strategy"
+            options={[
+              { value: "balanced", label: "Balanced - Mix of top performers and diverse" },
+              { value: "top_performers", label: "Top Performers - Focus on proven winners" },
+              { value: "diverse", label: "Diverse - Maximum variety" },
+            ]}
+            value={strategy}
+            onChange={(e) => setStrategy(e.target.value as typeof strategy)}
+          />
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Number of Angles: {angleCount}
+            </label>
+            <input
+              type="range"
+              min="1"
+              max="10"
+              step="1"
+              className="w-full"
+              value={angleCount}
+              onChange={(e) => setAngleCount(Number(e.target.value))}
+            />
+            <div className="flex justify-between text-xs text-gray-500 mt-1">
+              <span>1</span>
+              <span>10</span>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Concepts per Angle: {conceptCount}
+            </label>
+            <input
+              type="range"
+              min="1"
+              max="10"
+              step="1"
+              className="w-full"
+              value={conceptCount}
+              onChange={(e) => setConceptCount(Number(e.target.value))}
+            />
+            <div className="flex justify-between text-xs text-gray-500 mt-1">
+              <span>1</span>
+              <span>10</span>
+            </div>
+          </div>
+
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+            <p className="text-sm text-blue-800">
+              <strong>Total Combinations:</strong> {angleCount} × {conceptCount} = {angleCount * conceptCount}
+            </p>
+          </div>
+
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-full"
+            onClick={handleGenerate}
+            isLoading={isGenerating}
+          >
+            Generate Testing Matrix
+          </Button>
+        </CardContent>
+      </Card>
+
+      {matrix && (
+        <>
+          <Card variant="glass">
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <div>
+                  <CardTitle>Matrix Summary</CardTitle>
+                  <CardDescription>
+                    {matrix.summary.total_combinations} combinations ready for testing
+                  </CardDescription>
+                </div>
+                <div className="flex space-x-2">
+                  <Button variant="outline" size="sm" onClick={handleExportJSON}>
+                    <FileJson className="h-4 w-4 mr-1" />
+                    JSON
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={handleExportCSV}>
+                    <FileSpreadsheet className="h-4 w-4 mr-1" />
+                    CSV
+                  </Button>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+                <div>
+                  <p className="text-sm text-gray-600">Total Combinations</p>
+                  <p className="text-2xl font-bold text-gray-900">{matrix.summary.total_combinations}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600">Unique Angles</p>
+                  <p className="text-2xl font-bold text-gray-900">{matrix.summary.unique_angles}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600">Unique Concepts</p>
+                  <p className="text-2xl font-bold text-gray-900">{matrix.summary.unique_concepts}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-600">Avg Compatibility</p>
+                  <p className="text-2xl font-bold text-gray-900">
+                    {(matrix.summary.average_compatibility * 100).toFixed(0)}%
+                  </p>
+                </div>
+              </div>
+
+              {/* Generate Ads Section */}
+              <div className="bg-gradient-to-r from-blue-50 to-cyan-50 border border-blue-200 rounded-xl p-6 mb-6">
+                <div className="flex items-center justify-between mb-4">
+                  <div>
+                    <h3 className="text-lg font-bold text-gray-900 mb-1">Generate Ads from Matrix</h3>
+                    <p className="text-sm text-gray-600">
+                      Select combinations to generate ads, or generate all
+                    </p>
+                  </div>
+                </div>
+                
+                <div className="mb-4">
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Variations per Combination: {numVariations}
+                  </label>
+                  <input
+                    type="range"
+                    min="1"
+                    max="3"
+                    step="1"
+                    className="w-full accent-blue-500"
+                    value={numVariations}
+                    onChange={(e) => setNumVariations(Number(e.target.value))}
+                  />
+                  <div className="flex justify-between text-xs text-gray-500 mt-1">
+                    <span>1</span>
+                    <span>3</span>
+                  </div>
+                </div>
+
+                <div className="mb-4">
+                  <Select
+                    label="Image Model"
+                    options={IMAGE_MODELS.map(model => ({ value: model.value, label: model.label }))}
+                    value={imageModel || ""}
+                    onChange={(e) => setImageModel(e.target.value || null)}
+                  />
+                </div>
+
+                <div className="flex items-center justify-between mb-4">
+                  <div className="flex items-center space-x-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={selectAll}
+                    >
+                      {selectedCombinations.size === matrix.combinations.length ? (
+                        <>
+                          <CheckSquare className="h-4 w-4 mr-1" />
+                          Deselect All
+                        </>
+                      ) : (
+                        <>
+                          <Square className="h-4 w-4 mr-1" />
+                          Select All
+                        </>
+                      )}
+                    </Button>
+                    <span className="text-sm text-gray-600">
+                      {selectedCombinations.size > 0 
+                        ? `${selectedCombinations.size} selected`
+                        : "All combinations will be generated"}
+                    </span>
+                  </div>
+                  <Button
+                    variant="primary"
+                    size="lg"
+                    onClick={handleGenerateAds}
+                    isLoading={isGeneratingAds}
+                    disabled={isGeneratingAds}
+                  >
+                    <Rocket className="h-5 w-5 mr-2" />
+                    Generate Ads
+                  </Button>
+                </div>
+
+                {isGeneratingAds && generationProgress.total > 0 && (
+                  <div className="mt-4">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-sm font-medium text-gray-700">
+                        Generating ads...
+                      </span>
+                      <span className="text-sm text-gray-600">
+                        {generationProgress.current} / {generationProgress.total}
+                      </span>
+                    </div>
+                    <ProgressBar
+                      progress={(generationProgress.current / generationProgress.total) * 100}
+                    />
+                  </div>
+                )}
+
+                <div className="bg-blue-100 border border-blue-300 rounded-lg p-3 mt-4">
+                  <p className="text-xs text-blue-800">
+                    <strong>Note:</strong> This will generate{" "}
+                    {selectedCombinations.size > 0
+                      ? `${selectedCombinations.size} × ${numVariations} = ${selectedCombinations.size * numVariations}`
+                      : `${matrix.combinations.length} × ${numVariations} = ${matrix.combinations.length * numVariations}`}{" "}
+                    total ad variations. This may take several minutes.
+                  </p>
+                </div>
+              </div>
+
+              {/* Combinations List */}
+              <div className="max-h-96 overflow-y-auto space-y-2">
+                {matrix.combinations.map((combo) => {
+                  const isSelected = selectedCombinations.has(combo.combination_id);
+                  return (
+                    <div
+                      key={combo.combination_id}
+                      onClick={() => toggleCombination(combo.combination_id)}
+                      className={`p-3 border rounded-lg cursor-pointer transition-all ${
+                        isSelected
+                          ? "border-blue-500 bg-blue-50 shadow-md"
+                          : "border-gray-200 hover:bg-gray-50 hover:border-gray-300"
+                      }`}
+                    >
+                      <div className="flex items-start justify-between">
+                        <div className="flex items-start space-x-3 flex-1">
+                          <div className="mt-0.5">
+                            {isSelected ? (
+                              <CheckSquare className="h-5 w-5 text-blue-600" />
+                            ) : (
+                              <Square className="h-5 w-5 text-gray-400" />
+                            )}
+                          </div>
+                          <div className="flex-1">
+                            <div className="flex items-center space-x-2 mb-1">
+                              <span className="text-sm font-semibold text-gray-900">
+                                {combo.angle.name}
+                              </span>
+                              <span className="text-gray-400">×</span>
+                              <span className="text-sm font-semibold text-gray-900">
+                                {combo.concept.name}
+                              </span>
+                            </div>
+                            <p className="text-xs text-gray-500">{combo.angle.trigger}</p>
+                            <p className="text-xs text-gray-500 mt-1">{combo.concept.structure}</p>
+                          </div>
+                        </div>
+                        <div className="ml-4 text-right">
+                          <span className="text-xs font-medium text-blue-600">
+                            {(combo.compatibility_score * 100).toFixed(0)}%
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </CardContent>
+          </Card>
+        </>
+      )}
+    </div>
+  );
+};

frontend/components/ui/Button.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { cn } from "../../lib/utils/cn";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
+  size?: "sm" | "md" | "lg";
+  isLoading?: boolean;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  variant = "primary",
+  size = "md",
+  isLoading = false,
+  disabled,
+  className,
+  ...props
+}) => {
+  const baseStyles = "inline-flex items-center justify-center rounded-xl font-semibold transition-all duration-250 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none relative overflow-hidden group";
+  
+  const variants = {
+    primary: "bg-gradient-to-r from-blue-500 to-cyan-500 text-white hover:from-blue-600 hover:to-cyan-600 focus:ring-blue-500 shadow-lg hover:shadow-xl hover:scale-105 active:scale-100",
+    secondary: "bg-gradient-to-r from-orange-400 to-pink-500 text-white hover:from-orange-500 hover:to-pink-600 focus:ring-orange-500 shadow-lg hover:shadow-xl hover:scale-105 active:scale-100",
+    outline: "border-2 border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500 hover:border-gray-400 hover:scale-105 active:scale-100 bg-white/50 backdrop-blur-sm",
+    ghost: "text-gray-700 hover:bg-gray-100/80 focus:ring-gray-500 hover:scale-105 active:scale-100",
+    danger: "bg-gradient-to-r from-red-500 to-red-600 text-white hover:from-red-600 hover:to-red-700 focus:ring-red-500 shadow-lg hover:shadow-xl hover:scale-105 active:scale-100",
+  };
+  
+  const sizes = {
+    sm: "px-4 py-2 text-sm",
+    md: "px-6 py-3 text-base",
+    lg: "px-8 py-4 text-lg",
+  };
+  
+  return (
+    <button
+      className={cn(baseStyles, variants[variant], sizes[size], className)}
+      disabled={disabled || isLoading}
+      {...props}
+    >
+      {/* Shine effect on hover */}
+      <span className="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-700 bg-gradient-to-r from-transparent via-white/20 to-transparent"></span>
+      
+      {isLoading ? (
+        <>
+          <svg className="animate-spin -ml-1 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          Loading...
+        </>
+      ) : (
+        <span className="relative z-10">{children}</span>
+      )}
+    </button>
+  );
+};

frontend/components/ui/Card.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { cn } from "../../lib/utils/cn";
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "outline" | "elevated" | "glass";
+}
+
+export const Card: React.FC<CardProps> = ({
+  children,
+  variant = "default",
+  className,
+  ...props
+}) => {
+  const variants = {
+    default: "bg-white/80 backdrop-blur-sm border border-gray-200/50 shadow-md hover:shadow-lg transition-all duration-300",
+    outline: "bg-transparent border-2 border-gray-300/50 hover:border-gray-400 transition-all duration-300",
+    elevated: "bg-white shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1",
+    glass: "glass border border-white/20 shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1",
+  };
+  
+  return (
+    <div
+      className={cn("rounded-2xl p-6 hover-lift", variants[variant], className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <div className={cn("mb-6", className)} {...props}>
+    {children}
+  </div>
+);
+
+export const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <h3 className={cn("text-2xl font-bold gradient-text", className)} {...props}>
+    {children}
+  </h3>
+);
+
+export const CardDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <p className={cn("text-sm text-gray-600 mt-2", className)} {...props}>
+    {children}
+  </p>
+);
+
+export const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <div className={cn("", className)} {...props}>
+    {children}
+  </div>
+);
+
+export const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <div className={cn("mt-6 flex items-center justify-between", className)} {...props}>
+    {children}
+  </div>
+);

frontend/components/ui/Input.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { cn } from "../../lib/utils/cn";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}
+
+export const Input: React.FC<InputProps> = ({
+  label,
+  error,
+  className,
+  ...props
+}) => {
+  const [focused, setFocused] = useState(false);
+  const hasValue = props.value !== undefined && props.value !== "";
+
+  return (
+    <div className="w-full">
+      {label && (
+        <label className="block text-sm font-semibold text-gray-700 mb-2">
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        <input
+          className={cn(
+            "w-full px-4 py-3 rounded-xl border-2 transition-all duration-250 focus:outline-none focus:ring-2 focus:ring-offset-2",
+            "bg-white/80 backdrop-blur-sm",
+            error 
+              ? "border-red-400 focus:border-red-500 focus:ring-red-500" 
+              : focused || hasValue
+              ? "border-blue-400 focus:border-blue-500 focus:ring-blue-500"
+              : "border-gray-300 focus:border-blue-500 focus:ring-blue-500",
+            "hover:border-gray-400",
+            className
+          )}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          {...props}
+        />
+        {(focused || hasValue) && !error && (
+          <div className="absolute inset-0 rounded-xl border-2 border-blue-500 pointer-events-none animate-pulse-glow opacity-50"></div>
+        )}
+      </div>
+      {error && (
+        <p className="mt-2 text-sm text-red-600 font-medium animate-slide-in">{error}</p>
+      )}
+    </div>
+  );
+};

frontend/components/ui/LoadingSkeleton.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { cn } from "../../lib/utils/cn";
+
+interface LoadingSkeletonProps {
+  className?: string;
+  variant?: "text" | "circular" | "rectangular";
+}
+
+export const LoadingSkeleton: React.FC<LoadingSkeletonProps> = ({
+  className,
+  variant = "rectangular",
+}) => {
+  const baseStyles = "animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%] animate-shimmer";
+  
+  const variants = {
+    text: "h-4 rounded",
+    circular: "rounded-full aspect-square",
+    rectangular: "rounded-xl",
+  };
+  
+  return (
+    <div className={cn(baseStyles, variants[variant], className)} />
+  );
+};
+
+// Add shimmer animation to globals.css
+const shimmerKeyframes = `
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+`;

frontend/components/ui/LoadingSpinner.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { cn } from "../../lib/utils/cn";
+
+interface LoadingSpinnerProps {
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
+  size = "md",
+  className,
+}) => {
+  const sizes = {
+    sm: "h-4 w-4",
+    md: "h-8 w-8",
+    lg: "h-12 w-12",
+  };
+  
+  return (
+    <div className={cn("flex items-center justify-center relative", className)}>
+      {/* Outer glow */}
+      <div className={cn("absolute rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 opacity-20 animate-ping", sizes[size])}></div>
+      
+      {/* Main spinner */}
+      <svg
+        className={cn("animate-spin relative z-10", sizes[size])}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <defs>
+          <linearGradient id="spinner-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#3b82f6" />
+            <stop offset="50%" stopColor="#06b6d4" />
+            <stop offset="100%" stopColor="#ec4899" />
+          </linearGradient>
+        </defs>
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        ></circle>
+        <path
+          className="opacity-75"
+          fill="url(#spinner-gradient)"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+    </div>
+  );
+};