**Subject**

Improve access UI styling, labels, and add system info block

**Body**
Enhance the access section with richer styling, clearer labels, and a new system‑information panel. Updated the instructions group to match the new design.

app.py

@@ -1314,80 +1314,156 @@ with gr.Blocks(
     </div>
     """)
 
-    # Sección de acceso mejorada
+    # Sección de acceso mejorada y más amigable
     with gr.Group(visible=True) as gate_group:
         gr.HTML("""
-        <div class="section-container">
-            <h2 style="color: #212529; margin-bottom: 20px; font-size: 1.5rem; font-weight: 600;">
-                Acceso Seguro al Sistema
-            </h2>
-            <p style="color: #495057; margin-bottom: 20px; font-size: 16px; font-weight: 400;">
-                Introduce tu token de acceso para comenzar el análisis de inspección
-            </p>
+        <div style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 2px solid #dee2e6; border-radius: 20px; padding: 40px; margin: 30px 0; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1);">
+            <div style="background: #ffffff; border-radius: 15px; padding: 30px; margin-bottom: 25px; box-shadow: 0 4px 20px rgba(0,0,0,0.05);">
+                <h2 style="color: #0d6efd; margin-bottom: 15px; font-size: 1.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px;">
+                    <span style="background: #0d6efd; color: white; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px;">🔐</span>
+                    Acceso Seguro al Sistema
+                </h2>
+                <p style="color: #495057; margin-bottom: 0; font-size: 16px; font-weight: 500; line-height: 1.6;">
+                    Bienvenido a KESHERAT AI. Para comenzar el análisis inteligente de turbinas eólicas,
+                    introduce tu token de acceso autorizado.
+                </p>
+            </div>
         </div>
         """)
 
         with gr.Row():
-            with gr.Column(scale=2):
+            with gr.Column(scale=3):
                 gate_token = gr.Textbox(
-                    label="Token de Acceso",
+                    label="🔑 Token de Acceso",
                     type="password",
                     placeholder="Introduce tu token de seguridad aquí...",
-                    info="Contacta al administrador si no tienes un token de acceso"  # texto alto contraste (forzado por CSS)
+                    info="💡 ¿No tienes token? Contacta al administrador del sistema para obtener acceso",
+                    container=True,
+                    show_label=True
                 )
             with gr.Column(scale=1):
-                btn_enter = gr.Button("Acceder al Sistema", variant="primary")
+                btn_enter = gr.Button(
+                    "🚀 Acceder al Sistema",
+                    variant="primary",
+                    size="lg"
+                )
 
         gate_status = gr.Markdown(visible=False)
 
+        # Información adicional amigable
+        gr.HTML("""
+        <div style="background: #e3f2fd; border: 1px solid #bbdefb; border-radius: 12px; padding: 20px; margin: 20px 0; text-align: center;">
+            <h4 style="color: #1565c0; margin-bottom: 10px; font-size: 1rem; font-weight: 600;">
+                ℹ️ Información del Sistema
+            </h4>
+            <p style="color: #1976d2; margin-bottom: 0; font-size: 14px; line-height: 1.5;">
+                KESHERAT AI utiliza tecnología avanzada de inteligencia artificial para detectar automáticamente
+                defectos en palas de turbinas eólicas. El sistema es seguro y todos los análisis se procesan
+                de forma confidencial.
+            </p>
+        </div>
+        """)
+
     with gr.Group(visible=False) as app_group:
-        # Sección de instrucciones principales
+        # Sección de instrucciones principales mejorada
         gr.HTML("""
-        <div style="background: #ffffff; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px; margin: 15px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
-            <h3 style="margin-top: 0; color: #212529; font-weight: 600; font-size: 18px;">Instrucciones de Uso</h3>
-            <ol style="margin-bottom: 0; padding-left: 20px; color: #495057; font-weight: 400; line-height: 1.6;">
-                <li style="margin-bottom: 8px; color: #495057;"><strong style="color: #212529;">Selecciona el tipo de archivo:</strong> Elige entre las pestañas "Vídeo" o "Imagen" según tu contenido</li>
-                <li style="margin-bottom: 8px; color: #495057;"><strong style="color: #212529;">Sube tu archivo:</strong> Arrastra y suelta o haz clic para seleccionar tu archivo de inspección</li>
-                <li style="margin-bottom: 8px; color: #495057;"><strong style="color: #212529;">Ajusta la sensibilidad:</strong> Ve a "Configuración" para personalizar los umbrales de detección</li>
-                <li style="margin-bottom: 8px; color: #495057;"><strong style="color: #212529;">Analiza:</strong> Haz clic en "Analizar con KESHERAT AI" y espera los resultados</li>
-                <li style="margin-bottom: 0; color: #495057;"><strong style="color: #212529;">Revisa resultados:</strong> Usa la tabla de colores para interpretar las detecciones</li>
-            </ol>
+        <div style="background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 2px solid #e9ecef; border-radius: 16px; padding: 30px; margin: 20px 0; box-shadow: 0 6px 24px rgba(0,0,0,0.08);">
+            <h3 style="margin-top: 0; color: #0d6efd; font-weight: 700; font-size: 20px; display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
+                <span style="background: #0d6efd; color: white; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px;">📋</span>
+                Guía Rápida de Uso
+            </h3>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
+                <div style="background: #e3f2fd; border-radius: 12px; padding: 20px; border-left: 4px solid #2196f3;">
+                    <h4 style="color: #1565c0; margin: 0 0 10px 0; font-weight: 600; display: flex; align-items: center; gap: 8px;">
+                        <span style="font-size: 18px;">1️⃣</span> Selecciona Tipo
+                    </h4>
+                    <p style="color: #1976d2; margin: 0; font-size: 14px; line-height: 1.4;">
+                        Elige entre las pestañas "Vídeo" o "Imagen" según tu archivo de inspección
+                    </p>
+                </div>
+                <div style="background: #e8f5e8; border-radius: 12px; padding: 20px; border-left: 4px solid #4caf50;">
+                    <h4 style="color: #2e7d32; margin: 0 0 10px 0; font-weight: 600; display: flex; align-items: center; gap: 8px;">
+                        <span style="font-size: 18px;">2️⃣</span> Sube Archivo
+                    </h4>
+                    <p style="color: #388e3c; margin: 0; font-size: 14px; line-height: 1.4;">
+                        Arrastra y suelta o haz clic para seleccionar tu archivo de turbina eólica
+                    </p>
+                </div>
+                <div style="background: #fff3e0; border-radius: 12px; padding: 20px; border-left: 4px solid #ff9800;">
+                    <h4 style="color: #ef6c00; margin: 0 0 10px 0; font-weight: 600; display: flex; align-items: center; gap: 8px;">
+                        <span style="font-size: 18px;">3️⃣</span> Analizar
+                    </h4>
+                    <p style="color: #f57c00; margin: 0; font-size: 14px; line-height: 1.4;">
+                        Haz clic en "Analizar" para iniciar la detección automática con IA
+                    </p>
+                </div>
+                <div style="background: #f3e5f5; border-radius: 12px; padding: 20px; border-left: 4px solid #9c27b0;">
+                    <h4 style="color: #7b1fa2; margin: 0 0 10px 0; font-weight: 600; display: flex; align-items: center; gap: 8px;">
+                        <span style="font-size: 18px;">4️⃣</span> Revisar
+                    </h4>
+                    <p style="color: #8e24aa; margin: 0; font-size: 14px; line-height: 1.4;">
+                        Examina las detecciones y el análisis profesional generado
+                    </p>
+                </div>
+            </div>
         </div>
         """)
 
         # Input section: tabs for different media types
         with gr.Tabs() as media_tabs:
             # Video tab: only video input
-            with gr.TabItem("Análisis de Vídeo"):
+            with gr.TabItem("🎥 Análisis de Vídeo"):
                 gr.HTML("""
-                <div style="background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%); padding: 25px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2); border-left: 4px solid #ffffff;">
-                    <h4 style="margin-top: 0; color: #ffffff !important; font-weight: 700 !important; font-size: 18px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3) !important;">
-                        [VIDEO] Análisis de Vídeo de Inspección
-                    </h4>
-                    <p style="color: #ffffff !important; margin-bottom: 0; font-weight: 600 !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.2) !important;">
-                        Formatos soportados: MP4, MOV, AVI, MKV | Tamaño máximo recomendado: 500MB
-                    </p>
+                <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 30px; border-radius: 16px; margin-bottom: 25px; box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3); border: 2px solid rgba(255,255,255,0.2);">
+                    <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
+                        <span style="background: rgba(255,255,255,0.2); color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; backdrop-filter: blur(10px);">🎬</span>
+                        <div>
+                            <h4 style="margin: 0; color: #ffffff !important; font-weight: 700 !important; font-size: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;">
+                                Análisis de Vídeo de Inspección
+                            </h4>
+                            <p style="color: rgba(255,255,255,0.9) !important; margin: 5px 0 0 0; font-weight: 500 !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.2) !important;">
+                                Detección automática frame por frame con IA avanzada
+                            </p>
+                        </div>
+                    </div>
+                    <div style="background: rgba(255,255,255,0.1); border-radius: 10px; padding: 15px; backdrop-filter: blur(5px);">
+                        <p style="color: #ffffff !important; margin: 0; font-weight: 600 !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.2) !important; font-size: 14px;">
+                            📁 <strong>Formatos:</strong> MP4, MOV, AVI, MKV &nbsp;|&nbsp; 📏 <strong>Tamaño máximo:</strong> 500MB &nbsp;|&nbsp; ⏱️ <strong>Duración:</strong> hasta 10 minutos
+                        </p>
+                    </div>
                 </div>
                 """)
                 video_input = gr.Video(
-                    label="Arrastra tu vídeo aquí o haz clic para seleccionar"
+                    label="📤 Arrastra tu vídeo aquí o haz clic para seleccionar",
+                    height=300
                 )
 
             # Imagen tab: only image input
-            with gr.TabItem("Análisis de Imagen"):
+            with gr.TabItem("📸 Análisis de Imagen"):
                 gr.HTML("""
