First few changes

app.py

@@ -73,12 +73,18 @@ def init_leaderboard(dataframe, benchmark_type):
     )
 
 
-demo = gr.Blocks(css=custom_css)
+demo = gr.Blocks(css=custom_css, theme=gr.themes.Default(primary_hue=gr.themes.colors.pink))
 with demo:
     gr.HTML(f"""
-    <div style="text-align:center; margin-bottom:1rem;">
-        <h1 style="margin-bottom: 0.25rem;">{TITLE}</h1>
-        <p style="color:#eb088a; margin:0; font-size:1.2rem;">Performance Insights &amp; Comparison</p>
+    <div id="page-header" style="text-align:center; margin-bottom:1rem;">
+        <div id="left-container">
+            <img src="/gradio_api/file=src/assets/logo-icon.png">
+        </div>
+        <div id="centre-container">
+            <h1 style="margin-bottom: 0.25rem;">{TITLE}</h1>
+            <p style="color:#eb088a; margin:0; font-size:1.2rem;">Performance Insights &amp; Comparison</p>
+        </div>
+        <div id="right-container"></div>
     </div>
     """)
     # gr.HTML(TITLE)
@@ -86,7 +92,7 @@ with demo:
         gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
     # gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
 
-    with gr.Tabs(elem_classes="tab-buttons") as tabs:
+    with gr.Tabs(elem_classes=["leaderboard-table", "tab-buttons"]) as tabs:
         with gr.TabItem("Base Benchmark", elem_id="llm-benchmark-tab-table", id=0):
             leaderboard = init_leaderboard(ST_LEADERBOARD_DF, "base")
 
@@ -100,4 +106,4 @@ with demo:
 scheduler = BackgroundScheduler()
 scheduler.add_job(restart_space, "interval", seconds=1800)
 scheduler.start()
-demo.queue(default_concurrency_limit=40).launch()
+demo.queue(default_concurrency_limit=40).launch(allowed_paths=["src/assets/logo-icon.png"])

src/display/css_html_js.py

@@ -221,7 +221,47 @@ custom_css = """
     font-size: 20px;
 }
 
+.intro-block {
+    padding: 20px;
+}
+
+table.table {
+    font-family: var(--font);
+}
+
+.header-row {
+    height: 0;
+    min-height: 0;
+}
+
+.tabitem {
+    padding-top: 0;
+}
+
+.html-container {
+    padding: 0;
+}
 
+#page-header {
+    display: flex;
+}
+
+#left-container {
+    flex: 1;
+}
+
+#left-container img {
+    height: 150px;
+    width: 150px;
+}
+
+#centre-container {
+    align-self: center;
+}
+
+#right-container {
+    flex: 1;
+}
 
 """