Replace open/closed model distinction with lock emojis in tables

- Changed from colored ellipse SVG icons to 🔓 (open lock) and 🔒 (closed lock) emojis
- Updated main leaderboard table and benchmark tables
- Updated legend to show lock emojis instead of colored dots
- Updated tooltip content to use lock emoji icons

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

ui_components.py

@@ -156,22 +156,28 @@ def create_svg_html(value, svg_map):
 
 def build_openness_tooltip_content() -> str:
     """
-    Generates the inner HTML for the Model Openness tooltip card.
+    Generates the inner HTML for the Model Openness tooltip card using lock emojis.
     """
-    html_items = []
-    for name, info in OPENNESS_SVG_MAP.items():
-        uri = get_svg_as_data_uri(info["path"])
-        desc = info["description"]
-
-        html_items.append(f"""
-            <div class="tooltip-legend-item">
-                <img src="{uri}" alt="{name}">
-                <div>
-                    <strong>{name}</strong>
-                    <span>{desc}</span>
-                </div>
+    html_items = [
+        """
+        <div class="tooltip-legend-item">
+            <span style="font-size: 24px;">🔓</span>
+            <div>
+                <strong>Open</strong>
+                <span>Open source model</span>
+            </div>
+        </div>
+        """,
+        """
+        <div class="tooltip-legend-item">
+            <span style="font-size: 24px;">🔒</span>
+            <div>
+                <strong>Closed</strong>
+                <span>Closed source model</span>
             </div>
-        """)
+        </div>
+        """
+    ]
 
     joined_items = "".join(html_items)
 
@@ -249,17 +255,17 @@ def build_descriptions_tooltip_content(table) -> str:
             <div class="tooltip-description-item"><b>Logs:</b> View evaluation run logs (e.g., outputs, traces).</div>
         """
 
-# Create HTML for the "Openness" legend items for table
-openness_html_items = []
-for name, info in OPENNESS_SVG_MAP.items():
-    uri = get_svg_as_data_uri(info["path"])
-    # Each item is now its own flexbox container to guarantee alignment
-    openness_html_items.append(
-        f'<div style="display: flex; align-items: center; white-space: nowrap;">'
-        f'<img src="{uri}" alt="{name}" title="{name}" style="width:16px; height:16px; margin-right: 4px; flex-shrink: 0;">'
-        f'<span>{name}</span>'
-        f'</div>'
-    )
+# Create HTML for the "Openness" legend items for table using lock emojis
+openness_html_items = [
+    '<div style="display: flex; align-items: center; white-space: nowrap;">'
+    '<span style="font-size: 16px; margin-right: 4px;">🔓</span>'
+    '<span>Open</span>'
+    '</div>',
+    '<div style="display: flex; align-items: center; white-space: nowrap;">'
+    '<span style="font-size: 16px; margin-right: 4px;">🔒</span>'
+    '<span>Closed</span>'
+    '</div>'
+]
 openness_html = " ".join(openness_html_items)
 
 pareto_tooltip_content = build_pareto_tooltip_content()
@@ -446,8 +452,11 @@ def create_leaderboard_display(
         
         def get_openness_icon_html(row):
             openness_val = row.get('Openness', '')
-            uri = get_svg_as_data_uri(OPENNESS_ICON_MAP.get(openness_val, "assets/ellipse-pink.svg"))
-            return f'<img src="{uri}" alt="{openness_val}" title="{openness_val}" style="width:24px; height:24px;">'
+            # Use lock emojis: 🔓 for open, 🔒 for closed
+            if openness_val in [aliases.CANONICAL_OPENNESS_OPEN, 'Open', 'Open Source', 'Open Source + Open Weights']:
+                return '<span title="Open source model" style="font-size: 18px;">🔓</span>'
+            else:
+                return '<span title="Closed source model" style="font-size: 18px;">🔒</span>'
         
         df_display['Icon'] = df_display.apply(get_openness_icon_html, axis=1)
         
@@ -666,11 +675,14 @@ def create_benchmark_details_display(
             axis=1
         )
 
-        # Create simple openness icons
+        # Create simple openness icons using lock emojis
         def get_openness_icon_html(row):
             openness_val = row.get('Openness', '')
-            uri = get_svg_as_data_uri(OPENNESS_ICON_MAP.get(openness_val, "assets/ellipse-pink.svg"))
-            return f'<img src="{uri}" alt="{openness_val}" title="{openness_val}" style="width:24px; height:24px;">'
+            # Use lock emojis: 🔓 for open, 🔒 for closed
+            if openness_val in [aliases.CANONICAL_OPENNESS_OPEN, 'Open', 'Open Source', 'Open Source + Open Weights']:
+                return '<span title="Open source model" style="font-size: 18px;">🔓</span>'
+            else:
+                return '<span title="Closed source model" style="font-size: 18px;">🔒</span>'
         
         benchmark_table_df['Icon'] = benchmark_table_df.apply(get_openness_icon_html, axis=1)