Refactor PSNR normalization to use min-max scaling for improved accuracy. Remove unused quality threshold indicators and enhance the layout of the usage guide with clearer metric explanations. Implement debouncing in the auto-load function to prevent redundant processing of the same video pair.

app.py

@@ -703,8 +703,18 @@ class FrameMetrics:
                     if f in psnr_frames
                 ]
 
-                # Normalize PSNR to 0-1 scale (typical range 0-50dB)
-                psnr_normalized = [min(p / 50.0, 1.0) for p in psnr_common]
+                # Normalize PSNR to 0-1 scale using min-max normalization
+                if psnr_common:
+                    psnr_min = min(psnr_common)
+                    psnr_max = max(psnr_common)
+                    if psnr_max > psnr_min:
+                        psnr_normalized = [
+                            (p - psnr_min) / (psnr_max - psnr_min) for p in psnr_common
+                        ]
+                    else:
+                        psnr_normalized = [0.0 for _ in psnr_common]
+                else:
+                    psnr_normalized = []
 
                 # Start with SSIM and normalized PSNR
                 quality_components = [ssim_common, psnr_normalized]
@@ -786,28 +796,6 @@ class FrameMetrics:
                 )
 
                 # Add quality threshold indicators if there are significant variations
-                if (
-                    quality_range > 0.03
-                ):  # Show thresholds if there's meaningful variation
-                    # Add reference lines for quality levels within the visible range
-                    if y_min <= 0.9 <= y_max:
-                        fig_overall.add_hline(
-                            y=0.9,
-                            line_dash="dot",
-                            line_color="green",
-                            line_width=1,
-                            annotation_text="Excellent (0.9)",
-                            annotation_position="right",
-                        )
-                    if y_min <= 0.8 <= y_max:
-                        fig_overall.add_hline(
-                            y=0.8,
-                            line_dash="dot",
-                            line_color="blue",
-                            line_width=1,
-                            annotation_text="Good (0.8)",
-                            annotation_position="right",
-                        )
 
                 if current_frame is not None:
                     fig_overall.add_vline(
@@ -919,7 +907,7 @@ class VideoFrameComparator:
                         return True
 
             return False
-        except:
+        except Exception:
             return False
 
     def load_videos(self, video1_path, video2_path):
@@ -1416,7 +1404,6 @@ def create_app():
     print(f"DEBUG: Loaded {len(example_pairs)} example pairs")
     for i, pair in enumerate(example_pairs):
         print(f"  Example {i + 1}: {pair}")
-    all_videos = get_all_videos_from_json()
 
     with gr.Blocks(
         title="Frame Arena - Video Frame Comparator",
@@ -1478,37 +1465,6 @@ def create_app():
             pointer-events: auto !important;
         }
         """,
-        # js="""
-        # function updatePlotColors() {
-        #     // Get current theme color
-        #     const bodyStyle = getComputedStyle(document.body);
-        #     const textColor = bodyStyle.getPropertyValue('--body-text-color') ||
-        #                      bodyStyle.color ||
-        #                      (bodyStyle.backgroundColor === 'rgb(255, 255, 255)' ? '#000000' : '#ffffff');
-        #     // Update all plot text elements
-        #     document.querySelectorAll('.plotly svg text').forEach(text => {
-        #         text.setAttribute('fill', textColor);
-        #     });
-        # }
-        # // Update colors on load and theme change
-        # window.addEventListener('load', updatePlotColors);
-        # // Watch for theme changes
-        # const observer = new MutationObserver(updatePlotColors);
-        # observer.observe(document.body, {
-        #     attributes: true,
-        #     attributeFilter: ['class', 'style']
-        # });
-        # // Also watch for CSS variable changes
-        # if (window.CSS && CSS.supports('color', 'var(--body-text-color)')) {
-        #     const style = document.createElement('style');
-        #     style.textContent = `
-        #         .plotly svg text {
-        #             fill: var(--body-text-color, currentColor) !important;
-        #         }
-        #     `;
-        #     document.head.appendChild(style);
-        # }
-        # """,
     ) as app:
         gr.Markdown("""
         # 🎬 Frame Arena: Frame by frame comparisons of any videos
@@ -1560,7 +1516,7 @@ def create_app():
         # Add examples at the top for better UX
         if example_pairs:
             gr.Markdown("### 📁 Example Video Comparisons")
-            examples_component_top = gr.Examples(
+            gr.Examples(
                 examples=example_pairs,
                 inputs=[video1_input, video2_input],
                 label="Click any example to load video pairs:",
@@ -1618,28 +1574,11 @@ def create_app():
                     lines=3,
                 )
 
-                # Individual metric plots
-                with gr.Row():
-                    ssim_plot = gr.Plot(label="SSIM", show_label=True)
-                    psnr_plot = gr.Plot(label="PSNR", show_label=True)
-
-                with gr.Row():
-                    mse_plot = gr.Plot(label="MSE", show_label=True)
-                    phash_plot = gr.Plot(label="pHash", show_label=True)
-
-                with gr.Row():
-                    color_plot = gr.Plot(label="Color Histogram", show_label=True)
-                    sharpness_plot = gr.Plot(label="Sharpness", show_label=True)
-
-        # Add comprehensive usage guide
-        with gr.Accordion("📖 Usage Guide & Metrics Reference", open=False):
-            with gr.Row() as info_section:
-                with gr.Column():
-                    status_output = gr.Textbox(
-                        label="Status", interactive=False, lines=8
-                    )
-                with gr.Column():
-                    gr.Markdown("""
+                # Add comprehensive usage guide underneath frame information & metrics
+                with gr.Accordion("📖 Usage Guide & Metrics Reference", open=False):
+                    with gr.Row():
+                        with gr.Column():
+                            gr.Markdown("""
 ### 📊 Metrics Explained
 - **SSIM**: Structural Similarity (1.0 = identical structure, 0.0 = completely different)
 - **PSNR**: Peak Signal-to-Noise Ratio in dB (higher = better quality, less noise)
@@ -1648,11 +1587,15 @@ def create_app():
 - **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)
-                    """)
+                            """)
+                        with gr.Column() as info_section:
+                            status_output = gr.Textbox(
+                                label="Status", interactive=False, lines=16
+                            )
 
-            with gr.Row():
-                with gr.Column():
-                    gr.Markdown("""
+                    with gr.Row():
+                        with gr.Column():
+                            gr.Markdown("""
 ### 🎯 Quality Assessment Scale (Research-Based Thresholds)
 **SSIM Scale** (based on human perception studies):
 - 🟢 **Excellent (≥0.9)**: Visually indistinguishable differences
@@ -1671,9 +1614,9 @@ def create_app():
 - 🔵 **Similar (≤100)**: Small differences, good quality preservation
 - 🟡 **Moderately Different (≤200)**: Noticeable but acceptable differences
 - 🔴 **Very Different (>200)**: Significant pixel-level changes
-                    """)
-                with gr.Column():
-                    gr.Markdown("""
+                            """)
+                        with gr.Column():
+                            gr.Markdown("""
 ### 🔍 Understanding Comparisons
 **Comparison Analysis**: Shows how similar/different the videos are
 - Most metrics indicate **similarity** - not which video "wins"
@@ -1690,7 +1633,20 @@ def create_app():
 - **Range**: 0.0 to 1.0 (higher = more similar videos overall)
 - **Purpose**: Provides a single metric when you need one overall assessment
 - **Limitation**: Different metrics may disagree; check individual metrics for details
-                    """)
+                            """)
+
+                # Individual metric plots
+                with gr.Row():
+                    ssim_plot = gr.Plot(label="SSIM", show_label=True)
+                    psnr_plot = gr.Plot(label="PSNR", show_label=True)
+
+                with gr.Row():
+                    mse_plot = gr.Plot(label="MSE", show_label=True)
+                    phash_plot = gr.Plot(label="pHash", show_label=True)
+
+                with gr.Row():
+                    color_plot = gr.Plot(label="Color Histogram", show_label=True)
+                    sharpness_plot = gr.Plot(label="Sharpness", show_label=True)
 
         # Connect examples to auto-loading
         if example_pairs:
@@ -1822,9 +1778,41 @@ def create_app():
                 gr.Row(visible=False),  # info_section
             )
 
-        # Enhanced auto-load function with more debug info
+        # Enhanced auto-load function with debouncing to prevent multiple rapid calls
+        last_processed_pair = {"video1": None, "video2": None}
+
         def enhanced_auto_load(video1, video2):
             print(f"DEBUG: Input change detected! video1={video1}, video2={video2}")
+
+            # Simple debouncing: skip if same video pair was just processed
+            if (
+                last_processed_pair["video1"] == video1
+                and last_processed_pair["video2"] == video2
+            ):
+                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(),
+                )
+
+            last_processed_pair["video1"] = video1
+            last_processed_pair["video2"] = video2
+
             return auto_load_when_examples_change(video1, video2)
 
         # Auto-load when both video inputs change (triggered by examples)