Bring back the comparison with a scale picker; reflow the layout

app.py

@@ -19,6 +19,7 @@ EXAMPLE_INPUT = "samples/example_1x.png"
 EXAMPLE_CLIP = "samples/example_zoom.mp4"
 EXAMPLE_LEVELS = [(EXAMPLE_INPUT, "input")] + \
                  [(f"samples/example_{f}x.png", f"{f}x") for f in (4, 16, 64, 256)]
+EXAMPLE_COMPARE = ("samples/example_256x_input.png", "samples/example_256x.png")
 EXAMPLE_NOTE = "_An example run. Upload a photo above to make your own._"
 
 HEADER = """
@@ -37,10 +38,6 @@ HEADER = """
 </div>
 """
 
-LIMITS = ("Past the first step or two there is no ground truth left to recover, so the deep "
-          "levels are **plausible detail, not measured detail**. The zoom is a crop of your "
-          "photo, not a real lens moving closer.")
-
 BIBTEX = """@misc{dipta2026oraclezoomonpolicyselfdistillationinspired,
   title         = {OracleZoom: On-Policy Self-Distillation Inspired Reference-Constrained Recursive Image Super Resolution},
   author        = {Shubhashis Roy Dipta and Sourajit Saha and Shaswati Saha and Nobin Sarwar},
@@ -55,44 +52,11 @@ CSS = """
 #hero video {border-radius:12px}
 .contain {max-width:1400px !important}
 footer {display:none !important}
-#zoom-target img {cursor:grab}
-#zoom-target img:active {cursor:grabbing}
+#zoom-target img {cursor:crosshair}
 /* a deep run wraps to two rows; keep any scrollbar from rendering light on a dark theme */
 #levels, #levels * {scrollbar-color: var(--border-color-primary) transparent}
 """
 
-# Drag the zoom point straight on the preview. Throttled, because every move asks the server to
-# redraw. Clicking and the two sliders both still work if this ever stops matching the DOM.
-DRAG_JS = """
-() => {
-  if (window.__ozDrag) return;              // load can fire more than once; keep one state
-  const S = window.__ozDrag = {on: false, last: 0};
-  const send = (e, force) => {
-    const img = document.querySelector('#zoom-target img');
-    if (!img) return;
-    const now = Date.now();
-    if (!force && now - S.last < 120) return;
-    S.last = now;
-    const r = img.getBoundingClientRect();
-    const at = (v, lo, span) => Math.min(Math.max((v - lo) / span, 0), 1);
-    for (const [id, v] of [['zoom-x', at(e.clientX, r.left, r.width)],
-                           ['zoom-y', at(e.clientY, r.top, r.height)]]) {
-      const el = document.querySelector('#' + id + ' input[type=range]');
-      if (!el) continue;
-      el.value = v.toFixed(2);
-      el.dispatchEvent(new Event('input', {bubbles: true}));
-    }
-  };
-  // delegated off document, so Gradio swapping the img or the sliders mid-drag is harmless
-  document.addEventListener('mousedown', e => {
-    if (!e.target.closest('#zoom-target img')) return;
-    S.on = true; e.preventDefault(); send(e, true);
-  }, true);
-  document.addEventListener('mousemove', e => { if (S.on) send(e, false); });
-  document.addEventListener('mouseup', e => { if (S.on) { S.on = false; send(e, true); } });
-}
-"""
-
 
 def label(factor):
     return "input" if factor == 1 else f"{factor}x"
@@ -122,6 +86,49 @@ def pick_point(evt: gr.SelectData):
     return x / geometry.PROCESS_SIZE, y / geometry.PROCESS_SIZE
 
 
+def _gallery_paths(gallery):
+    """The (path, label) pairs Gradio hands back for a Gallery value."""
+    out = []
+    for item in gallery or []:
+        img = item.get("image", item) if isinstance(item, dict) else item
+        path = img.get("path") if isinstance(img, dict) else img
+        out.append((path, (item.get("caption") if isinstance(item, dict) else None) or ""))
+    return out
+
+
+def pick_scale(gallery, cx, cy, choice):
+    """Rebuild the comparison at whichever scale was asked for.
+
+    The left side is the plain enlargement that fed that step, which is the previous level
+    cropped and scaled back up. Recomputing it from the levels already on screen keeps this
+    on the CPU, so switching scales costs no GPU quota.
+    """
+    levels = _gallery_paths(gallery)
+    labels = [lbl for _, lbl in levels]
+    if choice not in labels:
+        return gr.skip()
+    i = labels.index(choice)
+    if i == 0:
+        return gr.skip()
+    prev = Image.open(levels[i - 1][0]).convert("RGB")
+    blurry = geometry.zoom_window(prev, UPSCALE, (cx, cy)).resize(prev.size, Image.BICUBIC)
+    return blurry, Image.open(levels[i][0]).convert("RGB")
+
+
+def scale_choices(levels):
+    return [label(UPSCALE ** n) for n in range(1, int(levels) + 1)]
+
+
+GALLERY_ROW_H = 245
+
+
+def gallery_shape(levels):
+    """One row up to five levels, two beyond. Tall enough that neither row ever scrolls."""
+    items = int(levels) + 1
+    rows = 1 if items <= 5 else 2
+    return gr.update(columns=-(-items // rows), rows=rows, height=GALLERY_ROW_H * rows)
+
+
 def estimate_duration(image, levels, cx, cy):
     # Checked against the visitor's remaining quota BEFORE the run, so a loose number locks out
     # low-quota visitors and a tight one gets the run killed mid-way. Measured warm on ZeroGPU:
@@ -133,11 +140,12 @@ def _stream(image, levels, cx, cy):
     if image is None:
         raise gr.Error("Upload a photo first.")
     levels = int(levels)
-    gallery, prompts, frames = [], [], []
-    for step, factor, prompt, _blurry, result in zoom.zoom(MODELS, image, levels, UPSCALE, (cx, cy)):
+    gallery, prompts, frames, compare = [], [], [], None
+    for step, factor, prompt, blurry, result in zoom.zoom(MODELS, image, levels, UPSCALE, (cx, cy)):
         frames.append(result)
         gallery.append((result, label(factor)))
         if step:
+            compare = (blurry, result)
             prompts.append(f"**{label(factor)}** &nbsp; {prompt or '_(no prompt)_'}")
         left = levels - step
         if not step:
@@ -147,8 +155,11 @@ def _stream(image, levels, cx, cy):
         else:
             status = f"At **{label(factor)}**. Rendering the clip…"
         # First yield clears any clip left from the previous run; later ones leave it alone.
-        yield status, (None if not step else gr.skip()), gallery, "\n\n".join(prompts)
-    yield "Done. 🔎", video.render(frames, UPSCALE, (cx, cy)), gallery, "\n\n".join(prompts)
+        yield (status, (None if not step else gr.skip()), gallery, compare,
+               "\n\n".join(prompts), gr.skip())
+    yield ("Done. 🔎", video.render(frames, UPSCALE, (cx, cy)), gallery, compare,
+           "\n\n".join(prompts),
+           gr.update(choices=scale_choices(levels), value=label(UPSCALE ** levels)))
 
 
 @spaces.GPU(duration=estimate_duration)
@@ -163,16 +174,23 @@ def run_example(image):
     yield from _stream(image, 4, 0.5, 0.5)
 
 
+def _example_scale_options():
+    """Keep the picker's starting options honest about the shipped example's depth."""
+    return scale_choices(len(EXAMPLE_LEVELS) - 1)
+
+
 with gr.Blocks(theme=gr.themes.Soft(primary_hue="amber"), css=CSS,
                title="OracleZoom: zoom past 256x") as demo:
     gr.HTML(HEADER)
-    with gr.Row():
+    # Three wide rows, not one tall stack: set it up, watch it, then inspect it. Each row uses
+    # the full width, which is what keeps four large visuals from queueing up vertically.
+    with gr.Row(equal_height=False):
         with gr.Column(scale=4):
             image = gr.Image(label="Your photo", type="pil", height=300,
                              sources=["upload", "clipboard"])
             # Seeded with the example so the box overlay explains itself before any upload.
             target = gr.Image(value=preview(None, 4, 0.5, 0.5), elem_id="zoom-target",
-                              label="Drag to move the zoom point", type="pil",
+                              label="Click to move the zoom point", type="pil",
                               interactive=False, height=340, show_download_button=False)
             levels = gr.Slider(1, MAX_STEPS, value=4, step=1, label="Zoom steps",
                                info=f"Each step is {UPSCALE}x. 4 steps reach 256x, "
@@ -182,35 +200,50 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="amber"), css=CSS,
                 cx = gr.Slider(0, 1, value=0.5, step=0.01, label="Horizontal", elem_id="zoom-x")
                 cy = gr.Slider(0, 1, value=0.5, step=0.01, label="Vertical", elem_id="zoom-y")
             go = gr.Button("🔎 Zoom in", variant="primary", size="lg")
+            status = gr.Markdown("Showing an example. Upload a photo, then press **Zoom in**.")
         with gr.Column(scale=6):
-            status = gr.Markdown("Upload a photo, then press **Zoom in**.")
             clip = gr.Video(value=EXAMPLE_CLIP, label="The zoom", elem_id="hero", autoplay=True,
-                            loop=True, show_share_button=True, height=400)
-            gallery = gr.Gallery(value=EXAMPLE_LEVELS, label="Every level", columns=5, height=205,
-                                 elem_id="levels", object_fit="cover", show_download_button=True)
+                            loop=True, show_share_button=True, height=470)
+
+    with gr.Row():
+        gallery = gr.Gallery(value=EXAMPLE_LEVELS, label="Every level, start to finish",
+                             elem_id="levels", object_fit="cover", show_download_button=True,
+                             **{k: v for k, v in gallery_shape(len(EXAMPLE_LEVELS) - 1).items()
+                                if k != "__type__"})
+
+    with gr.Row(equal_height=False):
+        with gr.Column(scale=5):
+            scale = gr.Radio(_example_scale_options(), value=EXAMPLE_LEVELS[-1][1],
+                             label="Compare at",
+                             info="Left is the plain enlargement that step began from, "
+                                  "right is what OracleZoom drew. Switching is free.")
+            compare = gr.ImageSlider(value=EXAMPLE_COMPARE, height=480, elem_id="compare",
+                                     show_label=False)
+        with gr.Column(scale=5):
             gr.Markdown("##### Vision Language Model at each step:")
             prompts = gr.Markdown(EXAMPLE_NOTE)
 
+    with gr.Row():
+        gr.Examples(
+            examples=[f"samples/{n}.png" for n in SAMPLES],
+            inputs=[image],
+            outputs=[status, clip, gallery, compare, prompts, scale],
+            fn=run_example,
+            cache_examples=True,
+            label="Or try one of these (already computed)",
+        )
+
     controls = [image, levels, cx, cy]
-    outputs = [status, clip, gallery, prompts]
     for c in controls:
         c.change(preview, controls, target, show_api=False)
     target.select(pick_point, None, [cx, cy], show_api=False)
-    go.click(run, controls, outputs)
-
-    gr.Examples(
-        examples=[f"samples/{n}.png" for n in SAMPLES],
-        inputs=[image],
-        outputs=outputs,
-        fn=run_example,
-        cache_examples=True,
-        label="Or try one of these (already computed, costs you nothing)",
-    )
-    gr.Markdown(f"{LIMITS} See the [paper](https://arxiv.org/abs/2609.06490) for the claims we "
-                f"do and do not make.\n\n### Cite our work")
-    gr.Code(value=BIBTEX, language=None, show_label=False, container=False)
+    # Reshape before the run, not after, so the strip does not resize under the results.
+    levels.change(gallery_shape, levels, gallery, show_api=False)
+    go.click(run, controls, [status, clip, gallery, compare, prompts, scale])
+    scale.change(pick_scale, [gallery, cx, cy, scale], compare, show_api=False)
 
-    demo.load(None, None, None, js=DRAG_JS, show_api=False)
+    gr.Markdown("### Cite our work")
+    gr.Code(value=BIBTEX, language=None, show_label=False, container=False)
 
 if __name__ == "__main__":
     demo.queue(max_size=20).launch()

test_app_smoke.py

@@ -61,7 +61,7 @@ def test_declared_duration_grows_with_depth(app, photo):
 
 
 def test_the_shipped_example_assets_exist(app):
-    for path in [app.EXAMPLE_CLIP, *(p for p, _ in app.EXAMPLE_LEVELS)]:
+    for path in [app.EXAMPLE_CLIP, *app.EXAMPLE_COMPARE, *(p for p, _ in app.EXAMPLE_LEVELS)]:
         assert os.path.getsize(path) > 1000, path
     assert [label for _, label in app.EXAMPLE_LEVELS] == ["input", "4x", "16x", "64x", "256x"]
 
@@ -87,10 +87,11 @@ def test_every_sample_named_for_the_examples_is_present(app):
 def test_run_streams_one_update_per_level_then_the_clip(app, photo):
     yields = list(app.run(photo, 3, 0.5, 0.5))
     assert len(yields) == 5                       # entry level, 3 zoom steps, then the clip
-    assert all(len(y) == 4 for y in yields)
+    assert all(len(y) == 6 for y in yields)
     assert yields[0][1] is None                   # first yield clears any stale clip
-    status, clip, gallery, prompts = yields[-1]
+    status, clip, gallery, compare, prompts, _scale = yields[-1]
     assert [label for _, label in gallery] == ["input", "4x", "16x", "64x"]
+    assert compare is not None and len(compare) == 2
     assert prompts.count("tag") == 3
     try:
         assert os.path.getsize(clip) > 10_000
@@ -98,11 +99,59 @@ def test_run_streams_one_update_per_level_then_the_clip(app, photo):
         os.remove(clip)
 
 
+def test_the_comparison_shows_the_deepest_level(app, photo):
+    """Left is what the model started that step from, right is what it produced."""
+    *_, (_, _, gallery, compare, _, scale) = list(app.run(photo, 2, 0.5, 0.5))
+    assert compare[1] is gallery[-1][0]
+    assert scale["choices"] == ["4x", "16x"] and scale["value"] == "16x"
+
+
+def test_the_scale_picker_offers_one_option_per_step(app):
+    assert app.scale_choices(1) == ["4x"]
+    assert app.scale_choices(4) == ["4x", "16x", "64x", "256x"]
+    assert app.scale_choices(app.MAX_STEPS)[-1] == "65536x"
+    assert "input" not in app.scale_choices(app.MAX_STEPS)
+
+
+def test_switching_scale_rebuilds_the_pair_without_the_gpu(app):
+    """Runs off the level images already on screen, so it must not touch zoom.zoom."""
+    gallery = [{"image": {"path": p}, "caption": c} for p, c in app.EXAMPLE_LEVELS]
+    left, right = app.pick_scale(gallery, 0.5, 0.5, "16x")
+    assert left.size == right.size == (512, 512)
+    from PIL import Image
+    import numpy as np
+    expected = np.asarray(Image.open("samples/example_16x.png").convert("RGB"))
+    assert np.array_equal(np.asarray(right), expected)
+
+
+def test_switching_to_a_scale_that_was_not_run_changes_nothing(app):
+    import gradio as gr
+    gallery = [{"image": {"path": p}, "caption": c} for p, c in app.EXAMPLE_LEVELS]
+    assert app.pick_scale(gallery, 0.5, 0.5, "65536x") == gr.skip()
+    assert app.pick_scale(gallery, 0.5, 0.5, "input") == gr.skip()
+
+
+def test_the_level_strip_wraps_to_two_rows_instead_of_scrolling(app):
+    """Six levels or more will not fit one row at a readable size."""
+    for steps in (1, 2, 3, 4):
+        shape = app.gallery_shape(steps)
+        assert shape["rows"] == 1 and shape["columns"] == steps + 1
+        assert shape["height"] == app.GALLERY_ROW_H
+    for steps in (5, 6, 7, 8):
+        shape = app.gallery_shape(steps)
+        items = steps + 1
+        assert shape["rows"] == 2
+        assert shape["height"] == 2 * app.GALLERY_ROW_H
+        # every item has a cell, and no more than one cell goes spare
+        assert shape["columns"] * 2 >= items > shape["columns"] * 2 - 2
+
+
 def test_a_deep_run_labels_every_level(app, photo):
-    status, clip, gallery, prompts = list(app.run(photo, app.MAX_STEPS, 0.5, 0.5))[-1]
+    _, clip, gallery, _, _, scale = list(app.run(photo, app.MAX_STEPS, 0.5, 0.5))[-1]
     try:
         assert [label for _, label in gallery] == [
             "input", "4x", "16x", "64x", "256x", "1024x", "4096x", "16384x", "65536x"]
+        assert scale["value"] == "65536x" and len(scale["choices"]) == app.MAX_STEPS
     finally:
         os.remove(clip)