Update app.py

app.py

@@ -85,90 +85,56 @@ 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 radial bar chart with concentric rings showing detection metrics"""
+    """Create a high-fidelity radial bar chart (concentric rings)"""
     
-    # Calculate percentages for display
-    confidence_pct = avg_confidence * 100 if num_detections > 0 else 0
-    iou_pct = iou * 100
-    precision_pct = precision * 100
-    recall_pct = recall * 100
+    # Calculate percentages (0-100)
+    metrics = [
+        {'name': 'Confidence', 'val': avg_confidence * 100 if num_detections > 0 else 0, 'color': '#4169E1', 'base': 80},
+        {'name': 'Precision', 'val': precision * 100, 'color': '#5cb85c', 'base': 60},
+        {'name': 'Recall', 'val': recall * 100, 'color': '#f0ad4e', 'base': 40},
+        {'name': 'IoU', 'val': iou * 100, 'color': '#d9534f', 'base': 20}
+    ]
     
     fig = go.Figure()
-    
-    # Define ring thickness and spacing
-    ring_thickness = 15
-    
-    # Add radial bars as thin concentric rings (from outer to inner)
-    # Each ring shows the full 360° but at different radii
-    
-    # Confidence - outermost ring (blue)
-    fig.add_trace(go.Barpolar(
-        r=[confidence_pct] * 360,
-        theta=list(range(360)),
-        width=1,
-        name=f'Confidence: {confidence_pct:.1f}%',
-        marker_color='#4169E1',
-        marker_line_color='#4169E1',
-        marker_line_width=0,
-        opacity=0.9,
-        base=85,
-    ))
-    
-    # Precision - second ring (green)
-    fig.add_trace(go.Barpolar(
-        r=[precision_pct] * 360,
-        theta=list(range(360)),
-        width=1,
-        name=f'Precision: {precision_pct:.1f}%',
-        marker_color='#5cb85c',
-        marker_line_color='#5cb85c',
-        marker_line_width=0,
-        opacity=0.9,
-        base=65,
-    ))
-    
-    # Recall - third ring (orange)
-    fig.add_trace(go.Barpolar(
-        r=[recall_pct] * 360,
-        theta=list(range(360)),
-        width=1,
-        name=f'Recall: {recall_pct:.1f}%',
-        marker_color='#f0ad4e',
-        marker_line_color='#f0ad4e',
-        marker_line_width=0,
-        opacity=0.9,
-        base=45,
-    ))
-    
-    # IoU - innermost ring (red)
-    fig.add_trace(go.Barpolar(
-        r=[iou_pct] * 360,
-        theta=list(range(360)),
-        width=1,
-        name=f'IoU: {iou_pct:.1f}%',
-        marker_color='#d9534f',
-        marker_line_color='#d9534f',
-        marker_line_width=0,
-        opacity=0.9,
-        base=25,
-    ))
-    
+
+    for m in metrics:
+        # 1. Add background track (faint gray ring)
+        fig.add_trace(go.Barpolar(
+            r=[15],
+            theta=[180],
+            width=[360],
+            base=m['base'],
+            marker_color='rgba(128,128,128,0.1)',
+            hoverinfo='none',
+            showlegend=False
+        ))
+        
+        # 2. Add the actual metric bar (the colored arc)
+        # 100% = 360 degrees
+        angle_width = m['val'] * 3.6
+        fig.add_trace(go.Barpolar(
+            r=[15],
+            theta=[angle_width / 2],
+            width=[angle_width],
+            base=m['base'],
+            name=f"{m['name']}: {m['val']:.1f}%",
+            marker_color=m['color'],
+            marker_line_width=0,
+            hoverinfo='name'
+        ))
+
     fig.update_layout(
         polar=dict(
-            radialaxis=dict(
-                visible=True,
-                range=[0, 100],
-                showticklabels=True,
-                tickfont=dict(size=10),
-                gridcolor='rgba(128,128,128,0.3)',
-                tickmode='linear',
-                tick0=0,
-                dtick=20,
-            ),
+            hole=0.1,
+            radialaxis=dict(visible=False, range=[0, 100]),
             angularaxis=dict(
-                visible=True,
-                showticklabels=False,
+                rotation=90,           # Start at 12 o'clock
+                direction='clockwise', # Go clockwise
                 gridcolor='rgba(128,128,128,0.2)',
+                tickmode='linear',
+                tick0=0,
+                dtick=45,              # Grid lines every 45 degrees
+                showticklabels=False
             ),
             bgcolor='rgba(0,0,0,0)'
         ),
@@ -178,14 +144,13 @@ def create_detection_metrics_gauge(avg_confidence: float, iou: float, precision:
             yanchor="middle",
             y=0.5,
             xanchor="left",
-            x=1.05,
-            font=dict(size=11),
-            bgcolor='rgba(0,0,0,0)'
+            x=1.1,
+            font=dict(size=12)
         ),
         paper_bgcolor='rgba(0,0,0,0)',
         plot_bgcolor='rgba(0,0,0,0)',
         height=400,
-        margin=dict(l=40, r=140, t=40, b=40)
+        margin=dict(l=40, r=150, t=40, b=40)
     )
     
     return fig