create leaderboard

app.py

@@ -2,6 +2,7 @@ import gradio as gr
 
 from pages.arena import create_arena
 from pages.summarization_example import create_summarization_interface
+from pages.leaderboard import create_leaderboard
 
 def welcome_message():
     return """
@@ -25,11 +26,9 @@ with gr.Blocks() as demo:
                 create_arena()
             with gr.TabItem("Summarization"):
                 create_summarization_interface()
-            # with gr.TabItem("Page 3"):
-            #     page3()
+            with gr.TabItem("Leaderboard"):
+                create_leaderboard()
 
 
 if __name__ == "__main__":
-    demo.launch(server_port=7860)
-
-#iface.launch()  # launch the Gradio app
+    demo.launch()

pages/leaderboard.py

@@ -0,0 +1,52 @@
+import gradio as gr
+import pandas as pd
+
+# Sample data for the leaderboard
+data = {
+    'Rank': [1, 2, 3, 4, 5],
+    'Methods': ['METHOD1_PLACEHOLDER', 'METHOD2_PLACEHOLDER', 'METHOD3_PLACEHOLDER', 'METHOD4_PLACEHOLDER', 'METHOD5_PLACEHOLDER'],
+    'METRIC1_PLACEHOLDER Score': [1287, 1272, 1267, 1262, 1258],
+    'METRIC2_PLACEHOLDER Score': [56905, 24913, 42981, 49828, 55567],
+    'METRIC3_PLACEHOLDER Score': [3423, 3423, 2152, 4353, 2342],
+    'Authors': ['AUTHOR1_PLACEHOLDER', 'AUTHOR2_PLACEHOLDER', 'AUTHOR3_PLACEHOLDER', 'AUTHOR4_PLACEHOLDER', 'AUTHOR5_PLACEHOLDER'],
+}
+
+df = pd.DataFrame(data)
+
+def update_leaderboard(sort_by):
+    # In a real implementation, this would filter the data based on the category
+    sorted_df = df.sort_values(by=sort_by, ascending=False)
+    
+    # Update ranks based on new sorting
+    sorted_df['Rank'] = range(1, len(sorted_df) + 1)
+    
+    # Convert DataFrame to HTML with clickable headers for sorting
+    html = sorted_df.to_html(index=False, escape=False)
+    
+    # Add sorting links to column headers
+    for column in sorted_df.columns:
+        html = html.replace(f'<th>{column}</th>', 
+                            f'<th><a href="#" onclick="sortBy(\'{column}\'); return false;">{column}</a></th>')
+    
+    return html
+
+def create_leaderboard():
+    with gr.Blocks(css="#leaderboard table { width: 100%; } #leaderboard th, #leaderboard td { padding: 8px; text-align: left; }") as demo:
+        gr.Markdown("# 🏆 Chris-Project Summarization Arena Leaderboard")
+        
+        with gr.Row():
+            gr.Markdown("[Blog](placeholder) | [GitHub](placeholder) | [Paper](placeholder) | [Dataset](placeholder) | [Twitter](placeholder) | [Discord](placeholder)")
+        
+        gr.Markdown("Welcome to our open platform for evaluating LLM summarization capabilities. We use the DATASET_NAME_PLACEHOLDER dataset to generate summaries with MODEL_NAME_PLACEHOLDER. These summaries are then evaluated by STRONGER_MODEL_NAME_PLACEHOLDER using the METRIC1_PLACEHOLDER and METRIC2_PLACEHOLDER metrics")
+        
+        sort_by = gr.Dropdown(list(df.columns), label="Sort by", value="Rank")
+        
+        stats = gr.Markdown("**Performance**\n\n**methods**: 4,   **questions**: 150")
+        
+        leaderboard = gr.HTML(update_leaderboard("Rank"), elem_id="leaderboard")
+        
+        sort_by.change(update_leaderboard, inputs=[sort_by], outputs=[leaderboard])
+        
+        gr.Markdown("Code to recreate leaderboard tables and plots in this [notebook](https://colab.research.google.com/drive/1RAWb22-PFNI-X1gPVzc927jv7GOEcmaB). You can contribute your vote at [chat.lmsys.org](https://chat.lmsys.org)!")
+
+    return demo