Upload 16 files

Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY backend/ ./backend/
+COPY frontend/ ./frontend/
+
+EXPOSE 7860
+
+CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "7860"]

backend/claude_method.py

@@ -0,0 +1,89 @@
+"""
+Claude-based researcher implementation.
+Uses output_config.format for native structured outputs.
+Ref: https://platform.claude.com/docs/en/build-with-claude/structured-outputs
+"""
+import json
+from anthropic import Anthropic
+from backend.pydantic_schema import ImageAdEssentialsOutput
+from backend.prompt import get_system_prompt, get_user_prompt
+from dotenv import load_dotenv
+import os
+
+load_dotenv()
+
+ANTHROPIC_API_KEY = os.getenv("ANTHROPIC_API_KEY")
+
+
+def _add_additional_properties_false(schema: dict) -> dict:
+    """
+    Recursively add 'additionalProperties': false to all object types.
+    Required by Claude's structured outputs.
+    """
+    if isinstance(schema, dict):
+        if schema.get("type") == "object":
+            schema["additionalProperties"] = False
+        for value in schema.values():
+            if isinstance(value, dict):
+                _add_additional_properties_false(value)
+            elif isinstance(value, list):
+                for item in value:
+                    if isinstance(item, dict):
+                        _add_additional_properties_false(item)
+    return schema
+
+
+def researcher_claude(target_audience: str, product_category: str, product_description: str):
+    """
+    Claude-based researcher function using native structured outputs.
+
+    Args:
+        target_audience: Target audience from the predefined list
+        product_category: Product category (e.g., "ring", "bangles")
+        product_description: Description of the product
+
+    Returns:
+        list[ImageAdEssentials]: List of psychology triggers, angles, and concepts
+    """
+    # Initialize Claude client
+    claude_client = Anthropic(api_key=ANTHROPIC_API_KEY)
+
+    # Get prompts
+    system_prompt = get_system_prompt()
+    user_prompt = get_user_prompt(target_audience, product_category, product_description)
+
+    # Build JSON schema from Pydantic model and add required additionalProperties: false
+    json_schema = ImageAdEssentialsOutput.model_json_schema()
+    json_schema = _add_additional_properties_false(json_schema)
+
+    # Use Claude's native structured outputs via output_config.format
+    message = claude_client.messages.create(
+        model="claude-opus-4-6",
+        max_tokens=1024,
+        system=system_prompt,
+        messages=[
+            {
+                "role": "user",
+                "content": user_prompt
+            }
+        ],
+        output_config={
+            "format": {
+                "type": "json_schema",
+                "schema": json_schema
+            }
+        }
+    )
+
+    # Check for safety refusal
+    if message.stop_reason == "refusal":
+        raise ValueError("Claude refused the request.")
+
+    # Check if response was truncated
+    if message.stop_reason == "max_tokens":
+        raise ValueError("Claude response was truncated — increase max_tokens.")
+
+    # Parse the JSON response and validate with Pydantic
+    response_data = json.loads(message.content[0].text)
+    output = ImageAdEssentialsOutput(**response_data)
+    return output.output

backend/gpt_method.py

@@ -0,0 +1,52 @@
+"""
+GPT-based researcher implementation.
+Uses the latest Responses API with text_format for structured outputs.
+"""
+from openai import OpenAI
+from backend.pydantic_schema import ImageAdEssentialsOutput
+from backend.prompt import get_system_prompt, get_user_prompt
+from dotenv import load_dotenv
+import os
+
+load_dotenv()
+
+OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
+
+
+def researcher_gpt(target_audience: str, product_category: str, product_description: str):
+    """
+    GPT-based researcher function using the Responses API.
+
+    Args:
+        target_audience: Target audience from the predefined list
+        product_category: Product category (e.g., "ring", "bangles")
+        product_description: Description of the product
+
+    Returns:
+        list[ImageAdEssentials]: List of psychology triggers, angles, and concepts
+    """
+    # Initialize GPT client
+    gpt_client = OpenAI(api_key=OPENAI_API_KEY)
+
+    # Get prompts
+    system_prompt = get_system_prompt()
+    user_prompt = get_user_prompt(target_audience, product_category, product_description)
+
+    # Use the Responses API with text_format for structured output
+    response = gpt_client.responses.parse(
+        model="gpt-4o",
+        instructions=system_prompt,
+        input=[
+            {
+                "role": "user",
+                "content": user_prompt
+            }
+        ],
+        text_format=ImageAdEssentialsOutput,
+    )
+
+    # output_parsed returns the Pydantic model directly
+    if response.output_parsed:
+        return response.output_parsed.output
+    else:
+        raise ValueError("GPT returned an unparseable response.")

