Add model evaluation, explainability, text lab, and working demo samples

ai-backend/eval_model.py

@@ -0,0 +1,130 @@
+"""
+eval_model.py — NLP Model Evaluation for Dark Patterns Detector
+================================================================
+Drop this file into the ai-backend/ folder alongside dataset.csv and run:
+
+    pip install scikit-learn pandas matplotlib seaborn
+    python eval_model.py
+
+Outputs:
+  • Classification report (precision / recall / F1 per class)
+  • Overall accuracy
+  • Confusion matrix saved as confusion_matrix.png
+  • Model comparison table (baseline vs improved TF-IDF settings)
+"""
+
+import pandas as pd
+import matplotlib
+matplotlib.use("Agg")          # headless — no display needed
+import matplotlib.pyplot as plt
+import seaborn as sns
+import os, sys
+
+from sklearn.feature_extraction.text import TfidfVectorizer
+from sklearn.linear_model import LogisticRegression
+from sklearn.pipeline import make_pipeline
+from sklearn.model_selection import train_test_split, cross_val_score
+from sklearn.metrics import (
+    classification_report, confusion_matrix, accuracy_score
+)
+
+# ── Load dataset ──────────────────────────────────────────────────────
+script_dir = os.path.dirname(os.path.abspath(__file__))
+dataset_path = os.path.join(script_dir, "dataset.csv")
+
+if not os.path.exists(dataset_path):
+    print("❌  dataset.csv not found. Make sure this script is in ai-backend/")
+    sys.exit(1)
+
+df = pd.read_csv(dataset_path).dropna(subset=["text", "Pattern Category"])
+X = df["text"]
+y = df["Pattern Category"]
+
+print(f"✅  Loaded {len(df)} samples across {y.nunique()} classes\n")
+print("Class distribution:")
+print(y.value_counts().to_string())
+print()
+
+# ── Train / test split ────────────────────────────────────────────────
+X_train, X_test, y_train, y_test = train_test_split(
+    X, y, test_size=0.20, random_state=42, stratify=y
+)
+
+# ── Model 1: Baseline (as in production) ─────────────────────────────
+model_baseline = make_pipeline(
+    TfidfVectorizer(ngram_range=(1, 2)),
+    LogisticRegression(C=10.0, class_weight="balanced", max_iter=1000)
+)
+model_baseline.fit(X_train, y_train)
+y_pred_baseline = model_baseline.predict(X_test)
+
+# ── Model 2: Improved (sublinear TF scaling + min_df pruning) ─────────
+model_improved = make_pipeline(
+    TfidfVectorizer(
+        ngram_range=(1, 3),
+        sublinear_tf=True,
+        min_df=2,
+        max_features=50_000,
+    ),
+    LogisticRegression(C=5.0, class_weight="balanced", max_iter=1000, solver="saga")
+)
+model_improved.fit(X_train, y_train)
+y_pred_improved = model_improved.predict(X_test)
+
+# ── Print reports ─────────────────────────────────────────────────────
+print("=" * 65)
+print("BASELINE MODEL  —  TF-IDF(1,2) + LogReg(C=10)")
+print("=" * 65)
+print(f"Accuracy: {accuracy_score(y_test, y_pred_baseline):.4f}\n")
+print(classification_report(y_test, y_pred_baseline))
+
+print("=" * 65)
+print("IMPROVED MODEL  —  TF-IDF(1,3, sublinear) + LogReg(C=5, saga)")
+print("=" * 65)
+print(f"Accuracy: {accuracy_score(y_test, y_pred_improved):.4f}\n")
+print(classification_report(y_test, y_pred_improved))
+
+# ── 5-fold cross-validation ───────────────────────────────────────────
+cv_baseline = cross_val_score(model_baseline, X, y, cv=5, scoring="accuracy")
+cv_improved  = cross_val_score(model_improved,  X, y, cv=5, scoring="accuracy")
+
+print("5-Fold Cross-Validation Accuracy:")
+print(f"  Baseline : {cv_baseline.mean():.4f} ± {cv_baseline.std():.4f}")
+print(f"  Improved : {cv_improved.mean():.4f}  ± {cv_improved.std():.4f}")
+print()
+
+# ── Confusion matrix plot ─────────────────────────────────────────────
+labels = sorted(y.unique())
+cm = confusion_matrix(y_test, y_pred_improved, labels=labels)
+
+fig, ax = plt.subplots(figsize=(10, 8))
+sns.heatmap(
+    cm,
+    annot=True, fmt="d", cmap="Blues",
+    xticklabels=labels, yticklabels=labels,
+    linewidths=0.5, linecolor="white",
+    ax=ax
+)
+ax.set_title("Confusion Matrix — Improved Model", fontsize=14, fontweight="bold", pad=14)
+ax.set_ylabel("True Label", fontsize=12)
+ax.set_xlabel("Predicted Label", fontsize=12)
+plt.xticks(rotation=30, ha="right", fontsize=9)
+plt.yticks(rotation=0, fontsize=9)
+plt.tight_layout()
+
+out_path = os.path.join(script_dir, "confusion_matrix.png")
+plt.savefig(out_path, dpi=150)
+print(f"📊  Confusion matrix saved → {out_path}")
+
+# ── Top features per class ────────────────────────────────────────────
+print("\n── Top 8 TF-IDF features per class (Improved Model) ──")
+tfidf   = model_improved.named_steps["tfidfvectorizer"]
+logreg  = model_improved.named_steps["logisticregression"]
+feat_names = tfidf.get_feature_names_out()
+
+for i, cls in enumerate(logreg.classes_):
+    top_idx = logreg.coef_[i].argsort()[-8:][::-1]
+    top_feats = [feat_names[j] for j in top_idx]
+    print(f"  {cls:<20}: {', '.join(top_feats)}")
+
+print("\n✅  Evaluation complete.")

ai-backend/generate_samples.py

@@ -0,0 +1,140 @@
+"""Generate synthetic fintech UI screenshots containing dark-pattern copy.
+
+The screenshots are plain rendered UI with real text so Tesseract can read
+them and the classifier has something genuine to detect. Run once:
+
+    python generate_samples.py
+
+Outputs PNGs into ./samples/ (served by Flask at /api/samples/<name>).
+"""
+from PIL import Image, ImageDraw, ImageFont
+import os
+
+OUT_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "samples")
+os.makedirs(OUT_DIR, exist_ok=True)
+
+W, H = 900, 640
+BG = (248, 249, 252)
+CARD = (255, 255, 255)
+INK = (24, 28, 40)
+MUTED = (110, 118, 135)
+ACCENT = (79, 70, 229)
+DANGER = (220, 53, 69)
+WARN_BG = (255, 243, 205)
+WARN_INK = (133, 100, 4)
+GREEN = (25, 135, 84)
+
+
+def font(size, bold=False):
+    names = ["arialbd.ttf"] if bold else ["arial.ttf"]
+    for name in names + ["DejaVuSans-Bold.ttf" if bold else "DejaVuSans.ttf"]:
+        try:
+            return ImageFont.truetype(name, size)
+        except OSError:
+            continue
+    return ImageFont.load_default()
+
+
+def card(d, x0, y0, x1, y1, fill=CARD, outline=(225, 228, 235)):
+    d.rounded_rectangle([x0, y0, x1, y1], radius=12, fill=fill, outline=outline, width=1)
+
+
+def button(d, x0, y0, x1, y1, label, fill=ACCENT, ink=(255, 255, 255), size=20, bold=True):
+    d.rounded_rectangle([x0, y0, x1, y1], radius=8, fill=fill)
+    f = font(size, bold)
+    tw = d.textlength(label, font=f)
+    d.text(((x0 + x1 - tw) / 2, (y0 + y1) / 2 - size / 2 - 2), label, font=f, fill=ink)
+
+
+def make_checkout():
+    img = Image.new("RGB", (W, H), BG)
+    d = ImageDraw.Draw(img)
+    d.rectangle([0, 0, W, 64], fill=(30, 34, 50))
+    d.text((30, 20), "PayVault  |  Secure Checkout", font=font(22, True), fill=(255, 255, 255))
+
+    card(d, 30, 90, 560, 600)
+    d.text((55, 110), "Premium Trading Plan", font=font(26, True), fill=INK)
+    d.text((55, 150), "$29.99 / month", font=font(22), fill=MUTED)
+
+    d.rounded_rectangle([55, 195, 535, 245], radius=8, fill=WARN_BG)
+    d.text((70, 207), "Hurry! Offer expires in 04:59 minutes", font=font(20, True), fill=WARN_INK)
+
+    d.rounded_rectangle([55, 260, 535, 310], radius=8, fill=(253, 232, 232))
+    d.text((70, 272), "Only 2 spots left at this price!", font=font(20, True), fill=DANGER)
+
+    d.text((55, 335), "17 people are viewing this offer right now", font=font(18), fill=MUTED)
+    d.text((55, 370), "1,358 traders upgraded this week", font=font(18), fill=MUTED)
+
+    button(d, 55, 430, 535, 485, "CLAIM MY DISCOUNT NOW")
+    d.text((150, 510), "No thanks, I prefer losing money", font=font(15), fill=(180, 184, 195))
+
+    card(d, 590, 90, 870, 600)
+    d.text((615, 110), "Order Summary", font=font(20, True), fill=INK)
+    d.text((615, 155), "Plan", font=font(16), fill=MUTED)
+    d.text((800, 155), "$29.99", font=font(16), fill=INK)
+    d.text((615, 185), "Priority support", font=font(16), fill=MUTED)
+    d.text((800, 185), "$4.99", font=font(16), fill=INK)
+    d.line([615, 225, 845, 225], fill=(225, 228, 235), width=1)
+    d.text((615, 240), "Total today", font=font(18, True), fill=INK)
+    d.text((790, 240), "$34.98", font=font(18, True), fill=INK)
+    img.save(os.path.join(OUT_DIR, "checkout_urgency.png"))
+
+
+def make_cancellation():
+    img = Image.new("RGB", (W, H), BG)
+    d = ImageDraw.Draw(img)
+    d.rectangle([0, 0, W, 64], fill=(30, 34, 50))
+    d.text((30, 20), "CoinNest  |  Account Settings", font=font(22, True), fill=(255, 255, 255))
+
+    card(d, 150, 110, 750, 560)
+    d.text((185, 140), "Wait! Before you go...", font=font(28, True), fill=INK)
+    d.text((185, 195), "Are you sure you want to cancel? You will lose all", font=font(19), fill=INK)
+    d.text((185, 225), "your rewards and your exclusive member benefits", font=font(19), fill=INK)
+    d.text((185, 255), "will be gone forever.", font=font(19), fill=INK)
+
+    d.text((185, 305), "93% of members regret cancelling within a month", font=font(17), fill=MUTED)
+
+    button(d, 185, 360, 715, 415, "KEEP MY BENEFITS", fill=GREEN)
+    button(d, 185, 430, 715, 480, "Remind me later", fill=(235, 237, 242), ink=MUTED, bold=False)
+    d.text((340, 505), "continue to cancellation step 1 of 6", font=font(13), fill=(195, 198, 207))
+    img.save(os.path.join(OUT_DIR, "cancel_confirmshaming.png"))
+
+
+def make_signup():
+    img = Image.new("RGB", (W, H), BG)
+    d = ImageDraw.Draw(img)
+    d.rectangle([0, 0, W, 64], fill=(30, 34, 50))
+    d.text((30, 20), "LoanLeap  |  Create Account", font=font(22, True), fill=(255, 255, 255))
+
+    card(d, 120, 100, 780, 580)
+    d.text((155, 125), "You're almost done!", font=font(26, True), fill=INK)
+
+    def checkbox(y, label, sub, checked=True):
+        d.rounded_rectangle([155, y, 179, y + 24], radius=5,
+                            fill=ACCENT if checked else CARD,
+                            outline=(200, 203, 212), width=1)
+        if checked:
+            d.line([160, y + 12, 166, y + 18], fill=(255, 255, 255), width=3)
+            d.line([166, y + 18, 175, y + 6], fill=(255, 255, 255), width=3)
+        d.text((195, y), label, font=font(18, True), fill=INK)
+        d.text((195, y + 28), sub, font=font(15), fill=MUTED)
+
+    checkbox(180, "Add Payment Protection Plus  (+$9.99/mo)",
+             "Automatically added to protect your transactions")
+    checkbox(255, "Enroll in Premium Credit Monitoring  (+$14.99/mo)",
+             "Free trial converts to paid plan after 7 days")
+    checkbox(330, "Share my data with trusted marketing partners",
+             "By continuing you agree to receive personalised offers")
+
+    d.text((155, 410), "By clicking Continue you accept the Terms, the Fee Schedule,", font=font(14), fill=MUTED)
+    d.text((155, 432), "and authorise recurring charges to your saved card.", font=font(14), fill=MUTED)
+
+    button(d, 155, 475, 745, 530, "CONTINUE")
+    img.save(os.path.join(OUT_DIR, "signup_sneaking.png"))
+
+
+if __name__ == "__main__":
+    make_checkout()
+    make_cancellation()
+    make_signup()
+    print(f"Saved 3 sample screenshots to {OUT_DIR}")

ai-backend/server.py

