Enhance Gradio UI: update title, theme, and add custom header with CSS

app.py

@@ -711,9 +711,14 @@ def generar_analisis_fuerte(media_path):
 # ────────────────────────────
 # Interfaz Gradio (extendida)
 # ────────────────────────────
-with gr.Blocks(title="Kesherat · Inspección de palas eólicas") as demo:
-    gr.Markdown("## Inspección de palas eólicas con YOLOv8\n"
-                "Sube un vídeo _o_ una imagen, y el modelo anotará los defectos en la pala.")
+with gr.Blocks(
+    title="Kesherat · AI Blade Inspection",
+    theme=gr.themes.Soft(),
+) as demo:
+    gr.HTML("""
+    <link rel=\"stylesheet\" href=\"/file=assets/kesheret.css\" />
+    <div class=\"kesheret-header\"><h1>🔍 AI Blade Inspection</h1><p>Detección de defectos en palas eólicas con YOLOv8</p></div>
+    """)
 
     with gr.Row():
         media_tabs = gr.Tabs()

assets/kesheret.css

@@ -0,0 +1,69 @@
+/* Kesheret design system CSS */
+:root {
+  --kesheret-blue: #0046B8;
+  --dark-blue: #031F33;
+  --medium-blue: #004D85;
+  --light-gray: #D5DDE6;
+  --success-green: #00FC96;
+  --white: #FFFFFF;
+  --light-bg: #F8F9FA;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+.gradio-container {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+  background: linear-gradient(135deg, var(--light-bg) 0%, #E9ECEF 100%) !important;
+  min-height: 100vh;
+}
+
+.kesheret-header {
+  background: linear-gradient(135deg, var(--kesheret-blue) 0%, var(--medium-blue) 100%);
+  color: var(--white);
+  padding: 2rem 1.5rem;
+  border-radius: 0 0 15px 15px;
+  margin-bottom: 2rem;
+  box-shadow: 0 4px 20px rgba(0, 70, 184, 0.15);
+}
+.kesheret-header h1 {
+  font-size: 2.2rem; font-weight: 700; margin: 0; text-align: center;
+  text-shadow: 0 2px 4px rgba(0,0,0,.1);
+}
+.kesheret-header p { font-size: 1rem; margin: .5rem 0 0; text-align: center; opacity: .9; }
+
+/* Cards/containers */
+.gradio-row, .gradio-column { background: var(--white) !important; border-radius: 12px !important; box-shadow: 0 4px 16px rgba(0,0,0,.08) !important; border: 1px solid rgba(213,221,230,.3) !important; margin: 1rem 0 !important; padding: 1.5rem !important; }
+
+/* Tabs */
+.gradio-tabs { background: var(--white) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 2px 12px rgba(0,0,0,.06) !important; }
+.gradio-tabitem { background: var(--white) !important; border: none !important; padding: 1.5rem !important; }
+
+/* Buttons */
+.gradio-button { background: linear-gradient(135deg, var(--kesheret-blue) 0%, var(--medium-blue) 100%) !important; border: none !important; border-radius: 8px !important; color: var(--white) !important; font-weight: 500 !important; padding: .75rem 2rem !important; transition: all .3s ease !important; box-shadow: 0 2px 8px rgba(0,70,184,.2) !important; }
+.gradio-button:hover { background: #0056D6 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 16px rgba(0,70,184,.3) !important; }
+
+/* File input */
+.gradio-file { border: 2px dashed var(--medium-blue) !important; border-radius: 12px !important; background: var(--light-bg) !important; padding: 2rem !important; text-align: center !important; }
+.gradio-file:hover { border-color: var(--kesheret-blue) !important; background: rgba(0,70,184,.02) !important; }
+
+/* Media outputs */
+.gradio-video, .gradio-image { border-radius: 8px !important; overflow: hidden !important; box-shadow: 0 4px 12px rgba(0,0,0,.1) !important; border: 1px solid var(--light-gray) !important; }
+
+/* Textbox */
+.gradio-textbox { border: 1px solid var(--light-gray) !important; border-radius: 8px !important; background: var(--white) !important; padding: 1rem !important; }
+
+/* Labels */
+.gradio-label { color: var(--dark-blue) !important; font-weight: 600 !important; font-size: .95rem !important; margin-bottom: .5rem !important; }
+
+/* Progress */
+.gradio-progress { background: var(--light-gray) !important; border-radius: 4px !important; }
+.gradio-progress-bar { background: linear-gradient(90deg, var(--kesheret-blue) 0%, var(--success-green) 100%) !important; border-radius: 4px !important; }
+
+/* General transitions */
+* { transition: all .2s ease !important; }
+
+@media (max-width: 768px) {
+  .kesheret-header h1 { font-size: 2rem; }
+  .gradio-row, .gradio-column { margin: .5rem 0 !important; padding: 1rem !important; }
+}
+