UI cleanup and About page updates

1. Removed legend box from graph (OpenHands/Pareto/Company Logos)
2. Combined Pareto, lock, and company logo columns into Language Model column
3. Removed dataset structure SVG image from main page
4. Updated Acknowledgements section - shortened AstaBench credit, added links to component benchmarks
5. Updated Citation to be for OpenHands Index with authors: Juan Michelini, Simon Rosenberg, Xingyao Wang, Graham Neubig

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

about.py

@@ -155,23 +155,21 @@ def build_page():
             """
             <h2>Acknowledgements</h2>
             <p>
-                The OpenHands Index leaderboard interface and visualization components are adapted from the 
+                The OpenHands Index leaderboard interface is adapted from the 
                 <a href="https://huggingface.co/spaces/allenai/asta-bench-leaderboard" target="_blank" class="primary-link-button">AstaBench Leaderboard</a> 
-                developed by the Allen Institute for AI. We thank the AstaBench team for their excellent work in creating 
-                a clear and effective leaderboard design that we have customized for the software engineering domain.
+                developed by the Allen Institute for AI.
             </p>
             <p>
-                Key aspects adapted from AstaBench include:
+                We thank the teams behind the component benchmarks used in OpenHands Index:
             </p>
             <ul class="info-list">
-                <li>Macro-averaging methodology for computing overall scores from category-level averages</li>
-                <li>Interactive data visualization and filtering components</li>
-                <li>Leaderboard UI structure and styling</li>
+                <li><a href="https://www.swebench.com/" target="_blank">SWE-bench</a> - Princeton NLP Group</li>
+                <li><a href="https://github.com/multi-swe-bench/multi-swe-bench" target="_blank">Multi-SWE-bench</a> - Multi-SWE-bench Team</li>
+                <li><a href="https://github.com/OpenHands/SWE-bench-multimodal" target="_blank">SWE-bench Multimodal</a> - OpenHands Team</li>
+                <li><a href="https://github.com/logic-star-ai/swt-bench" target="_blank">SWT-bench</a> - Logic Star AI</li>
+                <li><a href="https://github.com/commit-0/commit0" target="_blank">Commit0</a> - Commit0 Team</li>
+                <li><a href="https://huggingface.co/gaia-benchmark" target="_blank">GAIA</a> - Hugging Face & Meta AI</li>
             </ul>
-            <p>
-                We have extended and modified this foundation to support software engineering benchmarks and the 
-                specific requirements of evaluating AI coding agents.
-            </p>
             """
         )
         gr.Markdown("---", elem_classes="divider-line")
@@ -181,14 +179,14 @@ def build_page():
             """
             <h2>Citation</h2>
             <p>
-                If you use OpenHands or reference the OpenHands Index in your work, please cite:
+                If you reference the OpenHands Index in your work, please cite:
             </p>
             <pre class="citation-block">
-@misc{openhands2024,
-    title={OpenHands: An Open Platform for AI Software Developers as Generalist Agents},
-    author={OpenHands Team},
-    year={2024},
-    howpublished={https://github.com/OpenHands/OpenHands}
+@misc{openhandsindex2025,
+    title={OpenHands Index: A Comprehensive Leaderboard for AI Coding Agents},
+    author={Juan Michelini and Simon Rosenberg and Xingyao Wang and Graham Neubig},
+    year={2025},
+    howpublished={https://huggingface.co/spaces/OpenHands/openhands-index}
 }</pre>
             """
         )

main_page.py

@@ -20,17 +20,6 @@ def build_page():
         with gr.Column(scale=1):
             gr.HTML(INTRO_PARAGRAPH, elem_id="intro-paragraph")
 
-        with gr.Column(scale=1):
-            gr.Image(
-                value="assets/overall.svg",
-                show_label=False,
-                interactive=False,
-                show_download_button=False,
-                show_fullscreen_button=False,
-                show_share_button=False,
-                elem_id="diagram-image"
-            )
-
     # --- Leaderboard Display Section ---
     gr.Markdown("---")
     CATEGORY_NAME = "Overall"

