Update app.py

app.py

@@ -1,7 +1,7 @@
 # ==========================================
 # EMOTION DETECTION WEB APP
-# Model: koyelog/face (Your Trained Model)
-# Complete Backend + Frontend with Gradio
+# Model: koyelog/face
+# Compatible with Gradio 6.1.0
 # Created by: Koyeliya Ghosh
 # ==========================================
 
@@ -18,7 +18,7 @@ print("🎭 AI EMOTION DETECTOR - INITIALIZING")
 print("="*70)
 
 # ===== CONFIGURATION =====
-MODEL_ID = "koyelog/face"  # ✅ YOUR MODEL!
+MODEL_ID = "koyelog/face"
 DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
 
 print(f"\n📦 Model ID: {MODEL_ID}")
@@ -29,14 +29,8 @@ print(f"💾 PyTorch Version: {torch.__version__}")
 print("\n⏳ Loading model from HuggingFace...")
 
 try:
-    model = ViTForImageClassification.from_pretrained(
-        MODEL_ID,
-        cache_dir="./model_cache"
-    )
-    processor = ViTImageProcessor.from_pretrained(
-        MODEL_ID,
-        cache_dir="./model_cache"
-    )
+    model = ViTForImageClassification.from_pretrained(MODEL_ID)
+    processor = ViTImageProcessor.from_pretrained(MODEL_ID)
     model.to(DEVICE)
     model.eval()
     print("✅ Model loaded successfully!")
@@ -90,8 +84,7 @@ def predict_emotion(image):
         if image.mode != 'RGB':
             image = image.convert('RGB')
         
-        original_size = image.size
-        print(f"\n📸 Processing image: {original_size[0]}x{original_size[1]}")
+        print(f"\n📸 Processing image: {image.size[0]}x{image.size[1]}")
         
         # Preprocess
         inputs = processor(images=image, return_tensors="pt")
@@ -111,10 +104,6 @@ def predict_emotion(image):
         
         print(f"🎯 Prediction: {emotion['emoji']} {emotion['name']}")
         print(f"📊 Confidence: {confidence*100:.2f}%")
