Update app.py

app.py

@@ -24,11 +24,13 @@ body {
     animation: gradient 15s ease infinite;
 }
 @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
+
 /* General Layout & Typography */
 .gradio-container { max-width: 1320px !important; margin: auto !important; }
 #title { text-align: center; font-size: 3rem !important; font-weight: 700; color: #FFF; margin-bottom: 0.5rem; }
 #subtitle { text-align: center; color: #bebebe; margin-top: 0; margin-bottom: 40px; font-size: 1.2rem; font-weight: 300; }
 .gr-button { font-weight: bold !important; }
+
 /* Main Content Card */
 #main-card {
     background: rgba(22, 22, 34, 0.65);
@@ -38,9 +40,10 @@ body {
     border: 1px solid rgba(255, 255, 255, 0.18);
     padding: 1rem;
 }
+
 /* Prediction Bar Styling */
 #predictions-column { background-color: transparent !important; padding: 1.5rem; }
-#predictions-column > .gr-label { display: none; }
+#predictions-column > .gr-label { display: none; } /* Hide the default Gradio label */
 .prediction-list { list-style-type: none; padding: 0; margin-top: 1.5rem; }
 .prediction-list li { display: flex; align-items: center; margin-bottom: 12px; font-size: 1.1rem; }
 .prediction-list .label { width: 100px; text-transform: capitalize; color: #e0e0e0; }
@@ -52,16 +55,17 @@ footer { display: none !important; }
 
 ABOUT_MARKDOWN = """
 ### Model: Vision Transformer (ViT)
-This application uses a Vision Transformer model, fine-tuned for facial emotion recognition.
+This application uses a state-of-the-art Vision Transformer model to perform real-time facial emotion recognition.
 ### Dataset
-The model was fine-tuned on the **Emotion Recognition Dataset** from Kaggle, a large, curated collection of labeled facial images. This diverse dataset allows the model to generalize to a wide variety of real-world faces and expressions.
-*Dataset Link:* [https://www.kaggle.com/datasets/sujaykapadnis/emotion-recognition-dataset](https://www.kaggle.com/datasets/sujaykapadnis/emotion-recognition-dataset)
+The model was pre-trained on the **AffectNet** dataset, the largest database of "in the wild" facial expressions. This ensures robust performance on real-world, spontaneous emotions.
 ### MLOps Pipeline
-This entire application, from data processing to training and deployment, was built using a reproducible MLOps pipeline, ensuring consistency and quality at every step.
+This application is the deployment artifact of a complete MLOps pipeline, demonstrating skills in data management (DVC), model training (TensorFlow), and application development (Gradio).
 """
 
 # --- BACKEND LOGIC ---
+
 def create_prediction_html(probabilities):
+    """Generates clean HTML for the prediction bars."""
     if not probabilities:
         return "<div style='padding: 2rem; text-align: center; color: #999;'>Waiting for prediction...</div>"
     html = "<ul class='prediction-list'>"
@@ -78,16 +82,22 @@ def create_prediction_html(probabilities):
     return html
 
 def unified_prediction_function(frame):
-    """A single, unified function to process any frame (live or uploaded)."""
+    """
+    A single, robust function that takes any frame (from webcam or upload)
+    and returns the annotated frame and the prediction HTML.
+    """
     if frame is None:
         return None, create_prediction_html({})
-    # The predictor class handles all annotation and prediction logic
+    
+    # The predictor class handles all the complex ML logic
     annotated_frame, probabilities = predictor.process_frame(frame)
+    
     return annotated_frame, create_prediction_html(probabilities)
 
 def process_video(video_path, progress=gr.Progress(track_tqdm=True)):
     """Processes an uploaded video file frame-by-frame."""
-    if video_path is None: return None
+    if video_path is None: 
+        return None
     try:
         cap = cv2.VideoCapture(video_path)
         frame_count = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
@@ -121,13 +131,11 @@ with gr.Blocks(css=CSS, theme=gr.themes.Base()) as demo:
             with gr.TabItem("Live Detection"):
                 with gr.Row(equal_height=False):
                     with gr.Column(scale=3):
-                        # --- THIS IS THE DEFINITIVE FIX ---
-                        # We use TWO components. One is an INVISIBLE input to capture the stream.
-                        # The other is a VISIBLE output to display the result.
-                        webcam_capture = gr.Image(source="webcam", streaming=True, type="numpy", visible=False, mirror_webcam=True)
-                        live_output = gr.Image(label="Live Feed", interactive=False, height=550)
-                        # --- END FIX ---
+                        # The single, correct component for a live webcam feed.
+                        # It acts as both input (from webcam) and output (displaying the result).
+                        live_feed = gr.Image(source="webcam", streaming=True, type="numpy", label="Live Feed", height=550, mirror_webcam=True)
                     with gr.Column(scale=2, elem_id="predictions-column"):
+                        gr.Markdown("### Emotion Probabilities")
                         live_predictions = gr.HTML()
             
             with gr.TabItem("Upload Image"):
@@ -148,20 +156,25 @@ with gr.Blocks(css=CSS, theme=gr.themes.Base()) as demo:
                 gr.Markdown(ABOUT_MARKDOWN)
 
     # --- EVENT LISTENERS ---
-    # The .stream() event is attached to the INVISIBLE capture component.
-    # Its outputs are the VISIBLE components.
-    webcam_capture.stream(
+    
+    # Live Feed Logic: This is the simple, direct, and correct way.
+    # The stream from the 'live_feed' component calls the prediction function.
+    # The outputs are sent back to the 'live_feed' component (to update the image)
+    # and the 'live_predictions' component.
+    live_feed.stream(
         fn=unified_prediction_function, 
-        inputs=[webcam_capture],
-        outputs=[live_output, live_predictions]
+        inputs=[live_feed],
+        outputs=[live_feed, live_predictions]
     )
 
+    # Image Upload Logic
     image_button.click(
         fn=unified_prediction_function, 
         inputs=[image_input], 
         outputs=[image_input, image_predictions]
     )
     
+    # Video Upload Logic
     video_button.click(
         fn=process_video, 
         inputs=[video_input], 
@@ -170,6 +183,7 @@ with gr.Blocks(css=CSS, theme=gr.themes.Base()) as demo:
 
 # --- LAUNCH THE APP ---
 if predictor:
+    # Enabling the queue is essential for the video processing progress bar.
     demo.queue().launch(debug=True)
 else:
     print("\n[FATAL ERROR] Could not start the application.")