Add OpenHands logo and URL branding to charts

- Add OpenHands logo at bottom left of all charts
- Add https://index.openhands.dev URL at bottom right
- Add logo assets for light/dark backgrounds
- Include branding in both leaderboard_transformer and visualizations charts

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

leaderboard_transformer.py

@@ -39,6 +39,66 @@ COMPANY_LOGO_MAP = {
     "minimax": {"path": "assets/logo-minimax.svg", "name": "MiniMax"},
 }
 
+# OpenHands branding constants
+OPENHANDS_LOGO_PATH = "assets/openhands_logo_color_forwhite.png"
+OPENHANDS_URL = "https://index.openhands.dev"
+
+# URL annotation for bottom right of charts
+URL_ANNOTATION = dict(
+    text=OPENHANDS_URL,
+    xref="paper",
+    yref="paper",
+    x=1,
+    y=-0.12,
+    xanchor="right",
+    yanchor="bottom",
+    showarrow=False,
+    font=dict(
+        family="Outfit, ui-sans-serif, sans-serif",
+        size=11,
+        color="#82889B",  # neutral-400
+    ),
+)
+
+
+def get_openhands_logo_image():
+    """Get the OpenHands logo as a Plotly image dict for chart branding."""
+    if os.path.exists(OPENHANDS_LOGO_PATH):
+        try:
+            with open(OPENHANDS_LOGO_PATH, "rb") as f:
+                logo_data = base64.b64encode(f.read()).decode('utf-8')
+            return dict(
+                source=f"data:image/png;base64,{logo_data}",
+                xref="paper",
+                yref="paper",
+                x=0,
+                y=-0.12,
+                sizex=0.15,
+                sizey=0.15,
+                xanchor="left",
+                yanchor="bottom",
+            )
+        except Exception:
+            pass
+    return None
+
+
+def add_branding_to_figure(fig: go.Figure) -> go.Figure:
+    """Add OpenHands logo and URL to a Plotly figure."""
+    # Add logo image
+    logo_image = get_openhands_logo_image()
+    if logo_image:
+        existing_images = list(fig.layout.images) if fig.layout.images else []
+        existing_images.append(logo_image)
+        fig.update_layout(images=existing_images)
+    
+    # Add URL annotation
+    existing_annotations = list(fig.layout.annotations) if fig.layout.annotations else []
+    existing_annotations.append(URL_ANNOTATION)
+    fig.update_layout(annotations=existing_annotations)
+    
+    return fig
+
 
 def get_company_from_model_name(model_name: str) -> dict:
     """
@@ -737,6 +797,8 @@ def _plot_scatter_plotly(
             font_family="Outfit",
             font_color="#F7F8FB",  # neutral-50
         ),
+        # Add margin at bottom for logo and URL
+        margin=dict(b=80),
     )
     
     # Add company logo images to the layout if any were collected
@@ -744,6 +806,9 @@ def _plot_scatter_plotly(
         layout_config['images'] = layout_images
     
     fig.update_layout(**layout_config)
+    
+    # Add OpenHands branding (logo and URL)
+    add_branding_to_figure(fig)
 
     return fig
 

visualizations.py

@@ -30,6 +30,7 @@ STANDARD_LAYOUT = dict(
     legend=dict(
         bgcolor='#F7F8FB',  # neutral-50
     ),
+    margin=dict(b=80),  # Extra margin for logo and URL
 )
 
 # Standard font for annotations
@@ -39,6 +40,66 @@ STANDARD_FONT = dict(
     family='Outfit'
 )
 
+# OpenHands branding constants
+OPENHANDS_LOGO_PATH = "assets/openhands_logo_color_forwhite.png"
+OPENHANDS_URL = "https://index.openhands.dev"
+
+# URL annotation for bottom right of charts
+URL_ANNOTATION = dict(
+    text=OPENHANDS_URL,
+    xref="paper",
+    yref="paper",
+    x=1,
+    y=-0.12,
+    xanchor="right",
+    yanchor="bottom",
+    showarrow=False,
+    font=dict(
+        family="Outfit, ui-sans-serif, sans-serif",
+        size=11,
+        color="#82889B",  # neutral-400
+    ),
+)
+
+
+def get_openhands_logo_image():
+    """Get the OpenHands logo as a Plotly image dict for chart branding."""
+    if os.path.exists(OPENHANDS_LOGO_PATH):
+        try:
+            with open(OPENHANDS_LOGO_PATH, "rb") as f:
+                logo_data = base64.b64encode(f.read()).decode('utf-8')
+            return dict(
+                source=f"data:image/png;base64,{logo_data}",
+                xref="paper",
+                yref="paper",
+                x=0,
+                y=-0.12,
+                sizex=0.15,
+                sizey=0.15,
+                xanchor="left",
+                yanchor="bottom",
+            )
+        except Exception:
+            pass
+    return None
+
+
+def add_branding_to_figure(fig: go.Figure) -> go.Figure:
+    """Add OpenHands logo and URL to a Plotly figure."""
+    # Add logo image
+    logo_image = get_openhands_logo_image()
+    if logo_image:
+        existing_images = list(fig.layout.images) if fig.layout.images else []
+        existing_images.append(logo_image)
+        fig.update_layout(images=existing_images)
+    
+    # Add URL annotation
+    existing_annotations = list(fig.layout.annotations) if fig.layout.annotations else []
+    existing_annotations.append(URL_ANNOTATION)
+    fig.update_layout(annotations=existing_annotations)
+    
+    return fig
+
 
 def create_evolution_over_time_chart(df: pd.DataFrame) -> go.Figure:
     """
@@ -264,6 +325,9 @@ def create_evolution_over_time_chart(df: pd.DataFrame) -> go.Figure:
     
     fig.update_layout(**layout_config)
     
+    # Add OpenHands branding
+    add_branding_to_figure(fig)
+    
     return fig
 
 
@@ -519,4 +583,7 @@ def create_accuracy_by_size_chart(df: pd.DataFrame) -> go.Figure:
         align='left'
     )
     
+    # Add OpenHands branding
+    add_branding_to_figure(fig)
+    
     return fig