Add product scraping functionality and AI concept filling

- Introduced a new `.gitignore` file to exclude environment and build files.
- Added `scraper.py` to fetch product data from Amalfa product pages.
- Implemented `ai_filler.py` to suggest target audience, competitors, and psychological triggers based on scraped data.
- Updated `requirements.txt` to include `requests` and `beautifulsoup4` for web scraping.
- Enhanced `main.py` to support a new API endpoint for scraping and filling product data.
- Modified frontend to include a URL input for scraping product details and auto-filling form fields.

.gitignore

@@ -0,0 +1,56 @@
+# Environment and secrets
+.env
+.env.local
+.env.*.local
+*.pem
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Virtual environments
+venv/
+.venv/
+env/
+.env/
+
+# IDE and editors
+.idea/
+.vscode/
+*.swp
+*.swo
+*~
+.project
+.settings/
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs and debug
+*.log
+.pytest_cache/
+.coverage
+htmlcov/
+
+# Optional
+*.bak
+*.tmp

backend/ai_filler.py

@@ -0,0 +1,117 @@
+"""
+AI module to fill concept fields (target_audience, competitors, psychological_triggers) 
+based on scraped product data.
+"""
+from openai import OpenAI
+from dotenv import load_dotenv
+import os
+import json
+
+load_dotenv()
+
+OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
+
+from backend.pydantic_schema import TARGET_AUDIENCE_OPTIONS
+
+
+def _normalize_audience(s: str) -> str:
+    """Normalize for matching: lowercase, strip, normalize dashes/hyphens."""
+    if not s or not isinstance(s, str):
+        return ""
+    s = s.strip().lower()
+    # Normalize various dash/hyphen characters to a single hyphen
+    for c in ("–", "—", "−", "‑"):
+        s = s.replace(c, "-")
+    return s
+
+
+def _match_audience(ai_value: str) -> str | None:
+    """Return the exact TARGET_AUDIENCE_OPTIONS entry that matches ai_value, or None."""
+    if not ai_value:
+        return None
+    norm = _normalize_audience(ai_value)
+    if not norm:
+        return None
+    for opt in TARGET_AUDIENCE_OPTIONS:
+        if _normalize_audience(opt) == norm:
+            return opt
+        if norm in _normalize_audience(opt) or _normalize_audience(opt) in norm:
+            return opt
+    return None
+
+
+def fill_concept_fields(product_data: dict) -> dict:
+    """
+    Use AI to suggest target_audience, competitors, and psychological_triggers 
+    based on scraped product data.
+    
+    Args:
+        product_data: Dictionary with product_name, description, price, category, etc.
+    
+    Returns:
+        Dictionary with suggested target_audience, competitors, psychological_triggers
+    """
+    system_prompt = """You are an expert marketing researcher for Amalfa, a contemporary jewellery brand in India.
+Your task is to analyze product data and suggest:
+1. Target Audience: Select 3-5 most relevant audiences from the provided list
+2. Competitors: List 3-5 direct competitors or similar brands
+3. Psychological Triggers: Suggest 3-5 psychological triggers that would resonate with the target audience for this product
+
+Be specific and data-driven. Consider the product category, price point, and description."""
+
+    available_audiences = ", ".join(TARGET_AUDIENCE_OPTIONS)
+    
+    user_prompt = f"""Product Data:
+- Product Name: {product_data.get('product_name', 'N/A')}
+- Category: {product_data.get('category', 'N/A')}
+- Description: {product_data.get('description', 'N/A')}
+- Price: {product_data.get('price', 'N/A')}
+- Brand: {product_data.get('brand', 'Amalfa')}
+
+Available Target Audience Options:
+{available_audiences}
+
+Please provide a JSON response with the following structure:
+{{
+    "target_audience": ["audience1", "audience2", "audience3"],
+    "competitors": ["competitor1", "competitor2", "competitor3"],
+    "psychological_triggers": "trigger1, trigger2, trigger3"
+}}
+
+Make sure target_audience values exactly match the available options."""
+
+    try:
+        client = OpenAI(api_key=OPENAI_API_KEY)
+        response = client.chat.completions.create(
+            model="gpt-4o",
+            messages=[
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": user_prompt}
+            ],
+            response_format={"type": "json_object"},
+            temperature=0.7
+        )
+        
+        result = json.loads(response.choices[0].message.content)
+        
+        # Validate target_audience: map each AI suggestion to exact option string
+        validated_audiences = []
+        seen = set()
+        for audience in result.get("target_audience", []):
+            matched = _match_audience(audience if isinstance(audience, str) else str(audience))
+            if matched and matched not in seen:
+                seen.add(matched)
+                validated_audiences.append(matched)
+        
+        return {
+            "target_audience": validated_audiences[:5] if validated_audiences else [],
+            "competitors": result.get("competitors", [])[:5],
+            "psychological_triggers": result.get("psychological_triggers", "")
+        }
+    except Exception as e:
+        # Fallback if AI fails
+        return {
+            "target_audience": [],
+            "competitors": [],
+            "psychological_triggers": ""
+        }

