Update app.py

app.py

@@ -41,21 +41,59 @@ async def get_leaderboard_data():
     except Exception as e:
         print(f"Error fetching leaderboard data: {e}")
         return []
-
+        
 async def update_leaderboard_table():
     leaderboard_data = await get_leaderboard_data()
     return leaderboard_data
 
 with gr.Blocks(css="""
-    .gradio-dataframe {
-        width: 100%;
+    body {
         background-color: white;
-        font-size: 16px;
         color: black;
+        font-family: Arial, sans-serif;
+        font-size: 16px;
+    }
+    
+    .gradio-container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+    }
+    
+    .gradio-dataframe {
+        width: 100%;
+        background-color: #f5f5f5;
+        border-collapse: collapse;
+        margin-top: 20px;
+    }
+    
+    .gradio-dataframe th,
+    .gradio-dataframe td {
+        padding: 10px;
+        text-align: left;
+        border-bottom: 1px solid #ddd;
+    }
+    
+    .gradio-dataframe th {
+        background-color: #f2f2f2;
+        font-weight: bold;
+    }
+    
+    .gradio-button {
+        background-color: #4CAF50;
+        color: white;
+        padding: 10px 20px;
+        border: none;
+        cursor: pointer;
+        margin-top: 20px;
+    }
+    
+    .gradio-button:hover {
+        background-color: #45a049;
     }
 """) as demo:
-    gr.Markdown("# Commune Leaderboard")
-
+    gr.Markdown("# Synthia Leaderboard")
+    
     leaderboard_table = gr.components.Dataframe(
         headers=["rank", "uid", "score"],
         datatype=["number", "number", "number"],
@@ -63,10 +101,10 @@ with gr.Blocks(css="""
         visible=True,
         elem_id="leaderboard-table"
     )
-
+    
     refresh_button = gr.Button("Refresh Leaderboard")
     refresh_button.click(fn=update_leaderboard_table, outputs=leaderboard_table)
-
+    
     # Initial load of leaderboard data
     demo.load(update_leaderboard_table, inputs=None, outputs=leaderboard_table)