feat: premium dark medical UI — navy/cyan theme

app.py

@@ -171,200 +171,292 @@ LOGO_ITU = _encode_logo(str(Path(__file__).parent / "ITULog.png"))
 # ─────────────────────────────────────────────────────────────────────────────
 
 CSS = """
-/* ── Base ── */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');
+
 :root {
-    --primary:      #1a6fa8;
-    --primary-lt:   #e8f3fb;
-    --primary-mid:  #4a9fd4;
-    --accent:       #0d9e6e;        /* Angio AI green */
-    --bg:           #f7fafd;
-    --surface:      #ffffff;
-    --border:       #cce0f0;
-    --text:         #1a2533;
-    --text-sec:     #5a7a96;
-    --danger:       #d64040;
-    --warn:         #d98b00;
-    --radius:       10px;
-    --shadow:       0 2px 12px rgba(26,111,168,0.10);
+    --navy-950:  #040d1a;
+    --navy-900:  #071224;
+    --navy-800:  #0d1e38;
+    --navy-700:  #112a50;
+    --navy-600:  #1a3a68;
+    --cyan-400:  #22d3ee;
+    --cyan-300:  #67e8f9;
+    --cyan-glow: rgba(34,211,238,0.12);
+    --green-400: #34d399;
+    --red-400:   #f87171;
+    --amber-400: #fbbf24;
+    --white:     #f0f9ff;
+    --w60:       rgba(240,249,255,0.60);
+    --w30:       rgba(240,249,255,0.30);
+    --w10:       rgba(240,249,255,0.08);
+    --border:    rgba(34,211,238,0.18);
+    --border-s:  rgba(240,249,255,0.09);
+    --shadow:    0 4px 24px rgba(0,0,0,0.40);
+    --radius:    12px;
+    --radius-s:  8px;
+    --font:      'Inter', system-ui, sans-serif;
+    --mono:      'JetBrains Mono', 'Courier New', monospace;
 }
+*, *::before, *::after { box-sizing: border-box; }
 
 body, .gradio-container {
-    background: var(--bg) !important;
-    font-family: 'Segoe UI', system-ui, sans-serif !important;
-    color: var(--text) !important;
+    background: var(--navy-950) !important;
+    font-family: var(--font) !important;
+    color: var(--white) !important;
+    min-height: 100vh;
 }
+.gradio-container { padding: 0 !important; max-width: 100% !important; }
+footer { display: none !important; }
+.gap { gap: 16px !important; }
 
-/* ── Header bar ── */
+/* ── Header ─────────────────────────────────────────────────────────── */
 #header {
-    background: var(--surface);
-    border-bottom: 2px solid var(--border);
-    padding: 14px 28px;
+    background: var(--navy-900);
+    border-bottom: 1px solid var(--border-s);
+    padding: 0 32px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    box-shadow: var(--shadow);
-    margin-bottom: 0 !important;
+    min-height: 72px;
+    position: relative;
+    overflow: hidden;
+}
+#header::after {
+    content: '';
+    position: absolute;
+    bottom: 0; left: 0; right: 0; height: 2px;
+    background: linear-gradient(90deg,
+        transparent 0%, var(--cyan-400) 15%, var(--cyan-400) 17%,
+        transparent 19%, transparent 24%,
+        var(--cyan-400) 26%, #fff 28%, var(--cyan-400) 30%,
+        transparent 32%, transparent 38%,
+        var(--cyan-400) 40%, var(--cyan-400) 42%,
+        transparent 44%, transparent 100%);
+    opacity: 0.7;
+}
+#logo-angio .name {
+    font-size: 22px; font-weight: 700;
+    color: var(--cyan-400) !important;
+    letter-spacing: 3px; text-transform: uppercase;
+    font-family: var(--mono) !important;
 }
-#logo-itu img { height: 48px; }
-#logo-angio {
-    font-size: 26px;
-    font-weight: 700;
-    color: var(--accent);
-    letter-spacing: 1px;
+#logo-angio .sub {
+    font-size: 10px; color: var(--w60) !important;
+    letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px;
 }
-#logo-angio span {
-    font-size: 13px;
-    color: var(--text-sec);
-    font-weight: 400;
-    display: block;
-    letter-spacing: 0;
+#logo-itu img { height: 44px; filter: brightness(0) invert(1) opacity(0.65); }
+.header-meta {
+    text-align: right; font-size: 11px;
+    color: var(--w60) !important; line-height: 1.7;
+    font-family: var(--mono) !important;
 }
+.header-meta b { color: var(--cyan-300) !important; font-weight: 600; }
 
-/* ── Tab bar ── */
+/* ── Tabs ─────────────────────────────────────────────────────────── */
+.tab-nav {
+    background: var(--navy-900) !important;
+    border-bottom: 1px solid var(--border-s) !important;
+    padding: 0 24px !important;
+}
 .tab-nav button {
-    color: var(--text-sec) !important;
-    border-bottom: 3px solid transparent !important;
-    font-size: 15px !important;
-    font-weight: 500 !important;
-    padding: 10px 24px !important;
-    background: transparent !important;
+    font-family: var(--font) !important; font-size: 13px !important;
+    font-weight: 500 !important; color: var(--w60) !important;
+    background: transparent !important; border: none !important;
+    border-bottom: 2px solid transparent !important;
+    padding: 14px 20px !important;
+    transition: color 0.2s, border-color 0.2s !important;
 }
+.tab-nav button:hover { color: var(--white) !important; }
 .tab-nav button.selected {
-    color: var(--primary) !important;
-    border-bottom-color: var(--primary) !important;
+    color: var(--cyan-400) !important;
+    border-bottom-color: var(--cyan-400) !important;
+    font-weight: 600 !important;
 }
 
-/* ── Cards ── */
+/* ── Cards ────────────────────────────────────────────────────────── */
 .card {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 22px;
-    box-shadow: var(--shadow);
-    margin-bottom: 16px;
+    background: var(--navy-800) !important;
+    border: 1px solid var(--border-s) !important;
+    border-radius: var(--radius) !important;
+    padding: 20px 22px !important;
+    box-shadow: var(--shadow) !important;
+    margin-bottom: 16px !important;
+    position: relative; overflow: hidden;
+}
+.card::before {
+    content: ''; position: absolute;
+    top: 0; left: 0; right: 0; height: 1px;
+    background: linear-gradient(90deg, transparent, var(--cyan-400), transparent);
+    opacity: 0.35;
 }
 .card-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--primary);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    margin-bottom: 12px;
-    padding-bottom: 8px;
-    border-bottom: 1px solid var(--primary-lt);
+    font-size: 10px !important; font-weight: 600 !important;
+    color: var(--cyan-400) !important; text-transform: uppercase !important;
+    letter-spacing: 2px !important; margin-bottom: 14px !important;
+    padding-bottom: 10px !important; border-bottom: 1px solid var(--border-s) !important;
+    font-family: var(--mono) !important;
 }
 
-/* ── Upload zone ── */
-#upload-zone {
-    border: 2px dashed var(--primary-mid) !important;
+/* ── Upload zone ──────────────────────────────────────────────────── */
+#upload-zone, #upload-zone > div {
+    border: 1px dashed var(--cyan-400) !important;
     border-radius: var(--radius) !important;
-    background: var(--primary-lt) !important;
-    min-height: 200px !important;
+    background: var(--cyan-glow) !important;
+    min-height: 160px !important;
+    transition: all 0.2s !important;
+}
+#upload-zone:hover {
+    border-color: var(--cyan-300) !important;
+    box-shadow: 0 0 20px var(--cyan-glow) !important;
 }
+#upload-zone label, #upload-zone span, #upload-zone p {
+    color: var(--w60) !important; font-size: 13px !important;
+}
+#upload-zone svg { stroke: var(--cyan-400) !important; opacity: 0.6; }
 
-/* ── Sliders ── */
-input[type=range] { accent-color: var(--primary); }
-.gradio-slider label { color: var(--text-sec) !important; font-size: 13px !important; }
+/* ── Sliders ──────────────────────────────────────────────────────── */
+input[type=range] { accent-color: var(--cyan-400) !important; }
+.gradio-slider label, .gradio-slider .label-wrap span {
+    color: var(--w60) !important; font-size: 12px !important;
+    font-family: var(--mono) !important;
+}
+.gradio-slider .info { color: var(--w30) !important; font-size: 11px !important; }
 
-/* ── Buttons ── */
+/* ── Buttons ──────────────────────────────────────────────────────── */
 #btn-analyse {
-    background: var(--primary) !important;
-    color: white !important;
-    border: none !important;
-    border-radius: var(--radius) !important;
-    font-size: 15px !important;
-    font-weight: 600 !important;
-    padding: 12px 32px !important;
-    cursor: pointer !important;
-    width: 100% !important;
-    transition: background 0.2s !important;
+    background: linear-gradient(135deg, #0ea5e9, var(--cyan-400)) !important;
+    color: var(--navy-950) !important; border: none !important;
+    border-radius: var(--radius-s) !important;
+    font-size: 12px !important; font-weight: 700 !important;
+    padding: 13px 32px !important; letter-spacing: 2px !important;
+    text-transform: uppercase !important; font-family: var(--mono) !important;
+    cursor: pointer !important; width: 100% !important;
+    box-shadow: 0 0 24px rgba(34,211,238,0.30) !important;
+    transition: all 0.2s !important;
+}
+#btn-analyse:hover {
+    box-shadow: 0 0 36px rgba(34,211,238,0.50) !important;
+    transform: translateY(-1px) !important;
 }
-#btn-analyse:hover { background: #155d90 !important; }
 #btn-reset {
-    background: transparent !important;
-    color: var(--text-sec) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: var(--radius) !important;
-    font-size: 13px !important;
-    padding: 8px 20px !important;
-    cursor: pointer !important;
-    width: 100% !important;
+    background: transparent !important; color: var(--w60) !important;
+    border: 1px solid var(--border-s) !important;
+    border-radius: var(--radius-s) !important;
+    font-size: 11px !important; font-family: var(--mono) !important;
+    letter-spacing: 1px !important; text-transform: uppercase !important;
+    padding: 10px 20px !important; cursor: pointer !important;
+    width: 100% !important; transition: all 0.2s !important;
 }
+#btn-reset:hover { border-color: var(--w30) !important; color: var(--white) !important; }
 
-/* ── Metric badges ── */
-.metric-row {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-    margin-bottom: 12px;
+button.sm.secondary, button.lg.secondary {
+    background: transparent !important; color: var(--cyan-400) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius-s) !important;
+    font-size: 11px !important; font-family: var(--mono) !important;
+    letter-spacing: 1.5px !important; text-transform: uppercase !important;
+    width: 100% !important; padding: 9px 12px !important;
+    margin-top: 8px !important; transition: all 0.2s !important;
 }
+button.sm.secondary:hover, button.lg.secondary:hover {
+    background: var(--cyan-glow) !important;
+    box-shadow: 0 0 16px var(--cyan-glow) !important;
+}
+
+/* ── Metric badges ────────────────────────────────────────────────── */
+.metric-row { display:flex !important; gap:10px !important; flex-wrap:wrap !important; margin-bottom:16px !important; }
 .metric-badge {
-    flex: 1;
-    min-width: 110px;
-    background: var(--primary-lt);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 10px 14px;
-    text-align: center;
+    flex: 1 !important; min-width: 100px !important;
+    background: var(--navy-900) !important; border: 1px solid var(--border-s) !important;
+    border-radius: var(--radius-s) !important; padding: 14px 10px !important;
+    text-align: center !important; position: relative; overflow: hidden;
+}
+.metric-badge::before {
+    content: ''; position: absolute;
+    top: 0; left: 0; right: 0; height: 1px;
+    background: var(--cyan-400); opacity: 0.3;
 }
 .metric-badge .val {
-    font-size: 22px;
-    font-weight: 700;
-    color: var(--primary);
+    font-size: 22px !important; font-weight: 700 !important;
+    color: var(--cyan-400) !important; font-family: var(--mono) !important; line-height: 1.2;
 }
-.metric-badge .val.ischemic { color: var(--danger); }
-.metric-badge .val.borderline { color: var(--warn); }
-.metric-badge .val.ok { color: var(--accent); }
+.metric-badge .val.ischemic  { color: var(--red-400) !important; text-shadow: 0 0 12px rgba(248,113,113,0.4); }
+.metric-badge .val.borderline{ color: var(--amber-400) !important; }
+.metric-badge .val.ok        { color: var(--green-400) !important; text-shadow: 0 0 12px rgba(52,211,153,0.4); }
 .metric-badge .lbl {
-    font-size: 11px;
-    color: var(--text-sec);
-    text-transform: uppercase;
-    letter-spacing: 0.4px;
+    font-size: 9px !important; color: var(--w30) !important;
+    text-transform: uppercase !important; letter-spacing: 1.5px !important;
+    margin-top: 4px !important; font-family: var(--mono) !important;
 }
 
-/* ── Result images ── */
-#result-images img {
-    border-radius: var(--radius);
-    border: 1px solid var(--border);
+/* ── Status box ───────────────────────────────────────────────────── */
+#status-box {
+    padding: 12px 18px !important; border-radius: var(--radius-s) !important;
+    font-size: 12px !important; font-weight: 500 !important;
+    border: 1px solid var(--border) !important;
+    background: var(--cyan-glow) !important;
+    color: var(--cyan-300) !important;
+    font-family: var(--mono) !important; letter-spacing: 0.5px;
 }
 
-/* ── Status ── */
-#status-box {
-    padding: 10px 16px;
-    border-radius: 8px;
-    font-size: 13px;
-    font-weight: 500;
-    border: 1px solid var(--border);
-    background: var(--primary-lt);
-    color: var(--primary);
+/* ── Images ───────────────────────────────────────────────────────── */
+.gradio-image img {
+    border-radius: var(--radius-s) !important;
+    border: 1px solid var(--border-s) !important;
 }
+.gradio-image .label-wrap { display: none !important; }
 
-/* ── Footer ── */
+/* ── Code (JSON) ──────────────────────────────────────────────────── */
+.gradio-code, .cm-editor, .cm-scroller {
+    background: var(--navy-950) !important;
+    border: 1px solid var(--border-s) !important;
+    font-family: var(--mono) !important; font-size: 12px !important;
+}
+
+/* ── Footer ───────────────────────────────────────────────────────── */
 #footer {
-    text-align: center;
-    font-size: 12px;
-    color: var(--text-sec);
-    padding: 20px;
-    border-top: 1px solid var(--border);
-    margin-top: 24px;
+    background: var(--navy-950) !important;
+    border-top: 1px solid var(--border-s) !important;
+    padding: 14px 32px !important; text-align: center !important;
+    font-size: 11px !important; color: var(--w30) !important;
+    font-family: var(--mono) !important; letter-spacing: 0.5px;
+}
+#footer b { color: var(--cyan-400) !important; }
+
+/* ── Gradio overrides ─────────────────────────────────────────────── */
+.gradio-container .prose, .gradio-container h1, .gradio-container h2,
+.gradio-container h3, .gradio-container p, .gradio-container label,
+.gradio-container span { color: var(--white) !important; }
+.gradio-container input, .gradio-container textarea, .gradio-container select {
+    background: var(--navy-800) !important;
+    border-color: var(--border-s) !important; color: var(--white) !important;
 }
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: var(--navy-950); }
+::-webkit-scrollbar-thumb { background: var(--navy-600); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--cyan-400); }
 """
 
