Update app.py

app.py

@@ -15,118 +15,153 @@ face_cascade = cv2.CascadeClassifier(
 if face_cascade.empty():
     raise RuntimeError("Failed to load Haar Cascade")
 
+EMOTION_EMOJI = {
+    "angry":    "😠 Angry",
+    "disgust":  "🤢 Disgust",
+    "fear":     "😨 Fear",
+    "happy":    "😃 Happy",
+    "neutral":  "😐 Neutral",
+    "sad":      "😔 Sad",
+    "surprise": "😮 Surprise",
+}
+
 
 def predict_emotion(image):
     """
     Predict emotion from an image.
-    
+
     Args:
-        image: PIL Image or numpy array
-        
+        image: PIL Image or numpy array from Gradio
+
     Returns:
-        annotated image and emotion prediction
+        annotated_image (np.ndarray), status_text (str), confidence_dict (dict)
     """
     if image is None:
-        return None, "No image provided"
-    
-    # Convert PIL Image to numpy array if needed
-    if isinstance(image, np.ndarray):
-        frame = image
-    else:
-        frame = np.array(image)
-    
-    # Convert RGB to BGR for OpenCV
-    if len(frame.shape) == 3 and frame.shape[2] == 3:
-        frame_bgr = cv2.cvtColor(frame, cv2.COLOR_RGB2BGR)
-    else:
-        frame_bgr = frame
-    
-    # Convert to grayscale for face detection
+        return None, "⚠️ No image provided", {}
+
+    # Ensure numpy array in RGB
+    frame = np.array(image) if not isinstance(image, np.ndarray) else image
+
+    # BGR copy for OpenCV ops
+    frame_bgr = cv2.cvtColor(frame, cv2.COLOR_RGB2BGR)
     gray = cv2.cvtColor(frame_bgr, cv2.COLOR_BGR2GRAY)
-    
-    # Detect faces
+
     detected = face_cascade.detectMultiScale(
         gray, scaleFactor=1.1, minNeighbors=5, minSize=(30, 30)
     )
-    
+
     if len(detected) == 0:
-        return frame, "No face detected"
-    
-    # Get the largest face
-    faces = [max(detected, key=lambda r: r[2]*r[3])]
-    
-    # Process the face
-    output_frame = frame_bgr.copy()
-    emotions = []
-    
-    for (x, y, w, h) in faces:
-        # Extract face region
-        face_rgb = cv2.cvtColor(frame_bgr[y:y+h, x:x+w], cv2.COLOR_BGR2RGB)
-        
-        # Predict emotion
-        emotion = predictor.predict(face_rgb)
-        emotions.append(emotion)
-        
-        # Draw rectangle and label
-        cv2.rectangle(output_frame, (x, y), (x+w, y+h), (0, 255, 0), 2)
-        cv2.putText(
-            output_frame, emotion, (x, y - 10),
-            cv2.FONT_HERSHEY_SIMPLEX, 0.9, (0, 255, 0), 2
-        )
-    
-    # Convert back to RGB for display
-    output_frame_rgb = cv2.cvtColor(output_frame, cv2.COLOR_BGR2RGB)
-    
-    # Return annotated image and detected emotion
-    emotion_text = ", ".join(emotions) if emotions else "No emotion detected"
-    
-    return output_frame_rgb, f"Detected emotion(s): {emotion_text}"
-
-
-# Create Gradio interface
-with gr.Blocks(title="Smilo😃 - Real-Time Emotion Detection") as demo:
+        return frame, "🔍 No face detected — try better lighting!", {}
+
+    # Largest face only
+    x, y, w, h = max(detected, key=lambda r: r[2] * r[3])
+    y1, y2 = max(0, y), min(frame_bgr.shape[0], y + h)
+    x1, x2 = max(0, x), min(frame_bgr.shape[1], x + w)
+
+    face_rgb = cv2.cvtColor(frame_bgr[y1:y2, x1:x2], cv2.COLOR_BGR2RGB)
+
+    # Get emotion + confidence scores
+    emotion, scores = predictor.predict_with_confidence(face_rgb)
+
+    # Draw bounding box + label
+    output = frame_bgr.copy()
+    cv2.rectangle(output, (x1, y1), (x2, y2), (0, 200, 100), 2)
+    label = EMOTION_EMOJI.get(emotion.lower(), emotion)
+    cv2.putText(
+        output, label, (x1, y1 - 12),
+        cv2.FONT_HERSHEY_SIMPLEX, 0.85, (0, 200, 100), 2, cv2.LINE_AA
+    )
+
+    # Map scores to emoji labels for gr.Label
+    emoji_scores = {
+        EMOTION_EMOJI.get(cls.lower(), cls): float(conf)
+        for cls, conf in scores.items()
+    }
+
+    return (
+        cv2.cvtColor(output, cv2.COLOR_BGR2RGB),
+        f"✅ Detected: **{EMOTION_EMOJI.get(emotion.lower(), emotion)}**",
+        emoji_scores,
+    )
+
+
+# ---------- UI ----------
+theme = gr.themes.Soft(
+    primary_hue="teal",
+    secondary_hue="orange",
+    neutral_hue="slate",
+    font=[gr.themes.GoogleFont("Inter"), "sans-serif"],
+)
+
+with gr.Blocks(
+    title="Smilo 😃 – Real-Time Emotion Detection",
+    theme=theme,
+    css="""
+        .hero { background: linear-gradient(135deg,#FF9933 0%,#D0B264 50%,#469F93 100%);
+                padding:36px; border-radius:14px; text-align:center; color:#fff;
+                margin-bottom:18px; }
+        .hero h1 { font-size:3em; font-weight:900; margin:0 0 8px; }
+        .hero p  { font-size:1.1em; opacity:0.9; margin:0; }
+        footer { display:none !important; }
+    """,
+) as demo:
+
     gr.HTML("""
-    <div style="background: linear-gradient(90deg, #FF9933 0%, #D0B264 50%, #469F93 100%); 
-                padding: 40px; 
-                border-radius: 12px; 
-                text-align: center; 
-                color: white; 
-                font-family: 'Helvetica Neue', Arial, sans-serif;
-                margin-bottom: 20px;">
-        <h1 style="color: white; margin: 0; margin-bottom: 10px; font-weight: 900; font-size: 3.5em; display: flex; align-items: center; justify-content: center; gap: 10px;">
-            Smilo <span style="font-size: 0.9em;">😃</span>
-        </h1>
-        <p style="color: #f0f0f0; font-size: 1.2em; margin: 0; font-weight: 400; letter-spacing: 0.5px;">Real-Time Emotion Detection powered by PyTorch</p>
+    <div class="hero">
+        <h1>Smilo 😃</h1>
+        <p>Real-Time Facial Emotion Detection &nbsp;·&nbsp; PyTorch + OpenCV</p>
     </div>
     """)
-    
+
     with gr.Row():
-        with gr.Column():
+        # ── Left column: input ──────────────────────────────────────────
+        with gr.Column(scale=1):
             image_input = gr.Image(
-                label="Input Image",
+                label="📷 Input – upload a photo or use your webcam",
                 type="pil",
-                sources=["upload", "webcam"]
+                sources=["upload", "webcam"],
+                mirror_webcam=True,
+                format="jpeg",
             )
-            submit_btn = gr.Button("Predict Emotion", variant="primary")
-        
-        with gr.Column():
-            image_output = gr.Image(label="Annotated Image")
-            emotion_output = gr.Textbox(label="Prediction Result", interactive=False)
-    
-    # Connect the function to the button
-    submit_btn.click(
-        fn=predict_emotion,
-        inputs=[image_input],
-        outputs=[image_output, emotion_output]
+            with gr.Row():
+                submit_btn = gr.Button("🔍 Detect Emotion", variant="primary", scale=2)
+                clear_btn  = gr.Button("🗑️ Clear", variant="secondary", scale=1)
+
+        # ── Right column: output ────────────────────────────────────────
+        with gr.Column(scale=1):
+            image_output   = gr.Image(label="🖼️ Annotated Result", interactive=False)
+            emotion_output = gr.Markdown(label="Result")
+            confidence_out = gr.Label(
+                label="📊 Confidence Scores",
+                num_top_classes=7,
+            )
+
+    # ── Examples ────────────────────────────────────────────────────────
+    gr.Examples(
+        examples=[],          # add example image paths here if you have them
+        inputs=image_input,
+        label="Try an example",
     )
-    
-    # Also run prediction when image is uploaded
-    image_input.change(
+
+    # ── Event wiring ────────────────────────────────────────────────────
+    outputs = [image_output, emotion_output, confidence_out]
+
+    submit_btn.click(fn=predict_emotion, inputs=image_input, outputs=outputs)
+
+    # Real-time streaming when webcam is active (Gradio 6 feature)
+    image_input.stream(
         fn=predict_emotion,
-        inputs=[image_input],
-        outputs=[image_output, emotion_output]
+        inputs=image_input,
+        outputs=outputs,
+        stream_every=0.1,   # run ~10 fps
+        time_limit=None,
     )
 
+    # Also fire on static image upload
+    image_input.change(fn=predict_emotion, inputs=image_input, outputs=outputs)
+
+    clear_btn.click(lambda: (None, None, "", {}), outputs=[image_input, *outputs])
+
 
 if __name__ == "__main__":
-    demo.launch(share=True)
+    demo.launch()