-                <div style="background: linear-gradient(135deg, #3da5ff 0%, #1c7ed6 100%); padding: 25px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(61, 165, 255, 0.25); border-left: 4px solid #ffffff;">
-                    <h4 style="margin-top: 0; color: #ffffff !important; font-weight: 700 !important; font-size: 18px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3) !important;">
-                        [IMAGEN] Análisis de Imagen de Inspección
-                    </h4>
-                    <p style="color: #ffffff !important; margin-bottom: 0; font-weight: 600 !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.2) !important;">
-                        Formatos soportados: JPG, PNG, BMP | Resolución recomendada: mínimo 1024x768px
-                    </p>
+                <div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); padding: 30px; border-radius: 16px; margin-bottom: 25px; box-shadow: 0 8px 32px rgba(240, 147, 251, 0.3); border: 2px solid rgba(255,255,255,0.2);">
+                    <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
+                        <span style="background: rgba(255,255,255,0.2); color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; backdrop-filter: blur(10px);">📷</span>
+                        <div>
+                            <h4 style="margin: 0; color: #ffffff !important; font-weight: 700 !important; font-size: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;">
+                                Análisis de Imagen de Inspección
+                            </h4>
+                            <p style="color: rgba(255,255,255,0.9) !important; margin: 5px 0 0 0; font-weight: 500 !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.2) !important;">
+                                Detección precisa de defectos en alta resolución
+                            </p>
+                        </div>
+                    </div>
+                    <div style="background: rgba(255,255,255,0.1); border-radius: 10px; padding: 15px; backdrop-filter: blur(5px);">
+                        <p style="color: #ffffff !important; margin: 0; font-weight: 600 !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.2) !important; font-size: 14px;">
+                            📁 <strong>Formatos:</strong> JPG, PNG, BMP, WEBP &nbsp;|&nbsp; 📏 <strong>Resolución:</strong> mínimo 1024x768px &nbsp;|&nbsp; 💾 <strong>Tamaño:</strong> hasta 50MB
+                        </p>
+                    </div>
                 </div>
                 """)
                 image_input = gr.Image(
                     type="filepath",
-                    label="Arrastra tu imagen aquí o haz clic para seleccionar"
+                    label="📤 Arrastra tu imagen aquí o haz clic para seleccionar",
+                    height=300
                 )
             # Configuración tab: classes and sensitivity controls
             with gr.TabItem("Configuración Avanzada"):
@@ -1586,13 +1662,28 @@ with gr.Blocks(
         </div>
         """)
 
