UI redesign: added Geist font, custom brand blue, embedded logo, and removed emojis

.gitignore

@@ -0,0 +1,10 @@
+venv/
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+env/
+.env
+.DS_Store
+.venv

README.md

@@ -1,6 +1,5 @@
 ---
 title: Flood Risk Detection
-emoji: 🌊
 colorFrom: blue
 colorTo: red
 sdk: gradio
@@ -11,13 +10,13 @@ license: mit
 short_description: Flood segmentation + ZoeDepth + risk scoring
 ---
 
-# 🌊 Flood Detection & Depth-Aware Risk Assessment
+# <img src="clipart1553592.png" width="36" align="top"> Flood Detection & Depth-Aware Risk Assessment
 
 An end-to-end deep learning pipeline for flood detection, explainability, depth estimation, and risk scoring from satellite/aerial imagery.
 
 ---
 
-## 🏗️ Project Structure
+## Project Structure
 
 ```
 ├── app.py                              ← Gradio UI (HF Spaces entry point)
@@ -34,7 +33,7 @@ An end-to-end deep learning pipeline for flood detection, explainability, depth
 
 ---
 
-## ⚙️ Full Pipeline
+## Full Pipeline
 
 ```
 Input Image
@@ -67,7 +66,7 @@ Input Image
 
 ---
 
-## 🚀 Deploy to Hugging Face Spaces
+## Deploy to Hugging Face Spaces
 
 ### Step 1 — Clone your Space
 ```bash
@@ -114,7 +113,7 @@ HF Spaces will automatically install `requirements.txt` and launch `app.py`.
 
 ---
 
-## 💻 Run Locally
+## Run Locally
 
 ```bash
 # Install dependencies
@@ -134,7 +133,7 @@ uvicorn app.main:app --reload --port 8000              # FastAPI → http://loca
 
 ---
 
