Update app.py

app.py

@@ -24,13 +24,11 @@ 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; }
-
 /* Prediction Bar Styling */
 #predictions-column { background-color: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 1.5rem; }
 #predictions-column > .gr-label { display: none; }
@@ -80,28 +78,31 @@ def live_detection_stream(frame):
     return annotated_frame, create_prediction_html(probabilities)
 
 def process_image(image):
-    if image is None: return None, create_prediction_html({})
+    if image is None: 
+        return None, create_prediction_html({})
     annotated_frame, probabilities = predictor.process_frame(image)
     return annotated_frame, create_prediction_html(probabilities)
 
 def process_video(video_path, progress=gr.Progress(track_tqdm=True)):
-    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(cv.CAP_PROP_FRAME_COUNT))
+        frame_count = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
         output_path = "processed_video.mp4"
         fourcc = cv2.VideoWriter_fourcc(*'mp4v')
         fps = cap.get(cv2.CAP_PROP_FPS)
-        width = int(cap.get(cv.CAP_PROP_FRAME_WIDTH))
-        height = int(cap.get(cv.CAP_PROP_FRAME_HEIGHT))
+        width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+        height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
         out = cv2.VideoWriter(output_path, fourcc, fps, (width, height))
         for _ in progress.tqdm(range(frame_count), desc="Processing Video"):
             ret, frame = cap.read()
-            if not ret: break
-            frame_rgb = cv2.cvtColor(frame, cv.COLOR_BGR2RGB)
+            if not ret: 
+                break
+            frame_rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
             annotated_frame, _ = predictor.process_frame(frame_rgb)
             if annotated_frame is not None:
-                out.write(cv2.cvtColor(annotated_frame, cv.COLOR_RGB2BGR))
+                out.write(cv2.cvtColor(annotated_frame, cv2.COLOR_RGB2BGR))
         cap.release()
         out.release()
         return output_path
@@ -118,8 +119,10 @@ with gr.Blocks(css=CSS, theme=gr.themes.Base()) as demo:
         with gr.TabItem("Live Detection"):
             with gr.Row(equal_height=True):
                 with gr.Column(scale=3):
-                    # The definitive, simple, and correct way to do a live feed in Gradio v3
-                    live_feed = gr.Image(source="webcam", streaming=True, type="numpy", label="Live Feed", interactive=False, height=550)
+                    # Webcam input
+                    live_feed = gr.Image(source="webcam", streaming=True, type="numpy", label="Live Feed", height=550)
+                    # Annotated output
+                    live_output = gr.Image(type="numpy", label="Annotated Feed", interactive=False, height=550)
                 with gr.Column(scale=2, elem_id="predictions-column"):
                     gr.Markdown("### Emotion Probabilities")
                     live_predictions = gr.HTML()
@@ -143,20 +146,21 @@ with gr.Blocks(css=CSS, theme=gr.themes.Base()) as demo:
 
     # --- EVENT LISTENERS ---
     
-    # The .stream() event is the correct way to link a streaming input.
-    # It automatically handles starting and stopping. There is no need for separate buttons.
+    # Webcam -> Annotated + Predictions
     live_feed.stream(
         fn=live_detection_stream, 
-        inputs=[live_feed],
-        outputs=[live_feed, live_predictions],
+        inputs=live_feed,
+        outputs=[live_output, live_predictions],
     )
 
+    # Image processing
     image_button.click(process_image, [image_input], [image_input, image_predictions])
+
+    # Video processing
     video_button.click(process_video, [video_input], [video_output])
 
 # --- 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.")
+    print("\n[FATAL ERROR] Could not start the application.")