Update app.py

app.py

@@ -8,6 +8,9 @@ import torch.nn as nn
 from math import sqrt
 import gradio as gr
 import nibabel as nib
+import base64
+import io
+from PIL import Image
 from sklearn.preprocessing import MinMaxScaler
 
 # ══════════════════════════════════════════════════════════════════════════════
@@ -104,6 +107,116 @@ def to_coords(h, w):
     gx, gy = torch.meshgrid(xs, ys, indexing="ij")
     return torch.stack([gx.reshape(-1), gy.reshape(-1)], dim=-1)
 
+# ══════════════════════════════════════════════════════════════════════════════
+# Helper: build zoomable image HTML component
+# ══════════════════════════════════════════════════════════════════════════════
+
+def make_zoom_html(arr_uint8, title=""):
+    """Convert a uint8 numpy array to a self-contained zoomable HTML viewer."""
+    pil_img = Image.fromarray(arr_uint8)
+    # upscale small images so they look crisp
+    w, h = pil_img.size
+    scale = max(1, 400 // max(w, h))
+    pil_img = pil_img.resize((w * scale, h * scale), Image.NEAREST)
+    buf = io.BytesIO()
+    pil_img.save(buf, format="PNG")
+    b64 = base64.b64encode(buf.getvalue()).decode()
+    html = f"""
+<div style="background:#f8f9ff;border:1.5px solid #ddd6fe;border-radius:14px;
+            padding:12px;user-select:none;">
+  <div style="font-weight:800;color:#4c1d95;margin-bottom:8px;font-size:.95rem;">
+    🔍 {title} &nbsp;<span style="font-weight:500;color:#6b7280;font-size:.8rem;">
+    Scroll to zoom · Drag to pan · Double-click to reset</span>
+  </div>
+  <div id="zoom-wrap-{hash(b64) & 0xffff}"
+       style="overflow:hidden;border-radius:10px;background:#000;
+              width:100%;height:420px;cursor:grab;position:relative;">
+    <img id="zoom-img-{hash(b64) & 0xffff}"
+         src="data:image/png;base64,{b64}"
+         style="transform-origin:0 0;transform:scale(1) translate(0px,0px);
+                image-rendering:pixelated;max-width:none;
+                width:100%;height:100%;object-fit:contain;display:block;"
+         draggable="false"/>
+  </div>
+</div>
+<script>
+(function() {{
+  const wid  = '{hash(b64) & 0xffff}';
+  const wrap = document.getElementById('zoom-wrap-' + wid);
+  const img  = document.getElementById('zoom-img-'  + wid);
+  if (!wrap || !img) return;
+
+  let scale = 1, ox = 0, oy = 0;
+  let dragging = false, startX, startY, lastOx, lastOy;
+  const MIN = 0.5, MAX = 12;
+
+  function apply() {{
+    img.style.transform = `scale(${{scale}}) translate(${{ox}}px,${{oy}}px)`;
+  }}
+
+  // Scroll to zoom
+  wrap.addEventListener('wheel', e => {{
+    e.preventDefault();
+    const rect = wrap.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+    const factor = e.deltaY < 0 ? 1.12 : 0.89;
+    const newScale = Math.min(MAX, Math.max(MIN, scale * factor));
+    ox = mx / newScale - mx / scale + ox;
+    oy = my / newScale - my / scale + oy;
+    scale = newScale;
+    apply();
+  }}, {{ passive: false }});
+
+  // Drag to pan
+  wrap.addEventListener('mousedown', e => {{
+    dragging = true; wrap.style.cursor = 'grabbing';
+    startX = e.clientX; startY = e.clientY;
+    lastOx = ox; lastOy = oy;
+  }});
+  window.addEventListener('mousemove', e => {{
+    if (!dragging) return;
+    ox = lastOx + (e.clientX - startX) / scale;
+    oy = lastOy + (e.clientY - startY) / scale;
+    apply();
+  }});
+  window.addEventListener('mouseup', () => {{
+    dragging = false; wrap.style.cursor = 'grab';
+  }});
+
+  // Double-click to reset
+  wrap.addEventListener('dblclick', () => {{
+    scale = 1; ox = 0; oy = 0; apply();
+  }});
+
+  // Touch support
+  let lastDist = null;
+  wrap.addEventListener('touchstart', e => {{
+    if (e.touches.length === 1) {{
+      dragging = true;
+      startX = e.touches[0].clientX; startY = e.touches[0].clientY;
+      lastOx = ox; lastOy = oy;
+    }}
+  }}, {{ passive: true }});
+  wrap.addEventListener('touchmove', e => {{
+    if (e.touches.length === 2) {{
+      const d = Math.hypot(
+        e.touches[0].clientX - e.touches[1].clientX,
+        e.touches[0].clientY - e.touches[1].clientY);
+      if (lastDist) {{ scale = Math.min(MAX, Math.max(MIN, scale * d / lastDist)); apply(); }}
+      lastDist = d;
+    }} else if (e.touches.length === 1 && dragging) {{
+      ox = lastOx + (e.touches[0].clientX - startX) / scale;
+      oy = lastOy + (e.touches[0].clientY - startY) / scale;
+      apply();
+    }}
+  }}, {{ passive: true }});
+  wrap.addEventListener('touchend', () => {{ dragging = false; lastDist = null; }});
+}})();
+</script>
+"""
+    return html
+
 # ═════════════════��════════════════════════════════════════════════════════════
 # 4a. Reconstruct from pretrained model
 # ══════════════════════════════════════════════════════════════════════════════
@@ -124,7 +237,8 @@ def reconstruct_pretrained(slice_idx, vol_idx):
         f"📊 Intensity: [{img_min:.3f}, {img_max:.3f}]  |  "
         f"🧠 Slice {slice_idx}  |  📡 Volume {vol_idx}"
     )
