pages/leaderboard.py

import html
import json

import gradio as gr
import pandas as pd


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