backend/main.py

@@ -0,0 +1,81 @@
+"""
+FastAPI backend for the Image Ad Essentials Researcher.
+"""
+import json
+from typing import Literal
+from pathlib import Path
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from backend.pydantic_schema import ImageAdEssentials, TARGET_AUDIENCE_OPTIONS
+from backend.gpt_method import researcher_gpt
+from backend.claude_method import researcher_claude
+
+app = FastAPI(title="Image Ad Essentials Researcher")
+
+# Allow frontend to call the API
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+# --- Request / Response schemas ---
+
+class ResearchRequest(BaseModel):
+    target_audience: str
+    product_category: str
+    product_description: str
+    method: Literal["gpt", "claude"]
+
+
+class ResearchResponse(BaseModel):
+    output: list[ImageAdEssentials]
+
+
+# --- Endpoints ---
+
+@app.get("/api/target-audiences")
+def get_target_audiences():
+    """Return the predefined list of target audience options."""
+    return {"audiences": TARGET_AUDIENCE_OPTIONS}
+
+
+@app.post("/api/research", response_model=ResearchResponse)
+def run_research(req: ResearchRequest):
+    """
+    Run the researcher using the selected method (GPT or Claude).
+    Returns a list of psychology triggers with angles and concepts.
+    """
+    try:
+        if req.method == "gpt":
+            result = researcher_gpt(
+                req.target_audience, req.product_category, req.product_description
+            )
+        elif req.method == "claude":
+            result = researcher_claude(
+                req.target_audience, req.product_category, req.product_description
+            )
+        else:
+            raise HTTPException(status_code=400, detail="Invalid method. Use 'gpt' or 'claude'.")
+
+        return ResearchResponse(output=result)
+
+    except ValueError as e:
+        raise HTTPException(status_code=500, detail=str(e))
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"An error occurred: {str(e)}")
+
+
+# --- Serve frontend static files (MUST be after API routes) ---
+FRONTEND_DIR = Path(__file__).resolve().parent.parent / "frontend"
+app.mount("/", StaticFiles(directory=str(FRONTEND_DIR), html=True), name="frontend")
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

backend/prompt.py

@@ -0,0 +1,41 @@
+"""
+Prompt templates for the researcher functions.
+"""
+
+def get_system_prompt() -> str:
+    """
+    Returns the system prompt for both GPT and Claude methods.
+    """
+    return """You are the researcher for the e-commerce brand company which does research on trending angles, concepts and psychology trigers based on the user input.
+    The e-commerce brand company name is Amalfa which is a contemporary jewellery brand known in the Indian market for its demi-fine and fashion jewellery collections.
+    Amalfa aims to be a style-forward, expressive brand for today's youth and modern women, blending trend-driven design with accessible pricing.
+    A psychology trigger is an emotional or cognitive stimulus that pushes someone toward action—clicking, signing up, or buying—before logic kicks in.
+    An ad angle is the reason someone should care right now. Same product → different reasons to click → different angles.
+    An ad concept is the creative execution style or storyline you use to deliver an angle.
+    
+    Keeping in mind all this, make sure you provide different angles and concepts we can try based on the phsychology triggers for the image ads for the given input based on e-commerce brand.
+    User will provide you the category on which he needs to run the ads, his requirement, product description and what is target audience.
+    
+    Important output guidelines:
+    - Provide exactly 3 psychology triggers, each as a separate item.
+    - Each psychology trigger should be a short label (e.g. "Scarcity & FOMO", "Social Proof", "Self-Reward"). Do NOT write long explanations.
+    - For each trigger, provide 3 short ad angles (one line each).
+    - For each trigger, provide 3 short ad concepts (one line each).
+    - Keep the entire response concise and actionable."""
+
+
+def get_user_prompt(target_audience: str, product_category: str, product_description: str) -> str:
+    """
+    Returns the user prompt with the provided inputs.
+    
+    Args:
+        target_audience: Target audience from the predefined list
+        product_category: Product category (e.g., "ring", "bangles")
+        product_description: Description of the product
+    """
+    return f"""Following are the inputs:
+    Product Category: {product_category}
+    Target Audience: {target_audience}
+    Product Description: {product_description}
+    
+    Provide the different phsychology triggers, angles and concept based on the given input."""

