**Simplify usage instructions UI and remove decorative styling**

Updated the instructions section to a cleaner, more concise layout and removed the elaborate gradient and icon styling. The tab label was also simplified from “🎥 Análisis de Vídeo” to “Análisis de Vídeo”.

app.py

@@ -1365,105 +1365,52 @@ with gr.Blocks(
         """)
 
     with gr.Group(visible=False) as app_group:
-        # Sección de instrucciones principales mejorada
+        # Instrucciones simples
         gr.HTML("""
-        <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 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;">Analiza:</strong> Haz clic en "Analizar" para comenzar la detección automática</li>
+                <li style="margin-bottom: 0; color: #495057;"><strong style="color: #212529;">Revisa resultados:</strong> Examina las detecciones y el análisis generado por KESHERAT AI</li>
+            </ol>
         </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, #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 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>
                 """)
                 video_input = gr.Video(
-                    label="📤 Arrastra tu vídeo aquí o haz clic para seleccionar",
-                    height=300
+                    label="Arrastra tu vídeo aquí o haz clic para seleccionar"
                 )
 
             # 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, #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 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>
                 """)
                 image_input = gr.Image(
                     type="filepath",
-                    label="📤 Arrastra tu imagen aquí o haz clic para seleccionar",
-                    height=300
+                    label="Arrastra tu imagen aquí o haz clic para seleccionar"
                 )
             # Configuración tab: classes and sensitivity controls
             with gr.TabItem("Configuración Avanzada"):
@@ -1650,37 +1597,12 @@ with gr.Blocks(
                 )
                 btn_metrics.click(fn=get_metrics, outputs=out_metrics, api_name="metrics")
 
-        # Sección principal de análisis
-        gr.HTML("""
-        <div style="background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%); padding: 30px; border-radius: 15px; margin: 30px 0; text-align: center; box-shadow: 0 6px 25px rgba(13, 110, 253, 0.2); border-top: 4px solid #495057;">
-            <h2 style="color: #ffffff !important; margin: 0 0 12px 0; font-size: 1.8rem; font-weight: 700 !important; text-shadow: 1px 1px 3px rgba(0,0,0,0.3) !important;">
-                [LISTO] ¿Listo para Analizar?
-            </h2>
-            <p style="color: #ffffff !important; margin: 0 0 20px 0; font-size: 16px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2) !important; font-weight: 600 !important;">
-                Haz clic en el botón de abajo para iniciar el análisis inteligente de tu archivo
-            </p>
-        </div>
-        """)
 
-        # 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>
-        """)
 
+        # Botón de análisis simple
         btn_detect = gr.Button(
-            "🔍 Iniciar Análisis con KESHERAT AI",
-            variant="primary",
-            size="lg",
-            scale=1
+            "Iniciar Análisis con KESHERAT AI",
+            variant="primary"
         )
 
         # Animación de carga mejorada y más amigable