@@ -1,943 +1,1081 @@
-from flask import Flask, request, jsonify
-from flask_cors import CORS
-import pandas as pd
-from sklearn.feature_extraction.text import TfidfVectorizer
-from sklearn.linear_model import LogisticRegression
-from sklearn.pipeline import make_pipeline
-import pytesseract
-from PIL import Image
-import requests
-from io import BytesIO
-import base64
-import re
-import datetime
-import os
-
-script_dir = os.path.dirname(os.path.abspath(__file__))
-dist_dir = os.path.abspath(os.path.join(script_dir, '../dist'))
-
-if os.path.exists(dist_dir):
-    print(f"📦 Serving static files from production build: {dist_dir}")
-    app = Flask(__name__, static_folder=dist_dir, static_url_path='/')
-else:
-    print("🧪 Running in development API mode (no dist folder found)")
-    app = Flask(__name__)
-
-# Enable CORS for all API paths
-CORS(app, resources={r"/api/*": {"origins": "*"}})
-
-print("🧠 Loading NLP model from dataset.csv...")
-try:
-    script_dir = os.path.dirname(os.path.abspath(__file__))
-    dataset_path = os.path.join(script_dir, 'dataset.csv')
-    df = pd.read_csv(dataset_path)
-    df = df.dropna(subset=['text', 'Pattern Category'])
-    model = make_pipeline(
-        TfidfVectorizer(ngram_range=(1, 2)),
-        LogisticRegression(C=10.0, class_weight='balanced', max_iter=1000)
-    )
-    model.fit(df['text'], df['Pattern Category'])
-    print("✅ AI Model ready and trained!")
-except Exception as e:
-    print(f"❌ Error loading dataset: {e}")
-
-print("📉 Loading Financial Distress model from Financial Distress.csv...")
-distress_model = None
-try:
-    distress_path = os.path.join(script_dir, 'Financial Distress.csv')
-    distress_df = pd.read_csv(distress_path)
-    
-    # Financial Distress target value <= -0.5 is distress (class 1), else healthy (class 0)
-    features_cols = [f'x{i}' for i in range(1, 84)]
-    distress_df = distress_df.dropna(subset=['Financial Distress'] + features_cols)
-    
-    X_distress = distress_df[features_cols]
-    y_distress = (distress_df['Financial Distress'] <= -0.5).astype(int)
-    
-    distress_model = LogisticRegression(max_iter=1000)
-    distress_model.fit(X_distress, y_distress)
-    print("✅ Financial Distress Model ready and trained!")
-except Exception as e:
-    print(f"❌ Error loading Financial Distress dataset: {e}")
-
-print("📰 Loading Reddit News from RedditNews.csv...")
-news_list = []
-try:
-    news_path = os.path.join(script_dir, 'RedditNews.csv')
-    news_df = pd.read_csv(news_path)
-    news_df = news_df.dropna(subset=['News'])
-    news_list = news_df.to_dict(orient='records')
-    print(f"✅ Loaded {len(news_list)} news headlines successfully!")
-except Exception as e:
-    print(f"❌ Error loading RedditNews dataset: {e}")
-
-def analyze_headline_sentiment(news_text):
-    pos_words = ["gain", "rise", "success", "profit", "win", "high", "positive", "growth", "launch", "heal", "benefit", "good", "strong", "advance", "recover", "save", "safe"]
-    neg_words = ["fail", "drop", "loss", "crash", "investigate", "lawsuit", "down", "recession", "decrease", "kill", "death", "protest", "strike", "bad", "weak", "decline", "default", "scandal", "abuse", "murder", "hurt", "risk"]
-    
-    text_lower = news_text.lower()
-    pos_score = sum(1 for word in pos_words if word in text_lower)
-    neg_score = sum(1 for word in neg_words if word in text_lower)
-    
-    if pos_score > neg_score:
-        return "positive"
-    elif neg_score > pos_score:
-        return "negative"
-    else:
-        return "neutral"
-
-def get_stock_news(symbol):
-    symbol = symbol.upper()
-    keywords = {
-        "AAPL": ["apple", "iphone", "macbook", "ipad", "jobs", "tech"],
-        "NVDA": ["chip", "nvidia", "gpu", "ai", "intel", "amd", "tech"],
-        "TSLA": ["tesla", "elon", "musk", "electric", "battery", "car"],
-        "COIN": ["bitcoin", "crypto", "blockchain", "exchange", "coinbase", "sec"],
-        "MSFT": ["microsoft", "windows", "azure", "cloud", "tech", "gates"],
-        "GOOGL": ["google", "alphabet", "search", "youtube", "android", "tech"],
-    }
-    
-    stock_kws = keywords.get(symbol, [symbol.lower(), "market", "economy", "finance", "stocks", "trade", "shares"])
-    
-    matching = []
-    for item in news_list:
-        news_text = str(item['News'])
-        text_lower = news_text.lower()
-        if any(kw in text_lower for kw in stock_kws):
-            matching.append(item)
-            if len(matching) >= 100:
-                break
-                
-    if len(matching) < 5:
-        general_kws = ["market", "economy", "finance", "stocks", "trade", "shares"]
-        for item in news_list:
-            news_text = str(item['News'])
-            text_lower = news_text.lower()
-            if any(kw in text_lower for kw in general_kws):
-                matching.append(item)
-                if len(matching) >= 100:
-                    break
-                    
-    formatted_news = []
-    positive_count = 0
-    negative_count = 0
-    
-    # We want a mix of headlines (e.g. 6 headlines)
-    selected_items = matching[:6]
-    if len(selected_items) < 6:
-        selected_items = news_list[:6]
-        
-    for item in selected_items:
-        headline = str(item['News'])
-        date = str(item['Date'])
-        sentiment = analyze_headline_sentiment(headline)
-        
-        if sentiment == "positive":
-            positive_count += 1
-        elif sentiment == "negative":
-            negative_count += 1
-            
-        formatted_news.append({
-            "headline": headline,
-            "date": date,
-            "sentiment": sentiment
-        })
-        
-    total_val = positive_count + negative_count
-    if total_val > 0:
-        sentiment_pct = round((positive_count / total_val) * 100)
-    else:
-        # A deterministic fallback sentiment based on symbol hash
-        hash_val = sum(ord(c) for c in symbol)
-        sentiment_pct = 40 + (hash_val % 30) # 40% to 70% positive
-        
-    return {
-        "articles": formatted_news,
-        "sentimentPercent": sentiment_pct
-    }
-
-def get_distress_risk(symbol):
-    if distress_model is None:
-        return {"riskLevel": "Low", "distressProbability": 15.0, "rawDistressScore": 0.05, "isDistressed": False}
-        
-    symbol = symbol.upper()
-    try:
-        script_dir = os.path.dirname(os.path.abspath(__file__))
-        distress_path = os.path.join(script_dir, 'Financial Distress.csv')
-        distress_df = pd.read_csv(distress_path)
-        
-        # Filter rows to select distressed vs healthy for demo consistency
-        distressed_rows = distress_df[distress_df['Financial Distress'] <= -0.5]
-        healthy_rows = distress_df[distress_df['Financial Distress'] > 0.5]
-        
-        if len(distressed_rows) == 0 or len(healthy_rows) == 0:
-            return {"riskLevel": "Low", "distressProbability": 10.0, "rawDistressScore": 0.1, "isDistressed": False}
-
-        # Deterministic row selection based on symbol hash
-        hash_val = sum(ord(c) for c in symbol)
-        
-        # Override specific symbols for demonstration purposes:
-        if symbol == 'COIN':
-            # Map COIN to a distressed row
-            row = distressed_rows.iloc[hash_val % len(distressed_rows)]
-        elif symbol in ['AAPL', 'NVDA', 'MSFT', 'GOOGL']:
-            # Map healthy tech to healthy row
-            row = healthy_rows.iloc[hash_val % len(healthy_rows)]
-        else:
-            # Map deterministically from entire dataset
-            row = distress_df.iloc[hash_val % len(distress_df)]
-            
-        features_cols = [f'x{i}' for i in range(1, 84)]
-        features = row[features_cols].values.reshape(1, -1)
-        
-        prob = distress_model.predict_proba(features)[0][1] # probability of class 1 (distress)
-        is_distressed = bool(distress_model.predict(features)[0] == 1)
-        
-        # Define risk levels:
-        if prob > 0.6 or is_distressed:
-            risk_level = "High"
-        elif prob > 0.25:
-            risk_level = "Medium"
-        else:
-            risk_level = "Low"
-            
-        raw_score = float(row['Financial Distress'])
-        
-        return {
-            "riskLevel": risk_level,
-            "distressProbability": round(float(prob) * 100, 1),
-            "rawDistressScore": round(raw_score, 3),
-            "isDistressed": is_distressed
-        }
-    except Exception as e:
-        print(f"Error evaluating distress risk for {symbol}: {e}")
-        return {"riskLevel": "Low", "distressProbability": 15.0, "rawDistressScore": 0.1, "isDistressed": False}
-
-def get_severity(prediction):
-    severity_map = {
-        "Urgency": "high",
-        "Scarcity": "medium",
-        "Social Proof": "low",
-        "Misdirection": "high",
-        "Obstruction": "critical",
-        "Sneaking": "critical",
-        "Forced Action": "critical"
-    }
-    return severity_map.get(prediction, "medium")
-
-def get_compliance_metadata(prediction, text):
-    if prediction == "Urgency":
-        violation = "Urgency tactics create artificial pressure to force immediate transaction decisions, potentially violating 12 CFR 1041 prohibiting deceptive acts or practices."
-        recommendation = f"Remove countdown timers or false urgency text like '{text}'."
-    elif prediction == "Scarcity":
-        violation = "Scarcity tactics (e.g. artificial stock limits) manipulate consumers into immediate purchases, violating FTC Act Section 5 against deceptive practices."
-        recommendation = f"Ensure the statement '{text}' is backed by real-time inventory systems. If not verified, remove it."
-    elif prediction == "Social Proof":
-        violation = "Unverified social proof notifications (e.g. 'X bought this recently') can mislead consumers, violating general rules on deceptive advertisements."
-        recommendation = f"Validate that '{text}' is based on genuine user activity. Otherwise, disable this alert."
-    elif prediction == "Misdirection":
-        violation = "Misdirection visual/language design (like confirmshaming) steers users away from their intended choices, violating consumer choice principles."
-        recommendation = f"Change the option text in '{text}' to use clear and neutral language (e.g. 'Cancel' / 'Confirm') without guilt-tripping."
-    elif prediction == "Obstruction":
-        violation = "Obstruction (making cancellation or opt-out complex) violates EFTA and CFPB guidelines against hard-to-cancel billing structures."
-        recommendation = f"Simplify subscription cancellation related to '{text}'. The exit path should be as simple as the sign-up path."
-    elif prediction == "Sneaking":
-        violation = "Sneaking (adding hidden costs or pre-selected add-ons) violates EFTA and deceptive practices rules by charging without active consent."
-        recommendation = f"Ensure '{text}' does not lead to pre-checked options. Require explicit opt-in for all additional items or services."
-    elif prediction == "Forced Action":
-        violation = "Forced Action requires consumers to perform unrelated actions (e.g. consent to tracking) to finish a task, violating consumer choice guidelines."
-        recommendation = f"Allow users to proceed past '{text}' without mandatory signups or sharing non-essential data."
-    else:
-        violation = "General deceptive pattern detected that may violate CFPB guidelines against deceptive acts or practices."
-        recommendation = "Redesign copy and flow to maximize user transparency and choice."
-    
-    return violation, recommendation
-
-@app.route('/api/analyze', methods=['POST', 'OPTIONS'])
-def analyze_image():
-    if request.method == 'OPTIONS':
-        return jsonify({}), 200
-
-    data = request.json
-    image_url = data.get('imageUrl', '')
-    print(f"\n📸 Received request for image analysis...")
-    
-    try:
-        # Load image (handling both base64 Data URLs and HTTP URLs)
-        if image_url.startswith('data:image/'):
-            pattern = re.compile(r'^data:image/\w+;base64,(.*)$')
-            match = pattern.match(image_url)
-            if not match:
-                raise ValueError("Invalid data URL format")
-            img_data = base64.b64decode(match.group(1))
-            img = Image.open(BytesIO(img_data))
-        else:
-            response = requests.get(image_url, timeout=10)
-            img = Image.open(BytesIO(response.content))
-        
-        img_width, img_height = img.size
-        print(f"👁️ Image size: {img_width}x{img_height}. Scanning for text blocks...")
-        
-        # Get OCR data (bounding box coordinates)
-        ocr_data = pytesseract.image_to_data(img, output_type=pytesseract.Output.DICT)
-        extracted_text = pytesseract.image_to_string(img).strip()
-        
-        # Group words by block and line number to reconstruct coherent lines
-        lines = {}
-        n_boxes = len(ocr_data['text'])
-        for i in range(n_boxes):
-            text = ocr_data['text'][i].strip()
-            if not text:
-                continue
-            
-            block_num = ocr_data['block_num'][i]
-            line_num = ocr_data['line_num'][i]
-            key = (block_num, line_num)
-            
-            left = ocr_data['left'][i]
-            top = ocr_data['top'][i]
-            width = ocr_data['width'][i]
-            height = ocr_data['height'][i]
-            
-            if key not in lines:
-                lines[key] = {
-                    'words': [],
-                    'left': left,
-                    'top': top,
-                    'right': left + width,
-                    'bottom': top + height
-                }
-            
-            lines[key]['words'].append(text)
-            lines[key]['left'] = min(lines[key]['left'], left)
-            lines[key]['top'] = min(lines[key]['top'], top)
-            lines[key]['right'] = max(lines[key]['right'], left + width)
-            lines[key]['bottom'] = max(lines[key]['bottom'], top + height)
-
-        dark_patterns = []
-        pattern_id = 1
-        
-        for key, info in lines.items():
-            line_text = " ".join(info['words']).strip()
-            if len(line_text) < 3:
-                continue
-            
-            # Predict pattern class
-            prediction = model.predict([line_text])[0]
-            if prediction != "Not Dark Pattern":
-                probs = model.predict_proba([line_text])[0]
-                classes = model.classes_
-                pred_idx = list(classes).index(prediction)
-                confidence_score = round(probs[pred_idx] * 100)
-                
-                severity = get_severity(prediction)
-                violation, recommendation = get_compliance_metadata(prediction, line_text)
-                
-                # Convert coords to percentages relative to image size
-                left_pct = round((info['left'] / img_width) * 100, 2)
-                top_pct = round((info['top'] / img_height) * 100, 2)
-                width_pct = round(((info['right'] - info['left']) / img_width) * 100, 2)
-                height_pct = round(((info['bottom'] - info['top']) / img_height) * 100, 2)
-                
-                dark_patterns.append({
-                    "id": str(pattern_id),
-                    "type": prediction,
-                    "severity": severity,
-                    "description": f"Deceptive copywriting matching {prediction} pattern.",
-                    "confidence": confidence_score,
-                    "location": {
-                        "x": left_pct,
-                        "y": top_pct,
-                        "width": width_pct,
-                        "height": height_pct
-                    },
-                    "cfpbViolation": violation,
-                    "recommendation": recommendation
-                })
-                pattern_id += 1
-
-        # Calculate trust score & compliance report
-        if not dark_patterns:
-            overall_score = 98
-            risk_level = "low"
-            compliance_report = {
-                "cfpbAlignment": 98,
-                "issues": [],
-                "recommendations": []
-            }
-        else:
-            deductions = {
-                "critical": 25,
-                "high": 15,
-                "medium": 10,
-                "low": 5
-            }
-            score_deduction = sum(deductions.get(p["severity"], 10) for p in dark_patterns)
-            overall_score = max(5, 100 - score_deduction)
-            
-            if overall_score >= 80:
-                risk_level = "low"
-            elif overall_score >= 60:
-                risk_level = "medium"
-            elif overall_score >= 45:
-                risk_level = "high"
-            else:
-                risk_level = "critical"
-                
-            issues = list(dict.fromkeys([p["cfpbViolation"] for p in dark_patterns]))
-            recommendations = list(dict.fromkeys([p["recommendation"] for p in dark_patterns]))
-            
-            compliance_report = {
-                "cfpbAlignment": overall_score,
-                "issues": issues,
-                "recommendations": recommendations
-            }
-        
-        return jsonify({
-            "imageUrl": image_url,
-            "extractedText": extracted_text or "No text detected in screenshot.",
-            "overallScore": overall_score,
-            "riskLevel": risk_level,
-            "darkPatterns": dark_patterns,
-            "complianceReport": compliance_report,
-            "timestamp": datetime.datetime.now().isoformat()
-        })
-
-    except Exception as e:
-        print(f"❌ Analysis failed: {e}")
-        return jsonify({"error": f"Failed to process image: {str(e)}"}), 500
-
-@app.route('/api/dataset', methods=['GET'])
-def get_dataset():
-    query = request.args.get('q', '').strip()
-    category = request.args.get('category', '').strip()
-    limit = int(request.args.get('limit', 50))
-    offset = int(request.args.get('offset', 0))
-    
-    try:
-        filtered_df = df
-        if query:
-            filtered_df = filtered_df[filtered_df['text'].str.contains(query, case=False, na=False)]
-        if category:
-            filtered_df = filtered_df[filtered_df['Pattern Category'].str.lower() == category.lower()]
-            
-        total = len(filtered_df)
-        sliced_df = filtered_df.iloc[offset:offset+limit]
-        
-        records = sliced_df.to_dict(orient='records')
-        
-        # Get category counts for stats
-        counts = df['Pattern Category'].value_counts().to_dict()
-        
-        return jsonify({
-            "status": "success",
-            "total": total,
-            "limit": limit,
-            "offset": offset,
-            "records": records,
-            "categoryCounts": counts
-        })
-    except Exception as e:
-        return jsonify({"status": "error", "message": str(e)}), 500
-
-@app.route('/api/stock/<symbol>', methods=['GET'])
-def get_stock_data(symbol):
-    try:
-        url = f"https://query2.finance.yahoo.com/v8/finance/chart/{symbol.upper()}?range=1d&interval=5m"
-        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'
-        }
-        response = requests.get(url, headers=headers, timeout=10)
-        
-        # If Yahoo Finance rate-limits (429) or fails, fallback to generating simulated stock metrics deterministically
-        if response.status_code != 200:
-            print(f"⚠️ Yahoo Finance API returned status {response.status_code} for {symbol}. Generating simulated fallback.")
-            import random
-            hash_val = sum(ord(c) for c in symbol.upper())
-            base_price = 50.0 + (hash_val % 450)
-            
-            history = []
-            price = base_price
-            for i in range(20):
-                price = price * (1 + (random.random() * 0.04 - 0.02))
-                history.append({
-                    "time": f"T-{20-i}m",
-                    "price": round(price, 2)
-                })
-            
-            current_price = price
-            price_change = price * 0.015
-            price_change_pct = 1.5
-            
-            distress_info = get_distress_risk(symbol)
-            news_info = get_stock_news(symbol)
-            
-            return jsonify({
-                "status": "success",
-                "symbol": symbol.upper(),
-                "price": round(current_price, 2),
-                "change": round(price_change, 2),
-                "changePercent": round(price_change_pct, 2),
-                "history": history,
-                "distress": distress_info,
-                "news": news_info,
-                "simulated": True
-            })
-            
-        data = response.json()
-        if not data.get('chart') or not data['chart'].get('result'):
-            return jsonify({"status": "error", "message": "Invalid stock symbol or no data available."}), 404
-            
-        result = data['chart']['result'][0]
-        meta = result.get('meta', {})
-        current_price = meta.get('regularMarketPrice', 0)
-        previous_close = meta.get('chartPreviousClose', current_price)
-        price_change = current_price - previous_close
-        price_change_pct = (price_change / previous_close) * 100 if previous_close else 0
-        
-        timestamps = result.get('timestamp', [])
-        quotes = result.get('indicators', {}).get('quote', [{}])[0].get('close', [])
-        
-        history = []
-        for t, val in zip(timestamps, quotes):
-            if val is not None:
-                time_str = datetime.datetime.fromtimestamp(t).strftime('%H:%M')
-                history.append({
-                    "time": time_str,
-                    "price": round(val, 2)
-                })
-                
-        distress_info = get_distress_risk(symbol)
-        news_info = get_stock_news(symbol)
-        
-        return jsonify({
-            "status": "success",
-            "symbol": symbol.upper(),
-            "price": round(current_price, 2),
-            "change": round(price_change, 2),
-            "changePercent": round(price_change_pct, 2),
-            "history": history,
-            "distress": distress_info,
-            "news": news_info
-        })
-    except Exception as e:
-        # Fallback if any internal python exception occurs
-        print(f"⚠️ Exception in get_stock_data for {symbol}: {e}. Generating simulated fallback.")
-        import random
-        hash_val = sum(ord(c) for c in symbol.upper())
-        base_price = 50.0 + (hash_val % 450)
-        history = []
-        price = base_price
-        for i in range(20):
-            price = price * (1 + (random.random() * 0.04 - 0.02))
-            history.append({
-                "time": f"T-{20-i}m",
-                "price": round(price, 2)
-            })
-        return jsonify({
-            "status": "success",
-            "symbol": symbol.upper(),
-            "price": round(price, 2),
-            "change": round(price * 0.015, 2),
-            "changePercent": 1.5,
-            "history": history,
-            "distress": get_distress_risk(symbol),
-            "news": get_stock_news(symbol),
-            "simulated": True
-        })
-
-def format_volume(val):
-    try:
-        val_float = float(val)
-        if val_float >= 1e9:
-            return f"${val_float / 1e9:.2f} B"
-        elif val_float >= 1e6:
-            return f"${val_float / 1e6:.2f} M"
-        else:
-            return f"${val_float:,.0f}"
-    except Exception:
-        return "$0.00"
-
-@app.route('/api/market/assets', methods=['GET'])
-def get_market_assets():
-    print("📈 Fetching live market assets statistics...")
-    assets_def = [
-        {"symbol": "BTC-USD", "name": "Bitcoin", "type": "crypto", "basePrice": 67645.0, "baseChange": 1.4},
-        {"symbol": "ETH-USD", "name": "Ethereum", "type": "crypto", "basePrice": 3450.0, "baseChange": -0.8},
-        {"symbol": "SOL-USD", "name": "Solana", "type": "crypto", "basePrice": 165.20, "baseChange": 4.2},
-        {"symbol": "DOGE-USD", "name": "Dogecoin", "type": "crypto", "basePrice": 0.142, "baseChange": -2.1},
-        {"symbol": "NVDA", "name": "NVIDIA Corp.", "type": "stock", "basePrice": 120.50, "baseChange": 3.8},
-        {"symbol": "AAPL", "name": "Apple Inc.", "type": "stock", "basePrice": 175.20, "baseChange": -0.4},
-        {"symbol": "TSLA", "name": "Tesla Inc.", "type": "stock", "basePrice": 185.0, "baseChange": 0.5},
-        {"symbol": "COIN", "name": "Coinbase Global", "type": "stock", "basePrice": 220.40, "baseChange": -1.9}
-    ]
-    
-    headers = {
-        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
-    }
-    
-    output_assets = []
-    
-    for asset in assets_def:
-        symbol = asset["symbol"]
-        base_price = asset["basePrice"]
-        base_change = asset["baseChange"]
-        
-        price = base_price
-        change_pct = base_change
-        high_24h = base_price * 1.02
-        low_24h = base_price * 0.98
-        volume_val = 0.0
-        sparkline = []
-        is_simulated = True
-        
-        # 1. Try Yahoo Finance Chart API
-        try:
-            url = f"https://query2.finance.yahoo.com/v8/finance/chart/{symbol}?range=1d&interval=15m"
-            res = requests.get(url, headers=headers, timeout=4)
-            if res.status_code == 200:
-                data = res.json()
-                result = data['chart']['result'][0]
-                meta = result.get('meta', {})
-                
-                current_price = meta.get('regularMarketPrice')
-                previous_close = meta.get('chartPreviousClose')
-                
-                if current_price is not None and current_price > 0:
-                    price = current_price
-                    if previous_close is not None and previous_close > 0:
-                        change_pct = ((current_price - previous_close) / previous_close) * 100
-                    
-                    high_24h = meta.get('regularMarketDayHigh', price * 1.02)
-                    low_24h = meta.get('regularMarketDayLow', price * 0.98)
-                    
-                    vol = meta.get('regularMarketVolume', 0)
-                    if asset["type"] == "stock":
-                        # Stock volume is shares; multiply by price to get USD volume
-                        volume_val = vol * price
-                    else:
-                        volume_val = vol
-                        
-                    # Extract historical quotes for sparkline
-                    quotes = result.get('indicators', {}).get('quote', [{}])[0].get('close', [])
-                    clean_quotes = [round(val, 2 if price >= 1.0 else 4) for val in quotes if val is not None]
-                    
-                    if len(clean_quotes) >= 10:
-                        step = len(clean_quotes) / 10.0
-                        sparkline = [clean_quotes[int(i * step)] for i in range(10)]
-                        sparkline[-1] = clean_quotes[-1]
-                    elif len(clean_quotes) > 0:
-                        sparkline = clean_quotes
-                        
-                    is_simulated = False
-        except Exception as e:
-            print(f"⚠️ Yahoo Finance failed for {symbol}: {e}")
-            
-        # 2. Try Binance API as fallback for Crypto
-        if is_simulated and asset["type"] == "crypto":
-            try:
-                binance_sym = symbol.replace("-USD", "USDT")
-                url = f"https://api.binance.com/api/v3/ticker/24hr?symbol={binance_sym}"
-                res = requests.get(url, timeout=3)
-                if res.status_code == 200:
-                    b_data = res.json()
-                    price = float(b_data["lastPrice"])
-                    change_pct = float(b_data["priceChangePercent"])
-                    high_24h = float(b_data["highPrice"])
-                    low_24h = float(b_data["lowPrice"])
-                    volume_val = float(b_data["quoteVolume"]) # quoteVolume is USDT volume
-                    is_simulated = False
-                    print(f"✅ Fallback to Binance successful for {symbol}: Price = {price}")
-            except Exception as e:
-                print(f"⚠️ Binance fallback failed for {symbol}: {e}")
-                
-        # 3. Fallback to Simulated Quote if all APIs failed
-        import random
-        if is_simulated:
-            price = price * (1 + (random.random() * 0.002 - 0.001))
-            high_24h = price * 1.02
-            low_24h = price * 0.98
-            # Use deterministic base volume
-            if symbol == "BTC-USD": volume_val = 28450210000
-            elif symbol == "ETH-USD": volume_val = 14120450000
-            elif symbol == "SOL-USD": volume_val = 3510800000
-            elif symbol == "DOGE-USD": volume_val = 1240150000
-            elif symbol == "NVDA": volume_val = 18540900000
-            elif symbol == "AAPL": volume_val = 8450600000
-            elif symbol == "TSLA": volume_val = 9210300000
-            else: volume_val = 2150400000
-            
-        # Ensure we have a valid 10-point sparkline
-        if not sparkline or len(sparkline) < 10:
-            sparkline = []
-            hist_price = price * (1 - (change_pct / 100))
-            for i in range(10):
-                jitter = (random.random() * 0.02 - 0.01) * hist_price
-                sparkline.append(round(hist_price + (i * (price - hist_price)/9) + jitter, 2 if price >= 1.0 else 4))
-                
-        # Format volume string
-        if volume_val > 0:
-            volume_str = format_volume(volume_val)
-        else:
-            if symbol == "BTC-USD": volume_str = "$28,450,210,000"
-            elif symbol == "ETH-USD": volume_str = "$14,120,450,000"
-            elif symbol == "SOL-USD": volume_str = "$3,510,800,000"
-            elif symbol == "DOGE-USD": volume_str = "$1,240,150,000"
-            elif symbol == "NVDA": volume_str = "$18,540,900,000"
-            elif symbol == "AAPL": volume_str = "$8,450,600,000"
-            elif symbol == "TSLA": volume_str = "$9,210,300,000"
-            else: volume_str = "$2,150,400,000"
-
-        # Calculate dynamic setups
-        price_str = f"{price:,.2f}" if price >= 1.0 else f"{price:,.4f}"
-        if change_pct >= 2.0:
-            buy_p = random.randint(65, 80)
-            sell_p = 100 - buy_p
-            momentum = "Bullish"
-            signal = "Strong Buy"
-            analysis = f"{asset['name']} is experiencing a powerful breakout, surging {change_pct:.2f}% to ${price_str}. High volume buying pressure ({buy_p}%) has overwhelmed key overhead resistance. Relative Strength Index (RSI) is expanding rapidly, confirming strong bullish momentum."
-        elif change_pct >= 0.2:
-            buy_p = random.randint(52, 64)
-            sell_p = 100 - buy_p
-            momentum = "Bullish"
-            signal = "Buy"
-            analysis = f"{asset['name']} maintains a positive structure, trading up {change_pct:.2f}% at ${price_str}. The asset is holding support above the 50-day moving average, with spot order book flow showing steady bid accumulation."
-        elif change_pct <= -2.0:
-            buy_p = random.randint(20, 38)
-            sell_p = 100 - buy_p
-            momentum = "Bearish"
-            signal = "Sell"
-            analysis = f"{asset['name']} has broken key support to the downside, dropping {change_pct:.2f}% to ${price_str}. Sellers are in full control with {sell_p}% volume pressure. Momentum indicators are oversold, but advise waiting for a bottom structure to form."
-        elif change_pct <= -0.2:
-            buy_p = random.randint(39, 47)
-            sell_p = 100 - buy_p
-            momentum = "Bearish"
-            signal = "Sell"
-            analysis = f"{asset['name']} is under minor distribution, trading down {change_pct:.2f}% at ${price_str}. Selling pressure is slightly elevated, suggesting continuation of a short-term consolidation pattern before buyers re-engage."
-        else:
-            buy_p = random.randint(48, 51)
-            sell_p = 100 - buy_p
-            momentum = "Neutral"
-            signal = "Hold"
-            analysis = f"{asset['name']} is moving in a tight sideways range, currently priced at ${price_str} ({change_pct:+.2f}%). Spot volume is balanced, indicating a neutral tug-of-war between bulls and bears with no clear trend direction."
-
-        # Assign warning metadata (theme based)
-        if symbol == "BTC-USD":
-            risk_lvl = "Low"
-            warnings = ["Urgency FOMO banners active on major brokers", "Stealth spread markups active on buy trades"]
-        elif symbol == "ETH-USD":
-            risk_lvl = "Low"
-            warnings = ["Deceptive staking yield advertisements (hidden locking fees)"]
-        elif symbol == "SOL-USD":
-            risk_lvl = "Low"
-            warnings = ["High transaction failure gas fee warnings omitted by UI"]
-        elif symbol == "DOGE-USD":
-            risk_lvl = "Medium"
-            warnings = ["Pressure pop-ups ('DOGE is spiking! Buy before it runs!') active"]
-        elif symbol == "NVDA":
-            risk_lvl = "Low"
-            warnings = ["Visual misdirection: hiding index correlation parameters"]
-        elif symbol == "AAPL":
-            risk_lvl = "Low"
-            warnings = ["Sneaked add-on fees (recurring equity analyst newsletter pre-checked)"]
-        elif symbol == "TSLA":
-            risk_lvl = "Low"
-            warnings = ["Deceptive countdown timers on pricing locked deals"]
-        else: # COIN
-            risk_lvl = "High"
-            warnings = ["Deceptive rating: suppressing distress warning under low risk badge", "Cart sneaking: $4.99 options analytics pre-checked"]
-            
-        output_assets.append({
-            "symbol": symbol,
-            "name": asset["name"],
-            "type": asset["type"],
-            "price": round(price, 2 if price >= 1.0 else 4),
-            "change24h": round(change_pct, 2),
-            "volume24h": volume_str,
-            "high24h": round(high_24h, 2 if price >= 1.0 else 4),
-            "low24h": round(low_24h, 2 if price >= 1.0 else 4),
-            "sparkline": sparkline,
-            "buySellPattern": {
-                "buyPressure": buy_p,
-                "sellPressure": sell_p,
-                "momentum": momentum,
-                "signal": signal,
-                "analysis": analysis
-            },
-            "fintechWarnings": {
-                "riskLevel": risk_lvl,
-                "activePatterns": warnings
-            }
-        })
-        
-    return jsonify({
-        "status": "success",
-        "assets": output_assets,
-        "timestamp": datetime.datetime.now().isoformat()
-    })
-
-@app.route('/api/analyze-options', methods=['POST', 'OPTIONS'])
-def analyze_options():
-    if request.method == 'OPTIONS':
-        return jsonify({}), 200
-
-    data = request.json
-    image_url = data.get('imageUrl', '')
-    print(f"\n📊 Received request for options analysis...")
-    
-    extracted_text = ""
-    is_options_screenshot = False
-    
-    try:
-        if image_url:
-            # Decode base64
-            if image_url.startswith('data:image/'):
-                pattern = re.compile(r'^data:image/\w+;base64,(.*)$')
-                match = pattern.match(image_url)
-                if not match:
-                    raise ValueError("Invalid data URL format")
-                img_data = base64.b64decode(match.group(1))
-                img = Image.open(BytesIO(img_data))
-            else:
-                response = requests.get(image_url, timeout=10)
-                img = Image.open(BytesIO(response.content))
-                
-            extracted_text = pytesseract.image_to_string(img).strip()
-            
-            # Simple check if this is an options chain screenshot
-            lower_text = extracted_text.lower()
-            keywords = ["deribit", "option", "strike", "call", "put", "iv bid", "iv ask", "delta", "bid-ask"]
-            keyword_matches = sum(1 for kw in keywords if kw in lower_text)
-            if keyword_matches >= 2 or any(str(strike) in lower_text for strike in [65000, 66000, 67000, 68000, 69000, 70000]):
-                is_options_screenshot = True
-                
-    except Exception as e:
-        print(f"⚠️ OCR extraction failed: {e}. Falling back to default options analysis.")
-        is_options_screenshot = False
-
-    # Default/simulated option chain values based on BTC at $67,645.00
-    # Perfect copy of Deribit screenshot data
-    spot_price = 67645.00
-    expiry_date = "03 Jun 2026"
-    time_to_expiry_hours = 16.7
-    
-    # We will generate a structured grid for strikes: 65,000 to 75,000
-    strikes_data = [
-        {"strike": 65000, "callSize": 2.0, "callBid": 0.0375, "callAsk": 0.0460, "callIvBid": 69.0, "callIvAsk": 122.2, "putSize": 10.8, "putBid": 0.0011, "putAsk": 0.0013, "putIvBid": 66.3, "putIvAsk": 69.2},
-        {"strike": 66000, "callSize": 2.2, "callBid": 0.0235, "callAsk": 0.0315, "callIvBid": 62.5, "callIvAsk": 96.3, "putSize": 25.2, "putBid": 0.0024, "putAsk": 0.0028, "putIvBid": 59.8, "putIvAsk": 63.3},
-        {"strike": 67000, "callSize": 0.1, "callBid": 0.0145, "callAsk": 0.0155, "callIvBid": 51.5, "callIvAsk": 57.7, "putSize": 79.6, "putBid": 0.0050, "putAsk": 0.0060, "putIvBid": 51.6, "putIvAsk": 57.9},
-        {"strike": 68000, "callSize": 13.2, "callBid": 0.0060, "callAsk": 0.0070, "callIvBid": 47.8, "callIvAsk": 53.7, "putSize": 0.4, "putBid": 0.0115, "putAsk": 0.0120, "putIvBid": 49.3, "putIvAsk": 52.3},
-        {"strike": 69000, "callSize": 0.4, "callBid": 0.0018, "callAsk": 0.0021, "callIvBid": 46.6, "callIvAsk": 49.3, "putSize": 5.5, "putBid": 0.0150, "putAsk": 0.0180, "putIvBid": 39.4, "putIvAsk": 59.8},
-        {"strike": 70000, "callSize": 3.5, "callBid": 0.0009, "callAsk": 0.0011, "callIvBid": 46.8, "callIvAsk": 49.4, "putSize": 0.8, "putBid": 0.0270, "putAsk": 0.0300, "putIvBid": 31.5, "putIvAsk": 64.6},
-        {"strike": 71000, "callSize": 2.7, "callBid": 0.0002, "callAsk": 0.0003, "callIvBid": 55.0, "callIvAsk": 58.7, "putSize": 0.4, "putBid": 0.0485, "putAsk": 0.0515, "putIvBid": 50.0, "putIvAsk": 87.3},
-        {"strike": 72000, "callSize": 10.2, "callBid": 0.0001, "callAsk": 0.0002, "callIvBid": 55.9, "callIvAsk": 61.6, "putSize": 0.7, "putBid": 0.0630, "putAsk": 0.0660, "putIvBid": 50.0, "putIvAsk": 101.0}
-    ]
-
-    # Calculate Put-Call Ratio (PCR) and ATM Skew
-    # ATM strike is 68000 (closest to spot $67,645.00)
-    atm_strike = 68000
-    atm_opt = next((x for x in strikes_data if x["strike"] == atm_strike), strikes_data[3])
-    
-    atm_call_iv = (atm_opt["callIvBid"] + atm_opt["callIvAsk"]) / 2
-    atm_put_iv = (atm_opt["putIvBid"] + atm_opt["putIvAsk"]) / 2
-    iv_skew = round(atm_put_iv - atm_call_iv, 2) # positive skew means Puts are more expensive than Calls (bearish fear)
-    
-    total_call_size = sum(x["callSize"] for x in strikes_data)
-    total_put_size = sum(x["putSize"] for x in strikes_data)
-    pcr_ratio = round(total_put_size / total_call_size, 2) if total_call_size > 0 else 1.0
-
-    # Determine "When is a good time to buy and sell options"
-    signals = []
-    recommended_action = "Hold"
-    action_explanation = ""
-    
-    if iv_skew > 1.5:
-        signals.append(f"Volatility Skew is highly positive (+{iv_skew}%), showing put option premiums are heavily inflated due to downside hedging demand (market fear).")
-        if pcr_ratio > 1.1:
-            recommended_action = "Sell Put Credit Spreads / Buy Calls"
-            action_explanation = "Fear is peaking (high IV skew + high Put-Call Ratio). This is historically a good time to SELL puts to collect high option premiums, or BUY call options at a discount as the underlying asset consolidates near support."
-        else:
-            recommended_action = "Sell Put Options (Income Harvest)"
-            action_explanation = "Put premiums are elevated. Sell put options or put spreads to harvest high volatility premium."
-    elif iv_skew < -1.5:
-        signals.append(f"Volatility Skew is negative ({iv_skew}%), showing call option premiums are inflated due to upside FOMO buying.")
-        if pcr_ratio < 0.8:
-            recommended_action = "Buy Put Options (Hedge) / Sell Calls"
-            action_explanation = "Market euphoria is high. Call premiums are overpriced and Put options are cheap. It is a good time to BUY puts as a low-cost downside hedge or SELL covered calls to lock in yield."
-        else:
-            recommended_action = "Buy Puts / Sell Call Spreads"
-            action_explanation = "Call premiums are inflated. Buy cheap puts to position for a reversion."
-    else:
-        signals.append(f"Volatility Skew is neutral ({iv_skew}%), indicating balanced demand between call and put options.")
-        if pcr_ratio > 1.3:
-            recommended_action = "Buy Calls (Contrarian)"
-            action_explanation = "Put-Call ratio is heavily skewed to puts, indicating oversold sentiment. A good time to buy calls for a relief rally."
-        elif pcr_ratio < 0.6:
-            recommended_action = "Buy Puts (Contrarian)"
-            action_explanation = "Put-Call ratio is heavily skewed to calls, indicating overbought hype. A good time to buy puts for a cooling off period."
-        else:
-            recommended_action = "Hold / Neutral"
-            action_explanation = "Volatility and volume distributions are balanced. Standard market conditions. Avoid opening large directional options exposure; look for range-bound credit strategies."
-
-    # Identify dark patterns/compliance issues in the options layout
-    compliance_issues = []
-    compliance_recommendations = []
-    
-    # 1. Hidden option markups (wide spreads)
-    wide_spreads = False
-    for x in strikes_data:
-        call_mid = (x["callBid"] + x["callAsk"]) / 2
-        call_spread_pct = ((x["callAsk"] - x["callBid"]) / call_mid) * 100 if call_mid > 0 else 0
-        if call_spread_pct > 15:
-            wide_spreads = True
-            break
-            
-    if wide_spreads or is_options_screenshot:
-        compliance_issues.append("Stealth Option Markups: Bid-ask spreads on out-of-the-money options exceed 15% of the option's value, acting as a hidden fee (Sneaking).")
-        compliance_recommendations.append("Disclose the bid-ask spread percentages in real-time next to the order button so retail traders understand the slippage fee.")
-
-    # 2. Urgency
-    compliance_issues.append("Urgency Expiry Alerts: Countdown banner 'BTC-3JUN26 contracts expire in 16 hours! Lock in premium now!' creates artificial pressure (Urgency).")
-    compliance_recommendations.append("Remove high-pressure countdown phrases like 'Lock in premium now' and replace with a standard, non-colored expiry date label.")
-
-    # 3. Complexity barrier
-    compliance_issues.append("Obstruction of Key Information: Displaying Greek metrics (Delta, Gamma, Vega, Theta) and IV levels without tooltips or explanations confuses retail users into making risky leverage trades (Obstruction).")
-    compliance_recommendations.append("Add interactive tooltips explaining what Delta, IV, and Bid/Ask spreads mean, along with a warning of the high risk of options trading.")
-
-    overall_score = 65
-    risk_level = "medium"
-    
-    return jsonify({
-        "status": "success",
-        "asset": "BTC",
-        "spotPrice": spot_price,
-        "expiryDate": expiry_date,
-        "timeToExpiryHours": time_to_expiry_hours,
-        "strikes": strikes_data,
-        "ivSkew": iv_skew,
-        "putCallRatio": pcr_ratio,
-        "signal": {
-            "recommendation": recommended_action,
-            "explanation": action_explanation,
-            "indicators": signals
-        },
-        "compliance": {
-            "score": overall_score,
-            "riskLevel": risk_level,
-            "issues": compliance_issues,
-            "recommendations": compliance_recommendations
-        },
-        "extractedText": extracted_text or "Simulated options chain screen text parsed."
-    })
-
-if os.path.exists(dist_dir):
-    @app.route('/', defaults={'path': ''})
-    @app.route('/<path:path>')
-    def serve(path):
-        if path != "" and os.path.exists(os.path.join(app.static_folder, path)):
-            return app.send_static_file(path)
-        else:
-            return app.send_static_file('index.html')
-
-if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=8000, debug=True)
+from flask import Flask, request, jsonify
+from flask_cors import CORS
+import pandas as pd
+from sklearn.feature_extraction.text import TfidfVectorizer
+from sklearn.linear_model import LogisticRegression
+from sklearn.pipeline import make_pipeline
+from sklearn.model_selection import train_test_split
+from sklearn.metrics import classification_report, confusion_matrix, accuracy_score
+import pytesseract
+from PIL import Image
+import shutil
+import os
+import sys
+
+# Windows local dev: emoji log lines crash on cp1252 consoles
+if hasattr(sys.stdout, 'reconfigure'):
+    try:
+        sys.stdout.reconfigure(encoding='utf-8')
+        sys.stderr.reconfigure(encoding='utf-8')
+    except Exception:
+        pass
+
+# Windows local dev: fall back to the default install path when tesseract isn't on PATH
+if shutil.which('tesseract') is None:
+    _win_tesseract = r'C:\Program Files\Tesseract-OCR\tesseract.exe'
+    if os.name == 'nt' and os.path.exists(_win_tesseract):
+        pytesseract.pytesseract.tesseract_cmd = _win_tesseract
+import requests
+from io import BytesIO
+import base64
+import re
+import datetime
+import os
+
+script_dir = os.path.dirname(os.path.abspath(__file__))
+dist_dir = os.path.abspath(os.path.join(script_dir, '../dist'))
+
+if os.path.exists(dist_dir):
+    print(f"📦 Serving static files from production build: {dist_dir}")
+    app = Flask(__name__, static_folder=dist_dir, static_url_path='/')
+else:
+    print("🧪 Running in development API mode (no dist folder found)")
+    app = Flask(__name__)
+
+# Enable CORS for all API paths
+CORS(app, resources={r"/api/*": {"origins": "*"}})
+
+print("🧠 Loading NLP model from dataset.csv...")
+model_metrics = None
+try:
+    script_dir = os.path.dirname(os.path.abspath(__file__))
+    dataset_path = os.path.join(script_dir, 'dataset.csv')
+    df = pd.read_csv(dataset_path)
+    df = df.dropna(subset=['text', 'Pattern Category'])
+
+    def build_model():
+        return make_pipeline(
+            TfidfVectorizer(ngram_range=(1, 3), sublinear_tf=True, min_df=2, max_features=50_000),
+            LogisticRegression(C=5.0, class_weight='balanced', max_iter=2000)
+        )
+
+    # Held-out evaluation on a stratified 80/20 split so the UI can show honest metrics
+    X_train, X_test, y_train, y_test = train_test_split(
+        df['text'], df['Pattern Category'],
+        test_size=0.20, random_state=42, stratify=df['Pattern Category']
+    )
+    eval_model = build_model()
+    eval_model.fit(X_train, y_train)
+    y_pred = eval_model.predict(X_test)
+
+    report = classification_report(y_test, y_pred, output_dict=True, zero_division=0)
+    cm_labels = sorted(df['Pattern Category'].unique())
+    cm = confusion_matrix(y_test, y_pred, labels=cm_labels)
+
+    model_metrics = {
+        "modelName": "TF-IDF (1-3 grams, sublinear) + Logistic Regression (C=5, balanced)",
+        "datasetSize": int(len(df)),
+        "numClasses": int(df['Pattern Category'].nunique()),
+        "testSize": int(len(y_test)),
+        "accuracy": round(accuracy_score(y_test, y_pred), 4),
+        "macroF1": round(report['macro avg']['f1-score'], 4),
+        "weightedF1": round(report['weighted avg']['f1-score'], 4),
+        "perClass": {
+            cls: {
+                "precision": round(stats['precision'], 3),
+                "recall": round(stats['recall'], 3),
+                "f1": round(stats['f1-score'], 3),
+                "support": int(stats['support'])
+            }
+            for cls, stats in report.items()
+            if cls not in ('accuracy', 'macro avg', 'weighted avg')
+        },
+        "classDistribution": df['Pattern Category'].value_counts().to_dict(),
+        "confusionMatrix": {"labels": cm_labels, "matrix": cm.tolist()},
+    }
+    print(f"📊 Held-out evaluation: accuracy={model_metrics['accuracy']}, macro-F1={model_metrics['macroF1']}")
+
+    # Production model: refit on the full dataset
+    model = build_model()
+    model.fit(df['text'], df['Pattern Category'])
+    print("✅ AI Model ready and trained!")
+except Exception as e:
+    print(f"❌ Error loading dataset: {e}")
+
+
+def explain_prediction(text, predicted_class, top_n=5):
+    """Return the n-grams in `text` that contributed most to `predicted_class`.
+
+    For a linear model, the contribution of each feature is tfidf_value * coef.
+    """
+    try:
+        tfidf = model.named_steps['tfidfvectorizer']
+        logreg = model.named_steps['logisticregression']
+        class_idx = list(logreg.classes_).index(predicted_class)
+        vec = tfidf.transform([text])
+        feature_names = tfidf.get_feature_names_out()
+        contributions = []
+        for col, value in zip(vec.indices, vec.data):
+            contributions.append((feature_names[col], float(value * logreg.coef_[class_idx][col])))
+        contributions.sort(key=lambda x: x[1], reverse=True)
+        return [
+            {"phrase": phrase, "weight": round(weight, 4)}
+            for phrase, weight in contributions[:top_n] if weight > 0
+        ]
+    except Exception:
+        return []
+
+print("📉 Loading Financial Distress model from Financial Distress.csv...")
+distress_model = None
+try:
+    distress_path = os.path.join(script_dir, 'Financial Distress.csv')
+    distress_df = pd.read_csv(distress_path)
+    
+    # Financial Distress target value <= -0.5 is distress (class 1), else healthy (class 0)
+    features_cols = [f'x{i}' for i in range(1, 84)]
+    distress_df = distress_df.dropna(subset=['Financial Distress'] + features_cols)
+    
+    X_distress = distress_df[features_cols]
+    y_distress = (distress_df['Financial Distress'] <= -0.5).astype(int)
+    
+    distress_model = LogisticRegression(max_iter=1000)
+    distress_model.fit(X_distress, y_distress)
+    print("✅ Financial Distress Model ready and trained!")
+except Exception as e:
+    print(f"❌ Error loading Financial Distress dataset: {e}")
+
+print("📰 Loading Reddit News from RedditNews.csv...")
+news_list = []
+try:
+    news_path = os.path.join(script_dir, 'RedditNews.csv')
+    news_df = pd.read_csv(news_path)
+    news_df = news_df.dropna(subset=['News'])
+    news_list = news_df.to_dict(orient='records')
+    print(f"✅ Loaded {len(news_list)} news headlines successfully!")
+except Exception as e:
+    print(f"❌ Error loading RedditNews dataset: {e}")
+
+def analyze_headline_sentiment(news_text):
+    pos_words = ["gain", "rise", "success", "profit", "win", "high", "positive", "growth", "launch", "heal", "benefit", "good", "strong", "advance", "recover", "save", "safe"]
+    neg_words = ["fail", "drop", "loss", "crash", "investigate", "lawsuit", "down", "recession", "decrease", "kill", "death", "protest", "strike", "bad", "weak", "decline", "default", "scandal", "abuse", "murder", "hurt", "risk"]
+    
+    text_lower = news_text.lower()
+    pos_score = sum(1 for word in pos_words if word in text_lower)
+    neg_score = sum(1 for word in neg_words if word in text_lower)
+    
+    if pos_score > neg_score:
+        return "positive"
+    elif neg_score > pos_score:
+        return "negative"
+    else:
+        return "neutral"
+
+def get_stock_news(symbol):
+    symbol = symbol.upper()
+    keywords = {
+        "AAPL": ["apple", "iphone", "macbook", "ipad", "jobs", "tech"],
+        "NVDA": ["chip", "nvidia", "gpu", "ai", "intel", "amd", "tech"],
+        "TSLA": ["tesla", "elon", "musk", "electric", "battery", "car"],
+        "COIN": ["bitcoin", "crypto", "blockchain", "exchange", "coinbase", "sec"],
+        "MSFT": ["microsoft", "windows", "azure", "cloud", "tech", "gates"],
+        "GOOGL": ["google", "alphabet", "search", "youtube", "android", "tech"],
+    }
+    
+    stock_kws = keywords.get(symbol, [symbol.lower(), "market", "economy", "finance", "stocks", "trade", "shares"])
+    
+    matching = []
+    for item in news_list:
+        news_text = str(item['News'])
+        text_lower = news_text.lower()
+        if any(kw in text_lower for kw in stock_kws):
+            matching.append(item)
+            if len(matching) >= 100:
+                break
+                
+    if len(matching) < 5:
+        general_kws = ["market", "economy", "finance", "stocks", "trade", "shares"]
+        for item in news_list:
+            news_text = str(item['News'])
+            text_lower = news_text.lower()
+            if any(kw in text_lower for kw in general_kws):
+                matching.append(item)
+                if len(matching) >= 100:
+                    break
+                    
+    formatted_news = []
+    positive_count = 0
+    negative_count = 0
+    
+    # We want a mix of headlines (e.g. 6 headlines)
+    selected_items = matching[:6]
+    if len(selected_items) < 6:
+        selected_items = news_list[:6]
+        
+    for item in selected_items:
+        headline = str(item['News'])
+        date = str(item['Date'])
+        sentiment = analyze_headline_sentiment(headline)
+        
+        if sentiment == "positive":
+            positive_count += 1
+        elif sentiment == "negative":
+            negative_count += 1
+            
+        formatted_news.append({
+            "headline": headline,
+            "date": date,
+            "sentiment": sentiment
+        })
+        
+    total_val = positive_count + negative_count
+    if total_val > 0:
+        sentiment_pct = round((positive_count / total_val) * 100)
+    else:
+        # A deterministic fallback sentiment based on symbol hash
+        hash_val = sum(ord(c) for c in symbol)
+        sentiment_pct = 40 + (hash_val % 30) # 40% to 70% positive
+        
+    return {
+        "articles": formatted_news,
+        "sentimentPercent": sentiment_pct
+    }
+
+def get_distress_risk(symbol):
+    if distress_model is None:
+        return {"riskLevel": "Low", "distressProbability": 15.0, "rawDistressScore": 0.05, "isDistressed": False}
+        
+    symbol = symbol.upper()
+    try:
+        script_dir = os.path.dirname(os.path.abspath(__file__))
+        distress_path = os.path.join(script_dir, 'Financial Distress.csv')
+        distress_df = pd.read_csv(distress_path)
+        
+        # Filter rows to select distressed vs healthy for demo consistency
+        distressed_rows = distress_df[distress_df['Financial Distress'] <= -0.5]
+        healthy_rows = distress_df[distress_df['Financial Distress'] > 0.5]
+        
+        if len(distressed_rows) == 0 or len(healthy_rows) == 0:
+            return {"riskLevel": "Low", "distressProbability": 10.0, "rawDistressScore": 0.1, "isDistressed": False}
+
+        # Deterministic row selection based on symbol hash
+        hash_val = sum(ord(c) for c in symbol)
+        
+        # Override specific symbols for demonstration purposes:
+        if symbol == 'COIN':
+            # Map COIN to a distressed row
+            row = distressed_rows.iloc[hash_val % len(distressed_rows)]
+        elif symbol in ['AAPL', 'NVDA', 'MSFT', 'GOOGL']:
+            # Map healthy tech to healthy row
+            row = healthy_rows.iloc[hash_val % len(healthy_rows)]
+        else:
+            # Map deterministically from entire dataset
+            row = distress_df.iloc[hash_val % len(distress_df)]
+            
+        features_cols = [f'x{i}' for i in range(1, 84)]
+        features = row[features_cols].values.reshape(1, -1)
+        
+        prob = distress_model.predict_proba(features)[0][1] # probability of class 1 (distress)
+        is_distressed = bool(distress_model.predict(features)[0] == 1)
+        
+        # Define risk levels:
+        if prob > 0.6 or is_distressed:
+            risk_level = "High"
+        elif prob > 0.25:
+            risk_level = "Medium"
+        else:
+            risk_level = "Low"
+            
+        raw_score = float(row['Financial Distress'])
+        
+        return {
+            "riskLevel": risk_level,
+            "distressProbability": round(float(prob) * 100, 1),
+            "rawDistressScore": round(raw_score, 3),
+            "isDistressed": is_distressed
+        }
+    except Exception as e:
+        print(f"Error evaluating distress risk for {symbol}: {e}")
+        return {"riskLevel": "Low", "distressProbability": 15.0, "rawDistressScore": 0.1, "isDistressed": False}
+
+def get_severity(prediction):
+    severity_map = {
+        "Urgency": "high",
+        "Scarcity": "medium",
+        "Social Proof": "low",
+        "Misdirection": "high",
+        "Obstruction": "critical",
+        "Sneaking": "critical",
+        "Forced Action": "critical"
+    }
+    return severity_map.get(prediction, "medium")
+
+def get_compliance_metadata(prediction, text):
+    if prediction == "Urgency":
+        violation = "Urgency tactics create artificial pressure to force immediate transaction decisions, potentially violating 12 CFR 1041 prohibiting deceptive acts or practices."
+        recommendation = f"Remove countdown timers or false urgency text like '{text}'."
+    elif prediction == "Scarcity":
+        violation = "Scarcity tactics (e.g. artificial stock limits) manipulate consumers into immediate purchases, violating FTC Act Section 5 against deceptive practices."
+        recommendation = f"Ensure the statement '{text}' is backed by real-time inventory systems. If not verified, remove it."
+    elif prediction == "Social Proof":
+        violation = "Unverified social proof notifications (e.g. 'X bought this recently') can mislead consumers, violating general rules on deceptive advertisements."
+        recommendation = f"Validate that '{text}' is based on genuine user activity. Otherwise, disable this alert."
+    elif prediction == "Misdirection":
+        violation = "Misdirection visual/language design (like confirmshaming) steers users away from their intended choices, violating consumer choice principles."
+        recommendation = f"Change the option text in '{text}' to use clear and neutral language (e.g. 'Cancel' / 'Confirm') without guilt-tripping."
+    elif prediction == "Obstruction":
+        violation = "Obstruction (making cancellation or opt-out complex) violates EFTA and CFPB guidelines against hard-to-cancel billing structures."
+        recommendation = f"Simplify subscription cancellation related to '{text}'. The exit path should be as simple as the sign-up path."
+    elif prediction == "Sneaking":
+        violation = "Sneaking (adding hidden costs or pre-selected add-ons) violates EFTA and deceptive practices rules by charging without active consent."
+        recommendation = f"Ensure '{text}' does not lead to pre-checked options. Require explicit opt-in for all additional items or services."
+    elif prediction == "Forced Action":
+        violation = "Forced Action requires consumers to perform unrelated actions (e.g. consent to tracking) to finish a task, violating consumer choice guidelines."
+        recommendation = f"Allow users to proceed past '{text}' without mandatory signups or sharing non-essential data."
+    else:
+        violation = "General deceptive pattern detected that may violate CFPB guidelines against deceptive acts or practices."
+        recommendation = "Redesign copy and flow to maximize user transparency and choice."
+    
+    return violation, recommendation
+
+@app.route('/api/analyze', methods=['POST', 'OPTIONS'])
+def analyze_image():
+    if request.method == 'OPTIONS':
+        return jsonify({}), 200
+
+    data = request.json
+    image_url = data.get('imageUrl', '')
+    print(f"\n📸 Received request for image analysis...")
+    
+    try:
+        # Load image (handling both base64 Data URLs and HTTP URLs)
+        if image_url.startswith('data:image/'):
+            pattern = re.compile(r'^data:image/\w+;base64,(.*)$')
+            match = pattern.match(image_url)
+            if not match:
+                raise ValueError("Invalid data URL format")
+            img_data = base64.b64decode(match.group(1))
+            img = Image.open(BytesIO(img_data))
+        elif '/api/samples/' in image_url:
+            # Bundled demo screenshot — load from disk to avoid the server calling itself
+            filename = os.path.basename(image_url.split('?')[0])
+            img = Image.open(os.path.join(script_dir, 'samples', filename))
+        else:
+            response = requests.get(image_url, timeout=10)
+            img = Image.open(BytesIO(response.content))
+        
+        img_width, img_height = img.size
+        print(f"👁️ Image size: {img_width}x{img_height}. Scanning for text blocks...")
+        
+        # Get OCR data (bounding box coordinates)
+        ocr_data = pytesseract.image_to_data(img, output_type=pytesseract.Output.DICT)
+        extracted_text = pytesseract.image_to_string(img).strip()
+        
+        # Group words by block and line number to reconstruct coherent lines
+        lines = {}
+        n_boxes = len(ocr_data['text'])
+        for i in range(n_boxes):
+            text = ocr_data['text'][i].strip()
+            if not text:
+                continue
+            
+            block_num = ocr_data['block_num'][i]
+            line_num = ocr_data['line_num'][i]
+            key = (block_num, line_num)
+            
+            left = ocr_data['left'][i]
+            top = ocr_data['top'][i]
+            width = ocr_data['width'][i]
+            height = ocr_data['height'][i]
+            
+            if key not in lines:
+                lines[key] = {
+                    'words': [],
+                    'left': left,
+                    'top': top,
+                    'right': left + width,
+                    'bottom': top + height
+                }
+            
+            lines[key]['words'].append(text)
+            lines[key]['left'] = min(lines[key]['left'], left)
+            lines[key]['top'] = min(lines[key]['top'], top)
+            lines[key]['right'] = max(lines[key]['right'], left + width)
+            lines[key]['bottom'] = max(lines[key]['bottom'], top + height)
+
+        dark_patterns = []
+        pattern_id = 1
+        
+        for key, info in lines.items():
+            line_text = " ".join(info['words']).strip()
+            if len(line_text) < 3:
+                continue
+            
+            # Predict pattern class
+            prediction = model.predict([line_text])[0]
+            if prediction != "Not Dark Pattern":
+                probs = model.predict_proba([line_text])[0]
+                classes = model.classes_
+                pred_idx = list(classes).index(prediction)
+                confidence_score = round(probs[pred_idx] * 100)
+                
+                severity = get_severity(prediction)
+                violation, recommendation = get_compliance_metadata(prediction, line_text)
+                
+                # Convert coords to percentages relative to image size
+                left_pct = round((info['left'] / img_width) * 100, 2)
+                top_pct = round((info['top'] / img_height) * 100, 2)
+                width_pct = round(((info['right'] - info['left']) / img_width) * 100, 2)
+                height_pct = round(((info['bottom'] - info['top']) / img_height) * 100, 2)
+                
+                dark_patterns.append({
+                    "id": str(pattern_id),
+                    "type": prediction,
+                    "severity": severity,
+                    "description": f"Deceptive copywriting matching {prediction} pattern.",
+                    "confidence": confidence_score,
+                    "location": {
+                        "x": left_pct,
+                        "y": top_pct,
+                        "width": width_pct,
+                        "height": height_pct
+                    },
+                    "cfpbViolation": violation,
+                    "recommendation": recommendation,
+                    "evidence": line_text,
+                    "explanation": explain_prediction(line_text, prediction)
+                })
+                pattern_id += 1
+
+        # Calculate trust score & compliance report
+        if not dark_patterns:
+            overall_score = 98
+            risk_level = "low"
+            compliance_report = {
+                "cfpbAlignment": 98,
+                "issues": [],
+                "recommendations": []
+            }
+        else:
+            deductions = {
+                "critical": 25,
+                "high": 15,
+                "medium": 10,
+                "low": 5
+            }
+            score_deduction = sum(deductions.get(p["severity"], 10) for p in dark_patterns)
+            overall_score = max(5, 100 - score_deduction)
+            
+            if overall_score >= 80:
+                risk_level = "low"
+            elif overall_score >= 60:
+                risk_level = "medium"
+            elif overall_score >= 45:
+                risk_level = "high"
+            else:
+                risk_level = "critical"
+                
+            issues = list(dict.fromkeys([p["cfpbViolation"] for p in dark_patterns]))
+            recommendations = list(dict.fromkeys([p["recommendation"] for p in dark_patterns]))
+            
+            compliance_report = {
+                "cfpbAlignment": overall_score,
+                "issues": issues,
+                "recommendations": recommendations
+            }
+        
+        return jsonify({
+            "imageUrl": image_url,
+            "extractedText": extracted_text or "No text detected in screenshot.",
+            "overallScore": overall_score,
+            "riskLevel": risk_level,
+            "darkPatterns": dark_patterns,
+            "complianceReport": compliance_report,
+            "timestamp": datetime.datetime.now().isoformat()
+        })
+
+    except Exception as e:
+        print(f"❌ Analysis failed: {e}")
+        return jsonify({"error": f"Failed to process image: {str(e)}"}), 500
+
+@app.route('/api/samples/<path:filename>', methods=['GET'])
+def get_sample(filename):
+    """Serve bundled demo screenshots so the class can try the auditor instantly."""
+    from flask import send_from_directory
+    samples_dir = os.path.join(script_dir, 'samples')
+    return send_from_directory(samples_dir, filename)
+
+
+@app.route('/api/metrics', methods=['GET'])
+def get_metrics():
+    """Model evaluation metrics from a held-out stratified 20% test split."""
+    if model_metrics is None:
+        return jsonify({"error": "Model metrics unavailable"}), 503
+    return jsonify(model_metrics)
+
+
+@app.route('/api/analyze-text', methods=['POST', 'OPTIONS'])
+def analyze_text():
+    """Classify raw text directly — lets the class try the model without a screenshot."""
+    if request.method == 'OPTIONS':
+        return jsonify({}), 200
+    data = request.json or {}
+    text = (data.get('text') or '').strip()
+    if len(text) < 3:
+        return jsonify({"error": "Text too short"}), 400
+    try:
+        prediction = model.predict([text])[0]
+        probs = model.predict_proba([text])[0]
+        classes = list(model.classes_)
+        confidence = round(probs[classes.index(prediction)] * 100, 1)
+        top3 = sorted(zip(classes, probs), key=lambda x: x[1], reverse=True)[:3]
+        result = {
+            "text": text,
+            "prediction": prediction,
+            "confidence": confidence,
+            "isDarkPattern": prediction != "Not Dark Pattern",
+            "topClasses": [{"label": c, "probability": round(p * 100, 1)} for c, p in top3],
+            "explanation": explain_prediction(text, prediction),
+        }
+        if prediction != "Not Dark Pattern":
+            violation, recommendation = get_compliance_metadata(prediction, text)
+            result["cfpbViolation"] = violation
+            result["recommendation"] = recommendation
+        return jsonify(result)
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
+@app.route('/api/dataset', methods=['GET'])
+def get_dataset():
+    query = request.args.get('q', '').strip()
+    category = request.args.get('category', '').strip()
+    limit = int(request.args.get('limit', 50))
+    offset = int(request.args.get('offset', 0))
+    
+    try:
+        filtered_df = df
+        if query:
+            filtered_df = filtered_df[filtered_df['text'].str.contains(query, case=False, na=False)]
+        if category:
+            filtered_df = filtered_df[filtered_df['Pattern Category'].str.lower() == category.lower()]
+            
+        total = len(filtered_df)
+        sliced_df = filtered_df.iloc[offset:offset+limit]
+        
+        records = sliced_df.to_dict(orient='records')
+        
+        # Get category counts for stats
+        counts = df['Pattern Category'].value_counts().to_dict()
+        
+        return jsonify({
+            "status": "success",
+            "total": total,
+            "limit": limit,
+            "offset": offset,
+            "records": records,
+            "categoryCounts": counts
+        })
+    except Exception as e:
+        return jsonify({"status": "error", "message": str(e)}), 500
+
+@app.route('/api/stock/<symbol>', methods=['GET'])
+def get_stock_data(symbol):
+    try:
+        url = f"https://query2.finance.yahoo.com/v8/finance/chart/{symbol.upper()}?range=1d&interval=5m"
+        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'
+        }
+        response = requests.get(url, headers=headers, timeout=10)
+        
+        # If Yahoo Finance rate-limits (429) or fails, fallback to generating simulated stock metrics deterministically
+        if response.status_code != 200:
+            print(f"⚠️ Yahoo Finance API returned status {response.status_code} for {symbol}. Generating simulated fallback.")
+            import random
+            hash_val = sum(ord(c) for c in symbol.upper())
+            base_price = 50.0 + (hash_val % 450)
+            
+            history = []
+            price = base_price
+            for i in range(20):
+                price = price * (1 + (random.random() * 0.04 - 0.02))
+                history.append({
+                    "time": f"T-{20-i}m",
+                    "price": round(price, 2)
+                })
+            
+            current_price = price
+            price_change = price * 0.015
+            price_change_pct = 1.5
+            
+            distress_info = get_distress_risk(symbol)
+            news_info = get_stock_news(symbol)
+            
+            return jsonify({
+                "status": "success",
+                "symbol": symbol.upper(),
+                "price": round(current_price, 2),
+                "change": round(price_change, 2),
+                "changePercent": round(price_change_pct, 2),
+                "history": history,
+                "distress": distress_info,
+                "news": news_info,
+                "simulated": True
+            })
+            
+        data = response.json()
+        if not data.get('chart') or not data['chart'].get('result'):
+            return jsonify({"status": "error", "message": "Invalid stock symbol or no data available."}), 404
+            
+        result = data['chart']['result'][0]
+        meta = result.get('meta', {})
+        current_price = meta.get('regularMarketPrice', 0)
+        previous_close = meta.get('chartPreviousClose', current_price)
+        price_change = current_price - previous_close
+        price_change_pct = (price_change / previous_close) * 100 if previous_close else 0
+        
+        timestamps = result.get('timestamp', [])
+        quotes = result.get('indicators', {}).get('quote', [{}])[0].get('close', [])
+        
+        history = []
+        for t, val in zip(timestamps, quotes):
+            if val is not None:
+                time_str = datetime.datetime.fromtimestamp(t).strftime('%H:%M')
+                history.append({
+                    "time": time_str,
+                    "price": round(val, 2)
+                })
+                
+        distress_info = get_distress_risk(symbol)
+        news_info = get_stock_news(symbol)
+        
+        return jsonify({
+            "status": "success",
+            "symbol": symbol.upper(),
+            "price": round(current_price, 2),
+            "change": round(price_change, 2),
+            "changePercent": round(price_change_pct, 2),
+            "history": history,
+            "distress": distress_info,
+            "news": news_info
+        })
+    except Exception as e:
+        # Fallback if any internal python exception occurs
+        print(f"⚠️ Exception in get_stock_data for {symbol}: {e}. Generating simulated fallback.")
+        import random
+        hash_val = sum(ord(c) for c in symbol.upper())
+        base_price = 50.0 + (hash_val % 450)
+        history = []
+        price = base_price
+        for i in range(20):
+            price = price * (1 + (random.random() * 0.04 - 0.02))
+            history.append({
+                "time": f"T-{20-i}m",
+                "price": round(price, 2)
+            })
+        return jsonify({
+            "status": "success",
+            "symbol": symbol.upper(),
+            "price": round(price, 2),
+            "change": round(price * 0.015, 2),
+            "changePercent": 1.5,
+            "history": history,
+            "distress": get_distress_risk(symbol),
+            "news": get_stock_news(symbol),
+            "simulated": True
+        })
+
+def format_volume(val):
+    try:
+        val_float = float(val)
+        if val_float >= 1e9:
+            return f"${val_float / 1e9:.2f} B"
+        elif val_float >= 1e6:
+            return f"${val_float / 1e6:.2f} M"
+        else:
+            return f"${val_float:,.0f}"
+    except Exception:
+        return "$0.00"
+
+@app.route('/api/market/assets', methods=['GET'])
+def get_market_assets():
+    print("📈 Fetching live market assets statistics...")
+    assets_def = [
+        {"symbol": "BTC-USD", "name": "Bitcoin", "type": "crypto", "basePrice": 67645.0, "baseChange": 1.4},
+        {"symbol": "ETH-USD", "name": "Ethereum", "type": "crypto", "basePrice": 3450.0, "baseChange": -0.8},
+        {"symbol": "SOL-USD", "name": "Solana", "type": "crypto", "basePrice": 165.20, "baseChange": 4.2},
+        {"symbol": "DOGE-USD", "name": "Dogecoin", "type": "crypto", "basePrice": 0.142, "baseChange": -2.1},
+        {"symbol": "NVDA", "name": "NVIDIA Corp.", "type": "stock", "basePrice": 120.50, "baseChange": 3.8},
+        {"symbol": "AAPL", "name": "Apple Inc.", "type": "stock", "basePrice": 175.20, "baseChange": -0.4},
+        {"symbol": "TSLA", "name": "Tesla Inc.", "type": "stock", "basePrice": 185.0, "baseChange": 0.5},
+        {"symbol": "COIN", "name": "Coinbase Global", "type": "stock", "basePrice": 220.40, "baseChange": -1.9}
+    ]
+    
+    headers = {
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
+    }
+    
+    output_assets = []
+    
+    for asset in assets_def:
+        symbol = asset["symbol"]
+        base_price = asset["basePrice"]
+        base_change = asset["baseChange"]
+        
+        price = base_price
+        change_pct = base_change
+        high_24h = base_price * 1.02
+        low_24h = base_price * 0.98
+        volume_val = 0.0
+        sparkline = []
+        is_simulated = True
+        
+        # 1. Try Yahoo Finance Chart API
+        try:
+            url = f"https://query2.finance.yahoo.com/v8/finance/chart/{symbol}?range=1d&interval=15m"
+            res = requests.get(url, headers=headers, timeout=4)
+            if res.status_code == 200:
+                data = res.json()
+                result = data['chart']['result'][0]
+                meta = result.get('meta', {})
+                
+                current_price = meta.get('regularMarketPrice')
+                previous_close = meta.get('chartPreviousClose')
+                
+                if current_price is not None and current_price > 0:
+                    price = current_price
+                    if previous_close is not None and previous_close > 0:
+                        change_pct = ((current_price - previous_close) / previous_close) * 100
+                    
+                    high_24h = meta.get('regularMarketDayHigh', price * 1.02)
+                    low_24h = meta.get('regularMarketDayLow', price * 0.98)
+                    
+                    vol = meta.get('regularMarketVolume', 0)
+                    if asset["type"] == "stock":
+                        # Stock volume is shares; multiply by price to get USD volume
+                        volume_val = vol * price
+                    else:
+                        volume_val = vol
+                        
+                    # Extract historical quotes for sparkline
+                    quotes = result.get('indicators', {}).get('quote', [{}])[0].get('close', [])
+                    clean_quotes = [round(val, 2 if price >= 1.0 else 4) for val in quotes if val is not None]
+                    
+                    if len(clean_quotes) >= 10:
+                        step = len(clean_quotes) / 10.0
+                        sparkline = [clean_quotes[int(i * step)] for i in range(10)]
+                        sparkline[-1] = clean_quotes[-1]
+                    elif len(clean_quotes) > 0:
+                        sparkline = clean_quotes
+                        
+                    is_simulated = False
+        except Exception as e:
+            print(f"⚠️ Yahoo Finance failed for {symbol}: {e}")
+            
+        # 2. Try Binance API as fallback for Crypto
+        if is_simulated and asset["type"] == "crypto":
+            try:
+                binance_sym = symbol.replace("-USD", "USDT")
+                url = f"https://api.binance.com/api/v3/ticker/24hr?symbol={binance_sym}"
+                res = requests.get(url, timeout=3)
+                if res.status_code == 200:
+                    b_data = res.json()
+                    price = float(b_data["lastPrice"])
+                    change_pct = float(b_data["priceChangePercent"])
+                    high_24h = float(b_data["highPrice"])
+                    low_24h = float(b_data["lowPrice"])
+                    volume_val = float(b_data["quoteVolume"]) # quoteVolume is USDT volume
+                    is_simulated = False
+                    print(f"✅ Fallback to Binance successful for {symbol}: Price = {price}")
+            except Exception as e:
+                print(f"⚠️ Binance fallback failed for {symbol}: {e}")
+                
+        # 3. Fallback to Simulated Quote if all APIs failed
+        import random
+        if is_simulated:
+            price = price * (1 + (random.random() * 0.002 - 0.001))
+            high_24h = price * 1.02
+            low_24h = price * 0.98
+            # Use deterministic base volume
+            if symbol == "BTC-USD": volume_val = 28450210000
+            elif symbol == "ETH-USD": volume_val = 14120450000
+            elif symbol == "SOL-USD": volume_val = 3510800000
+            elif symbol == "DOGE-USD": volume_val = 1240150000
+            elif symbol == "NVDA": volume_val = 18540900000
+            elif symbol == "AAPL": volume_val = 8450600000
+            elif symbol == "TSLA": volume_val = 9210300000
+            else: volume_val = 2150400000
+            
+        # Ensure we have a valid 10-point sparkline
+        if not sparkline or len(sparkline) < 10:
+            sparkline = []
+            hist_price = price * (1 - (change_pct / 100))
+            for i in range(10):
+                jitter = (random.random() * 0.02 - 0.01) * hist_price
+                sparkline.append(round(hist_price + (i * (price - hist_price)/9) + jitter, 2 if price >= 1.0 else 4))
+                
+        # Format volume string
+        if volume_val > 0:
+            volume_str = format_volume(volume_val)
+        else:
+            if symbol == "BTC-USD": volume_str = "$28,450,210,000"
+            elif symbol == "ETH-USD": volume_str = "$14,120,450,000"
+            elif symbol == "SOL-USD": volume_str = "$3,510,800,000"
+            elif symbol == "DOGE-USD": volume_str = "$1,240,150,000"
+            elif symbol == "NVDA": volume_str = "$18,540,900,000"
+            elif symbol == "AAPL": volume_str = "$8,450,600,000"
+            elif symbol == "TSLA": volume_str = "$9,210,300,000"
+            else: volume_str = "$2,150,400,000"
+
+        # Calculate dynamic setups
+        price_str = f"{price:,.2f}" if price >= 1.0 else f"{price:,.4f}"
+        if change_pct >= 2.0:
+            buy_p = random.randint(65, 80)
+            sell_p = 100 - buy_p
+            momentum = "Bullish"
+            signal = "Strong Buy"
+            analysis = f"{asset['name']} is experiencing a powerful breakout, surging {change_pct:.2f}% to ${price_str}. High volume buying pressure ({buy_p}%) has overwhelmed key overhead resistance. Relative Strength Index (RSI) is expanding rapidly, confirming strong bullish momentum."
+        elif change_pct >= 0.2:
+            buy_p = random.randint(52, 64)
+            sell_p = 100 - buy_p
+            momentum = "Bullish"
+            signal = "Buy"
+            analysis = f"{asset['name']} maintains a positive structure, trading up {change_pct:.2f}% at ${price_str}. The asset is holding support above the 50-day moving average, with spot order book flow showing steady bid accumulation."
+        elif change_pct <= -2.0:
+            buy_p = random.randint(20, 38)
+            sell_p = 100 - buy_p
+            momentum = "Bearish"
+            signal = "Sell"
+            analysis = f"{asset['name']} has broken key support to the downside, dropping {change_pct:.2f}% to ${price_str}. Sellers are in full control with {sell_p}% volume pressure. Momentum indicators are oversold, but advise waiting for a bottom structure to form."
+        elif change_pct <= -0.2:
+            buy_p = random.randint(39, 47)
+            sell_p = 100 - buy_p
+            momentum = "Bearish"
+            signal = "Sell"
+            analysis = f"{asset['name']} is under minor distribution, trading down {change_pct:.2f}% at ${price_str}. Selling pressure is slightly elevated, suggesting continuation of a short-term consolidation pattern before buyers re-engage."
+        else:
+            buy_p = random.randint(48, 51)
+            sell_p = 100 - buy_p
+            momentum = "Neutral"
+            signal = "Hold"
+            analysis = f"{asset['name']} is moving in a tight sideways range, currently priced at ${price_str} ({change_pct:+.2f}%). Spot volume is balanced, indicating a neutral tug-of-war between bulls and bears with no clear trend direction."
+
+        # Assign warning metadata (theme based)
+        if symbol == "BTC-USD":
+            risk_lvl = "Low"
+            warnings = ["Urgency FOMO banners active on major brokers", "Stealth spread markups active on buy trades"]
+        elif symbol == "ETH-USD":
+            risk_lvl = "Low"
+            warnings = ["Deceptive staking yield advertisements (hidden locking fees)"]
+        elif symbol == "SOL-USD":
+            risk_lvl = "Low"
+            warnings = ["High transaction failure gas fee warnings omitted by UI"]
+        elif symbol == "DOGE-USD":
+            risk_lvl = "Medium"
+            warnings = ["Pressure pop-ups ('DOGE is spiking! Buy before it runs!') active"]
+        elif symbol == "NVDA":
+            risk_lvl = "Low"
+            warnings = ["Visual misdirection: hiding index correlation parameters"]
+        elif symbol == "AAPL":
+            risk_lvl = "Low"
+            warnings = ["Sneaked add-on fees (recurring equity analyst newsletter pre-checked)"]
+        elif symbol == "TSLA":
+            risk_lvl = "Low"
+            warnings = ["Deceptive countdown timers on pricing locked deals"]
+        else: # COIN
+            risk_lvl = "High"
+            warnings = ["Deceptive rating: suppressing distress warning under low risk badge", "Cart sneaking: $4.99 options analytics pre-checked"]
+            
+        output_assets.append({
+            "symbol": symbol,
+            "name": asset["name"],
+            "type": asset["type"],
+            "price": round(price, 2 if price >= 1.0 else 4),
+            "change24h": round(change_pct, 2),
+            "volume24h": volume_str,
+            "high24h": round(high_24h, 2 if price >= 1.0 else 4),
+            "low24h": round(low_24h, 2 if price >= 1.0 else 4),
+            "sparkline": sparkline,
+            "buySellPattern": {
+                "buyPressure": buy_p,
+                "sellPressure": sell_p,
+                "momentum": momentum,
+                "signal": signal,
+                "analysis": analysis
+            },
+            "fintechWarnings": {
+                "riskLevel": risk_lvl,
+                "activePatterns": warnings
+            }
+        })
+        
+    return jsonify({
+        "status": "success",
+        "assets": output_assets,
+        "timestamp": datetime.datetime.now().isoformat()
+    })
+
+@app.route('/api/analyze-options', methods=['POST', 'OPTIONS'])
+def analyze_options():
+    if request.method == 'OPTIONS':
+        return jsonify({}), 200
+
+    data = request.json
+    image_url = data.get('imageUrl', '')
+    print(f"\n📊 Received request for options analysis...")
+    
+    extracted_text = ""
+    is_options_screenshot = False
+    
+    try:
+        if image_url:
+            # Decode base64
+            if image_url.startswith('data:image/'):
+                pattern = re.compile(r'^data:image/\w+;base64,(.*)$')
+                match = pattern.match(image_url)
+                if not match:
+                    raise ValueError("Invalid data URL format")
+                img_data = base64.b64decode(match.group(1))
+                img = Image.open(BytesIO(img_data))
+            else:
+                response = requests.get(image_url, timeout=10)
+                img = Image.open(BytesIO(response.content))
+                
+            extracted_text = pytesseract.image_to_string(img).strip()
+            
+            # Simple check if this is an options chain screenshot
+            lower_text = extracted_text.lower()
+            keywords = ["deribit", "option", "strike", "call", "put", "iv bid", "iv ask", "delta", "bid-ask"]
+            keyword_matches = sum(1 for kw in keywords if kw in lower_text)
+            if keyword_matches >= 2 or any(str(strike) in lower_text for strike in [65000, 66000, 67000, 68000, 69000, 70000]):
+                is_options_screenshot = True
+                
+    except Exception as e:
+        print(f"⚠️ OCR extraction failed: {e}. Falling back to default options analysis.")
+        is_options_screenshot = False
+
+    # Default/simulated option chain values based on BTC at $67,645.00
+    # Perfect copy of Deribit screenshot data
+    spot_price = 67645.00
+    expiry_date = "03 Jun 2026"
+    time_to_expiry_hours = 16.7
+    
+    # We will generate a structured grid for strikes: 65,000 to 75,000
+    strikes_data = [
+        {"strike": 65000, "callSize": 2.0, "callBid": 0.0375, "callAsk": 0.0460, "callIvBid": 69.0, "callIvAsk": 122.2, "putSize": 10.8, "putBid": 0.0011, "putAsk": 0.0013, "putIvBid": 66.3, "putIvAsk": 69.2},
+        {"strike": 66000, "callSize": 2.2, "callBid": 0.0235, "callAsk": 0.0315, "callIvBid": 62.5, "callIvAsk": 96.3, "putSize": 25.2, "putBid": 0.0024, "putAsk": 0.0028, "putIvBid": 59.8, "putIvAsk": 63.3},
+        {"strike": 67000, "callSize": 0.1, "callBid": 0.0145, "callAsk": 0.0155, "callIvBid": 51.5, "callIvAsk": 57.7, "putSize": 79.6, "putBid": 0.0050, "putAsk": 0.0060, "putIvBid": 51.6, "putIvAsk": 57.9},
+        {"strike": 68000, "callSize": 13.2, "callBid": 0.0060, "callAsk": 0.0070, "callIvBid": 47.8, "callIvAsk": 53.7, "putSize": 0.4, "putBid": 0.0115, "putAsk": 0.0120, "putIvBid": 49.3, "putIvAsk": 52.3},
+        {"strike": 69000, "callSize": 0.4, "callBid": 0.0018, "callAsk": 0.0021, "callIvBid": 46.6, "callIvAsk": 49.3, "putSize": 5.5, "putBid": 0.0150, "putAsk": 0.0180, "putIvBid": 39.4, "putIvAsk": 59.8},
+        {"strike": 70000, "callSize": 3.5, "callBid": 0.0009, "callAsk": 0.0011, "callIvBid": 46.8, "callIvAsk": 49.4, "putSize": 0.8, "putBid": 0.0270, "putAsk": 0.0300, "putIvBid": 31.5, "putIvAsk": 64.6},
+        {"strike": 71000, "callSize": 2.7, "callBid": 0.0002, "callAsk": 0.0003, "callIvBid": 55.0, "callIvAsk": 58.7, "putSize": 0.4, "putBid": 0.0485, "putAsk": 0.0515, "putIvBid": 50.0, "putIvAsk": 87.3},
+        {"strike": 72000, "callSize": 10.2, "callBid": 0.0001, "callAsk": 0.0002, "callIvBid": 55.9, "callIvAsk": 61.6, "putSize": 0.7, "putBid": 0.0630, "putAsk": 0.0660, "putIvBid": 50.0, "putIvAsk": 101.0}
+    ]
+
+    # Calculate Put-Call Ratio (PCR) and ATM Skew
+    # ATM strike is 68000 (closest to spot $67,645.00)
+    atm_strike = 68000
+    atm_opt = next((x for x in strikes_data if x["strike"] == atm_strike), strikes_data[3])
+    
+    atm_call_iv = (atm_opt["callIvBid"] + atm_opt["callIvAsk"]) / 2
+    atm_put_iv = (atm_opt["putIvBid"] + atm_opt["putIvAsk"]) / 2
+    iv_skew = round(atm_put_iv - atm_call_iv, 2) # positive skew means Puts are more expensive than Calls (bearish fear)
+    
+    total_call_size = sum(x["callSize"] for x in strikes_data)
+    total_put_size = sum(x["putSize"] for x in strikes_data)
+    pcr_ratio = round(total_put_size / total_call_size, 2) if total_call_size > 0 else 1.0
+
+    # Determine "When is a good time to buy and sell options"
+    signals = []
+    recommended_action = "Hold"
+    action_explanation = ""
+    
+    if iv_skew > 1.5:
+        signals.append(f"Volatility Skew is highly positive (+{iv_skew}%), showing put option premiums are heavily inflated due to downside hedging demand (market fear).")
+        if pcr_ratio > 1.1:
+            recommended_action = "Sell Put Credit Spreads / Buy Calls"
+            action_explanation = "Fear is peaking (high IV skew + high Put-Call Ratio). This is historically a good time to SELL puts to collect high option premiums, or BUY call options at a discount as the underlying asset consolidates near support."
+        else:
+            recommended_action = "Sell Put Options (Income Harvest)"
+            action_explanation = "Put premiums are elevated. Sell put options or put spreads to harvest high volatility premium."
+    elif iv_skew < -1.5:
+        signals.append(f"Volatility Skew is negative ({iv_skew}%), showing call option premiums are inflated due to upside FOMO buying.")
+        if pcr_ratio < 0.8:
+            recommended_action = "Buy Put Options (Hedge) / Sell Calls"
+            action_explanation = "Market euphoria is high. Call premiums are overpriced and Put options are cheap. It is a good time to BUY puts as a low-cost downside hedge or SELL covered calls to lock in yield."
+        else:
+            recommended_action = "Buy Puts / Sell Call Spreads"
+            action_explanation = "Call premiums are inflated. Buy cheap puts to position for a reversion."
+    else:
+        signals.append(f"Volatility Skew is neutral ({iv_skew}%), indicating balanced demand between call and put options.")
+        if pcr_ratio > 1.3:
+            recommended_action = "Buy Calls (Contrarian)"
+            action_explanation = "Put-Call ratio is heavily skewed to puts, indicating oversold sentiment. A good time to buy calls for a relief rally."
+        elif pcr_ratio < 0.6:
+            recommended_action = "Buy Puts (Contrarian)"
+            action_explanation = "Put-Call ratio is heavily skewed to calls, indicating overbought hype. A good time to buy puts for a cooling off period."
+        else:
+            recommended_action = "Hold / Neutral"
+            action_explanation = "Volatility and volume distributions are balanced. Standard market conditions. Avoid opening large directional options exposure; look for range-bound credit strategies."
+
+    # Identify dark patterns/compliance issues in the options layout
+    compliance_issues = []
+    compliance_recommendations = []
+    
+    # 1. Hidden option markups (wide spreads)
+    wide_spreads = False
+    for x in strikes_data:
+        call_mid = (x["callBid"] + x["callAsk"]) / 2
+        call_spread_pct = ((x["callAsk"] - x["callBid"]) / call_mid) * 100 if call_mid > 0 else 0
+        if call_spread_pct > 15:
+            wide_spreads = True
+            break
+            
+    if wide_spreads or is_options_screenshot:
+        compliance_issues.append("Stealth Option Markups: Bid-ask spreads on out-of-the-money options exceed 15% of the option's value, acting as a hidden fee (Sneaking).")
+        compliance_recommendations.append("Disclose the bid-ask spread percentages in real-time next to the order button so retail traders understand the slippage fee.")
+
+    # 2. Urgency
+    compliance_issues.append("Urgency Expiry Alerts: Countdown banner 'BTC-3JUN26 contracts expire in 16 hours! Lock in premium now!' creates artificial pressure (Urgency).")
+    compliance_recommendations.append("Remove high-pressure countdown phrases like 'Lock in premium now' and replace with a standard, non-colored expiry date label.")
+
+    # 3. Complexity barrier
+    compliance_issues.append("Obstruction of Key Information: Displaying Greek metrics (Delta, Gamma, Vega, Theta) and IV levels without tooltips or explanations confuses retail users into making risky leverage trades (Obstruction).")
+    compliance_recommendations.append("Add interactive tooltips explaining what Delta, IV, and Bid/Ask spreads mean, along with a warning of the high risk of options trading.")
+
+    overall_score = 65
+    risk_level = "medium"
+    
+    return jsonify({
+        "status": "success",
+        "asset": "BTC",
+        "spotPrice": spot_price,
+        "expiryDate": expiry_date,
+        "timeToExpiryHours": time_to_expiry_hours,
+        "strikes": strikes_data,
+        "ivSkew": iv_skew,
+        "putCallRatio": pcr_ratio,
+        "signal": {
+            "recommendation": recommended_action,
+            "explanation": action_explanation,
+            "indicators": signals
+        },
+        "compliance": {
+            "score": overall_score,
+            "riskLevel": risk_level,
+            "issues": compliance_issues,
+            "recommendations": compliance_recommendations
+        },
+        "extractedText": extracted_text or "Simulated options chain screen text parsed."
+    })
+
+if os.path.exists(dist_dir):
+    @app.route('/', defaults={'path': ''})
+    @app.route('/<path:path>')
+    def serve(path):
+        if path != "" and os.path.exists(os.path.join(app.static_folder, path)):
+            return app.send_static_file(path)
+        else:
+            return app.send_static_file('index.html')
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=int(os.environ.get('PORT', 8000)), debug=True)

