import pandas as pd
import gradio as gr
from leaderboard import render_leader_board, render_info_html, render_citation
from evaluation import render_eval_info
from submission import render_submission_page
import os
from utils import load_leaderboard, custom_css
import gradio as gr
import os

# Load leaderboard data
leaderboard_df_err = load_leaderboard("./leaderboard.tsv")

def create_ui():
    with gr.Blocks(theme=gr.themes.Soft(text_size=gr.themes.sizes.text_md), css=custom_css) as demo:
        gr.Image('./IqraEval.png', interactive=False, 
                 show_fullscreen_button=False, show_share_button=False, show_label=False)
        
        with gr.Tabs():
            with gr.Tab("🏆 Leaderboard"):
                with gr.Column():
                    render_info_html()
                    gr.Markdown("Rankings for different systems. ")
                    render_leader_board(leaderboard_df_err)  # Adjust this to work with Gradio components
                    render_citation()

            with gr.Tab("📊 Metrics"):
                render_eval_info()  

            with gr.Tab("📤 Submit your own system !"):
                render_submission_page() 

    return demo

# Launch the app
create_ui().launch()