chore: Update app.py and css_html_js.py to improve UI and functionality

app.py

@@ -17,12 +17,11 @@ from src.about import (
     LLM_BENCHMARKS_TEXT,
     TITLE,
 )
-from src.display.css_html_js import custom_css
+from src.display.css_html_js import (
+    custom_css,
+    CSS_EXTERNAL,
+)
 from src.display.utils import (
-    BENCHMARK_COLS,
-    COLS,
-    EVAL_COLS,
-    EVAL_TYPES,
     AutoEvalColumn,
     fields,
 )
@@ -149,7 +148,7 @@ def init_detailed_results():
 """)
 
 
-demo = gr.Blocks(css=custom_css)
+demo = gr.Blocks(css=custom_css, css_external=CSS_EXTERNAL)
 with demo:
     gr.HTML(TITLE)
     gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")

src/about.py

@@ -1,6 +1,7 @@
 from dataclasses import dataclass
 from enum import Enum
 
+import yaml
 import os
 
 
@@ -31,6 +32,26 @@ TITLE = """<h1 align="center" id="space-title">Multimodal LiveBench: From Static
 with open(os.path.join(os.path.dirname(__file__), "about.md"), "r") as f:
     INTRODUCTION_TEXT = f.read()
 
+def get_link(item): #name, icon, url):
+    name = item["name"]
+    icon = item.get("icon", None)
+    url = item.get("url", "#")
+    if icon.startswith("http") and icon.endswith(".svg"):
+        icon_tag = f'<img src="{icon}" alt="{name}" style="height: 24px; width: 24px;">'
+    elif icon.startswith("fa-"):
+        icon_tag = f'<i class="{icon}"></i>'
+    elif not icon or icon == "":
+        icon_tag = ""
+    else:
+        raise ValueError("Invalid icon format")
+    return f'{icon_tag} <a href="{url}" target="_blank">{name}</a>'
+
+with open(os.path.join(os.path.dirname(__file__), "links.yaml"), "r", encoding="utf-8") as f:
+    links = yaml.safe_load(f)
+    LINKS = " | ".join([
+        get_link(item) for item in links
+    ])
+
 # Which evaluations are you running? how can people reproduce what you have?
 LLM_BENCHMARKS_TEXT = f"""
 ## How it works

src/display/css_html_js.py

@@ -106,3 +106,7 @@ get_window_url_params = """
         return url_params;
     }
     """
+
+CSS_EXTERNAL = [
+    "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+]

src/links.yaml

@@ -0,0 +1,9 @@
+- name: GitHub
+  icon: fa-brands fa-github
+  url: https://github.com/EvolvingLMMs-Lab/lmms-eval
+- name: HuggingFace Datasets
+  icon: https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg
+  url: https://huggingface.co/datasets/lmms-lab/LiveBench
+- name: Leaderboard
+  icon: fa-solid fa-trophy
+  url: https://huggingface.co/spaces/lmms-lab/LiveBench