+
 # ─────────────────────────────────────────────────────────────────────────────
 #  HEADER HTML
 # ─────────────────────────────────────────────────────────────────────────────
 
 def _header_html() -> str:
-    itu_tag = (f'<img src="{LOGO_ITU}" alt="ITU Logo" style="height:48px">'
+    itu_tag = (f'<img src="{LOGO_ITU}" alt="ITU">'
                if LOGO_ITU else
-               '<span style="font-weight:700;color:#1a6fa8;font-size:18px">ITU</span>')
+               '<span style="font-size:11px;color:rgba(240,249,255,0.4);font-family:JetBrains Mono,monospace">ITU LAHORE</span>')
     return f"""
 <div id="header">
-  <div id="logo-itu">{itu_tag}</div>
   <div id="logo-angio">
-    Angio AI
-    <span>Coronary Analysis System · ITU Lahore</span>
+    <div class="name">Angio&thinsp;AI</div>
+    <div class="sub">Coronary Angiography Analysis System</div>
   </div>
+  <div class="header-meta">
+    <b>Muhammad Adil</b> &nbsp;&middot;&nbsp; MS Data Science<br>
+    Supervisor: Dr. Arif Mehmood &nbsp;&middot;&nbsp; ITU Lahore
+  </div>
+  <div id="logo-itu">{itu_tag}</div>
 </div>"""
 
 # ─────────────────────────────────────────────────────────────────────────────
