Update app.py

app.py

@@ -9,6 +9,7 @@ MODEL_NAME = "roberta-base"
 MAX_LEN = 200
 EMOTIONS = ["anger", "fear", "joy", "sadness", "surprise"]
 EMOTION_EMOJIS = ["😠", "😨", "😊", "😢", "😲"]
+EMOTION_COLORS = ["#ef4444", "#f59e0b", "#10b981", "#3b82f6", "#8b5cf6"]
 
 # Model Architecture (MUST MATCH TRAINING)
 class RobertaEmotion(nn.Module):
@@ -30,7 +31,7 @@ class RobertaEmotion(nn.Module):
         return logits
 
 # Load model and tokenizer
-print("🔄 Loading model and tokenizer...")
+print("🔄 Loading EmotiScan model...")
 device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
 print(f"📱 Device: {device}")
 
@@ -44,7 +45,7 @@ try:
     model = model.to(device)
     model.eval()
     
-    print("✅ Model loaded successfully!")
+    print("✅ EmotiScan ready!")
 except Exception as e:
     print(f"⚠️ Error loading model: {e}")
     raise e
@@ -53,9 +54,15 @@ except Exception as e:
 BEST_THRESHOLDS = np.array([0.5, 0.5, 0.5, 0.5, 0.5])
 
 def predict_emotions(text):
-    """Predict emotions from text"""
+    """Predict emotions from text with enhanced visualization"""
     if not text or not text.strip():
-        return "⚠️ Please enter some text to analyze"
+        return """
+        <div style="text-align: center; padding: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 16px; color: white;">
+            <div style="font-size: 48px; margin-bottom: 16px;">🤔</div>
+            <div style="font-size: 20px; font-weight: 600;">Waiting for your text...</div>
+            <div style="font-size: 14px; opacity: 0.9; margin-top: 8px;">Enter some text above to analyze emotions</div>
+        </div>
+        """
     
     try:
         # Tokenize
@@ -78,29 +85,118 @@ def predict_emotions(text):
         # Apply thresholds
         predictions = (probs > BEST_THRESHOLDS).astype(int)
         
-        # Format results
-        detected = []
-        output = "## 🎯 Detected Emotions:\n\n"
+        # Build beautiful HTML output
+        html = """
+        <style>
+            @keyframes fadeIn {
+                from { opacity: 0; transform: translateY(10px); }
+                to { opacity: 1; transform: translateY(0); }
+            }
+            @keyframes pulse {
+                0%, 100% { transform: scale(1); }
+                50% { transform: scale(1.05); }
+            }
+            .emotion-card {
+                animation: fadeIn 0.5s ease-out;
+                transition: all 0.3s ease;
+            }
+            .emotion-card:hover {
+                transform: translateY(-4px);
+                box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+            }
+            .detected-badge {
+                animation: pulse 2s infinite;
+            }
+            .progress-bar {
+                transition: width 0.8s ease-out;
+            }
+        </style>
+        """
         
-        for emotion, emoji, prob, pred in zip(EMOTIONS, EMOTION_EMOJIS, probs, predictions):
-            if pred == 1:
-                detected.append(f"{emoji} **{emotion.capitalize()}**")
+        # Detected emotions section
+        detected = [(emotion, emoji, prob, color) for emotion, emoji, prob, pred, color 
+                   in zip(EMOTIONS, EMOTION_EMOJIS, probs, predictions, EMOTION_COLORS) if pred == 1]
         
         if detected:
-            output += ", ".join(detected) + "\n\n"
+            html += """
+            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                        padding: 24px; border-radius: 16px; margin-bottom: 24px; text-align: center;">
+                <div style="color: white; font-size: 18px; font-weight: 600; margin-bottom: 16px;">
+                    🎯 Detected Emotions
+                </div>
+                <div style="display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;">
+            """
+            for emotion, emoji, prob, color in detected:
+                html += f"""
+                <div class="detected-badge" style="background: white; padding: 12px 20px; 
+                     border-radius: 24px; display: flex; align-items: center; gap: 8px;
+                     box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
+                    <span style="font-size: 24px;">{emoji}</span>
+                    <span style="font-weight: 600; color: {color}; text-transform: capitalize;">
+                        {emotion}
+                    </span>
+                    <span style="background: {color}; color: white; padding: 2px 8px; 
+                          border-radius: 12px; font-size: 12px; font-weight: 600;">
+                        {prob:.0%}
+                    </span>
+                </div>
+                """
+            html += "</div></div>"
         else:
