Two pies, ok sidebar

app.py

@@ -15,64 +15,110 @@ def plot_model_stats(model_name: str) -> plt.Figure:
     """Draws a pie chart of model's passed, failed, skipped, and error stats."""
     model_stats = MODELS[model_name]
     
-    # Define appropriate colors for each category
+    # Softer color palette - less pastel, more vibrant
     colors = {
-        'passed': '#4CAF50',    # Green
-        'failed': '#F44336',    # Red
-        'skipped': '#FF9800',   # Orange
-        'error': '#9C27B0'      # Purple
+        'passed': '#4CAF50',    # Medium green
+        'failed': '#E53E3E',    # More red
+        'skipped': '#FFD54F',   # Medium yellow
+        'error': '#8B0000'      # Dark red
     }
     
     # Filter out categories with 0 values for cleaner visualization
     filtered_stats = {k: v for k, v in model_stats.items() if v > 0}
     
     if not filtered_stats:
-        # Handle case where all values are 0 - dark theme styling
+        # Handle case where all values are 0 - minimal empty state
         fig, ax = plt.subplots(figsize=(10, 8), facecolor='#000000')
         ax.set_facecolor('#000000')
         ax.text(0.5, 0.5, 'No test results available', 
                 horizontalalignment='center', verticalalignment='center',
-                transform=ax.transAxes, fontsize=16, color='white')
+                transform=ax.transAxes, fontsize=16, color='#888888',
+                fontfamily='monospace', weight='normal')
         ax.set_xlim(0, 1)
         ax.set_ylim(0, 1)
         ax.axis('off')
         return fig
     
-    # Create the pie chart with dark theme
-    fig, ax = plt.subplots(figsize=(10, 8), facecolor='#000000')
-    ax.set_facecolor('#000000')
+    # Create figure with two subplots side by side with padding
+    fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(18, 9), facecolor='#000000')
+    ax1.set_facecolor('#000000')
+    ax2.set_facecolor('#000000')
     
     # Get colors for filtered categories
     chart_colors = [colors[category] for category in filtered_stats.keys()]
     
-    # Create pie chart with custom styling for dark theme
-    wedges, texts, autotexts = ax.pie(
-        filtered_stats.values(), 
-        labels=filtered_stats.keys(),
-        colors=chart_colors,
-        autopct='%1.1f%%',
-        startangle=90,
-        explode=[0.08] * len(filtered_stats),  # Slightly larger separation for dark theme
-        shadow=False,  # Remove shadow for cleaner dark look
-        textprops={'fontsize': 13, 'weight': 'bold', 'color': 'white'}
-    )
+    def create_pie_chart(ax, device_label):
+        # Create minimal pie chart - full pie, no donut effect
+        wedges, texts, autotexts = ax.pie(
+            filtered_stats.values(), 
+            labels=[label.lower() for label in filtered_stats.keys()],  # Lowercase for minimal look
+            colors=chart_colors,
+            autopct='%1.1f%%',
+            startangle=90,
+            explode=None,  # No separation
+            shadow=False,
+            wedgeprops=dict(edgecolor='#1a1a1a', linewidth=0.5),  # Minimal borders
+            textprops={'fontsize': 12, 'weight': 'normal', 'color': '#CCCCCC', 'fontfamily': 'monospace'}
+        )
+        
+        # Enhanced percentage text styling for better readability
+        for autotext in autotexts:
+            autotext.set_color('#000000')  # Black text for better contrast
+            autotext.set_weight('bold')
+            autotext.set_fontsize(14)
+            autotext.set_fontfamily('monospace')
+        
+        # Minimal category labels
+        for text in texts:
+            text.set_color('#AAAAAA')
+            text.set_weight('normal')
+            text.set_fontsize(13)
+            text.set_fontfamily('monospace')
+        
+        # Device label closer to chart and bigger
+        ax.set_title(device_label, 
+                    fontsize=28, weight='bold', pad=2, color='#FFFFFF', 
+                    fontfamily='monospace')
+    
+    # Create both pie charts with device labels
+    create_pie_chart(ax1, "AMD")
+    create_pie_chart(ax2, "Nvidia")
     
-    # Enhance text styling for dark theme
-    for autotext in autotexts:
-        autotext.set_color('white')
-        autotext.set_weight('bold')
-        autotext.set_fontsize(12)
+    # Add subtle separation line between charts
+    line_x = 0.5
+    fig.add_artist(plt.Line2D([line_x, line_x], [0.15, 0.8], 
+                              color='#333333', linewidth=1, alpha=0.5,
+                              transform=fig.transFigure))
     
-    # Set title with white text
+    # Add central shared title for model name and test count
     total_tests = sum(model_stats.values())
-    ax.set_title(f'{model_name.upper()} Test Results\n({total_tests} total tests)', 
-                fontsize=18, weight='bold', pad=30, color='white')
+    fig.suptitle(f'{model_name.lower()} • {total_tests} tests', 
+                fontsize=18, weight='normal', color='#CCCCCC', 
+                fontfamily='monospace', y=0.95)
     
-    # Make the chart more minimalist
+    # Clean layout with padding and space for central title
     plt.tight_layout()
+    plt.subplots_adjust(top=0.85, wspace=0.4)  # Added wspace for padding between charts
     
     return fig
 
