Add image comparison slider functionality using gradio-imageslider. Update layout for frame display and enhance overall quality metric description. Update project dependencies in pyproject.toml and uv.lock.

app.py

@@ -6,6 +6,7 @@ import gradio as gr
 import imagehash
 import numpy as np
 import plotly.graph_objects as go
+from gradio_imageslider import ImageSlider
 from PIL import Image
 from scipy.stats import pearsonr
 from skimage.metrics import mean_squared_error as mse_skimage
@@ -1532,13 +1533,28 @@ def create_app():
             with gr.Column():
                 gr.Markdown("### Video 1 - Current Frame")
                 frame1_output = gr.Image(
-                    label="Video 1 Frame", type="numpy", interactive=False, height=400
+                    label="Video 1 Frame",
+                    type="numpy",
+                    interactive=False,
+                    # height=400,
+                )
+
+            with gr.Column():
+                gr.Markdown("### Frame Comparison Slider")
+                image_slider = ImageSlider(
+                    label="Drag to compare frames",
+                    type="numpy",
+                    interactive=True,
+                    # height=400,
                 )
 
             with gr.Column():
                 gr.Markdown("### Video 2 - Current Frame")
                 frame2_output = gr.Image(
-                    label="Video 2 Frame", type="numpy", interactive=False, height=400
+                    label="Video 2 Frame",
+                    type="numpy",
+                    interactive=False,
+                    # height=400,
                 )
 
         # Frame navigation (initially hidden) - moved underneath frames
@@ -1586,7 +1602,7 @@ def create_app():
 - **pHash**: Perceptual Hash similarity (1.0 = visually identical)
 - **Color Histogram**: Color distribution correlation (1.0 = identical color patterns)
 - **Sharpness**: Laplacian variance per video (higher = sharper/more detailed images)