-    return to_uint8(recon), stats
+    html = make_zoom_html(to_uint8(recon), f"Reconstructed — Slice {slice_idx}, Volume {vol_idx}")
+    return html, stats
 
 # ══════════════════════════════════════════════════════════════════════════════
 # 4b. Compress & reconstruct user-uploaded NIfTI
@@ -206,7 +320,9 @@ def compress_and_compare(nifti_file, slice_idx, vol_idx, num_iters, lr):
         f"📡 PSNR: {psnr:.2f} dB  |  "
         f"🔁 Iterations: {num_iters}"
     )
-    return orig_img, recon_img, stats
+    orig_html  = make_zoom_html(orig_img,  f"Original — Slice {slice_idx}, Volume {vol_idx}")
+    recon_html = make_zoom_html(recon_img, f"SIREN Reconstruction — Slice {slice_idx}, Volume {vol_idx}")
+    return orig_html, recon_html, stats
 
 # ══════════════════════════════════════════════════════════════════════════════
 # 5. Gradio UI
@@ -383,8 +499,7 @@ Adjust the sliders and click **Reconstruct** to visualise any slice and volume.
 """)
 
                 with gr.Column(scale=2):
-                    out1 = gr.Image(label="Reconstructed Slice", type="numpy",
-                                    elem_id="recon_img", height=420)
+                    out1 = gr.HTML(label="Reconstructed Slice", elem_id="recon_img")
 
             btn1.click(reconstruct_pretrained,
                        inputs=[sl1, vl1],
@@ -418,10 +533,8 @@ The app will fit a SIREN network to the selected slice on-the-fly and show you
 
                 with gr.Column(scale=2):
                     with gr.Row():
-                        orig_img  = gr.Image(label="📷 Original Slice",
-                                             type="numpy", height=380)
-                        recon_img = gr.Image(label="🤖 SIREN Reconstruction",
-                                             type="numpy", height=380)
+                        orig_img  = gr.HTML(label="📷 Original Slice")
+                        recon_img = gr.HTML(label="🤖 SIREN Reconstruction")
 
             btn2.click(compress_and_compare,
                        inputs=[nifti_upload, sl2, vl2, n_iters, lr_inp],