Update app.py

app.py

@@ -365,6 +365,150 @@ html, body, .gradio-container {
   border-color: rgba(148,163,184,.24) !important;
 }
 
+
+
+/* Fix heatmap checkbox: the dark theme was hiding the checked mark. */
+#heatmap_checkbox {
+  margin-top: 18px !important;
+}
+
+#heatmap_checkbox label {
+  min-height: 58px !important;
+  padding: 16px 18px !important;
+  border-radius: 18px !important;
+  background: rgba(255,255,255,.055) !important;
+  border: 1px solid rgba(148,163,184,.22) !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 12px !important;
+}
+
+#heatmap_checkbox input[type="checkbox"] {
+  appearance: none !important;
+  -webkit-appearance: none !important;
+  width: 26px !important;
+  height: 26px !important;
+  min-width: 26px !important;
+  border-radius: 8px !important;
+  background: rgba(2,6,23,.85) !important;
+  border: 2px solid rgba(148,163,184,.65) !important;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
+  cursor: pointer !important;
+}
+
+#heatmap_checkbox input[type="checkbox"]:checked {
+  background-color: #8b5cf6 !important;
+  border-color: #c4b5fd !important;
+  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.2 10.4L8.1 14.2L15.9 5.8' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  background-size: 18px 18px !important;
+}
+
+#heatmap_checkbox input[type="checkbox"]:focus-visible {
+  outline: 3px solid rgba(139,92,246,.45) !important;
+  outline-offset: 3px !important;
+}
+
+#heatmap_checkbox span,
+#heatmap_checkbox label span {
+  color: var(--ink) !important;
+  font-weight: 780 !important;
+}
+
+/* Pixel-lock the MRI upload and Grad-CAM panels so they fill the full card width. */
+#mri_upload,
+#heatmap_preview {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+#mri_upload *,
+#heatmap_preview * {
+  box-sizing: border-box !important;
+}
+
+#mri_upload .wrap,
+#heatmap_preview .wrap,
+#mri_upload .image-container,
+#heatmap_preview .image-container,
+#mri_upload .upload-container,
+#heatmap_preview .upload-container,
+#mri_upload [data-testid="image"],
+#heatmap_preview [data-testid="image"],
+#mri_upload .empty,
+#heatmap_preview .empty {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 100% !important;
+  border-radius: 24px !important;
+}
+
+#mri_upload .wrap,
+#mri_upload .image-container,
+#mri_upload .upload-container,
+#mri_upload [data-testid="image"],
+#mri_upload .empty {
+  min-height: 520px !important;
+  height: 520px !important;
+}
+
+#heatmap_preview .wrap,
+#heatmap_preview .image-container,
+#heatmap_preview .upload-container,
+#heatmap_preview [data-testid="image"],
+#heatmap_preview .empty {
+  min-height: 430px !important;
+  height: 430px !important;
+}
+
+#mri_upload img,
+#heatmap_preview img {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: contain !important;
+  border-radius: 22px !important;
+  background: #020617 !important;
+}
+
+#mri_upload button,
+#heatmap_preview button {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+#mri_upload .empty,
+#heatmap_preview .empty {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  background:
+    radial-gradient(circle at 50% 45%, rgba(139,92,246,.13), transparent 38%),
+    linear-gradient(180deg, rgba(2,6,23,.98), rgba(8,13,29,.98)) !important;
+  border: 1px dashed rgba(148,163,184,.34) !important;
+}
+
+#mri_upload .upload-text,
+#heatmap_preview .upload-text,
+#mri_upload .center,
+#heatmap_preview .center {
+  width: 100% !important;
+  text-align: center !important;
+}
+
+/* The left card itself should not squeeze its child upload component. */
+.upload-panel,
+.heatmap-panel {
+  width: 100% !important;
+  min-width: 0 !important;
+  overflow: hidden !important;
+}
+
+.upload-panel .form,
+.heatmap-panel .form {
+  width: 100% !important;
+}
+
 @media (max-width: 900px) {
   .hero-card { padding: 28px 20px; }
   .metric-grid { grid-template-columns: 1fr; }
@@ -549,29 +693,32 @@ with gr.Blocks(
 
     with gr.Row(equal_height=False):
         with gr.Column(scale=5, min_width=360):
-            with gr.Group(elem_classes=["glass-card"]):
+            with gr.Group(elem_classes=["glass-card", "upload-panel"]):
                 gr.HTML('<h3 class="card-title">Upload MRI Image</h3>')
                 image_input = gr.Image(
                     label="Upload MRI Image",
                     show_label=False,
                     type="pil",
-                    height=430,
+                    height=520,
                     sources=["upload", "clipboard"],
+                    elem_id="mri_upload",
                 )
                 heatmap_toggle = gr.Checkbox(
                     value=False,
                     label="Generate optional heatmap",
                     info=None,
+                    elem_id="heatmap_checkbox",
                 )
                 run_button = gr.Button("Run Prediction", variant="primary", elem_id="run_button")
 
-            with gr.Group(elem_classes=["glass-card"]):
+            with gr.Group(elem_classes=["glass-card", "heatmap-panel"]):
                 gr.HTML('<h3 class="card-title">Optional Heatmap</h3>')
                 heatmap_output = gr.Image(
                     label="Optional Heatmap",
                     show_label=False,
                     type="pil",
-                    height=390,
+                    height=430,
+                    elem_id="heatmap_preview",
                 )
 
         with gr.Column(scale=7, min_width=420):