ui_components.py

@@ -442,32 +442,13 @@ def create_leaderboard_display(
         """Prepare a DataFrame for display with all formatting applied."""
         df_display = df_view.copy()
         
+        # Get Pareto frontier info
         pareto_df = get_pareto_df(df_display)
         trophy_uri = get_svg_as_data_uri("assets/trophy.svg")
-        trophy_icon_html = f'<img src="{trophy_uri}" alt="On Pareto Frontier" title="On Pareto Frontier" style="width:25px; height:25px;">'
         if not pareto_df.empty and 'id' in pareto_df.columns:
             pareto_agent_names = pareto_df['id'].tolist()
         else:
             pareto_agent_names = []
-        df_display['Pareto'] = df_display.apply(
-            lambda row: trophy_icon_html if row['id'] in pareto_agent_names else '',
-            axis=1
-        )
-        
-        def get_openness_icon_html(row):
-            openness_val = row.get('Openness', '')
-            # Use custom lock SVG icons: blue open lock, red closed lock
-            if openness_val in [aliases.CANONICAL_OPENNESS_OPEN, 'Open', 'Open Source', 'Open Source + Open Weights']:
-                uri = get_svg_as_data_uri("assets/lock-open.svg")
-                return f'<img src="{uri}" alt="Open" title="Open source model" style="width:20px; height:20px;">'
-            else:
-                uri = get_svg_as_data_uri("assets/lock-closed.svg")
-                return f'<img src="{uri}" alt="Closed" title="Closed source model" style="width:20px; height:20px;">'
-        
-        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:
@@ -477,32 +458,56 @@ def create_leaderboard_display(
             if "Score" in col:
                 df_display = format_score_column(df_display, col)
         
+        # Clean the Language Model column first
         df_display['Language Model'] = df_display['Language Model'].apply(clean_llm_base_list)
-        df_display['Language Model'] = df_display['Language Model'].apply(format_llm_base_with_html)
+        
+        # Now combine icons with Language Model column
+        def format_language_model_with_icons(row):
+            icons_html = ''
+            
+            # Add Pareto trophy if on frontier
+            if row['id'] in pareto_agent_names:
+                icons_html += f'<img src="{trophy_uri}" alt="On Pareto Frontier" title="On Pareto Frontier" style="width:18px; height:18px; vertical-align:middle; margin-right:4px;">'
+            
+            # Add openness lock icon
+            openness_val = row.get('Openness', '')
+            if openness_val in [aliases.CANONICAL_OPENNESS_OPEN, 'Open', 'Open Source', 'Open Source + Open Weights']:
+                lock_uri = get_svg_as_data_uri("assets/lock-open.svg")
+                icons_html += f'<img src="{lock_uri}" alt="Open" title="Open source model" style="width:16px; height:16px; vertical-align:middle; margin-right:4px;">'
+            else:
+                lock_uri = get_svg_as_data_uri("assets/lock-closed.svg")
+                icons_html += f'<img src="{lock_uri}" alt="Closed" title="Closed source model" style="width:16px; height:16px; vertical-align:middle; margin-right:4px;">'
+            
+            # Add company logo
+            company_html = get_company_logo_html(row['Language Model'])
+            if company_html:
+                icons_html += company_html.replace('style="', 'style="vertical-align:middle; margin-right:6px; ')
+            
+            # Format the model name
+            model_name = row['Language Model']
+            if isinstance(model_name, list):
+                if len(model_name) > 1:
+                    tooltip_text = "\\n".join(map(str, model_name))
+                    model_text = f'<span class="tooltip-icon cell-tooltip-icon" style="cursor: help;" data-tooltip="{tooltip_text}">{model_name[0]} (+ {len(model_name) - 1}) ⓘ</span>'
+                elif len(model_name) == 1:
+                    model_text = model_name[0]
+                else:
+                    model_text = str(model_name)
+            else:
+                model_text = str(model_name)
+            
+            return f'{icons_html}{model_text}'
+        
+        df_display['Language Model'] = df_display.apply(format_language_model_with_icons, axis=1)
         
         if 'Source' in df_display.columns:
             df_display['SDK Version'] = df_display.apply(
                 lambda row: f"{row['SDK Version']} {row['Source']}" if pd.notna(row['Source']) and row['Source'] else row['SDK Version'],
                 axis=1
             )
-
-        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]
         
         columns_to_drop = ['id', 'Openness', 'Agent Tooling', 'Source']
         df_display = df_display.drop(columns=columns_to_drop, errors='ignore')
-
-        header_rename_map = {
-            "Pareto": "",
-            "Icon": "",
-            "Company": "",
-        }
-        df_display = df_display.rename(columns=header_rename_map)
         
         return df_display
     
@@ -528,13 +533,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/Company columns
+        elif col in ["SDK Version", "Language Model"]:
             df_datatypes.append("html")
         else:
             df_datatypes.append("str")
     # Dynamically set widths for the DataFrame columns
-    # Order: Pareto, Icon, Company, Language Model, SDK Version, ...
-    fixed_start_widths = [40, 40, 40, 200, 100, 200]
+    # Order: Language Model, SDK Version, Average Score, Average Cost, ...
+    fixed_start_widths = [280, 100, 100]  # Language Model (with icons), SDK Version, Average Score
     num_score_cost_cols = 0
     remaining_headers = df_headers[len(fixed_start_widths):]
     for col in remaining_headers:
@@ -545,15 +550,11 @@ def create_leaderboard_display(
     # 5. Combine all the lists to create the final, fully dynamic list.
     final_column_widths = fixed_start_widths + dynamic_widths + fixed_end_widths
 
-    with gr.Row():
-        with gr.Column(scale=3):
-            plot_component = gr.Plot(
-                value=scatter_plot,
-                show_label=False,
-            )
-            gr.Markdown(value=SCATTER_DISCLAIMER, elem_id="scatter-disclaimer")
-        with gr.Column(scale=1):
-            gr.HTML(value=plot_legend_html)
+    plot_component = gr.Plot(
+        value=scatter_plot,
+        show_label=False,
+    )
+    gr.Markdown(value=SCATTER_DISCLAIMER, elem_id="scatter-disclaimer")
 
     # Put table and key into an accordion
     with gr.Accordion("Show / Hide Table View", open=True, elem_id="leaderboard-accordion"):
@@ -671,35 +672,53 @@ def create_benchmark_details_display(
         pareto_df = get_pareto_df(benchmark_table_df)
         # Get the list of agents on the frontier. We'll use this list later.
         trophy_uri = get_svg_as_data_uri("assets/trophy.svg")
-        trophy_icon_html = f'<img src="{trophy_uri}" alt="On Pareto Frontier" title="On Pareto Frontier" style="width:25px; height:25px;">'
         if not pareto_df.empty and 'id' in pareto_df.columns:
             pareto_agent_names = pareto_df['id'].tolist()
         else:
             pareto_agent_names = []
-        benchmark_table_df['Pareto'] = benchmark_table_df.apply(
-            lambda row: trophy_icon_html if row['id'] in pareto_agent_names else '',
-            axis=1
-        )
 
-        # Create simple openness icons using custom SVG lock icons
-        def get_openness_icon_html(row):
+        # Clean the Language Model column first
+        benchmark_table_df['Language Model'] = benchmark_table_df['Language Model'].apply(clean_llm_base_list)
+        
+        # Combine icons with Language Model column
+        def format_language_model_with_icons(row):
+            icons_html = ''
+            
+            # Add Pareto trophy if on frontier
+            if row['id'] in pareto_agent_names:
+                icons_html += f'<img src="{trophy_uri}" alt="On Pareto Frontier" title="On Pareto Frontier" style="width:18px; height:18px; vertical-align:middle; margin-right:4px;">'
+            
+            # Add openness lock icon
             openness_val = row.get('Openness', '')
-            # Use custom lock SVG icons: blue open lock, red closed lock
             if openness_val in [aliases.CANONICAL_OPENNESS_OPEN, 'Open', 'Open Source', 'Open Source + Open Weights']:
-                uri = get_svg_as_data_uri("assets/lock-open.svg")
-                return f'<img src="{uri}" alt="Open" title="Open source model" style="width:20px; height:20px;">'
+                lock_uri = get_svg_as_data_uri("assets/lock-open.svg")
+                icons_html += f'<img src="{lock_uri}" alt="Open" title="Open source model" style="width:16px; height:16px; vertical-align:middle; margin-right:4px;">'
+            else:
+                lock_uri = get_svg_as_data_uri("assets/lock-closed.svg")
+                icons_html += f'<img src="{lock_uri}" alt="Closed" title="Closed source model" style="width:16px; height:16px; vertical-align:middle; margin-right:4px;">'
+            
+            # Add company logo
+            company_html = get_company_logo_html(row['Language Model'])
+            if company_html:
+                icons_html += company_html.replace('style="', 'style="vertical-align:middle; margin-right:6px; ')
+            
+            # Format the model name
+            model_name = row['Language Model']
+            if isinstance(model_name, list):
+                if len(model_name) > 1:
+                    tooltip_text = "\\n".join(map(str, model_name))
+                    model_text = f'<span class="tooltip-icon cell-tooltip-icon" style="cursor: help;" data-tooltip="{tooltip_text}">{model_name[0]} (+ {len(model_name) - 1}) ⓘ</span>'
+                elif len(model_name) == 1:
+                    model_text = model_name[0]
+                else:
+                    model_text = str(model_name)
             else:
-                uri = get_svg_as_data_uri("assets/lock-closed.svg")
-                return f'<img src="{uri}" alt="Closed" title="Closed source model" style="width:20px; height:20px;">'
+                model_text = str(model_name)
+            
+            return f'{icons_html}{model_text}'
         
-        benchmark_table_df['Icon'] = benchmark_table_df.apply(get_openness_icon_html, axis=1)
+        benchmark_table_df['Language Model'] = benchmark_table_df.apply(format_language_model_with_icons, 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)
-        benchmark_table_df['Language Model'] = benchmark_table_df['Language Model'].apply(format_llm_base_with_html)
         # append the repro url to the end of the SDK Version
         if 'Source' in benchmark_table_df.columns:
             benchmark_table_df['SDK Version'] = benchmark_table_df.apply(
@@ -728,9 +747,6 @@ def create_benchmark_details_display(
         benchmark_table_df = format_cost_column(benchmark_table_df, benchmark_cost_col)
         benchmark_table_df = format_score_column(benchmark_table_df, benchmark_score_col)
         desired_cols_in_order = [
-            'Pareto',
-            'Icon',
-            'Company',
             'Language Model',
             'SDK Version',
             'Attempted Benchmark',
@@ -748,13 +764,6 @@ def create_benchmark_details_display(
             benchmark_score_col: 'Score',
             benchmark_cost_col: 'Cost',
         }, inplace=True)
-        # 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)
         
         # Now get headers from the renamed dataframe
         df_headers = benchmark_table_df.columns.tolist()
@@ -762,7 +771,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/Company columns
+            elif col in ["SDK Version", "Language Model"]:
                 df_datatypes.append("html")
             else:
                 df_datatypes.append("str")
@@ -773,12 +782,8 @@ def create_benchmark_details_display(
             agent_col="SDK Version",
             name=benchmark_name
         )
-        with gr.Row():
-            with gr.Column(scale=3):
-                gr.Plot(value=benchmark_plot, show_label=False) 
-                gr.Markdown(value=SCATTER_DISCLAIMER, elem_id="scatter-disclaimer")
-            with gr.Column(scale=1):
-                gr.HTML(value=plot_legend_html)
+        gr.Plot(value=benchmark_plot, show_label=False) 
+        gr.Markdown(value=SCATTER_DISCLAIMER, elem_id="scatter-disclaimer")
 
         # Put table and key into an accordion
         with gr.Accordion("Show / Hide Table View", open=True, elem_id="leaderboard-accordion"):