Update app.py

app.py

@@ -4,46 +4,55 @@ import html
 import traceback
 
 import gradio as gr
-import pandas as pd
 from PIL import Image
 
-from src.config import CLASS_DISPLAY_NAMES, CLASS_NAMES, ENSEMBLE_MEMBERS
-from src.modeling import diagnose_checkpoints, load_ensemble, predict, weighted_ensemble_cam
+from src.config import CLASS_DISPLAY_NAMES, CLASS_NAMES
+from src.modeling import predict, weighted_ensemble_cam
 
 
 CUSTOM_CSS = """
 :root {
-  --bg-1: #eef2ff;
-  --bg-2: #f8fafc;
-  --ink: #101936;
-  --muted: #53617d;
-  --line: rgba(148,163,184,.28);
-  --card: rgba(255,255,255,.84);
-  --primary: #5b4ff5;
-  --primary-2: #6d5dfc;
-  --shadow: 0 18px 54px rgba(15, 23, 42, .13);
-  --radius-xl: 26px;
-  --radius-lg: 18px;
+  --bg-0: #050816;
+  --bg-1: #070b1d;
+  --bg-2: #0b1024;
+  --card: rgba(15, 23, 42, .82);
+  --card-2: rgba(17, 25, 48, .92);
+  --ink: #f8fafc;
+  --muted: #a9b5cc;
+  --soft: #cbd5e1;
+  --line: rgba(148, 163, 184, .22);
+  --line-strong: rgba(148, 163, 184, .34);
+  --primary: #8b5cf6;
+  --primary-2: #22d3ee;
+  --hot: #f97316;
+  --good: #38bdf8;
+  --shadow: 0 24px 70px rgba(0, 0, 0, .38);
+  --radius-xl: 28px;
+  --radius-lg: 20px;
+}
+
+html, body, .gradio-container {
+  background:
+    radial-gradient(circle at 8% 0%, rgba(139, 92, 246, .22), transparent 34%),
+    radial-gradient(circle at 92% 3%, rgba(34, 211, 238, .17), transparent 30%),
+    radial-gradient(circle at 48% 104%, rgba(59, 130, 246, .13), transparent 42%),
+    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 46%, var(--bg-2) 100%) !important;
 }
 
 .gradio-container {
   max-width: 1240px !important;
   margin: auto !important;
-  background:
-    radial-gradient(circle at 8% 3%, rgba(99,102,241,.18), transparent 30%),
-    radial-gradient(circle at 92% 0%, rgba(14,165,233,.16), transparent 28%),
-    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 56%, #f8fafc 100%) !important;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
   color: var(--ink) !important;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
 }
 
 .hero-card {
-  padding: 38px 38px 34px;
+  padding: 40px 40px 34px;
   border-radius: var(--radius-xl);
-  background: rgba(255,255,255,.88);
-  border: 1px solid rgba(219,226,238,.95);
+  background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(17,24,39,.78));
+  border: 1px solid var(--line-strong);
   box-shadow: var(--shadow);
-  backdrop-filter: blur(16px);
+  backdrop-filter: blur(18px);
   margin: 10px 0 24px;
 }
 
@@ -53,12 +62,12 @@ CUSTOM_CSS = """
   font-size: clamp(2.5rem, 5vw, 4.15rem) !important;
   line-height: 1.02 !important;
   letter-spacing: -0.055em !important;