-            output += "*No strong emotions detected (all below threshold)*\n\n"
+            html += """
+            <div style="background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); 
+                        padding: 24px; border-radius: 16px; margin-bottom: 24px; text-align: center; color: white;">
+                <div style="font-size: 32px; margin-bottom: 8px;">😐</div>
+                <div style="font-size: 16px; font-weight: 600;">No Strong Emotions Detected</div>
+                <div style="font-size: 14px; opacity: 0.8; margin-top: 4px;">All emotions below threshold</div>
+            </div>
+            """
+        
+        # All emotions with progress bars
+        html += """
+        <div style="background: white; padding: 24px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+            <div style="font-size: 18px; font-weight: 600; margin-bottom: 20px; color: #1f2937;">
+                📊 Emotion Breakdown
+            </div>
+            <div style="display: flex; flex-direction: column; gap: 16px;">
+        """
         
-        output += "## 📊 All Probabilities:\n\n"
-        for emotion, emoji, prob in zip(EMOTIONS, EMOTION_EMOJIS, probs):
-            bar_length = int(prob * 20)
-            bar = "█" * bar_length + "░" * (20 - bar_length)
-            output += f"{emoji} **{emotion.capitalize()}**: {bar} {prob:.1%}\n\n"
+        for emotion, emoji, prob, color in zip(EMOTIONS, EMOTION_EMOJIS, probs, EMOTION_COLORS):
+            html += f"""
+            <div class="emotion-card" style="background: #f9fafb; padding: 16px; border-radius: 12px; 
+                 border-left: 4px solid {color};">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+                    <div style="display: flex; align-items: center; gap: 10px;">
+                        <span style="font-size: 28px;">{emoji}</span>
+                        <span style="font-weight: 600; color: #374151; text-transform: capitalize; font-size: 16px;">
+                            {emotion}
+                        </span>
+                    </div>
+                    <span style="font-weight: 700; color: {color}; font-size: 18px;">
+                        {prob:.1%}
+                    </span>
+                </div>
+                <div style="background: #e5e7eb; height: 12px; border-radius: 6px; overflow: hidden;">
+                    <div class="progress-bar" style="background: linear-gradient(90deg, {color}, {color}dd); 
+                         height: 100%; width: {prob*100}%; border-radius: 6px;
+                         box-shadow: 0 0 8px {color}66;"></div>
+                </div>
+            </div>
+            """
         
-        return output
+        html += "</div></div>"
+        
+        return html
         
     except Exception as e:
