Fix logo glow and change Size chart to use total parameters

Logo glow fix:
- Changed from URI fragment (#openhands-logo) to MIME parameter (openhands=logo)
- MIME parameters are more reliably preserved in attribute selectors
- Updated CSS selectors to match the new pattern

Size chart fix:
- Changed x-axis from active parameters to total parameters
- Updated axis title to 'Parameters (Billions)'
- Simplified hover text to show just 'Parameters' instead of 'Total/Active'

content.py

@@ -1145,20 +1145,20 @@ h3 .header-link-icon {
 
 /* Re-invert company logo images so they display correctly */
 /* Also add a light gray circular glow behind them for visibility */
-/* Exclude OpenHands logo (identified by #openhands-logo fragment in href) */
-.dark .js-plotly-plot .layer-above image:not([href*="openhands-logo"]):not([xlink\\:href*="openhands-logo"]),
-.dark .js-plotly-plot .imagelayer image:not([href*="openhands-logo"]):not([xlink\\:href*="openhands-logo"]) {
+/* Exclude OpenHands logo (identified by openhands=logo MIME parameter) */
+.dark .js-plotly-plot .layer-above image:not([href*="openhands=logo"]):not([xlink\\:href*="openhands=logo"]),
+.dark .js-plotly-plot .imagelayer image:not([href*="openhands=logo"]):not([xlink\\:href*="openhands=logo"]) {
     filter: invert(1) hue-rotate(180deg) 
             drop-shadow(0 0 12px rgba(160, 165, 180, 0.95)) 
             drop-shadow(0 0 8px rgba(160, 165, 180, 0.9));
 }
 
 /* OpenHands logo at bottom - no glow, just re-invert for dark mode */
-/* The logo is identified by #openhands-logo fragment in the data URI */
-.dark .js-plotly-plot .layer-above image[href*="openhands-logo"],
-.dark .js-plotly-plot .layer-above image[xlink\\:href*="openhands-logo"],
-.dark .js-plotly-plot .imagelayer image[href*="openhands-logo"],
-.dark .js-plotly-plot .imagelayer image[xlink\\:href*="openhands-logo"] {
+/* The logo is identified by openhands=logo MIME parameter in the data URI */
+.dark .js-plotly-plot .layer-above image[href*="openhands=logo"],
+.dark .js-plotly-plot .layer-above image[xlink\\:href*="openhands=logo"],
+.dark .js-plotly-plot .imagelayer image[href*="openhands=logo"],
+.dark .js-plotly-plot .imagelayer image[xlink\\:href*="openhands=logo"] {
     filter: invert(1) hue-rotate(180deg) !important;
 }
 

leaderboard_transformer.py

@@ -65,16 +65,16 @@ URL_ANNOTATION = dict(
 def get_openhands_logo_image():
     """Get the OpenHands logo as a Plotly image dict for chart branding.
     
-    Uses a special URI format with #openhands-logo fragment to allow CSS targeting.
-    The fragment doesn't affect the image rendering but enables CSS selectors.
+    Uses a special MIME type parameter (;openhands=logo) to allow CSS targeting.
+    This enables CSS attribute selectors to identify this specific image.
     """
     if os.path.exists(OPENHANDS_LOGO_PATH_LIGHT):
         try:
             with open(OPENHANDS_LOGO_PATH_LIGHT, "rb") as f:
                 logo_data = base64.b64encode(f.read()).decode('utf-8')
-            # Add #openhands-logo fragment to enable CSS targeting for dark mode handling
+            # Add openhands=logo parameter to MIME type for CSS targeting
             return dict(
-                source=f"data:image/png;base64,{logo_data}#openhands-logo",
+                source=f"data:image/png;openhands=logo;base64,{logo_data}",
                 xref="paper",
                 yref="paper",
                 x=0,

main_page.py

@@ -78,7 +78,7 @@ def build_page():
         
         # Open Model Accuracy by Size Section (always shows open models only by design)
         gr.HTML('<h2>Open Model Accuracy by Size</h2>', elem_id="size-accuracy-header")
-        gr.Markdown("Compare open-weights model performance against their parameter count. The x-axis shows active parameters (relevant for MoE models).")
+        gr.Markdown("Compare open-weights model performance against their parameter count.")
         
         size_fig = create_accuracy_by_size_chart(test_df)
         gr.Plot(value=size_fig, elem_id="size-accuracy-chart")

visualizations.py

@@ -66,16 +66,16 @@ URL_ANNOTATION = dict(
 def get_openhands_logo_image():
     """Get the OpenHands logo as a Plotly image dict for chart branding.
     
-    Uses a special URI format with #openhands-logo fragment to allow CSS targeting.
-    The fragment doesn't affect the image rendering but enables CSS selectors.
+    Uses a special MIME type parameter (;openhands=logo) to allow CSS targeting.
+    This enables CSS attribute selectors to identify this specific image.
     """
     if os.path.exists(OPENHANDS_LOGO_PATH_LIGHT):
         try:
             with open(OPENHANDS_LOGO_PATH_LIGHT, "rb") as f:
                 logo_data = base64.b64encode(f.read()).decode('utf-8')
-            # Add #openhands-logo fragment to enable CSS targeting for dark mode handling
+            # Add openhands=logo parameter to MIME type for CSS targeting
             return dict(
-                source=f"data:image/png;base64,{logo_data}#openhands-logo",
+                source=f"data:image/png;openhands=logo;base64,{logo_data}",
                 xref="paper",
                 yref="paper",
                 x=0,
@@ -348,11 +348,10 @@ def create_accuracy_by_size_chart(df: pd.DataFrame) -> go.Figure:
     
     Args:
         df: DataFrame with columns including 'parameter_count_b' or 'Parameter_Count_B', 
-            'active_parameter_count_b' or 'Active_Parameter_Count_B',
             'average score', 'openness', 'Language Model'
     
     Returns:
-        Plotly figure showing accuracy vs model size
+        Plotly figure showing accuracy vs model size (total parameters)
     """
     import numpy as np
     
@@ -363,12 +362,6 @@ def create_accuracy_by_size_chart(df: pd.DataFrame) -> go.Figure:
             param_col = col
             break
     
-    active_param_col = None
-    for col in ['active_parameter_count_b', 'Active_Parameter_Count_B', 'Active Parameter Count B']:
-        if col in df.columns:
-            active_param_col = col
-            break
-    
     if df.empty or param_col is None:
         fig = go.Figure()
         fig.add_annotation(
@@ -440,19 +433,16 @@ def create_accuracy_by_size_chart(df: pd.DataFrame) -> go.Figure:
     data_points = []
     for _, row in plot_df.iterrows():
         total_params = row[param_col]
-        active_params = row.get(active_param_col) if active_param_col else None
         model_name = row.get(model_col, 'Unknown')
         score = row[score_col]
         
-        # Use active params for x-axis if available (more meaningful for MoE)
-        x_val = active_params if pd.notna(active_params) else total_params
+        # Use total params for x-axis
+        x_val = total_params
         
         # Create hover text matching existing chart style
         h_pad = "   "
         hover_text = f"<br>{h_pad}<b>{model_name}</b>{h_pad}<br>"
-        hover_text += f"{h_pad}Total Params: <b>{total_params:.0f}B</b>{h_pad}<br>"
-        if pd.notna(active_params):
-            hover_text += f"{h_pad}Active Params: <b>{active_params:.0f}B</b>{h_pad}<br>"
+        hover_text += f"{h_pad}Parameters: <b>{total_params:.0f}B</b>{h_pad}<br>"
         hover_text += f"{h_pad}Average Score: <b>{score:.1f}</b>{h_pad}<br>"
         
         data_points.append({
@@ -601,7 +591,7 @@ def create_accuracy_by_size_chart(df: pd.DataFrame) -> go.Figure:
         **STANDARD_LAYOUT,
         title="Open Model Accuracy by Size",
         xaxis=dict(
-            title="Active Parameters (Billions)",
+            title="Parameters (Billions)",
             type="log",
             range=[x_min_log, x_max_log]
         ),