+def get_model_stats_summary(model_name: str) -> tuple:
+    """Get summary stats for a model (total tests, success rate, status indicator)."""
+    stats = MODELS[model_name]
+    total = sum(stats.values())
+    passed = stats['passed']
+    success_rate = (passed / total * 100) if total > 0 else 0
+    
+    # Determine status indicator color
+    if success_rate >= 80:
+        status_class = "success-high"
+    elif success_rate >= 50:
+        status_class = "success-medium"
+    else:
+        status_class = "success-low"
+    
+    return total, success_rate, status_class
+
 # Custom CSS for dark theme
 dark_theme_css = """
 /* Global dark theme */
@@ -89,13 +135,82 @@ dark_theme_css = """
 
 /* Sidebar styling */
 .sidebar {
-    background-color: #111111 !important;
+    background: linear-gradient(145deg, #111111, #1a1a1a) !important;
     border: none !important;
-    padding: 20px !important;
+    padding: 25px !important;
+    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3) !important;
+    margin: 0 !important;
+    height: 100vh !important;
+    position: fixed !important;
+    left: 0 !important;
+    top: 0 !important;
+    width: 300px !important;
+}
+
+/* Enhanced model button styling */
+.model-button {
+    background: linear-gradient(135deg, #2a2a2a, #1e1e1e) !important;
+    color: white !important;
+    border: 2px solid transparent !important;
+    margin: 2px 0 !important;
+    border-radius: 5px !important;
+    padding: 8px 12px !important;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    position: relative !important;
+    overflow: hidden !important;
+    box-shadow: 
+        0 4px 15px rgba(0, 0, 0, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
+    font-weight: 600 !important;
+    font-size: 16px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
+    font-family: monospace !important;
+}
+
+.model-button:hover {
+    background: linear-gradient(135deg, #3a3a3a, #2e2e2e) !important;
+    color: #74b9ff !important;
+}
+
+.model-button:active {
+    background: linear-gradient(135deg, #2a2a2a, #1e1e1e) !important;
+    color: #5a9bd4 !important;
+}
+
+/* Model stats badge */
+.model-stats {
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    margin-top: 8px !important;
+    font-size: 12px !important;
+    opacity: 0.8 !important;
+}
+
+.stats-badge {
+    background: rgba(116, 185, 255, 0.2) !important;
+    padding: 4px 8px !important;
+    border-radius: 10px !important;
+    font-weight: 500 !important;
+    font-size: 11px !important;
+    color: #74b9ff !important;
+}
+
+.success-indicator {
+    width: 8px !important;
+    height: 8px !important;
+    border-radius: 50% !important;
+    display: inline-block !important;
+    margin-right: 6px !important;
 }
 
-/* Button styling */
-.gr-button {
+.success-high { background-color: #4CAF50 !important; }
+.success-medium { background-color: #FF9800 !important; }
+.success-low { background-color: #F44336 !important; }
+
+/* Regular button styling for non-model buttons */
+.gr-button:not(.model-button) {
     background-color: #222222 !important;
     color: white !important;
     border: 1px solid #444444 !important;
@@ -104,7 +219,7 @@ dark_theme_css = """
     transition: all 0.3s ease !important;
 }
 
-.gr-button:hover {
+.gr-button:not(.model-button):hover {
     background-color: #333333 !important;
     border-color: #666666 !important;
 }
@@ -120,6 +235,41 @@ h1, h2, h3, p, .markdown {
     color: white !important;
 }
 
+/* Sidebar header enhancement */
+.sidebar h1 {
+    background: linear-gradient(45deg, #74b9ff, #a29bfe) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+    text-align: center !important;
+    margin-bottom: 15px !important;
+    font-size: 28px !important;
+    font-weight: 700 !important;
+    font-family: monospace !important;
+}
+
+/* Sidebar description text */
+.sidebar p {
+    text-align: center !important;
+    margin-bottom: 20px !important;
+    line-height: 1.5 !important;
+    font-size: 14px !important;
+    font-family: monospace !important;
+}
+
+.sidebar strong {
+    color: #74b9ff !important;
+    font-weight: 600 !important;
+    font-family: monospace !important;
+}
+
+.sidebar em {
+    color: #a29bfe !important;
+    font-style: normal !important;
+    opacity: 0.9 !important;
+    font-family: monospace !important;
+}
+
 /* Remove all borders globally */
 * {
     border-color: transparent !important;
@@ -129,6 +279,7 @@ h1, h2, h3, p, .markdown {
 .main-content {
     background-color: #000000 !important;
     padding: 20px !important;
+    margin-left: 300px !important;
 }
 """
 
@@ -138,14 +289,14 @@ with gr.Blocks(title="Model Test Results Dashboard", css=dark_theme_css) as demo
     with gr.Row():
         # Sidebar for model selection
         with gr.Column(scale=1, elem_classes=["sidebar"]):
-            gr.Markdown("# 🎯 Models")
-            gr.Markdown("Select a model to view test results")
+            gr.Markdown("# 🤖 AI Models")
+            gr.Markdown("**Select a model to analyze test results**\n\n*Interactive dashboard with detailed metrics*")
             
             # Model selection buttons in sidebar
             model_buttons = []
             for model_name in MODELS.keys():
                 btn = gr.Button(
-                    f"📊 {model_name.upper()}", 
+                    f"{model_name.lower()}", 
                     variant="secondary",
                     size="lg",
                     elem_classes=["model-button"]