-## 📡 API Reference
+## API Reference
 
 ### `POST /predict`
 ```bash
@@ -171,7 +170,7 @@ Response:
 
 ---
 
-## 📊 Model Performance
+## Model Performance
 
 | Model | Pixel Accuracy | IoU (Jaccard) | Dice / F1 | Precision | Recall |
 |-------|---------------|---------------|-----------|-----------|--------|
@@ -180,7 +179,7 @@ Response:
 
 ---
 
-## 🎓 Viva Questions & Answers
+## Viva Questions & Answers
 
 ### Architecture
 
@@ -301,7 +300,7 @@ The `.pkl` file stores metadata only — not the model weights. Contents: thresh
 
 ---
 
-## 📦 Dependencies
+## Dependencies
 
 | Package | Purpose |
 |---------|---------|

app.py

@@ -6,73 +6,94 @@ import gradio as gr
 import numpy as np
 from PIL import Image
 import sys, os
+import base64
+from gradio.themes.utils.colors import Color
 
 sys.path.insert(0, os.path.dirname(__file__))
 from app.model_utils import run_pipeline
 
+def get_base64_image(path):
+    try:
+        with open(path, "rb") as img_file:
+            return base64.b64encode(img_file.read()).decode('utf-8')
+    except Exception:
+        return ""
+
+logo_base64 = get_base64_image(os.path.join(os.path.dirname(__file__), "clipart1553592.png"))
+logo_src = f"data:image/png;base64,{logo_base64}"
+
 # ── Risk config ────────────────────────────────────────────────────────────────
 RISK_CFG = {
-    "Low":      {"colour": "#27ae60", "bg": "#eafaf1", "icon": "🟢", "bar": 20},
-    "Moderate": {"colour": "#f39c12", "bg": "#fef9e7", "icon": "🟡", "bar": 50},
-    "High":     {"colour": "#e67e22", "bg": "#fdf2e9", "icon": "🟠", "bar": 75},
-    "Critical": {"colour": "#e74c3c", "bg": "#fdedec", "icon": "🔴", "bar": 100},
+    "Low":      {"colour": "#27ae60", "bg": "#eafaf1", "bar": 20},
+    "Moderate": {"colour": "#f39c12", "bg": "#fef9e7", "bar": 50},
+    "High":     {"colour": "#e67e22", "bg": "#fdf2e9", "bar": 75},
+    "Critical": {"colour": "#e74c3c", "bg": "#fdedec", "bar": 100},
 }
 
 CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap');
+
 /* ── page ── */
-body, .gradio-container { background: #0f1117 !important; color: #e8eaf0 !important; }
+body, .gradio-container { 
+    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; 
+}
+.light body, .light .gradio-container { background-color: #f4f5f8 !important; }
 
 /* ── header band ── */
 #header-band {
-    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 40%, #0277bd 100%);
-    border-radius: 16px; padding: 28px 32px 20px; margin-bottom: 20px;
-    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
+    background: var(--block-background-fill);
+    border-radius: 12px; 
+    padding: 32px 36px 24px; 
+    margin-bottom: 24px;
+    box-shadow: var(--block-shadow);
+    border: 1px solid var(--border-color-primary);
 }
-#header-band h1 { color: #fff; font-size: 2em; margin: 0 0 6px; }
-#header-band p  { color: #bbdefb; margin: 0; font-size: 0.97em; }
+#header-band h1 { color: var(--body-text-color); font-size: 2.2em; margin: 0 0 8px; font-weight: 800; letter-spacing: -0.03em; }
+#header-band p  { color: var(--body-text-color-subdued); margin: 0; font-size: 1.05em; font-weight: 400; }
 
 /* ── metric pill row ── */
 .metric-pill {
-    display: inline-block; background: rgba(255,255,255,0.08);
-    border: 1px solid rgba(255,255,255,0.18); border-radius: 20px;
-    padding: 4px 14px; margin: 4px; font-size: 0.88em; color: #e3f2fd;
+    display: inline-block; background: var(--background-fill-secondary);
+    border: 1px solid var(--border-color-primary); border-radius: 8px;
+    padding: 6px 16px; margin: 6px 6px 6px 0; font-size: 0.9em; color: var(--body-text-color-subdued); font-weight: 500;
 }
-.metric-pill strong { color: #64b5f6; }
+.metric-pill strong { color: var(--body-text-color); font-weight: 700; }
 
 /* ── upload + button panel ── */
-#left-panel { background: #1a1d27; border-radius: 14px; padding: 16px; }
+#left-panel { background: var(--block-background-fill); border-radius: 12px; padding: 20px; border: 1px solid var(--border-color-primary); box-shadow: var(--block-shadow); }
 
 /* ── analyse button ── */
 #analyse-btn {
-    background: linear-gradient(90deg, #1565c0, #0277bd) !important;
-    color: #fff !important; border: none !important;
-    border-radius: 10px !important; font-size: 1.05em !important;
-    padding: 12px !important; margin-top: 10px !important;
-    box-shadow: 0 3px 12px rgba(2,119,189,0.45) !important;
-    transition: transform .15s, box-shadow .15s !important;
+    background: var(--primary-500) !important;
+    color: white !important; border: none !important;
+    border-radius: 8px !important; font-size: 1.1em !important; font-weight: 600 !important;
+    padding: 14px !important; margin-top: 12px !important;
+    box-shadow: 0 4px 14px rgba(0,0,0,0.1) !important;
+    transition: all .2s ease !important;
 }
 #analyse-btn:hover {
     transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(2,119,189,0.6) !important;
+    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
+    background: var(--primary-600) !important;
 }
 
 /* ── section labels ── */
 .section-label {
-    font-size: 0.78em; font-weight: 700; letter-spacing: .08em;
-    text-transform: uppercase; color: #64b5f6; margin: 18px 0 6px;
+    font-size: 0.85em; font-weight: 700; letter-spacing: .1em;
+    text-transform: uppercase; color: var(--body-text-color-subdued); margin: 24px 0 10px;
 }
 
 /* ── image cards ── */
-.image-card { background: #1a1d27 !important; border-radius: 12px !important;
-              border: 1px solid #2a2d3a !important; overflow: hidden; }
+.image-card { background: var(--block-background-fill) !important; border-radius: 12px !important;
+              border: 1px solid var(--border-color-primary) !important; overflow: hidden; box-shadow: var(--block-shadow) !important; }
 
 /* ── risk card ── */
-#risk-card { border-radius: 14px; overflow: hidden; }
+#risk-card { border-radius: 12px; overflow: hidden; background: var(--block-background-fill); box-shadow: var(--block-shadow); border: 1px solid var(--border-color-primary); }
 
 /* ── how-it-works table ── */
-.how-table { width:100%; border-collapse:collapse; font-size:0.9em; }
-.how-table th { background:#1565c0; color:#fff; padding:8px 12px; text-align:left; }
-.how-table td { padding:8px 12px; border-bottom:1px solid #2a2d3a; color:#cfd8dc; }
+.how-table { width:100%; border-collapse:collapse; font-size:0.95em; }
+.how-table th { background: var(--background-fill-secondary); color: var(--body-text-color); padding:14px 16px; text-align:left; border-bottom: 2px solid var(--border-color-primary); font-weight: 600; }
+.how-table td { padding:14px 16px; border-bottom:1px solid var(--border-color-primary); color: var(--body-text-color); }
 .how-table tr:last-child td { border-bottom: none; }
 """
 
@@ -80,17 +101,17 @@ body, .gradio-container { background: #0f1117 !important; color: #e8eaf0 !import
 def _score_bar(score: float, colour: str) -> str:
     """Animated CSS progress bar."""
     return f"""
-    <div style="background:#2a2d3a; border-radius:8px; height:10px; margin:8px 0 14px; overflow:hidden;">
-      <div style="width:{score}%; background:linear-gradient(90deg,{colour}99,{colour});
-                  height:100%; border-radius:8px;
+    <div style="background:var(--background-fill-secondary); border-radius:99px; height:12px; margin:12px 0 20px; overflow:hidden;">
+      <div style="width:{score}%; background:linear-gradient(90deg,{colour}bb,{colour});
+                  height:100%; border-radius:99px;
                   transition: width 1s ease;"></div>
     </div>"""
 
-def _stat_row(icon, label, value, colour) -> str:
+def _stat_row(label, value, colour) -> str:
     return f"""
     <div style="display:flex; justify-content:space-between; align-items:center;
-                padding:7px 0; border-bottom:1px solid rgba(255,255,255,0.07);">
-      <span style="color:#90a4ae;">{icon} {label}</span>
+                padding:12px 0; border-bottom:1px solid var(--border-color-primary);">
+      <span style="color:var(--body-text-color-subdued); font-weight: 500;">{label}</span>
       <span style="font-weight:700; color:{colour};">{value}</span>
     </div>"""
 
@@ -106,13 +127,13 @@ def build_risk_html(risk: dict, depth_info: dict) -> str:
     warning_html = ""
     if warning:
         warning_html = f"""
-        <div style="background:#7f1d1d; border:1px solid #ef4444; border-radius:8px;
-                    padding:10px 14px; margin-bottom:14px; font-size:0.9em; color:#fca5a5;">
+        <div style="background:var(--background-fill-secondary); border-left: 4px solid #ef4444; border-radius:8px;
+                    padding:14px 18px; margin-bottom:20px; font-size:0.95em; color:var(--body-text-color); font-weight: 500;">
           {warning}
         </div>"""
 
     recs_html = "".join(
-        f'<li style="margin:5px 0; color:#cfd8dc;">{r}</li>'
+        f'<li style="margin:8px 0; color:var(--body-text-color);">{r}</li>'
         for r in risk["recommendations"]
     )
 
@@ -120,36 +141,37 @@ def build_risk_html(risk: dict, depth_info: dict) -> str:
     metrics_html = ""
     if metrics:
         pills = "".join(
-            f'<span class="metric-pill">{k}: <strong>{v}</strong></span>'
+            f'<span class="metric-pill" style="font-size: 0.85em; padding: 4px 12px;">{k}: <strong>{v}</strong></span>'
             for k, v in metrics.items() if k != "Model"
         )
         metrics_html = f"""
-        <div style="margin-top:14px; padding-top:12px;
-                    border-top:1px solid rgba(255,255,255,0.1);">
-          <div style="font-size:0.78em; text-transform:uppercase; letter-spacing:.08em;
-                      color:#64b5f6; margin-bottom:6px;">📊 Model Performance</div>
+        <div style="margin-top:24px; padding-top:20px;
+                    border-top:1px solid var(--border-color-primary);">
+          <div style="font-size:0.8em; text-transform:uppercase; letter-spacing:.1em; font-weight: 700;
+                      color:var(--body-text-color-subdued); margin-bottom:12px;">Model Performance</div>
           {pills}
         </div>"""
 
     return f"""
-    <div id="risk-card" style="background:linear-gradient(160deg,#1a1d27 60%,{c}18);
-         border:2px solid {c}; border-radius:14px; padding:20px; font-family:sans-serif;">
+    <div id="risk-card" style="padding:32px; font-family:'Geist', -apple-system, BlinkMacSystemFont, sans-serif;">
 
       {warning_html}
 
       <!-- header -->
-      <div style="display:flex; align-items:center; gap:12px; margin-bottom:4px;">
-        <span style="font-size:2.2em;">{cfg['icon']}</span>
-        <div>
-          <div style="font-size:0.75em; text-transform:uppercase; letter-spacing:.1em;
-                      color:{c}; font-weight:700;">Risk Level</div>
-          <div style="font-size:1.9em; font-weight:800; color:{c}; line-height:1.1;">
-            {level}
+      <div style="display:flex; align-items:center; gap:20px; margin-bottom:12px;">
+        <div style="display:flex; align-items:center;">
+          <span style="display:block; width: 16px; height: 16px; border-radius: 50%; background: {c}; margin-right: 12px;"></span>
+          <div>
+            <div style="font-size:0.8em; text-transform:uppercase; letter-spacing:.12em;
+                        color:{c}; font-weight:800;">Risk Level</div>
+            <div style="font-size:2.4em; font-weight:800; color:{c}; line-height:1.2; letter-spacing:-0.02em;">
+              {level}
+            </div>
           </div>
         </div>
         <div style="margin-left:auto; text-align:right;">
-          <div style="font-size:2.4em; font-weight:900; color:{c};">{score}</div>
-          <div style="font-size:0.75em; color:#78909c;">/ 100</div>
+          <div style="font-size:3em; font-weight:900; color:var(--body-text-color); letter-spacing:-0.03em; line-height:1;">{score}</div>
+          <div style="font-size:0.9em; color:var(--body-text-color-subdued); font-weight: 600; margin-top:4px;">/ 100</div>
         </div>
       </div>
 
@@ -157,25 +179,25 @@ def build_risk_html(risk: dict, depth_info: dict) -> str:
 
       <!-- confidence row -->
       <div style="display:flex; justify-content:space-between; align-items:center;
-                  padding:5px 0 10px; border-bottom:1px solid rgba(255,255,255,0.07);">
-        <span style="color:#90a4ae; font-size:0.88em;">🎯 Model Confidence</span>
-        <span style="font-weight:700; color:{'#27ae60' if conf >= 50 else '#e74c3c'};">
+                  padding:12px 0 16px; border-bottom:1px solid var(--border-color-primary);">
+        <span style="color:var(--body-text-color-subdued); font-size:0.95em; font-weight: 500;">Model Confidence</span>
+        <span style="font-weight:700; font-size: 1.15em; color:{'#10b981' if conf >= 50 else '#ef4444'};">
           {conf}%
         </span>
       </div>
 
       <!-- stats grid -->
-      {_stat_row("🌊", "Flood Coverage",   f"{risk['flood_pct']}%",              c)}
-      {_stat_row("📏", "Avg Flood Depth",  f"{risk['avg_depth_m']} m",           c)}
-      {_stat_row("📐", "Max Flood Depth",  f"{depth_info['max_depth_m']} m",     c)}
-      {_stat_row("🔵", "Depth Category",   depth_info['depth_category'],         c)}
+      {_stat_row("Flood Coverage",   f"{risk['flood_pct']}%",              c)}
+      {_stat_row("Avg Flood Depth",  f"{risk['avg_depth_m']} m",           c)}
+      {_stat_row("Max Flood Depth",  f"{depth_info['max_depth_m']} m",     c)}
+      {_stat_row("Depth Category",   depth_info['depth_category'],         c)}
 
       <!-- recommendations -->
-      <div style="margin-top:14px; padding-top:12px;
-                  border-top:1px solid rgba(255,255,255,0.1);">
-        <div style="font-size:0.78em; text-transform:uppercase; letter-spacing:.08em;
-                    color:#64b5f6; margin-bottom:8px;">📋 Recommendations</div>
-        <ul style="margin:0; padding-left:18px; line-height:1.7;">
+      <div style="margin-top:24px; padding-top:20px;
+                  border-top:1px solid var(--border-color-primary);">
+        <div style="font-size:0.8em; text-transform:uppercase; letter-spacing:.1em; font-weight: 700;
+                    color:var(--body-text-color-subdued); margin-bottom:12px;">Recommendations</div>
+        <ul style="margin:0; padding-left:24px; line-height:1.8; font-size:0.95em; color:var(--body-text-color);">
           {recs_html}
         </ul>
       </div>
@@ -187,12 +209,12 @@ def build_risk_html(risk: dict, depth_info: dict) -> str:
 # ── inference ─────────────────────────────────────────────────────────────────
 def predict(image: Image.Image):
     if image is None:
-        placeholder = """
-        <div style="background:#1a1d27; border:2px dashed #2a2d3a; border-radius:14px;
-                    padding:40px; text-align:center; color:#546e7a; font-family:sans-serif;">
-          <div style="font-size:2.5em; margin-bottom:10px;">🌊</div>
-          <div style="font-size:1.1em;">Upload an image and click <strong>Analyse</strong></div>
-          <div style="font-size:0.85em; margin-top:6px; color:#37474f;">
+        placeholder = f"""
+        <div style="background:var(--background-fill-primary); border:2px dashed var(--border-color-primary); border-radius:12px;
+                    padding:60px 20px; text-align:center; color:var(--body-text-color-subdued); font-family:'Geist', -apple-system, BlinkMacSystemFont, sans-serif;">
+          <div style="display:flex; justify-content:center;"><img src="{logo_src}" style="width: 60px; margin-bottom:16px; opacity: 0.8;"></div>
+          <div style="font-size:1.3em; font-weight: 600; color: var(--body-text-color);">Upload an image and click <strong>Analyse</strong></div>
+          <div style="font-size:1em; margin-top:10px; color:var(--body-text-color-subdued); font-weight: 400;">
             Supports satellite, aerial, or ground-level flood images
           </div>
         </div>"""
@@ -215,12 +237,12 @@ def predict(image: Image.Image):
 
 
 # ── UI layout ─────────────────────────────────────────────────────────────────
-with gr.Blocks(title="🌊 Flood Detection AI", theme=gr.themes.Soft()) as demo:
+with gr.Blocks(title="Flood Detection AI") as demo:
 
     # ── Header ──────────────────────────────────────────────────────────────
-    gr.HTML("""
+    gr.HTML(f"""
     <div id="header-band">
-      <h1>🌊 Flood Detection &amp; Risk Assessment</h1>
+      <h1><img src="{logo_src}" style="width: 40px; vertical-align: middle; margin-right: 12px; margin-bottom: 6px;"> Flood Detection &amp; Risk Assessment</h1>
       <p>
         Attention UNet segmentation &nbsp;·&nbsp; Grad-CAM explainability
         &nbsp;·&nbsp; ZoeDepth metric depth &nbsp;·&nbsp; AI-powered risk scoring
@@ -239,7 +261,7 @@ with gr.Blocks(title="🌊 Flood Detection AI", theme=gr.themes.Soft()) as demo:
     with gr.Row(equal_height=False):
 
         with gr.Column(scale=4, elem_id="left-panel"):
-            gr.HTML('<div class="section-label">📷 Input Image</div>')
+            gr.HTML('<div class="section-label">Input Image</div>')
             input_image = gr.Image(
                 type="pil",
                 label="",
@@ -247,71 +269,71 @@ with gr.Blocks(title="🌊 Flood Detection AI", theme=gr.themes.Soft()) as demo:
                 show_label=False,
             )
             run_btn = gr.Button(
-                "🔍  Analyse Flood Risk",
+                "Analyse Flood Risk",
                 variant="primary",
                 elem_id="analyse-btn",
             )
             gr.HTML("""
-            <div style="margin-top:12px; padding:10px 14px; background:#12151f;
-                        border-radius:10px; border-left:3px solid #1565c0;">
-              <div style="font-size:0.78em; color:#64b5f6; font-weight:700;
-                          text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px;">
+            <div style="margin-top:20px; padding:20px 24px; background:var(--background-fill-secondary);
+                        border-radius:12px; border: 1px solid var(--border-color-primary); border-left:4px solid var(--primary-500);">
+              <div style="font-size:0.85em; color:var(--body-text-color); font-weight:800;
+                          text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px;">
                 Pipeline Steps
               </div>
-              <div style="font-size:0.85em; color:#90a4ae; line-height:2;">
-                1️⃣ &nbsp;Preprocess → 512×512 RGB, normalise<br>
-                2️⃣ &nbsp;Attention UNet → binary flood mask<br>
-                3️⃣ &nbsp;Grad-CAM → attention heatmap<br>
-                4️⃣ &nbsp;ZoeDepth → per-pixel depth (metres)<br>
-                5️⃣ &nbsp;Risk engine → level + score + advice
+              <div style="font-size:0.95em; color:var(--body-text-color-subdued); line-height:2.2; font-weight: 500;">
+                <span style="opacity: 0.5; margin-right: 8px;">1.</span> Preprocess → 512×512 RGB, normalise<br>
+                <span style="opacity: 0.5; margin-right: 8px;">2.</span> Attention UNet → binary flood mask<br>
+                <span style="opacity: 0.5; margin-right: 8px;">3.</span> Grad-CAM → attention heatmap<br>
+                <span style="opacity: 0.5; margin-right: 8px;">4.</span> ZoeDepth → per-pixel depth (metres)<br>
+                <span style="opacity: 0.5; margin-right: 8px;">5.</span> Risk engine → level + score + advice
               </div>
             </div>
             """)
 
         with gr.Column(scale=6):
-            gr.HTML('<div class="section-label">⚠️ Risk Assessment</div>')
+            gr.HTML('<div class="section-label">Risk Assessment</div>')
             risk_display = gr.HTML(
-                value="""
-                <div style="background:#1a1d27; border:2px dashed #2a2d3a;
-                            border-radius:14px; padding:40px; text-align:center;
-                            color:#546e7a; font-family:sans-serif;">
-                  <div style="font-size:2.5em; margin-bottom:10px;">🌊</div>
-                  <div style="font-size:1.1em;">
+                value=f"""
+                <div style="background:var(--background-fill-primary); border:2px dashed var(--border-color-primary);
+                            border-radius:12px; padding:60px 20px; text-align:center;
+                            color:var(--body-text-color-subdued); font-family:'Geist', -apple-system, BlinkMacSystemFont, sans-serif; height: 100%; display: flex; flex-direction: column; justify-content: center; min-height: 400px; box-shadow: var(--block-shadow);">
+                  <div style="display:flex; justify-content:center;"><img src="{logo_src}" style="width: 60px; margin-bottom:16px; opacity: 0.8;"></div>
+                  <div style="font-size:1.3em; font-weight: 600; color: var(--body-text-color);">
                     Upload an image and click <strong>Analyse</strong>
                   </div>
                 </div>"""
             )
 
     # ── Visual outputs ───────────────────────────────────────────────────────
-    gr.HTML('<div class="section-label">🗺️ Segmentation &amp; Explainability</div>')
+    gr.HTML('<div class="section-label">Segmentation &amp; Explainability</div>')
     with gr.Row():
         overlay_out = gr.Image(
-            label="🔵 Flood Mask Overlay",
+            label="Flood Mask Overlay",
             elem_classes=["image-card"],
         )
         mask_bw_out = gr.Image(
-            label="⬜ Binary Flood Mask (White = Flooded)",
+            label="Binary Flood Mask (White = Flooded)",
             elem_classes=["image-card"],
             image_mode="L",
         )
         gradcam_out = gr.Image(
-            label="🔥 Grad-CAM (TURBO)",
+            label="Grad-CAM (TURBO)",
             elem_classes=["image-card"],
         )
 
-    gr.HTML('<div class="section-label">📏 ZoeDepth Estimation</div>')
+    gr.HTML('<div class="section-label">ZoeDepth Estimation</div>')
     with gr.Row():
         depth_map_out = gr.Image(
-            label="🌈 Full Depth Map (PLASMA)",
+            label="Full Depth Map (PLASMA)",
             elem_classes=["image-card"],
         )
         depth_flood_out = gr.Image(
-            label="🌊 Flood-Region Depth",
+            label="Flood-Region Depth",
             elem_classes=["image-card"],
         )
 
     # ── How it works ─────────────────────────────────────────────────────────
-    with gr.Accordion("⚙️  How it works", open=False):
+    with gr.Accordion("How it works", open=False):
         gr.HTML("""
         <table class="how-table">
           <tr>
@@ -325,17 +347,17 @@ with gr.Blocks(title="🌊 Flood Detection AI", theme=gr.themes.Soft()) as demo:
           <tr>
             <td>2</td>
             <td><strong>Attention UNet</strong></td>
-            <td>Predicts binary flood mask — attention gates suppress irrelevant features</td>
+            <td>Predicts binary flood mask: attention gates suppress irrelevant features</td>
           </tr>
           <tr>
             <td>3</td>
             <td><strong>Grad-CAM</strong></td>
-            <td>Gradient-weighted class activation map at conv2d_130 — TURBO colormap with contour</td>
+            <td>Gradient-weighted class activation map at conv2d_130: TURBO colormap with contour</td>
           </tr>
           <tr>
             <td>4</td>
             <td><strong>ZoeDepth (Intel/zoedepth-nyu)</strong></td>
-            <td>Monocular metric depth estimation — outputs depth in metres per pixel</td>
+            <td>Monocular metric depth estimation: outputs depth in metres per pixel</td>
           </tr>
           <tr>
             <td>5</td>
@@ -343,13 +365,13 @@ with gr.Blocks(title="🌊 Flood Detection AI", theme=gr.themes.Soft()) as demo:
             <td>Combines flood coverage % + avg depth → Low / Moderate / High / Critical</td>
           </tr>
         </table>
-        <div style="margin-top:14px; padding:12px 16px; background:#12151f;
-                    border-radius:10px; font-size:0.88em; color:#90a4ae;">
-          <strong style="color:#64b5f6;">Risk thresholds:</strong>
-          &nbsp; 🟢 Low (&lt;15% flood, &lt;0.8m)
-          &nbsp; 🟡 Moderate (15–35%, 0.8–1.5m)
-          &nbsp; 🟠 High (35–60%, 1.5–2.2m)
-          &nbsp; 🔴 Critical (&gt;60% or &gt;2.2m)
+        <div style="margin-top:20px; padding:16px 20px; background:var(--background-fill-secondary); border: 1px solid var(--border-color-primary);
+                    border-radius:12px; font-size:0.95em; color:var(--body-text-color); font-weight: 500;">
+          <strong style="color:var(--body-text-color); margin-right: 12px;">Risk thresholds:</strong>
+          <span style="display:inline-block; width:8px; height:8px; border-radius:50%; background:#27ae60; margin-right:6px;"></span> Low (&lt;15% flood, &lt;0.8m) &nbsp;&nbsp;
+          <span style="display:inline-block; width:8px; height:8px; border-radius:50%; background:#f39c12; margin-right:6px;"></span> Moderate (15–35%, 0.8–1.5m) &nbsp;&nbsp;
+          <span style="display:inline-block; width:8px; height:8px; border-radius:50%; background:#e67e22; margin-right:6px;"></span> High (35–60%, 1.5–2.2m) &nbsp;&nbsp;
+          <span style="display:inline-block; width:8px; height:8px; border-radius:50%; background:#e74c3c; margin-right:6px;"></span> Critical (&gt;60% or &gt;2.2m)
         </div>
         """)
 
@@ -361,4 +383,22 @@ with gr.Blocks(title="🌊 Flood Detection AI", theme=gr.themes.Soft()) as demo:
     )
 
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860, css=CSS)
+    brand_blue = Color(
+        name="brand_blue",
+        c50="#f0f7fb",
+        c100="#e1f0f7",
+        c200="#c4e1ef",
+        c300="#a6d2e8",
+        c400="#89c3e0",
+        c500="#43a0d6",
+        c600="#3680ab",
+        c700="#286080",
+        c800="#1b4056",
+        c900="#0d202b",
+        c950="#071015",
+    )
+    custom_theme = gr.themes.Soft(
+        primary_hue=brand_blue,
+        neutral_hue=gr.themes.colors.slate,
+    )
+    demo.launch(server_name="0.0.0.0", server_port=7860, css=CSS, theme=custom_theme)