Enhance SSIM and overall quality plots with dynamic y-axis scaling to emphasize differences. Add area fills for better visualization and update hover templates for improved data presentation. Introduce quality variation indicators in overall quality assessment. Refactor layout for improved user experience and add comprehensive usage guide with metric explanations.

app.py

@@ -364,7 +364,42 @@ class FrameMetrics:
         # 1. SSIM Plot
         ssim_frames, ssim_values = get_valid_data("ssim")
         if ssim_values:
+            # Calculate dynamic y-axis range for SSIM to highlight differences
+            min_ssim = min(ssim_values)
+            max_ssim = max(ssim_values)
+            ssim_range = max_ssim - min_ssim
+
+            # If there's very little variation, zoom in to show differences
+            if ssim_range < 0.05:
+                # For small variations, zoom in to show differences better
+                center = (min_ssim + max_ssim) / 2
+                padding = max(
+                    0.02, ssim_range * 2
+                )  # At least 0.02 range or 2x actual range
+                y_min = max(0, center - padding)
+                y_max = min(1, center + padding)
+            else:
+                # For larger variations, add some padding
+                padding = ssim_range * 0.15  # 15% padding
+                y_min = max(0, min_ssim - padding)
+                y_max = min(1, max_ssim + padding)
+
             fig_ssim = go.Figure()
+
+            # Add area fill to emphasize the curve
+            fig_ssim.add_trace(
+                go.Scatter(
+                    x=ssim_frames,
+                    y=[y_min] * len(ssim_frames),
+                    mode="lines",
+                    line=dict(
+                        color="rgba(0,0,255,0)"
+                    ),  # Transparent line for area base
+                    showlegend=False,
+                    hoverinfo="skip",
+                )
+            )
+
             fig_ssim.add_trace(
                 go.Scatter(
                     x=ssim_frames,
@@ -372,8 +407,12 @@ class FrameMetrics:
                     mode="lines+markers",
                     name="SSIM",
                     line=dict(color="blue", width=3),
-                    marker=dict(size=6),
-                    hovertemplate="<b>Frame %{x}</b><br>SSIM: %{y:.4f}<extra></extra>",
+                    marker=dict(
+                        size=6, color="blue", line=dict(color="darkblue", width=1)
+                    ),
+                    hovertemplate="<b>Frame %{x}</b><br>SSIM: %{y:.5f}<extra></extra>",
+                    fill="tonexty",
+                    fillcolor="rgba(0,0,255,0.1)",  # Light blue fill
                 )
             )
 
@@ -391,9 +430,18 @@ class FrameMetrics:
                 plot_bgcolor="rgba(0,0,0,0)",
                 paper_bgcolor="rgba(0,0,0,0)",
                 showlegend=False,
+                dragmode=False,
+                hovermode="x unified",
+            )
+            fig_ssim.update_xaxes(
+                title_text="Frame", gridcolor="rgba(128,128,128,0.4)", fixedrange=True
+            )
+            fig_ssim.update_yaxes(
+                title_text="SSIM",
+                range=[y_min, y_max],
+                gridcolor="rgba(128,128,128,0.4)",
+                fixedrange=True,
             )
-            fig_ssim.update_xaxes(title_text="Frame")
-            fig_ssim.update_yaxes(title_text="SSIM", range=[0, 1.05])
             plots["ssim"] = fig_ssim
 
         # 2. PSNR Plot
@@ -426,9 +474,17 @@ class FrameMetrics:
                 plot_bgcolor="rgba(0,0,0,0)",
                 paper_bgcolor="rgba(0,0,0,0)",
                 showlegend=False,
+                dragmode=False,
+                hovermode="x unified",
+            )
+            fig_psnr.update_xaxes(
+                title_text="Frame", gridcolor="rgba(128,128,128,0.4)", fixedrange=True
+            )
+            fig_psnr.update_yaxes(
+                title_text="PSNR (dB)",
+                gridcolor="rgba(128,128,128,0.4)",
+                fixedrange=True,
             )
-            fig_psnr.update_xaxes(title_text="Frame")
-            fig_psnr.update_yaxes(title_text="PSNR (dB)")
             plots["psnr"] = fig_psnr
 
         # 3. MSE Plot
