app.py

import gradio as gr
import pandas as pd

CITATION_BUTTON_LABEL = "Copy the following snippet to cite these results"
CITATION_BUTTON_TEXT = r"""@misc{aienergyscore-leaderboard,
    author = {Sasha Luccioni and Boris Gamazaychikov and Emma Strubell and Sara Hooker and Yacine Jernite and Carole-Jean Wu and Margaret Mitchell},
    title = {AI Energy Score Leaderboard - February 2025},
    year = {2025},
    publisher = {Hugging Face},
    howpublished = "\url{https://huggingface.co/spaces/AIEnergyScore/Leaderboard}",
}"""

# List of tasks (CSV filenames)
tasks = [
    'asr.csv',
    'object_detection.csv',
    'text_classification.csv',
    'image_captioning.csv',
    'question_answering.csv',
    'text_generation.csv',
    'image_classification.csv',
    'sentence_similarity.csv',
    'image_generation.csv',
    'summarization.csv'
]

def format_stars(score):
    try:
        score_int = int(score)
    except Exception:
        score_int = 0
    # Render stars in black with a slightly larger font
    return f'<span style="color: black; font-size:1.5em;">{"★" * score_int}</span>'

def make_link(mname):
    parts = str(mname).split('/')
    display_name = parts[1] if len(parts) > 1 else mname
    return f'<a href="https://huggingface.co/{mname}" target="_blank">{display_name}</a>'

def generate_html_table_from_df(df):
    """
    Generate an HTML table from the given DataFrame.
    Each GPU Energy cell contains both the numeric energy (Wh) and a horizontal bar
    whose width is computed relative to the maximum energy in the table.
    """
    max_energy = df['gpu_energy_numeric'].max() if not df.empty else 1
    color_map = {"1": "red", "2": "orange", "3": "yellow", "4": "lightgreen", "5": "green"}
    html = '<table style="width:100%; border-collapse: collapse; font-family: Arial, sans-serif;">'
    html += '<thead><tr style="background-color: #f2f2f2;">'
    html += '<th style="text-align: left; padding: 8px;">Model</th>'
    html += '<th style="text-align: left; padding: 8px;">GPU Energy (Wh)</th>'
    html += '<th style="text-align: left; padding: 8px;">Score</th>'
    html += '</tr></thead>'
    html += '<tbody>'
    for _, row in df.iterrows():
        energy_numeric = row['gpu_energy_numeric']
        energy_str = f"{energy_numeric:.4f}"
        # Calculate the relative width as a percentage
        bar_width = (energy_numeric / max_energy) * 100
        score_val = row['energy_score']
        bar_color = color_map.get(str(score_val), "gray")
        html += '<tr>'
        html += f'<td style="padding: 8px;">{row["Model"]}</td>'
        html += (
            f'<td style="padding: 8px;">{energy_str}<br>'
            f'<div style="background-color: {bar_color}; width: {bar_width:.1f}%; height: 10px;"></div></td>'
        )
        html += f'<td style="padding: 8px;">{row["Score"]}</td>'
        html += '</tr>'
    html += '</tbody></table>'
    return html

def get_model_names_html(task):
    df = pd.read_csv('data/energy/' + task)
    if df.columns[0].startswith("Unnamed:"):
        df = df.iloc[:, 1:]
    # Convert energy_score to integer and total_gpu_energy from kWh to Wh
    df['energy_score'] = df['energy_score'].astype(int)
    df['gpu_energy_numeric'] = pd.to_numeric(df['total_gpu_energy'], errors='raise') * 1000
    df['Model'] = df['model'].apply(make_link)
    df['Score'] = df['energy_score'].apply(format_stars)
    # Sort descending (high to low)
    df = df.sort_values(by='gpu_energy_numeric', ascending=False)
    return generate_html_table_from_df(df)

def get_all_model_names_html():
    all_df = pd.DataFrame()
    for task in tasks:
        df = pd.read_csv('data/energy/' + task)
        if df.columns[0].startswith("Unnamed:"):
            df = df.iloc[:, 1:]
        df['energy_score'] = df['energy_score'].astype(int)
        df['gpu_energy_numeric'] = pd.to_numeric(df['total_gpu_energy'], errors='raise') * 1000
        df['Model'] = df['model'].apply(make_link)
        df['Score'] = df['energy_score'].apply(format_stars)
        all_df = pd.concat([all_df, df], ignore_index=True)
    all_df = all_df.drop_duplicates(subset=['model'])
    # Sort descending
    all_df = all_df.sort_values(by='gpu_energy_numeric', ascending=False)
    return generate_html_table_from_df(all_df)

