pages/leaderboard.py

import json

import gradio as gr
import pandas as pd

from pages.summarization_playground import custom_css

css = '''
.tooltip-wrapper {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip-wrapper .tooltip {
    visibility: hidden;
    width: 300px;  # Increased width for longer prompts
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -150px;  # Adjusted for new width
    opacity: 0;
    transition: opacity 0.3s;
    white-space: pre-wrap;  # This allows text wrapping
    word-wrap: break-word;  # This ensures long words don't overflow
}

.tooltip-wrapper:hover .tooltip {
    visibility: visible;
    opacity: 1;
}
'''

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': [prompt['id'] for prompt in prompts],
    'Rouge Score': [prompt['metric']['Rouge'] for prompt in prompts],
    'Winning Rate': winning_rate,
    'Authors': [prompt['author'] for prompt in prompts],
    'Prompts': [prompt['prompt'] 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(text, tooltip):
    return f'''
    <div class="tooltip-wrapper">
        {text}
        <span class="tooltip">{tooltip}</span>
    </div>
    '''


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)

    # Create hover effect for Methods column
    sorted_df['Methods'] = sorted_df.apply(lambda row: create_html_with_tooltip(row['Methods'], row['Prompts']), axis=1)

    # Drop the 'Prompts' column as we don't want to display it directly
    sorted_df = sorted_df.drop(columns=['Prompts'])

    html = sorted_df.to_html(index=False, escape=False)

    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=css) 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