styled row and dropdown

app.py

@@ -29,10 +29,15 @@ def load_leaderboard_data():
         logging.error(f"Error loading leaderboard: {e}")
         return pd.DataFrame()
 
-def format_leaderboard_df(df):
+def format_leaderboard_df(df, sort_by="pwed"):
     if df.empty:
         return df
     
+    # Sort the original dataframe first
+    sort_column = "average_per" if sort_by.lower() == "per" else "average_pwed"
+    df = df.sort_values(by=sort_column, ascending=True)  # Ascending=True means smaller values at top
+    
+    # Then create display dataframe from the sorted data
     display_df = pd.DataFrame({
         "Model": df["model"],
         "Average PER ⬇️": df["average_per"].apply(lambda x: f"{x:.4f}"),
@@ -41,11 +46,21 @@ def format_leaderboard_df(df):
         "Submission Date": pd.to_datetime(df["submission_date"]).dt.strftime("%Y-%m-%d")
     })
     
-    return display_df.sort_values("Average PER ⬇️")
+    return display_df
 
 def create_html_table(df):
     return df.to_html(escape=False, index=False, classes="styled-table")
 
+def update_leaderboard(sort_option: str) -> str:
+    try:
+        df = load_leaderboard_data()
+        formatted_df = format_leaderboard_df(df, sort_option.lower())
+        return create_html_table(formatted_df)
+    except Exception as e:
+        logging.error(f"Error updating leaderboard: {e}")
+        return "Error updating leaderboard"
+
+
 def submit_evaluation(model_name: str, submission_name: str, github_url: str) -> str:
     if not model_name or not submission_name:
         return "⚠️ Please provide both model name and submission name."
@@ -136,7 +151,7 @@ with gr.Blocks(css="""
         box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
     }
     .styled-table thead tr {
-        background-color: #004999;
+        background: linear-gradient(45deg, #092746, #073562, #0A648F);
         color: #ffffff;
         text-align: left;
     }
@@ -164,14 +179,30 @@ with gr.Blocks(css="""
     """)
     with gr.Tabs():
         with gr.TabItem("🏆 Leaderboard"):
+            with gr.Row(elem_classes="controls-row"):
+                # Controls side by side
+                sort_dropdown = gr.Dropdown(
+                    choices=["PWED", "PER"],
+                    value="PWED",
+                    interactive=True,
+                    scale=2,
+                    container=False,  # Removes the box around the dropdown
+                    label=None  # Removes the "Sort by" label
+                )
+                refresh_btn = gr.Button("Refresh 🔄", scale=2)  # Simplified button text
+            
             leaderboard_html = gr.HTML(create_html_table(format_leaderboard_df(load_leaderboard_data())))
-            refresh_btn = gr.Button("🔄 Refresh")
+            sort_dropdown.change(
+                fn=update_leaderboard,
+                inputs=[sort_dropdown],
+                outputs=leaderboard_html
+            )
             refresh_btn.click(
-                lambda: create_html_table(format_leaderboard_df(load_leaderboard_data())),
+                fn=update_leaderboard,
+                inputs=[sort_dropdown],
                 outputs=leaderboard_html
             )
         
-        
         with gr.TabItem("📝 Submit Model"):
             model_name = gr.Textbox(label="Model Name", placeholder="facebook/wav2vec2-lv-60-espeak-cv-ft")
             submission_name = gr.Textbox(label="Submission Name", placeholder="My Model v1.0")