pages/leaderboard.py

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")
        
        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