Update app.py

app.py

@@ -309,7 +309,7 @@ def delete_images_in_category(emotion, image_type, confirm=False):
                 deleted_count += 1
             except Exception as e:
                 print(f"Error deleting {file}: {e}")
-            failed_deletions.append(str(file))
+                failed_deletions.append(str(file))
     
     if deleted_count > 0 and LOG_FILE.exists():
         try:
@@ -388,7 +388,7 @@ def clear_all_data():
     empty_df = pd.DataFrame(columns=["timestamp", "batch_no", "emotion", "confidence", "face_path", "annotated_path"])
     return f"Deleted {deleted_count} items. All data has been cleared.", empty_df, None
 
-# Desktop-Optimized CSS
+# Unified CSS for both interfaces
 desktop_css = """
 :root {
     --spacing: 0.75rem;
@@ -443,9 +443,9 @@ h1 {
     margin-bottom: 1.5rem;
 }
 
-.tab-content {
-    padding: 1.5rem;
+.dashboard-panel {
     background: white;
+    padding: 1.5rem;
     border-radius: var(--border-radius);
     box-shadow: var(--shadow);
     margin-bottom: 1.5rem;
@@ -509,14 +509,6 @@ button.danger {
     margin-bottom: 1rem;
 }
 
-.dashboard-panel {
-    background: white;
-    padding: 1.5rem;
-    border-radius: var(--border-radius);
-    box-shadow: var(--shadow);
-    margin-bottom: 1.5rem;
-}
-
 .management-section {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -524,8 +516,14 @@ button.danger {
     margin-top: 1.5rem;
 }
 
+.capture-section {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+}
+
 @media (max-width: 992px) {
-    .management-section {
+    .management-section, .capture-section {
         grid-template-columns: 1fr;
     }
     
@@ -541,10 +539,9 @@ button.danger {
 }
 """
 
-# Capture Interface - Desktop Optimized
+# Capture Interface - Now matches Data Management style
 with gr.Blocks(title="Emotion Capture", css=desktop_css) as capture_interface:
-    
-    with gr.Column():
+    with gr.Column(elem_classes="dashboard-panel"):
         gr.Markdown("""
         # Emotion Capture Interface
         """)
@@ -574,27 +571,25 @@ with gr.Blocks(title="Emotion Capture", css=desktop_css) as capture_interface:
             visible=False
         )
         
-        with gr.Row():
-            with gr.Column(scale=1):
-                webcam = gr.Image(
-                    sources=["webcam"],
-                    type="pil",
-                    label="Live Camera Feed",
-                    interactive=True,
-                    mirror_webcam=True,
-                    visible=False,
-                    elem_classes="webcam-container",
-                    height=400
-                )
+        with gr.Column(elem_classes="capture-section"):
+            webcam = gr.Image(
+                sources=["webcam"],
+                type="pil",
+                label="Live Camera Feed",
+                interactive=True,
+                mirror_webcam=True,
+                visible=False,
+                elem_classes="webcam-container",
+                height=500
+            )
             
-            with gr.Column(scale=1):
-                result_img = gr.Image(
-                    label="Analysis Result", 
-                    interactive=False, 
-                    visible=False,
-                    elem_classes="result-container",
-                    height=400
-                )
+            result_img = gr.Image(
+                label="Analysis Result", 
+                interactive=False, 
+                visible=False,
+                elem_classes="result-container",
+                height=500
+            )
         
         with gr.Row():
             result_text = gr.Textbox(
@@ -611,14 +606,14 @@ with gr.Blocks(title="Emotion Capture", css=desktop_css) as capture_interface:
                 elem_classes="primary"
             )
     
-    # Detect when user stops typing (with 5 second delay)
+    # Event handlers
     batch_no.change(
         check_batch_no,
         inputs=batch_no,
         outputs=[batch_no, message, webcam, result_img, result_text, done_btn],
         queue=False
     ).then(
-        lambda: time.sleep(5),  # Wait for 5 seconds of inactivity
+        lambda: time.sleep(5),
         None,
         None,
         queue=False
@@ -629,22 +624,19 @@ with gr.Blocks(title="Emotion Capture", css=desktop_css) as capture_interface:
         queue=False
     )
     
-    # Process when webcam captures an image
     webcam.change(
         predict_emotion,
         inputs=[batch_no, webcam],
         outputs=[result_img, result_text, message, result_img, result_text, done_btn]
     )
     
-    # Reset interface when Done is clicked
     done_btn.click(
         reset_interface,
         outputs=[batch_no, message, webcam, result_img, result_text, done_btn]
     )
 
-# Data Management Interface - Desktop Optimized
+# Data Management Interface
 with gr.Blocks(title="Data Management") as data_interface:
-    
     with gr.Column():
         gr.Markdown("""
         # Data Management Dashboard