-- **Overall Quality**: Combined metric averaging SSIM, normalized PSNR, and pHash (when available)
+- **Overall Quality**: Combined metric averaging SSIM, min-max normalized PSNR, and pHash
                             """)
                         with gr.Column() as info_section:
                             status_output = gr.Textbox(
@@ -1691,6 +1707,7 @@ def create_app():
                 status,  # status_output
                 slider_update,  # frame_slider
                 frame1,  # frame1_output
+                (frame1, frame2),  # image_slider
                 frame2,  # frame2_output
                 info,  # frame_info
                 ssim_fig,  # ssim_plot
@@ -1709,6 +1726,7 @@ def create_app():
         def update_frames(frame_index):
             if comparator.max_frames == 0:
                 return (
+                    None,
                     None,
                     None,
                     "No videos loaded",
@@ -1718,6 +1736,7 @@ def create_app():
                     None,
                     None,
                     None,
+                    None,
                 )
 
             frame1, frame2 = comparator.get_frames_at_index(frame_index)
@@ -1735,6 +1754,7 @@ def create_app():
 
             return (
                 frame1,
+                (frame1, frame2),
                 frame2,
                 info,
                 ssim_fig,
@@ -1763,6 +1783,7 @@ def create_app():
                     minimum=0, maximum=0, step=1, value=0, interactive=False
                 ),  # frame_slider
                 None,  # frame1_output
+                (None, None),  # image_slider
                 None,  # frame2_output
                 "",  # frame_info
                 None,  # ssim_plot
@@ -1792,22 +1813,23 @@ def create_app():
                 print("DEBUG: Same video pair already processed, skipping...")
                 # Return current state without recomputing
                 return (
-                    gr.update(),
-                    gr.update(),
-                    gr.update(),
-                    gr.update(),
-                    gr.update(),
-                    gr.update(),
-                    gr.update(),
-                    gr.update(),
-                    gr.update(),
-                    gr.update(),
-                    gr.update(),
-                    gr.update(),
-                    gr.update(),
-                    gr.update(),
-                    gr.update(),
-                    gr.update(),
+                    gr.update(),  # status_output
+                    gr.update(),  # frame_slider
+                    gr.update(),  # frame1_output
+                    gr.update(),  # image_slider
+                    gr.update(),  # frame2_output
+                    gr.update(),  # frame_info
+                    gr.update(),  # ssim_plot
+                    gr.update(),  # psnr_plot
+                    gr.update(),  # mse_plot
+                    gr.update(),  # phash_plot
+                    gr.update(),  # color_plot
+                    gr.update(),  # sharpness_plot
+                    gr.update(),  # overall_plot
+                    gr.update(),  # frame_controls
+                    gr.update(),  # frame_display
+                    gr.update(),  # metrics_section
+                    gr.update(),  # info_section
                 )
 
             last_processed_pair["video1"] = video1
@@ -1823,6 +1845,7 @@ def create_app():
                 status_output,
                 frame_slider,
                 frame1_output,
+                image_slider,
                 frame2_output,
                 frame_info,
                 ssim_plot,
@@ -1846,6 +1869,7 @@ def create_app():
                 status_output,
                 frame_slider,
                 frame1_output,
+                image_slider,
                 frame2_output,
                 frame_info,
                 ssim_plot,
@@ -1874,6 +1898,7 @@ def create_app():
                 status_output,
                 frame_slider,
                 frame1_output,
+                image_slider,
                 frame2_output,
                 frame_info,
                 ssim_plot,
@@ -1895,6 +1920,7 @@ def create_app():
             inputs=[frame_slider],
             outputs=[
                 frame1_output,
+                image_slider,
                 frame2_output,
                 frame_info,
                 ssim_plot,

pyproject.toml

@@ -13,4 +13,5 @@ dependencies = [
     "plotly>=5.17.0",
     "imagehash>=4.3.1",
     "scipy>=1.11.0",
+    "gradio-imageslider>=0.0.20",
 ]

uv.lock

@@ -217,11 +217,12 @@ wheels = [
 ]
 
 [[package]]
-name = "framelens"
+name = "framearena"
 version = "0.1.0"
 source = { virtual = "." }
 dependencies = [
     { name = "gradio" },
+    { name = "gradio-imageslider" },
     { name = "imagehash" },
     { name = "numpy" },
     { name = "opencv-python" },
@@ -234,6 +235,7 @@ dependencies = [
 [package.metadata]
 requires-dist = [
     { name = "gradio", specifier = ">=5.38.2" },
+    { name = "gradio-imageslider", specifier = ">=0.0.20" },
     { name = "imagehash", specifier = ">=4.3.1" },
     { name = "numpy", specifier = ">=1.24.0" },
     { name = "opencv-python", specifier = ">=4.8.0" },
@@ -310,6 +312,19 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/e0/38/7f50ae95de8fa419276742230f57a34e8c0f47231da0ad54479dd0088972/gradio_client-1.11.0-py3-none-any.whl", hash = "sha256:afb714aea50224f6f04679fe2ce79c1be75011012d0dc3b3ee575610a0dc8eb2", size = 324452 },
 ]
 
+[[package]]
+name = "gradio-imageslider"
+version = "0.0.20"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "gradio" },
+    { name = "pillow" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/4e/20/aadd2089f4b45abb8f8a407ad124c6a0bda35298bb44af56cc160ec6d945/gradio_imageslider-0.0.20.tar.gz", hash = "sha256:a1421c3239cce2a01160852cdc0962292230418384a0cff3b0307a95a451643f", size = 256548 }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/38/e5/c33f36a4fd0bd8207bdb0761513387bfbd28b54f51d31265e93fff2d1b1b/gradio_imageslider-0.0.20-py3-none-any.whl", hash = "sha256:c73d155ce14a63f3fceb7547e8238e93c12c9acaecf7445cf8f281aa880cac79", size = 101455 },
+]
+
 [[package]]
 name = "groovy"
 version = "0.1.2"