pages/leaderboard.py

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

def create_html_with_tooltip(id, prompt):
    escaped_prompt = html.escape(prompt.replace("\n", "<br />"))
    return f'<span class="tooltip" data-id="{id}" data-prompt="{escaped_prompt}">{id}</span>'

with open("prompt/prompt.json", "r") as file:
    json_data = file.read()
    prompts = json.loads(json_data)# Sample data for the leaderboard

winning_rate = [prompt['metric']['winning_number'] for prompt in prompts]
winning_rate = [num / sum(winning_rate) for num in winning_rate]
data = {
    'Rank': [i+1 for i in range(len(prompts))],
    'Methods': [create_html_with_tooltip(prompt['id'], prompt['prompt'].replace("\n","<br />")) for prompt in prompts],
    'Rouge Score': [prompt['metric']['Rouge'] for prompt in prompts],
    'Winning Rate': winning_rate,
    'Authors': [prompt['author'] for prompt in prompts],
}

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

# Define a list of medal emojis
medals = ['🏅', '🥈', '🥉']
for i in range(3):
    df.loc[i, 'Authors'] = f"{medals[i]} {df.loc[i, 'Authors']}"

def create_html_with_tooltip(id, prompt):
    escaped_prompt = html.escape(prompt.replace("\n", "<br />"))
    return f'<span class="tooltip" data-id="{id}" data-prompt="{escaped_prompt}">{id}</span>'

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 and without escaping
    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>')
    
    # Load the HTML template
    with open('pages/leaderboard_template.html', 'r') as file:
        template = file.read()
    
    # Create the sortBy function in JavaScript
    sort_by_function = f"""
    function sortBy(column) {{
        const gradioEl = document.querySelector('gradio-app');
        const dropdown = gradioEl.querySelector('select');
        dropdown.value = column;
        dropdown.dispatchEvent(new Event('change'));
    }}
    """
    
    # Insert the table HTML and sortBy function into the template
    full_html = template.replace('<div id="leaderboard-container"></div>', 
                                 f'<div id="leaderboard-container">{table_html}</div>')
    full_html = full_html.replace('// This function will be implemented in Python and injected here', 
                                  sort_by_function)
    
    return full_html

def create_leaderboard():
    with gr.Blocks(css="""
        .tooltip { cursor: pointer; color: blue; text-decoration: underline; }
    """) 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. We use the DATASET_NAME_PLACEHOLDER dataset to generate summaries with Qwen2-1.5b. These summaries are then evaluated by Rouge and Winning Rate from the arena")
        sort_by = gr.Dropdown(list(df.columns), label="Sort by", value="Rouge Score")
        gr.Markdown("**Performance**\n\n**methods**: 5,   **questions**: 15")
        leaderboard = gr.HTML(update_leaderboard("Rouge Score"), elem_id="leaderboard")
        sort_by.change(update_leaderboard, inputs=[sort_by], outputs=[leaderboard])
    return demo


if __name__ == "__main__":
    demo = create_leaderboard()
    demo.launch()