def get_text_generation_model_names_html(model_class):
    df = pd.read_csv('data/energy/text_generation.csv')
    if df.columns[0].startswith("Unnamed:"):
        df = df.iloc[:, 1:]
    # Filter by model class if the "class" column exists
    if 'class' in df.columns:
        df = df[df['class'] == model_class]
    df['energy_score'] = df['energy_score'].astype(int)
    df['gpu_energy_numeric'] = pd.to_numeric(df['total_gpu_energy'], errors='raise') * 1000
    df['Model'] = df['model'].apply(make_link)
    df['Score'] = df['energy_score'].apply(format_stars)
    # Sort descending
    df = df.sort_values(by='gpu_energy_numeric', ascending=False)
    return generate_html_table_from_df(df)

def update_text_generation(selected_display):
    # Mapping from display text to the internal value
    mapping = {
        "A (Single Consumer GPU) <20B parameters": "A",
        "B (Single Cloud GPU) 20-66B parameters": "B",
        "C (Multiple Cloud GPUs) >66B parameters": "C"
    }
    model_class = mapping.get(selected_display, "A")
    table_html = get_text_generation_model_names_html(model_class)
    return table_html

# --- Build the Gradio Interface ---

demo = gr.Blocks(css="""
.gr-dataframe table {
    table-layout: fixed;
    width: 100%;
}
.gr-dataframe th, .gr-dataframe td {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
""")

with demo:
    gr.Markdown(
        """# AI Energy Score Leaderboard
### Welcome to the leaderboard for the [AI Energy Score Project!](https://huggingface.co/AIEnergyScore)
Select different tasks to see scored models. Submit open models for testing and learn about testing proprietary models via the [submission portal](https://huggingface.co/spaces/AIEnergyScore/submission_portal)"""
    )
    
    # Visually appealing header links
    gr.HTML('''
    <div style="text-align: center; margin-bottom: 20px;">
        <a href="https://huggingface.co/spaces/AIEnergyScore/submission_portal" style="margin: 0 15px; text-decoration: none; font-weight: bold; font-size: 1.1em;">Submission Portal</a>
        <a href="https://huggingface.co/spaces/AIEnergyScore/README/discussions" style="margin: 0 15px; text-decoration: none; font-weight: bold; font-size: 1.1em;">Community</a>
        <a href="https://huggingface.github.io/AIEnergyScore/#faq" style="margin: 0 15px; text-decoration: none; font-weight: bold; font-size: 1.1em;">FAQ</a>
        <a href="https://huggingface.github.io/AIEnergyScore/#documentation" style="margin: 0 15px; text-decoration: none; font-weight: bold; font-size: 1.1em;">Documentation</a>
    </div>
    ''')
    
    with gr.Tabs():
        # --- Text Generation Tab with Dropdown for Model Class ---
        with gr.TabItem("Text Generation 💬"):
            # Define the dropdown with descriptive text options.
            model_class_options = [
                "A (Single Consumer GPU) <20B parameters",
                "B (Single Cloud GPU) 20-66B parameters",
                "C (Multiple Cloud GPUs) >66B parameters"
            ]
            model_class_dropdown = gr.Dropdown(
                choices=model_class_options,
                label="Select Model Class",
                value=model_class_options[0]
            )
            tg_table = gr.HTML(get_text_generation_model_names_html("A"))
            model_class_dropdown.change(
                fn=update_text_generation,
                inputs=model_class_dropdown,
                outputs=tg_table
            )

        with gr.TabItem("Image Generation 📷"):
            gr.HTML(get_model_names_html('image_generation.csv'))

        with gr.TabItem("Text Classification 🎭"):
            gr.HTML(get_model_names_html('text_classification.csv'))

        with gr.TabItem("Image Classification 🖼️"):
            gr.HTML(get_model_names_html('image_classification.csv'))

        with gr.TabItem("Image Captioning 📝"):
            gr.HTML(get_model_names_html('image_captioning.csv'))

        with gr.TabItem("Summarization 📃"):
            gr.HTML(get_model_names_html('summarization.csv'))

        with gr.TabItem("Automatic Speech Recognition 💬"):
            gr.HTML(get_model_names_html('asr.csv'))

        with gr.TabItem("Object Detection 🚘"):
            gr.HTML(get_model_names_html('object_detection.csv'))

        with gr.TabItem("Sentence Similarity 📚"):
            gr.HTML(get_model_names_html('sentence_similarity.csv'))

        with gr.TabItem("Extractive QA ❔"):
            gr.HTML(get_model_names_html('question_answering.csv'))

        with gr.TabItem("All Tasks 💡"):
            gr.HTML(get_all_model_names_html())

    with gr.Accordion("📙 Citation", open=False):
        citation_button = gr.Textbox(
            value=CITATION_BUTTON_TEXT,
            label=CITATION_BUTTON_LABEL,
            elem_id="citation-button",
            lines=10,
            show_copy_button=True,
        )
    gr.Markdown("""Last updated: February 2025""")

demo.launch()