-        print(f"📈 Top 3 emotions:")
-        top3_indices = torch.topk(probs, 3).indices
-        for idx in top3_indices:
-            print(f"   {EMOTIONS[idx.item()]['emoji']} {EMOTIONS[idx.item()]['name']}: {probs[idx]*100:.2f}%")
         
         # Format results for Gradio Label component
         results = {
@@ -136,8 +125,6 @@ def predict_emotion(image):
         
     except Exception as e:
         print(f"❌ ERROR during prediction: {e}")
-        import traceback
-        traceback.print_exc()
         
         error_html = f"""
         <div style='text-align: center; padding: 40px; background: #ffe6e6; border-radius: 15px;'>
@@ -170,7 +157,7 @@ def generate_result_html(name, emoji, color, description, confidence, probs):
                 <span style='font-weight: 700; color: {emo['color']}; font-size: 1.1em;'>{percentage:.1f}%</span>
             </div>
             <div style='width: 100%; background: #e9ecef; border-radius: 10px; height: 12px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);'>
-                <div style='width: {bar_width}%; background: linear-gradient(90deg, {emo['color']}, {emo['color']}dd); height: 100%; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 10px;'></div>
+                <div style='width: {bar_width}%; background: linear-gradient(90deg, {emo['color']}, {emo['color']}dd); height: 100%; transition: width 0.8s ease; border-radius: 10px;'></div>
             </div>
         </div>
         """
@@ -192,8 +179,8 @@ def generate_result_html(name, emoji, color, description, confidence, probs):
             <div style='
                 font-size: 120px;
                 margin: 0 0 20px 0;
-                animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
                 display: inline-block;
+                animation: bounce 1s ease infinite;
             '>
                 {emoji}
             </div>
@@ -204,7 +191,6 @@ def generate_result_html(name, emoji, color, description, confidence, probs):
                 margin: 20px 0 10px 0;
                 font-weight: 800;
                 text-shadow: 2px 2px 8px rgba(0,0,0,0.1);
-                letter-spacing: -1px;
             '>
                 {name}
             </h1>
@@ -232,7 +218,7 @@ def generate_result_html(name, emoji, color, description, confidence, probs):
                 <span style='font-size: 2em; font-weight: 800; color: {color};'>{confidence*100:.1f}%</span>
             </div>
             
-            <!-- Animated Confidence Bar -->
+            <!-- Confidence Bar -->
             <div style='
                 width: 100%;
                 max-width: 500px;
@@ -242,18 +228,16 @@ def generate_result_html(name, emoji, color, description, confidence, probs):
                 overflow: hidden;
                 margin: 30px auto 0;
                 box-shadow: inset 0 4px 8px rgba(0,0,0,0.1);
-                position: relative;
             '>
                 <div style='
                     width: {confidence*100}%;
                     height: 100%;
                     background: linear-gradient(90deg, {color}, {color}cc);
                     border-radius: 25px;
-                    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
+                    transition: width 1.5s ease;
                     display: flex;
                     align-items: center;
                     justify-content: center;
-                    box-shadow: 0 0 20px {color}80;
                 '>
                     <span style='
                         color: white;
@@ -280,9 +264,6 @@ def generate_result_html(name, emoji, color, description, confidence, probs):
                 color: #333;
                 font-size: 1.8em;
                 font-weight: 700;
-                display: flex;
-                align-items: center;
-                gap: 10px;
             '>
                 📊 Detailed Emotion Analysis
             </h2>
@@ -290,7 +271,7 @@ def generate_result_html(name, emoji, color, description, confidence, probs):
             {bars_html}
         </div>
         
-        <!-- Model Info Footer -->
+        <!-- Model Info -->
         <div style='
             margin-top: 25px;
             padding: 20px;
@@ -301,7 +282,7 @@ def generate_result_html(name, emoji, color, description, confidence, probs):
             color: #666;
         '>
             <p style='margin: 5px 0;'>
-                <strong>Model:</strong> koyelog/face (Vision Transformer) | 
+                <strong>Model:</strong> koyelog/face | 
                 <strong>Accuracy:</strong> 98.80% | 
                 <strong>Parameters:</strong> 85.8M
             </p>
@@ -309,21 +290,9 @@ def generate_result_html(name, emoji, color, description, confidence, probs):
     </div>
     
     <style>
-        @keyframes bounceIn {{
-            0% {{
-                opacity: 0;
-                transform: scale(0.3) translateY(-50px);
-            }}
-            50% {{
-                opacity: 1;
-                transform: scale(1.05);
-            }}
-            70% {{
-                transform: scale(0.9);
-            }}
-            100% {{
-                transform: scale(1);
-            }}
+        @keyframes bounce {{
+            0%, 100% {{ transform: translateY(0); }}
+            50% {{ transform: translateY(-20px); }}
         }}
     </style>
     """
@@ -340,22 +309,6 @@ custom_css = """
     max-width: 1400px !important;
 }
 
-.main-header {
-    text-align: center;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    padding: 60px 30px;
-    border-radius: 25px;
-    margin-bottom: 40px;
-    box-shadow: 0 15px 50px rgba(102, 126, 234, 0.3);
-}
-
-.tab-nav button {
-    font-size: 18px !important;
-    font-weight: 600 !important;
-    padding: 18px 30px !important;
-}
-
 .gr-button-primary {
     background: linear-gradient(135deg, #667eea, #764ba2) !important;
     border: none !important;
@@ -363,12 +316,6 @@ custom_css = """
     font-weight: 600 !important;
     padding: 16px 40px !important;
     border-radius: 12px !important;
-    transition: all 0.3s ease !important;
-}
-
-.gr-button-primary:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
 }
 
 footer {
@@ -380,48 +327,40 @@ footer {
 with gr.Blocks(
     theme=gr.themes.Soft(
         primary_hue="purple",
-        secondary_hue="pink",
-        font=gr.themes.GoogleFont("Inter")
+        secondary_hue="pink"
     ),
     css=custom_css,
-    title="🎭 AI Emotion Detector | koyelog",
-    analytics_enabled=False
+    title="🎭 AI Emotion Detector | koyelog"
 ) as demo:
     
     # Header
     gr.HTML("""
-        <div class="main-header">
-            <h1 style='font-size: 4em; margin: 0; font-weight: 900; text-shadow: 3px 3px 6px rgba(0,0,0,0.2);'>
+        <div style='
+            text-align: center;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 60px 30px;
+            border-radius: 25px;
+            margin-bottom: 40px;
+            box-shadow: 0 15px 50px rgba(102, 126, 234, 0.3);
+        '>
+            <h1 style='font-size: 4em; margin: 0; font-weight: 900;'>
                 🎭 AI Emotion Detector
             </h1>
-            <p style='font-size: 1.5em; margin: 20px 0 10px; opacity: 0.95; font-weight: 500;'>
-                Powered by Vision Transformer | 98.80% Validation Accuracy
+            <p style='font-size: 1.5em; margin: 20px 0 10px; opacity: 0.95;'>
+                Powered by Vision Transformer | 98.80% Accuracy
             </p>
             <p style='font-size: 1.1em; opacity: 0.85;'>
-                Model: <strong>koyelog/face</strong> | 85.8M Parameters | Real-time Detection
+                Model: <strong>koyelog/face</strong> | 85.8M Parameters
             </p>
             <div style='margin-top: 20px; display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;'>
-                <span style='background: rgba(255,255,255,0.25); padding: 10px 25px; border-radius: 25px; backdrop-filter: blur(10px);'>
-                    😠 Angry
-                </span>
-                <span style='background: rgba(255,255,255,0.25); padding: 10px 25px; border-radius: 25px; backdrop-filter: blur(10px);'>
-                    🤢 Disgust
-                </span>
-                <span style='background: rgba(255,255,255,0.25); padding: 10px 25px; border-radius: 25px; backdrop-filter: blur(10px);'>
-                    😨 Fear
-                </span>
-                <span style='background: rgba(255,255,255,0.25); padding: 10px 25px; border-radius: 25px; backdrop-filter: blur(10px);'>
-                    😊 Happy
-                </span>
-                <span style='background: rgba(255,255,255,0.25); padding: 10px 25px; border-radius: 25px; backdrop-filter: blur(10px);'>
-                    😢 Sad
-                </span>
-                <span style='background: rgba(255,255,255,0.25); padding: 10px 25px; border-radius: 25px; backdrop-filter: blur(10px);'>
-                    😲 Surprise
-                </span>
-                <span style='background: rgba(255,255,255,0.25); padding: 10px 25px; border-radius: 25px; backdrop-filter: blur(10px);'>
-                    😐 Neutral
-                </span>
+                <span style='background: rgba(255,255,255,0.25); padding: 10px 25px; border-radius: 25px;'>😠 Angry</span>
+                <span style='background: rgba(255,255,255,0.25); padding: 10px 25px; border-radius: 25px;'>🤢 Disgust</span>
+                <span style='background: rgba(255,255,255,0.25); padding: 10px 25px; border-radius: 25px;'>😨 Fear</span>
+                <span style='background: rgba(255,255,255,0.25); padding: 10px 25px; border-radius: 25px;'>😊 Happy</span>
+                <span style='background: rgba(255,255,255,0.25); padding: 10px 25px; border-radius: 25px;'>😢 Sad</span>
+                <span style='background: rgba(255,255,255,0.25); padding: 10px 25px; border-radius: 25px;'>😲 Surprise</span>
+                <span style='background: rgba(255,255,255,0.25); padding: 10px 25px; border-radius: 25px;'>😐 Neutral</span>
             </div>
         </div>
     """)
@@ -429,10 +368,10 @@ with gr.Blocks(
     with gr.Tabs():
         
         # TAB 1: WEBCAM
-        with gr.Tab("📹 Live Webcam Detection"):
+        with gr.Tab("📹 Live Webcam"):
             gr.Markdown("""
-            ### 🎥 Capture Your Emotion in Real-Time
-            Click the camera button to capture your face and instantly detect your emotion!
+            ### 🎥 Capture Your Face
+            Use your webcam to capture your face and detect your emotion in real-time!
             """)
             
             with gr.Row():
@@ -440,21 +379,18 @@ with gr.Blocks(
                     webcam_input = gr.Image(
                         sources=["webcam"],
                         type="pil",
-                        label="📸 Your Face",
-                        streaming=False,
-                        mirror_webcam=True
+                        label="📸 Your Face"
                     )
                     webcam_button = gr.Button(
                         "🔍 Detect My Emotion",
                         variant="primary",
-                        size="lg",
-                        scale=1
+                        size="lg"
                     )
                 
                 with gr.Column(scale=1):
-                    webcam_html = gr.HTML(label="🎯 Emotion Result")
+                    webcam_html = gr.HTML(label="🎯 Result")
                     webcam_label = gr.Label(
-                        label="📊 Emotion Probabilities",
+                        label="📊 Probabilities",
                         num_top_classes=7
                     )
             
@@ -467,15 +403,15 @@ with gr.Blocks(
         # TAB 2: UPLOAD
         with gr.Tab("🖼️ Upload Image"):
             gr.Markdown("""
-            ### 📤 Upload or Drag & Drop Face Image
-            Supports JPG, PNG, JPEG formats. Best results with front-facing, well-lit photos!
+            ### 📤 Upload Face Image
+            Upload or drag & drop an image to detect emotions!
             """)
             
             with gr.Row():
                 with gr.Column(scale=1):
                     image_input = gr.Image(
                         type="pil",
-                        label="🖼️ Upload Face Image",
+                        label="🖼️ Upload Image",
                         sources=["upload", "clipboard"]
                     )
                     image_button = gr.Button(
@@ -485,9 +421,9 @@ with gr.Blocks(
                     )
                 
                 with gr.Column(scale=1):
-                    image_html = gr.HTML(label="🎯 Emotion Result")
+                    image_html = gr.HTML(label="🎯 Result")
                     image_label = gr.Label(
-                        label="📊 Emotion Probabilities",
+                        label="📊 Probabilities",
                         num_top_classes=7
                     )
             
@@ -505,11 +441,8 @@ with gr.Blocks(
             padding: 50px 30px;
             background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
             border-radius: 25px;
-            box-shadow: 0 8px 32px rgba(0,0,0,0.08);
         '>
-            <h2 style='color: #333; margin-bottom: 30px; font-size: 2em;'>
-                📊 Model Information
-            </h2>
+            <h2 style='color: #333; margin-bottom: 30px;'>📊 Model Information</h2>
             
             <div style='
                 display: grid;
@@ -517,44 +450,28 @@ with gr.Blocks(
                 gap: 25px;
                 margin: 30px 0;
             '>
-                <div style='background: white; padding: 25px; border-radius: 15px; box-shadow: 0 4px 16px rgba(0,0,0,0.06);'>
-                    <p style='font-weight: 700; color: #667eea; font-size: 1.1em; margin-bottom: 10px;'>Model ID</p>
-                    <p style='font-size: 1.2em; color: #333; font-weight: 600;'>koyelog/face</p>
+                <div style='background: white; padding: 25px; border-radius: 15px;'>
+                    <p style='font-weight: 700; color: #667eea; margin-bottom: 10px;'>Model ID</p>
+                    <p style='font-size: 1.2em; color: #333;'>koyelog/face</p>
                 </div>
-                <div style='background: white; padding: 25px; border-radius: 15px; box-shadow: 0 4px 16px rgba(0,0,0,0.06);'>
-                    <p style='font-weight: 700; color: #667eea; font-size: 1.1em; margin-bottom: 10px;'>Architecture</p>
-                    <p style='font-size: 1.2em; color: #333; font-weight: 600;'>Vision Transformer (ViT)</p>
+                <div style='background: white; padding: 25px; border-radius: 15px;'>
+                    <p style='font-weight: 700; color: #667eea; margin-bottom: 10px;'>Architecture</p>
+                    <p style='font-size: 1.2em; color: #333;'>Vision Transformer</p>
                 </div>
-                <div style='background: white; padding: 25px; border-radius: 15px; box-shadow: 0 4px 16px rgba(0,0,0,0.06);'>
-                    <p style='font-weight: 700; color: #667eea; font-size: 1.1em; margin-bottom: 10px;'>Parameters</p>
-                    <p style='font-size: 1.2em; color: #333; font-weight: 600;'>85.8 Million</p>
+                <div style='background: white; padding: 25px; border-radius: 15px;'>
+                    <p style='font-weight: 700; color: #667eea; margin-bottom: 10px;'>Parameters</p>
+                    <p style='font-size: 1.2em; color: #333;'>85.8 Million</p>
                 </div>
-                <div style='background: white; padding: 25px; border-radius: 15px; box-shadow: 0 4px 16px rgba(0,0,0,0.06);'>
-                    <p style='font-weight: 700; color: #667eea; font-size: 1.1em; margin-bottom: 10px;'>Accuracy</p>
-                    <p style='font-size: 1.2em; color: #333; font-weight: 600;'>Train: 99.29% | Val: 98.80%</p>
+                <div style='background: white; padding: 25px; border-radius: 15px;'>
+                    <p style='font-weight: 700; color: #667eea; margin-bottom: 10px;'>Accuracy</p>
+                    <p style='font-size: 1.2em; color: #333;'>98.80%</p>
                 </div>
             </div>
             
-            <div style='margin: 30px 0; padding: 25px; background: white; border-radius: 15px; box-shadow: 0 4px 16px rgba(0,0,0,0.06);'>
-                <p style='font-weight: 700; color: #333; font-size: 1.3em; margin-bottom: 15px;'>
-                    Training Details
-                </p>
-                <p style='color: #666; font-size: 1.05em; line-height: 1.6;'>
-                    <strong>Dataset:</strong> 181,230 images across 7 emotion categories<br>
-                    <strong>Training Epochs:</strong> 20 epochs with dual T4 GPUs<br>
-                    <strong>Best Epoch:</strong> Epoch 20/20 (Val Acc: 98.80%)<br>
-                    <strong>License:</strong> MIT License
-                </p>
-            </div>
-            
-            <p style='color: #666; font-size: 1.05em; margin-top: 30px; line-height: 1.6;'>
-                ⚠️ <strong>Best Results:</strong> Front-facing photos | Good lighting | Single face | Clear expressions
-            </p>
-            
-            <p style='color: #999; font-size: 0.95em; margin-top: 30px;'>
+            <p style='color: #666; margin-top: 30px;'>
                 Created by <strong style='color: #667eea;'>Koyeliya Ghosh</strong><br>
-                <a href='https://huggingface.co/koyelog/face' target='_blank' style='color: #667eea; font-weight: 600;'>
-                    View Model on HuggingFace →
+                <a href='https://huggingface.co/koyelog/face' target='_blank' style='color: #667eea;'>
+                    View Model →
                 </a>
             </p>
         </div>
@@ -563,16 +480,9 @@ with gr.Blocks(
 # ===== LAUNCH =====
 if __name__ == "__main__":
     print("\n" + "="*70)
-    print("🚀 LAUNCHING EMOTION DETECTION APP")
+    print("🚀 LAUNCHING APP")
     print("="*70)
-    print("✅ Model loaded and ready")
-    print("✅ Gradio interface built")
+    print("✅ Model ready")
     print("✅ Starting server...\n")
     
-    demo.launch(
-        server_name="0.0.0.0",
-        server_port=7860,
-        share=False,
-        show_error=True,
-        show_api=True
-    )
+    demo.launch()