Add wheel-zoom and drag-pan to images

app.py

@@ -297,8 +297,71 @@ def choose(side: str, session: dict):
 
 # ---------- UI ----------------------------------------------------------------
 
+# Wheel-zoom + drag-pan + dbl-click reset on every <img> inside a `.zoomable`
+# Gradio image component. Resets zoom when the image src changes.
+ZOOM_HEAD = """
+<style>
+  .zoomable [data-testid="image"], .zoomable .image-frame, .zoomable .image-container {
+    overflow: hidden;
+  }
+  .zoomable img {
+    transform-origin: 0 0;
+    transition: transform 0.05s ease-out;
+    will-change: transform;
+  }
+</style>
+<script>
+(function () {
+  function bind(img) {
+    if (img.__zoomBound) return;
+    img.__zoomBound = true;
+    let scale = 1, tx = 0, ty = 0;
+    let dragging = false, lastX = 0, lastY = 0;
+    const apply = () => { img.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`; };
+    const reset = () => { scale = 1; tx = 0; ty = 0; apply(); };
+    img.addEventListener('wheel', (e) => {
+      e.preventDefault();
+      const factor = e.deltaY < 0 ? 1.2 : 1 / 1.2;
+      const ns = Math.min(12, Math.max(1, scale * factor));
+      if (ns === scale) return;
+      const rect = img.getBoundingClientRect();
+      const ox = e.clientX - rect.left;
+      const oy = e.clientY - rect.top;
+      tx = ox - (ox - tx) * (ns / scale);
+      ty = oy - (oy - ty) * (ns / scale);
+      scale = ns;
+      if (scale <= 1.001) reset(); else apply();
+    }, { passive: false });
+    img.addEventListener('mousedown', (e) => {
+      if (scale > 1) {
+        dragging = true; lastX = e.clientX; lastY = e.clientY;
+        img.style.cursor = 'grabbing';
+        e.preventDefault();
+      }
+    });
+    window.addEventListener('mousemove', (e) => {
+      if (!dragging) return;
+      tx += e.clientX - lastX; ty += e.clientY - lastY;
+      lastX = e.clientX; lastY = e.clientY;
+      apply();
+    });
+    window.addEventListener('mouseup', () => { dragging = false; img.style.cursor = ''; });
+    img.addEventListener('dblclick', reset);
+    new MutationObserver(reset).observe(img, { attributes: true, attributeFilter: ['src'] });
+  }
+  function scan() { document.querySelectorAll('.zoomable img').forEach(bind); }
+  new MutationObserver(scan).observe(document.body, { childList: true, subtree: true });
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', scan);
+  } else {
+    scan();
+  }
+})();
+</script>
+"""
+
 
-with gr.Blocks(title="Denoising A/B Judging", theme=gr.themes.Soft()) as demo:
+with gr.Blocks(title="Denoising A/B Judging", theme=gr.themes.Soft(), head=ZOOM_HEAD) as demo:
     session_state = gr.State(_empty_session())
 
     gr.Markdown("# Denoising A/B Judging")
@@ -307,7 +370,7 @@ with gr.Blocks(title="Denoising A/B Judging", theme=gr.themes.Soft()) as demo:
         "denoised versions of it below, labelled **A** and **B**. The two "
         "versions come from different denoising approaches, presented in a "
         "random left/right order so the comparison stays blind. "
-        "Click any image to zoom in.\n\n"
+        "Scroll on an image to zoom, drag to pan, double-click to reset.\n\n"
         "**Which denoised image would you rather work with?**"
     )
 
@@ -328,6 +391,7 @@ with gr.Blocks(title="Denoising A/B Judging", theme=gr.themes.Soft()) as demo:
                 show_download_button=False,
                 show_fullscreen_button=True,
                 height=420,
+                elem_classes=["zoomable"],
             )
         with gr.Row():
             with gr.Column():
@@ -338,6 +402,7 @@ with gr.Blocks(title="Denoising A/B Judging", theme=gr.themes.Soft()) as demo:
                     show_download_button=False,
                     show_fullscreen_button=True,
                     height=420,
+                    elem_classes=["zoomable"],
                 )
                 a_btn = gr.Button("A is better", variant="primary")
             with gr.Column():
@@ -348,6 +413,7 @@ with gr.Blocks(title="Denoising A/B Judging", theme=gr.themes.Soft()) as demo:
                     show_download_button=False,
                     show_fullscreen_button=True,
                     height=420,
+                    elem_classes=["zoomable"],
                 )
                 b_btn = gr.Button("B is better", variant="primary")
         done_md = gr.Markdown(visible=False)