@@ -461,9 +517,15 @@ class FrameMetrics:
                 plot_bgcolor="rgba(0,0,0,0)",
                 paper_bgcolor="rgba(0,0,0,0)",
                 showlegend=False,
+                dragmode=False,
+                hovermode="x unified",
+            )
+            fig_mse.update_xaxes(
+                title_text="Frame", gridcolor="rgba(128,128,128,0.4)", fixedrange=True
+            )
+            fig_mse.update_yaxes(
+                title_text="MSE", gridcolor="rgba(128,128,128,0.4)", fixedrange=True
             )
-            fig_mse.update_xaxes(title_text="Frame")
-            fig_mse.update_yaxes(title_text="MSE")
             plots["mse"] = fig_mse
 
         # 4. pHash Plot
@@ -496,9 +558,17 @@ class FrameMetrics:
                 plot_bgcolor="rgba(0,0,0,0)",
                 paper_bgcolor="rgba(0,0,0,0)",
                 showlegend=False,
+                dragmode=False,
+                hovermode="x unified",
+            )
+            fig_phash.update_xaxes(
+                title_text="Frame", gridcolor="rgba(128,128,128,0.4)", fixedrange=True
+            )
+            fig_phash.update_yaxes(
+                title_text="pHash Similarity",
+                gridcolor="rgba(128,128,128,0.4)",
+                fixedrange=True,
             )
-            fig_phash.update_xaxes(title_text="Frame")
-            fig_phash.update_yaxes(title_text="pHash Similarity")
             plots["phash"] = fig_phash
 
         # 5. Color Histogram Correlation Plot
@@ -531,9 +601,17 @@ class FrameMetrics:
                 plot_bgcolor="rgba(0,0,0,0)",
                 paper_bgcolor="rgba(0,0,0,0)",
                 showlegend=False,
+                dragmode=False,
+                hovermode="x unified",
+            )
+            fig_hist.update_xaxes(
+                title_text="Frame", gridcolor="rgba(128,128,128,0.4)", fixedrange=True
+            )
+            fig_hist.update_yaxes(
+                title_text="Color Histogram Correlation",
+                gridcolor="rgba(128,128,128,0.4)",
+                fixedrange=True,
             )
-            fig_hist.update_xaxes(title_text="Frame")
-            fig_hist.update_yaxes(title_text="Color Histogram Correlation")
             plots["color_hist"] = fig_hist
 
         # 6. Sharpness Comparison Plot
@@ -586,9 +664,17 @@ class FrameMetrics:
                 legend=dict(
                     orientation="h", yanchor="bottom", y=1.02, xanchor="center", x=0.5
                 ),
+                dragmode=False,
+                hovermode="x unified",
+            )
+            fig_sharp.update_xaxes(
+                title_text="Frame", gridcolor="rgba(128,128,128,0.4)", fixedrange=True
+            )
+            fig_sharp.update_yaxes(
+                title_text="Sharpness",
+                gridcolor="rgba(128,128,128,0.4)",
+                fixedrange=True,
             )
-            fig_sharp.update_xaxes(title_text="Frame")
-            fig_sharp.update_yaxes(title_text="Sharpness")
             plots["sharpness"] = fig_sharp
 
         # 7. Overall Quality Score Plot (Combination of metrics)
@@ -645,7 +731,42 @@ class FrameMetrics:
                     ]
                     overall_quality.append(sum(frame_scores) / len(frame_scores))
 
+                # Calculate dynamic y-axis range to emphasize differences
+                min_quality = min(overall_quality)
+                max_quality = max(overall_quality)
+                quality_range = max_quality - min_quality
+
+                # If there's very little variation, use a smaller range to emphasize small differences
+                if quality_range < 0.08:
+                    # For small variations, zoom in to show differences better
+                    center = (min_quality + max_quality) / 2
+                    padding = max(
+                        0.04, quality_range * 2
+                    )  # At least 0.04 range or 2x the actual range
+                    y_min = max(0, center - padding)
+                    y_max = min(1, center + padding)
+                else:
+                    # For larger variations, add some padding
+                    padding = quality_range * 0.15  # 15% padding
+                    y_min = max(0, min_quality - padding)
+                    y_max = min(1, max_quality + padding)
+
                 fig_overall = go.Figure()
