import gradio as gr
import pandas as pd

# Load the results
elo_df = pd.read_csv("elo-20240326.csv")

text_description = """
# 🤼 LLM Colosseum Leaderboard

LLM Colosseum is a new way to assess the relative performance of LLMs. We have them play Street Fighter III against each other, and we use the results to calculate their Elo ratings.  
More info in the LLM Colosseum GitHub [repository](https://github.com/OpenGenerativeAI/llm-colosseum).

🎥 Demo of LLMs playing Street Fighter III below the table.  
"""


def show_video():
    # Returns the embed code, which Gradio will display using the HTML component
    return youtube_embed_code


youtube_embed_code = '<iframe width="560" height="315" src="https://www.youtube.com/embed/Kk8foX3dm2I?si=5BJNkipqAXl4CRBu" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>'

with gr.Blocks(
    title="LLM Colosseum Leaderboard",
) as demo:
    gr.Markdown(text_description)
    gr.Dataframe(value=elo_df, interactive=False)
    gr.Markdown("## Watch a demo of LLMs playing Street Fighter III:")
    gr.HTML(value=youtube_embed_code)

demo.launch()