feat: Upgrade Gradio UI to match Streamlit dark theme, styled metric cards, and narrative html

app.py

@@ -25,6 +25,83 @@ import gradio as gr
 import pandas as pd
 import plotly.graph_objects as go
 
+
+def format_html_cards(badas_result, reason_result):
+    if not badas_result and not reason_result:
+        return "<div style='color: #94a3b8; font-style: italic;'>Run the cached sample or upload a video to execute the pipeline.</div>"
+        
+    collision_triggered = bool((badas_result or {}).get("collision_detected"))
+    gate_color = "#22c55e" if collision_triggered else "#64748b"
+    gate_text = "Triggered" if collision_triggered else "Watching"
+    
+    incident = ((reason_result or {}).get("incident_type") or "unclear").lower()
+    incident_colors = {
+        "collision": ("#7f1d1d", "#ef4444"),
+        "near_miss": ("#7c2d12", "#f97316"),
+        "hazard": ("#713f12", "#f59e0b"),
+    }
+    inc_bg, inc_accent = incident_colors.get(incident, ("#1e293b", "#94a3b8"))
+    
+    severity = str((reason_result or {}).get("severity_label") or "unknown").lower()
+    severity_colors = {
+        "1": ("#14532d", "#22c55e"),
+        "2": ("#713f12", "#f59e0b"),
+        "3": ("#7c2d12", "#f97316"),
+        "4": ("#7f1d1d", "#ef4444"),
+        "5": ("#4c0519", "#e11d48"),
+    }
+    sev_bg, sev_accent = severity_colors.get(severity, ("#1e293b", "#94a3b8"))
+    
+    risk_score = (reason_result or {}).get("risk_score", 0)
+    
+    cards_html = f"""
+    <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; font-family: sans-serif;">
+        <div style="flex: 1; min-width: 200px; background: #0f172a; border-left: 4px solid {gate_color}; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+            <div style="color: #94a3b8; font-size: 0.875rem; text-transform: uppercase; font-weight: 600;">Collision Gate</div>
+            <div style="color: {gate_color}; font-size: 1.5rem; font-weight: 700; margin-top: 0.25rem;">{gate_text}</div>
+            <div style="color: #64748b; font-size: 0.75rem; margin-top: 0.25rem;">BADAS V-JEPA2</div>
+        </div>
+        
+        <div style="flex: 1; min-width: 200px; background: {inc_bg}; border-left: 4px solid {inc_accent}; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+            <div style="color: #94a3b8; font-size: 0.875rem; text-transform: uppercase; font-weight: 600;">Incident</div>
+            <div style="color: #f8fafc; font-size: 1.5rem; font-weight: 700; margin-top: 0.25rem; text-transform: capitalize;">{incident.replace("_", " ")}</div>
+            <div style="color: #cbd5e1; font-size: 0.75rem; margin-top: 0.25rem;">Cosmos Reason 2</div>
+        </div>
+        
+        <div style="flex: 1; min-width: 200px; background: {sev_bg}; border-left: 4px solid {sev_accent}; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+            <div style="color: #94a3b8; font-size: 0.875rem; text-transform: uppercase; font-weight: 600;">Severity</div>
+            <div style="color: #f8fafc; font-size: 1.5rem; font-weight: 700; margin-top: 0.25rem;">{severity.upper()}</div>
+            <div style="color: #cbd5e1; font-size: 0.75rem; margin-top: 0.25rem;">Scale 1-5</div>
+        </div>
+        
+        <div style="flex: 1; min-width: 200px; background: #0f172a; border-left: 4px solid #3b82f6; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+            <div style="color: #94a3b8; font-size: 0.875rem; text-transform: uppercase; font-weight: 600;">Risk Score</div>
+            <div style="color: #3b82f6; font-size: 1.5rem; font-weight: 700; margin-top: 0.25rem;">{risk_score}/10</div>
+            <div style="color: #64748b; font-size: 0.75rem; margin-top: 0.25rem;">Overall hazard rating</div>
+        </div>
+    </div>
+    """
+    return cards_html
+
+def format_reason_html(reason_result):
+    narrative = (reason_result or {}).get("narrative", "")
+    reasoning = (reason_result or {}).get("reasoning", "")
+    
+    if not narrative:
+        return "<div style='color: #94a3b8; font-style: italic;'>Run BADAS + Reason to populate the narrative panel.</div>"
+        
+    html = f"""
+    <div style="background: rgba(15,23,42,0.65); border: 1px solid rgba(51,65,85,0.8); border-radius: 0.5rem; padding: 1.25rem; margin-top: 1rem; font-family: sans-serif;">
+        <h3 style="color: #e2e8f0; margin-top: 0; margin-bottom: 0.5rem; font-size: 1.125rem;">Cosmos Reason 2 Narrative</h3>
+        <p style="color: #cbd5e1; line-height: 1.6; margin: 0;">{narrative}</p>
+        <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(51,65,85,0.5);">
+            <h4 style="color: #94a3b8; margin-top: 0; margin-bottom: 0.5rem; font-size: 0.875rem; text-transform: uppercase;">Reasoning Trace</h4>
+            <p style="color: #94a3b8; font-family: monospace; font-size: 0.875rem; line-height: 1.5; margin: 0; white-space: pre-wrap;">{reasoning}</p>
+        </div>
+    </div>
+    """
+    return html
+
 from space_backend import (
     PREDICT_MODEL_NAME,
     build_pipeline_overview,
@@ -190,7 +267,7 @@ def make_artifact_figure(artifacts):
     return figure
 
 
-def build_summary_markdown(pipeline_payload, badas_result, reason_result, predict_payload):
+def format_html_cards(badas_result, reason_result):
     overview = (pipeline_payload or {}).get("overview") or build_pipeline_overview(badas_result, reason_result)
     incident_bg, incident_accent, incident_label = badge_palette(reason_result.get("incident_type"), "incident")
     severity_bg, severity_accent, severity_label = badge_palette(reason_result.get("severity_label"), "severity")
@@ -213,7 +290,7 @@ def build_summary_markdown(pipeline_payload, badas_result, reason_result, predic
 """
 
 
-def build_reason_markdown(reason_result):
+def format_reason_html(reason_result):
     if not reason_result:
         return "Run BADAS + Reason to populate the narrative panel."
     validation = (reason_result or {}).get("validation") or {}
@@ -285,7 +362,7 @@ def build_outputs(pipeline_payload, logs, preview_video_path, predict_payload=No
     return (
         "Pipeline completed." if pipeline_payload else "No pipeline payload available.",
         logs,
-        build_summary_markdown(pipeline_payload, badas_result, reason_result, predict_payload),
+        format_html_cards(badas_result, reason_result),
         pipeline_payload,
         preview_video_path,
         artifacts.get("extracted_clip"),
@@ -300,7 +377,7 @@ def build_outputs(pipeline_payload, logs, preview_video_path, predict_payload=No
         make_reason_coverage_heatmap(reason_result),
         make_risk_gauge(reason_result),
         make_artifact_figure(artifacts),
-        build_reason_markdown(reason_result),
+        format_reason_html(reason_result),
         badas_result,
         reason_result,
         pipeline_payload,
@@ -363,7 +440,7 @@ def safe_warmup_message():
         return traceback.format_exc()
 
 
-with gr.Blocks(theme=gr.themes.Soft(), title="Cosmos Sentinel") as demo:
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue").set(body_background_fill="#0f172a", body_text_color="#f1f5f9"), title="Cosmos Sentinel") as demo:
     pipeline_state = gr.State(None)
     input_video_state = gr.State(None)
 
@@ -395,9 +472,9 @@ with gr.Blocks(theme=gr.themes.Soft(), title="Cosmos Sentinel") as demo:
     with gr.Tabs():
         with gr.Tab("Run Outputs"):
             status_markdown = gr.Markdown("Ready.")
-            summary_markdown = gr.Markdown("Run the cached sample or upload a video to execute the pipeline.")
+            summary_html = gr.HTML("<div style='color: #94a3b8; font-style: italic;'>Run the cached sample or upload a video to execute the pipeline.</div>")
             pipeline_logs = gr.Textbox(label="Pipeline logs", lines=18)
-            reason_markdown = gr.Markdown("Run BADAS + Reason to populate the narrative panel.")
+            reason_html = gr.HTML("<div style='color: #94a3b8; font-style: italic;'>Run BADAS + Reason to populate the narrative panel.</div>")
             with gr.Row():
                 extracted_clip = gr.Video(label="BADAS-focused clip")
                 conditioning_clip = gr.Video(label="Predict conditioning clip")
@@ -453,7 +530,7 @@ with gr.Blocks(theme=gr.themes.Soft(), title="Cosmos Sentinel") as demo:
         outputs=[
             status_markdown,
             pipeline_logs,
-            summary_markdown,
+            summary_html,
             pipeline_state,
             preview_video,
             extracted_clip,
@@ -468,7 +545,7 @@ with gr.Blocks(theme=gr.themes.Soft(), title="Cosmos Sentinel") as demo:
             reason_heatmap,
             risk_gauge,
             artifact_plot,
-            reason_markdown,
+            reason_html,
             badas_json,
             reason_json,
             pipeline_json,
@@ -484,7 +561,7 @@ with gr.Blocks(theme=gr.themes.Soft(), title="Cosmos Sentinel") as demo:
         outputs=[
             status_markdown,
             pipeline_logs,
-            summary_markdown,
+            summary_html,
             pipeline_state,
             preview_video,
             extracted_clip,
@@ -499,7 +576,7 @@ with gr.Blocks(theme=gr.themes.Soft(), title="Cosmos Sentinel") as demo:
             reason_heatmap,
             risk_gauge,
             artifact_plot,
-            reason_markdown,
+            reason_html,
             badas_json,
             reason_json,
             pipeline_json,