**Subject**

Improve login UI contrast and unify media processing logic

**Body**
Add new CSS styles for the login section to enhance contrast, readability, and overall visual hierarchy.
Refactor the media handling into a single `process_media_unified` function that supports both video and image uploads, includes error handling for missing files, and shows a loading indicator.
Simplify the button click chain by removing separate `process_video` and `process_image` functions, leading to cleaner code and better user feedback.

app.py

@@ -1233,6 +1233,46 @@ with gr.Blocks(
     .toast.warning { background: #fff3cd !important; color: #856404 !important; border-color: #ffeaa7 !important; }
     .toast.info { background: #d1ecf1 !important; color: #0c5460 !important; border-color: #bee5eb !important; }
 
+    /* ===== SECCIÓN DE LOGIN - CONTRASTE MEJORADO ===== */
+    .section-container {
+        background: #ffffff !important;
+        border: 1px solid #dee2e6 !important;
+        border-radius: 12px !important;
+        padding: 25px !important;
+        margin: 20px 0 !important;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
+    }
+
+    .section-container h2 {
+        color: #212529 !important;
+        font-weight: 700 !important;
+        font-size: 1.5rem !important;
+        margin-bottom: 20px !important;
+    }
+
+    .section-container p {
+        color: #212529 !important;
+        font-weight: 500 !important;
+        font-size: 16px !important;
+        margin-bottom: 20px !important;
+        line-height: 1.5 !important;
+    }
+
+    /* Labels y texto de ayuda en inputs */
+    .gr-textbox label, .gr-file label, .gr-dropdown label {
+        color: #212529 !important;
+        font-weight: 600 !important;
+        font-size: 1rem !important;
+        margin-bottom: 8px !important;
+    }
+
+    .gr-textbox .gr-info, .gr-file .gr-info, .gr-dropdown .gr-info {
+        color: #495057 !important;
+        font-weight: 500 !important;
+        font-size: 0.9rem !important;
+        margin-top: 5px !important;
+    }
+
     /* ===== OVERRIDE FINAL ===== */
     /* Asegurar que nada sobrescriba nuestros estilos */
     [data-testid*="slider"] {
@@ -1707,41 +1747,85 @@ with gr.Blocks(
                 gr.Markdown(visible=False)
             )
 
-        # Wire up the detection events with proper output visibility and loading animation
-        def process_video():
-            return show_loading()
+        # Función unificada para manejar tanto video como imagen
+        def process_media_unified(video_file, image_file):
+            """Procesa video o imagen según cuál esté disponible"""
+            # Determinar qué tipo de archivo tenemos
+            media_path = None
+            if video_file is not None:
+                media_path = video_file
+            elif image_file is not None:
+                media_path = image_file if isinstance(image_file, str) else getattr(image_file, "name", None)
+
+            if not media_path:
+                return (
+                    gr.HTML(value="<div style='color: red; padding: 20px; text-align: center;'>ERROR: No se ha seleccionado ningún archivo para analizar</div>", visible=True),
+                    gr.Video(visible=False),
+                    gr.Image(visible=False),
+                    gr.Markdown(visible=False)
+                )
 
-        def process_image():
-            return show_loading()
+            # Mostrar loading y procesar
+            try:
+                result = infer_media_with_loading(media_path)
 
-        # Video processing chain
-        btn_detect.click(
-            fn=lambda: show_loading(),
-            outputs=loading_status
-        ).then(
-            fn=infer_media_with_loading,
-            inputs=video_input,
-            outputs=json_video,
-            api_name="infer_media"
-        ).then(
-            fn=_update_video_output,
-            inputs=json_video,
-            outputs=[loading_status, output_video, output_image, analysis_text]
-        )
+                if result and result.get("video"):
+                    # Es un video - generar análisis
+                    classes = result.get("classes", {})
+                    if classes:
+                        detections_summary = "Detecciones automáticas: " + ", ".join([f"{k}: {v}" for k, v in classes.items()])
+                    else:
+                        detections_summary = "No se detectaron defectos automáticamente"
+
+                    analysis = analyze_image_with_ai(media_path, detections_summary)
+
+                    return (
+                        gr.HTML(visible=False),  # Hide loading
+                        gr.Video(value=result["video"], visible=True),
+                        gr.Image(visible=False),
+                        gr.Markdown(value=analysis, visible=True)
+                    )
+                elif result and result.get("path"):
+                    # Es una imagen - generar análisis
+                    classes = result.get("classes", {})
+                    if classes:
+                        detections_summary = "Detecciones automáticas: " + ", ".join([f"{k}: {v}" for k, v in classes.items()])
+                    else:
+                        detections_summary = "No se detectaron defectos automáticamente"
+
+                    analysis = analyze_image_with_ai(result["path"], detections_summary)
+
+                    return (
+                        gr.HTML(visible=False),  # Hide loading
+                        gr.Video(visible=False),
+                        gr.Image(value=result["path"], visible=True),
+                        gr.Markdown(value=analysis, visible=True)
+                    )
+                else:
+                    # Error en el procesamiento
+                    return (
+                        gr.HTML(value="<div style='color: red; padding: 20px; text-align: center;'>ERROR: No se pudo procesar el archivo</div>", visible=True),
+                        gr.Video(visible=False),
+                        gr.Image(visible=False),
+                        gr.Markdown(visible=False)
+                    )
+            except Exception as e:
+                return (
+                    gr.HTML(value=f"<div style='color: red; padding: 20px; text-align: center;'>ERROR: {str(e)}</div>", visible=True),
+                    gr.Video(visible=False),
+                    gr.Image(visible=False),
+                    gr.Markdown(visible=False)
+                )
 
-        # Image processing chain
+        # Evento unificado del botón
         btn_detect.click(
-            fn=lambda: show_loading(),
+            fn=show_loading,
             outputs=loading_status
         ).then(
-            fn=infer_media_with_loading,
-            inputs=image_input,
-            outputs=json_image,
-            api_name="infer_media_1"
-        ).then(
-            fn=_update_image_output,
-            inputs=json_image,
-            outputs=[loading_status, output_video, output_image, analysis_text]
+            fn=process_media_unified,
+            inputs=[video_input, image_input],
+            outputs=[loading_status, output_video, output_image, analysis_text],
+            api_name="analyze_media"
         )
 
     # Wire the gate