src/app/App.tsx

@@ -1,114 +1,119 @@
-import { useState, useEffect } from 'react';
-import { UploadSection } from './components/UploadSection';
-import { DashboardHeader } from './components/DashboardHeader';
-import { AnalyzingAnimation } from './components/AnalyzingAnimation';
-import { Footer } from './components/Footer';
-import { AnalysisResults } from './components/AnalysisResults';
-import { ModelExplorer } from './components/ModelExplorer';
-import { MarketPrices } from './components/MarketPrices';
-import { AnalysisData } from './types/analysis';
-import { API_BASE_URL } from './config';
-
-function App() {
-  const [activeTab, setActiveTab] = useState<'auditor' | 'market' | 'explorer'>('auditor');
-  const [isDarkMode, setIsDarkMode] = useState(true); // default to dark theme
-  const [analysisData, setAnalysisData] = useState<AnalysisData | null>(null);
-  const [isAnalyzing, setIsAnalyzing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // Sync dark mode class
-  useEffect(() => {
-    if (isDarkMode) {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  }, [isDarkMode]);
-
-  const handleAnalyze = async (imageUrl: string) => {
-    setIsAnalyzing(true);
-    setError(null);
-    setAnalysisData(null);
-    
-    try {
-      // Direct call to local Python AI endpoint
-      const response = await fetch(`${API_BASE_URL}/api/analyze`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ imageUrl })
-      });
-
-      if (!response.ok) {
-        throw new Error(`Server returned status: ${response.status}`);
-      }
-      
-      const data = await response.json();
-      
-      if (data.error) throw new Error(data.error);
-      setAnalysisData(data);
-
-    } catch (err: any) {
-      console.error(err);
-      setError(err.message || 'Failed to connect to Python backend.');
-    } finally {
-      setIsAnalyzing(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-background text-foreground pb-12 font-sans flex flex-col justify-between transition-colors duration-300">
-      <div>
-        {/* Unified Dashboard Header with Tab Switcher & Theme Toggle */}
-        <DashboardHeader 
-          activeTab={activeTab} 
-          setActiveTab={(tab: any) => setActiveTab(tab)} 
-          isDarkMode={isDarkMode}
-          setIsDarkMode={setIsDarkMode}
-        />
-        
-        <main className="container mx-auto px-6 py-8 max-w-7xl">
-          {activeTab === 'auditor' && (
-            <div className="space-y-8">
-              {/* Uploader Section */}
-              <UploadSection onAnalyze={handleAnalyze} isAnalyzing={isAnalyzing} />
-              
-              {/* Error logs */}
-              {error && (
-                <div className="p-4 rounded-xl text-rose-500 bg-rose-500/10 border border-rose-500/25 text-xs font-semibold">
-                  <strong>Audit Failed:</strong> {error}
-                </div>
-              )}
-
-              {/* AI Processing animation */}
-              {isAnalyzing && (
-                <div className="bg-card/40 backdrop-blur-md p-16 rounded-2xl border border-border flex flex-col items-center justify-center">
-                  <AnalyzingAnimation />
-                  <p className="text-muted-foreground mt-6 font-mono text-xs animate-pulse uppercase tracking-widest font-bold">
-                    Running OCR Boundary & NLP Vector Models...
-                  </p>
-                </div>
-              )}
-              
-              {/* Audit Diagnostic Results */}
-              {analysisData && !isAnalyzing && (
-                <AnalysisResults data={analysisData} />
-              )}
-            </div>
-          )}
-
-          {activeTab === 'market' && (
-            <MarketPrices />
-          )}
-
-          {activeTab === 'explorer' && (
-            <ModelExplorer />
-          )}
-        </main>
-      </div>
-      
-      <Footer />
-    </div>
-  );
-}
-
-export default App;
+import { useState, useEffect } from 'react';
+import { UploadSection } from './components/UploadSection';
+import { DashboardHeader } from './components/DashboardHeader';
+import { AnalyzingAnimation } from './components/AnalyzingAnimation';
+import { Footer } from './components/Footer';
+import { AnalysisResults } from './components/AnalysisResults';
+import { ModelExplorer } from './components/ModelExplorer';
+import { ModelPerformance } from './components/ModelPerformance';
+import { MarketPrices } from './components/MarketPrices';
+import { AnalysisData } from './types/analysis';
+import { API_BASE_URL } from './config';
+
+function App() {
+  const [activeTab, setActiveTab] = useState<'auditor' | 'performance' | 'market' | 'explorer'>('auditor');
+  const [isDarkMode, setIsDarkMode] = useState(true); // default to dark theme
+  const [analysisData, setAnalysisData] = useState<AnalysisData | null>(null);
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Sync dark mode class
+  useEffect(() => {
+    if (isDarkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [isDarkMode]);
+
+  const handleAnalyze = async (imageUrl: string) => {
+    setIsAnalyzing(true);
+    setError(null);
+    setAnalysisData(null);
+    
+    try {
+      // Direct call to local Python AI endpoint
+      const response = await fetch(`${API_BASE_URL}/api/analyze`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ imageUrl })
+      });
+
+      if (!response.ok) {
+        throw new Error(`Server returned status: ${response.status}`);
+      }
+      
+      const data = await response.json();
+      
+      if (data.error) throw new Error(data.error);
+      setAnalysisData(data);
+
+    } catch (err: any) {
+      console.error(err);
+      setError(err.message || 'Failed to connect to Python backend.');
+    } finally {
+      setIsAnalyzing(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-background text-foreground pb-12 font-sans flex flex-col justify-between transition-colors duration-300">
+      <div>
+        {/* Unified Dashboard Header with Tab Switcher & Theme Toggle */}
+        <DashboardHeader 
+          activeTab={activeTab} 
+          setActiveTab={(tab: any) => setActiveTab(tab)} 
+          isDarkMode={isDarkMode}
+          setIsDarkMode={setIsDarkMode}
+        />
+        
+        <main className="container mx-auto px-6 py-8 max-w-7xl">
+          {activeTab === 'auditor' && (
+            <div className="space-y-8">
+              {/* Uploader Section */}
+              <UploadSection onAnalyze={handleAnalyze} isAnalyzing={isAnalyzing} />
+              
+              {/* Error logs */}
+              {error && (
+                <div className="p-4 rounded-xl text-rose-500 bg-rose-500/10 border border-rose-500/25 text-xs font-semibold">
+                  <strong>Audit Failed:</strong> {error}
+                </div>
+              )}
+
+              {/* AI Processing animation */}
+              {isAnalyzing && (
+                <div className="bg-card/40 backdrop-blur-md p-16 rounded-2xl border border-border flex flex-col items-center justify-center">
+                  <AnalyzingAnimation />
+                  <p className="text-muted-foreground mt-6 font-mono text-xs animate-pulse uppercase tracking-widest font-bold">
+                    Running OCR Boundary & NLP Vector Models...
+                  </p>
+                </div>
+              )}
+              
+              {/* Audit Diagnostic Results */}
+              {analysisData && !isAnalyzing && (
+                <AnalysisResults data={analysisData} />
+              )}
+            </div>
+          )}
+
+          {activeTab === 'performance' && (
+            <ModelPerformance />
+          )}
+
+          {activeTab === 'market' && (
+            <MarketPrices />
+          )}
+
+          {activeTab === 'explorer' && (
+            <ModelExplorer />
+          )}
+        </main>
+      </div>
+      
+      <Footer />
+    </div>
+  );
+}
+
+export default App;

src/app/components/DarkPatternsList.tsx

@@ -1,158 +1,179 @@
-import { DarkPattern } from '../types/analysis';
-import { Badge } from './ui/badge';
-import { AlertTriangle, Brain, FileText, Lightbulb } from 'lucide-react';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from './ui/accordion';
-
-interface DarkPatternsListProps {
-  patterns: DarkPattern[];
-}
-
-export function DarkPatternsList({ patterns }: DarkPatternsListProps) {
-  const getSeverityBadgeClass = (severity: string) => {
-    switch (severity) {
-      case 'critical':
-        return 'bg-rose-500/10 text-rose-400 border border-rose-500/20';
-      case 'high':
-        return 'bg-orange-500/10 text-orange-400 border border-orange-500/20';
-      case 'medium':
-        return 'bg-amber-500/10 text-amber-400 border border-amber-500/20';
-      default:
-        return 'bg-indigo-500/10 text-indigo-400 border border-indigo-500/20';
-    }
-  };
-
-  const getSeverityBorderColor = (severity: string) => {
-    switch (severity) {
-      case 'critical':
-        return 'border-rose-500/25 bg-rose-500/5 hover:border-rose-500/40';
-      case 'high':
-        return 'border-orange-500/25 bg-orange-500/5 hover:border-orange-500/40';
-      case 'medium':
-        return 'border-amber-500/25 bg-amber-500/5 hover:border-amber-500/40';
-      default:
-        return 'border-indigo-500/25 bg-indigo-500/5 hover:border-indigo-500/40';
-    }
-  };
-
-  // Sort by severity
-  const sortedPatterns = [...patterns].sort((a, b) => {
-    const severityOrder = { critical: 0, high: 1, medium: 2, low: 3 };
-    return severityOrder[a.severity] - severityOrder[b.severity];
-  });
-
-  return (
-    <div className="space-y-6">
-      {/* Summary */}
-      <div className="bg-slate-900/30 rounded-xl p-4 border border-border">
-        <div className="flex items-center gap-3">
-          <AlertTriangle className="w-5 h-5 text-indigo-400" />
-          <p className="text-xs text-slate-300">
-            Identified <strong>{patterns.length} deceptive copy triggers</strong> in the layout layers. 
-            Expand each item below for compliance details and XAI fixes.
-          </p>
-        </div>
-      </div>
-
-      {/* Patterns List */}
-      <Accordion type="single" collapsible className="space-y-4">
-        {sortedPatterns.map((pattern) => (
-          <AccordionItem
-            key={pattern.id}
-            value={pattern.id}
-            className={`border rounded-xl overflow-hidden transition-all duration-300 ${getSeverityBorderColor(pattern.severity)}`}
-          >
-            <AccordionTrigger className="px-6 py-4 hover:no-underline text-slate-100">
-              <div className="flex items-center gap-4 w-full text-left">
-                <Badge className={`${getSeverityBadgeClass(pattern.severity)} text-[10px] font-bold px-2 py-0.5 rounded-md`}>
-                  {pattern.severity}
-                </Badge>
-                <div className="flex-1 min-w-0">
-                  <div className="font-bold text-xs sm:text-sm text-slate-200">{pattern.type}</div>
-                  <div className="text-[11px] text-slate-400 truncate mt-0.5">{pattern.description}</div>
-                </div>
-                <div className="text-[10px] font-mono text-slate-400 shrink-0 bg-slate-950/20 px-2 py-1 rounded border border-white/5">
-                  {pattern.confidence}% confidence
-                </div>
-              </div>
-            </AccordionTrigger>
-            
-            <AccordionContent className="px-6 pb-6">
-              <div className="space-y-4 pt-4 border-t border-white/5">
-                {/* Description */}
-                <div className="bg-slate-950/30 rounded-xl p-4 border border-white/5">
-                  <div className="flex items-start gap-3">
-                    <FileText className="w-4 h-4 text-indigo-400 shrink-0 mt-0.5" />
-                    <div>
-                      <h5 className="font-bold text-xs text-slate-200 mb-1">Issue Description</h5>
-                      <p className="text-xs text-slate-300">{pattern.description}</p>
-                    </div>
-                  </div>
-                </div>
-
-                {/* CFPB Violation */}
-                <div className="bg-slate-950/30 rounded-xl p-4 border border-rose-500/15">
-                  <div className="flex items-start gap-3">
-                    <AlertTriangle className="w-4 h-4 text-rose-400 shrink-0 mt-0.5" />
-                    <div>
-                      <h5 className="font-bold text-xs text-rose-300 mb-1">CFPB Compliance Conflict</h5>
-                      <p className="text-xs text-rose-200/80 leading-relaxed">{pattern.cfpbViolation}</p>
-                    </div>
-                  </div>
-                </div>
-
-                {/* XAI Recommendation */}
-                <div className="bg-slate-950/30 rounded-xl p-4 border border-emerald-500/15">
-                  <div className="flex items-start gap-3">
-                    <Lightbulb className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
-                    <div>
-                      <h5 className="font-bold text-xs text-emerald-300 mb-1">Recommended Fix</h5>
-                      <p className="text-xs text-emerald-200/80 leading-relaxed">{pattern.recommendation}</p>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Location Info */}
-                <div className="bg-slate-950/30 rounded-xl p-4 border border-white/5">
-                  <div className="flex items-start gap-3">
-                    <Brain className="w-4 h-4 text-purple-400 shrink-0 mt-0.5" />
-                    <div className="flex-1">
-                      <h5 className="font-bold text-xs text-slate-200 mb-2">Neural Network Activation Layer</h5>
-                      <div className="grid grid-cols-2 gap-3 text-xs">
-                        <div>
-                          <span className="text-slate-400">OCR Bounding Box:</span>{' '}
-                          <span className="text-slate-200 font-mono font-medium">
-                            ({pattern.location.x}%, {pattern.location.y}%)
-                          </span>
-                        </div>
-                        <div>
-                          <span className="text-slate-400">Visual Box Size:</span>{' '}
-                          <span className="text-slate-200 font-mono font-medium">
-                            {pattern.location.width}% × {pattern.location.height}%
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </AccordionContent>
-          </AccordionItem>
-        ))}
-      </Accordion>
-
-      {/* About XAI */}
-      <div className="bg-indigo-500/5 border border-indigo-500/10 rounded-xl p-4">
-        <h4 className="font-bold text-xs text-indigo-300 mb-2">🤖 Neural Network Audit Mechanism</h4>
-        <p className="text-xs text-slate-400 leading-relaxed">
-          The models run OCR to extract text boundaries and classify the linguistic copy structure.
-          All recommendations are generated by parsing structural cues against TILA, EFTA, and CFPB administrative records.
-        </p>
-      </div>
-    </div>
-  );
-}
+import { DarkPattern } from '../types/analysis';
+import { Badge } from './ui/badge';
+import { AlertTriangle, Brain, FileText, Lightbulb } from 'lucide-react';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from './ui/accordion';
+
+interface DarkPatternsListProps {
+  patterns: DarkPattern[];
+}
+
+export function DarkPatternsList({ patterns }: DarkPatternsListProps) {
+  const getSeverityBadgeClass = (severity: string) => {
+    switch (severity) {
+      case 'critical':
+        return 'bg-rose-500/10 text-rose-400 border border-rose-500/20';
+      case 'high':
+        return 'bg-orange-500/10 text-orange-400 border border-orange-500/20';
+      case 'medium':
+        return 'bg-amber-500/10 text-amber-400 border border-amber-500/20';
+      default:
+        return 'bg-indigo-500/10 text-indigo-400 border border-indigo-500/20';
+    }
+  };
+
+  const getSeverityBorderColor = (severity: string) => {
+    switch (severity) {
+      case 'critical':
+        return 'border-rose-500/25 bg-rose-500/5 hover:border-rose-500/40';
+      case 'high':
+        return 'border-orange-500/25 bg-orange-500/5 hover:border-orange-500/40';
+      case 'medium':
+        return 'border-amber-500/25 bg-amber-500/5 hover:border-amber-500/40';
+      default:
+        return 'border-indigo-500/25 bg-indigo-500/5 hover:border-indigo-500/40';
+    }
+  };
+
+  // Sort by severity
+  const sortedPatterns = [...patterns].sort((a, b) => {
+    const severityOrder = { critical: 0, high: 1, medium: 2, low: 3 };
+    return severityOrder[a.severity] - severityOrder[b.severity];
+  });
+
+  return (
+    <div className="space-y-6">
+      {/* Summary */}
+      <div className="bg-slate-900/30 rounded-xl p-4 border border-border">
+        <div className="flex items-center gap-3">
+          <AlertTriangle className="w-5 h-5 text-indigo-400" />
+          <p className="text-xs text-slate-300">
+            Identified <strong>{patterns.length} deceptive copy triggers</strong> in the layout layers. 
+            Expand each item below for compliance details and XAI fixes.
+          </p>
+        </div>
+      </div>
+
+      {/* Patterns List */}
+      <Accordion type="single" collapsible className="space-y-4">
+        {sortedPatterns.map((pattern) => (
+          <AccordionItem
+            key={pattern.id}
+            value={pattern.id}
+            className={`border rounded-xl overflow-hidden transition-all duration-300 ${getSeverityBorderColor(pattern.severity)}`}
+          >
+            <AccordionTrigger className="px-6 py-4 hover:no-underline text-slate-100">
+              <div className="flex items-center gap-4 w-full text-left">
+                <Badge className={`${getSeverityBadgeClass(pattern.severity)} text-[10px] font-bold px-2 py-0.5 rounded-md`}>
+                  {pattern.severity}
+                </Badge>
+                <div className="flex-1 min-w-0">
+                  <div className="font-bold text-xs sm:text-sm text-slate-200">{pattern.type}</div>
+                  <div className="text-[11px] text-slate-400 truncate mt-0.5">{pattern.description}</div>
+                </div>
+                <div className="text-[10px] font-mono text-slate-400 shrink-0 bg-slate-950/20 px-2 py-1 rounded border border-white/5">
+                  {pattern.confidence}% confidence
+                </div>
+              </div>
+            </AccordionTrigger>
+            
+            <AccordionContent className="px-6 pb-6">
+              <div className="space-y-4 pt-4 border-t border-white/5">
+                {/* Detected copy + XAI phrases */}
+                {pattern.evidence && (
+                  <div className="bg-slate-950/30 rounded-xl p-4 border border-indigo-500/15">
+                    <h5 className="font-bold text-xs text-indigo-300 mb-2">Detected Copy</h5>
+                    <p className="text-xs text-slate-200 font-mono leading-relaxed">"{pattern.evidence}"</p>
+                    {pattern.explanation && pattern.explanation.length > 0 && (
+                      <div className="flex flex-wrap gap-1.5 mt-3">
+                        {pattern.explanation.map((e) => (
+                          <span
+                            key={e.phrase}
+                            className="text-[10px] font-mono px-2 py-0.5 rounded bg-indigo-500/15 text-indigo-300 border border-indigo-500/25"
+                            title={`contribution weight ${e.weight}`}
+                          >
+                            {e.phrase}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {/* Description */}
+                <div className="bg-slate-950/30 rounded-xl p-4 border border-white/5">
+                  <div className="flex items-start gap-3">
+                    <FileText className="w-4 h-4 text-indigo-400 shrink-0 mt-0.5" />
+                    <div>
+                      <h5 className="font-bold text-xs text-slate-200 mb-1">Issue Description</h5>
+                      <p className="text-xs text-slate-300">{pattern.description}</p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* CFPB Violation */}
+                <div className="bg-slate-950/30 rounded-xl p-4 border border-rose-500/15">
+                  <div className="flex items-start gap-3">
+                    <AlertTriangle className="w-4 h-4 text-rose-400 shrink-0 mt-0.5" />
+                    <div>
+                      <h5 className="font-bold text-xs text-rose-300 mb-1">CFPB Compliance Conflict</h5>
+                      <p className="text-xs text-rose-200/80 leading-relaxed">{pattern.cfpbViolation}</p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* XAI Recommendation */}
+                <div className="bg-slate-950/30 rounded-xl p-4 border border-emerald-500/15">
+                  <div className="flex items-start gap-3">
+                    <Lightbulb className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
+                    <div>
+                      <h5 className="font-bold text-xs text-emerald-300 mb-1">Recommended Fix</h5>
+                      <p className="text-xs text-emerald-200/80 leading-relaxed">{pattern.recommendation}</p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Location Info */}
+                <div className="bg-slate-950/30 rounded-xl p-4 border border-white/5">
+                  <div className="flex items-start gap-3">
+                    <Brain className="w-4 h-4 text-purple-400 shrink-0 mt-0.5" />
+                    <div className="flex-1">
+                      <h5 className="font-bold text-xs text-slate-200 mb-2">Neural Network Activation Layer</h5>
+                      <div className="grid grid-cols-2 gap-3 text-xs">
+                        <div>
+                          <span className="text-slate-400">OCR Bounding Box:</span>{' '}
+                          <span className="text-slate-200 font-mono font-medium">
+                            ({pattern.location.x}%, {pattern.location.y}%)
+                          </span>
+                        </div>
+                        <div>
+                          <span className="text-slate-400">Visual Box Size:</span>{' '}
+                          <span className="text-slate-200 font-mono font-medium">
+                            {pattern.location.width}% × {pattern.location.height}%
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+
+      {/* About XAI */}
+      <div className="bg-indigo-500/5 border border-indigo-500/10 rounded-xl p-4">
+        <h4 className="font-bold text-xs text-indigo-300 mb-2">🤖 Neural Network Audit Mechanism</h4>
+        <p className="text-xs text-slate-400 leading-relaxed">
+          The models run OCR to extract text boundaries and classify the linguistic copy structure.
+          All recommendations are generated by parsing structural cues against TILA, EFTA, and CFPB administrative records.
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/components/DashboardHeader.tsx

@@ -1,82 +1,83 @@
-import { Shield, LayoutDashboard, Database, Cpu, Sun, Moon, TrendingUp } from 'lucide-react';
-
-interface DashboardHeaderProps {
-  activeTab: string;
-  setActiveTab: (tab: string) => void;
-  isDarkMode: boolean;
-  setIsDarkMode: (dark: boolean) => void;
-}
-
-export function DashboardHeader({ activeTab, setActiveTab, isDarkMode, setIsDarkMode }: DashboardHeaderProps) {
-  const tabs = [
-    { id: 'auditor', label: 'Screenshot Auditor', icon: LayoutDashboard },
-    { id: 'market', label: 'Real-Time Markets', icon: TrendingUp },
-    { id: 'explorer', label: 'Model & Dataset Explorer', icon: Database },
-  ];
-
-  return (
-    <header className="sticky top-0 z-50 bg-card/60 backdrop-blur-md border-b border-border shadow-lg transition-colors duration-300">
-      <div className="container mx-auto px-6 py-4 max-w-7xl">
-        <div className="flex flex-col md:flex-row items-center justify-between gap-4">
-          {/* Brand Info */}
-          <div className="flex items-center gap-3">
-            <div className="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-2.5 rounded-xl shadow-[0_0_15px_rgba(99,102,241,0.4)]">
-              <Shield className="w-7 h-7 text-white" />
-            </div>
-            <div>
-              <div className="flex items-center gap-2">
-                <h1 className="text-xl font-bold bg-gradient-to-r from-foreground via-foreground/90 to-muted-foreground bg-clip-text text-transparent">
-                  Fintech Dark Pattern Detector
-                </h1>
-                <span className="text-[10px] font-mono font-semibold bg-indigo-500/10 text-indigo-500 dark:text-indigo-400 border border-indigo-500/20 px-2 py-0.5 rounded-full">
-                  v1.2.0
-                </span>
-              </div>
-              <p className="text-xs text-muted-foreground flex items-center gap-1.5 mt-0.5">
-                <Cpu className="w-3.5 h-3.5 text-indigo-500 dark:text-indigo-400" />
-                AI-Powered XAI Compliance Analyzer (TF-IDF & Logistic Regression)
-              </p>
-            </div>
-          </div>
-
-          {/* Navigation & Theme Switcher */}
-          <div className="flex items-center gap-3">
-            <nav className="flex bg-slate-900/10 dark:bg-slate-900/60 p-1.5 rounded-xl border border-border">
-              {tabs.map((tab) => {
-                const Icon = tab.icon;
-                const isActive = activeTab === tab.id;
-                return (
-                  <button
-                    key={tab.id}
-                    onClick={() => setActiveTab(tab.id)}
-                    className={`flex items-center gap-2 px-4 py-2 text-xs font-semibold rounded-lg transition-all duration-300 ${
-                      isActive
-                        ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-md shadow-indigo-500/20 scale-[1.02]'
-                        : 'text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5'
-                    }`}
-                  >
-                    <Icon className="w-4 h-4" />
-                    {tab.label}
-                  </button>
-                );
-              })}
-            </nav>
-
-            {/* Theme Toggle Button */}
-            <button
-              onClick={() => setIsDarkMode(!isDarkMode)}
-              className="p-2.5 rounded-xl border border-border bg-card hover:bg-muted/50 text-muted-foreground hover:text-foreground transition-all duration-300 shadow-md flex items-center justify-center cursor-pointer"
-              title={isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
-            >
-              {isDarkMode ? (
-                <Sun className="w-4 h-4 text-amber-400" />
-              ) : (
-                <Moon className="w-4 h-4 text-indigo-500" />
-              )}
-            </button>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-}
+import { Shield, LayoutDashboard, Database, Cpu, Sun, Moon, TrendingUp, Gauge } from 'lucide-react';
+
+interface DashboardHeaderProps {
+  activeTab: string;
+  setActiveTab: (tab: string) => void;
+  isDarkMode: boolean;
+  setIsDarkMode: (dark: boolean) => void;
+}
+
+export function DashboardHeader({ activeTab, setActiveTab, isDarkMode, setIsDarkMode }: DashboardHeaderProps) {
+  const tabs = [
+    { id: 'auditor', label: 'Screenshot Auditor', icon: LayoutDashboard },
+    { id: 'performance', label: 'Model Performance', icon: Gauge },
+    { id: 'market', label: 'Real-Time Markets', icon: TrendingUp },
+    { id: 'explorer', label: 'Model & Dataset Explorer', icon: Database },
+  ];
+
+  return (
+    <header className="sticky top-0 z-50 bg-card/60 backdrop-blur-md border-b border-border shadow-lg transition-colors duration-300">
+      <div className="container mx-auto px-6 py-4 max-w-7xl">
+        <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+          {/* Brand Info */}
+          <div className="flex items-center gap-3">
+            <div className="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-2.5 rounded-xl shadow-[0_0_15px_rgba(99,102,241,0.4)]">
+              <Shield className="w-7 h-7 text-white" />
+            </div>
+            <div>
+              <div className="flex items-center gap-2">
+                <h1 className="text-xl font-bold bg-gradient-to-r from-foreground via-foreground/90 to-muted-foreground bg-clip-text text-transparent">
+                  Fintech Dark Pattern Detector
+                </h1>
+                <span className="text-[10px] font-mono font-semibold bg-indigo-500/10 text-indigo-500 dark:text-indigo-400 border border-indigo-500/20 px-2 py-0.5 rounded-full">
+                  v1.2.0
+                </span>
+              </div>
+              <p className="text-xs text-muted-foreground flex items-center gap-1.5 mt-0.5">
+                <Cpu className="w-3.5 h-3.5 text-indigo-500 dark:text-indigo-400" />
+                AI-Powered XAI Compliance Analyzer (TF-IDF & Logistic Regression)
+              </p>
+            </div>
+          </div>
+
+          {/* Navigation & Theme Switcher */}
+          <div className="flex items-center gap-3">
+            <nav className="flex bg-slate-900/10 dark:bg-slate-900/60 p-1.5 rounded-xl border border-border">
+              {tabs.map((tab) => {
+                const Icon = tab.icon;
+                const isActive = activeTab === tab.id;
+                return (
+                  <button
+                    key={tab.id}
+                    onClick={() => setActiveTab(tab.id)}
+                    className={`flex items-center gap-2 px-4 py-2 text-xs font-semibold rounded-lg transition-all duration-300 ${
+                      isActive
+                        ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-md shadow-indigo-500/20 scale-[1.02]'
+                        : 'text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5'
+                    }`}
+                  >
+                    <Icon className="w-4 h-4" />
+                    {tab.label}
+                  </button>
+                );
+              })}
+            </nav>
+
+            {/* Theme Toggle Button */}
+            <button
+              onClick={() => setIsDarkMode(!isDarkMode)}
+              className="p-2.5 rounded-xl border border-border bg-card hover:bg-muted/50 text-muted-foreground hover:text-foreground transition-all duration-300 shadow-md flex items-center justify-center cursor-pointer"
+              title={isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
+            >
+              {isDarkMode ? (
+                <Sun className="w-4 h-4 text-amber-400" />
+              ) : (
+                <Moon className="w-4 h-4 text-indigo-500" />
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

src/app/components/ModelPerformance.tsx

@@ -0,0 +1,331 @@
+import { useState, useEffect } from 'react';
+import { Gauge, FlaskConical, Loader2, AlertTriangle, Sparkles, ShieldAlert, ShieldCheck } from 'lucide-react';
+import { Card } from './ui/card';
+import { Button } from './ui/button';
+import { API_BASE_URL } from '../config';
+
+interface ClassStats {
+  precision: number;
+  recall: number;
+  f1: number;
+  support: number;
+}
+
+interface Metrics {
+  modelName: string;
+  datasetSize: number;
+  numClasses: number;
+  testSize: number;
+  accuracy: number;
+  macroF1: number;
+  weightedF1: number;
+  perClass: Record<string, ClassStats>;
+  classDistribution: Record<string, number>;
+  confusionMatrix: { labels: string[]; matrix: number[][] };
+}
+
+interface TextResult {
+  text: string;
+  prediction: string;
+  confidence: number;
+  isDarkPattern: boolean;
+  topClasses: { label: string; probability: number }[];
+  explanation: { phrase: string; weight: number }[];
+  cfpbViolation?: string;
+  recommendation?: string;
+}
+
+const EXAMPLE_TEXTS = [
+  'Hurry! Only 3 left in stock — sale ends in 10 minutes!',
+  '2,847 customers bought this in the last 24 hours',
+  'No thanks, I hate saving money',
+  'Your monthly statement is available in the documents section.',
+];
+
+export function ModelPerformance() {
+  const [metrics, setMetrics] = useState<Metrics | null>(null);
+  const [metricsError, setMetricsError] = useState<string | null>(null);
+  const [text, setText] = useState('');
+  const [testing, setTesting] = useState(false);
+  const [result, setResult] = useState<TextResult | null>(null);
+  const [testError, setTestError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch(`${API_BASE_URL}/api/metrics`)
+      .then((r) => {
+        if (!r.ok) throw new Error(`Server returned ${r.status}`);
+        return r.json();
+      })
+      .then(setMetrics)
+      .catch((e) => setMetricsError(e.message));
+  }, []);
+
+  const runTest = async (input?: string) => {
+    const value = (input ?? text).trim();
+    if (value.length < 3) return;
+    if (input) setText(input);
+    setTesting(true);
+    setTestError(null);
+    setResult(null);
+    try {
+      const r = await fetch(`${API_BASE_URL}/api/analyze-text`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text: value }),
+      });
+      const data = await r.json();
+      if (!r.ok || data.error) throw new Error(data.error || `Server returned ${r.status}`);
+      setResult(data);
+    } catch (e: any) {
+      setTestError(e.message);
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const f1Color = (f1: number) =>
+    f1 >= 0.9 ? 'bg-emerald-500' : f1 >= 0.7 ? 'bg-amber-500' : 'bg-rose-500';
+
+  return (
+    <div className="space-y-8">
+      {/* ── Live Text Lab ─────────────────────────────────────────── */}
+      <Card className="p-8 bg-card/40 backdrop-blur-md border border-border shadow-xl rounded-2xl">
+        <h2 className="text-xl font-bold text-foreground mb-1 flex items-center gap-2">
+          <FlaskConical className="w-5 h-5 text-indigo-500 dark:text-indigo-400" />
+          Live Text Lab
+        </h2>
+        <p className="text-xs text-muted-foreground mb-6">
+          Paste any fintech copywriting and see what the model thinks — and which phrases drove the decision.
+        </p>
+
+        <div className="flex flex-col md:flex-row gap-3">
+          <input
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && runTest()}
+            placeholder='e.g. "Hurry! Only 2 left in stock!"'
+            className="flex-1 px-4 py-3 rounded-xl bg-muted/20 border border-border text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-indigo-500/60"
+          />
+          <Button
+            onClick={() => runTest()}
+            disabled={testing || text.trim().length < 3}
+            className="h-12 px-8 rounded-xl text-xs font-bold uppercase tracking-wider bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white"
+          >
+            {testing ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Classify'}
+          </Button>
+        </div>
+
+        <div className="flex flex-wrap gap-2 mt-3">
+          {EXAMPLE_TEXTS.map((t) => (
+            <button
+              key={t}
+              onClick={() => runTest(t)}
+              className="text-[11px] px-3 py-1.5 rounded-full border border-border bg-muted/10 text-muted-foreground hover:text-foreground hover:border-indigo-500/40 transition-colors"
+            >
+              {t}
+            </button>
+          ))}
+        </div>
+
+        {testError && (
+          <div className="mt-4 p-3 rounded-xl text-rose-500 bg-rose-500/10 border border-rose-500/25 text-xs font-semibold">
+            {testError}
+          </div>
+        )}
+
+        {result && (
+          <div className="mt-6 p-5 rounded-xl border border-border bg-muted/10 space-y-4">
+            <div className="flex items-center gap-3 flex-wrap">
+              {result.isDarkPattern ? (
+                <ShieldAlert className="w-6 h-6 text-rose-500" />
+              ) : (
+                <ShieldCheck className="w-6 h-6 text-emerald-500" />
+              )}
+              <span
+                className={`text-sm font-extrabold uppercase tracking-wide ${
+                  result.isDarkPattern ? 'text-rose-500' : 'text-emerald-500'
+                }`}
+              >
+                {result.prediction}
+              </span>
+              <span className="text-xs font-mono text-muted-foreground">
+                {result.confidence}% confidence
+              </span>
+            </div>
+
+            {result.explanation.length > 0 && (
+              <div>
+                <div className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-2 flex items-center gap-1.5">
+                  <Sparkles className="w-3 h-3" /> Phrases that triggered this verdict
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {result.explanation.map((e) => (
+                    <span
+                      key={e.phrase}
+                      className="text-xs font-mono px-2.5 py-1 rounded-md bg-indigo-500/10 text-indigo-500 dark:text-indigo-300 border border-indigo-500/25"
+                      title={`weight ${e.weight}`}
+                    >
+                      {e.phrase}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div className="grid grid-cols-3 gap-2">
+              {result.topClasses.map((c) => (
+                <div key={c.label} className="p-2.5 rounded-lg bg-muted/20 border border-border">
+                  <div className="text-[10px] text-muted-foreground truncate">{c.label}</div>
+                  <div className="text-sm font-bold text-foreground">{c.probability}%</div>
+                </div>
+              ))}
+            </div>
+
+            {result.cfpbViolation && (
+              <div className="p-3 rounded-lg bg-amber-500/10 border border-amber-500/25 text-xs text-amber-600 dark:text-amber-400">
+                <strong>Compliance:</strong> {result.cfpbViolation}
+              </div>
+            )}
+          </div>
+        )}
+      </Card>
+
+      {/* ── Evaluation metrics ────────────────────────────────────── */}
+      <Card className="p-8 bg-card/40 backdrop-blur-md border border-border shadow-xl rounded-2xl">
+        <h2 className="text-xl font-bold text-foreground mb-1 flex items-center gap-2">
+          <Gauge className="w-5 h-5 text-indigo-500 dark:text-indigo-400" />
+          Model Performance
+        </h2>
+        <p className="text-xs text-muted-foreground mb-6">
+          Evaluated on a stratified held-out 20% test split, never seen during training.
+        </p>
+
+        {metricsError && (
+          <div className="p-4 rounded-xl text-rose-500 bg-rose-500/10 border border-rose-500/25 text-xs font-semibold">
+            Failed to load metrics: {metricsError}
+          </div>
+        )}
+
+        {!metrics && !metricsError && (
+          <div className="flex items-center justify-center py-16">
+            <Loader2 className="w-6 h-6 animate-spin text-indigo-500" />
+          </div>
+        )}
+
+        {metrics && (
+          <div className="space-y-8">
+            <div className="text-xs font-mono text-muted-foreground">{metrics.modelName}</div>
+
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              {[
+                { label: 'Accuracy', value: `${(metrics.accuracy * 100).toFixed(1)}%` },
+                { label: 'Macro F1', value: metrics.macroF1.toFixed(3) },
+                { label: 'Weighted F1', value: metrics.weightedF1.toFixed(3) },
+                { label: 'Training samples', value: metrics.datasetSize.toLocaleString() },
+              ].map((s) => (
+                <div key={s.label} className="p-4 rounded-xl bg-muted/10 border border-border">
+                  <div className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+                    {s.label}
+                  </div>
+                  <div className="text-2xl font-extrabold text-foreground mt-1">{s.value}</div>
+                </div>
+              ))}
+            </div>
+
+            {/* Per-class table */}
+            <div>
+              <h3 className="text-sm font-bold text-foreground mb-3">F1 score per pattern class</h3>
+              <div className="space-y-2">
+                {Object.entries(metrics.perClass)
+                  .sort((a, b) => b[1].f1 - a[1].f1)
+                  .map(([cls, s]) => (
+                    <div key={cls} className="flex items-center gap-3">
+                      <div className="w-36 text-xs font-semibold text-foreground truncate">{cls}</div>
+                      <div className="flex-1 h-3 rounded-full bg-muted/30 overflow-hidden">
+                        <div
+                          className={`h-full rounded-full ${f1Color(s.f1)}`}
+                          style={{ width: `${Math.max(s.f1 * 100, 2)}%` }}
+                        />
+                      </div>
+                      <div className="w-12 text-xs font-mono text-foreground text-right">
+                        {s.f1.toFixed(2)}
+                      </div>
+                      <div className="w-20 text-[10px] font-mono text-muted-foreground text-right">
+                        n={s.support}
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+
+            {/* Low-support warning — honest about dataset limitations */}
+            {Object.values(metrics.perClass).some((s) => s.support < 10) && (
+              <div className="flex items-start gap-2.5 p-3.5 rounded-xl bg-amber-500/10 border border-amber-500/25">
+                <AlertTriangle className="w-4 h-4 text-amber-500 mt-0.5 shrink-0" />
+                <p className="text-xs text-amber-600 dark:text-amber-400 leading-relaxed">
+                  Classes with very few test samples (low <span className="font-mono">n</span>) have
+                  unreliable scores — the dataset is heavily imbalanced (e.g. Forced Action and
+                  Sneaking have under 20 examples total). Collecting more examples for rare
+                  patterns is our top data priority.
+                </p>
+              </div>
+            )}
+
+            {/* Confusion matrix */}
+            <div>
+              <h3 className="text-sm font-bold text-foreground mb-3">Confusion matrix (rows = truth, columns = prediction)</h3>
+              <div className="overflow-x-auto">
+                <table className="text-[10px] font-mono border-collapse">
+                  <thead>
+                    <tr>
+                      <th className="p-1.5" />
+                      {metrics.confusionMatrix.labels.map((l) => (
+                        <th key={l} className="p-1.5 text-muted-foreground font-semibold max-w-16 truncate" title={l}>
+                          {l.split(' ')[0]}
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {metrics.confusionMatrix.matrix.map((row, i) => {
+                      const rowMax = Math.max(...row, 1);
+                      return (
+                        <tr key={metrics.confusionMatrix.labels[i]}>
+                          <td className="p-1.5 text-muted-foreground font-semibold text-right pr-3 whitespace-nowrap">
+                            {metrics.confusionMatrix.labels[i]}
+                          </td>
+                          {row.map((v, j) => (
+                            <td
+                              key={j}
+                              className={`p-1.5 text-center min-w-12 rounded ${
+                                v === 0
+                                  ? 'text-muted-foreground/40'
+                                  : i === j
+                                    ? 'text-emerald-500 font-bold'
+                                    : 'text-rose-500 font-bold'
+                              }`}
+                              style={{
+                                backgroundColor:
+                                  v > 0
+                                    ? i === j
+                                      ? `rgba(16,185,129,${0.08 + 0.3 * (v / rowMax)})`
+                                      : `rgba(244,63,94,${0.08 + 0.3 * (v / rowMax)})`
+                                    : undefined,
+                              }}
+                            >
+                              {v}
+                            </td>
+                          ))}
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+}

src/app/components/UploadSection.tsx

@@ -1,188 +1,189 @@
-import { useState } from 'react';
-import { Upload, Image as ImageIcon, Loader2, Shield } from 'lucide-react';
-import { Button } from './ui/button';
-import { Card } from './ui/card';
-
-interface UploadSectionProps {
-  onAnalyze: (imageUrl: string) => void;
-  isAnalyzing: boolean;
-}
-
-const SAMPLE_IMAGES = [
-  {
-    id: '1',
-    name: 'Urgency & Scarcity Checkout',
-    url: 'https://images.unsplash.com/photo-1563986768609-322da13575f3?w=800&q=80',
-    description: 'Fintech checkout containing countdown timers and artificial item availability notifications.'
-  },
-  {
-    id: '2',
-    name: 'Pre-Selected Fees Flow',
-    url: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80',
-    description: 'Trading account registration featuring pre-checked subscription add-ons and sneaking costs.'
-  },
-  {
-    id: '3',
-    name: 'Misdirecting Options Confirm',
-    url: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&q=80',
-    description: 'Subscription cancellation modal using guilt-inducing confirmshaming copywriting.'
-  }
-];
-
-export function UploadSection({ onAnalyze, isAnalyzing }: UploadSectionProps) {
-  const [selectedSample, setSelectedSample] = useState<string | null>(null);
-  const [uploadedImage, setUploadedImage] = useState<string | null>(null);
-
-  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const result = e.target?.result as string;
-        setUploadedImage(result);
-        setSelectedSample(null);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const handleSampleSelect = (url: string) => {
-    setSelectedSample(url);
-    setUploadedImage(null);
-  };
-
-  const handleAnalyze = () => {
-    const imageUrl = uploadedImage || selectedSample;
-    if (imageUrl) {
-      onAnalyze(imageUrl);
-    }
-  };
-
-  const activeImage = uploadedImage || selectedSample;
-
-  return (
-    <div className="space-y-6">
-      <Card className="p-8 bg-card/40 backdrop-blur-md border border-border shadow-xl rounded-2xl relative overflow-hidden transition-colors duration-300">
-        {/* Glow overlay */}
-        <div className="absolute top-0 right-0 w-80 h-80 bg-indigo-500/10 rounded-full blur-3xl -z-10 pointer-events-none" />
-        <div className="absolute bottom-0 left-0 w-80 h-80 bg-purple-500/5 rounded-full blur-3xl -z-10 pointer-events-none" />
-        
-        <h2 className="text-xl font-bold text-foreground mb-6 flex items-center gap-2">
-          <Upload className="w-5 h-5 text-indigo-500 dark:text-indigo-400" />
-          Audit New UI Interface
-        </h2>
-        
-        <div className="grid md:grid-cols-2 gap-8">
-          {/* Upload Area (Fits target image directly inside) */}
-          <div className="space-y-4">
-            <label
-              htmlFor="file-upload"
-              className={`relative flex flex-col items-center justify-center w-full h-72 border-2 border-dashed rounded-xl cursor-pointer overflow-hidden transition-all duration-300 ${
-                isAnalyzing 
-                  ? 'border-border bg-muted/10 cursor-not-allowed'
-                  : activeImage
-                    ? 'border-indigo-500/50 bg-slate-900/10 dark:bg-slate-950/40 shadow-inner'
-                    : 'border-border bg-muted/20 hover:border-indigo-500/50 hover:bg-muted/40'
-              }`}
-            >
-              {activeImage ? (
-                <>
-                  <img
-                    src={activeImage}
-                    alt="Uploaded UI Target"
-                    className="w-full h-full object-contain p-2"
-                  />
-                  {/* Hover Overlay */}
-                  <div className="absolute inset-0 bg-slate-950/50 opacity-0 hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center text-center p-4">
-                    <Upload className="w-8 h-8 text-indigo-400 mb-2" />
-                    <span className="text-xs font-extrabold text-white">Click or Drop to Replace Screenshot</span>
-                  </div>
-                  {/* Bottom Indicator badge */}
-                  <div className="absolute bottom-2 left-2">
-                    <span className="text-[9px] font-mono bg-indigo-600 text-white px-2.5 py-1 rounded-md uppercase tracking-wider font-extrabold shadow-lg border border-indigo-500/20">
-                      Target Interface Loaded
-                    </span>
-                  </div>
-                </>
-              ) : (
-                <div className="flex flex-col items-center justify-center pt-5 pb-6 px-4 text-center">
-                  <div className="p-4 bg-indigo-500/5 rounded-2xl mb-4 border border-indigo-500/10">
-                    <Upload className="w-10 h-10 text-indigo-500 dark:text-indigo-400 animate-pulse" />
-                  </div>
-                  <p className="mb-2 text-sm text-foreground/80">
-                    <span className="font-semibold text-indigo-500 dark:text-indigo-400">Click to upload</span> or drag and drop
-                  </p>
-                  <p className="text-xs text-muted-foreground">PNG, JPG or GIF (MAX. 10MB)</p>
-                </div>
-              )}
-              <input
-                id="file-upload"
-                type="file"
-                className="hidden"
-                accept="image/*"
-                onChange={handleFileUpload}
-                disabled={isAnalyzing}
-              />
-            </label>
-          </div>
-
-          {/* Sample Images */}
-          <div className="space-y-4">
-            <div className="flex items-center gap-2 mb-4">
-              <ImageIcon className="w-5 h-5 text-indigo-500 dark:text-indigo-400" />
-              <h3 className="font-semibold text-foreground">Select Fintech Sample Screen</h3>
-            </div>
-            
-            <div className="space-y-3">
-              {SAMPLE_IMAGES.map((sample) => (
-                <button
-                  key={sample.id}
-                  onClick={() => handleSampleSelect(sample.url)}
-                  disabled={isAnalyzing}
-                  className={`w-full text-left p-4 rounded-xl border transition-all duration-300 relative overflow-hidden group ${
-                    selectedSample === sample.url
-                      ? 'border-indigo-500 bg-indigo-500/5 shadow-md shadow-indigo-500/5'
-                      : 'border-border bg-muted/10 hover:border-slate-400 dark:hover:border-slate-700 hover:bg-muted/20'
-                  } ${isAnalyzing ? 'opacity-50 cursor-not-allowed' : ''}`}
-                >
-                  <div className="font-bold text-sm text-foreground mb-1 group-hover:text-indigo-500 dark:group-hover:text-indigo-400 transition-colors">
-                    {sample.name}
-                  </div>
-                  <div className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">
-                    {sample.description}
-                  </div>
-                </button>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* Analyze Button */}
-        <div className="mt-8 flex justify-center border-t border-border pt-6">
-          <Button
-            onClick={handleAnalyze}
-            disabled={!activeImage || isAnalyzing}
-            size="lg"
-            className={`min-w-[240px] h-12 rounded-xl text-xs font-bold uppercase tracking-wider transition-all duration-300 ${
-              !activeImage 
-                ? 'bg-muted text-muted-foreground cursor-not-allowed border border-border' 
-                : 'bg-gradient-to-r from-indigo-600 via-indigo-500 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white shadow-[0_0_20px_rgba(99,102,241,0.3)] hover:scale-[1.03]'
-            }`}
-          >
-            {isAnalyzing ? (
-              <>
-                <Loader2 className="w-5 h-5 mr-2 animate-spin text-white" />
-                Processing AI Auditing...
-              </>
-            ) : (
-              <>
-                <Shield className="w-5 h-5 mr-2 text-white" />
-                Analyze Deceptive Copywriting
-              </>
-            )}
-          </Button>
-        </div>
-      </Card>
-    </div>
-  );
+import { useState } from 'react';
+import { Upload, Image as ImageIcon, Loader2, Shield } from 'lucide-react';
+import { Button } from './ui/button';
+import { Card } from './ui/card';
+import { API_BASE_URL } from '../config';
+
+interface UploadSectionProps {
+  onAnalyze: (imageUrl: string) => void;
+  isAnalyzing: boolean;
+}
+
+const SAMPLE_IMAGES = [
+  {
+    id: '1',
+    name: 'Urgency & Scarcity Checkout',
+    url: `${API_BASE_URL}/api/samples/checkout_urgency.png`,
+    description: 'Fintech checkout with a countdown timer, fake spot scarcity, live-viewer social proof and a confirmshaming opt-out.'
+  },
+  {
+    id: '2',
+    name: 'Confirmshaming Cancellation',
+    url: `${API_BASE_URL}/api/samples/cancel_confirmshaming.png`,
+    description: 'Subscription cancellation modal using guilt-inducing copy, loss framing and a buried 6-step cancel flow.'
+  },
+  {
+    id: '3',
+    name: 'Pre-Selected Fees Signup',
+    url: `${API_BASE_URL}/api/samples/signup_sneaking.png`,
+    description: 'Loan account signup with pre-checked paid add-ons, a trial that silently converts, and sneaked data sharing.'
+  }
+];
+
+export function UploadSection({ onAnalyze, isAnalyzing }: UploadSectionProps) {
+  const [selectedSample, setSelectedSample] = useState<string | null>(null);
+  const [uploadedImage, setUploadedImage] = useState<string | null>(null);
+
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const result = e.target?.result as string;
+        setUploadedImage(result);
+        setSelectedSample(null);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleSampleSelect = (url: string) => {
+    setSelectedSample(url);
+    setUploadedImage(null);
+  };
+
+  const handleAnalyze = () => {
+    const imageUrl = uploadedImage || selectedSample;
+    if (imageUrl) {
+      onAnalyze(imageUrl);
+    }
+  };
+
+  const activeImage = uploadedImage || selectedSample;
+
+  return (
+    <div className="space-y-6">
+      <Card className="p-8 bg-card/40 backdrop-blur-md border border-border shadow-xl rounded-2xl relative overflow-hidden transition-colors duration-300">
+        {/* Glow overlay */}
+        <div className="absolute top-0 right-0 w-80 h-80 bg-indigo-500/10 rounded-full blur-3xl -z-10 pointer-events-none" />
+        <div className="absolute bottom-0 left-0 w-80 h-80 bg-purple-500/5 rounded-full blur-3xl -z-10 pointer-events-none" />
+        
+        <h2 className="text-xl font-bold text-foreground mb-6 flex items-center gap-2">
+          <Upload className="w-5 h-5 text-indigo-500 dark:text-indigo-400" />
+          Audit New UI Interface
+        </h2>
+        
+        <div className="grid md:grid-cols-2 gap-8">
+          {/* Upload Area (Fits target image directly inside) */}
+          <div className="space-y-4">
+            <label
+              htmlFor="file-upload"
+              className={`relative flex flex-col items-center justify-center w-full h-72 border-2 border-dashed rounded-xl cursor-pointer overflow-hidden transition-all duration-300 ${
+                isAnalyzing 
+                  ? 'border-border bg-muted/10 cursor-not-allowed'
+                  : activeImage
+                    ? 'border-indigo-500/50 bg-slate-900/10 dark:bg-slate-950/40 shadow-inner'
+                    : 'border-border bg-muted/20 hover:border-indigo-500/50 hover:bg-muted/40'
+              }`}
+            >
+              {activeImage ? (
+                <>
+                  <img
+                    src={activeImage}
+                    alt="Uploaded UI Target"
+                    className="w-full h-full object-contain p-2"
+                  />
+                  {/* Hover Overlay */}
+                  <div className="absolute inset-0 bg-slate-950/50 opacity-0 hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center text-center p-4">
+                    <Upload className="w-8 h-8 text-indigo-400 mb-2" />
+                    <span className="text-xs font-extrabold text-white">Click or Drop to Replace Screenshot</span>
+                  </div>
+                  {/* Bottom Indicator badge */}
+                  <div className="absolute bottom-2 left-2">
+                    <span className="text-[9px] font-mono bg-indigo-600 text-white px-2.5 py-1 rounded-md uppercase tracking-wider font-extrabold shadow-lg border border-indigo-500/20">
+                      Target Interface Loaded
+                    </span>
+                  </div>
+                </>
+              ) : (
+                <div className="flex flex-col items-center justify-center pt-5 pb-6 px-4 text-center">
+                  <div className="p-4 bg-indigo-500/5 rounded-2xl mb-4 border border-indigo-500/10">
+                    <Upload className="w-10 h-10 text-indigo-500 dark:text-indigo-400 animate-pulse" />
+                  </div>
+                  <p className="mb-2 text-sm text-foreground/80">
+                    <span className="font-semibold text-indigo-500 dark:text-indigo-400">Click to upload</span> or drag and drop
+                  </p>
+                  <p className="text-xs text-muted-foreground">PNG, JPG or GIF (MAX. 10MB)</p>
+                </div>
+              )}
+              <input
+                id="file-upload"
+                type="file"
+                className="hidden"
+                accept="image/*"
+                onChange={handleFileUpload}
+                disabled={isAnalyzing}
+              />
+            </label>
+          </div>
+
+          {/* Sample Images */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2 mb-4">
+              <ImageIcon className="w-5 h-5 text-indigo-500 dark:text-indigo-400" />
+              <h3 className="font-semibold text-foreground">Select Fintech Sample Screen</h3>
+            </div>
+            
+            <div className="space-y-3">
+              {SAMPLE_IMAGES.map((sample) => (
+                <button
+                  key={sample.id}
+                  onClick={() => handleSampleSelect(sample.url)}
+                  disabled={isAnalyzing}
+                  className={`w-full text-left p-4 rounded-xl border transition-all duration-300 relative overflow-hidden group ${
+                    selectedSample === sample.url
+                      ? 'border-indigo-500 bg-indigo-500/5 shadow-md shadow-indigo-500/5'
+                      : 'border-border bg-muted/10 hover:border-slate-400 dark:hover:border-slate-700 hover:bg-muted/20'
+                  } ${isAnalyzing ? 'opacity-50 cursor-not-allowed' : ''}`}
+                >
+                  <div className="font-bold text-sm text-foreground mb-1 group-hover:text-indigo-500 dark:group-hover:text-indigo-400 transition-colors">
+                    {sample.name}
+                  </div>
+                  <div className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">
+                    {sample.description}
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Analyze Button */}
+        <div className="mt-8 flex justify-center border-t border-border pt-6">
+          <Button
+            onClick={handleAnalyze}
+            disabled={!activeImage || isAnalyzing}
+            size="lg"
+            className={`min-w-[240px] h-12 rounded-xl text-xs font-bold uppercase tracking-wider transition-all duration-300 ${
+              !activeImage 
+                ? 'bg-muted text-muted-foreground cursor-not-allowed border border-border' 
+                : 'bg-gradient-to-r from-indigo-600 via-indigo-500 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white shadow-[0_0_20px_rgba(99,102,241,0.3)] hover:scale-[1.03]'
+            }`}
+          >
+            {isAnalyzing ? (
+              <>
+                <Loader2 className="w-5 h-5 mr-2 animate-spin text-white" />
+                Processing AI Auditing...
+              </>
+            ) : (
+              <>
+                <Shield className="w-5 h-5 mr-2 text-white" />
+                Analyze Deceptive Copywriting
+              </>
+            )}
+          </Button>
+        </div>
+      </Card>
+    </div>
+  );
 }

src/app/config.ts

@@ -1,5 +1,7 @@
-// Dynamic API URL resolution for local and production environments
-export const API_BASE_URL = (import.meta.env.VITE_API_URL as string) || 
-  (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
-    ? 'http://127.0.0.1:8000'
-    : window.location.origin);
+// Dynamic API URL resolution for local and production environments.
+// When the page is served by the Flask server itself (any port), the API lives
+// on the same origin. Only the Vite dev server (port 5173) needs the explicit
+// backend address.
+const isViteDev = window.location.port === '5173';
+export const API_BASE_URL = (import.meta.env.VITE_API_URL as string) ||
+  (isViteDev ? 'http://127.0.0.1:8000' : window.location.origin);

src/app/types/analysis.ts

@@ -1,30 +1,32 @@
-export interface DarkPattern {
-  id: string;
-  type: string;
-  severity: 'low' | 'medium' | 'high' | 'critical';
-  description: string;
-  location: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-  };
-  cfpbViolation: string;
-  recommendation: string;
-  confidence: number;
-}
-
-export interface ComplianceReport {
-  cfpbAlignment: number;
-  issues: string[];
-  recommendations: string[];
-}
-
-export interface AnalysisData {
-  imageUrl: string;
-  overallScore: number;
-  riskLevel: 'low' | 'medium' | 'high' | 'critical';
-  darkPatterns: DarkPattern[];
-  complianceReport: ComplianceReport;
-  timestamp: string;
-}
+export interface DarkPattern {
+  id: string;
+  type: string;
+  severity: 'low' | 'medium' | 'high' | 'critical';
+  description: string;
+  location: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  cfpbViolation: string;
+  recommendation: string;
+  confidence: number;
+  evidence?: string;
+  explanation?: { phrase: string; weight: number }[];
+}
+
+export interface ComplianceReport {
+  cfpbAlignment: number;
+  issues: string[];
+  recommendations: string[];
+}
+
+export interface AnalysisData {
+  imageUrl: string;
+  overallScore: number;
+  riskLevel: 'low' | 'medium' | 'high' | 'critical';
+  darkPatterns: DarkPattern[];
+  complianceReport: ComplianceReport;
+  timestamp: string;
+}