-        # Detection button (always visible after token)
+        # Botón de análisis mejorado y más prominente
+        gr.HTML("""
+        <div style="text-align: center; margin: 30px 0 20px 0;">
+            <div style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%); border-radius: 16px; padding: 20px; box-shadow: 0 8px 32px rgba(40, 167, 69, 0.3); border: 2px solid rgba(255,255,255,0.2);">
+                <h3 style="color: white; margin: 0 0 10px 0; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">
+                    🚀 ¿Listo para el Análisis?
+                </h3>
+                <p style="color: rgba(255,255,255,0.9); margin: 0; font-weight: 500; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">
+                    Haz clic en el botón para iniciar la detección automática con IA
+                </p>
+            </div>
+        </div>
+        """)
+
         btn_detect = gr.Button(
-            "Iniciar Análisis con KESHERAT AI",
-            variant="primary"
+            "🔍 Iniciar Análisis con KESHERAT AI",
+            variant="primary",
+            size="lg",
+            scale=1
         )
 
-        # Loading animation
+        # Animación de carga mejorada y más amigable
         loading_status = gr.HTML(visible=False)
 
         # Paleta de colores siempre visible para referencia rápida
@@ -1706,46 +1797,7 @@ with gr.Blocks(
         json_video = gr.JSON(visible=False)
         json_image = gr.JSON(visible=False)
 
-        # Functions to show/hide outputs based on active tab and update content
-        def _update_video_output(json_result):
-            if json_result and json_result.get("video"):
-                return (
-                    gr.HTML(visible=False),  # Hide loading
-                    gr.Video(value=json_result["video"], visible=True),
-                    gr.Image(visible=False),
-                    gr.Markdown(visible=False)
-                )
-            return (
-                gr.HTML(visible=False),  # Hide loading
-                gr.Video(visible=False),
-                gr.Image(visible=False),
-                gr.Markdown(visible=False)
-            )
-
-        def _update_image_output(json_result):
-            if json_result and json_result.get("path"):
-                # Generar resumen de detecciones para el análisis de KESHERAT AI
-                classes = json_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"
-
-                # Obtener análisis de KESHERAT AI
-                analysis = analyze_image_with_ai(json_result["path"], detections_summary)
-
-                return (
-                    gr.HTML(visible=False),  # Hide loading
-                    gr.Video(visible=False),
-                    gr.Image(value=json_result["path"], visible=True),
-                    gr.Markdown(value=analysis, visible=True)
-                )
-            return (
-                gr.HTML(visible=False),  # Hide loading
-                gr.Video(visible=False),
-                gr.Image(visible=False),
-                gr.Markdown(visible=False)
-            )
+        # Funciones auxiliares eliminadas - ahora usamos process_media_unified
 
         # Función unificada para manejar tanto video como imagen
         def process_media_unified(video_file, image_file):
@@ -1832,6 +1884,48 @@ with gr.Blocks(
     btn_enter.click(fn=_check_token, inputs=[gate_token], outputs=[gate_group, app_group, gate_status])
 
 # Habilitar cola para ZeroGPU
+    # Footer informativo y amigable
+    gr.HTML("""
+    <div style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-top: 3px solid #dee2e6; padding: 30px; margin-top: 40px; text-align: center; border-radius: 0 0 20px 20px;">
+        <div style="max-width: 800px; margin: 0 auto;">
+            <h4 style="color: #495057; margin-bottom: 20px; font-weight: 700; font-size: 18px;">
+                💡 Consejos para Mejores Resultados
+            </h4>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 25px;">
+                <div style="background: #ffffff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                    <div style="font-size: 24px; margin-bottom: 10px;">📸</div>
+                    <h5 style="color: #212529; margin-bottom: 8px; font-weight: 600;">Calidad de Imagen</h5>
+                    <p style="color: #6c757d; margin: 0; font-size: 13px; line-height: 1.4;">
+                        Usa imágenes nítidas y bien iluminadas para mejores detecciones
+                    </p>
+                </div>
+                <div style="background: #ffffff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                    <div style="font-size: 24px; margin-bottom: 10px;">🎯</div>
+                    <h5 style="color: #212529; margin-bottom: 8px; font-weight: 600;">Enfoque Cercano</h5>
+                    <p style="color: #6c757d; margin: 0; font-size: 13px; line-height: 1.4;">
+                        Acércate a las áreas de interés para análisis más precisos
+                    </p>
+                </div>
+                <div style="background: #ffffff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                    <div style="font-size: 24px; margin-bottom: 10px;">⚙️</div>
+                    <h5 style="color: #212529; margin-bottom: 8px; font-weight: 600;">Configuración</h5>
+                    <p style="color: #6c757d; margin: 0; font-size: 13px; line-height: 1.4;">
+                        Ajusta la sensibilidad según tus necesidades específicas
+                    </p>
+                </div>
+            </div>
+            <div style="border-top: 1px solid #dee2e6; padding-top: 20px;">
+                <p style="color: #6c757d; margin: 0; font-size: 14px; font-weight: 500;">
+                    🚀 <strong>KESHERAT AI</strong> - Sistema Inteligente de Inspección para Turbinas Eólicas
+                </p>
+                <p style="color: #adb5bd; margin: 5px 0 0 0; font-size: 12px;">
+                    Tecnología avanzada de IA para detección automática de defectos
+                </p>
+            </div>
+        </div>
+    </div>
+    """)
+
 demo.queue()
 
 if __name__ == "__main__":