Update app.py

app.py

@@ -1,357 +1,578 @@
-import gradio as gr
-import torch
-import torch.nn as nn
-from transformers import AutoTokenizer, AutoModel
-import numpy as np
-import os
-from typing import Dict, List, Tuple, Optional
-import json
-from datetime import datetime
-from collections import defaultdict
-
-print("🎭 Emotion Classifier Starting...")
-
-MODEL_NAME = "roberta-base"
-EMOTIONS = ["anger", "fear", "joy", "sadness", "surprise"]
-BEST_THRESHOLDS = [0.24722222, 0.61666667, 0.59722222, 0.44166667, 0.46111111]
-MAX_LEN = 200
-MODEL_PATH = "roberta.pth"
-
-EMOTION_META = {
-    "anger": {"emoji": "😠", "color": "#ef4444", "gradient": "linear-gradient(135deg, #dc2626 0%, #991b1b 100%)", "glow": "0 0 20px rgba(239, 68, 68, 0.5)", "description": "Frustration, irritation, or rage", "intensity_labels": ["Mild irritation", "Moderate anger", "Strong anger", "Intense rage"]},
-    "fear": {"emoji": "😨", "color": "#a78bfa", "gradient": "linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%)", "glow": "0 0 20px rgba(139, 92, 246, 0.5)", "description": "Anxiety, worry, or terror", "intensity_labels": ["Slight concern", "Moderate fear", "Strong fear", "Extreme terror"]},
-    "joy": {"emoji": "😊", "color": "#fbbf24", "gradient": "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)", "glow": "0 0 20px rgba(251, 191, 36, 0.5)", "description": "Happiness, excitement, or delight", "intensity_labels": ["Mild pleasure", "Moderate happiness", "Strong joy", "Intense euphoria"]},
-    "sadness": {"emoji": "😢", "color": "#60a5fa", "gradient": "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)", "glow": "0 0 20px rgba(59, 130, 246, 0.5)", "description": "Sorrow, grief, or disappointment", "intensity_labels": ["Mild sadness", "Moderate sorrow", "Strong grief", "Deep despair"]},
-    "surprise": {"emoji": "😲", "color": "#f472b6", "gradient": "linear-gradient(135deg, #ec4899 0%, #be185d 100%)", "glow": "0 0 20px rgba(236, 72, 153, 0.5)", "description": "Astonishment, shock, or amazement", "intensity_labels": ["Mild surprise", "Moderate shock", "Strong astonishment", "Complete disbelief"]}
-}
-
-class RobertaEmotion(nn.Module):
-    def __init__(self):
-        super().__init__()
-        self.backbone = AutoModel.from_pretrained(MODEL_NAME)
-        self.dropout = nn.Dropout(0.35)
-        self.head = nn.Linear(768, 5)
-    
-    def forward(self, input_ids, attention_mask):
-        outputs = self.backbone(input_ids=input_ids, attention_mask=attention_mask)
-        pooled = outputs.pooler_output if hasattr(outputs, "pooler_output") else outputs.last_hidden_state[:, 0]
-        return self.head(self.dropout(pooled))
-
-class ModelState:
-    def __init__(self):
-        self.device = "cuda" if torch.cuda.is_available() else "cpu"
-        self.model = None
-        self.tokenizer = None
-        self.ready = False
-        self.predictions_count = 0
-        self.history = []
-        self.emotion_stats = defaultdict(int)
-
-state = ModelState()
-
-def sigmoid(x):
-    return 1 / (1 + np.exp(-np.clip(x, -500, 500)))
-
-def get_intensity_level(prob):
-    if prob >= 0.85: return "Very High", "#10b981"
-    elif prob >= 0.70: return "High", "#60a5fa"
-    elif prob >= 0.50: return "Moderate", "#fbbf24"
-    elif prob >= 0.30: return "Low", "#9ca3af"
-    else: return "Very Low", "#6b7280"
-
-def get_emotion_intensity_label(emotion, prob):
-    labels = EMOTION_META[emotion]["intensity_labels"]
-    if prob >= 0.85: return labels[3]
-    elif prob >= 0.65: return labels[2]
-    elif prob >= 0.45: return labels[1]
-    else: return labels[0]
-
-def load_model():
-    try:
-        state.model = RobertaEmotion()
-        if os.path.exists(MODEL_PATH):
-            state.model.load_state_dict(torch.load(MODEL_PATH, map_location=state.device))
-            status, icon, bg, border = "success", "✅", "#065f46", "#10b981"
-        else:
-            status, icon, bg, border = "warning", "⚠️", "#78350f", "#f59e0b"
-        state.model.to(state.device).eval()
-        state.tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME)
-        state.ready = True
-        html = f"<div style='background:{bg};padding:20px;border-radius:12px;border:2px solid {border};box-shadow:{border} 0 0 30px;'><div style='display:flex;gap:15px;align-items:center;'><div style='font-size:48px;'>{icon}</div><div style='color:#f9fafb;'><h3 style='margin:0;'>Model Ready</h3><p style='margin:8px 0 0;color:#d1d5db;'>Device: {state.device.upper()} | F1: 0.872</p></div></div></div>"
-        return html, _create_controls_panel()
-    except Exception as e:
-        return f"<div style='background:#7f1d1d;padding:20px;border-radius:12px;border:2px solid #ef4444;'><h3 style='color:#fecaca;'>Error: {e}</h3></div>", ""
-
-def _create_controls_panel():
-    return f"<div style='background:linear-gradient(135deg,#4c1d95 0%,#5b21b6 100%);padding:15px;border-radius:10px;color:white;box-shadow:0 0 30px rgba(139,92,246,0.4);'><div style='display:flex;justify-content:space-around;flex-wrap:wrap;gap:15px;'><div style='text-align:center;'><div style='font-size:28px;font-weight:bold;color:#fbbf24;'>{state.predictions_count}</div><div style='font-size:12px;'>Predictions</div></div><div style='text-align:center;'><div style='font-size:28px;font-weight:bold;color:#10b981;'>5</div><div style='font-size:12px;'>Classes</div></div><div style='text-align:center;'><div style='font-size:28px;font-weight:bold;color:#60a5fa;'>0.872</div><div style='font-size:12px;'>F1 Score</div></div></div></div>"
-
-def _create_emotion_card(emotion, prob, detected, threshold, rank):
-    meta = EMOTION_META[emotion]
-    prob_pct = prob * 100
-    intensity, intensity_color = get_intensity_level(prob)
-    medals = {1: "🥇", 2: "🥈", 3: "🥉"}
-    rank_display = medals.get(rank, f"#{rank}")
-    border = f"2px solid {meta['color']}" if detected else "2px solid #374151"
-    bg = "#1f2937" if detected else "#111827"
-    shadow = f"{meta['glow']}, 0 6px 12px rgba(0,0,0,0.4)" if detected else "0 2px 4px rgba(0,0,0,0.3)"
-    
-    card_html = f"""<div style='background:{bg};padding:18px;margin:12px 0;border-radius:12px;border:{border};box-shadow:{shadow};'>
-    <div style='display:flex;justify-content:space-between;align-items:center;'>
-        <div style='display:flex;gap:12px;align-items:center;'>
-            <span style='font-size:36px;filter:drop-shadow(0 0 10px {meta['color']});'>{meta['emoji']}</span>
-            <div>
-                <div style='display:flex;gap:8px;align-items:center;'>
-                    <span style='font-weight:bold;font-size:20px;color:#f9fafb;'>{emotion.capitalize()}</span>
-                    <span style='background:{meta['color']};color:#000;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:bold;'>{rank_display}</span>
-                </div>
-                <div style='font-size:13px;color:#9ca3af;'>{get_emotion_intensity_label(emotion, prob)}</div>
-            </div>
-        </div>
-        <div style='text-align:right;'>
-            <div style='font-size:24px;font-weight:bold;color:{meta['color']};text-shadow:0 0 10px {meta['color']};'>{prob_pct:.1f}%</div>
-            <div style='font-size:11px;color:{intensity_color};'>{intensity}</div>
+<div style='display: flex; gap: 8px; margin-top: 10px;'>
+            <span style='background: {"#10b98120" if detected else "#f3f4f6"}; color: {"#10b981" if detected else "#9ca3af"}; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;'>
+                {("✓ DETECTED" if detected else "○ Not Detected")}
+            </span>
+            <span style='background: #f3f4f6; padding: 4px 10px; border-radius: 6px; font-size: 12px; color: #6b7280;'>
+                Confidence: {intensity}
+            </span>
         </div>
     </div>
-    <div style='position:relative;background:#0f172a;height:28px;border-radius:14px;overflow:hidden;margin:10px 0;border:1px solid #1e293b;'>
-        <div style='position:absolute;height:100%;background:{meta['gradient']};width:{min(prob_pct,100)}%;border-radius:14px;box-shadow:inset 0 0 20px rgba(255,255,255,0.2);'></div>
-    </div>
-</div>"""
-    return card_html
+    """
 
-def _create_summary_header(probs, preds, text):
+def _create_summary_header(probs: np.ndarray, preds: np.ndarray, text: str) -> str:
+    """Create comprehensive summary header"""
     detected_count = sum(preds)
     max_idx = np.argmax(probs)
     dominant = EMOTIONS[max_idx]
+    dominant_meta = EMOTION_META[dominant]
+    
     detected_emotions = [EMOTIONS[i] for i in range(len(EMOTIONS)) if preds[i] == 1]
-    emojis = " ".join([EMOTION_META[e]["emoji"] for e in detected_emotions]) if detected_emotions else "😐"
+    emotion_emojis = " ".join([EMOTION_META[e]["emoji"] for e in detected_emotions]) if detected_emotions else "😐"
+    
     word_count = len(text.split())
+    char_count = len(text)
+    avg_prob = np.mean(probs)
+    
+    # Sentiment description
+    if detected_count == 0:
+        sentiment = "Neutral/Unclear"
+        sentiment_desc = "No strong emotional signals detected"
+        sentiment_color = "#9ca3af"
+    elif detected_count == 1:
+        sentiment = detected_emotions[0].capitalize()
+        sentiment_desc = f"Primarily expressing {detected_emotions[0]}"
+        sentiment_color = EMOTION_META[detected_emotions[0]]["color"]
+    else:
+        sentiment = "Mixed Emotions"
+        sentiment_desc = f"Complex emotional expression with {detected_count} emotions"
+        sentiment_color = "#6366f1"
     
-    summary_html = f"""<div style='background:linear-gradient(135deg,#4c1d95 0%,#5b21b6 100%);padding:30px;border-radius:16px;color:white;box-shadow:0 0 40px rgba(139,92,246,0.5);border:2px solid #7c3aed;'>
-    <div style='text-align:center;'>
-        <div style='font-size:56px;filter:drop-shadow(0 0 15px rgba(255,255,255,0.3));'>{emojis}</div>
-        <h2 style='margin:10px 0;font-size:32px;text-shadow:0 0 20px rgba(255,255,255,0.3);'>{detected_count} Emotion{'s' if detected_count!=1 else ''} Detected</h2>
-        <p style='opacity:0.95;'>Dominant: {EMOTION_META[dominant]['emoji']} {dominant.capitalize()} ({probs[max_idx]:.0%}) | Words: {word_count}</p>
+    return f"""
+    <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 30px; border-radius: 16px; color: white; margin: 20px 0; box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);'>
+        <div style='text-align: center; margin-bottom: 25px;'>
+            <div style='font-size: 56px; margin-bottom: 12px;'>{emotion_emojis}</div>
+            <h2 style='margin: 0; font-size: 32px; font-weight: 700;'>{sentiment}</h2>
+            <p style='margin: 8px 0 0 0; font-size: 16px; opacity: 0.95;'>{sentiment_desc}</p>
+        </div>
+        
+        <div style='display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;'>
+            <div style='background: rgba(255,255,255,0.15); padding: 16px; border-radius: 12px; text-align: center; backdrop-filter: blur(10px);'>
+                <div style='font-size: 36px; font-weight: bold;'>{detected_count}</div>
+                <div style='font-size: 13px; opacity: 0.95; margin-top: 4px;'>Emotions<br>Detected</div>
+            </div>
+            <div style='background: rgba(255,255,255,0.15); padding: 16px; border-radius: 12px; text-align: center; backdrop-filter: blur(10px);'>
+                <div style='font-size: 36px; font-weight: bold;'>{dominant_meta["emoji"]}</div>
+                <div style='font-size: 13px; opacity: 0.95; margin-top: 4px;'>Dominant<br>{dominant.capitalize()}</div>
+            </div>
+            <div style='background: rgba(255,255,255,0.15); padding: 16px; border-radius: 12px; text-align: center; backdrop-filter: blur(10px);'>
+                <div style='font-size: 36px; font-weight: bold;'>{probs[max_idx]:.0%}</div>
+                <div style='font-size: 13px; opacity: 0.95; margin-top: 4px;'>Max<br>Confidence</div>
+            </div>
+            <div style='background: rgba(255,255,255,0.15); padding: 16px; border-radius: 12px; text-align: center; backdrop-filter: blur(10px);'>
+                <div style='font-size: 36px; font-weight: bold;'>{avg_prob:.0%}</div>
+                <div style='font-size: 13px; opacity: 0.95; margin-top: 4px;'>Average<br>Score</div>
+            </div>
+            <div style='background: rgba(255,255,255,0.15); padding: 16px; border-radius: 12px; text-align: center; backdrop-filter: blur(10px);'>
+                <div style='font-size: 36px; font-weight: bold;'>{word_count}</div>
+                <div style='font-size: 13px; opacity: 0.95; margin-top: 4px;'>Words<br>Analyzed</div>
+            </div>
+        </div>
     </div>
-</div>"""
-    return summary_html
+    """
 
-def _create_comparison_table(probs, preds):
+def _create_comparison_table(probs: np.ndarray, preds: np.ndarray) -> str:
+    """Create comparison table"""
     rows = ""
-    for i in range(5):
-        emotion = EMOTIONS[i]
+    for i, emotion in enumerate(EMOTIONS):
         meta = EMOTION_META[emotion]
-        detected_mark = "✓" if preds[i] else "○"
-        color = meta['color'] if preds[i] else "#6b7280"
-        rows += f"""<tr style='border-bottom:1px solid #374151;'>
-            <td style='padding:12px;color:{color};'>{meta['emoji']} {emotion.capitalize()}</td>
-            <td style='padding:12px;text-align:center;color:#d1d5db;'>{probs[i]:.3f}</td>
-            <td style='padding:12px;text-align:center;color:#9ca3af;'>{BEST_THRESHOLDS[i]:.3f}</td>
-            <td style='padding:12px;text-align:center;color:{color};font-size:18px;'>{detected_mark}</td>
-        </tr>"""
+        detected = "✓" if preds[i] else "○"
+        color = meta["color"] if preds[i] else "#9ca3af"
+        
+        rows += f"""
+        <tr style='border-bottom: 1px solid #e5e7eb;'>
+            <td style='padding: 12px; font-weight: 600; color: {color};'>{meta["emoji"]} {emotion.capitalize()}</td>
+            <td style='padding: 12px; text-align: center;'>{probs[i]:.3f}</td>
+            <td style='padding: 12px; text-align: center;'>{BEST_THRESHOLDS[i]:.3f}</td>
+            <td style='padding: 12px; text-align: center; font-size: 18px; color: {color};'>{detected}</td>
+        </tr>
+        """
     
-    table_html = f"""<div style='background:#1f2937;padding:20px;border-radius:12px;border:2px solid #374151;margin-top:20px;'>
-    <h3 style='color:#f9fafb;margin-top:0;'>📊 Comparison Table</h3>
-    <table style='width:100%;border-collapse:collapse;'>
-        <thead>
-            <tr style='background:#111827;border-bottom:2px solid #4b5563;'>
-                <th style='padding:12px;text-align:left;color:#d1d5db;'>Emotion</th>
-                <th style='padding:12px;text-align:center;color:#d1d5db;'>Probability</th>
-                <th style='padding:12px;text-align:center;color:#d1d5db;'>Threshold</th>
-                <th style='padding:12px;text-align:center;color:#d1d5db;'>Detected</th>
-            </tr>
-        </thead>
-        <tbody>{rows}</tbody>
-    </table>
-</div>"""
-    return table_html
+    return f"""
+    <div style='background: white; padding: 20px; border-radius: 12px; margin: 20px 0; border: 1px solid #e5e7eb;'>
+        <h3 style='margin: 0 0 15px 0; color: #1f2937;'>📊 Detailed Comparison Table</h3>
+        <table style='width: 100%; border-collapse: collapse; font-size: 14px;'>
+            <thead>
+                <tr style='background: #f9fafb; border-bottom: 2px solid #e5e7eb;'>
+                    <th style='padding: 12px; text-align: left; color: #6b7280; font-weight: 600;'>Emotion</th>
+                    <th style='padding: 12px; text-align: center; color: #6b7280; font-weight: 600;'>Probability</th>
+                    <th style='padding: 12px; text-align: center; color: #6b7280; font-weight: 600;'>Threshold</th>
+                    <th style='padding: 12px; text-align: center; color: #6b7280; font-weight: 600;'>Detected</th>
+                </tr>
+            </thead>
+            <tbody>
+                {rows}
+            </tbody>
+        </table>
+    </div>
+    """
 
-def predict_emotion(text, show_radar=True, show_table=True):
-    if not state.ready:
-        return "<div style='padding:40px;text-align:center;background:#7f1d1d;border:2px solid #ef4444;border-radius:16px;'><div style='font-size:64px;'>⚠️</div><h2 style='color:#fecaca;'>Model Not Loaded</h2><p style='color:#fca5a5;'>Click Load Model button</p></div>", "", "", "{}", _create_controls_panel()
+# ========== PREDICTION FUNCTIONS ==========
+def predict_emotion(text: str, show_radar: bool = True, show_table: bool = True) -> Tuple[str, str, str, str, str]:
+    """Main prediction function with all outputs"""
+    if not state.ready or state.model is None or state.tokenizer is None:
+        error = """
+        <div style='padding: 40px; text-align: center; background: #fef2f2; border: 3px solid #fca5a5; border-radius: 16px;'>
+            <div style='font-size: 64px; margin-bottom: 15px;'>⚠️</div>
+            <h2 style='color: #991b1b; margin: 10px 0;'>Model Not Loaded</h2>
+            <p style='color: #7f1d1d; font-size: 16px;'>Please click <strong>'🚀 Load Model'</strong> button to initialize.</p>
+        </div>
+        """
+        return error, "", "", "{}", _create_controls_panel()
     
-    if not text.strip():
-        return "<div style='padding:40px;text-align:center;background:#78350f;border:2px solid #f59e0b;border-radius:16px;'><div style='font-size:64px;'>✍️</div><h2 style='color:#fef3c7;'>No Text Provided</h2><p style='color:#fde68a;'>Enter text above</p></div>", "", "", "{}", _create_controls_panel()
+    if not text or not text.strip():
+        error = """
+        <div style='padding: 40px; text-align: center; background: #fefce8; border: 3px solid #fde047; border-radius: 16px;'>
+            <div style='font-size: 64px; margin-bottom: 15px;'>✍️</div>
+            <h2 style='color: #854d0e; margin: 10px 0;'>No Text Provided</h2>
+            <p style='color: #713f12; font-size: 16px;'>Enter text above or try one of the examples below.</p>
+        </div>
+        """
+        return error, "", "", "{}", _create_controls_panel()
     
     try:
-        encoding = state.tokenizer(text.strip(), truncation=True, padding="max_length", max_length=MAX_LEN, return_tensors="pt")
+        # Tokenize and predict
+        encoding = state.tokenizer(
+            text.strip(), 
+            truncation=True, 
+            padding="max_length", 
+            max_length=MAX_LEN, 
+            return_tensors="pt"
+        )
+        
         with torch.no_grad():
-            logits = state.model(encoding["input_ids"].to(state.device), encoding["attention_mask"].to(state.device))
+            logits = state.model(
+                encoding["input_ids"].to(state.device), 
+                encoding["attention_mask"].to(state.device)
+            )
             probs = sigmoid(logits.cpu().numpy())[0]
             preds = (probs > np.array(BEST_THRESHOLDS)).astype(int)
         
+        # Update stats
         state.predictions_count += 1
         for i, emo in enumerate(EMOTIONS):
             if preds[i]: state.emotion_stats[emo] += 1
         
-        state.history.append({"text": text[:100], "timestamp": datetime.now().isoformat(), "detected": sum(preds)})
+        state.history.append({
+            "text": text[:100],
+            "timestamp": datetime.now().isoformat(),
+            "detected": sum(preds)
+        })
+        
+        # Create visualizations
+        summary_html = _create_summary_header(probs, preds, text)
         
-        ranked = np.argsort(probs)[::-1]
-        summary = _create_summary_header(probs, preds, text)
+        # Radar chart
+        radar_html = ""
+        if show_radar:
+            radar_html = f"""
+            <div style='background: white; padding: 20px; border-radius: 12px; margin: 20px 0; text-align: center; border: 1px solid #e5e7eb;'>
+                <h3 style='margin: 0 0 10px 0; color: #1f2937;'>📡 Emotion Radar Chart</h3>
+                {_create_radar_chart_svg(probs)}
+                <p style='color: #6b7280; font-size: 13px; margin: 10px 0 0 0;'>Visual representation of emotion intensities</p>
+            </div>
+            """
         
-        cards = "<div style='background:#111827;padding:20px;border-radius:12px;border:2px solid #374151;'><h3 style='color:#f9fafb;margin-top:0;'>🎯 Detailed Analysis</h3>"
-        for r, i in enumerate(ranked):
-            cards += _create_emotion_card(EMOTIONS[i], probs[i], preds[i]==1, BEST_THRESHOLDS[i], r+1)
-        cards += "</div>"
+        # Emotion cards with ranking
+        ranked_indices = np.argsort(probs)[::-1]
+        cards_html = "<div style='background: #f9fafb; padding: 20px; border-radius: 12px;'>"
+        cards_html += "<h3 style='color: #1f2937; margin: 0 0 15px 0; font-size: 22px;'>🎯 Detailed Emotion Analysis</h3>"
+        for rank, idx in enumerate(ranked_indices, 1):
+            cards_html += _create_emotion_card(EMOTIONS[idx], probs[idx], preds[idx] == 1, BEST_THRESHOLDS[idx], rank)
+        cards_html += "</div>"
         
-        table = _create_comparison_table(probs, preds) if show_table else ""
+        # Comparison table
+        table_html = _create_comparison_table(probs, preds) if show_table else ""
         
-        json_out = json.dumps({
-            "emotions": {EMOTIONS[i]: {
-                "probability": round(float(probs[i]), 4),
-                "detected": bool(preds[i]),
-                "rank": int(np.where(ranked == i)[0][0] + 1),
-                "intensity": get_emotion_intensity_label(EMOTIONS[i], probs[i])
-            } for i in range(5)},
+        # JSON output
+        json_results = {
+            "metadata": {
+                "timestamp": datetime.now().isoformat(),
+                "text_length": len(text),
+                "word_count": len(text.split()),
+                "model": "roberta-base",
+                "prediction_id": state.predictions_count
+            },
+            "emotions": {
+                emo: {
+                    "probability": round(float(probs[i]), 4),
+                    "detected": bool(preds[i]),
+                    "threshold": float(BEST_THRESHOLDS[i]),
+                    "confidence_level": get_intensity_level(probs[i])[0],
+                    "rank": int(np.where(ranked_indices == i)[0][0] + 1),
+                    "intensity_label": get_emotion_intensity_label(emo, probs[i])
+                }
+                for i, emo in enumerate(EMOTIONS)
+            },
             "summary": {
-                "detected": int(sum(preds)),
-                "dominant": EMOTIONS[np.argmax(probs)],
-                "dominant_prob": round(float(probs[np.argmax(probs)]), 4),
-                "word_count": len(text.split())
+                "total_detected": int(sum(preds)),
+                "dominant_emotion": EMOTIONS[np.argmax(probs)],
+                "dominant_probability": round(float(probs[np.argmax(probs)]), 4),
+                "average_probability": round(float(np.mean(probs)), 4),
+                "detected_emotions": [EMOTIONS[i] for i in range(len(EMOTIONS)) if preds[i] == 1]
             }
-        }, indent=2)
+        }
+        
+        # Updated controls
+        controls_html = _create_controls_panel()
+        # Updated controls
+        controls_html = _create_controls_panel()
+        
+        return summary_html, radar_html + cards_html, table_html, json.dumps(json_results, indent=2), controls_html
         
-        return summary, cards, table, json_out, _create_controls_panel()
-    
     except Exception as e:
-        return f"<div style='background:#7f1d1d;padding:20px;border-radius:12px;border:2px solid #ef4444;'><h3 style='color:#fecaca;'>Error: {str(e)}</h3></div>", "", "", "{}", _create_controls_panel()
+        error = f"""
+        <div style='padding: 40px; text-align: center; background: #fee; border: 3px solid #fca5a5; border-radius: 16px;'>
+            <div style='font-size: 64px; margin-bottom: 15px;'>❌</div>
+            <h2 style='color: #991b1b; margin: 10px 0;'>Prediction Error</h2>
+            <pre style='color: #7f1d1d; text-align: left; padding: 15px; background: #fef2f2; border-radius: 8px; overflow-x: auto;'>{str(e)}</pre>
+        </div>
+        """
+        return error, "", "", "{}", _create_controls_panel()
 
-def batch_predict(texts):
+def batch_predict(texts: str) -> str:
+    """Batch prediction with rich output"""
     if not state.ready:
-        return "<div style='padding:20px;background:#7f1d1d;border-radius:12px;border:2px solid #ef4444;color:#fecaca;'>⚠️ Model not loaded</div>"
+        return "<div style='padding: 20px; background: #fee2e2; border-radius: 8px;'>⚠️ Model not loaded</div>"
     
-    lines = [l.strip() for l in texts.split('\n') if l.strip()]
+    lines = [line.strip() for line in texts.split('\n') if line.strip()]
     if not lines:
-        return "<div style='padding:20px;background:#78350f;border-radius:12px;border:2px solid #f59e0b;color:#fef3c7;'>⚠️ No text provided</div>"
+        return "<div style='padding: 20px; background: #fef3c7; border-radius: 8px;'>⚠️ No text provided</div>"
     
-    html = f"<div style='background:linear-gradient(135deg,#4c1d95 0%,#5b21b6 100%);padding:20px;border-radius:12px;color:white;margin-bottom:20px;box-shadow:0 0 30px rgba(139,92,246,0.4);'><h2 style='margin:0;'>📊 Batch Results</h2><p style='margin:8px 0 0;opacity:0.9;'>Analyzed {len(lines)} samples</p></div>"
+    html = f"""
+    <div style='font-family: system-ui, sans-serif;'>
+        <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 12px; color: white; margin-bottom: 20px;'>
+            <h2 style='margin: 0; font-size: 24px;'>📊 Batch Analysis Results</h2>
+            <p style='margin: 8px 0 0 0; opacity: 0.9;'>Analyzed {len(lines)} text samples</p>
+        </div>
+    """
     
-    for i, txt in enumerate(lines, 1):
-        s, _, _, j, _ = predict_emotion(txt, False, False)
-        data = json.loads(j)
-        dom = data['summary']['dominant']
-        dom_prob = data['summary']['dominant_prob']
-        det_count = data['summary']['detected']
-        
-        txt_preview = txt[:100]
-        if len(txt) > 100:
-            txt_preview += "..."
-        
-        color = EMOTION_META[dom]['color']
-        emoji = EMOTION_META[dom]['emoji']
-        
-        html += f"""<div style='background:#1f2937;padding:15px;margin:10px 0;border-radius:10px;border-left:4px solid {color};'>
-            <div style='display:flex;justify-content:space-between;align-items:start;gap:10px;'>
-                <div style='font-size:24px;'>{emoji}</div>
-                <div style='flex:1;'>
-                    <strong style='color:{color};'>Sample #{i}</strong>
-                    <div style='color:#d1d5db;font-style:italic;margin:5px 0;'>"{txt_preview}"</div>
-                    <div style='display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;'>
-                        <span style='background:#111827;padding:4px 10px;border-radius:6px;font-size:13px;color:#9ca3af;'>
-                            Dominant: {dom.capitalize()} ({dom_prob:.0%})
-                        </span>
-                        <span style='background:#111827;padding:4px 10px;border-radius:6px;font-size:13px;color:#9ca3af;'>
-                            Detected: {det_count}/5
-                        </span>
+    all_emotions = defaultdict(int)
+    
+    for i, text in enumerate(lines, 1):
+        summary, _, _, json_data, _ = predict_emotion(text, show_radar=False, show_table=False)
+        try:
+            data = json.loads(json_data)
+            detected_count = data['summary']['total_detected']
+            dominant = data['summary']['dominant_emotion']
+            dominant_prob = data['summary']['dominant_probability']
+            detected_list = data['summary']['detected_emotions']
+            
+            for emo in detected_list:
+                all_emotions[emo] += 1
+            
+            emoji = EMOTION_META[dominant]['emoji']
+            color = EMOTION_META[dominant]['color']
+            
+            html += f"""
+            <div style='background: white; padding: 18px; margin: 12px 0; border-radius: 10px; border-left: 5px solid {color}; box-shadow: 0 2px 8px rgba(0,0,0,0.1);'>
+                <div style='display: flex; justify-content: between; align-items: start; gap: 15px; margin-bottom: 10px;'>
+                    <div style='font-size: 36px;'>{emoji}</div>
+                    <div style='flex: 1;'>
+                        <div style='font-weight: bold; color: #1f2937; font-size: 16px; margin-bottom: 5px;'>Sample #{i}</div>
+                        <div style='color: #4b5563; font-style: italic; margin-bottom: 10px; line-height: 1.5;'>"{text[:120]}{'...' if len(text) > 120 else ''}"</div>
+                        <div style='display: flex; gap: 12px; flex-wrap: wrap; font-size: 14px;'>
+                            <span style='background: #f3f4f6; padding: 6px 12px; border-radius: 6px; color: #374151;'>
+                                <strong>Dominant:</strong> {emoji} {dominant.capitalize()}
+                            </span>
+                            <span style='background: #f3f4f6; padding: 6px 12px; border-radius: 6px; color: #374151;'>
+                                <strong>Confidence:</strong> {dominant_prob:.1%}
+                            </span>
+                            <span style='background: #f3f4f6; padding: 6px 12px; border-radius: 6px; color: #374151;'>
+                                <strong>Total:</strong> {detected_count}/5
+                            </span>
+                        </div>
+                        {f"<div style='margin-top: 8px; font-size: 13px; color: #6b7280;'><strong>Detected:</strong> {', '.join([e.capitalize() for e in detected_list])}</div>" if detected_list else ""}
                     </div>
                 </div>
             </div>
-        </div>"""
+            """
+        except Exception as e:
+            html += f"<div style='background: #fee; padding: 15px; margin: 10px 0; border-radius: 8px;'>Sample {i}: Error - {str(e)}</div>"
     
+    # Summary statistics
+    html += """
+    <div style='background: #f9fafb; padding: 20px; border-radius: 12px; margin-top: 20px; border: 2px solid #e5e7eb;'>
+        <h3 style='margin: 0 0 15px 0; color: #1f2937;'>📈 Aggregate Statistics</h3>
+        <div style='display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;'>
+    """
+    
+    for emotion in EMOTIONS:
+        count = all_emotions[emotion]
+        pct = (count / len(lines)) * 100 if lines else 0
+        meta = EMOTION_META[emotion]
+        html += f"""
+        <div style='background: white; padding: 15px; border-radius: 8px; text-align: center; border: 2px solid {meta["light_color"]}'>
+            <div style='font-size: 32px; margin-bottom: 5px;'>{meta["emoji"]}</div>
+            <div style='font-weight: bold; color: {meta["color"]}; font-size: 20px;'>{count}</div>
+            <div style='font-size: 12px; color: #6b7280; margin-top: 3px;'>{emotion.capitalize()}</div>
+            <div style='font-size: 11px; color: #9ca3af;'>{pct:.0f}% of samples</div>
+        </div>
+        """
+    
+    html += "</div></div></div>"
     return html
 
-def get_history():
+def get_history() -> str:
+    """Get prediction history"""
     if not state.history:
-        return "<div style='padding:20px;color:#9ca3af;text-align:center;background:#1f2937;border-radius:12px;border:2px solid #374151;'>No predictions yet</div>"
+        return "<div style='padding: 20px; text-align: center; color: #9ca3af;'>No predictions yet</div>"
     
-    html = f"<div style='background:#1f2937;padding:20px;border-radius:12px;border:2px solid #374151;'><h3 style='color:#f9fafb;margin-top:0;'>📜 Recent Predictions ({len(state.history)})</h3>"
+    html = f"""
+    <div style='background: white; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb;'>
+        <h3 style='margin: 0 0 15px 0; color: #1f2937;'>📜 Recent Predictions ({len(state.history)})</h3>
+    """
     
-    for i, rec in enumerate(reversed(state.history[-10:]), 1):
-        time = datetime.fromisoformat(rec['timestamp']).strftime('%H:%M:%S')
-        txt_preview = rec['text']
-        if len(rec['text']) >= 100:
-            txt_preview += "..."
-        
-        html += f"""<div style='padding:12px;margin:8px 0;background:#111827;border-radius:8px;border-left:3px solid #8b5cf6;'>
-            <div style='display:flex;justify-content:space-between;align-items:center;'>
-                <div style='color:#d1d5db;flex:1;'>
-                    <span style='color:#9ca3af;font-size:12px;'>{time}</span> - "{txt_preview}"
+    for i, record in enumerate(reversed(state.history[-10:]), 1):
+        time = datetime.fromisoformat(record['timestamp']).strftime('%H:%M:%S')
+        html += f"""
+        <div style='padding: 12px; margin: 8px 0; background: #f9fafb; border-radius: 8px; border-left: 3px solid #667eea;'>
+            <div style='display: flex; justify-content: space-between; align-items: center;'>
+                <div style='flex: 1;'>
+                    <div style='font-size: 13px; color: #6b7280; margin-bottom: 4px;'>{time}</div>
+                    <div style='color: #374151; font-size: 14px;'>"{record['text']}{'...' if len(record['text']) >= 100 else ''}"</div>
+                </div>
+                <div style='background: #667eea; color: white; padding: 4px 12px; border-radius: 12px; font-size: 13px; font-weight: bold;'>
+                    {record['detected']}/5
                 </div>
-                <span style='background:#7c3aed;color:white;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:bold;margin-left:10px;'>
-                    {rec['detected']}/5
-                </span>
             </div>
-        </div>"""
+        </div>
+        """
     
     html += "</div>"
     return html
 
+def export_results(json_str: str) -> str:
+    """Export results as downloadable JSON"""
+    return json_str
+
+# ========== GRADIO UI ==========
 def create_interface():
-    demo = gr.Blocks(title="🎭 Emotion Classifier")
-    
-    with demo:
-        gr.HTML("<div style='text-align:center;padding:40px 20px;background:linear-gradient(135deg,#4c1d95 0%,#5b21b6 100%);border-radius:20px;margin-bottom:25px;color:white;box-shadow:0 0 40px rgba(139,92,246,0.5);'><div style='font-size:72px;margin-bottom:10px;'>🎭</div><h1 style='font-size:48px;margin:0;font-weight:800;'>Emotion Classifier</h1><p style='font-size:20px;margin:15px 0;opacity:0.95;'>Advanced Multi-Label Emotion Detection</p><p style='font-size:15px;opacity:0.85;'>RoBERTa-base • F1: 0.872 • 5 Classes</p><div style='margin-top:20px;display:flex;justify-content:center;gap:15px;flex-wrap:wrap;'><span style='background:rgba(0,0,0,0.3);padding:8px 16px;border-radius:20px;backdrop-filter:blur(10px);'>😠 Anger</span><span style='background:rgba(0,0,0,0.3);padding:8px 16px;border-radius:20px;backdrop-filter:blur(10px);'>😨 Fear</span><span style='background:rgba(0,0,0,0.3);padding:8px 16px;border-radius:20px;backdrop-filter:blur(10px);'>😊 Joy</span><span style='background:rgba(0,0,0,0.3);padding:8px 16px;border-radius:20px;backdrop-filter:blur(10px);'>😢 Sadness</span><span style='background:rgba(0,0,0,0.3);padding:8px 16px;border-radius:20px;backdrop-filter:blur(10px);'>😲 Surprise</span></div></div>")
+    with gr.Blocks(title="🎭 Emotion Classifier") as demo:
+        
+        gr.HTML("""
+        <div style='text-align: center; padding: 40px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 20px; margin-bottom: 25px; color: white; box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);'>
+            <div style='font-size: 72px; margin-bottom: 10px;'>🎭</div>
+            <h1 style='font-size: 48px; margin: 0; font-weight: 800; letter-spacing: -1px;'>Emotion Classifier</h1>
+            <p style='font-size: 20px; margin: 15px 0 8px 0; opacity: 0.95; font-weight: 500;'>Advanced Multi-Label Emotion Detection</p>
+            <p style='font-size: 15px; margin: 0; opacity: 0.85;'>Powered by RoBERTa-base • F1 Score: 0.872 • 5 Emotion Classes</p>
+            <div style='margin-top: 20px; display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;'>
+                <span style='background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px; font-size: 14px; backdrop-filter: blur(10px);'>😠 Anger</span>
+                <span style='background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px; font-size: 14px; backdrop-filter: blur(10px);'>😨 Fear</span>
+                <span style='background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px; font-size: 14px; backdrop-filter: blur(10px);'>😊 Joy</span>
+                <span style='background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px; font-size: 14px; backdrop-filter: blur(10px);'>😢 Sadness</span>
+                <span style='background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px; font-size: 14px; backdrop-filter: blur(10px);'>😲 Surprise</span>
+            </div>
+        </div>
+        """)
         
+        # Status and Controls
         with gr.Row():
             with gr.Column(scale=3):
-                status = gr.HTML("<div style='background:#78350f;padding:20px;border-radius:12px;border:2px solid #f59e0b;'><h3 style='color:#fef3c7;margin:0;'>⏳ Model Not Loaded</h3><p style='color:#fde68a;margin:8px 0 0;'>Click Load Model to start</p></div>")
+                status_display = gr.HTML("""
+                <div style='background: #fef3c7; padding: 20px; border-radius: 12px; border-left: 5px solid #f59e0b;'>
+                    <h3 style='margin: 0 0 8px 0; color: #92400e;'>⏳ Model Status: Not Loaded</h3>
+                    <p style='margin: 0; color: #78350f;'>Click the <strong>'🚀 Load Model'</strong> button to initialize the classifier.</p>
+                </div>
+                """)
             with gr.Column(scale=1):
                 load_btn = gr.Button("🚀 Load Model", variant="primary", size="lg")
         
-        controls = gr.HTML("")
+        controls_panel = gr.HTML("")
         
+        gr.HTML("<hr style='margin: 30px 0; border: none; border-top: 3px solid #e5e7eb;'>")
+        
+        # Main Tabs
         with gr.Tabs():
             with gr.Tab("📝 Single Analysis"):
                 with gr.Row():
-                    with gr.Column():
-                        inp = gr.Textbox(label="💬 Enter Text to Analyze", placeholder="Type your text here...", lines=10)
+                    with gr.Column(scale=1):
+                        input_text = gr.Textbox(
+                            label="💬 Enter Text to Analyze",
+                            placeholder="Type your text here... \n\nExample: I'm incredibly excited about this opportunity, but I'm also feeling a bit nervous about the upcoming challenges!",
+                            lines=10,
+                            max_lines=20
+                        )
+                        
                         with gr.Row():
-                            analyze = gr.Button("🔍 Analyze Emotions", variant="primary", size="lg")
-                            clear = gr.ClearButton([inp], value="🗑️ Clear", size="lg")
+                            analyze_btn = gr.Button("🔍 Analyze Emotions", variant="primary", size="lg")
+                            clear_input_btn = gr.ClearButton([input_text], value="🗑️ Clear Input", size="lg")
+                        
                         with gr.Row():
-                            radar = gr.Checkbox(label="Show Radar Chart", value=True)
-                            table = gr.Checkbox(label="Show Table", value=True)
-                        gr.Examples([
-                            ["I'm absolutely thrilled and overjoyed! This is amazing!"],
-                            ["This is unacceptable! I'm furious about this situation!"],
-                            ["I'm terrified about the future. So much uncertainty."],
-                            ["Oh my god! I cannot believe this just happened!"],
-                            ["I feel so empty and sad. Nothing matters anymore."]
-                        ], inputs=[inp], label="💡 Try These Examples")
+                            show_radar_check = gr.Checkbox(label="Show Radar Chart", value=True)
+                            show_table_check = gr.Checkbox(label="Show Comparison Table", value=True)
+                        
+                        gr.Markdown("### 💡 Try These Example Texts")
+                        gr.Examples(
+                            examples=[
+                                ["I'm absolutely thrilled and overjoyed! This is the best news I've received in years!"],
+                                ["This is completely unacceptable! I'm furious about how this situation was handled!"],
+                                ["I'm terrified about the future. The uncertainty is overwhelming and I can't stop worrying."],
+                                ["Oh my god! I cannot believe this just happened! This is absolutely shocking!"],
+                                ["I feel so empty and sad. Nothing seems to matter anymore and I just want to cry."],
+                                ["I'm excited about the new job, but I'm also really anxious about moving to a new city."],
+                                ["The concert was amazing! But now I'm sad it's over and I'll miss my friends."],
+                                ["I'm angry at myself for making such a stupid mistake. I should have known better!"],
+                                ["What a wonderful surprise! I never expected this and I'm so grateful and happy!"],
+                                ["This project terrifies me. I'm worried I'll fail, but I'm also determined to succeed."]
+                            ],
+                            inputs=[input_text],
+                            label="Click to try"
+                        )
                     
-                    with gr.Column():
+                    with gr.Column(scale=1):
                         gr.Markdown("### 📊 Analysis Results")
-                        clear_res = gr.Button("🗑️ Clear Results", variant="secondary", size="sm")
-                        summ = gr.HTML()
-                        details = gr.HTML()
-                        tbl = gr.HTML()
+                        
+                        clear_results_btn = gr.Button("🗑️ Clear Results", variant="secondary", size="sm")
+                        
+                        summary_html = gr.HTML(label="Summary")
+                        details_html = gr.HTML(label="Detailed Analysis")
+                        table_html = gr.HTML(label="Comparison")
             
             with gr.Tab("📊 Batch Analysis"):
-                gr.Markdown("### Analyze Multiple Texts\nEnter one text per line")
-                batch_inp = gr.Textbox(label="Multiple Texts", placeholder="I love this!\nThis is terrible.\nWhat a surprise!", lines=12)
-                batch_btn = gr.Button("🔍 Analyze All", variant="primary", size="lg")
-                batch_out = gr.HTML()
+                gr.Markdown("""
+                ### Analyze Multiple Texts Simultaneously
+                Enter one text per line to analyze multiple samples at once. Perfect for:
+                - Customer feedback analysis
+                - Social media monitoring
+                - Survey responses
+                - Product reviews
+                """)
+                
+                batch_input = gr.Textbox(
+                    label="Enter Multiple Texts (one per line)",
+                    placeholder="I love this product!\nThis service is terrible.\nWhat an amazing surprise!\nFeeling very sad today.",
+                    lines=12
+                )
+                
+                batch_btn = gr.Button("🔍 Analyze All Texts", variant="primary", size="lg")
+                batch_output = gr.HTML(label="Batch Results")
             
             with gr.Tab("💾 JSON Export"):
-                gr.Markdown("### Developer-Friendly JSON Output")
-                json_out = gr.Code(label="JSON Results", language="json", lines=25)
+                gr.Markdown("""
+                ### Developer-Friendly JSON Output
+                Get structured data for integration with your applications, APIs, or data pipelines.
+                """)
+                
+                json_output = gr.Code(
+                    label="JSON Results (automatically updated)",
+                    language="json",
+                    lines=25
+                )
+                
+                gr.Markdown("""
+                **JSON Structure includes:**
+                - Metadata (timestamp, text stats, model info)
+                - Individual emotion scores with confidence levels
+                - Rankings and intensity labels
+                - Summary statistics
+                - Detected emotions list
+                """)
             
             with gr.Tab("📜 History"):
                 gr.Markdown("### Recent Predictions")
-                hist_btn = gr.Button("🔄 Refresh History", variant="secondary")
-                hist_out = gr.HTML()
+                history_btn = gr.Button("🔄 Refresh History", variant="secondary")
+                history_output = gr.HTML()
+        
+        # Footer Info
+        gr.HTML("""
+        <div style='margin-top: 40px; padding: 30px; background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); border-radius: 16px; border: 2px solid #e5e7eb;'>
+            <h2 style='color: #1f2937; margin-top: 0; font-size: 24px;'>📚 Model Documentation</h2>
+            
+            <div style='display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 20px 0;'>
+                <div style='background: white; padding: 20px; border-radius: 12px; border-left: 4px solid #667eea;'>
+                    <h3 style='margin: 0 0 10px 0; color: #667eea;'>🏗️ Architecture</h3>
+                    <ul style='margin: 0; padding-left: 20px; color: #4b5563; line-height: 1.8;'>
+                        <li><strong>Base Model:</strong> RoBERTa-base</li>
+                        <li><strong>Parameters:</strong> 125M</li>
+                        <li><strong>Classifier:</strong> Custom head with dropout</li>
+                        <li><strong>Training:</strong> Fine-tuned on emotion corpus</li>
+                    </ul>
+                </div>
+                
+                <div style='background: white; padding: 20px; border-radius: 12px; border-left: 4px solid #10b981;'>
+                    <h3 style='margin: 0 0 10px 0; color: #10b981;'>📊 Performance</h3>
+                    <ul style='margin: 0; padding-left: 20px; color: #4b5563; line-height: 1.8;'>
+                        <li><strong>F1 Score:</strong> 0.872 (validation)</li>
+                        <li><strong>Task:</strong> Multi-label classification</li>
+                        <li><strong>Classes:</strong> 5 emotions</li>
+                        <li><strong>Thresholds:</strong> Individually optimized</li>
+                    </ul>
+                </div>
+                
+                <div style='background: white; padding: 20px; border-radius: 12px; border-left: 4px solid #f59e0b;'>
+                    <h3 style='margin: 0 0 10px 0; color: #f59e0b;'>🎯 Capabilities</h3>
+                    <ul style='margin: 0; padding-left: 20px; color: #4b5563; line-height: 1.8;'>
+                        <li><strong>Multi-label:</strong> Detect multiple emotions</li>
+                        <li><strong>Intensity:</strong> Confidence scoring</li>
+                        <li><strong>Speed:</strong> Real-time inference</li>
+                        <li><strong>Batch:</strong> Analyze multiple texts</li>
+                    </ul>
+                </div>
+            </div>
+            
+            <div style='background: white; padding: 20px; border-radius: 12px; margin-top: 20px;'>
+                <h3 style='margin: 0 0 15px 0; color: #1f2937;'>🔬 How It Works</h3>
+                <div style='color: #4b5563; line-height: 1.8;'>
+                    <ol style='margin: 0; padding-left: 20px;'>
+                        <li><strong>Tokenization:</strong> Text is converted to subword tokens using RoBERTa's byte-pair encoding</li>
+                        <li><strong>Encoding:</strong> Tokens are embedded and processed through 12 transformer layers</li>
+                        <li><strong>Classification:</strong> Pooled representation passes through dropout and linear layer</li>
+                        <li><strong>Thresholding:</strong> Sigmoid probabilities compared against optimized per-class thresholds</li>
+                        <li><strong>Output:</strong> Binary predictions for each emotion with confidence scores</li>
+                    </ol>
+                </div>
+            </div>
+            
+            <div style='margin-top: 20px; padding: 15px; background: #eff6ff; border-radius: 8px; border-left: 4px solid #3b82f6;'>
+                <strong style='color: #1e40af;'>💡 Tip:</strong> 
+                <span style='color: #1e3a8a;'>The model performs best on clear, expressive text. Longer texts (20+ words) generally yield more accurate results.</span>
+            </div>
+        </div>
+        """)
+        
+        # Event Handlers
+        load_btn.click(
+            fn=load_model,
+            outputs=[status_display, controls_panel]
+        )
+        
+        analyze_btn.click(
+            fn=predict_emotion,
+            inputs=[input_text, show_radar_check, show_table_check],
+            outputs=[summary_html, details_html, table_html, json_output, controls_panel]
+        )
+        
+        input_text.submit(
+            fn=predict_emotion,
+            inputs=[input_text, show_radar_check, show_table_check],
+            outputs=[summary_html, details_html, table_html, json_output, controls_panel]
+        )
+        
+        clear_results_btn.click(
+            fn=lambda: ("", "", "", "{}", _create_controls_panel()),
+            outputs=[summary_html, details_html, table_html, json_output, controls_panel]
+        )
         
-        gr.HTML("<div style='margin-top:30px;padding:20px;background:#1f2937;border-radius:12px;border:2px solid #374151;'><h2 style='color:#f9fafb;margin-top:0;'>📚 Model Documentation</h2><p style='color:#d1d5db;line-height:1.8;'><strong>Architecture:</strong> RoBERTa-base (125M parameters) fine-tuned for multi-label emotion classification</p><p style='color:#d1d5db;line-height:1.8;'><strong>Classes:</strong> Anger, Fear, Joy, Sadness, Surprise</p><p style='color:#d1d5db;line-height:1.8;'><strong>Performance:</strong> F1 Score 0.872 on validation set</p></div>")
+        batch_btn.click(
+            fn=batch_predict,
+            inputs=[batch_input],
+            outputs=[batch_output]
+        )
         
-        load_btn.click(load_model, outputs=[status, controls])
-        analyze.click(predict_emotion, inputs=[inp, radar, table], outputs=[summ, details, tbl, json_out, controls])
-        inp.submit(predict_emotion, inputs=[inp, radar, table], outputs=[summ, details, tbl, json_out, controls])
-        clear_res.click(lambda: ("", "", "", "{}", _create_controls_panel()), outputs=[summ, details, tbl, json_out, controls])
-        batch_btn.click(batch_predict, inputs=[batch_inp], outputs=[batch_out])
-        hist_btn.click(get_history, outputs=[hist_out])
+        history_btn.click(
+            fn=get_history,
+            outputs=[history_output]
+        )
     
     return demo
 
+# ========== MAIN ==========
 if __name__ == "__main__":
     print("🎭 Starting Gradio interface...")
     demo = create_interface()
-    demo.launch(server_name="0.0.0.0", server_port=7860, share=False, show_error=True)
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        show_error=True
+    )