i'm just going to stumble through this for a bit

app.py

@@ -9,10 +9,9 @@ with gr.Blocks() as demo:
 
     # ---------- Leaderboard Tab ----------
     with gr.Tab("Leaderboard"):
-        leaderboard_df = gr.Dataframe(
-            value=empty_leaderboard(),
-            label="Rankings",
-            interactive=False,
+        gr.Markdown("### Results")
+        leaderboard_df = gr.HTML(
+            value=empty_leaderboard().to_html(),
         )
         refresh_btn = gr.Button("Refresh")
         refresh_btn.click(fn=load_leaderboard, outputs=leaderboard_df)

utils.py

@@ -50,10 +50,10 @@ def _is_rate_limited(client_ip: str) -> bool:
     return False
 
 
-def load_leaderboard() -> pd.DataFrame:
+def load_leaderboard() -> str:
     """Load the latest scores from the scores dataset."""
     if not HF_TOKEN:
-        return empty_leaderboard()
+        return empty_leaderboard().to_html()
 
     try:
         from datasets import load_dataset
@@ -78,20 +78,7 @@ def load_leaderboard() -> pd.DataFrame:
             df = df.sort_values("overall_score", ascending=False).reset_index(drop=True)
             df.insert(0, "Rank", range(1, len(df) + 1))
 
-        # Format percentages
-        for col in ["overall_score", "meter_score", "verse_score", "focus_score"]:
-            if col in df.columns:
-                df[col] = df[col].apply(
-                    lambda x: f"{x * 100:.1f}%" if pd.notna(x) else "N/A"
-                )
-
-        # Format dates
-        if "evaluated_at" in df.columns:
-            df["evaluated_at"] = pd.to_datetime(df["evaluated_at"], errors="coerce")
-            df["evaluated_at"] = df["evaluated_at"].dt.strftime("%Y-%m-%d %H:%M")
-
-        # Rename to human-readable names
-        df.rename(columns=col_map, inplace=True)
+        # Apply coloring
         def color_score(val):
             if val >= 0.9:
                 return "background-color: #4CAF50; color: white;"   # green
@@ -102,16 +89,41 @@ def load_leaderboard() -> pd.DataFrame:
             else:
                 return "background-color: #F44336; color: white;"   # red
 
-        df = df.style.map(color_score, subset=["overall_score", "meter_score", "verse_score", "focus_score"])
+
+        # # Format percentages
+        # for col in ["overall_score", "meter_score", "verse_score", "focus_score"]:
+        #     if col in df.columns:
+        #         df[col] = df[col].apply(
+        #             lambda x: f"{x * 100:.1f}%" if pd.notna(x) else "N/A"
+        #         )
+
+        # Format dates
+        if "evaluated_at" in df.columns:
+            df["evaluated_at"] = pd.to_datetime(df["evaluated_at"], errors="coerce")
+            df["evaluated_at"] = df["evaluated_at"].dt.strftime("%Y-%m-%d %H:%M")
+
+        # Rename to human-readable names
+        df.rename(columns=col_map, inplace=True)
 
         # Ensure column order matches empty leaderboard
         final_cols = [c for c in empty_leaderboard().columns if c in df.columns]
         df = df[final_cols]
-
-        return df
+        styled = (
+            df.style
+            .map(color_score, subset=["Overall", "Meter", "Verse", "Focus"])
+            .format({
+                "Overall": "{:.1%}",
+                "Meter": "{:.1%}",
+                "Verse": "{:.1%}",
+                "Focus": "{:.1%}",
+            })
+            .hide(axis="index")
+        )        
+
+        return styled.to_html()
     except Exception as e:
         print(f"Could not load scores dataset: {e}")
-        return empty_leaderboard()
+        return empty_leaderboard().to_html()