Update app.py

app.py

@@ -85,7 +85,7 @@ def create_gauge_chart(value: float, title: str, max_value: float = 1.0) -> go.F
 
 
 def create_detection_metrics_gauge(avg_confidence: float, iou: float, precision: float, recall: float, num_detections: int) -> go.Figure:
-    """Create concentric radial gauge showing actual detection metrics"""
+    """Create radial bar chart with concentric rings showing detection metrics"""
     
     # Calculate percentages for display
     confidence_pct = avg_confidence * 100 if num_detections > 0 else 0
@@ -95,66 +95,88 @@ def create_detection_metrics_gauge(avg_confidence: float, iou: float, precision:
     
     fig = go.Figure()
     
-    # Add concentric gauge rings (from outer to inner)
-    fig.add_trace(go.Indicator(
-        mode="gauge",
-        value=confidence_pct,
-        domain={'x': [0, 1], 'y': [0, 1]},
-        title={'text': f"Confidence: {confidence_pct:.1f}%", 'font': {'size': 11}},
-        gauge={
-            'axis': {'range': [0, 100], 'visible': False},
-            'bar': {'color': '#4169E1', 'thickness': 0.15},
-            'bgcolor': 'rgba(0,0,0,0.05)',
-            'borderwidth': 0,
-        }
+    # Add radial bars (concentric rings from outer to inner)
+    # Confidence - outermost ring (blue)
+    fig.add_trace(go.Barpolar(
+        r=[confidence_pct],
+        theta=[0],
+        width=[90],
+        name=f'Confidence: {confidence_pct:.1f}%',
+        marker_color='#4169E1',
+        marker_line_color='white',
+        marker_line_width=2,
+        opacity=0.8,
+        base=75,
     ))
     
-    fig.add_trace(go.Indicator(
-        mode="gauge",
-        value=precision_pct,
-        domain={'x': [0.1, 0.9], 'y': [0.1, 0.9]},
-        title={'text': f"Precision: {precision_pct:.1f}%", 'font': {'size': 10}},
-        gauge={
-            'axis': {'range': [0, 100], 'visible': False},
-            'bar': {'color': '#5cb85c', 'thickness': 0.15},
-            'bgcolor': 'rgba(0,0,0,0.05)',
-            'borderwidth': 0,
-        }
+    # Precision - second ring (green)
+    fig.add_trace(go.Barpolar(
+        r=[precision_pct],
+        theta=[90],
+        width=[90],
+        name=f'Precision: {precision_pct:.1f}%',
+        marker_color='#5cb85c',
+        marker_line_color='white',
+        marker_line_width=2,
+        opacity=0.8,
+        base=50,
     ))
     
-    fig.add_trace(go.Indicator(
-        mode="gauge",
-        value=recall_pct,
-        domain={'x': [0.2, 0.8], 'y': [0.2, 0.8]},
-        title={'text': f"Recall: {recall_pct:.1f}%", 'font': {'size': 9}},
-        gauge={
-            'axis': {'range': [0, 100], 'visible': False},
-            'bar': {'color': '#f0ad4e', 'thickness': 0.15},
-            'bgcolor': 'rgba(0,0,0,0.05)',
-            'borderwidth': 0,
-        }
+    # Recall - third ring (orange)
+    fig.add_trace(go.Barpolar(
+        r=[recall_pct],
+        theta=[180],
+        width=[90],
+        name=f'Recall: {recall_pct:.1f}%',
+        marker_color='#f0ad4e',
+        marker_line_color='white',
+        marker_line_width=2,
+        opacity=0.8,
+        base=25,
     ))
     
-    fig.add_trace(go.Indicator(
-        mode="gauge+number",
-        value=iou_pct,
-        domain={'x': [0.3, 0.7], 'y': [0.3, 0.7]},
-        title={'text': "IoU", 'font': {'size': 10}},
-        number={'suffix': '%', 'font': {'size': 16}},
-        gauge={
-            'axis': {'range': [0, 100], 'visible': False},
-            'bar': {'color': '#d9534f', 'thickness': 0.2},
-            'bgcolor': 'rgba(0,0,0,0.05)',
-            'borderwidth': 0,
-        }
+    # IoU - innermost ring (red)
+    fig.add_trace(go.Barpolar(
+        r=[iou_pct],
+        theta=[270],
+        width=[90],
+        name=f'IoU: {iou_pct:.1f}%',
+        marker_color='#d9534f',
+        marker_line_color='white',
+        marker_line_width=2,
+        opacity=0.8,
+        base=0,
     ))
     
     fig.update_layout(
+        polar=dict(
+            radialaxis=dict(
+                visible=True,
+                range=[0, 100],
+                showticklabels=True,
+                tickfont=dict(size=10),
+                gridcolor='rgba(128,128,128,0.2)',
+            ),
+            angularaxis=dict(
+                visible=True,
+                showticklabels=False,
+                gridcolor='rgba(128,128,128,0.2)',
+            ),
+            bgcolor='rgba(0,0,0,0)'
+        ),
+        showlegend=True,
+        legend=dict(
+            orientation="v",
+            yanchor="middle",
+            y=0.5,
+            xanchor="left",
+            x=1.05,
+            font=dict(size=11)
+        ),
         paper_bgcolor='rgba(0,0,0,0)',
         plot_bgcolor='rgba(0,0,0,0)',
-        height=300,
-        margin=dict(l=20, r=20, t=60, b=20),
-        showlegend=False
+        height=400,
+        margin=dict(l=40, r=120, t=40, b=40)
     )
     
     return fig
@@ -494,6 +516,8 @@ with gr.Blocks(css=custom_css) as demo:
         with gr.Column(scale=2):
             gr.Markdown("### Detection Results")
             output_image = gr.Image(label="Detected Forgeries", type="numpy")
+
+    gr.Markdown("---")
     
     with gr.Row():
         with gr.Column(scale=1):