Update app.py

app.py

@@ -610,6 +610,150 @@ html, body, .gradio-container {
   box-shadow: none !important;
 }
 
+
+
+/* FINAL UI STABILIZER
+   Keep Gradio upload/clipboard controls visible. Do not clip the image component internals. */
+.gradio-container {
+  background: #0b1220 !important;
+}
+
+.glass-card {
+  overflow: visible !important;
+}
+
+/* Upload and heatmap components should be full-width but not internally clipped. */
+#mri_upload,
+#heatmap_preview {
+  width: 100% !important;
+  max-width: 100% !important;
+  overflow: visible !important;
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+}
+
+/* Let the native Gradio controls breathe. This fixes the hidden upload/paste buttons. */
+#mri_upload > div,
+#heatmap_preview > div,
+#mri_upload .wrap,
+#heatmap_preview .wrap,
+#mri_upload .block,
+#heatmap_preview .block,
+#mri_upload .form,
+#heatmap_preview .form {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  overflow: visible !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+/* The source buttons/tabs: upload + paste/clipboard. */
+#mri_upload button,
+#mri_upload .tabs button,
+#mri_upload [role="tab"],
+#mri_upload [data-testid="tab"],
+#mri_upload .tabitem button,
+#heatmap_preview button,
+#heatmap_preview .tabs button,
+#heatmap_preview [role="tab"],
+#heatmap_preview [data-testid="tab"] {
+  min-height: 40px !important;
+  height: auto !important;
+  padding: 9px 16px !important;
+  border-radius: 14px !important;
+  background: rgba(30, 41, 59, .95) !important;
+  color: #e5e7eb !important;
+  border: 1px solid rgba(148, 163, 184, .30) !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  transform: none !important;
+  position: relative !important;
+  z-index: 20 !important;
+}
+
+/* Source-selector strip: visible, compact, and above the drop area. */
+#mri_upload .tabs,
+#mri_upload [role="tablist"],
+#mri_upload .tab-nav,
+#heatmap_preview .tabs,
+#heatmap_preview [role="tablist"],
+#heatmap_preview .tab-nav {
+  display: flex !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+  gap: 10px !important;
+  padding: 0 0 12px 0 !important;
+  margin: 0 !important;
+  background: transparent !important;
+  border: 0 !important;
+  position: relative !important;
+  z-index: 25 !important;
+}
+
+/* Main image/drop area. This is the visible card body, not a second hidden background. */
+#mri_upload .image-container,
+#mri_upload .upload-container,
+#mri_upload [data-testid="image"],
+#mri_upload .empty {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-height: 500px !important;
+  height: 500px !important;
+  overflow: hidden !important;
+  border-radius: 24px !important;
+  background: linear-gradient(180deg, #111827 0%, #060b16 100%) !important;
+  border: 1px solid rgba(148, 163, 184, .28) !important;
+  box-shadow: none !important;
+}
+
+#heatmap_preview .image-container,
+#heatmap_preview .upload-container,
+#heatmap_preview [data-testid="image"],
+#heatmap_preview .empty {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-height: 430px !important;
+  height: 430px !important;
+  overflow: hidden !important;
+  border-radius: 24px !important;
+  background: linear-gradient(180deg, #111827 0%, #060b16 100%) !important;
+  border: 1px solid rgba(148, 163, 184, .28) !important;
+  box-shadow: none !important;
+}
+
+#mri_upload img,
+#heatmap_preview img {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: contain !important;
+  border-radius: 24px !important;
+  background: #050816 !important;
+}
+
+/* Do not allow toolbars to be pushed down and hidden. */
+#mri_upload .file-preview,
+#mri_upload .file-preview-holder,
+#mri_upload .file-preview-wrapper,
+#mri_upload .thumbnail-item,
+#heatmap_preview .file-preview,
+#heatmap_preview .file-preview-holder,
+#heatmap_preview .file-preview-wrapper {
+  overflow: visible !important;
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+}
+
+/* Remove empty disclaimer rows if a blank HTML remains. */
+.disclaimer,
+.prototype-note,
+.research-note {
+  display: none !important;
+}
+
 """
 
 
@@ -621,8 +765,7 @@ HERO_HTML = f"""
 <div class="hero-card">
   <h1>LCVC DeepFuse</h1>
   <h2>Brain MRI Ensemble Classifier</h2>