+
+                # Add area fill to emphasize the quality curve
+                fig_overall.add_trace(
+                    go.Scatter(
+                        x=common_frames,
+                        y=[y_min] * len(common_frames),
+                        mode="lines",
+                        line=dict(
+                            color="rgba(255,215,0,0)"
+                        ),  # Transparent line for area base
+                        showlegend=False,
+                        hoverinfo="skip",
+                    )
+                )
+
                 fig_overall.add_trace(
                     go.Scatter(
                         x=common_frames,
@@ -653,14 +774,41 @@ class FrameMetrics:
                         mode="lines+markers",
                         name="Overall Quality",
                         line=dict(color="gold", width=4),
-                        marker=dict(size=8),
-                        hovertemplate="<b>Frame %{x}</b><br>Overall Quality: %{y:.3f}<br><i>Combined from: "
+                        marker=dict(
+                            size=8, color="gold", line=dict(color="orange", width=2)
+                        ),
+                        hovertemplate="<b>Frame %{x}</b><br>Overall Quality: %{y:.5f}<br><i>Combined from: "
                         + ", ".join(component_names)
                         + "</i><extra></extra>",
                         fill="tonexty",
+                        fillcolor="rgba(255,215,0,0.15)",  # Semi-transparent gold fill
                     )
                 )
 
+                # 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(
                         x=current_frame,
@@ -675,10 +823,19 @@ class FrameMetrics:
                     plot_bgcolor="rgba(0,0,0,0)",
                     paper_bgcolor="rgba(0,0,0,0)",
                     showlegend=False,
+                    dragmode=False,
+                    hovermode="x unified",
+                )
+                fig_overall.update_xaxes(
+                    title_text="Frame",
+                    gridcolor="rgba(128,128,128,0.4)",
+                    fixedrange=True,
                 )
-                fig_overall.update_xaxes(title_text="Frame")
                 fig_overall.update_yaxes(
-                    title_text="Overall Quality Score", range=[0, 1.05]
+                    title_text="Overall Quality Score",
+                    range=[y_min, y_max],
+                    gridcolor="rgba(128,128,128,0.4)",
+                    fixedrange=True,
                 )
                 plots["overall"] = fig_overall
 
@@ -1091,15 +1248,65 @@ class VideoFrameComparator:
                 # Add overall assessment with formula explanation
                 if avg_quality >= 0.9:
                     overall = "✨ Excellent Overall"
+                    quality_indicator = "🟢"
                 elif avg_quality >= 0.8:
                     overall = "✅ Good Overall"
+                    quality_indicator = "🔵"
                 elif avg_quality >= 0.6:
                     overall = "⚠️ Fair Overall"
+                    quality_indicator = "🟡"
                 else:
                     overall = "❌ Poor Overall"
-
-                info += f"\n🎯 Overall Quality: {avg_quality:.3f} ({overall})"
-                info += f"\n   Formula: Average of {' + '.join(metric_contributions)} = {avg_quality:.3f}"
+                    quality_indicator = "🔴"
+
+                # Calculate quality variation across all frames to show differences
+                quality_variation = ""
+                if self.computed_metrics and len(self.computed_metrics) > 1:
+                    # Calculate overall quality for all frames to show variation
+                    all_quality_scores = []
+                    for metric in self.computed_metrics:
+                        frame_quality = 0
+                        frame_quality_count = 0
+
+                        if metric.get("ssim") is not None:
+                            frame_quality += metric["ssim"]
+                            frame_quality_count += 1
+                        if metric.get("psnr") is not None:
+                            frame_quality += min(metric["psnr"] / 50, 1.0)
+                            frame_quality_count += 1
+                        if metric.get("phash") is not None:
+                            frame_quality += metric["phash"]
+                            frame_quality_count += 1
+
+                        if frame_quality_count > 0:
+                            all_quality_scores.append(
+                                frame_quality / frame_quality_count
+                            )
+
+                    if len(all_quality_scores) > 1:
+                        min_qual = min(all_quality_scores)
+                        max_qual = max(all_quality_scores)
+                        variation = max_qual - min_qual
+
+                        if variation > 0.08:
+                            quality_variation = (
+                                f" | 📊 High Variation (Δ{variation:.4f})"
+                            )
+                        elif variation > 0.04:
+                            quality_variation = (
+                                f" | 📊 Moderate Variation (Δ{variation:.4f})"
+                            )
+                        elif variation > 0.02:
+                            quality_variation = (
+                                f" | 📊 Low Variation (Δ{variation:.4f})"
+                            )
+                        else:
+                            quality_variation = (
+                                f" | 📊 Stable Quality (Δ{variation:.4f})"
+                            )
+
+                info += f"\n🎯 Overall Quality: {quality_indicator} {avg_quality:.5f} ({overall}){quality_variation}"
+                info += f"\n   💡 Formula: Average of {' + '.join(metric_contributions)} = {avg_quality:.5f}"
 
         return info
 
