Create app.py

app.py

@@ -0,0 +1,913 @@
+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...")
+
+# ========== CONFIG ==========
+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 metadata with richer information
+EMOTION_META = {
+    "anger": {
+        "emoji": "😠", "color": "#ef4444", "light_color": "#fee2e2",
+        "gradient": "linear-gradient(135deg, #ef4444 0%, #dc2626 100%)",
+        "description": "Frustration, irritation, or rage",
+        "keywords": ["angry", "furious", "mad", "annoyed", "irritated"],
+        "intensity_labels": ["Mild irritation", "Moderate anger", "Strong anger", "Intense rage"]
+    },
+    "fear": {
+        "emoji": "😨", "color": "#8b5cf6", "light_color": "#ede9fe",
+        "gradient": "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)",
+        "description": "Anxiety, worry, or terror",
+        "keywords": ["scared", "afraid", "terrified", "anxious", "worried"],
+        "intensity_labels": ["Slight concern", "Moderate fear", "Strong fear", "Extreme terror"]
+    },
+    "joy": {
+        "emoji": "😊", "color": "#fbbf24", "light_color": "#fef3c7",
+        "gradient": "linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)",
+        "description": "Happiness, excitement, or delight",
+        "keywords": ["happy", "excited", "delighted", "joyful", "thrilled"],
+        "intensity_labels": ["Mild pleasure", "Moderate happiness", "Strong joy", "Intense euphoria"]
+    },
+    "sadness": {
+        "emoji": "😢", "color": "#3b82f6", "light_color": "#dbeafe",
+        "gradient": "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)",
+        "description": "Sorrow, grief, or disappointment",
+        "keywords": ["sad", "depressed", "unhappy", "miserable", "heartbroken"],
+        "intensity_labels": ["Mild sadness", "Moderate sorrow", "Strong grief", "Deep despair"]
+    },
+    "surprise": {
+        "emoji": "😲", "color": "#ec4899", "light_color": "#fce7f3",
+        "gradient": "linear-gradient(135deg, #ec4899 0%, #db2777 100%)",
+        "description": "Astonishment, shock, or amazement",
+        "keywords": ["surprised", "shocked", "amazed", "astonished", "startled"],
+        "intensity_labels": ["Mild surprise", "Moderate shock", "Strong astonishment", "Complete disbelief"]
+    }
+}
+
+# ========== MODEL CLASS ==========
+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]
+        x = self.dropout(pooled)
+        return self.head(x)
+
+# ========== GLOBAL STATE ==========
+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()
+
+# ========== UTILITY FUNCTIONS ==========
+def sigmoid(x: np.ndarray) -> np.ndarray:
+    """Apply sigmoid with numerical stability"""
+    return 1 / (1 + np.exp(-np.clip(x, -500, 500)))
+
+def get_intensity_level(prob: float) -> Tuple[str, str]:
+    """Get intensity level and color"""
+    if prob >= 0.85: return "Very High", "#10b981"
+    elif prob >= 0.70: return "High", "#3b82f6"
+    elif prob >= 0.50: return "Moderate", "#f59e0b"
+    elif prob >= 0.30: return "Low", "#9ca3af"
+    else: return "Very Low", "#d1d5db"
+
+def get_emotion_intensity_label(emotion: str, prob: float) -> str:
+    """Get human-readable intensity for emotion"""
+    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]
+
+# ========== MODEL LOADING ==========
+def load_model() -> Tuple[str, str]:
+    """Load model and return status HTML"""
+    try:
+        print("📦 Loading model...")
+        state.model = RobertaEmotion()
+        
+        if os.path.exists(MODEL_PATH):
+            state.model.load_state_dict(torch.load(MODEL_PATH, map_location=state.device))
+            print("✅ Trained model loaded")
+            status = "success"
+            status_text = "Trained Model Loaded"
+        else:
+            print("⚠️ No trained weights found")
+            status = "warning"
+            status_text = "Model Initialized (No Weights)"
+        
+        state.model.to(state.device)
+        state.model.eval()
+        state.tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME)
+        state.ready = True
+        
+        device_emoji = "🚀" if state.device == "cuda" else "💻"
+        bg_color = "#d1fae5" if status == "success" else "#fef3c7"
+        border_color = "#10b981" if status == "success" else "#f59e0b"
+        icon = "✅" if status == "success" else "⚠️"
+        
+        html = f"""
+        <div style='background: {bg_color}; padding: 20px; border-radius: 12px; border-left: 5px solid {border_color}; margin: 10px 0;'>
+            <div style='display: flex; align-items: center; gap: 15px;'>
+                <div style='font-size: 48px;'>{icon}</div>
+                <div style='flex: 1;'>
+                    <h3 style='margin: 0 0 8px 0; color: #1f2937;'>{status_text}</h3>
+                    <div style='color: #4b5563; font-size: 14px;'>
+                        <strong>Device:</strong> {device_emoji} {state.device.upper()} | 
+                        <strong>Architecture:</strong> RoBERTa-base | 
+                        <strong>F1 Score:</strong> 0.872
+                    </div>
+                    <div style='margin-top: 8px; padding: 8px; background: rgba(255,255,255,0.5); border-radius: 6px; font-size: 13px; color: #374151;'>
+                        🎯 Ready to analyze emotions! You can now enter text or try the examples below.
+                    </div>
+                </div>
+            </div>
+        </div>
+        """
+        
+        controls_html = _create_controls_panel()
+        
+        print(f"✅ Model ready on {state.device}")
+        return html, controls_html
+        
+    except Exception as e:
+        state.ready = False
+        error_html = f"""
+        <div style='background: #fee2e2; padding: 20px; border-radius: 12px; border-left: 5px solid #ef4444;'>
+            <div style='display: flex; align-items: center; gap: 15px;'>
+                <div style='font-size: 48px;'>❌</div>
+                <div>
+                    <h3 style='margin: 0 0 8px 0; color: #991b1b;'>Error Loading Model</h3>
+                    <div style='color: #7f1d1d; font-size: 14px; font-family: monospace;'>{str(e)}</div>
+                </div>
+            </div>
+        </div>
+        """
+        print(f"❌ Error: {e}")
+        return error_html, ""
+
+# ========== VISUALIZATION FUNCTIONS ==========
+def _create_controls_panel() -> str:
+    """Create interactive controls panel"""
+    return f"""
+    <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 15px; border-radius: 10px; color: white; margin: 10px 0;'>
+        <div style='display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 15px;'>
+            <div style='text-align: center;'>
+                <div style='font-size: 28px; font-weight: bold;'>{state.predictions_count}</div>
+                <div style='font-size: 12px; opacity: 0.9;'>Total Predictions</div>
+            </div>
+            <div style='text-align: center;'>
+                <div style='font-size: 28px; font-weight: bold;'>5</div>
+                <div style='font-size: 12px; opacity: 0.9;'>Emotion Classes</div>
+            </div>
+            <div style='text-align: center;'>
+                <div style='font-size: 28px; font-weight: bold;'>0.872</div>
+                <div style='font-size: 12px; opacity: 0.9;'>F1 Score</div>
+            </div>
+            <div style='text-align: center;'>
+                <div style='font-size: 28px; font-weight: bold;'>{state.device.upper()}</div>
+                <div style='font-size: 12px; opacity: 0.9;'>Device</div>
+            </div>
+        </div>
+    </div>
+    """
+
+def _create_radar_chart_svg(probs: np.ndarray) -> str:
+    """Create SVG radar chart for emotions"""
+    size = 400
+    padding = 80
+    center = size / 2
+    max_radius = (size / 2) - padding
+    
+    # Calculate points
+    angles = [i * 2 * np.pi / 5 - np.pi/2 for i in range(5)]
+    points = []
+    for i, prob in enumerate(probs):
+        r = prob * max_radius
+        x = center + r * np.cos(angles[i])
+        y = center + r * np.sin(angles[i])
+        points.append(f"{x},{y}")
+    
+    points_str = " ".join(points)
+    
+    # Create axis lines
+    axis_lines = ""
+    for i in range(5):
+        x = center + max_radius * np.cos(angles[i])
+        y = center + max_radius * np.sin(angles[i])
+        axis_lines += f'<line x1="{center}" y1="{center}" x2="{x}" y2="{y}" stroke="#d1d5db" stroke-width="2"/>'
+    
+    # Create circles (reference lines)
+    circles = ""
+    for level in [0.25, 0.5, 0.75, 1.0]:
+        r = level * max_radius
+        circles += f'<circle cx="{center}" cy="{center}" r="{r}" fill="none" stroke="#e5e7eb" stroke-width="1.5" stroke-dasharray="4,4"/>'
+    
+    # Create value points on the data polygon
+    data_points = ""
+    for i, prob in enumerate(probs):
+        r = prob * max_radius
+        x = center + r * np.cos(angles[i])
+        y = center + r * np.sin(angles[i])
+        data_points += f'<circle cx="{x}" cy="{y}" r="6" fill="#667eea" stroke="white" stroke-width="2"/>'
+    
+    # Labels with better positioning
+    labels = ""
+    for i, emotion in enumerate(EMOTIONS):
+        label_radius = max_radius + 30
+        x = center + label_radius * np.cos(angles[i])
+        y = center + label_radius * np.sin(angles[i])
+        
+        emoji = EMOTION_META[emotion]["emoji"]
+        prob_pct = probs[i] * 100
+        
+        # Adjust text anchor based on position
+        if x < center - 10:
+            anchor = "end"
+        elif x > center + 10:
+            anchor = "start"
+        else:
+            anchor = "middle"
+        
+        labels += f'''
+        <g>
+            <text x="{x}" y="{y - 15}" text-anchor="{anchor}" font-size="28" dominant-baseline="middle">{emoji}</text>
+            <text x="{x}" y="{y + 8}" text-anchor="{anchor}" font-size="14" font-weight="600" fill="#1f2937" dominant-baseline="middle">{emotion.capitalize()}</text>
+            <text x="{x}" y="{y + 24}" text-anchor="{anchor}" font-size="12" fill="#6b7280" dominant-baseline="middle">{prob_pct:.0f}%</text>
+        </g>
+        '''
+    
+    return f"""
+    <div style="width: 100%; max-width: 450px; margin: 20px auto; padding: 10px; overflow: visible;">
+        <svg width="100%" height="100%" viewBox="0 0 {size} {size}" preserveAspectRatio="xMidYMid meet" style="overflow: visible;">
+            <defs>
+                <filter id="shadow">
+                    <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.3"/>
+                </filter>
+            </defs>
+            {circles}
+            {axis_lines}
+            <polygon points="{points_str}" fill="rgba(102, 126, 234, 0.25)" stroke="#667eea" stroke-width="3" filter="url(#shadow)"/>
+            {data_points}
+            {labels}
+        </svg>
+    </div>
+    """
+
+def _create_emotion_card(emotion: str, prob: float, detected: bool, threshold: float, rank: int) -> str:
+    """Create enhanced emotion card with ranking"""
+    meta = EMOTION_META[emotion]
+    emoji = meta["emoji"]
+    color = meta["color"]
+    light_color = meta["light_color"]
+    gradient = meta["gradient"]
+    desc = meta["description"]
+    
+    prob_pct = prob * 100
+    intensity, intensity_color = get_intensity_level(prob)
+    intensity_label = get_emotion_intensity_label(emotion, prob)
+    
+    # Medal for top 3
+    medals = {1: "🥇", 2: "🥈", 3: "🥉"}
+    rank_display = medals.get(rank, f"#{rank}")
+    
+    if detected:
+        border = f"3px solid {color}"
+        shadow = "0 6px 12px rgba(0,0,0,0.15)"
+        bg = "white"
+    else:
+        border = "2px solid #e5e7eb"
+        shadow = "0 2px 4px rgba(0,0,0,0.05)"
+        bg = "#fafafa"
+    
+    return f"""
+    <div style='background: {bg}; padding: 18px; margin: 12px 0; border-radius: 12px; border: {border}; box-shadow: {shadow}; transition: all 0.3s;'>
+        <div style='display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;'>
+            <div style='display: flex; align-items: center; gap: 12px;'>
+                <span style='font-size: 36px;'>{emoji}</span>
+                <div>
+                    <div style='display: flex; align-items: center; gap: 8px;'>
+                        <span style='font-weight: bold; font-size: 20px; color: #1f2937; text-transform: capitalize;'>{emotion}</span>
+                        <span style='background: {light_color}; color: {color}; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: bold;'>{rank_display}</span>
+                    </div>
+                    <div style='font-size: 13px; color: #6b7280; margin-top: 2px;'>{intensity_label}</div>
+                </div>
+            </div>
+            <div style='text-align: right;'>
+                <div style='font-size: 24px; font-weight: bold; color: {color};'>{prob_pct:.1f}%</div>
+                <div style='font-size: 11px; color: {intensity_color}; font-weight: 600;'>{intensity}</div>
+            </div>
+        </div>
+        
+        <div style='position: relative; background: #f3f4f6; height: 28px; border-radius: 14px; overflow: hidden; margin: 10px 0;'>
+            <div style='position: absolute; height: 100%; background: {gradient}; width: {min(prob_pct, 100)}%; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 14px;'></div>
+            <div style='position: absolute; width: 100%; height: 100%; display: flex; align-items: center; padding: 0 12px; justify-content: space-between;'>
+                <span style='font-size: 12px; font-weight: 600; color: {"white" if prob_pct > 50 else "#1f2937"};'>{desc}</span>
+                <span style='font-size: 11px; color: {"rgba(255,255,255,0.8)" if prob_pct > 50 else "#6b7280"};'>Threshold: {threshold:.1%}</span>
+            </div>
+        </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>
+    """
+
+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]
+    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"
+    
+    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>
+    """
+
+def _create_comparison_table(probs: np.ndarray, preds: np.ndarray) -> str:
+    """Create comparison table"""
+    rows = ""
+    for i, emotion in enumerate(EMOTIONS):
+        meta = EMOTION_META[emotion]
+        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>
+        """
+    
+    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>
+    """
+
+# ========== 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 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:
+        # 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)
+            )
+            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)
+        })
+        
+        # Create visualizations
+        summary_html = _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>
+            """
+        
+        # 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>"
+        
+        # Comparison table
+        table_html = _create_comparison_table(probs, preds) if show_table else ""
+        
+        # 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": {
+                "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]
+            }
+        }
+        
+        # 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
+        
+    except Exception as e:
+        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: str) -> str:
+    """Batch prediction with rich output"""
+    if not state.ready:
+        return "<div style='padding: 20px; background: #fee2e2; border-radius: 8px;'>⚠️ Model not loaded</div>"
+    
+    lines = [line.strip() for line in texts.split('\n') if line.strip()]
+    if not lines:
+        return "<div style='padding: 20px; background: #fef3c7; border-radius: 8px;'>⚠️ No text provided</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>
+    """
+    
+    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>
+            """
+        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() -> str:
+    """Get prediction history"""
+    if not state.history:
+        return "<div style='padding: 20px; text-align: center; color: #9ca3af;'>No predictions yet</div>"
+    
+    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, 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>
+            </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():
+    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_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_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(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_btn = gr.Button("🔍 Analyze Emotions", variant="primary", size="lg")
+                            clear_input_btn = gr.ClearButton([input_text], value="🗑️ Clear Input", size="lg")
+                        
+                        with gr.Row():
+                            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(scale=1):
+                        gr.Markdown("### 📊 Analysis Results")
+                        
+                        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 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
+                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")
+                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]
+        )
+        
+        batch_btn.click(
+            fn=batch_predict,
+            inputs=[batch_input],
+            outputs=[batch_output]
+        )
+        
+        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
+    )