backend/claude_method.py

@@ -33,7 +33,12 @@ def _add_additional_properties_false(schema: dict) -> dict:
     return schema
 
 
-def researcher_claude(target_audience: str, product_category: str, product_description: str):
+def researcher_claude(
+    target_audience: str,
+    product_category: str,
+    product_description: str,
+    count: int = 5,
+):
     """
     Claude-based researcher function using native structured outputs.
 
@@ -41,16 +46,21 @@ def researcher_claude(target_audience: str, product_category: str, product_descr
         target_audience: Target audience from the predefined list
         product_category: Product category (e.g., "ring", "bangles")
         product_description: Description of the product
+        count: Number of psychology triggers (concepts/angles) to generate
 
     Returns:
         list[ImageAdEssentials]: List of psychology triggers, angles, and concepts
     """
-    # Initialize Claude client
+    if not ANTHROPIC_API_KEY:
+        raise ValueError("ANTHROPIC_API_KEY is not set in the environment.")
+
     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)
+    user_prompt = get_user_prompt(
+        target_audience, product_category, product_description, count
+    )
 
     # Build JSON schema from Pydantic model and add required additionalProperties: false
     json_schema = ImageAdEssentialsOutput.model_json_schema()
@@ -59,7 +69,7 @@ def researcher_claude(target_audience: str, product_category: str, product_descr
     # Use Claude's native structured outputs via output_config.format
     message = claude_client.messages.create(
         model="claude-opus-4-6",
-        max_tokens=1024,
+        max_tokens=4096,
         system=system_prompt,
         messages=[
             {

backend/gpt_method.py

@@ -1,7 +1,8 @@
 """
 GPT-based researcher implementation.
-Uses the latest Responses API with text_format for structured outputs.
+Uses Chat Completions API with response_format for structured JSON output.
 """
+import json
 from openai import OpenAI
 from backend.pydantic_schema import ImageAdEssentialsOutput
 from backend.prompt import get_system_prompt, get_user_prompt
@@ -12,41 +13,80 @@ load_dotenv()
 
 OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
 
+# JSON schema for strict structured output (matches ImageAdEssentialsOutput)
+RESEARCH_RESPONSE_SCHEMA = {
+    "type": "object",
+    "properties": {
+        "output": {
+            "type": "array",
+            "items": {
+                "type": "object",
+                "properties": {
+                    "phsychologyTriggers": {"type": "string"},
+                    "angles": {"type": "array", "items": {"type": "string"}},
+                    "concepts": {"type": "array", "items": {"type": "string"}},
+                },
+                "required": ["phsychologyTriggers", "angles", "concepts"],
+                "additionalProperties": False,
+            },
+        }
+    },
+    "required": ["output"],
+    "additionalProperties": False,
+}
 
-def researcher_gpt(target_audience: str, product_category: str, product_description: str):
+
+def researcher_gpt(
+    target_audience: str,
+    product_category: str,
+    product_description: str,
+    count: int = 5,
+):
     """
-    GPT-based researcher function using the Responses API.
+    GPT-based researcher function using Chat Completions with structured output.
 
     Args:
         target_audience: Target audience from the predefined list
         product_category: Product category (e.g., "ring", "bangles")
         product_description: Description of the product
+        count: Number of psychology triggers (concepts/angles) to generate
 
     Returns:
         list[ImageAdEssentials]: List of psychology triggers, angles, and concepts
     """
-    # Initialize GPT client
-    gpt_client = OpenAI(api_key=OPENAI_API_KEY)
+    if not OPENAI_API_KEY:
+        raise ValueError("OPENAI_API_KEY is not set in the environment.")
 
-    # Get prompts
+    gpt_client = OpenAI(api_key=OPENAI_API_KEY)
     system_prompt = get_system_prompt()
-    user_prompt = get_user_prompt(target_audience, product_category, product_description)
+    user_prompt = get_user_prompt(
+        target_audience, product_category, product_description, count
+    )
 
-    # Use the Responses API with text_format for structured output
-    response = gpt_client.responses.parse(
+    response = gpt_client.chat.completions.create(
         model="gpt-4o",
-        instructions=system_prompt,
-        input=[
-            {
-                "role": "user",
-                "content": user_prompt
-            }
+        messages=[
+            {"role": "system", "content": system_prompt},
+            {"role": "user", "content": user_prompt},
         ],
-        text_format=ImageAdEssentialsOutput,
+        response_format={
+            "type": "json_schema",
+            "json_schema": {
+                "name": "image_ad_essentials_output",
+                "strict": True,
+                "schema": RESEARCH_RESPONSE_SCHEMA,
+            },
+        },
+        temperature=0.7,
     )
 
-    # output_parsed returns the Pydantic model directly
-    if response.output_parsed:
-        return response.output_parsed.output
-    else:
-        raise ValueError("GPT returned an unparseable response.")
+    msg = response.choices[0].message
+    if not msg.content:
+        raise ValueError("GPT returned an empty response.")
+
+    try:
+        data = json.loads(msg.content)
+        parsed = ImageAdEssentialsOutput(**data)
+        return parsed.output
+    except (json.JSONDecodeError, TypeError) as e:
+        raise ValueError(f"GPT returned invalid JSON: {e}") from e

backend/main.py

@@ -11,6 +11,8 @@ 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
+from backend.scraper import scrape_product
+from backend.ai_filler import fill_concept_fields
 
 app = FastAPI(title="Image Ad Essentials Researcher")
 
@@ -30,9 +32,14 @@ class ResearchRequest(BaseModel):
     target_audience: list[str]
     product_category: str
     product_description: str
+    count: int = 5  # number of concepts/angles (psychology triggers) to generate
     method: Literal["gpt", "claude"]
 
 
+class ScrapeProductRequest(BaseModel):
+    url: str
+
+
 class AudienceResult(BaseModel):
     target_audience: str
     output: list[ImageAdEssentials]
@@ -50,6 +57,35 @@ def get_target_audiences():
     return {"audiences": TARGET_AUDIENCE_OPTIONS}
 
 
+@app.post("/api/scrape-product")
+def scrape_and_fill_product(req: ScrapeProductRequest):
+    """
+    Scrape product data from URL and use AI to fill concept fields.
+    Returns product data with suggested target_audience, competitors, and psychological_triggers.
+    """
+    try:
+        # Scrape product data
+        product_data = scrape_product(req.url)
+        
+        # Use AI to fill concept fields
+        concept_data = fill_concept_fields(product_data)
+        
+        # Merge scraped data with AI-filled concepts
+        result = {
+            **product_data,
+            "target_audience": concept_data["target_audience"],
+            "competitors": concept_data["competitors"],
+            "psychological_triggers": concept_data["psychological_triggers"]
+        }
+        
+        return result
+        
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"An error occurred while scraping: {str(e)}")
+
+
 @app.post("/api/research", response_model=ResearchResponse)
 def run_research(req: ResearchRequest):
     """
@@ -62,11 +98,11 @@ def run_research(req: ResearchRequest):
         for audience in req.target_audience:
             if req.method == "gpt":
                 result = researcher_gpt(
-                    audience, req.product_category, req.product_description
+                    audience, req.product_category, req.product_description, req.count
                 )
             elif req.method == "claude":
                 result = researcher_claude(
-                    audience, req.product_category, req.product_description
+                    audience, req.product_category, req.product_description, req.count
                 )
             else:
                 raise HTTPException(status_code=400, detail="Invalid method. Use 'gpt' or 'claude'.")
@@ -78,7 +114,10 @@ def run_research(req: ResearchRequest):
     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)}")
+        detail = str(e)
+        if not detail.strip():
+            detail = repr(e)
+        raise HTTPException(status_code=500, detail=detail)
 
 
 # --- Serve frontend static files (MUST be after API routes) ---

backend/prompt.py

@@ -17,18 +17,25 @@ def get_system_prompt() -> str:
                     User will provide you the category on which he needs to run the ads, his requirement, product description and what is target audience."""
 
 
-def get_user_prompt(target_audience: str, product_category: str, product_description: str) -> str:
+def get_user_prompt(
+    target_audience: str,
+    product_category: str,
+    product_description: str,
+    count: int = 5,
+) -> str:
     """
     Returns the user prompt with the provided inputs.
-    
+
     Args:
         target_audience: Target audience(s), comma-separated
         product_category: Product category (e.g., "ring", "bangles")
         product_description: Description of the product
+        count: Number of psychology triggers (each with angles and concepts) to generate
     """
     return f"""Following are the inputs:
     Product Category: {product_category}
     Target Audience: {target_audience}
     Product Description: {product_description}
-    
-    Provide the different psychology triggers, angles and concept based on the given input."""
+
+    Provide exactly {count} psychology triggers. For each trigger, provide multiple ad angles and ad concepts.
+    Output exactly {count} items in the required format, each with one psychology trigger, and a list of angles and a list of concepts."""

backend/scraper.py

@@ -0,0 +1,152 @@
+"""
+Scrape product data from an Amalfa product page URL.
+"""
+import json
+import re
+from typing import Any
+from urllib.parse import urlparse
+
+import requests
+from bs4 import BeautifulSoup
+
+
+def _clean_text(s: str) -> str:
+    if not s:
+        return ""
+    return " ".join(s.split()).strip()
+
+
+def _extract_price_from_text(text: str) -> str:
+    """Find first price like Rs 1,299 or ₹1299."""
+    if not text:
+        return ""
+    # Rs 1,299.00 or ₹1,299 or Rs. 1299
+    m = re.search(r"(?:Rs\.?|₹)\s*([\d,]+(?:\.\d{2})?)", text, re.I)
+    if m:
+        return m.group(0).strip()
+    m = re.search(r"[\d,]+(?:\.\d{2})?", text)
+    if m:
+        return m.group(0)
+    return ""
+
+
+def scrape_product(url: str) -> dict[str, Any]:
+    """
+    Fetch an Amalfa product page and extract product_name, description, price, offers, product_images, brand, category.
+    Strategy fields (target_audience, competitors, psychological_triggers) and show_product are left empty for AI / user.
+    """
+    parsed = urlparse(url)
+    if not parsed.scheme or not parsed.netloc:
+        raise ValueError(f"Invalid URL: {url}")
+
+    headers = {
+        "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+        "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
+        "Accept-Language": "en-IN,en;q=0.9",
+    }
+    resp = requests.get(url, headers=headers, timeout=15)
+    resp.raise_for_status()
+    html = resp.text
+    soup = BeautifulSoup(html, "html.parser")
+
+    product: dict[str, Any] = {
+        "product_name": "",
+        "description": "",
+        "price": "",
+        "offers": "",
+        "product_images": "",
+        "brand": "Amalfa",
+        "category": "",
+        "target_audience": "",
+        "competitors": "",
+        "psychological_triggers": "",
+        "show_product": None,
+    }
+
+    # 1. JSON-LD (Shopify and many stores)
+    for script in soup.find_all("script", type="application/ld+json"):
+        try:
+            data = json.loads(script.string or "{}")
+            if isinstance(data, dict) and data.get("@type") == "Product":
+                product["product_name"] = _clean_text(data.get("name") or "")
+                product["description"] = _clean_text(data.get("description") or "")
+                if data.get("offers") and isinstance(data["offers"], dict):
+                    product["price"] = str(data["offers"].get("price", ""))
+                elif isinstance(data.get("offers"), list) and data["offers"]:
+                    product["price"] = str(data["offers"][0].get("price", ""))
+                if data.get("image"):
+                    imgs = data["image"] if isinstance(data["image"], list) else [data["image"]]
+                    # Collect up to 10 image URLs (product gallery)
+                    product["product_images"] = ", ".join(str(u).strip() for u in imgs[:10] if u)
+                if product["product_name"] and product["price"]:
+                    break
+        except (json.JSONDecodeError, TypeError):
+            continue
+
+    # 2. Meta tags (og:title, og:description, og:image)
+    if not product["product_name"]:
+        meta = soup.find("meta", property="og:title")
+        if meta and meta.get("content"):
+            product["product_name"] = _clean_text(meta["content"].split("|")[0].strip())
+    if not product["description"]:
+        meta = soup.find("meta", property="og:description") or soup.find("meta", attrs={"name": "description"})
+        if meta and meta.get("content"):
+            product["description"] = _clean_text(meta["content"])
+    if not product["product_images"]:
+        meta = soup.find("meta", property="og:image")
+        if meta and meta.get("content"):
+            product["product_images"] = meta["content"].strip()
+
+    # 3. Fallback: H1, price in body, description section
+    if not product["product_name"]:
+        h1 = soup.find("h1")
+        if h1:
+            product["product_name"] = _clean_text(h1.get_text())
+
+    if not product["price"]:
+        # Common Shopify / Amalfa price classes
+        for sel in ["[class*='price']", ".product__price", "[data-product-price]", ".price-item"]:
+            el = soup.select_one(sel)
+            if el:
+                product["price"] = _extract_price_from_text(el.get_text())
+                if product["price"]:
+                    break
+        if not product["price"]:
+            product["price"] = _extract_price_from_text(soup.get_text())
+
+    if not product["description"]:
+        desc_el = (
+            soup.find("div", class_=re.compile(r"description|product-description|product__description", re.I))
+            or soup.find("meta", attrs={"name": "description"})
+        )
+        if desc_el:
+            product["description"] = _clean_text(desc_el.get_text() if hasattr(desc_el, "get_text") else (desc_el.get("content") or ""))
+
+    if not product["product_images"]:
+        # Product gallery images: collect up to 10 URLs (no break after first)
+        seen = set()
+        for img in soup.select("img[src*='cdn.shopify'], img[data-src*='shopify'], img[src*='amalfa']")[:20]:
+            if len(seen) >= 10:
+                break
+            src = (img.get("data-src") or img.get("src") or "").split("?")[0].strip()
+            if src and src.startswith("http") and src not in seen:
+                seen.add(src)
+                product["product_images"] = (product["product_images"] + ", " + src).strip(", ")
+
+    # Infer category from URL path (e.g. /collections/earrings/...) or leave for AI
+    path = (parsed.path or "").lower()
+    if "earring" in path:
+        product["category"] = product["category"] or "Earrings"
+    elif "necklace" in path or "pendant" in path or "choker" in path:
+        product["category"] = product["category"] or "Necklaces"
+    elif "ring" in path:
+        product["category"] = product["category"] or "Rings"
+    elif "bracelet" in path or "bangle" in path:
+        product["category"] = product["category"] or "Bracelets"
+    elif "anklet" in path:
+        product["category"] = product["category"] or "Anklets"
+
+    if not product["category"]:
+        product["category"] = "Jewellery"
+
+    return product

frontend/index.html

@@ -31,9 +31,28 @@
         <!-- Form Card -->
         <div class="card form-card">
             <form id="researchForm">
+                <!-- Product URL Scraper -->
+                <div class="field">
+                    <label for="productUrl">Product URL <span class="label-hint">(optional — fills category, description &amp; target audience)</span></label>
+                    <div class="url-input-group">
+                        <input
+                            type="url"
+                            id="productUrl"
+                            placeholder="https://amalfa.in/products/..."
+                            class="url-input"
+                        />
+                        <button type="button" class="scrape-btn" id="scrapeBtn">
+                            <span class="scrape-btn-text">Scrape & Fill</span>
+                            <span class="scrape-btn-loader hidden">
+                                <span class="spinner"></span>
+                            </span>
+                        </button>
+                    </div>
+                </div>
+
                 <!-- Target Audience (multi-select) -->
                 <div class="field">
-                    <label>Target Audience <span class="label-hint">(select one or more)</span></label>
+                    <label>Target Audience <span class="label-hint">(select one or more — or use Scrape &amp; Fill above)</span></label>
                     <div class="multiselect" id="audienceMultiselect">
                         <div class="multiselect-selected" id="selectedAudiences">
                             <span class="multiselect-placeholder">Loading audiences…</span>
@@ -67,6 +86,19 @@
                     ></textarea>
                 </div>
 
+                <!-- Number of concepts & angles -->
+                <div class="field">
+                    <label for="conceptsCount">Number of concepts &amp; angles <span class="label-hint">(triggers to generate)</span></label>
+                    <input
+                        type="number"
+                        id="conceptsCount"
+                        min="1"
+                        max="15"
+                        value="5"
+                        placeholder="e.g. 5"
+                    />
+                </div>
+
                 <!-- Method Toggle -->
                 <div class="field">
                     <label>AI Method</label>

frontend/script.js

@@ -5,6 +5,11 @@ const API_BASE = "";
 const form = document.getElementById("researchForm");
 const categoryInput = document.getElementById("productCategory");
 const descriptionInput = document.getElementById("productDescription");
+const productUrlInput = document.getElementById("productUrl");
+const conceptsCountInput = document.getElementById("conceptsCount");
+const scrapeBtn = document.getElementById("scrapeBtn");
+const scrapeBtnText = scrapeBtn.querySelector(".scrape-btn-text");
+const scrapeBtnLoader = scrapeBtn.querySelector(".scrape-btn-loader");
 const submitBtn = document.getElementById("submitBtn");
 const btnText = submitBtn.querySelector(".btn-text");
 const btnLoader = submitBtn.querySelector(".btn-loader");
@@ -128,16 +133,88 @@ toggleBtns.forEach((btn) => {
   });
 });
 
+// ===== Scrape Product =====
+scrapeBtn.addEventListener("click", async () => {
+  const url = productUrlInput.value.trim();
+  
+  if (!url) {
+    showError("Please enter a product URL.");
+    return;
+  }
+
+  // Basic URL validation
+  try {
+    new URL(url);
+  } catch (e) {
+    showError("Please enter a valid URL.");
+    return;
+  }
+
+  hideError();
+  setScrapeLoading(true);
+
+  try {
+    const res = await fetch(`${API_BASE}/api/scrape-product`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ url }),
+    });
+
+    if (!res.ok) {
+      const errorData = await res.json().catch(() => ({}));
+      throw new Error(errorData.detail || "Failed to scrape product data.");
+    }
+
+    const data = await res.json();
+
+    // Auto-fill form fields: category, description, and target audience
+    if (data.category) {
+      categoryInput.value = data.category;
+    }
+    if (data.description) {
+      descriptionInput.value = data.description;
+    }
+    // Scrape & Fill also fills target audience from AI suggestions
+    if (data.target_audience && data.target_audience.length > 0) {
+      selectedAudiences = [...data.target_audience];
+      renderOptions(searchInput.value);
+      renderSelected();
+    }
+
+    const audienceNote = (data.target_audience && data.target_audience.length > 0)
+      ? ` Target audience filled (${data.target_audience.length} selected).`
+      : "";
+    showError(`✓ Product data scraped successfully!${data.product_name ? ` Found: ${data.product_name}.` : ""}${audienceNote}`, "success");
+    
+    // Clear URL input after successful scrape
+    productUrlInput.value = "";
+
+  } catch (err) {
+    showError(err.message || "Something went wrong while scraping the product.");
+  } finally {
+    setScrapeLoading(false);
+  }
+});
+
+function setScrapeLoading(isLoading) {
+  scrapeBtn.disabled = isLoading;
+  scrapeBtnText.classList.toggle("hidden", isLoading);
+  scrapeBtnLoader.classList.toggle("hidden", !isLoading);
+}
+
 // ===== Form Submit =====
 form.addEventListener("submit", async (e) => {
   e.preventDefault();
   hideError();
   hideResults();
 
+  const count = Math.min(15, Math.max(1, parseInt(conceptsCountInput.value, 10) || 5));
+
   const payload = {
     target_audience: selectedAudiences,
     product_category: categoryInput.value.trim(),
     product_description: descriptionInput.value.trim(),
+    count,
     method: selectedMethod,
   };
 
@@ -161,7 +238,11 @@ form.addEventListener("submit", async (e) => {
       body: JSON.stringify(payload),
     });
 
-    if (!res.ok) throw new Error("Server error");
+    if (!res.ok) {
+      const errData = await res.json().catch(() => ({}));
+      const msg = Array.isArray(errData.detail) ? errData.detail.map((e) => e.msg || e).join("; ") : (errData.detail || "Server error");
+      throw new Error(msg);
+    }
 
     const data = await res.json();
     renderResults(data.results, selectedMethod);
@@ -278,9 +359,20 @@ function setLoading(isLoading) {
   btnLoader.classList.toggle("hidden", !isLoading);
 }
 
-function showError(msg) {
+function showError(msg, type = "error") {
   errorBanner.textContent = msg;
   errorBanner.classList.remove("hidden");
+  
+  // Update styling based on type
+  if (type === "success") {
+    errorBanner.style.background = "rgba(16, 163, 127, 0.1)";
+    errorBanner.style.borderColor = "rgba(16, 163, 127, 0.3)";
+    errorBanner.style.color = "#10a37f";
+  } else {
+    errorBanner.style.background = "rgba(232, 84, 84, 0.1)";
+    errorBanner.style.borderColor = "rgba(232, 84, 84, 0.3)";
+    errorBanner.style.color = "var(--danger)";
+  }
 }
 
 function hideError() {

frontend/styles.css

@@ -115,6 +115,47 @@ body {
   min-height: 80px;
 }
 
+/* ===== URL Input Group ===== */
+.url-input-group {
+  display: flex;
+  gap: 12px;
+}
+
+.url-input {
+  flex: 1;
+}
+
+.scrape-btn {
+  padding: 12px 20px;
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-sm);
+  background: rgba(201, 164, 108, 0.1);
+  color: var(--accent-light);
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.scrape-btn:hover {
+  background: rgba(201, 164, 108, 0.2);
+  border-color: var(--accent-light);
+}
+
+.scrape-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.scrape-btn-loader {
+  display: inline-flex;
+  align-items: center;
+}
+
 /* ===== Toggle Group ===== */
 .toggle-group {
   display: flex;

requirements.txt

@@ -4,3 +4,5 @@ openai
 anthropic
 pydantic
 python-dotenv
+requests
+beautifulsoup4