-  font-weight: 900 !important;
+  font-weight: 930 !important;
 }
 
 .hero-card h2 {
   margin: 8px 0 0 !important;
-  color: #273250;
+  color: #dbeafe;
   font-size: clamp(1.45rem, 2.5vw, 2rem) !important;
   line-height: 1.18 !important;
   font-weight: 780 !important;
@@ -71,7 +80,7 @@ CUSTOM_CSS = """
   gap: 12px;
   margin-top: 30px;
   padding-top: 24px;
-  border-top: 1px solid rgba(148,163,184,.35);
+  border-top: 1px solid var(--line);
 }
 
 .class-chip {
@@ -81,20 +90,26 @@ CUSTOM_CSS = """
   min-height: 46px;
   padding: 0 22px;
   border-radius: 16px;
-  background: rgba(255,255,255,.72);
-  border: 1px solid rgba(148,163,184,.32);
-  color: #273250;
+  background: rgba(255,255,255,.06);
+  border: 1px solid rgba(148,163,184,.28);
+  color: #e5e7eb;
   font-size: .98rem;
   font-weight: 760;
-  box-shadow: 0 8px 22px rgba(15,23,42,.04);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.16);
+}
+
+.class-chip:first-child {
+  background: linear-gradient(135deg, var(--primary), #5b4ff5);
+  border-color: rgba(196,181,253,.58);
+  color: white;
 }
 
-.glass-card, .result-card, .prob-card {
+.glass-card, .result-card, .prob-card, .details-card {
   border-radius: var(--radius-xl) !important;
   background: var(--card) !important;
-  border: 1px solid rgba(219,226,238,.95) !important;
+  border: 1px solid var(--line-strong) !important;
   box-shadow: var(--shadow) !important;
-  backdrop-filter: blur(16px);
+  backdrop-filter: blur(18px);
 }
 
 .glass-card {
@@ -116,7 +131,7 @@ CUSTOM_CSS = """
 
 .pred-title {
   font-size: 1.02rem;
-  color: var(--ink);
+  color: #dbeafe;
   font-weight: 780;
   margin-bottom: 24px;
 }
@@ -136,7 +151,7 @@ CUSTOM_CSS = """
 }
 
 .pred-sub b {
-  color: var(--primary);
+  color: #c4b5fd;
 }
 
 .metric-grid {
@@ -149,14 +164,14 @@ CUSTOM_CSS = """
 .metric {
   min-height: 84px;
   padding: 18px 14px;
-  border-radius: 16px;
-  background: rgba(255,255,255,.72);
-  border: 1px solid rgba(148,163,184,.26);
+  border-radius: 18px;
+  background: rgba(255,255,255,.055);
+  border: 1px solid rgba(148,163,184,.22);
   text-align: center;
 }
 
 .metric .k {
-  color: #34415f;
+  color: #a8b3ca;
   font-size: .93rem;
   font-weight: 650;
 }
@@ -169,14 +184,15 @@ CUSTOM_CSS = """
 }
 
 .metric .v.confidence {
-  color: var(--primary);
+  color: #c4b5fd;
 }
 
-.prob-card {
+.prob-card, .details-card {
   padding: 30px 34px;
+  margin-bottom: 24px;
 }
 
-.prob-title {
+.prob-title, .details-title {
   margin: 0 0 22px;
   color: var(--ink);
   font-size: 1.25rem;
@@ -186,10 +202,10 @@ CUSTOM_CSS = """
 
 .prob-item {
   padding: 20px 28px 24px;
-  border-radius: 18px;
-  background: rgba(255,255,255,.74);
-  border: 1px solid rgba(148,163,184,.24);
-  margin-bottom: 22px;
+  border-radius: 20px;
+  background: rgba(255,255,255,.055);
+  border: 1px solid rgba(148,163,184,.20);
+  margin-bottom: 18px;
 }
 
 .prob-head {
@@ -200,26 +216,20 @@ CUSTOM_CSS = """
   margin-bottom: 18px;
 }
 
-.prob-label {
+.prob-label, .prob-percent {
   color: var(--ink);
   font-size: 1.08rem;
   font-weight: 820;
 }
 
-.prob-percent {
-  color: var(--ink);
-  font-size: 1.03rem;
-  font-weight: 820;
-}
-
 .prob-item.top .prob-percent {
-  color: var(--primary);
+  color: #c4b5fd;
 }
 
 .prob-track {
   height: 10px;
   border-radius: 999px;
-  background: #e8edf5;
+  background: rgba(148,163,184,.20);
   overflow: hidden;
 }
 
@@ -227,32 +237,139 @@ CUSTOM_CSS = """
   height: 100%;
   border-radius: 999px;
   background: linear-gradient(90deg, var(--primary), var(--primary-2));
+  box-shadow: 0 0 20px rgba(139,92,246,.28);
+}
+
+.details-subtitle {
+  margin: -8px 0 22px;
+  color: var(--muted);
+  font-size: .96rem;
+  line-height: 1.5;
+}
+
+.member-row {
+  display: grid;
+  grid-template-columns: 1.4fr .9fr .75fr .75fr;
+  gap: 14px;
+  align-items: stretch;
+  padding: 16px;
+  border-radius: 20px;
+  background: rgba(255,255,255,.055);
+  border: 1px solid rgba(148,163,184,.20);
+  margin-bottom: 16px;
+}
+
+.member-name {
+  color: var(--ink);
+  font-size: 1rem;
+  font-weight: 850;
+  line-height: 1.3;
+}
+
+.member-meta {
+  margin-top: 8px;
+  color: var(--muted);
+  font-size: .88rem;
+  font-weight: 650;
+}
+
+.detail-pill {
+  min-height: 72px;
+  padding: 13px 14px;
+  border-radius: 16px;
+  background: rgba(2,6,23,.38);
+  border: 1px solid rgba(148,163,184,.16);
 }
 
-#run_button button {
+.detail-key {
+  color: #96a3bb;
+  font-size: .78rem;
+  font-weight: 760;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+}
+
+.detail-value {
+  margin-top: 8px;
+  color: var(--ink);
+  font-size: 1rem;
+  font-weight: 850;
+}
+
+.detail-value.accent {
+  color: #c4b5fd;
+}
+
+.vote-track {
+  margin-top: 10px;
+  height: 8px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: rgba(148,163,184,.20);
+}
+
+.vote-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #8b5cf6, #22d3ee);
+}
+
+#run_button button, button.primary {
   border-radius: 16px !important;
-  min-height: 48px !important;
-  font-weight: 850 !important;
-  background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
+  min-height: 50px !important;
+  font-weight: 870 !important;
+  color: white !important;
+  border: 1px solid rgba(196,181,253,.45) !important;
+  background: linear-gradient(135deg, var(--primary), #5b4ff5) !important;
+  box-shadow: 0 12px 28px rgba(91,79,245,.26) !important;
 }
 
 .footer-note {
-  color: #64748b;
+  color: #94a3b8;
   font-size: .92rem;
-  margin-top: 18px;
+  margin: 6px 0 20px;
+}
+
+/* Darken Gradio's native upload/preview controls so the image and heatmap do not sit inside light boxes. */
+.gradio-container .block,
+.gradio-container .form,
+.gradio-container .panel,
+.gradio-container .wrap,
+.gradio-container .gr-box,
+.gradio-container .input-container,
+.gradio-container .output-container,
+.gradio-container .image-container,
+.gradio-container .upload-container,
+.gradio-container [data-testid="image"],
+.gradio-container .gradio-image {
+  background: rgba(2, 6, 23, .42) !important;
+  border-color: rgba(148, 163, 184, .22) !important;
+  color: var(--ink) !important;
+  border-radius: 20px !important;
 }
 
-.status-good { color: #166534; font-weight: 800; }
-.status-bad { color: #991b1b; font-weight: 800; }
+.gradio-container label,
+.gradio-container label span,
+.gradio-container .checkbox-label,
+.gradio-container .info,
+.gradio-container p,
+.gradio-container span {
+  color: var(--soft) !important;
+}
 
-.block, .form, .panel, .tabitem, .gr-box, .gradio-container .wrap {
-  border-radius: 18px !important;
+.gradio-container input,
+.gradio-container textarea,
+.gradio-container select {
+  background: rgba(2,6,23,.72) !important;
+  color: var(--ink) !important;
+  border-color: rgba(148,163,184,.24) !important;
 }
 
 @media (max-width: 900px) {
-  .hero-card { padding: 26px 20px; }
+  .hero-card { padding: 28px 20px; }
   .metric-grid { grid-template-columns: 1fr; }
-  .prob-card, .result-card { padding: 24px 20px; }
+  .member-row { grid-template-columns: 1fr; }
+  .prob-card, .result-card, .details-card { padding: 24px 20px; }
 }
 """
 
@@ -270,43 +387,6 @@ HERO_HTML = f"""
 """
 
 
-def _status_markdown() -> str:
-    ok, _df, message = diagnose_checkpoints()
-    cls = "status-good" if ok else "status-bad"
-    return f"<div class='{cls}'>{html.escape(message).replace(chr(10), '<br>')}</div>"
-
-
-def _model_table() -> pd.DataFrame:
-    _ok, df, _message = diagnose_checkpoints()
-    return df
-
-
-def _research_metrics_table() -> pd.DataFrame:
-    return pd.DataFrame(
-        [
-            {"metric": "Validation Macro-F1", "value": "0.994487"},
-            {"metric": "Test Accuracy", "value": "0.990637"},
-            {"metric": "Test Macro-F1", "value": "0.990633"},
-            {"metric": "Test Balanced Accuracy", "value": "0.990640"},
-            {"metric": "Test Macro AUC OVR", "value": "0.999339"},
-            {"metric": "Test ECE", "value": "0.008194"},
-        ]
-    )
-
-
-def _deployed_members_table() -> pd.DataFrame:
-    return pd.DataFrame(
-        [
-            {
-                "member": m["display_name"],
-                "weight": f"{m['weight']:.8f}",
-                "checkpoint": f"models/{m['checkpoint_file']}",
-            }
-            for m in ENSEMBLE_MEMBERS
-        ]
-    )
-
-
 def _pct(value: float) -> str:
     return f"{100.0 * float(value):.2f}%"
 
@@ -353,7 +433,6 @@ def _probabilities_card(probabilities: dict[str, float] | None = None, top_class
         probability = float(probabilities.get(class_name, 0.0))
         rows.append((class_name, display, probability))
 
-    # Highest probability first, but labels are always the real four class names.
     rows.sort(key=lambda item: item[2], reverse=True)
 
     items = []
@@ -380,6 +459,69 @@ def _probabilities_card(probabilities: dict[str, float] | None = None, top_class
     """
 
 
+def _empty_details_card() -> str:
+    return """
+    <div class="details-card">
+      <div class="details-title">Model Contribution Details</div>
+      <div class="details-subtitle">Run prediction to see each deployed checkpoint's prediction, confidence, ensemble weight, and weighted vote strength.</div>
+      <div class="member-row">
+        <div>
+          <div class="member-name">Waiting for image</div>
+          <div class="member-meta">EfficientNet-B0 + MobileNetV3-Small ensemble</div>
+        </div>
+        <div class="detail-pill"><div class="detail-key">Predicts</div><div class="detail-value">—</div></div>
+        <div class="detail-pill"><div class="detail-key">Confidence</div><div class="detail-value">—</div></div>
+        <div class="detail-pill"><div class="detail-key">Weighted vote</div><div class="detail-value accent">—</div></div>
+      </div>
+    </div>
+    """
+
+
+def _details_card(member_df) -> str:
+    if member_df is None or len(member_df) == 0:
+        return _empty_details_card()
+
+    rows_html = []
+    for _, row in member_df.iterrows():
+        member = html.escape(str(row.get("member", "Model")))
+        weight = float(row.get("weight", 0.0))
+        pred = html.escape(str(row.get("member prediction", "—")))
+        conf = float(row.get("member confidence", 0.0))
+        weighted_vote = max(0.0, min(1.0, weight * conf))
+
+        rows_html.append(
+            f"""
+            <div class="member-row">
+              <div>
+                <div class="member-name">{member}</div>
+                <div class="member-meta">Ensemble weight: {weight * 100.0:.2f}%</div>
+              </div>
+              <div class="detail-pill">
+                <div class="detail-key">Predicts</div>
+                <div class="detail-value">{pred}</div>
+              </div>
+              <div class="detail-pill">
+                <div class="detail-key">Confidence</div>
+                <div class="detail-value">{conf * 100.0:.2f}%</div>
+              </div>
+              <div class="detail-pill">
+                <div class="detail-key">Weighted vote</div>
+                <div class="detail-value accent">{weighted_vote * 100.0:.2f}%</div>
+                <div class="vote-track"><div class="vote-fill" style="width:{weighted_vote * 100.0:.4f}%"></div></div>
+              </div>
+            </div>
+            """
+        )
+
+    return f"""
+    <div class="details-card">
+      <div class="details-title">Model Contribution Details</div>
+      <div class="details-subtitle">Weighted vote = model confidence for its predicted class × optimized ensemble weight.</div>
+      {''.join(rows_html)}
+    </div>
+    """
+
+
 def run_prediction(image: Image.Image, make_heatmap: bool):
     if image is None:
         raise gr.Error("Upload an MRI image first.")
@@ -389,7 +531,8 @@ def run_prediction(image: Image.Image, make_heatmap: bool):
         heatmap = weighted_ensemble_cam(image, result.predicted_class) if make_heatmap else None
         prediction_html = _prediction_card(result.predicted_display, result.confidence, image)
         probabilities_html = _probabilities_card(result.probabilities, result.predicted_class)
-        return prediction_html, probabilities_html, heatmap
+        details_html = _details_card(result.member_df)
+        return prediction_html, probabilities_html, details_html, heatmap
     except FileNotFoundError as exc:
         raise gr.Error(str(exc)) from exc
     except Exception as exc:
@@ -397,20 +540,9 @@ def run_prediction(image: Image.Image, make_heatmap: bool):
         raise gr.Error(f"Prediction failed: {exc}\n\n{detail}") from exc
 
 
-def warmup_status() -> str:
-    ok, _df, message = diagnose_checkpoints()
-    if not ok:
-        return message
-    try:
-        load_ensemble()
-        return "✅ Checkpoints found and ensemble loaded successfully."
-    except Exception as exc:
-        return f"❌ Checkpoints were found, but model loading failed: {exc}"
-
-
 with gr.Blocks(
     css=CUSTOM_CSS,
-    theme=gr.themes.Soft(primary_hue="indigo", secondary_hue="sky"),
+    theme=gr.themes.Base(primary_hue="violet", secondary_hue="cyan", neutral_hue="slate"),
     title="LCVC DeepFuse",
 ) as demo:
     gr.HTML(HERO_HTML)
@@ -445,30 +577,14 @@ with gr.Blocks(
         with gr.Column(scale=7, min_width=420):
             prediction_html = gr.HTML(_empty_prediction_card())
             probabilities_html = gr.HTML(_probabilities_card())
+            details_html = gr.HTML(_empty_details_card())
 
     run_button.click(
         fn=run_prediction,
         inputs=[image_input, heatmap_toggle],
-        outputs=[prediction_html, probabilities_html, heatmap_output],
+        outputs=[prediction_html, probabilities_html, details_html, heatmap_output],
     )
 
-    with gr.Accordion("Model status and research details", open=False):
-        status_md = gr.HTML(_status_markdown())
-        status_table = gr.Dataframe(value=_model_table(), interactive=False, label="Required checkpoint files")
-        with gr.Row():
-            refresh_btn = gr.Button("Refresh status")
-            load_btn = gr.Button("Test-load ensemble")
-        load_status = gr.Textbox(label="Load result", interactive=False)
-
-        gr.Markdown("### Deployed members")
-        gr.Dataframe(value=_deployed_members_table(), interactive=False, label="Selected non-zero-weight members")
-        gr.Markdown("### Reported evaluation metrics")
-        gr.Dataframe(value=_research_metrics_table(), interactive=False, label="Research split metrics")
-
-        refresh_btn.click(fn=_status_markdown, inputs=None, outputs=status_md)
-        refresh_btn.click(fn=_model_table, inputs=None, outputs=status_table)
-        load_btn.click(fn=warmup_status, inputs=None, outputs=load_status)
-
     gr.HTML('<div class="footer-note">Research prototype only — not for clinical diagnosis.</div>')