backend/pydantic_schema.py

@@ -0,0 +1,113 @@
+from pydantic import BaseModel
+
+# Pydantic Models
+class ImageAdEssentials(BaseModel):
+    phsychologyTriggers: str
+    angles: list[str]
+    concepts: list[str]
+
+class ImageAdEssentialsOutput(BaseModel):
+    output: list[ImageAdEssentials]
+
+
+# Target Audience Options
+TARGET_AUDIENCE_OPTIONS = [
+    "Women 18–24",
+    "Women 25–34",
+    "Women 35–44",
+    "Urban Tier 1 Women",
+    "Urban Tier 2 Women",
+    "Working Professionals",
+    "Corporate Women",
+    "Women Entrepreneurs",
+    "Disposable Income ₹30k+",
+    "Living Independently",
+    "Married, No Kids",
+    "Newly Married",
+    "Single Women",
+    "Monthly Online Shoppers",
+    "English Digital-first",
+    "Demi-fine Jewelry Buyers",
+    "Minimalist Lovers",
+    "Statement Buyers",
+    "Everyday Wear Buyers",
+    "Occasion Shoppers",
+    "Layering Lovers",
+    "Choker Buyers",
+    "CZ Jewelry Fans",
+    "Anti-tarnish Seekers",
+    "Hypoallergenic Buyers",
+    "Gold Finish Lovers",
+    "Silver Finish Lovers",
+    "Indo-western Fans",
+    "Contemporary Ethnic",
+    "Sustainable Shoppers",
+    "Premium Accessories",
+    "IG Jewelry Followers",
+    "Pinterest Users",
+    "Fashion Discovery",
+    "Outfit Reel Savers",
+    "Online Jewelry Shoppers",
+    "Cart Abandoners",
+    "Instagram Shop Users",
+    "Google Shoppers",
+    "Self-Gifters",
+    "Repeat Buyers",
+    "Sale-responsive",
+    "Value Premium Buyers",
+    "₹1.5k–₹3k Buyers",
+    "COD Buyers",
+    "UPI-first",
+    "Mobile-only",
+    "D2C Followers",
+    "Instagram Trusters",
+    "Brand Switchers",
+    "Limited Edition Buyers",
+    "First-time Buyers",
+    "Impulse Buyers",
+    "Birthday Self-Gift",
+    "Anniversary Buyers",
+    "Wedding Guests",
+    "Bridesmaids",
+    "Festive Buyers",
+    "Rakhi Self-Gift",
+    "Valentine Self-love",
+    "New Year Parties",
+    "Office Parties",
+    "Vacation Shoppers",
+    "Date-night",
+    "Wedding Season",
+    "Festive Office",
+    "Outfit Completion",
+    "Reel Jewelry",
+    "Fashion Influencer Followers",
+    "Jewelry Influencer Fans",
+    "Styling Reel Fans",
+    "Vogue India",
+    "Elle India",
+    "Harper's Bazaar",
+    "Nykaa Fashion",
+    "Myntra Premium",
+    "Ajio Luxe",
+    "Fashion Page Followers",
+    "Self-love Believers",
+    "Self-rewarders",
+    "Aesthetic Buyers",
+    "Aspirational Value",
+    "Uniqueness Seekers",
+    "Anti-mass Market",
+    "Creative Women",
+    "Fashion Experimenters",
+    "Early Adopters",
+    "Global Trend Followers",
+    "Quiet Luxury Fans",
+    "Instagram-first",
+    "UGC Creators",
+    "Event Goers",
+    "Photo Dressers",
+    "Website Visitors",
+    "Product Viewers",
+    "Add-to-Cart",
+    "Past Purchasers",
+    "Top 10% LAL"
+]