@@ -1565,31 +1657,44 @@ with gr.Blocks(css=CSS, title="Angio AI") as demo:
                 with gr.Column(scale=1):
                     gr.HTML("""
 <div class="card">
-  <div class="card-title">Pipeline overview</div>
-  <ol style="font-size:13px;color:#1a2533;line-height:1.9;padding-left:16px">
-    <li>Best frame extracted from video</li>
-    <li>Stenosis detection — Mask2Former</li>
-    <li>Coronary segmentation — 26-class anatomy labelling</li>
-    <li>Binary vessel mask — ResUNet</li>
-    <li>FFR estimation — QFR v4</li>
-    <li>SYNTAX score computation</li>
-  </ol>
-  <hr style="border-color:#cce0f0;margin:12px 0">
-  <div style="font-size:12px;color:#5a7a96">
-    <b>FFR threshold:</b> ≤ 0.80 → ischemic<br>
-    <b>Formula:</b> 1 − (0.33·DS + 0.60·DS²)<br>
-    <b>Reference:</b> Tu et al. JACC 2016
+  <div class="card-title">Analysis Pipeline</div>
+  <div style="display:flex;flex-direction:column;gap:0">
+    <div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(240,249,255,0.07)">
+      <span style="font-family:JetBrains Mono,monospace;font-size:10px;color:#22d3ee;min-width:18px">01</span>
+      <span style="font-size:12px;color:rgba(240,249,255,0.7)">Keyframe extraction</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(240,249,255,0.07)">
+      <span style="font-family:JetBrains Mono,monospace;font-size:10px;color:#22d3ee;min-width:18px">02</span>
+      <span style="font-size:12px;color:rgba(240,249,255,0.7)">Stenosis detection</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(240,249,255,0.07)">
+      <span style="font-family:JetBrains Mono,monospace;font-size:10px;color:#22d3ee;min-width:18px">03</span>
+      <span style="font-size:12px;color:rgba(240,249,255,0.7)">26-class coronary segmentation</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(240,249,255,0.07)">
+      <span style="font-family:JetBrains Mono,monospace;font-size:10px;color:#22d3ee;min-width:18px">04</span>
+      <span style="font-size:12px;color:rgba(240,249,255,0.7)">Binary vessel segmentation</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(240,249,255,0.07)">
+      <span style="font-family:JetBrains Mono,monospace;font-size:10px;color:#22d3ee;min-width:18px">05</span>
+      <span style="font-size:12px;color:rgba(240,249,255,0.7)">FFR estimation — QFR v4</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:10px;padding:8px 0">
+      <span style="font-family:JetBrains Mono,monospace;font-size:10px;color:#22d3ee;min-width:18px">06</span>
+      <span style="font-size:12px;color:rgba(240,249,255,0.7)">SYNTAX score computation</span>
+    </div>
+  </div>
+  <div style="margin-top:14px;padding-top:12px;border-top:1px solid rgba(240,249,255,0.07);font-size:11px;color:rgba(240,249,255,0.35);font-family:JetBrains Mono,monospace;line-height:1.8">
+    FFR &le; 0.80 &rarr; ischemic &nbsp;|&nbsp; 1&minus;(0.33&middot;DS+0.60&middot;DS&sup2;)<br>
+    Tu et al. JACC 2016 &middot; FAVOR II
   </div>
 </div>
 <div class="card">
-  <div class="card-title">Model checkpoints</div>
-  <div style="font-size:12px;color:#5a7a96;line-height:1.8">
-    Auto-downloaded from<br>
-    <code>MuhammadAdil63/</code><br>
-    <code>angio-ai-checkpoints</code><br><br>
-    <code>mask2former_best.pth</code><br>
-    <code>binary_best.pth</code><br>
-    <code>best.pt</code>
+  <div class="card-title">Checkpoints</div>
+  <div style="font-family:JetBrains Mono,monospace;font-size:11px;color:rgba(240,249,255,0.45);line-height:2.2">
+    <span style="color:#22d3ee">&#9658;</span> mask2former_best.pth<br>
+    <span style="color:#22d3ee">&#9658;</span> binary_best.pth<br>
+    <span style="color:#22d3ee">&#9658;</span> best.pt
   </div>
 </div>
 """)