@@ -1134,12 +1341,20 @@ def load_examples_from_json(json_file_path="data.json"):
                         # OpenCV will handle the validation during actual loading
                         valid_videos.append(video_path)
                         print(f"Added video URL: {video_path}")
-                    elif os.path.exists(video_path):
-                        # For local files, check existence
-                        valid_videos.append(video_path)
-                        print(f"Added local video file: {video_path}")
                     else:
-                        print(f"Warning: Local video file not found: {video_path}")
+                        # Convert to absolute path for local files
+                        abs_path = os.path.abspath(video_path)
+                        if os.path.exists(abs_path):
+                            valid_videos.append(abs_path)
+                            print(f"Added local video file: {abs_path}")
+                        elif os.path.exists(video_path):
+                            # Try relative path as fallback
+                            valid_videos.append(video_path)
+                            print(f"Added local video file: {video_path}")
+                        else:
+                            print(
+                                f"Warning: Local video file not found: {video_path} (abs: {abs_path})"
+                            )
 
             # Add to examples if we have valid videos
             if len(valid_videos) == 2:
@@ -1198,15 +1413,107 @@ def get_all_videos_from_json(json_file_path="data.json"):
 def create_app():
     comparator = VideoFrameComparator()
     example_pairs = load_examples_from_json()
+    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",
         # theme=gr.themes.Soft(),
