Update app.py

app.py

@@ -1,4 +1,339 @@
-<div style='display: flex; gap: 8px; margin-top: 10px;'>
+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>