Tame zoom: shift+wheel, max 4x, clamp pan

app.py

@@ -297,8 +297,8 @@ 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.
+# Shift+wheel zoom, drag-pan when zoomed, dbl-click reset. Pan is clamped so
+# the image always fills its container; max 4x. Resets on src change.
 ZOOM_HEAD = """
 <style>
   .zoomable [data-testid="image"], .zoomable .image-frame, .zoomable .image-container {
@@ -312,17 +312,26 @@ ZOOM_HEAD = """
 </style>
 <script>
 (function () {
+  const MAX_SCALE = 4;
   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(); };
+    function clamp() {
+      const w = img.clientWidth || img.naturalWidth || 1;
+      const h = img.clientHeight || img.naturalHeight || 1;
+      const minX = w - w * scale, minY = h - h * scale;
+      tx = Math.min(0, Math.max(minX, tx));
+      ty = Math.min(0, Math.max(minY, ty));
+    }
+    const apply = () => { clamp(); img.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`; };
+    const reset = () => { scale = 1; tx = 0; ty = 0; img.style.transform = ''; };
     img.addEventListener('wheel', (e) => {
+      if (!e.shiftKey) return;  // plain scroll = page scroll
       e.preventDefault();
-      const factor = e.deltaY < 0 ? 1.2 : 1 / 1.2;
-      const ns = Math.min(12, Math.max(1, scale * factor));
+      const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+      const ns = Math.min(MAX_SCALE, Math.max(1, scale * factor));
       if (ns === scale) return;
       const rect = img.getBoundingClientRect();
       const ox = e.clientX - rect.left;
@@ -370,7 +379,7 @@ with gr.Blocks(title="Denoising A/B Judging", theme=gr.themes.Soft(), head=ZOOM_
         "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. "
-        "Scroll on an image to zoom, drag to pan, double-click to reset.\n\n"
+        "Hold **Shift** and scroll over an image to zoom (up to 4×), drag to pan, double-click to reset.\n\n"
         "**Which denoised image would you rather work with?**"
     )