frontend/index.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Amalfa · Image Ad Essentials</title>
+    <link rel="stylesheet" href="styles.css" />
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap"
+      rel="stylesheet"
+    />
+</head>
+<body>
+    <!-- Background blobs -->
+    <div class="blob blob-1"></div>
+    <div class="blob blob-2"></div>
+
+    <div class="container">
+        <!-- Header -->
+        <header class="header">
+            <div class="logo">
+                <span class="logo-icon">✦</span>
+                <span class="logo-text">Amalfa</span>
+            </div>
+            <h1 class="title">Image Ad Essentials</h1>
+            <p class="subtitle">Generate psychology-driven ad angles &amp; concepts for your jewellery campaigns</p>
+        </header>
+
+        <!-- Form Card -->
+        <div class="card form-card">
+            <form id="researchForm">
+                <!-- Target Audience -->
+                <div class="field">
+                    <label for="targetAudience">Target Audience</label>
+                    <select id="targetAudience" required>
+                        <option value="" disabled selected>Loading audiences…</option>
+                    </select>
+                </div>
+
+                <!-- Product Category -->
+                <div class="field">
+                    <label for="productCategory">Product Category</label>
+                    <input
+                        type="text"
+                        id="productCategory"
+                        placeholder="e.g. Ring, Bangles, Necklace"
+                        required
+                    />
+                </div>
+
+                <!-- Product Description -->
+                <div class="field">
+                    <label for="productDescription">Product Description</label>
+                    <textarea
+                        id="productDescription"
+                        rows="3"
+                        placeholder="e.g. Gold-plated minimalist ring with CZ stones, anti-tarnish coating"
+                        required
+                    ></textarea>
+                </div>
+
+                <!-- Method Toggle -->
+                <div class="field">
+                    <label>AI Method</label>
+                    <div class="toggle-group">
+                        <button type="button" class="toggle-btn active" data-method="gpt">
+                            <span class="toggle-icon">⚡</span> GPT
+                        </button>
+                        <button type="button" class="toggle-btn" data-method="claude">
+                            <span class="toggle-icon">🧠</span> Claude
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Submit -->
+                <button type="submit" class="submit-btn" id="submitBtn">
+                    <span class="btn-text">Generate Ad Essentials</span>
+                    <span class="btn-loader hidden">
+                        <span class="spinner"></span>
+                        Generating…
+                    </span>
+                </button>
+            </form>
+        </div>
+
+        <!-- Error banner -->
+        <div id="errorBanner" class="error-banner hidden"></div>
+
+        <!-- Results -->
+        <div id="results" class="results hidden"></div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>

frontend/script.js