+        css="""
+        /* Ensure plots adapt to theme */
+        .plotly .main-svg {
+            color: var(--body-text-color, #000) !important;
+        }
+        /* Grid visibility for both themes */
+        .plotly .gridlayer .xgrid, .plotly .gridlayer .ygrid {
+            stroke-opacity: 0.4 !important;
+        }
+        /* Axis text color adaptation */
+        .plotly .xtick text, .plotly .ytick text {
+            fill: var(--body-text-color, #000) !important;
+        }
+        /* Axis title color adaptation - multiple selectors for better coverage */
+        .plotly .g-xtitle, .plotly .g-ytitle,
+        .plotly .xtitle, .plotly .ytitle,
+        .plotly text[class*="xtitle"], .plotly text[class*="ytitle"],
+        .plotly .infolayer .g-xtitle, .plotly .infolayer .g-ytitle {
+            fill: var(--body-text-color, #000) !important;
+        }
+        /* Additional axis title selectors */
+        .plotly .subplot .xtitle, .plotly .subplot .ytitle,
+        .plotly .cartesianlayer .xtitle, .plotly .cartesianlayer .ytitle {
+            fill: var(--body-text-color, #000) !important;
+        }
+        /* SVG text elements in plots */
+        .plotly svg text {
+            fill: var(--body-text-color, #000) !important;
+        }
+        /* Legend text color */
+        .plotly .legendtext, .plotly .legend text {
+            fill: var(--body-text-color, #000) !important;
+        }
+        /* Hover label adaptation */
+        .plotly .hoverlayer .hovertext, .plotly .hovertext {
+            fill: var(--body-text-color, #000) !important;
+            color: var(--body-text-color, #000) !important;
+        }
+        /* Annotation text */
+        .plotly .annotation-text, .plotly .annotation {
+            fill: var(--body-text-color, #000) !important;
+        }
+        /* Disable plot interactions except hover */
+        .plotly .modebar {
+            display: none !important;
+        }
+        .plotly .plot-container .plotly {
+            pointer-events: none !important;
+        }
+        .plotly .plot-container .plotly .hoverlayer {
+            pointer-events: auto !important;
+        }
+        .plotly .plot-container .plotly .hovertext {
+            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
 
+        > 🎉 This tool has been created to celebrate our Wan 2.2 [text-to-video](https://replicate.com/wan-video/wan-2.2-t2v-480p-fast) and [image-to-video](https://replicate.com/wan-video/wan-2.2-i2v-a14b) endpoints on Replicate. Want to know more? Check out [our blog](https://www.wan22.com/blog/video-optimization-on-replicate)!
+
         - Upload videos in common formats with the same number of frames (MP4, AVI, MOV, etc.) or use URLs
         - **7 Quality Metrics**: SSIM, PSNR, MSE, pHash, Color Histogram, Sharpness + Overall Quality
         - **Individual Visualization**: Each metric gets its own dedicated plot
@@ -1249,14 +1556,15 @@ def create_app():
                     type="filepath",
                 )
 
-        # Add examples if available (this auto-populates inputs when clicked)
+        # Add examples at the top for better UX
         if example_pairs:
             gr.Markdown("### 📁 Example Video Comparisons")
-            gr.Examples(
+            examples_component_top = gr.Examples(
                 examples=example_pairs,
                 inputs=[video1_input, video2_input],
                 label="Click any example to load video pairs:",
                 examples_per_page=10,
+                run_on_click=False,  # We'll handle this manually
             )
 
         load_btn = gr.Button("🔄 Load Videos", variant="primary", size="lg")
@@ -1285,21 +1593,14 @@ def create_app():
                 step=1,
                 value=0,
                 label="Frame Number",
-                interactive=False,
+                interactive=True,
             )
 
         # Comprehensive metrics visualization (initially hidden)
         metrics_section = gr.Row(visible=False)
         with metrics_section:
             with gr.Column():
-                # Frame info moved above the plot
-                frame_info = gr.Textbox(
-                    label="Frame Information & Metrics",
-                    interactive=False,
-                    value="",
-                    lines=3,
-                )
-                gr.Markdown("### 📊 Individual Metric Analysis")
+                gr.Markdown("### 📊 Metric Analysis")
 
                 # Overall quality plot
                 with gr.Row():
@@ -1308,6 +1609,14 @@ def create_app():
                         show_label=True,
                     )
 
+                # Frame info moved below overall quality plot
+                frame_info = gr.Textbox(
+                    label="Frame Information & Metrics",
+                    interactive=False,
+                    value="",
+                    lines=3,
+                )
+
                 # Individual metric plots
                 with gr.Row():
                     ssim_plot = gr.Plot(label="SSIM", show_label=True)
@@ -1321,14 +1630,81 @@ def create_app():
                     color_plot = gr.Plot(label="Color Histogram", show_label=True)
                     sharpness_plot = gr.Plot(label="Sharpness", show_label=True)
 
-        # Status and frame info (moved below plots, initially hidden)
-        info_section = gr.Row(visible=False)
-        with info_section:
-            with gr.Column():
-                status_output = gr.Textbox(label="Status", interactive=False, lines=8)
+        # 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("""
+### 📊 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)
+- **MSE**: Mean Squared Error (lower = more similar pixel values)
+- **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)
+                    """)
+
+            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
+- 🔵 **Good (≥0.8)**: Minor visible differences, still high quality
+- 🟡 **Fair (≥0.6)**: Noticeable differences, acceptable quality
+- 🔴 **Poor (<0.6)**: Significant visible artifacts and differences
+
+**PSNR Scale** (standard video quality benchmarks):
+- 🟢 **Excellent (≥40dB)**: Professional broadcast quality
+- 🔵 **Good (≥30dB)**: High consumer video quality
+- 🟡 **Fair (≥20dB)**: Acceptable for web streaming
+- 🔴 **Poor (<20dB)**: Low quality with visible compression artifacts
+
+**MSE Scale** (pixel difference thresholds):
+- 🟢 **Very Similar (≤50)**: Minimal pixel-level differences
+- 🔵 **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("""
+### 🔍 Understanding Comparisons
+**Comparison Analysis**: Shows how similar/different the videos are
+- Most metrics indicate **similarity** - not which video "wins"
+- Higher SSIM/PSNR/pHash/Color = more similar videos
+- Lower MSE = more similar videos
+
+**Individual Quality**: Shows the quality of each video separately
+- Sharpness comparison shows which video has more detail
+- Significance levels: 🔴 MAJOR (>20%), 🟡 MODERATE (10-20%), 🔵 MINOR (5-10%), 🟢 NEGLIGIBLE (<5%)
+
+**Overall Quality**: Combines multiple metrics to provide a single similarity score
+- **Formula**: Average of [SSIM + normalized_PSNR + pHash]
+- **PSNR Normalization**: PSNR values are divided by 50dB and capped at 1.0
+- **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
+                    """)
+
+        # Connect examples to auto-loading
+        if example_pairs:
+            # Use a manual approach to handle examples click
+            def examples_manual_handler(video1, video2):
+                print("DEBUG: Examples clicked manually!")
+                return load_videos_handler(video1, video2)
+
+            # Since we can't directly attach to examples, we'll use the change events
 
         # Event handlers
         def load_videos_handler(video1, video2):
+            print(
+                f"DEBUG: load_videos_handler called with video1={video1}, video2={video2}"
+            )
             status, max_frames, frame1, frame2, info, plots = comparator.load_videos(
                 video1, video2
             )
@@ -1369,7 +1745,7 @@ def create_app():
                 overall_fig,  # overall_plot
                 gr.Row(visible=videos_loaded),  # frame_controls
                 gr.Row(visible=videos_loaded),  # frame_display
-                gr.Row(visible=videos_loaded),  # metrics_section
+                gr.Row(visible=videos_loaded and plots is not None),  # metrics_section
                 gr.Row(visible=videos_loaded),  # info_section
             )
 
@@ -1385,7 +1761,6 @@ def create_app():
                     None,
                     None,
                     None,
-                    None,
                 )
 
             frame1, frame2 = comparator.get_frames_at_index(frame_index)
@@ -1416,10 +1791,15 @@ def create_app():
 
         # Auto-load when examples populate the inputs
         def auto_load_when_examples_change(video1, video2):
+            print(
+                f"DEBUG: auto_load_when_examples_change called with video1={video1}, video2={video2}"
+            )
             # Only auto-load if both inputs are provided (from examples)
             if video1 and video2:
+                print("DEBUG: Both videos present, calling load_videos_handler")
                 return load_videos_handler(video1, video2)
             # If only one or no videos, return default empty state
+            print("DEBUG: Not both videos present, returning default state")
             return (
                 "Please upload videos or select an example",  # status_output
                 gr.Slider(
@@ -1427,7 +1807,7 @@ def create_app():
                 ),  # frame_slider
                 None,  # frame1_output
                 None,  # frame2_output
-                "",  # frame_info (now in metrics_section)
+                "",  # frame_info
                 None,  # ssim_plot
                 None,  # psnr_plot
                 None,  # mse_plot
@@ -1441,9 +1821,14 @@ def create_app():
                 gr.Row(visible=False),  # info_section
             )
 
-        # Connect events
-        load_btn.click(
-            fn=load_videos_handler,
+        # Enhanced auto-load function with more debug info
+        def enhanced_auto_load(video1, video2):
+            print(f"DEBUG: Input change detected! video1={video1}, video2={video2}")
+            return auto_load_when_examples_change(video1, video2)
+
+        # Auto-load when both video inputs change (triggered by examples)
+        video1_input.change(
+            fn=enhanced_auto_load,
             inputs=[video1_input, video2_input],
             outputs=[
                 status_output,
@@ -1465,9 +1850,8 @@ def create_app():
             ],
         )
 
-        # Auto-load when both video inputs change (triggered by examples)
-        video1_input.change(
-            fn=auto_load_when_examples_change,
+        video2_input.change(
+            fn=enhanced_auto_load,
             inputs=[video1_input, video2_input],
             outputs=[
                 status_output,
@@ -1489,8 +1873,13 @@ def create_app():
             ],
         )
 
-        video2_input.change(
-            fn=auto_load_when_examples_change,
+        # Manual load button event handler with debug
+        def debug_load_videos_handler(video1, video2):
+            print(f"DEBUG: Load button clicked! video1={video1}, video2={video2}")
+            return load_videos_handler(video1, video2)
+
+        load_btn.click(
+            fn=debug_load_videos_handler,
             inputs=[video1_input, video2_input],
             outputs=[
                 status_output,
@@ -1529,73 +1918,16 @@ def create_app():
             ],
         )
 
-        # Add comprehensive usage guide
-        with gr.Accordion("📖 Usage Guide & Metrics Reference", open=False):
-            with gr.Accordion("📊 Metrics Explained", open=False):
-                gr.Markdown("""
-- **SSIM**: Structural Similarity (1.0 = identical structure, 0.0 = completely different)
-- **PSNR**: Peak Signal-to-Noise Ratio in dB (higher = better quality, less noise)
-- **MSE**: Mean Squared Error (lower = more similar pixel values)
-- **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)
-                """)
-
-            with gr.Accordion(
-                "🎯 Quality Assessment Scale (Research-Based Thresholds)", open=False
-            ):
-                gr.Markdown("""
-**SSIM Scale** (based on human perception studies):
-- 🟢 **Excellent (≥0.9)**: Visually indistinguishable differences
-- 🔵 **Good (≥0.8)**: Minor visible differences, still high quality
-- 🟡 **Fair (≥0.6)**: Noticeable differences, acceptable quality
-- 🔴 **Poor (<0.6)**: Significant visible artifacts and differences
-
-**PSNR Scale** (standard video quality benchmarks):
-- 🟢 **Excellent (≥40dB)**: Professional broadcast quality
-- 🔵 **Good (≥30dB)**: High consumer video quality
-- 🟡 **Fair (≥20dB)**: Acceptable for web streaming
-- 🔴 **Poor (<20dB)**: Low quality with visible compression artifacts
-
-**MSE Scale** (pixel difference thresholds):
-- 🟢 **Very Similar (≤50)**: Minimal pixel-level differences
-- 🔵 **Similar (≤100)**: Small differences, good quality preservation
-- 🟡 **Moderately Different (≤200)**: Noticeable but acceptable differences
-- 🔴 **Very Different (>200)**: Significant pixel-level changes
-                """)
-
-            with gr.Accordion("🔍 Understanding Comparisons", open=False):
-                gr.Markdown("""
-**Comparison Analysis**: Shows how similar/different the videos are
-- Most metrics indicate **similarity** - not which video "wins"
-- Higher SSIM/PSNR/pHash/Color = more similar videos
-- Lower MSE = more similar videos
-
-**Individual Quality**: Shows the quality of each video separately
-- Sharpness comparison shows which video has more detail
-- Significance levels: 🔴 MAJOR (>20%), 🟡 MODERATE (10-20%), 🔵 MINOR (5-10%), 🟢 NEGLIGIBLE (<5%)
-
-**Overall Quality**: Combines multiple metrics to provide a single similarity score
-- **Formula**: Average of [SSIM + normalized_PSNR + pHash]
-- **PSNR Normalization**: PSNR values are divided by 50dB and capped at 1.0
-- **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
-                """)
-
-            with gr.Accordion("📁 Configuration", open=False):
-                gr.Markdown(
-                    f"{'Loaded ' + str(len(example_pairs)) + ' example comparisons from data.json' if example_pairs else 'No examples found in data.json'}<br>"
-                    f"{'Available videos: ' + str(len(all_videos)) + ' files' if all_videos else ''}"
-                )
-
     return app
 
 
 def main():
     app = create_app()
-    app.launch(server_name="0.0.0.0", server_port=7860, share=False, debug=True)
+    app.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+    )
 
 
 if __name__ == "__main__":