Use ImageSlider comparison output

README.md

@@ -32,7 +32,8 @@ which is gated and requires an `HF_TOKEN` Space secret with model access.
 
 Upload a low-resolution square image, typically around 128 x 128, or choose one
 of the bundled examples. Click **Super-Resolve** to run the 28-step ASASR sampler
-and return a 512 x 512 result plus an input/output comparison.
+and return an interactive slider comparing the bicubic low-resolution input
+against the 512 x 512 ASASR result.
 
 ## License
 

app.py

@@ -14,8 +14,9 @@ from pathlib import Path
 from typing import Optional, Tuple
 
 import gradio as gr
+from gradio_imageslider import ImageSlider
 from huggingface_hub import snapshot_download
-from PIL import Image, ImageDraw, ImageOps
+from PIL import Image, ImageOps
 
 import torch
 from diffusers.pipelines import FluxPipeline
@@ -161,20 +162,6 @@ def _prepare_input(image: Image.Image) -> Image.Image:
     return image.resize((TARGET_RESOLUTION, TARGET_RESOLUTION), Image.Resampling.BICUBIC)
 
 
-def _comparison_image(lr_image: Image.Image, sr_image: Image.Image) -> Image.Image:
-    label_h = 34
-    width = TARGET_RESOLUTION * 2
-    height = TARGET_RESOLUTION + label_h
-    canvas = Image.new("RGB", (width, height), "#111827")
-    draw = ImageDraw.Draw(canvas)
-    draw.text((18, 10), "Input LR, bicubic to 512", fill="#f9fafb")
-    draw.text((TARGET_RESOLUTION + 18, 10), "ASASR output, 512 x 512", fill="#f9fafb")
-    canvas.paste(lr_image, (0, label_h))
-    canvas.paste(sr_image, (TARGET_RESOLUTION, label_h))
-    draw.line((TARGET_RESOLUTION, 0, TARGET_RESOLUTION, height), fill="#111827", width=3)
-    return canvas
-
-
 def _gpu_duration(*args, **kwargs) -> int:
     value = os.environ.get("ASASR_GPU_DURATION", "45")
     try:
@@ -216,7 +203,6 @@ def super_resolve(
     ).images[0]
     result = adain_color_fix(result, lr_image).convert("RGB")
     LAST_INFERENCE_SECONDS = time.perf_counter() - start
-    comparison = _comparison_image(lr_image, result)
     load_text = (
         f"Model load: {PIPELINE_LOAD_SECONDS:.1f}s. "
         if PIPELINE_LOAD_SECONDS is not None
@@ -227,7 +213,7 @@ def super_resolve(
         f"{load_text}Inference: {LAST_INFERENCE_SECONDS:.1f}s."
     )
     print(f"[ASASR] {status}")
-    return comparison, result, status
+    return (lr_image, result), status
 
 
 _startup_prefetch()
@@ -288,15 +274,13 @@ with gr.Blocks(title="ASASR Super-Resolution") as demo:
             )
             run_button = gr.Button("Super-Resolve", variant="primary")
         with gr.Column(scale=2, min_width=420):
-            comparison = gr.Image(
+            comparison_slider = ImageSlider(
                 label="Input LR | ASASR HR",
                 type="pil",
-                height=420,
-            )
-            output_image = gr.Image(
-                label="ASASR output",
-                type="pil",
-                height=420,
+                height=560,
+                position=0.5,
+                interactive=False,
+                slider_color="#2563eb",
             )
             status = gr.Textbox(
                 label="Runtime",
@@ -308,7 +292,7 @@ with gr.Blocks(title="ASASR Super-Resolution") as demo:
     gr.Examples(
         examples=EXAMPLE_FILES,
         inputs=input_image,
-        outputs=[comparison, output_image, status],
+        outputs=[comparison_slider, status],
         fn=super_resolve,
         cache_examples=True,
         cache_mode="lazy",
@@ -318,7 +302,7 @@ with gr.Blocks(title="ASASR Super-Resolution") as demo:
     run_button.click(
         fn=super_resolve,
         inputs=input_image,
-        outputs=[comparison, output_image, status],
+        outputs=[comparison_slider, status],
         api_name="super_resolve",
     )
 

requirements.txt

@@ -1,4 +1,5 @@
 gradio==6.10.0
+gradio_imageslider==0.0.20
 spaces==0.50.4
 diffusers==0.30.3
 transformers==4.57.6