separated css

app.py

@@ -3,6 +3,10 @@ import pandas as pd
 import json
 import os
 
+# Load external CSS from the file "styles.css"
+with open("styles.css", "r") as f:
+    custom_css = f.read()
+
 def strip_timestamp(name):
     """Remove the timestamp portion from the model name."""
     parts = name.split('-')
@@ -157,7 +161,7 @@ def create_grouped_leaderboard(selected_mwoz, selected_tau_airline, selected_tau
     if sort_by in allowed_sort_cols:
         df = df.sort_values(sort_by, ascending=ascending)
     
-    # Reorder columns to make "Rank" the first column.
+    # Reorder columns to have "Rank" as the first column.
     cols = df.columns.tolist()
     if "Rank" in cols:
         cols.insert(0, cols.pop(cols.index("Rank")))
@@ -168,7 +172,7 @@ def create_grouped_leaderboard(selected_mwoz, selected_tau_airline, selected_tau
 def update_sort_state(current_state, clicked_column):
     """
     Update the sort state based on the clicked column.
-    If the same column is clicked, toggle the sort order; otherwise, switch to the new column with ascending order.
+    If the same column is clicked, toggle its sort order; otherwise, set the new column with ascending order.
     """
     if current_state is None:
         current_state = {"sort_by": clicked_column, "ascending": True}
@@ -255,7 +259,7 @@ def update_leaderboard(selected_mwoz, selected_tau_airline, selected_tau_retail,
     html_table = generate_html_table(df)
     return html_table
 
-with gr.Blocks(title="TD-EVAL Leaderboard") as demo:
+with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard") as demo:
     gr.Markdown("# 🏆 TD-EVAL Model Evaluation Leaderboard")
     gr.Markdown("""
     This leaderboard displays aggregated model performance across multiple evaluation metrics.

styles.css

@@ -0,0 +1,49 @@
+/* General body style */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f9f9f9;
+    margin: 20px;
+}
+
+/* Title styling for Markdown headers */
+h1, h2, h3 {
+    color: #333;
+}
+
+/* Button styling */
+button {
+    background-color: #007BFF;
+    color: #fff;
+    border: none;
+    padding: 8px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+/* Styling for checkboxes and labels */
+.gradio-container .checkbox-container {
+    margin-right: 10px;
+}
+
+/* Table styling */
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+th, td {
+    padding: 8px;
+    text-align: center;
+    border: 1px solid #ddd;
+}
+
+th {
+    background-color: #f2f2f2;
+    font-weight: bold;
+}