Add company logos to graphs and tables, label frontier points with model names

- Created SVG logo files for major AI companies (Anthropic, OpenAI, Google, Meta, Mistral, DeepSeek, xAI, Cohere, Alibaba, Moonshot)
- Added company logo mapping based on model name patterns
- Added Company logo column to both main leaderboard and benchmark tables
- Added company logo images on scatter plots at each data point
- Added model name labels to Pareto frontier points on graphs
- Updated column widths to accommodate new Company column

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

leaderboard_transformer.py

@@ -5,11 +5,61 @@ import logging
 from typing import Optional
 import base64
 import html
+import os
 
 import aliases
 
 logger = logging.getLogger(__name__)
 
+# Company logo mapping for graphs - maps model name patterns to company logo files
+COMPANY_LOGO_MAP = {
+    "anthropic": {"path": "assets/logo-anthropic.svg", "name": "Anthropic"},
+    "claude": {"path": "assets/logo-anthropic.svg", "name": "Anthropic"},
+    "openai": {"path": "assets/logo-openai.svg", "name": "OpenAI"},
+    "gpt": {"path": "assets/logo-openai.svg", "name": "OpenAI"},
+    "o1": {"path": "assets/logo-openai.svg", "name": "OpenAI"},
+    "o3": {"path": "assets/logo-openai.svg", "name": "OpenAI"},
+    "google": {"path": "assets/logo-google.svg", "name": "Google"},
+    "gemini": {"path": "assets/logo-google.svg", "name": "Google"},
+    "gemma": {"path": "assets/logo-google.svg", "name": "Google"},
+    "meta": {"path": "assets/logo-meta.svg", "name": "Meta"},
+    "llama": {"path": "assets/logo-meta.svg", "name": "Meta"},
+    "mistral": {"path": "assets/logo-mistral.svg", "name": "Mistral"},
+    "mixtral": {"path": "assets/logo-mistral.svg", "name": "Mistral"},
+    "codestral": {"path": "assets/logo-mistral.svg", "name": "Mistral"},
+    "deepseek": {"path": "assets/logo-deepseek.svg", "name": "DeepSeek"},
+    "xai": {"path": "assets/logo-xai.svg", "name": "xAI"},
+    "grok": {"path": "assets/logo-xai.svg", "name": "xAI"},
+    "cohere": {"path": "assets/logo-cohere.svg", "name": "Cohere"},
+    "command": {"path": "assets/logo-cohere.svg", "name": "Cohere"},
+    "qwen": {"path": "assets/logo-alibaba.svg", "name": "Alibaba"},
+    "alibaba": {"path": "assets/logo-alibaba.svg", "name": "Alibaba"},
+    "kimi": {"path": "assets/logo-moonshot.svg", "name": "Moonshot"},
+    "moonshot": {"path": "assets/logo-moonshot.svg", "name": "Moonshot"},
+}
+
+
+def get_company_from_model_name(model_name: str) -> dict:
+    """
+    Gets the company info (logo path and name) from a model name.
+    Returns default unknown logo if no match found.
+    """
+    if not model_name:
+        return {"path": "assets/logo-unknown.svg", "name": "Unknown"}
+
+    # Handle list of models - use the first one
+    if isinstance(model_name, list):
+        model_name = model_name[0] if model_name else ""
+
+    model_lower = str(model_name).lower()
+
+    # Check each pattern
+    for pattern, company_info in COMPANY_LOGO_MAP.items():
+        if pattern in model_lower:
+            return company_info
+
+    return {"path": "assets/logo-unknown.svg", "name": "Unknown"}
+
 INFORMAL_TO_FORMAL_NAME_MAP = {
     # Short Names
     "lit": "Literature Understanding",
@@ -423,6 +473,7 @@ def _plot_scatter_plotly(
         return fig
 
     # --- Section 4: Calculate and Draw Pareto Frontier ---
+    frontier_rows = []  # Store entire rows for frontier points to access model names
     if x_col_to_use and y_col_to_use:
         sorted_data = data_plot.sort_values(by=[x_col_to_use, y_col_to_use], ascending=[True, False])
         frontier_points = []
@@ -432,6 +483,7 @@ def _plot_scatter_plotly(
             score = row[y_col_to_use]
             if score >= max_score_so_far:
                 frontier_points.append({'x': row[x_col_to_use], 'y': score})
+                frontier_rows.append(row)
                 max_score_so_far = score
 
         if frontier_points:
@@ -496,7 +548,10 @@ def _plot_scatter_plotly(
     # Use consistent shape for all points (no tooling distinction)
     data_plot['shape_symbol'] = default_shape
 
-    # --- Section 6: Plot Markers by "Openness" Category ---
+    # --- Section 6: Plot Markers by "Openness" Category with Company Logos ---
+    # Collect layout images for company logos
+    layout_images = []
+    
     for category in category_order:
         group = data_plot[data_plot['Openness'] == category]
         if group.empty:
@@ -518,6 +573,73 @@ def _plot_scatter_plotly(
                 line=dict(width=1, color='deeppink')
             )
         ))
+        
+        # Add company logo images for each point in this group
+        for _, row in group.iterrows():
+            model_name = row.get('Language Model', '')
+            company_info = get_company_from_model_name(model_name)
+            logo_path = company_info['path']
+            
+            # Read the SVG file and encode as base64 data URI
+            if os.path.exists(logo_path):
+                try:
+                    with open(logo_path, 'rb') as f:
+                        encoded_logo = base64.b64encode(f.read()).decode('utf-8')
+                        logo_uri = f"data:image/svg+xml;base64,{encoded_logo}"
+                        
+                        # Add image at data point position with small offset
+                        layout_images.append(dict(
+                            source=logo_uri,
+                            xref="x",
+                            yref="y",
+                            x=row[x_col_to_use],
+                            y=row[y_col_to_use],
+                            sizex=max_reported_cost * 0.06 if max_reported_cost > 0 else 0.5,  # Scale relative to data
+                            sizey=3,  # Fixed y size in data units
+                            xanchor="center",
+                            yanchor="bottom",
+                            layer="above"
+                        ))
+                except Exception as e:
+                    logger.warning(f"Could not load logo {logo_path}: {e}")
+
+    # --- Section 7: Add Model Name Labels to Frontier Points ---
+    if frontier_rows:
+        frontier_x = []
+        frontier_y = []
+        frontier_labels = []
+        
+        for row in frontier_rows:
+            frontier_x.append(row[x_col_to_use])
+            frontier_y.append(row[y_col_to_use])
+            
+            # Get the model name for the label
+            model_name = row.get('Language Model', '')
+            if isinstance(model_name, list):
+                model_name = model_name[0] if model_name else ''
+            # Clean the model name (remove path prefixes)
+            model_name = str(model_name).split('/')[-1]
+            # Truncate long names
+            if len(model_name) > 25:
+                model_name = model_name[:22] + '...'
+            frontier_labels.append(model_name)
+        
+        # Add text labels for frontier points
+        fig.add_trace(go.Scatter(
+            x=frontier_x,
+            y=frontier_y,
+            mode='text',
+            name='Frontier Labels',
+            showlegend=False,
+            text=frontier_labels,
+            textposition='top center',
+            textfont=dict(
+                size=10,
+                color='#032629',
+                family='Manrope'
+            ),
+            hoverinfo='skip'
+        ))
 
     # --- Section 8: Configure Layout  ---
     xaxis_config = dict(title=x_axis_label, rangemode="tozero")
@@ -535,10 +657,11 @@ def _plot_scatter_plotly(
         xaxis_config['range'] = [-0.2, (max_reported_cost + (max_reported_cost / 4))]
 
 
-    fig.update_layout(
+    # Build layout configuration
+    layout_config = dict(
         template="plotly_white",
         title=f"OpenHands Index {name} Leaderboard",
-        xaxis=xaxis_config, # Use the updated config
+        xaxis=xaxis_config,
         yaxis=dict(title="Average (mean) score", range=[-0.2, None]),
         legend=dict(
             bgcolor='#FAF2E9',
@@ -551,6 +674,12 @@ def _plot_scatter_plotly(
             font_color="#d3dedc",
         ),
     )
+    
+    # Add company logo images to the layout if any were collected
+    if layout_images:
+        layout_config['images'] = layout_images
+    
+    fig.update_layout(**layout_config)
 
     return fig
 

ui_components.py

@@ -3,6 +3,7 @@ import pandas as pd
 import plotly.graph_objects as go
 import os
 import base64
+import re
 
 from huggingface_hub import HfApi
 
@@ -36,6 +37,68 @@ from content import (
 
 api = HfApi()
 os.makedirs(EXTRACTED_DATA_DIR, exist_ok=True)
+
+# Company logo mapping - maps model name patterns to company logo files
+COMPANY_LOGO_MAP = {
+    "anthropic": {"path": "assets/logo-anthropic.svg", "name": "Anthropic"},
+    "claude": {"path": "assets/logo-anthropic.svg", "name": "Anthropic"},
+    "openai": {"path": "assets/logo-openai.svg", "name": "OpenAI"},
+    "gpt": {"path": "assets/logo-openai.svg", "name": "OpenAI"},
+    "o1": {"path": "assets/logo-openai.svg", "name": "OpenAI"},
+    "o3": {"path": "assets/logo-openai.svg", "name": "OpenAI"},
+    "google": {"path": "assets/logo-google.svg", "name": "Google"},
+    "gemini": {"path": "assets/logo-google.svg", "name": "Google"},
+    "gemma": {"path": "assets/logo-google.svg", "name": "Google"},
+    "meta": {"path": "assets/logo-meta.svg", "name": "Meta"},
+    "llama": {"path": "assets/logo-meta.svg", "name": "Meta"},
+    "mistral": {"path": "assets/logo-mistral.svg", "name": "Mistral"},
+    "mixtral": {"path": "assets/logo-mistral.svg", "name": "Mistral"},
+    "codestral": {"path": "assets/logo-mistral.svg", "name": "Mistral"},
+    "deepseek": {"path": "assets/logo-deepseek.svg", "name": "DeepSeek"},
+    "xai": {"path": "assets/logo-xai.svg", "name": "xAI"},
+    "grok": {"path": "assets/logo-xai.svg", "name": "xAI"},
+    "cohere": {"path": "assets/logo-cohere.svg", "name": "Cohere"},
+    "command": {"path": "assets/logo-cohere.svg", "name": "Cohere"},
+    "qwen": {"path": "assets/logo-alibaba.svg", "name": "Alibaba"},
+    "alibaba": {"path": "assets/logo-alibaba.svg", "name": "Alibaba"},
+    "kimi": {"path": "assets/logo-moonshot.svg", "name": "Moonshot"},
+    "moonshot": {"path": "assets/logo-moonshot.svg", "name": "Moonshot"},
+}
+
+
+def get_company_from_model(model_name: str) -> dict:
+    """
+    Gets the company info (logo path and name) from a model name.
+    Returns default unknown logo if no match found.
+    """
+    if not model_name:
+        return {"path": "assets/logo-unknown.svg", "name": "Unknown"}
+
+    # Handle list of models - use the first one
+    if isinstance(model_name, list):
+        model_name = model_name[0] if model_name else ""
+
+    model_lower = str(model_name).lower()
+
+    # Check each pattern
+    for pattern, company_info in COMPANY_LOGO_MAP.items():
+        if pattern in model_lower:
+            return company_info
+
+    return {"path": "assets/logo-unknown.svg", "name": "Unknown"}
+
+
+def get_company_logo_html(model_name: str) -> str:
+    """
+    Generates HTML for a company logo based on the model name.
+    """
+    company_info = get_company_from_model(model_name)
+    uri = get_svg_as_data_uri(company_info["path"])
+    if uri:
+        return f'<img src="{uri}" alt="{company_info["name"]}" title="{company_info["name"]}" style="width:20px; height:20px; vertical-align: middle;">'
+    return ""
+
+
 # Simplified icon map (no tooling distinction, only openness)
 # Not actually used since we removed icons from the table, but keeping for potential future use
 OPENNESS_ICON_MAP = {
@@ -384,6 +447,9 @@ def create_leaderboard_display(
             return f'<img src="{uri}" alt="{openness_val}" title="{openness_val}" style="width:24px; height:24px;">'
         
         df_display['Icon'] = df_display.apply(get_openness_icon_html, axis=1)
+        
+        # Add company logo column based on the Language Model
+        df_display['Company'] = df_display['Language Model'].apply(get_company_logo_html)
 
         for col in df_display.columns:
             if "Cost" in col:
@@ -403,6 +469,9 @@ def create_leaderboard_display(
             )
 
         all_cols = df_display.columns.tolist()
+        # Move Company logo column after Icon
+        if 'Company' in all_cols:
+            all_cols.insert(0, all_cols.pop(all_cols.index('Company')))
         all_cols.insert(0, all_cols.pop(all_cols.index('Icon')))
         all_cols.insert(0, all_cols.pop(all_cols.index('Pareto')))
         df_display = df_display[all_cols]
@@ -413,6 +482,7 @@ def create_leaderboard_display(
         header_rename_map = {
             "Pareto": "",
             "Icon": "",
+            "Company": "",
         }
         df_display = df_display.rename(columns=header_rename_map)
         
@@ -440,12 +510,13 @@ def create_leaderboard_display(
     for col in df_headers:
         if col == "Logs" or "Cost" in col or "Score" in col:
             df_datatypes.append("markdown")
-        elif col in ["SDK Version","Language Model", ""]:  # "" for renamed Pareto/Icon columns
+        elif col in ["SDK Version","Language Model", ""]:  # "" for renamed Pareto/Icon/Company columns
             df_datatypes.append("html")
         else:
             df_datatypes.append("str")
     # Dynamically set widths for the DataFrame columns
-    fixed_start_widths = [40, 40, 200, 100, 200]
+    # Order: Pareto, Icon, Company, Language Model, SDK Version, ...
+    fixed_start_widths = [40, 40, 40, 200, 100, 200]
     num_score_cost_cols = 0
     remaining_headers = df_headers[len(fixed_start_widths):]
     for col in remaining_headers:
@@ -599,6 +670,9 @@ def create_benchmark_details_display(
             return f'<img src="{uri}" alt="{openness_val}" title="{openness_val}" style="width:24px; height:24px;">'
         
         benchmark_table_df['Icon'] = benchmark_table_df.apply(get_openness_icon_html, axis=1)
+        
+        # Add company logo column based on the Language Model
+        benchmark_table_df['Company'] = benchmark_table_df['Language Model'].apply(get_company_logo_html)
 
         #Make pretty and format the Language Model column
         benchmark_table_df['Language Model'] = benchmark_table_df['Language Model'].apply(clean_llm_base_list)
@@ -633,6 +707,7 @@ def create_benchmark_details_display(
         desired_cols_in_order = [
             'Pareto',
             'Icon',
+            'Company',
             'Language Model',
             'SDK Version',
             'Attempted Benchmark',
@@ -650,10 +725,11 @@ def create_benchmark_details_display(
             benchmark_score_col: 'Score',
             benchmark_cost_col: 'Cost',
         }, inplace=True)
-        # Remove Pareto and Icon column headers (rename to empty string)
+        # Remove Pareto, Icon, and Company column headers (rename to empty string)
         header_rename_map = {
             "Pareto": "",
             "Icon": "",
+            "Company": "",
         }
         benchmark_table_df = benchmark_table_df.rename(columns=header_rename_map)
         
@@ -663,7 +739,7 @@ def create_benchmark_details_display(
         for col in df_headers:
             if "Logs" in col or "Cost" in col or "Score" in col:
                 df_datatypes.append("markdown")
-            elif col in ["SDK Version", "Language Model", ""]:  # "" for renamed Pareto/Icon columns
+            elif col in ["SDK Version", "Language Model", ""]:  # "" for renamed Pareto/Icon/Company columns
                 df_datatypes.append("html")
             else:
                 df_datatypes.append("str")
@@ -689,7 +765,7 @@ def create_benchmark_details_display(
                 datatype=df_datatypes,
                 interactive=False,
                 wrap=True,
-                column_widths=[40, 40, 200, 150, 175, 85, 100, 100, 80, 40],
+                column_widths=[40, 40, 40, 200, 150, 175, 85, 100, 100, 80, 40],
                 show_search="search",
                 elem_classes=["wrap-header-df"]
             )