-        return f"⚠️ Error: {str(e)}"
+        return f"""
+        <div style="background: #fef2f2; border: 2px solid #ef4444; padding: 20px; 
+             border-radius: 12px; color: #991b1b;">
+            <div style="font-size: 24px; margin-bottom: 8px;">⚠️</div>
+            <div style="font-weight: 600; margin-bottom: 4px;">Analysis Error</div>
+            <div style="font-size: 14px;">{str(e)}</div>
+        </div>
+        """
 
 # Example texts
 examples = [
@@ -112,67 +208,186 @@ examples = [
     ["I'm excited but also nervous about starting my new job next week."],
 ]
 
+# Custom CSS
+custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+
+* {
+    font-family: 'Inter', sans-serif !important;
+}
+
+.gradio-container {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
+}
+
+#component-0 {
+    max-width: 1200px !important;
+    margin: auto !important;
+}
+
+.app-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 40px;
+    border-radius: 20px;
+    margin-bottom: 30px;
+    text-align: center;
+    color: white;
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+}
+
+button {
+    border-radius: 12px !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+}
+
+button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
+}
+
+.primary-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+}
+
+textarea {
+    border-radius: 12px !important;
+    border: 2px solid #e5e7eb !important;
+    transition: all 0.3s ease !important;
+}
+
+textarea:focus {
+    border-color: #667eea !important;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+}
+"""
+
 # Create Gradio Interface
-with gr.Blocks() as demo:
-    gr.Markdown(
-        """
-        # 😊 Multi-Label Emotion Classification
-        
-        Detect **multiple emotions** in text using a fine-tuned RoBERTa transformer.
-        
-        **Emotions:** 😠 Anger | 😨 Fear | 😊 Joy | 😢 Sadness | 😲 Surprise
-        """
-    )
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
+    gr.HTML("""
+        <div class="app-header">
+            <div style="font-size: 56px; margin-bottom: 16px;">🎭</div>
+            <h1 style="font-size: 48px; font-weight: 700; margin: 0 0 12px 0; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+                EmotiScan
+            </h1>
+            <p style="font-size: 20px; opacity: 0.95; margin: 0; font-weight: 500;">
+                AI-Powered Multi-Emotion Detection
+            </p>
+            <div style="margin-top: 20px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;">
+                <span style="background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px; font-size: 14px;">
+                    😠 Anger
+                </span>
+                <span style="background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px; font-size: 14px;">
+                    😨 Fear
+                </span>
+                <span style="background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px; font-size: 14px;">
+                    😊 Joy
+                </span>
+                <span style="background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px; font-size: 14px;">
+                    😢 Sadness
+                </span>
+                <span style="background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px; font-size: 14px;">
+                    😲 Surprise
+                </span>
+            </div>
+        </div>
+    """)
     
     with gr.Row():
-        with gr.Column():
+        with gr.Column(scale=1):
             text_input = gr.Textbox(
-                label="Enter your text",
-                placeholder="Type or paste text here to analyze emotions...",
-                lines=5
+                label="📝 Your Text",
+                placeholder="Type or paste your text here to discover the emotions within...",
+                lines=8,
+                max_lines=12
             )
-            analyze_btn = gr.Button("🔮 Analyze Emotions", variant="primary")
-            clear_btn = gr.Button("🗑️ Clear")
+            with gr.Row():
+                analyze_btn = gr.Button("🔮 Analyze Emotions", variant="primary", size="lg")
+                clear_btn = gr.Button("🗑️ Clear", size="lg")
         
-        with gr.Column():
-            output = gr.Markdown(label="Analysis Results")
+        with gr.Column(scale=1):
+            output = gr.HTML(label="Analysis Results", value="""
+                <div style="text-align: center; padding: 60px 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                     border-radius: 16px; color: white; height: 100%;">
+                    <div style="font-size: 64px; margin-bottom: 20px;">🎭</div>
+                    <div style="font-size: 24px; font-weight: 700; margin-bottom: 12px;">Welcome to EmotiScan</div>
+                    <div style="font-size: 16px; opacity: 0.9;">Enter text to begin emotional analysis</div>
+                </div>
+            """)
     
     gr.Examples(
         examples=examples,
         inputs=text_input,
         outputs=output,
         fn=predict_emotions,
-        cache_examples=False
+        cache_examples=False,
+        label="💡 Try These Examples"
     )
     
-    gr.Markdown(
-        """
-        ---
-        ## 📈 How It Works
-        
-        This is a **multi-label classification** model - each text can have multiple emotions!
-        
-        ### 🎯 Model Details
-        - **Architecture**: RoBERTa-base (125M parameters)
-        - **Max Length**: 200 tokens
-        - **Training**: BCE Loss + Label Smoothing (0.05)
-        - **Evaluation**: Macro F1-Score with per-class threshold tuning
-        
-        ### 🏗️ Architecture Flow
-        ```
-        Input Text → Tokenizer → RoBERTa Encoder → [CLS] Pooling → 
-        Dropout (0.35) → Linear (768→5) → Sigmoid → 5 Emotion Probabilities
-        ```
-        
-        ---
-        **Project**: 2025 Sep DLGenAI Course | **Built with**: PyTorch + Transformers + Gradio
-        """
-    )
+    gr.HTML("""
+        <div style="background: white; padding: 32px; border-radius: 16px; margin-top: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+            <h2 style="color: #1f2937; margin-bottom: 20px; font-size: 24px; font-weight: 700;">
+                🧠 About EmotiScan
+            </h2>
+            <p style="color: #4b5563; line-height: 1.8; margin-bottom: 24px; font-size: 15px;">
+                EmotiScan uses state-of-the-art deep learning to detect multiple emotions simultaneously in text. 
+                Unlike traditional single-emotion classifiers, our model recognizes that human expression is complex 
+                and nuanced—one piece of text can convey multiple emotions at once.
+            </p>
+            
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 24px;">
+                <div style="background: linear-gradient(135deg, #667eea22 0%, #764ba222 100%); padding: 20px; border-radius: 12px;">
+                    <div style="font-size: 32px; margin-bottom: 8px;">🤖</div>
+                    <div style="font-weight: 600; color: #1f2937; margin-bottom: 4px;">Model</div>
+                    <div style="color: #6b7280; font-size: 14px;">RoBERTa-base (125M params)</div>
+                </div>
+                <div style="background: linear-gradient(135deg, #10b98122 0%, #059669 22 100%); padding: 20px; border-radius: 12px;">
+                    <div style="font-size: 32px; margin-bottom: 8px;">🎯</div>
+                    <div style="font-weight: 600; color: #1f2937; margin-bottom: 4px;">Accuracy</div>
+                    <div style="color: #6b7280; font-size: 14px;">Optimized F1-Score per class</div>
+                </div>
+                <div style="background: linear-gradient(135deg, #f59e0b22 0%, #d9770622 100%); padding: 20px; border-radius: 12px;">
+                    <div style="font-size: 32px; margin-bottom: 8px;">⚡</div>
+                    <div style="font-weight: 600; color: #1f2937; margin-bottom: 4px;">Speed</div>
+                    <div style="color: #6b7280; font-size: 14px;">Real-time inference</div>
+                </div>
+            </div>
+            
+            <div style="margin-top: 32px; padding: 20px; background: #f9fafb; border-radius: 12px; border-left: 4px solid #667eea;">
+                <div style="font-weight: 600; color: #1f2937; margin-bottom: 12px; font-size: 16px;">
+                    📚 Technical Details
+                </div>
+                <ul style="color: #4b5563; line-height: 2; margin: 0; padding-left: 20px; font-size: 14px;">
+                    <li><strong>Architecture:</strong> Transformer encoder with classification head</li>
+                    <li><strong>Training:</strong> BCE Loss with label smoothing (0.05)</li>
+                    <li><strong>Max Tokens:</strong> 200 tokens per input</li>
+                    <li><strong>Dropout:</strong> 0.35 for regularization</li>
+                    <li><strong>Multi-Label:</strong> Each emotion is independently predicted</li>
+                </ul>
+            </div>
+            
+            <div style="margin-top: 24px; text-align: center; color: #9ca3af; font-size: 14px;">
+                <p style="margin: 0;">Built with PyTorch • Transformers • Gradio</p>
+                <p style="margin: 4px 0 0 0;">2025 Sep DLGenAI Course Project</p>
+            </div>
+        </div>
+    """)
     
     # Event handlers
     analyze_btn.click(fn=predict_emotions, inputs=text_input, outputs=output)
-    clear_btn.click(fn=lambda: ("", ""), inputs=None, outputs=[text_input, output])
+    clear_btn.click(
+        fn=lambda: ("", """
+            <div style="text-align: center; padding: 60px 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                 border-radius: 16px; color: white; height: 100%;">
+                <div style="font-size: 64px; margin-bottom: 20px;">🎭</div>
+                <div style="font-size: 24px; font-weight: 700; margin-bottom: 12px;">Welcome to EmotiScan</div>
+                <div style="font-size: 16px; opacity: 0.9;">Enter text to begin emotional analysis</div>
+            </div>
+        """), 
+        inputs=None, 
+        outputs=[text_input, output]
+    )
     text_input.submit(fn=predict_emotions, inputs=text_input, outputs=output)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(share=True, server_name="0.0.0.0")