Refactor video quality analysis to create individual metric plots instead of a combined dashboard. Update README to reflect new project name "Frame Arena" and enhance description of features and functionality.

README.md

@@ -1,6 +1,6 @@
 ---
-title: FrameLens
-emoji: 👀
+title: Frame Arena
+emoji: 🎬
 colorFrom: purple
 colorTo: yellow
 sdk: gradio
@@ -9,7 +9,19 @@ app_file: app.py
 pinned: true
 python_version: 3.12
 license: apache-2.0
-short_description: Tool for frame-by-frame video or image metric comparison
+short_description: Frame by frame video comparison tool with comprehensive quality metrics
 ---
 
+# Frame Arena: Frame by frame comparisons of any videos
+
+A powerful tool to compare videos frame by frame and side by side using comprehensive quality metrics including SSIM, PSNR, MSE, pHash, Color Histogram Correlation, Sharpness Analysis, and an Overall Quality score that combines multiple metrics.
+
+### 💡 How Frame Arena Works:
+
+- Upload videos in common formats (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
+- **Real-time Analysis**: Navigate frames with live metric updates
+- **Smart Comparisons**: Understand differences between videos per metric
+
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -7,7 +7,6 @@ import imagehash
 import numpy as np
 import plotly.graph_objects as go
 from PIL import Image
-from plotly.subplots import make_subplots
 from scipy.stats import pearsonr
 from skimage.metrics import mean_squared_error as mse_skimage
 from skimage.metrics import peak_signal_noise_ratio as psnr_skimage
@@ -343,44 +342,14 @@ class FrameMetrics:
 
         return summary
 
-    def create_modern_plot(self, metrics_list, current_frame=0):
-        """Create a comprehensive multi-metric visualization with shared hover"""
+    def create_individual_metric_plots(self, metrics_list, current_frame=0):
+        """Create individual plots for each metric with frame on x-axis"""
         if not metrics_list:
             return None
 
-        # Extract frame indices and metric values
+        # Extract frame indices
         frame_indices = [m["frame_index"] for m in metrics_list]
 
-        # Create 3x2 subplots with quality overview at the top
-        fig = make_subplots(
-            rows=3,
-            cols=2,
-            subplot_titles=(
-                "Quality Overview (Combined Score)",
-                "",  # Empty title for merged cell
-                "SSIM",
-                "PSNR vs MSE",
-                "Perceptual Hash vs Color Histogram",
-                "Individual Sharpness (Video 1 vs Video 2)",
-            ),
-            specs=[
-                [
-                    {"colspan": 2, "secondary_y": False},
-                    None,
-                ],  # Row 1: Quality Overview (single axis)
-                [
-                    {"secondary_y": False},
-                    {"secondary_y": True},
-                ],  # Row 2: SSIM (single axis), PSNR vs MSE
-                [
-                    {"secondary_y": True},
-                    {"secondary_y": True},
-                ],  # Row 3: pHash vs Color, Individual Sharpness
-            ],
-            vertical_spacing=0.12,
-            horizontal_spacing=0.1,
-        )
-
         # Helper function to get valid data
         def get_valid_data(metric_name):
             values = [m.get(metric_name) for m in metrics_list]
@@ -389,293 +358,335 @@ class FrameMetrics:
             valid_frames = [frame_indices[i] for i in valid_indices]
             return valid_frames, valid_values
 
-        # Plot 1: Quality Overview - Combined Score Only (row 1, full width)
-        ssim_frames, ssim_values = get_valid_data("ssim")
-        psnr_frames, psnr_values = get_valid_data("psnr")
-
-        # Show only combined quality score
-        if ssim_values and psnr_values and len(ssim_values) == len(psnr_values):
-            # Normalize metrics to 0-1 scale for comparison
-            ssim_norm = np.array(ssim_values)
-            psnr_norm = np.clip(np.array(psnr_values) / 50, 0, 1)
-            quality_score = (ssim_norm + psnr_norm) / 2
-
-            fig.add_trace(
-                go.Scatter(
-                    x=ssim_frames,
-                    y=quality_score,
-                    mode="lines+markers",
-                    name="Quality Score ↑",
-                    line=dict(color="gold", width=4),
-                    marker=dict(size=8),
-                    hovertemplate="<b>Frame %{x}</b><br>Quality Score: %{y:.3f}<extra></extra>",
-                    fill="tonexty",
-                ),
-                row=1,
-                col=1,
-            )
+        # Create individual plots for each metric
+        plots = {}
 
-        # Plot 2: SSIM (row 2, col 1)
+        # 1. SSIM Plot
+        ssim_frames, ssim_values = get_valid_data("ssim")
         if ssim_values:
-            fig.add_trace(
+            fig_ssim = go.Figure()
+            fig_ssim.add_trace(
                 go.Scatter(
                     x=ssim_frames,
                     y=ssim_values,
                     mode="lines+markers",
-                    name="SSIM ↑",
+                    name="SSIM",
                     line=dict(color="blue", width=3),
                     marker=dict(size=6),
                     hovertemplate="<b>Frame %{x}</b><br>SSIM: %{y:.4f}<extra></extra>",
-                ),
-                row=2,
-                col=1,
+                )
             )
 
-        # Get pHash data for later use
-        phash_frames, phash_values = get_valid_data("phash")
+            if current_frame is not None:
+                fig_ssim.add_vline(
+                    x=current_frame,
+                    line_dash="dash",
+                    line_color="red",
+                    line_width=2,
+                )
 
-        # Plot 3: PSNR vs MSE (row 2, col 2) - keep as is since already shows individual metrics
+            fig_ssim.update_layout(
+                height=300,
+                margin=dict(t=20, b=40, l=60, r=20),
+                plot_bgcolor="rgba(0,0,0,0)",
+                paper_bgcolor="rgba(0,0,0,0)",
+                showlegend=False,
+            )
+            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
+        psnr_frames, psnr_values = get_valid_data("psnr")
         if psnr_values:
-            fig.add_trace(
+            fig_psnr = go.Figure()
+            fig_psnr.add_trace(
                 go.Scatter(
                     x=psnr_frames,
                     y=psnr_values,
                     mode="lines+markers",
-                    name="PSNR ↑",
-                    line=dict(color="green", width=2),
+                    name="PSNR",
+                    line=dict(color="green", width=3),
+                    marker=dict(size=6),
                     hovertemplate="<b>Frame %{x}</b><br>PSNR: %{y:.2f} dB<extra></extra>",
-                ),
-                row=2,
-                col=2,
+                )
+            )
+
+            if current_frame is not None:
+                fig_psnr.add_vline(
+                    x=current_frame,
+                    line_dash="dash",
+                    line_color="red",
+                    line_width=2,
+                )
+
+            fig_psnr.update_layout(
+                height=300,
+                margin=dict(t=20, b=40, l=60, r=20),
+                plot_bgcolor="rgba(0,0,0,0)",
+                paper_bgcolor="rgba(0,0,0,0)",
+                showlegend=False,
             )
+            fig_psnr.update_xaxes(title_text="Frame")
+            fig_psnr.update_yaxes(title_text="PSNR (dB)")
+            plots["psnr"] = fig_psnr
 
+        # 3. MSE Plot
         mse_frames, mse_values = get_valid_data("mse")
         if mse_values:
-            fig.add_trace(
+            fig_mse = go.Figure()
+            fig_mse.add_trace(
                 go.Scatter(
                     x=mse_frames,
                     y=mse_values,
                     mode="lines+markers",
-                    name="MSE ↓",
-                    line=dict(color="red", width=2),
+                    name="MSE",
+                    line=dict(color="red", width=3),
+                    marker=dict(size=6),
                     hovertemplate="<b>Frame %{x}</b><br>MSE: %{y:.2f}<extra></extra>",
-                    yaxis="y6",
-                ),
-                row=2,
-                col=2,
-                secondary_y=True,
+                )
+            )
+
+            if current_frame is not None:
+                fig_mse.add_vline(
+                    x=current_frame,
+                    line_dash="dash",
+                    line_color="red",
+                    line_width=2,
+                )
+
+            fig_mse.update_layout(
+                height=300,
+                margin=dict(t=20, b=40, l=60, r=20),
+                plot_bgcolor="rgba(0,0,0,0)",
+                paper_bgcolor="rgba(0,0,0,0)",
+                showlegend=False,
             )
+            fig_mse.update_xaxes(title_text="Frame")
+            fig_mse.update_yaxes(title_text="MSE")
+            plots["mse"] = fig_mse
 
-        # Plot 4: Perceptual Hash vs Color Histogram (row 3, col 1) - keep as is
+        # 4. pHash Plot
+        phash_frames, phash_values = get_valid_data("phash")
         if phash_values:
-            fig.add_trace(
+            fig_phash = go.Figure()
+            fig_phash.add_trace(
                 go.Scatter(
                     x=phash_frames,
                     y=phash_values,
                     mode="lines+markers",
-                    name="pHash ↑",
-                    line=dict(color="purple", width=2),
+                    name="pHash",
+                    line=dict(color="purple", width=3),
+                    marker=dict(size=6),
                     hovertemplate="<b>Frame %{x}</b><br>pHash: %{y:.4f}<extra></extra>",
-                ),
-                row=3,
-                col=1,
+                )
+            )
+
+            if current_frame is not None:
+                fig_phash.add_vline(
+                    x=current_frame,
+                    line_dash="dash",
+                    line_color="red",
+                    line_width=2,
+                )
+
+            fig_phash.update_layout(
+                height=300,
+                margin=dict(t=20, b=40, l=60, r=20),
+                plot_bgcolor="rgba(0,0,0,0)",
+                paper_bgcolor="rgba(0,0,0,0)",
+                showlegend=False,
             )
+            fig_phash.update_xaxes(title_text="Frame")
+            fig_phash.update_yaxes(title_text="pHash Similarity")
+            plots["phash"] = fig_phash
 
+        # 5. Color Histogram Correlation Plot
         hist_frames, hist_values = get_valid_data("color_hist_corr")
         if hist_values:
-            fig.add_trace(
+            fig_hist = go.Figure()
+            fig_hist.add_trace(
                 go.Scatter(
                     x=hist_frames,
                     y=hist_values,
                     mode="lines+markers",
-                    name="Color Hist ↑",
-                    line=dict(color="orange", width=2),
-                    hovertemplate="<b>Frame %{x}</b><br>Hist Corr: %{y:.4f}<extra></extra>",
-                    yaxis="y8",
-                ),
-                row=3,
-                col=1,
-                secondary_y=True,
+                    name="Color Histogram",
+                    line=dict(color="orange", width=3),
+                    marker=dict(size=6),
+                    hovertemplate="<b>Frame %{x}</b><br>Color Histogram: %{y:.4f}<extra></extra>",
+                )
             )
 
-        # Plot 5: Individual Sharpness - Video 1 vs Video 2 (row 3, col 2)
-        sharp1_frames, sharp1_values = get_valid_data("sharpness1")
-        sharp2_frames, sharp2_values = get_valid_data("sharpness2")
-
-        if sharp1_values:
-            fig.add_trace(
-                go.Scatter(
-                    x=sharp1_frames,
-                    y=sharp1_values,
-                    mode="lines+markers",
-                    name="Video 1 Sharpness ↑",
-                    line=dict(color="darkgreen", width=2),
-                    hovertemplate="<b>Frame %{x}</b><br>Video 1 Sharpness: %{y:.1f}<extra></extra>",
-                ),
-                row=3,
-                col=2,
-            )
+            if current_frame is not None:
+                fig_hist.add_vline(
+                    x=current_frame,
+                    line_dash="dash",
+                    line_color="red",
+                    line_width=2,
+                )
 
-        if sharp2_values:
-            fig.add_trace(
-                go.Scatter(
-                    x=sharp2_frames,
-                    y=sharp2_values,
-                    mode="lines+markers",
-                    name="Video 2 Sharpness ↑",
-                    line=dict(color="darkblue", width=2),
-                    hovertemplate="<b>Frame %{x}</b><br>Video 2 Sharpness: %{y:.1f}<extra></extra>",
-                    yaxis="y10",
-                ),
-                row=3,
-                col=2,
-                secondary_y=True,
+            fig_hist.update_layout(
+                height=300,
+                margin=dict(t=20, b=40, l=60, r=20),
+                plot_bgcolor="rgba(0,0,0,0)",
+                paper_bgcolor="rgba(0,0,0,0)",
+                showlegend=False,
             )
+            fig_hist.update_xaxes(title_text="Frame")
+            fig_hist.update_yaxes(title_text="Color Histogram Correlation")
+            plots["color_hist"] = fig_hist
 
-        # Add current frame marker to all plots
-        if current_frame is not None:
-            # Add vertical line to each subplot to show current frame
-            # Subplot (1,1): Quality Overview (full width)
-            fig.add_vline(
-                x=current_frame,
-                line_dash="dash",
-                line_color="red",
-                line_width=2,
-                row=1,
-                col=1,
-            )
+        # 6. Sharpness Comparison Plot
+        sharp1_frames, sharp1_values = get_valid_data("sharpness1")
+        sharp2_frames, sharp2_values = get_valid_data("sharpness2")
 
-            # Subplot (2,1): Similarity Metrics
-            fig.add_vline(
-                x=current_frame,
-                line_dash="dash",
-                line_color="red",
-                line_width=2,
-                row=2,
-                col=1,
-            )
+        if sharp1_values or sharp2_values:
+            fig_sharp = go.Figure()
+
+            if sharp1_values:
+                fig_sharp.add_trace(
+                    go.Scatter(
+                        x=sharp1_frames,
+                        y=sharp1_values,
+                        mode="lines+markers",
+                        name="Video 1",
+                        line=dict(color="darkgreen", width=3),
+                        marker=dict(size=6),
+                        hovertemplate="<b>Frame %{x}</b><br>Video 1 Sharpness: %{y:.1f}<extra></extra>",
+                    )
+                )
 
-            # Subplot (2,2): PSNR vs MSE
-            fig.add_vline(
-                x=current_frame,
-                line_dash="dash",
-                line_color="red",
-                line_width=2,
-                row=2,
-                col=2,
-            )
+            if sharp2_values:
+                fig_sharp.add_trace(
+                    go.Scatter(
+                        x=sharp2_frames,
+                        y=sharp2_values,
+                        mode="lines+markers",
+                        name="Video 2",
+                        line=dict(color="darkblue", width=3),
+                        marker=dict(size=6),
+                        hovertemplate="<b>Frame %{x}</b><br>Video 2 Sharpness: %{y:.1f}<extra></extra>",
+                    )
+                )
 
-            # Subplot (3,1): pHash vs Color Histogram
-            fig.add_vline(
-                x=current_frame,
-                line_dash="dash",
-                line_color="red",
-                line_width=2,
-                row=3,
-                col=1,
-            )
+            if current_frame is not None:
+                fig_sharp.add_vline(
+                    x=current_frame,
+                    line_dash="dash",
+                    line_color="red",
+                    line_width=2,
+                )
 
-            # Subplot (3,2): Individual Sharpness
-            fig.add_vline(
-                x=current_frame,
-                line_dash="dash",
-                line_color="red",
-                line_width=2,
-                row=3,
-                col=2,
+            fig_sharp.update_layout(
+                height=300,
+                margin=dict(t=20, b=40, l=60, r=20),
+                plot_bgcolor="rgba(0,0,0,0)",
+                paper_bgcolor="rgba(0,0,0,0)",
+                showlegend=True,
+                legend=dict(
+                    orientation="h", yanchor="bottom", y=1.02, xanchor="center", x=0.5
+                ),
             )
+            fig_sharp.update_xaxes(title_text="Frame")
+            fig_sharp.update_yaxes(title_text="Sharpness")
+            plots["sharpness"] = fig_sharp
 
-        # Update layout with shared hover mode and other improvements
-        fig.update_layout(
-            height=900,
-            showlegend=True,
-            hovermode="x unified",  # Shared hover pointer across subplots
-            dragmode=False,
-            title={
-                "text": "📊 Multi-Metric Video Quality Analysis Dashboard",
-                "x": 0.5,
-                "xanchor": "center",
-                "font": {"size": 16},
-            },
-            legend={
-                "orientation": "h",
-                "yanchor": "bottom",
-                "y": 1.02,
-                "xanchor": "center",
-                "x": 0.5,
-                "font": {"size": 10},
-            },
-            margin=dict(t=100, b=50, l=50, r=50),
-            plot_bgcolor="rgba(0,0,0,0)",
-            paper_bgcolor="rgba(0,0,0,0)",
-        )
-
-        # Update axes labels and ranges with improved configuration
-        fig.update_xaxes(title_text="Frame", fixedrange=True)
-
-        # Quality Overview axis (row 1, col 1) - focused range to emphasize differences
-        quality_values = []
+        # 7. Overall Quality Score Plot (Combination of metrics)
+        # Calculate overall quality score by combining normalized metrics
         if ssim_values and psnr_values and len(ssim_values) == len(psnr_values):
-            ssim_norm = np.array(ssim_values)
-            psnr_norm = np.clip(np.array(psnr_values) / 50, 0, 1)
-            quality_values = (ssim_norm + psnr_norm) / 2
-
-        if len(quality_values) > 0:
-            # Use dynamic range based on data with some padding for better visualization
-            min_qual = float(np.min(quality_values))
-            max_qual = float(np.max(quality_values))
-            range_padding = (max_qual - min_qual) * 0.1  # 10% padding
-            y_min = max(0, min_qual - range_padding)
-            y_max = min(1, max_qual + range_padding)
-            # Ensure minimum range for visibility
-            if (y_max - y_min) < 0.1:
-                center = (y_max + y_min) / 2
-                y_min = max(0, center - 0.05)
-                y_max = min(1, center + 0.05)
-        else:
-            # Fallback range
-            y_min, y_max = 0.5, 1.0
-
-        fig.update_yaxes(
-            title_text="Quality Score",
-            row=1,
-            col=1,
-            fixedrange=True,
-            range=[y_min, y_max],
-        )
-
-        # SSIM axis (row 2, col 1)
-        fig.update_yaxes(
-            title_text="SSIM", row=2, col=1, fixedrange=True, range=[0, 1.05]
-        )
-
-        # PSNR vs MSE axes (row 2, col 2)
-        fig.update_yaxes(title_text="PSNR (dB)", row=2, col=2, fixedrange=True)
-        fig.update_yaxes(
-            title_text="MSE", row=2, col=2, secondary_y=True, fixedrange=True
-        )
+            # Get data for metrics that contribute to overall score
+            phash_frames_overall, phash_values_overall = get_valid_data("phash")
+
+            # Ensure we have the same frames for all metrics
+            common_frames = set(ssim_frames) & set(psnr_frames)
+            if phash_values_overall:
+                common_frames = common_frames & set(phash_frames_overall)
+
+            common_frames = sorted(list(common_frames))
+
+            if common_frames:
+                # Extract values for common frames
+                ssim_common = [
+                    ssim_values[ssim_frames.index(f)]
+                    for f in common_frames
+                    if f in ssim_frames
+                ]
+                psnr_common = [
+                    psnr_values[psnr_frames.index(f)]
+                    for f in common_frames
+                    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]
+
+                # Start with SSIM and normalized PSNR
+                quality_components = [ssim_common, psnr_normalized]
+                component_names = ["SSIM", "PSNR"]
+
+                # Add pHash if available
+                if phash_values_overall:
+                    phash_common = [
+                        phash_values_overall[phash_frames_overall.index(f)]
+                        for f in common_frames
+                        if f in phash_frames_overall
+                    ]
+                    if len(phash_common) == len(ssim_common):
+                        quality_components.append(phash_common)
+                        component_names.append("pHash")
+
+                # Calculate average across all components
+                overall_quality = []
+                for i in range(len(common_frames)):
+                    frame_scores = [
+                        component[i]
+                        for component in quality_components
+                        if i < len(component)
+                    ]
+                    overall_quality.append(sum(frame_scores) / len(frame_scores))
+
+                fig_overall = go.Figure()
+                fig_overall.add_trace(
+                    go.Scatter(
+                        x=common_frames,
+                        y=overall_quality,
+                        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: "
+                        + ", ".join(component_names)
+                        + "</i><extra></extra>",
+                        fill="tonexty",
+                    )
+                )
 
-        # pHash vs Color Histogram axes (row 3, col 1)
-        fig.update_yaxes(title_text="pHash Similarity", row=3, col=1, fixedrange=True)
-        fig.update_yaxes(
-            title_text="Histogram Correlation",
-            row=3,
-            col=1,
-            secondary_y=True,
-            fixedrange=True,
-        )
+                if current_frame is not None:
+                    fig_overall.add_vline(
+                        x=current_frame,
+                        line_dash="dash",
+                        line_color="red",
+                        line_width=2,
+                    )
+
+                fig_overall.update_layout(
+                    height=300,
+                    margin=dict(t=20, b=40, l=60, r=20),
+                    plot_bgcolor="rgba(0,0,0,0)",
+                    paper_bgcolor="rgba(0,0,0,0)",
+                    showlegend=False,
+                )
+                fig_overall.update_xaxes(title_text="Frame")
+                fig_overall.update_yaxes(
+                    title_text="Overall Quality Score", range=[0, 1.05]
+                )
+                plots["overall"] = fig_overall
 
-        # Individual Sharpness axes (row 3, col 2)
-        fig.update_yaxes(title_text="Video 1 Sharpness", row=3, col=2, fixedrange=True)
-        fig.update_yaxes(
-            title_text="Video 2 Sharpness",
-            row=3,
-            col=2,
-            secondary_y=True,
-            fixedrange=True,
-        )
+        return plots
 
-        return fig
+    def create_modern_plot(self, metrics_list, current_frame=0):
+        """Create individual metric plots instead of combined dashboard"""
+        return self.create_individual_metric_plots(metrics_list, current_frame)
 
 
 class VideoFrameComparator:
@@ -778,7 +789,7 @@ class VideoFrameComparator:
 
         # Compute metrics if both videos are present and not in data.json
         metrics_info = ""
-        metrics_plot = None
+        plots = None
 
         if (
             video1_path
@@ -819,7 +830,7 @@ class VideoFrameComparator:
             metrics_info += f"Valid Frames: {self.metrics_summary['valid_frames']}/{self.metrics_summary['total_frames']}"
 
             # Generate initial plot
-            metrics_plot = self.frame_metrics.create_modern_plot(
+            plots = self.frame_metrics.create_individual_metric_plots(
                 self.computed_metrics, 0
             )
         else:
@@ -854,7 +865,7 @@ class VideoFrameComparator:
             frame1,
             frame2,
             self.get_current_frame_info(0),
-            metrics_plot,
+            plots,
         )
 
     def get_frames_at_index(self, frame_index):
@@ -918,97 +929,103 @@ class VideoFrameComparator:
                     quality = "🟡 Fair"
                 else:
                     quality = "🔴 Poor"
-                comparison_metrics.append(f"SSIM: {ssim_val:.4f} ↑ ({quality})")
+                comparison_metrics.append(
+                    f"SSIM: {ssim_val:.4f} ({quality} similarity)"
+                )
 
             # PSNR with quality indicator
             if metrics.get("psnr") is not None:
                 psnr_val = metrics["psnr"]
                 if psnr_val >= 40:
-                    psnr_quality = "🟢"
+                    psnr_quality = "🟢 Excellent"
                 elif psnr_val >= 30:
-                    psnr_quality = "🔵"
+                    psnr_quality = "🔵 Good"
                 elif psnr_val >= 20:
-                    psnr_quality = "🟡"
+                    psnr_quality = "🟡 Fair"
                 else:
-                    psnr_quality = "🔴"
-                comparison_metrics.append(f"PSNR: {psnr_val:.1f}dB ↑ {psnr_quality}")
+                    psnr_quality = "🔴 Poor"
+                comparison_metrics.append(
+                    f"PSNR: {psnr_val:.1f}dB ({psnr_quality} signal quality)"
+                )
 
             # MSE with quality indicator (lower is better)
             if metrics.get("mse") is not None:
                 mse_val = metrics["mse"]
                 if mse_val <= 50:
-                    mse_quality = "🟢"
+                    mse_quality = "🟢 Very Similar"
                 elif mse_val <= 100:
-                    mse_quality = "🔵"
+                    mse_quality = "🔵 Similar"
                 elif mse_val <= 200:
-                    mse_quality = "🟡"
+                    mse_quality = "🟡 Moderately Different"
                 else:
-                    mse_quality = "🔴"
-                comparison_metrics.append(f"MSE: {mse_val:.1f} ↓ {mse_quality}")
+                    mse_quality = "🔴 Very Different"
+                comparison_metrics.append(f"MSE: {mse_val:.1f} ({mse_quality})")
 
             # pHash with quality indicator
             if metrics.get("phash") is not None:
                 phash_val = metrics["phash"]
                 if phash_val >= 0.95:
-                    phash_quality = "🟢"
+                    phash_quality = "🟢 Nearly Identical"
                 elif phash_val >= 0.9:
-                    phash_quality = "🔵"
+                    phash_quality = "🔵 Very Similar"
                 elif phash_val >= 0.8:
-                    phash_quality = "🟡"
+                    phash_quality = "🟡 Somewhat Similar"
                 else:
-                    phash_quality = "🔴"
-                comparison_metrics.append(f"pHash: {phash_val:.3f} ↑ {phash_quality}")
+                    phash_quality = "🔴 Different"
+                comparison_metrics.append(
+                    f"pHash: {phash_val:.3f} ({phash_quality} perceptually)"
+                )
 
             # Color Histogram Correlation
             if metrics.get("color_hist_corr") is not None:
                 color_val = metrics["color_hist_corr"]
                 if color_val >= 0.9:
-                    color_quality = "🟢"
+                    color_quality = "🟢 Very Similar Colors"
                 elif color_val >= 0.8:
-                    color_quality = "🔵"
+                    color_quality = "🔵 Similar Colors"
                 elif color_val >= 0.6:
-                    color_quality = "🟡"
+                    color_quality = "🟡 Moderate Color Diff"
                 else:
-                    color_quality = "🔴"
-                comparison_metrics.append(f"Color: {color_val:.3f} ↑ {color_quality}")
+                    color_quality = "🔴 Different Colors"
+                comparison_metrics.append(f"Color: {color_val:.3f} ({color_quality})")
 
             # Add comparison metrics to info
             if comparison_metrics:
-                info += " | " + " | ".join(comparison_metrics)
+                info += "\n📊 Comparison Analysis: " + " | ".join(comparison_metrics)
 
-            # === INDIVIDUAL IMAGE METRICS ===
+            # === INDIVIDUAL VIDEO QUALITY ===
             individual_metrics = []
 
             # Individual Sharpness for each video
             if metrics.get("sharpness1") is not None:
                 sharp1 = metrics["sharpness1"]
                 if sharp1 >= 200:
-                    sharp1_quality = "🟢"
+                    sharp1_quality = "🟢 Sharp"
                 elif sharp1 >= 100:
-                    sharp1_quality = "🔵"
+                    sharp1_quality = "🔵 Moderate"
                 elif sharp1 >= 50:
-                    sharp1_quality = "🟡"
+                    sharp1_quality = "🟡 Soft"
                 else:
-                    sharp1_quality = "🔴"
+                    sharp1_quality = "🔴 Blurry"
                 individual_metrics.append(
-                    f"V1 Sharpness: {sharp1:.0f} ↑ {sharp1_quality}"
+                    f"V1 Sharpness: {sharp1:.0f} ({sharp1_quality})"
                 )
 
             if metrics.get("sharpness2") is not None:
                 sharp2 = metrics["sharpness2"]
                 if sharp2 >= 200:
-                    sharp2_quality = "🟢"
+                    sharp2_quality = "🟢 Sharp"
                 elif sharp2 >= 100:
-                    sharp2_quality = "🔵"
+                    sharp2_quality = "🔵 Moderate"
                 elif sharp2 >= 50:
-                    sharp2_quality = "🟡"
+                    sharp2_quality = "🟡 Soft"
                 else:
-                    sharp2_quality = "🔴"
+                    sharp2_quality = "🔴 Blurry"
                 individual_metrics.append(
-                    f"V2 Sharpness: {sharp2:.0f} ↑ {sharp2_quality}"
+                    f"V2 Sharpness: {sharp2:.0f} ({sharp2_quality})"
                 )
 
-            # Sharpness comparison and winner
+            # Sharpness comparison
             if (
                 metrics.get("sharpness1") is not None
                 and metrics.get("sharpness2") is not None
@@ -1016,77 +1033,80 @@ class VideoFrameComparator:
                 sharp1 = metrics["sharpness1"]
                 sharp2 = metrics["sharpness2"]
 
-                # Determine winner
-                if sharp1 > sharp2:
-                    winner = "V1"
-                    winner_emoji = "🏆"
-                elif sharp2 > sharp1:
-                    winner = "V2"
-                    winner_emoji = "🏆"
-                else:
-                    winner = "Tie"
-                    winner_emoji = "⚖️"
-
+                # Calculate difference percentage
                 diff_pct = abs(sharp1 - sharp2) / max(sharp1, sharp2) * 100
 
-                # Add significance
+                # Determine significance with clearer labels
                 if diff_pct > 20:
-                    significance = "Major"
+                    significance = "🔴 MAJOR difference"
                 elif diff_pct > 10:
-                    significance = "Moderate"
+                    significance = "🟡 MODERATE difference"
                 elif diff_pct > 5:
-                    significance = "Minor"
+                    significance = "🔵 MINOR difference"
                 else:
-                    significance = "Negligible"
+                    significance = "🟢 NEGLIGIBLE difference"
 
-                individual_metrics.append(
-                    f"Sharpness Winner: {winner_emoji}{winner} ({significance})"
-                )
+                # Determine which is sharper
+                if sharp1 > sharp2:
+                    comparison = "V1 is sharper"
+                elif sharp2 > sharp1:
+                    comparison = "V2 is sharper"
+                else:
+                    comparison = "Equal sharpness"
+
+                individual_metrics.append(f"Sharpness: {comparison} ({significance})")
 
             # Add individual metrics to info
             if individual_metrics:
-                info += "\n📊 Individual: " + " | ".join(individual_metrics)
+                info += "\n🎯 Individual Quality: " + " | ".join(individual_metrics)
 
             # === OVERALL QUALITY ASSESSMENT ===
+            # Calculate combined quality score from multiple metrics
             quality_score = 0
             quality_count = 0
+            metric_contributions = []
 
-            # Calculate overall quality score
+            # SSIM contribution
             if metrics.get("ssim") is not None:
                 quality_score += metrics["ssim"]
                 quality_count += 1
+                metric_contributions.append(f"SSIM({metrics['ssim']:.3f})")
 
+            # PSNR contribution (normalized to 0-1 scale)
             if metrics.get("psnr") is not None:
-                # Normalize PSNR to 0-1 scale (assume 50dB max)
                 psnr_norm = min(metrics["psnr"] / 50, 1.0)
                 quality_score += psnr_norm
                 quality_count += 1
+                metric_contributions.append(f"PSNR({psnr_norm:.3f})")
 
+            # pHash contribution
             if metrics.get("phash") is not None:
                 quality_score += metrics["phash"]
                 quality_count += 1
+                metric_contributions.append(f"pHash({metrics['phash']:.3f})")
 
             if quality_count > 0:
                 avg_quality = quality_score / quality_count
 
-                # Add overall assessment
+                # Add overall assessment with formula explanation
                 if avg_quality >= 0.9:
-                    overall = "✨ Excellent Match"
+                    overall = "✨ Excellent Overall"
                 elif avg_quality >= 0.8:
-                    overall = "✅ Good Match"
+                    overall = "✅ Good Overall"
                 elif avg_quality >= 0.6:
-                    overall = "⚠️ Fair Match"
+                    overall = "⚠️ Fair Overall"
                 else:
-                    overall = "❌ Poor Match"
+                    overall = "❌ Poor Overall"
 
-                info += f"\n🎯 Overall: {overall}"
+                info += f"\n🎯 Overall Quality: {avg_quality:.3f} ({overall})"
+                info += f"\n   Formula: Average of {' + '.join(metric_contributions)} = {avg_quality:.3f}"
 
         return info
 
     def get_updated_plot(self, frame_index):
         """Get updated plot with current frame highlighted"""
         if self.computed_metrics:
-            return self.frame_metrics.create_modern_plot(
+            return self.frame_metrics.create_individual_metric_plots(
                 self.computed_metrics, int(frame_index)
             )
         return None
@@ -1181,16 +1201,19 @@ def create_app():
     all_videos = get_all_videos_from_json()
 
     with gr.Blocks(
-        title="FrameLens - Video Frame Comparator",
+        title="Frame Arena - Video Frame Comparator",
         # theme=gr.themes.Soft(),
     ) as app:
         gr.Markdown("""
-        # 🎬 FrameLens - Professional Video Quality Analysis
+        # 🎬 Frame Arena: Frame by frame comparisons of any videos
 
-        Upload two videos and compare them using comprehensive quality metrics.
-        Perfect for analyzing compression effects, processing artifacts, and visual quality assessment.
+        - 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
+        - **Real-time Analysis**: Navigate frames with live metric updates
+        - **Smart Comparisons**: Understand differences between videos per metric
 
-        **✨ Features**: SSIM, PSNR, MSE, pHash, Color Histogram & Sharpness Analysis!
+        **Perfect for**: Analyzing compression effects, processing artifacts, visual quality assessment, and compression algorithm comparisons.
         """)
 
         with gr.Row():
@@ -1276,11 +1299,27 @@ def create_app():
                     value="",
                     lines=3,
                 )
-                gr.Markdown("### 📊 Comprehensive Metrics Analysis")
-                metrics_plot = gr.Plot(
-                    label="Multi-Metric Quality Analysis",
-                    show_label=False,
-                )
+                gr.Markdown("### 📊 Individual Metric Analysis")
+
+                # Overall quality plot
+                with gr.Row():
+                    overall_plot = gr.Plot(
+                        label="Overall Quality (Combined Metric [SSIM + normalized_PSNR + pHash])",
+                        show_label=True,
+                    )
+
+                # 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)
 
         # Status and frame info (moved below plots, initially hidden)
         info_section = gr.Row(visible=False)
@@ -1290,7 +1329,7 @@ def create_app():
 
         # Event handlers
         def load_videos_handler(video1, video2):
-            status, max_frames, frame1, frame2, info, plot = comparator.load_videos(
+            status, max_frames, frame1, frame2, info, plots = comparator.load_videos(
                 video1, video2
             )
 
@@ -1306,13 +1345,28 @@ def create_app():
             # Show/hide sections based on whether videos were loaded successfully
             videos_loaded = max_frames > 0
 
+            # Extract individual plots from the plots dictionary
+            ssim_fig = plots.get("ssim") if plots else None
+            psnr_fig = plots.get("psnr") if plots else None
+            mse_fig = plots.get("mse") if plots else None
+            phash_fig = plots.get("phash") if plots else None
+            color_fig = plots.get("color_hist") if plots else None
+            sharpness_fig = plots.get("sharpness") if plots else None
+            overall_fig = plots.get("overall") if plots else None
+
             return (
                 status,  # status_output
                 slider_update,  # frame_slider
                 frame1,  # frame1_output
                 frame2,  # frame2_output
                 info,  # frame_info
-                plot,  # metrics_plot
+                ssim_fig,  # ssim_plot
+                psnr_fig,  # psnr_plot
+                mse_fig,  # mse_plot
+                phash_fig,  # phash_plot
+                color_fig,  # color_plot
+                sharpness_fig,  # sharpness_plot
+                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
@@ -1321,13 +1375,44 @@ def create_app():
 
         def update_frames(frame_index):
             if comparator.max_frames == 0:
-                return None, None, "No videos loaded", None
+                return (
+                    None,
+                    None,
+                    "No videos loaded",
+                    None,
+                    None,
+                    None,
+                    None,
+                    None,
+                    None,
+                    None,
+                )
 
             frame1, frame2 = comparator.get_frames_at_index(frame_index)
             info = comparator.get_current_frame_info(frame_index)
-            plot = comparator.get_updated_plot(frame_index)
+            plots = comparator.get_updated_plot(frame_index)
 
-            return frame1, frame2, info, plot
+            # Extract individual plots from the plots dictionary
+            ssim_fig = plots.get("ssim") if plots else None
+            psnr_fig = plots.get("psnr") if plots else None
+            mse_fig = plots.get("mse") if plots else None
+            phash_fig = plots.get("phash") if plots else None
+            color_fig = plots.get("color_hist") if plots else None
+            sharpness_fig = plots.get("sharpness") if plots else None
+            overall_fig = plots.get("overall") if plots else None
+
+            return (
+                frame1,
+                frame2,
+                info,
+                ssim_fig,
+                psnr_fig,
+                mse_fig,
+                phash_fig,
+                color_fig,
+                sharpness_fig,
+                overall_fig,
+            )
 
         # Auto-load when examples populate the inputs
         def auto_load_when_examples_change(video1, video2):
@@ -1343,7 +1428,13 @@ def create_app():
                 None,  # frame1_output
                 None,  # frame2_output
                 "",  # frame_info (now in metrics_section)
-                None,  # metrics_plot
+                None,  # ssim_plot
+                None,  # psnr_plot
+                None,  # mse_plot
+                None,  # phash_plot
+                None,  # color_plot
+                None,  # sharpness_plot
+                None,  # overall_plot
                 gr.Row(visible=False),  # frame_controls
                 gr.Row(visible=False),  # frame_display
                 gr.Row(visible=False),  # metrics_section
@@ -1360,7 +1451,13 @@ def create_app():
                 frame1_output,
                 frame2_output,
                 frame_info,
-                metrics_plot,
+                ssim_plot,
+                psnr_plot,
+                mse_plot,
+                phash_plot,
+                color_plot,
+                sharpness_plot,
+                overall_plot,
                 frame_controls,
                 frame_display,
                 metrics_section,
@@ -1378,7 +1475,13 @@ def create_app():
                 frame1_output,
                 frame2_output,
                 frame_info,
-                metrics_plot,
+                ssim_plot,
+                psnr_plot,
+                mse_plot,
+                phash_plot,
+                color_plot,
+                sharpness_plot,
+                overall_plot,
                 frame_controls,
                 frame_display,
                 metrics_section,
@@ -1395,7 +1498,13 @@ def create_app():
                 frame1_output,
                 frame2_output,
                 frame_info,
-                metrics_plot,
+                ssim_plot,
+                psnr_plot,
+                mse_plot,
+                phash_plot,
+                color_plot,
+                sharpness_plot,
+                overall_plot,
                 frame_controls,
                 frame_display,
                 metrics_section,
@@ -1406,44 +1515,80 @@ def create_app():
         frame_slider.change(
             fn=update_frames,
             inputs=[frame_slider],
-            outputs=[frame1_output, frame2_output, frame_info, metrics_plot],
+            outputs=[
+                frame1_output,
+                frame2_output,
+                frame_info,
+                ssim_plot,
+                psnr_plot,
+                mse_plot,
+                phash_plot,
+                color_plot,
+                sharpness_plot,
+                overall_plot,
+            ],
         )
 
         # Add comprehensive usage guide
-        gr.Markdown(f"""
-        ### 💡 Professional Features:
-        - Upload videos in common formats (MP4, AVI, MOV, etc.) or use URLs
-        - **6 Quality Metrics**: SSIM, PSNR, MSE, pHash, Color Histogram, Sharpness
-        - **Comprehensive Visualization**: 6-panel analysis dashboard
-        - **Real-time Analysis**: Navigate frames with live metric updates
-        - **Smart Comparisons**: See which video performs better per metric
-        - **Correlation Analysis**: Understand relationships between metrics
-        {"- Click examples above for instant analysis!" if example_pairs else ""}
-
-        ### 📊 Metrics Explained (with Directionality):
-        - **SSIM** ↑: Structural Similarity (1.0 = identical, 0.0 = completely different)
-        - **PSNR** ↑: Peak Signal-to-Noise Ratio in dB (higher = better quality)
-        - **MSE** ↓: Mean Squared Error (lower = more similar)
-        - **pHash** ↑: Perceptual Hash similarity (1.0 = visually identical)
-        - **Color Histogram** ↑: Color distribution correlation (1.0 = identical colors)
-        - **Sharpness** ↑: Laplacian variance (higher = sharper images)
-
-        ### 🎯 Quality Assessment Scale:
-        - 🟢 **Excellent**: SSIM ≥ 0.9, PSNR ≥ 40dB, MSE ≤ 50
-        - 🔵 **Good**: SSIM ≥ 0.8, PSNR ≥ 30dB, MSE ≤ 100
-        - 🟡 **Fair**: SSIM ≥ 0.6, PSNR ≥ 20dB, MSE ≤ 200
-        - 🔴 **Poor**: Below fair thresholds
-
-        ### 🏆 Comparison Indicators:
-        - **V1/V2 Winner**: Shows which video performs better per metric
-        - **Significance**: Major (>20%), Moderate (10-20%), Minor (5-10%), Negligible (<5%)
-        - **Overall Match**: Combined quality assessment across all metrics
-        - **Arrows**: ↑ = Higher is Better, ↓ = Lower is Better
-
-        ### 📁 Configuration:
-        {f"Loaded {len(example_pairs)} example comparisons from data.json" if example_pairs else "No examples found in data.json"}
-        {f"Available videos: {len(all_videos)} files" if all_videos else ""}
-        """)
+        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