-  <div class="class-chip-row">{CLASS_CHIPS_HTML}</div>
-</div>
+  <div class="class-chip-row">{CLASS_CHIPS_HTML}
 """
 
 
@@ -637,11 +780,10 @@ def _empty_prediction_card() -> str:
       <div class="pred-label">Waiting</div>
       <div class="pred-sub">Upload an MRI image, then run prediction.</div>
       <div class="metric-grid">
-        <div class="metric"><div class="k">Input size</div><div class="v">—</div></div>
-        <div class="metric"><div class="k">Model votes</div><div class="v">3</div></div>
-        <div class="metric"><div class="k">Confidence</div><div class="v confidence">—</div></div>
-      </div>
-    </div>
+        <div class="metric"><div class="k">Input size</div><div class="v">—
+        <div class="metric"><div class="k">Model votes</div><div class="v">3
+        <div class="metric"><div class="k">Confidence</div><div class="v confidence">—
+      
     """
 
 
@@ -653,13 +795,12 @@ def _prediction_card(label: str, confidence: float, image: Image.Image) -> str:
     <div class="result-card">
       <div class="pred-title">Top Prediction</div>
       <div class="pred-label">{label}</div>
-      <div class="pred-sub">Confidence: <b>{confidence_text}</b></div>
+      <div class="pred-sub">Confidence: <b>{confidence_text}
       <div class="metric-grid">
-        <div class="metric"><div class="k">Input size</div><div class="v">{width} × {height}</div></div>
-        <div class="metric"><div class="k">Model votes</div><div class="v">3</div></div>
-        <div class="metric"><div class="k">Confidence</div><div class="v confidence">{confidence_text}</div></div>
-      </div>
-    </div>
+        <div class="metric"><div class="k">Input size</div><div class="v">{width} × {height}
+        <div class="metric"><div class="k">Model votes</div><div class="v">3
+        <div class="metric"><div class="k">Confidence</div><div class="v confidence">{confidence_text}
+      
     """
 
 
@@ -683,10 +824,8 @@ def _probabilities_card(probabilities: dict[str, float] | None = None, top_class
             <div class="prob-item{top_class_name}">
               <div class="prob-head">
                 <span class="prob-label">{html.escape(display)}</span>
-                <span class="prob-percent">{percent:.2f}%</span>
-              </div>
-              <div class="prob-track"><div class="prob-fill" style="width:{percent:.4f}%"></div></div>
-            </div>
+                <span class="prob-percent">{percent:.2f}%
+              <div class="prob-track">
             """
         )
 
@@ -706,13 +845,11 @@ def _empty_details_card() -> str:
       <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>
+          <div class="member-meta">EfficientNet-B0 + MobileNetV3-Small ensemble
+        <div class="detail-pill"><div class="detail-key">Predicts</div><div class="detail-value">—
+        <div class="detail-pill"><div class="detail-key">Confidence</div><div class="detail-value">—
+        <div class="detail-pill"><div class="detail-key">Weighted vote</div><div class="detail-value accent">—
+      
     """
 
 
@@ -733,21 +870,17 @@ def _details_card(member_df) -> str:
             <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="member-meta">Ensemble weight: {weight * 100.0:.2f}%
               <div class="detail-pill">
                 <div class="detail-key">Predicts</div>
-                <div class="detail-value">{pred}</div>
-              </div>
+                <div class="detail-value">{pred}
               <div class="detail-pill">
                 <div class="detail-key">Confidence</div>
-                <div class="detail-value">{conf * 100.0:.2f}%</div>
-              </div>
+                <div class="detail-value">{conf * 100.0:.2f}%
               <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 class="vote-track">
             </div>
             """
         )
@@ -794,7 +927,7 @@ with gr.Blocks(
                     label="Upload MRI Image",
                     show_label=False,
                     type="pil",
-                    height=520,
+                    height=540,
                     sources=["upload", "clipboard"],
                     elem_id="mri_upload",
                 )
@@ -826,9 +959,5 @@ with gr.Blocks(
         inputs=[image_input, heatmap_toggle],
         outputs=[prediction_html, probabilities_html, details_html, heatmap_output],
     )
-
-    gr.HTML('<div class="footer-note">Research prototype only — not for clinical diagnosis.</div>')
-
-
 if __name__ == "__main__":
     demo.queue(max_size=16).launch()