pages/leaderboard.py

import html
import json
import pandas as pd
import gradio as gr

# Function to create HTML tooltips
def create_html_with_tooltip(id, base_url):
    return f'<a href="{base_url}"target="_blank">{id}</a>'

# Load prompts from JSON
with open("prompt/prompt.json", "r") as file:
    json_data = file.read()
    prompts = json.loads(json_data)

# Prepare leaderboard data
winning_rate = [prompt['metric']['winning_number'] for prompt in prompts]
winning_rate = [round(num / sum(winning_rate), 4)for num in winning_rate]
data = {
    'Rank': [i+1 for i in range(len(prompts))],
    'Methods': [create_html_with_tooltip(prompt['id'], prompt['url']) for prompt in prompts],
    'Rouge Score': [prompt['metric']['Rouge'] for prompt in prompts],
    'Winning Rate': winning_rate,
    'Authors': [prompt['author'] for prompt in prompts],
}

# Create DataFrame and sort by Rouge Score
df = pd.DataFrame(data)
df.sort_values(by='Rouge Score', ascending=False, inplace=True, ignore_index=True)
df['Rank'] = range(1, len(df) + 1)

# Assign medals for top 3 authors
medals = ['🏅', '🥈', '🥉']
for i in range(3):
    df.loc[i, 'Authors'] = f"{medals[i]} {df.loc[i, 'Authors']}"

# Function to update the leaderboard
def update_leaderboard(sort_by):
    sorted_df = df.sort_values(by=sort_by, ascending=False, ignore_index=True)
    sorted_df['Rank'] = range(1, len(sorted_df) + 1)

    # Convert DataFrame to HTML with clickable headers for sorting
    table_html = sorted_df.to_html(index=False, escape=False)

    # Add sorting links to column headers
    for column in sorted_df.columns:
        table_html = table_html.replace(f'<th>{column}</th>', 
                        f'<th><a href="#" onclick="sortBy(\'{column}\'); return false;">{column}</a></th>')

    return table_html

# Define Gradio interface
def create_leaderboard():
    with gr.Blocks(css="""
        .tooltip { cursor: pointer; color: blue; text-decoration: underline; }
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        #prompt-display { display: none; }
    """) as demo:
        gr.Markdown("# 🏆 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.")
        
        # Dropdown for sorting
        sort_by = gr.Dropdown(list(df.columns), label="Sort by", value="Rouge Score")

        # Display the leaderboard
        leaderboard = gr.HTML(update_leaderboard("Rouge Score"), elem_id="leaderboard")
        
        # Change sorting when dropdown is changed
        sort_by.change(fn=lambda sort: update_leaderboard(sort), inputs=sort_by, outputs=leaderboard)

    return demo

# Launch Gradio interface
if __name__ == "__main__":
    demo = create_leaderboard()
    demo.launch(debug=True)