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,31 +388,40 @@ 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
 
-# Custom CSS for better layout
-custom_css = """
+# Desktop-Optimized CSS
+desktop_css = """
 :root {
-    --spacing: 0.5rem;
+    --spacing: 0.75rem;
     --border-radius: 8px;
-    --shadow: 0 2px 4px rgba(0,0,0,0.1);
+    --shadow: 0 2px 6px rgba(0,0,0,0.1);
     --primary-color: #4f46e5;
     --danger-color: #ef4444;
     --success-color: #10b981;
+    --panel-bg: #f8f9fa;
 }
 
 .gradio-container {
-    max-width: 100% !important;
+    max-width: 1200px !important;
     margin: 0 auto;
-    padding: 1rem;
+    padding: 1.5rem;
+}
+
+h1 {
+    font-size: 1.8rem !important;
+    margin-bottom: 1.2rem !important;
 }
 
 .message {
     color: red;
     font-weight: bold;
-    margin-bottom: var(--spacing);
+    margin: 0.5rem 0;
+    padding: 0.5rem;
+    background: #fff3f3;
+    border-radius: var(--border-radius);
 }
 
 .gallery {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
     gap: var(--spacing);
 }
 
@@ -431,23 +440,31 @@ custom_css = """
 }
 
 .tab-nav {
-    margin-bottom: 1rem;
+    margin-bottom: 1.5rem;
 }
 
 .tab-content {
-    padding: 1rem;
+    padding: 1.5rem;
     background: white;
     border-radius: var(--border-radius);
     box-shadow: var(--shadow);
+    margin-bottom: 1.5rem;
 }
 
 .input-group, .output-group {
-    margin-bottom: var(--spacing);
+    margin-bottom: 1rem;
 }
 
 button {
     border-radius: var(--border-radius) !important;
-    padding: 0.5rem 1rem !important;
+    padding: 0.6rem 1.2rem !important;
+    font-size: 0.95rem !important;
+    transition: all 0.2s ease !important;
+}
+
+button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 }
 
 button.primary {
@@ -462,89 +479,137 @@ button.danger {
 
 .webcam-container {
     width: 100%;
-    max-width: 640px;
+    max-width: 800px;
     margin: 0 auto;
     border-radius: var(--border-radius);
     overflow: hidden;
+    box-shadow: var(--shadow);
 }
 
 .result-container {
     width: 100%;
-    max-width: 640px;
-    margin: 0 auto;
+    max-width: 800px;
+    margin: 1rem auto;
+    border-radius: var(--border-radius);
+    overflow: hidden;
 }
 
-@media (max-width: 768px) {
-    .gallery {
-        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
+.instruction-panel {
+    background: var(--panel-bg);
+    padding: 1.2rem;
+    border-radius: var(--border-radius);
+    margin-bottom: 1.5rem;
+    border-left: 4px solid var(--primary-color);
+}
+
+.control-row {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    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;
+    gap: 1.5rem;
+    margin-top: 1.5rem;
+}
+
+@media (max-width: 992px) {
+    .management-section {
+        grid-template-columns: 1fr;
     }
     
     .gradio-container {
-        padding: 0.5rem;
+        padding: 1rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .gallery {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
     }
 }
 """
 
-# Capture Interface
-with gr.Blocks(title="Emotion Capture", css=custom_css) as capture_interface:
-    
-    gr.Markdown("""
-    # Emotion Capture Interface
-    <div style="margin-bottom: 1rem;">
-    1. Enter/scan your batch number (numbers only)<br>
-    2. System will automatically proceed after 5 seconds of inactivity<br>
-    3. Webcam will activate for face capture<br>
-    4. View your emotion analysis results<br>
-    5. Click "Done" to reset the interface
-    </div>
-    """)
-    
-    with gr.Row():
-        batch_no = gr.Textbox(
-            label="Batch Number", 
-            placeholder="Enter or scan numbers only",
-            interactive=True,
-            scale=3
-        )
-    
-    message = gr.Textbox(
-        label="Status", 
-        interactive=False, 
-        elem_classes="message",
-        visible=False
-    )
-    
-    with gr.Row():
-        webcam = gr.Image(
-            sources=["webcam"],
-            type="pil",
-            label="Face Capture",
-            interactive=True,
-            mirror_webcam=True,
-            visible=False,
-            elem_classes="webcam-container"
-        )
-    
-    with gr.Row():
-        result_img = gr.Image(
-            label="Analysis Result", 
-            interactive=False, 
-            visible=False,
-            elem_classes="result-container"
-        )
+# Capture Interface - Desktop Optimized
+with gr.Blocks(title="Emotion Capture", css=desktop_css) as capture_interface:
     
