Add Winners by Category section to main page

- Implemented new 'Winners by Category' section displaying top 5 systems for each benchmark category
- Added functions get_winners_by_category() and create_winners_by_category_html() to ui_components.py
- Created responsive grid layout with category cards showing:
- Category icon and name header
- Ranked table with medal emojis (🥇🥈🥉) for top 3
- Company logos for model providers
- SDK version and model name
- Category score
- Added comprehensive CSS styles in content.py:
- Light and dark mode support
- Responsive grid for mobile devices
- Hover effects for cards
- Consistent styling with existing design system
- Section placed directly after main leaderboard results

Co-authored-by: openhands <openhands@all-hands.dev>

content.py

@@ -963,4 +963,194 @@ h3 .header-link-icon {
 #main-leaderboard td:nth-child(7) .prose {
     font-weight: 700 !important;
 }
+
+/* ====== Winners by Category Section ====== */
+.winners-by-category-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+    margin: 20px 0;
+}
+
+.winner-category-card {
+    background: #fff;
+    border: 1px solid #032629;
+    border-radius: 12px;
+    padding: 16px;
+    transition: box-shadow 0.2s ease;
+}
+
+.dark .winner-category-card {
+    background: rgba(250, 242, 233, 0.05);
+    border-color: #9fead1;
+}
+
+.winner-category-card:hover {
+    box-shadow: 0 4px 12px rgba(3, 38, 41, 0.15);
+}
+
+.dark .winner-category-card:hover {
+    box-shadow: 0 4px 12px rgba(159, 234, 209, 0.2);
+}
+
+.winner-category-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 2px solid #F0529C;
+}
+
+.dark .winner-category-header {
+    border-bottom-color: #0FCB8C;
+}
+
+.winner-category-icon {
+    width: 32px;
+    height: 32px;
+}
+
+.winner-category-header h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 700;
+    color: #032629;
+}
+
+.dark .winner-category-header h3 {
+    color: #fff;
+}
+
+.winner-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+}
+
+.winner-table thead tr {
+    border-bottom: 1px solid #ddd;
+}
+
+.dark .winner-table thead tr {
+    border-bottom-color: #4a5a5a;
+}
+
+.winner-table th {
+    padding: 8px 4px;
+    text-align: left;
+    font-weight: 600;
+    color: #667876;
+    font-size: 11px;
+    text-transform: uppercase;
+}
+
+.dark .winner-table th {
+    color: #9fead1;
+}
+
+.winner-table td {
+    padding: 10px 4px;
+    vertical-align: middle;
+    border-bottom: 1px solid #eee;
+}
+
+.dark .winner-table td {
+    border-bottom-color: #2a3a3a;
+}
+
+.winner-table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.winner-table .rank-col {
+    width: 32px;
+    text-align: center;
+    font-size: 14px;
+}
+
+.winner-table .score-col {
+    width: 60px;
+    text-align: right;
+    color: #F0529C;
+    font-size: 14px;
+}
+
+.dark .winner-table .score-col {
+    color: #0FCB8C;
+}
+
+.system-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.company-logo-small {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+}
+
+.system-details {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.sdk-name {
+    font-weight: 600;
+    color: #032629;
+    font-size: 13px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.dark .sdk-name {
+    color: #fff;
+}
+
+.model-name {
+    font-size: 11px;
+    color: #667876;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.dark .model-name {
+    color: #9fead1;
+}
+
+.no-data {
+    text-align: center;
+    color: #999;
+    font-style: italic;
+    padding: 20px !important;
+}
+
+/* Responsive adjustments for winners section */
+@media (max-width: 600px) {
+    .winners-by-category-container {
+        grid-template-columns: 1fr;
+    }
+    
+    .winner-category-card {
+        padding: 12px;
+    }
+    
+    .winner-table .score-col,
+    .winner-table .rank-col {
+        font-size: 12px;
+    }
+    
+    .sdk-name {
+        font-size: 12px;
+    }
+    
+    .model-name {
+        font-size: 10px;
+    }
+}
 """

main_page.py

@@ -3,7 +3,11 @@ matplotlib.use('Agg')
 import gradio as gr
 
 
-from ui_components import create_leaderboard_display, get_full_leaderboard_data
+from ui_components import (
+    create_leaderboard_display,
+    get_full_leaderboard_data,
+    create_winners_by_category_html,
+)
 
 from content import (
     CITATION_BUTTON_LABEL,
@@ -39,6 +43,14 @@ def build_page():
             split_name="test"
         )
         
+        # --- Winners by Category Section ---
+        gr.Markdown("---")
+        gr.HTML('<h2>Winners by Category</h2>', elem_id="winners-header")
+        gr.Markdown("Top 5 performing systems in each benchmark category.")
+        
+        winners_html = create_winners_by_category_html(test_df, top_n=5)
+        gr.HTML(winners_html, elem_id="winners-by-category")
+        
         # --- New Visualization Sections ---
         gr.Markdown("---")
         

ui_components.py

@@ -414,6 +414,162 @@ except ImportError:
     pass  # setup_data may not be available during import
 
 
+# Category definitions for Winners by Category section
+CATEGORY_DEFINITIONS = [
+    {"name": "Issue Resolution", "score_col": "Issue Resolution Score", "icon": "bug-fixing.svg"},
+    {"name": "Greenfield", "score_col": "Greenfield Score", "icon": "app-creation.svg"},
+    {"name": "Frontend", "score_col": "Frontend Score", "icon": "frontend-development.svg"},
+    {"name": "Testing", "score_col": "Testing Score", "icon": "test-generation.svg"},
+    {"name": "Information Gathering", "score_col": "Information Gathering Score", "icon": "information-gathering.svg"},
+]
+
+
+def get_winners_by_category(df: pd.DataFrame, top_n: int = 5) -> dict:
+    """
+    Extract the top N systems for each category based on their score.
+    
+    Args:
+        df: The full leaderboard DataFrame with all scores
+        top_n: Number of top systems to return per category (default: 5)
+        
+    Returns:
+        Dictionary mapping category name to list of top systems with their scores
+    """
+    winners = {}
+    
+    for cat_def in CATEGORY_DEFINITIONS:
+        cat_name = cat_def["name"]
+        score_col = cat_def["score_col"]
+        
+        if score_col not in df.columns:
+            winners[cat_name] = []
+            continue
+        
+        # Filter to rows that have a valid score for this category
+        cat_df = df[df[score_col].notna()].copy()
+        
+        if cat_df.empty:
+            winners[cat_name] = []
+            continue
+        
+        # Sort by score descending and take top N
+        cat_df = cat_df.sort_values(score_col, ascending=False).head(top_n)
+        
+        # Extract relevant info
+        top_systems = []
+        for rank, (_, row) in enumerate(cat_df.iterrows(), 1):
+            system_info = {
+                "rank": rank,
+                "sdk_version": row.get("SDK Version", "Unknown"),
+                "language_model": row.get("Language Model", "Unknown"),
+                "score": row[score_col],
+            }
+            top_systems.append(system_info)
+        
+        winners[cat_name] = top_systems
+    
+    return winners
+
+
+def create_winners_by_category_html(df: pd.DataFrame, top_n: int = 5) -> str:
+    """
+    Create an HTML table displaying the top N winners for each category.
+    
+    Args:
+        df: The full leaderboard DataFrame
+        top_n: Number of top systems to show per category
+        
+    Returns:
+        HTML string with the winners table
+    """
+    winners = get_winners_by_category(df, top_n)
+    
+    # Build the HTML table
+    html_parts = ['<div class="winners-by-category-container">']
+    
+    # Create a card for each category
+    for cat_def in CATEGORY_DEFINITIONS:
+        cat_name = cat_def["name"]
+        icon_file = cat_def["icon"]
+        icon_uri = get_svg_as_data_uri(f"assets/{icon_file}")
+        
+        top_systems = winners.get(cat_name, [])
+        
+        html_parts.append(f'''
+        <div class="winner-category-card">
+            <div class="winner-category-header">
+                <img src="{icon_uri}" alt="{cat_name}" class="winner-category-icon">
+                <h3>{cat_name}</h3>
+            </div>
+            <table class="winner-table">
+                <thead>
+                    <tr>
+                        <th class="rank-col">#</th>
+                        <th class="system-col">System</th>
+                        <th class="score-col">Score</th>
+                    </tr>
+                </thead>
+                <tbody>
+        ''')
+        
+        if top_systems:
+            for system in top_systems:
+                rank = system["rank"]
+                sdk_version = system["sdk_version"]
+                language_model = system["language_model"]
+                score = system["score"]
+                
+                # Get company logo for the model
+                company_info = get_company_from_model(language_model)
+                logo_uri = get_svg_as_data_uri(company_info["path"])
+                
+                # Format model name - clean it if it's a list
+                if isinstance(language_model, list):
+                    language_model = language_model[0] if language_model else "Unknown"
+                model_display = str(language_model).split('/')[-1]  # Remove provider prefix
+                
+                # Add medal emoji for top 3
+                rank_display = rank
+                if rank == 1:
+                    rank_display = "🥇"
+                elif rank == 2:
+                    rank_display = "🥈"
+                elif rank == 3:
+                    rank_display = "🥉"
+                
+                html_parts.append(f'''
+                    <tr>
+                        <td class="rank-col">{rank_display}</td>
+                        <td class="system-col">
+                            <div class="system-info">
+                                <img src="{logo_uri}" alt="{company_info['name']}" class="company-logo-small">
+                                <div class="system-details">
+                                    <span class="sdk-name">{sdk_version}</span>
+                                    <span class="model-name">{model_display}</span>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="score-col"><strong>{score:.1f}</strong></td>
+                    </tr>
+                ''')
+        else:
+            html_parts.append('''
+                    <tr>
+                        <td colspan="3" class="no-data">No submissions yet</td>
+                    </tr>
+            ''')
+        
+        html_parts.append('''
+                </tbody>
+            </table>
+        </div>
+        ''')
+    
+    html_parts.append('</div>')
+    
+    return ''.join(html_parts)
+
+
 class DummyViewer:
     """A mock viewer to be cached on error. It has a ._load() method
        to ensure it behaves like the real LeaderboardViewer."""