@@ -0,0 +1,156 @@
+// ===== Configuration =====
+const API_BASE = "";
+
+// ===== DOM Elements =====
+const form = document.getElementById("researchForm");
+const audienceSelect = document.getElementById("targetAudience");
+const categoryInput = document.getElementById("productCategory");
+const descriptionInput = document.getElementById("productDescription");
+const submitBtn = document.getElementById("submitBtn");
+const btnText = submitBtn.querySelector(".btn-text");
+const btnLoader = submitBtn.querySelector(".btn-loader");
+const errorBanner = document.getElementById("errorBanner");
+const resultsDiv = document.getElementById("results");
+const toggleBtns = document.querySelectorAll(".toggle-btn");
+
+let selectedMethod = "gpt";
+
+// ===== Load Target Audiences =====
+async function loadAudiences() {
+  try {
+    const res = await fetch(`${API_BASE}/api/target-audiences`);
+    if (!res.ok) throw new Error("Failed to load audiences");
+    const data = await res.json();
+
+    audienceSelect.innerHTML = '<option value="" disabled selected>Select target audience</option>';
+    data.audiences.forEach((audience) => {
+      const opt = document.createElement("option");
+      opt.value = audience;
+      opt.textContent = audience;
+      audienceSelect.appendChild(opt);
+    });
+  } catch (err) {
+    console.error("Could not load audiences:", err);
+    audienceSelect.innerHTML = '<option value="" disabled selected>⚠ Could not load — is the backend running?</option>';
+  }
+}
+
+// ===== Method Toggle =====
+toggleBtns.forEach((btn) => {
+  btn.addEventListener("click", () => {
+    toggleBtns.forEach((b) => b.classList.remove("active"));
+    btn.classList.add("active");
+    selectedMethod = btn.dataset.method;
+  });
+});
+
+// ===== Form Submit =====
+form.addEventListener("submit", async (e) => {
+  e.preventDefault();
+  hideError();
+  hideResults();
+
+  const payload = {
+    target_audience: audienceSelect.value,
+    product_category: categoryInput.value.trim(),
+    product_description: descriptionInput.value.trim(),
+    method: selectedMethod,
+  };
+
+  if (!payload.target_audience || !payload.product_category || !payload.product_description) {
+    showError("Please fill in all fields.");
+    return;
+  }
+
+  setLoading(true);
+
+  try {
+    const res = await fetch(`${API_BASE}/api/research`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+
+    if (!res.ok) {
+      const errData = await res.json().catch(() => null);
+      throw new Error(errData?.detail || `Server error (${res.status})`);
+    }
+
+    const data = await res.json();
+    renderResults(data.output, selectedMethod);
+  } catch (err) {
+    showError(err.message || "Something went wrong. Please try again.");
+  } finally {
+    setLoading(false);
+  }
+});
+
+// ===== Render Results =====
+function renderResults(triggers, method) {
+  const badge = method === "gpt"
+    ? `<span class="results-badge gpt">GPT</span>`
+    : `<span class="results-badge claude">Claude</span>`;
+
+  let html = `
+    <div class="results-header">
+      <h2 class="results-title">Results</h2>
+      ${badge}
+    </div>
+  `;
+
+  triggers.forEach((item, idx) => {
+    html += `
+      <div class="trigger-card">
+        <span class="trigger-label">PsychologicalTrigger ${idx + 1}</span>
+        <h3 class="trigger-name">${escapeHtml(item.phsychologyTriggers)}</h3>
+
+        <div class="trigger-section">
+          <p class="section-title">Ad Angles</p>
+          <ul class="section-list">
+            ${item.angles.map((a) => `<li>${escapeHtml(a)}</li>`).join("")}
+          </ul>
+        </div>
+
+        <div class="trigger-section">
+          <p class="section-title">Ad Concepts</p>
+          <ul class="section-list">
+            ${item.concepts.map((c) => `<li>${escapeHtml(c)}</li>`).join("")}
+          </ul>
+        </div>
+      </div>
+    `;
+  });
+
+  resultsDiv.innerHTML = html;
+  resultsDiv.classList.remove("hidden");
+  resultsDiv.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+// ===== Helpers =====
+function setLoading(isLoading) {
+  submitBtn.disabled = isLoading;
+  btnText.classList.toggle("hidden", isLoading);
+  btnLoader.classList.toggle("hidden", !isLoading);
+}
+
+function showError(msg) {
+  errorBanner.textContent = msg;
+  errorBanner.classList.remove("hidden");
+}
+
+function hideError() {
+  errorBanner.classList.add("hidden");
+}
+
+function hideResults() {
+  resultsDiv.classList.add("hidden");
+}
+
+function escapeHtml(str) {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+// ===== Init =====
+loadAudiences();

frontend/styles.css

@@ -0,0 +1,429 @@
+/* ===== Reset & Base ===== */
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --bg: #0f0f13;
+  --surface: #1a1a22;
+  --surface-hover: #22222d;
+  --border: #2a2a38;
+  --text: #eaeaf0;
+  --text-muted: #8888a0;
+  --accent: #c9a46c;
+  --accent-light: #e0c999;
+  --accent-dark: #a07d4a;
+  --danger: #e85454;
+  --radius: 12px;
+  --radius-sm: 8px;
+}
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  overflow-x: hidden;
+  position: relative;
+}
+
+/* ===== Background Blobs ===== */
+.blob {
+  position: fixed;
+  border-radius: 50%;
+  filter: blur(120px);
+  opacity: 0.15;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.blob-1 {
+  width: 500px;
+  height: 500px;
+  background: var(--accent);
+  top: -120px;
+  right: -100px;
+}
+
+.blob-2 {
+  width: 400px;
+  height: 400px;
+  background: #6c5ce7;
+  bottom: -80px;
+  left: -100px;
+}
+
+/* ===== Container ===== */
+.container {
+  position: relative;
+  z-index: 1;
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 48px 20px 80px;
+}
+
+/* ===== Header ===== */
+.header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.logo {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.logo-icon {
+  font-size: 1.5rem;
+  color: var(--accent);
+}
+
+.logo-text {
+  font-family: "Playfair Display", serif;
+  font-size: 1.6rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: var(--accent-light);
+}
+
+.title {
+  font-family: "Playfair Display", serif;
+  font-size: 2rem;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.subtitle {
+  color: var(--text-muted);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+/* ===== Card ===== */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 32px;
+}
+
+/* ===== Form Fields ===== */
+.field {
+  margin-bottom: 24px;
+}
+
+.field label {
+  display: block;
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+}
+
+.field input,
+.field textarea,
+.field select {
+  width: 100%;
+  padding: 12px 16px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 0.95rem;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  outline: none;
+}
+
+.field input:focus,
+.field textarea:focus,
+.field select:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(201, 164, 108, 0.15);
+}
+
+.field input::placeholder,
+.field textarea::placeholder {
+  color: var(--text-muted);
+  opacity: 0.6;
+}
+
+.field select {
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%238888a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 16px center;
+  padding-right: 40px;
+}
+
+.field textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+/* ===== Toggle Group ===== */
+.toggle-group {
+  display: flex;
+  gap: 12px;
+}
+
+.toggle-btn {
+  flex: 1;
+  padding: 12px 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg);
+  color: var(--text-muted);
+  font-family: inherit;
+  font-size: 0.95rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.toggle-btn:hover {
+  background: var(--surface-hover);
+  border-color: var(--text-muted);
+}
+
+.toggle-btn.active {
+  background: rgba(201, 164, 108, 0.1);
+  border-color: var(--accent);
+  color: var(--accent-light);
+}
+
+.toggle-icon {
+  font-size: 1.1rem;
+}
+
+/* ===== Submit Button ===== */
+.submit-btn {
+  width: 100%;
+  padding: 14px 24px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
+  color: #fff;
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.1s;
+}
+
+.submit-btn:hover {
+  opacity: 0.9;
+}
+
+.submit-btn:active {
+  transform: scale(0.98);
+}
+
+.submit-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-loader {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.spinner {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.hidden {
+  display: none !important;
+}
+
+/* ===== Error Banner ===== */
+.error-banner {
+  margin-top: 24px;
+  padding: 14px 20px;
+  background: rgba(232, 84, 84, 0.1);
+  border: 1px solid rgba(232, 84, 84, 0.3);
+  border-radius: var(--radius-sm);
+  color: var(--danger);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+/* ===== Results Section ===== */
+.results {
+  margin-top: 40px;
+}
+
+.results-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.results-title {
+  font-family: "Playfair Display", serif;
+  font-size: 1.4rem;
+  font-weight: 600;
+}
+
+.results-badge {
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.results-badge.gpt {
+  background: rgba(16, 163, 127, 0.15);
+  color: #10a37f;
+}
+
+.results-badge.claude {
+  background: rgba(204, 150, 68, 0.15);
+  color: var(--accent-light);
+}
+
+/* ===== Trigger Card ===== */
+.trigger-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 28px;
+  margin-bottom: 20px;
+  animation: fadeUp 0.4s ease both;
+}
+
+.trigger-card:nth-child(2) { animation-delay: 0.1s; }
+.trigger-card:nth-child(3) { animation-delay: 0.2s; }
+.trigger-card:nth-child(4) { animation-delay: 0.3s; }
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.trigger-label {
+  display: inline-block;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--accent);
+  background: rgba(201, 164, 108, 0.1);
+  padding: 4px 10px;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+.trigger-name {
+  font-size: 1.15rem;
+  font-weight: 600;
+  margin-bottom: 20px;
+  line-height: 1.4;
+}
+
+.trigger-section {
+  margin-bottom: 16px;
+}
+
+.trigger-section:last-child {
+  margin-bottom: 0;
+}
+
+.section-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+}
+
+.section-list {
+  list-style: none;
+}
+
+.section-list li {
+  position: relative;
+  padding: 8px 0 8px 20px;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  color: var(--text);
+  border-bottom: 1px solid rgba(42, 42, 56, 0.5);
+}
+
+.section-list li:last-child {
+  border-bottom: none;
+}
+
+.section-list li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 14px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  opacity: 0.6;
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 600px) {
+  .container {
+    padding: 32px 16px 60px;
+  }
+
+  .card {
+    padding: 24px 20px;
+  }
+
+  .title {
+    font-size: 1.5rem;
+  }
+
+  .toggle-group {
+    gap: 8px;
+  }
+}

requirements.txt

@@ -0,0 +1,6 @@
+fastapi
+uvicorn[standard]
+openai
+anthropic
+pydantic
+python-dotenv