-    with gr.Row():
-        result_text = gr.Textbox(
-            label="Emotion Result", 
+    with gr.Column():
+        gr.Markdown("""
+        # Emotion Capture Interface
+        """)
+        
+        with gr.Column(elem_classes="instruction-panel"):
+            gr.Markdown("""
+            **Instructions:**
+            1. Enter/scan your batch number (numbers only)
+            2. System will automatically proceed after 5 seconds of inactivity
+            3. Webcam will activate for face capture
+            4. View your emotion analysis results
+            5. Click "Done" to reset the interface
+            """)
+        
+        with gr.Row(elem_classes="control-row"):
+            batch_no = gr.Textbox(
+                label="Batch Number", 
+                placeholder="Enter or scan numbers only",
+                interactive=True,
+                scale=4
+            )
+        
+        message = gr.Textbox(
+            label="Status", 
             interactive=False, 
+            elem_classes="message",
             visible=False
         )
-    
-    with gr.Row():
-        done_btn = gr.Button(
-            "Done", 
-            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(scale=1):
+                result_img = gr.Image(
+                    label="Analysis Result", 
+                    interactive=False, 
+                    visible=False,
+                    elem_classes="result-container",
+                    height=400
+                )
+        
+        with gr.Row():
+            result_text = gr.Textbox(
+                label="Emotion Result", 
+                interactive=False, 
+                visible=False,
+                container=False
+            )
+        
+        with gr.Row():
+            done_btn = gr.Button(
+                "Done", 
+                visible=False,
+                elem_classes="primary"
+            )
     
     # Detect when user stops typing (with 5 second delay)
     batch_no.change(
@@ -577,201 +642,220 @@ with gr.Blocks(title="Emotion Capture", css=custom_css) as capture_interface:
         outputs=[batch_no, message, webcam, result_img, result_text, done_btn]
     )
 
-# Data Management Interface
+# Data Management Interface - Desktop Optimized
 with gr.Blocks(title="Data Management") as data_interface:
     
-    gr.Markdown("# Data Management Interface")
-    
-    with gr.Tab("Image Management"):
-        with gr.Column():
-            gr.Markdown("## Select and Manage Images")
-            with gr.Row():
-                emotion_selector = gr.Dropdown(
-                    choices=["All Emotions"] + list(EMOTION_MAP.keys()),
-                    label="Emotion Category",
-                    value="All Emotions",
-                    scale=2
-                )
-                image_type_selector = gr.Dropdown(
-                    choices=["faces", "annotated"],
-                    label="Image Type",
-                    value="faces",
-                    scale=1
-                )
-                refresh_btn = gr.Button("Refresh Gallery", scale=1)
-            
-            current_image_paths = gr.State([])
-            
-            gallery = gr.Gallery(
-                label="Image Gallery",
-                columns=4,
-                height="auto"
-            )
-            selected_images = gr.CheckboxGroup(
-                label="Selected Images",
-                interactive=True,
-                value=[]
-            )
-            
-            with gr.Row():
-                with gr.Column(scale=1):
-                    gr.Markdown("### Download Options")
-                    with gr.Row():
-                        download_btn = gr.Button("Download Selected", variant="primary")
-                        download_all_btn = gr.Button("Download All in Category")
-                    download_structured_btn = gr.Button("Download All (Structured)", variant="primary")
-                    download_output = gr.File(label="Download Result", visible=False)
-                
-                with gr.Column(scale=1):
-                    gr.Markdown("### Delete Options")
-                    delete_btn = gr.Button("Delete Selected", variant="stop")
+    with gr.Column():
+        gr.Markdown("""
+        # Data Management Dashboard
+        """)
+        
+        with gr.Tabs():
+            with gr.Tab("Image Management", elem_classes="dashboard-panel"):
+                with gr.Column():
+                    gr.Markdown("### Image Gallery Management")
+                    
                     with gr.Row():
-                        delete_confirm = gr.Checkbox(label="I confirm I want to delete ALL images in this category", value=False, scale=3)
-                        delete_all_btn = gr.Button("Delete All in Category", variant="stop", interactive=False, scale=1)
-                    delete_output = gr.Textbox(label="Delete Status")
-            
-            def update_gallery_components(emotion, image_type):
-                image_dict = get_image_gallery(emotion, image_type)
-                gallery_items = []
-                image_paths = []
-                for emotion, images in image_dict.items():
-                    for img_path in images:
-                        gallery_items.append((img_path, f"{emotion}: {Path(img_path).name}"))
-                        image_paths.append(img_path)
-                return gallery_items, image_paths
-            
-            initial_gallery, initial_paths = update_gallery_components("All Emotions", "faces")
-            gallery.value = initial_gallery
-            current_image_paths.value = initial_paths
-            selected_images.choices = initial_paths
-            
-            def update_components(emotion, image_type):
-                gallery_items, image_paths = update_gallery_components(emotion, image_type)
-                return {
-                    gallery: gallery_items,
-                    current_image_paths: image_paths,
-                    selected_images: gr.CheckboxGroup(choices=image_paths, value=[])
-                }
-            
-            emotion_selector.change(
-                update_components,
-                inputs=[emotion_selector, image_type_selector],
-                outputs=[gallery, current_image_paths, selected_images]
-            )
-            
-            image_type_selector.change(
-                update_components,
-                inputs=[emotion_selector, image_type_selector],
-                outputs=[gallery, current_image_paths, selected_images]
-            )
-            
-            refresh_btn.click(
-                update_components,
-                inputs=[emotion_selector, image_type_selector],
-                outputs=[gallery, current_image_paths, selected_images]
-            )
-            
-            download_btn.click(
-                lambda selected: create_custom_zip(selected),
-                inputs=selected_images,
-                outputs=download_output,
-                api_name="download_selected"
-            ).then(
-                lambda x: gr.File(visible=x is not None),
-                inputs=download_output,
-                outputs=download_output
-            )
+                        emotion_selector = gr.Dropdown(
+                            choices=["All Emotions"] + list(EMOTION_MAP.keys()),
+                            label="Emotion Category",
+                            value="All Emotions",
+                            scale=3
+                        )
+                        image_type_selector = gr.Dropdown(
+                            choices=["faces", "annotated"],
+                            label="Image Type",
+                            value="faces",
+                            scale=2
+                        )
+                        refresh_btn = gr.Button("Refresh", scale=1)
+                    
+                    current_image_paths = gr.State([])
+                    
+                    gallery = gr.Gallery(
+                        label="Image Gallery",
+                        columns=5,
+                        height="auto",
+                        preview=True
+                    )
+                    
+                    selected_images = gr.CheckboxGroup(
+                        label="Selected Images",
+                        interactive=True,
+                        value=[],
+                        visible=False
+                    )
+                    
+                    with gr.Row(elem_classes="management-section"):
+                        with gr.Column():
+                            gr.Markdown("#### Download Options")
+                            with gr.Row():
+                                download_btn = gr.Button("Download Selected", variant="primary")
+                                download_all_btn = gr.Button("Download All in Category")
+                            download_structured_btn = gr.Button("Download Full Archive", variant="primary")
+                            download_output = gr.File(label="Download Result", visible=False)
+                        
+                        with gr.Column():
+                            gr.Markdown("#### Delete Options")
+                            delete_btn = gr.Button("Delete Selected", variant="stop")
+                            with gr.Row():
+                                delete_confirm = gr.Checkbox(
+                                    label="Confirm deletion of ALL images in this category", 
+                                    value=False,
+                                    scale=4
+                                )
+                                delete_all_btn = gr.Button(
+                                    "Delete All in Category", 
+                                    variant="stop", 
+                                    interactive=False,
+                                    scale=1
+                                )
+                            delete_output = gr.Textbox(label="Operation Status")
             
-            download_all_btn.click(
-                lambda emotion, img_type: create_custom_zip(
-                    [str(f) for f in (SAVE_DIR / img_type / (emotion if emotion != "All Emotions" else "*")).glob("*.jpg") if f.exists()]
-                ),
-                inputs=[emotion_selector, image_type_selector],
-                outputs=download_output,
-                api_name="download_all"
-            ).then(
-                lambda x: gr.File(visible=x is not None),
-                inputs=download_output,
-                outputs=download_output
-            )
-            
-            download_structured_btn.click(
-                download_all_emotions_structured,
-                outputs=download_output,
-                api_name="download_all_structured"
-            ).then(
-                lambda x: gr.File(visible=x is not None),
-                inputs=download_output,
-                outputs=download_output
-            )
-            
-            delete_btn.click(
-                lambda selected: {
-                    "delete_output": delete_selected_images(selected),
-                    **update_components(emotion_selector.value, image_type_selector.value)
-                },
-                inputs=selected_images,
-                outputs=[delete_output, gallery, current_image_paths, selected_images]
-            )
-            
-            delete_confirm.change(
-                lambda x: gr.Button(interactive=x),
-                inputs=delete_confirm,
-                outputs=delete_all_btn
-            )
-            
-            delete_all_btn.click(
-                lambda emotion, img_type, confirm: {
-                    "delete_output": delete_images_in_category(emotion, img_type, confirm),
-                    **update_components(emotion, img_type)
-                },
-                inputs=[emotion_selector, image_type_selector, delete_confirm],
-                outputs=[delete_output, gallery, current_image_paths, selected_images]
-            )
+            with gr.Tab("Emotion Logs", elem_classes="dashboard-panel"):
+                with gr.Column():
+                    gr.Markdown("### Emotion Analysis Logs")
+                    
+                    with gr.Row():
+                        refresh_logs_btn = gr.Button("Refresh Logs")
+                        download_logs_btn = gr.Button("Export Logs", variant="primary")
+                        clear_all_btn = gr.Button("Clear All Data", variant="stop")
+                    
+                    logs_display = gr.Markdown()
+                    logs_csv = gr.File(label="Logs Download", visible=False)
+                    clear_message = gr.Textbox(label="Operation Status")
+    
+    # Event handlers for Data Management
+    def update_gallery_components(emotion, image_type):
+        image_dict = get_image_gallery(emotion, image_type)
+        gallery_items = []
+        image_paths = []
+        for emotion, images in image_dict.items():
+            for img_path in images:
+                gallery_items.append((img_path, f"{emotion}: {Path(img_path).name}"))
+                image_paths.append(img_path)
+        return gallery_items, image_paths
+    
+    initial_gallery, initial_paths = update_gallery_components("All Emotions", "faces")
+    gallery.value = initial_gallery
+    current_image_paths.value = initial_paths
+    selected_images.choices = initial_paths
+    
+    def update_components(emotion, image_type):
+        gallery_items, image_paths = update_gallery_components(emotion, image_type)
+        return {
+            gallery: gallery_items,
+            current_image_paths: image_paths,
+            selected_images: gr.CheckboxGroup(choices=image_paths, value=[])
+        }
+    
+    emotion_selector.change(
+        update_components,
+        inputs=[emotion_selector, image_type_selector],
+        outputs=[gallery, current_image_paths, selected_images]
+    )
     
-    with gr.Tab("Emotion Logs"):
-        with gr.Column():
-            gr.Markdown("## Emotion Analysis Logs")
-            with gr.Row():
-                refresh_logs_btn = gr.Button("Refresh Logs")
-                download_logs_btn = gr.Button("Download Logs as CSV")
-                clear_all_btn = gr.Button("Clear All Data", variant="stop")
-            
-            logs_display = gr.Markdown()
-            logs_csv = gr.File(label="Logs Download", visible=False)
-            clear_message = gr.Textbox(label="Status", interactive=False)
-            
-            refresh_logs_btn.click(
-                view_logs,
-                outputs=logs_display
-            )
-            
-            download_logs_btn.click(
-                download_logs,
-                outputs=logs_csv,
-                api_name="download_logs"
-            ).then(
-                lambda x: gr.File(visible=x is not None),
-                inputs=logs_csv,
-                outputs=logs_csv
-            )
-            
-            clear_all_btn.click(
-                clear_all_data,
-                outputs=[clear_message, logs_display, logs_csv]
-            ).then(
-                lambda: update_components("All Emotions", "faces"),
-                outputs=[gallery, current_image_paths]
-            ).then(
-                lambda: gr.CheckboxGroup(choices=[], value=[]),
-                outputs=selected_images
-            )
+    image_type_selector.change(
+        update_components,
+        inputs=[emotion_selector, image_type_selector],
+        outputs=[gallery, current_image_paths, selected_images]
+    )
+    
+    refresh_btn.click(
+        update_components,
+        inputs=[emotion_selector, image_type_selector],
+        outputs=[gallery, current_image_paths, selected_images]
+    )
+    
+    download_btn.click(
+        lambda selected: create_custom_zip(selected),
+        inputs=selected_images,
+        outputs=download_output,
+        api_name="download_selected"
+    ).then(
+        lambda x: gr.File(visible=x is not None),
+        inputs=download_output,
+        outputs=download_output
+    )
+    
+    download_all_btn.click(
+        lambda emotion, img_type: create_custom_zip(
+            [str(f) for f in (SAVE_DIR / img_type / (emotion if emotion != "All Emotions" else "*")).glob("*.jpg") if f.exists()]
+        ),
+        inputs=[emotion_selector, image_type_selector],
+        outputs=download_output,
+        api_name="download_all"
+    ).then(
+        lambda x: gr.File(visible=x is not None),
+        inputs=download_output,
+        outputs=download_output
+    )
+    
+    download_structured_btn.click(
+        download_all_emotions_structured,
+        outputs=download_output,
+        api_name="download_all_structured"
+    ).then(
+        lambda x: gr.File(visible=x is not None),
+        inputs=download_output,
+        outputs=download_output
+    )
+    
+    delete_btn.click(
+        lambda selected: {
+            "delete_output": delete_selected_images(selected),
+            **update_components(emotion_selector.value, image_type_selector.value)
+        },
+        inputs=selected_images,
+        outputs=[delete_output, gallery, current_image_paths, selected_images]
+    )
+    
+    delete_confirm.change(
+        lambda x: gr.Button(interactive=x),
+        inputs=delete_confirm,
+        outputs=delete_all_btn
+    )
+    
+    delete_all_btn.click(
+        lambda emotion, img_type, confirm: {
+            "delete_output": delete_images_in_category(emotion, img_type, confirm),
+            **update_components(emotion, img_type)
+        },
+        inputs=[emotion_selector, image_type_selector, delete_confirm],
+        outputs=[delete_output, gallery, current_image_paths, selected_images]
+    )
+    
+    refresh_logs_btn.click(
+        view_logs,
+        outputs=logs_display
+    )
+    
+    download_logs_btn.click(
+        download_logs,
+        outputs=logs_csv,
+        api_name="download_logs"
+    ).then(
+        lambda x: gr.File(visible=x is not None),
+        inputs=logs_csv,
+        outputs=logs_csv
+    )
+    
+    clear_all_btn.click(
+        clear_all_data,
+        outputs=[clear_message, logs_display, logs_csv]
+    ).then(
+        lambda: update_components("All Emotions", "faces"),
+        outputs=[gallery, current_image_paths]
+    ).then(
+        lambda: gr.CheckboxGroup(choices=[], value=[]),
+        outputs=selected_images
+    )
 
 # Combine interfaces
 demo = gr.TabbedInterface(
     [capture_interface, data_interface],
     ["Emotion Capture", "Data Management"],
-    css=custom_css
+    css=desktop_css
 )
 
 if __name__ == "__main__":