Spaces:

kitab-bench
/

KITAB-Bench-Leaderboard

Running

App Files Files Community

kitab-bench commited on Apr 2

Commit

5fd0555

verified ·

1 Parent(s): 00364aa

Update app.py

Browse files

Files changed (1) hide show

app.py +402 -187

app.py CHANGED Viewed

@@ -1,204 +1,419 @@
 import gradio as gr
-from gradio_leaderboard import Leaderboard, ColumnFilter, SelectColumns
 import pandas as pd
-from apscheduler.schedulers.background import BackgroundScheduler
-from huggingface_hub import snapshot_download
-from src.about import (
-    CITATION_BUTTON_LABEL,
-    CITATION_BUTTON_TEXT,
-    EVALUATION_QUEUE_TEXT,
-    INTRODUCTION_TEXT,
-    LLM_BENCHMARKS_TEXT,
-    TITLE,
-)
-from src.display.css_html_js import custom_css
-from src.display.utils import (
-    BENCHMARK_COLS,
-    COLS,
-    EVAL_COLS,
-    EVAL_TYPES,
-    AutoEvalColumn,
-    ModelType,
-    fields,
-    WeightType,
-    Precision
-)
-from src.envs import API, EVAL_REQUESTS_PATH, EVAL_RESULTS_PATH, QUEUE_REPO, REPO_ID, RESULTS_REPO, TOKEN
-from src.populate import get_evaluation_queue_df, get_leaderboard_df
-from src.submission.submit import add_new_eval
-def restart_space():
-    API.restart_space(repo_id=REPO_ID)
-### Space initialisation
-try:
-    print(EVAL_REQUESTS_PATH)
-    snapshot_download(
-        repo_id=QUEUE_REPO, local_dir=EVAL_REQUESTS_PATH, repo_type="dataset", tqdm_class=None, etag_timeout=30, token=TOKEN
     )
-except Exception:
-    restart_space()
-try:
-    print(EVAL_RESULTS_PATH)
-    snapshot_download(
-        repo_id=RESULTS_REPO, local_dir=EVAL_RESULTS_PATH, repo_type="dataset", tqdm_class=None, etag_timeout=30, token=TOKEN
     )
-except Exception:
-    restart_space()
-LEADERBOARD_DF = get_leaderboard_df(EVAL_RESULTS_PATH, EVAL_REQUESTS_PATH, COLS, BENCHMARK_COLS)
-(
-    finished_eval_queue_df,
-    running_eval_queue_df,
-    pending_eval_queue_df,
-) = get_evaluation_queue_df(EVAL_REQUESTS_PATH, EVAL_COLS)
-def init_leaderboard(dataframe):
-    if dataframe is None or dataframe.empty:
-        raise ValueError("Leaderboard DataFrame is empty or None.")
-    return Leaderboard(
-        value=dataframe,
-        datatype=[c.type for c in fields(AutoEvalColumn)],
-        select_columns=SelectColumns(
-            default_selection=[c.name for c in fields(AutoEvalColumn) if c.displayed_by_default],
-            cant_deselect=[c.name for c in fields(AutoEvalColumn) if c.never_hidden],
-            label="Select Columns to Display:",
-        ),
-        search_columns=[AutoEvalColumn.model.name, AutoEvalColumn.license.name],
-        hide_columns=[c.name for c in fields(AutoEvalColumn) if c.hidden],
-        filter_columns=[
-            ColumnFilter(AutoEvalColumn.model_type.name, type="checkboxgroup", label="Model types"),
-            ColumnFilter(AutoEvalColumn.precision.name, type="checkboxgroup", label="Precision"),
-            ColumnFilter(
-                AutoEvalColumn.params.name,
-                type="slider",
-                min=0.01,
-                max=150,
-                label="Select the number of parameters (B)",
-            ),
-            ColumnFilter(
-                AutoEvalColumn.still_on_hub.name, type="boolean", label="Deleted/incomplete", default=True
-            ),
-        ],
-        bool_checkboxgroup_label="Hide models",
-        interactive=False,
     )
-demo = gr.Blocks(css=custom_css)
-with demo:
-    gr.HTML(TITLE)
-    gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
-    with gr.Tabs(elem_classes="tab-buttons") as tabs:
-        with gr.TabItem("🏅 LLM Benchmark", elem_id="llm-benchmark-tab-table", id=0):
-            leaderboard = init_leaderboard(LEADERBOARD_DF)
-        with gr.TabItem("📝 About", elem_id="llm-benchmark-tab-table", id=2):
-            gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")
-        with gr.TabItem("🚀 Submit here! ", elem_id="llm-benchmark-tab-table", id=3):
-            with gr.Column():
-                with gr.Row():
-                    gr.Markdown(EVALUATION_QUEUE_TEXT, elem_classes="markdown-text")
-                with gr.Column():
-                    with gr.Accordion(
-                        f"✅ Finished Evaluations ({len(finished_eval_queue_df)})",
-                        open=False,
-                    ):
-                        with gr.Row():
-                            finished_eval_table = gr.components.Dataframe(
-                                value=finished_eval_queue_df,
-                                headers=EVAL_COLS,
-                                datatype=EVAL_TYPES,
-                                row_count=5,
-                            )
-                    with gr.Accordion(
-                        f"🔄 Running Evaluation Queue ({len(running_eval_queue_df)})",
-                        open=False,
-                    ):
-                        with gr.Row():
-                            running_eval_table = gr.components.Dataframe(
-                                value=running_eval_queue_df,
-                                headers=EVAL_COLS,
-                                datatype=EVAL_TYPES,
-                                row_count=5,
-                            )
-                    with gr.Accordion(
-                        f"⏳ Pending Evaluation Queue ({len(pending_eval_queue_df)})",
-                        open=False,
-                    ):
-                        with gr.Row():
-                            pending_eval_table = gr.components.Dataframe(
-                                value=pending_eval_queue_df,
-                                headers=EVAL_COLS,
-                                datatype=EVAL_TYPES,
-                                row_count=5,
-                            )
-            with gr.Row():
-                gr.Markdown("# ✉️✨ Submit your model here!", elem_classes="markdown-text")
-            with gr.Row():
-                with gr.Column():
-                    model_name_textbox = gr.Textbox(label="Model name")
-                    revision_name_textbox = gr.Textbox(label="Revision commit", placeholder="main")
-                    model_type = gr.Dropdown(
-                        choices=[t.to_str(" : ") for t in ModelType if t != ModelType.Unknown],
-                        label="Model type",
-                        multiselect=False,
-                        value=None,
-                        interactive=True,
-                    )
-                with gr.Column():
-                    precision = gr.Dropdown(
-                        choices=[i.value.name for i in Precision if i != Precision.Unknown],
-                        label="Precision",
-                        multiselect=False,
-                        value="float16",
-                        interactive=True,
-                    )
-                    weight_type = gr.Dropdown(
-                        choices=[i.value.name for i in WeightType],
-                        label="Weights type",
-                        multiselect=False,
-                        value="Original",
-                        interactive=True,
-                    )
-                    base_model_name_textbox = gr.Textbox(label="Base model (for delta or adapter weights)")
-            submit_button = gr.Button("Submit Eval")
-            submission_result = gr.Markdown()
-            submit_button.click(
-                add_new_eval,
-                [
-                    model_name_textbox,
-                    base_model_name_textbox,
-                    revision_name_textbox,
-                    precision,
-                    weight_type,
-                    model_type,
-                ],
-                submission_result,
             )
-    with gr.Row():
-        with gr.Accordion("📙 Citation", open=False):
-            citation_button = gr.Textbox(
-                value=CITATION_BUTTON_TEXT,
-                label=CITATION_BUTTON_LABEL,
-                lines=20,
-                elem_id="citation-button",
-                show_copy_button=True,
             )
-scheduler = BackgroundScheduler()
-scheduler.add_job(restart_space, "interval", seconds=1800)
-scheduler.start()
-demo.queue(default_concurrency_limit=40).launch()

 import gradio as gr
 import pandas as pd
+import numpy as np
+# Sample data - in a real application, you would load this from a database or API
+data = {
+    "model": [
+        "GPT-4o", "Gemini-2.0-Flash", "Qwen2.5-VL-7B", "AIN-7B", "PaliGemma-3B",
+        "TrOCR-large", "nougat-base", "KITAB-OCR", "Llama-3-70B-Vision", "claude-3-opus"
+    ],
+    "organization": [
+        "OpenAI", "Google", "Alibaba", "MBZUAI", "Google",
+        "Microsoft", "Meta", "MBZUAI", "Meta", "Anthropic"
+    ],
+    "type": [
+        "Closed-source", "Closed-source", "Open-source", "Open-source", "Open-source",
+        "Open-source", "Open-source", "Open-source", "Open-source", "Closed-source"
+    ],
+    "task": [
+        "OCR/Vision", "OCR/Vision", "OCR/Vision", "OCR/Vision", "OCR/Vision",
+        "OCR", "OCR/Document", "OCR/Arabic", "Vision", "Vision"
+    ],
+    "accuracy": [
+        92.5, 94.2, 83.4, 87.2, 81.5,
+        76.8, 79.3, 75.2, 89.1, 93.7
+    ],
+    "f1_score": [
+        90.1, 91.3, 79.8, 86.5, 78.3,
+        72.1, 74.5, 70.8, 87.4, 90.8
+    ],
+    "cer": [
+        0.31, 0.13, 1.20, 0.20, 0.67,
+        0.54, 0.58, 0.95, 0.24, 0.15
+    ],
+    "downloads": [
+        "24.5K", "18.2K", "152K", "89K", "112K",
+        "320K", "235K", "45K", "580K", "12.8K"
+    ],
+    "last_updated": [
+        "2025-03-15", "2025-03-10", "2025-03-05", "2025-02-28", "2025-02-20",
+        "2025-02-15", "2025-02-10", "2025-02-05", "2025-01-28", "2025-01-15"
+    ],
+    "model_url": [
+        "https://huggingface.co/openai/gpt-4o",
+        "https://huggingface.co/google/gemini-2-flash",
+        "https://huggingface.co/Qwen/Qwen2.5-VL-7B",
+        "https://huggingface.co/MBZUAI/AIN-7B",
+        "https://huggingface.co/google/paligemma-3b",
+        "https://huggingface.co/microsoft/trocr-large-printed",
+        "https://huggingface.co/facebook/nougat-base",
+        "https://huggingface.co/MBZUAI/KITAB-OCR",
+        "https://huggingface.co/meta-llama/Llama-3-70B-Vision",
+        "https://huggingface.co/anthropic/claude-3-opus"
+    ],
+    "paper_url": [
+        "https://arxiv.org/abs/2412.xxxxx",
+        "https://arxiv.org/abs/2403.xxxxx",
+        "https://arxiv.org/abs/2410.xxxxx",
+        "https://arxiv.org/abs/2502.xxxxx",
+        "https://arxiv.org/abs/2305.xxxxx",
+        "https://arxiv.org/abs/2109.10282",
+        "https://arxiv.org/abs/2308.13418",
+        "https://arxiv.org/abs/2502.14949",
+        "https://arxiv.org/abs/2405.xxxxx",
+        "https://arxiv.org/abs/2404.xxxxx"
+    ]
+}
+# Create DataFrame
+df = pd.DataFrame(data)
+# Function to apply color formatting to the dataframe based on metric values
+def format_dataframe(df):
+    # Create a copy to avoid modifying the original
+    formatted_df = df.copy()
+    # Format accuracy and F1 Score (higher is better)
+    formatted_df['accuracy'] = formatted_df['accuracy'].apply(
+        lambda x: f"<span style='color: {'#10B981' if x > 85 else '#F59E0B' if x > 75 else '#EF4444'}'>{x:.1f}</span>"
     )
+    formatted_df['f1_score'] = formatted_df['f1_score'].apply(
+        lambda x: f"<span style='color: {'#10B981' if x > 85 else '#F59E0B' if x > 75 else '#EF4444'}'>{x:.1f}</span>"
     )
+    # Format CER (lower is better)
+    formatted_df['cer'] = formatted_df['cer'].apply(
+        lambda x: f"<span style='color: {'#10B981' if x < 0.5 else '#F59E0B' if x < 1 else '#EF4444'}'>{x:.2f}</span>"
     )
+    # Add hyperlinks for model and paper
+    formatted_df['model'] = formatted_df.apply(
+        lambda row: f"<a href='{row['model_url']}' target='_blank'>{row['model']}</a>", axis=1
+    )
+    formatted_df['paper'] = formatted_df.apply(
+        lambda row: f"<a href='{row['paper_url']}' target='_blank'>Paper</a>", axis=1
+    )
+    # Add type badge
+    formatted_df['type'] = formatted_df['type'].apply(
+        lambda x: f"<span style='background-color: {'#DBEAFE' if x == 'Open-source' else '#FEF3C7'}; padding: 2px 6px; border-radius: 9999px; font-size: 0.75rem;'>{x}</span>"
+    )
+    # Add task badge
+    formatted_df['task'] = formatted_df['task'].apply(
+        lambda x: f"<span style='background-color: #E0F2FE; padding: 2px 6px; border-radius: 9999px; font-size: 0.75rem;'>{x}</span>"
+    )
+    # Drop URLs columns as they're now embedded in the model and paper columns
+    formatted_df = formatted_df.drop(columns=['model_url', 'paper_url'])
+    return formatted_df
+# Define CSS for styling
+css = """
+#leaderboard-title {
+    text-align: center;
+    margin-bottom: 0;
+}
+#leaderboard-subtitle {
+    text-align: center;
+    margin-top: 0;
+    color: #6B7280;
+    font-size: 1rem;
+}
+.gradio-container {
+    max-width: 1200px !important;
+}
+.hf-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1rem;
+}
+.hf-logo img {
+    height: 50px;
+}
+.header {
+    background: linear-gradient(90deg, #FFDE59 0%, #FFC532 100%);
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.header img {
+    height: 40px;
+    margin-right: 15px;
+}
+.header-content {
+    display: flex;
+    align-items: center;
+}
+.header-text {
+    display: flex;
+    flex-direction: column;
+}
+.header-text h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: black;
+}
+.header-text p {
+    margin: 0;
+    color: rgba(0, 0, 0, 0.8);
+}
+.filter-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+th {
+    background-color: #F9FAFB;
+    text-align: left;
+    padding: 12px;
+    font-weight: 600;
+    color: #374151;
+    border-bottom: 1px solid #E5E7EB;
+}
+td {
+    padding: 12px;
+    border-bottom: 1px solid #E5E7EB;
+}
+tr:hover {
+    background-color: #F9FAFB;
+}
+a {
+    color: #2563EB;
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+.footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0;
+    color: #6B7280;
+    font-size: 0.875rem;
+    margin-top: 20px;
+}
+.footer a {
+    color: #2563EB;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+}
+.footer a:hover {
+    text-decoration: underline;
+}
+"""
+# Hugging Face logo SVG (in-lined for simplicity)
+hf_logo = """
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 95 25" fill="none">
+    <path d="M8.51825 0H11.3583V17.7547H8.51825V0Z" fill="black"/>
+    <path d="M30.1975 5.07422H33.0375V17.7547H30.1975V16.2969C28.9408 17.4158 27.6842 18.0602 25.94 18.0602C22.455 18.0602 19.5825 15.1877 19.5825 11.4358C19.5825 7.6839 22.455 4.8114 25.94 4.8114C27.6842 4.8114 28.9408 5.4558 30.1975 6.5747V5.07422ZM26.2882 15.403C28.7225 15.403 30.1975 13.7014 30.1975 11.4358C30.1975 9.1702 28.7225 7.4686 26.2882 7.4686C23.8539 7.4686 22.3789 9.1702 22.3789 11.4358C22.3789 13.7014 23.8539 15.403 26.2882 15.403Z" fill="black"/>
+    <path d="M35.1311 11.4358C35.1311 7.6839 38.0036 4.8114 41.7555 4.8114C45.5075 4.8114 48.38 7.6839 48.38 11.4358C48.38 15.1877 45.5075 18.0602 41.7555 18.0602C38.0036 18.0602 35.1311 15.1877 35.1311 11.4358ZM45.5839 11.4358C45.5839 9.1702 44.1089 7.4686 41.7555 7.4686C39.402 7.4686 37.927 9.1702 37.927 11.4358C37.927 13.7014 39.402 15.403 41.7555 15.403C44.1089 15.403 45.5839 13.7014 45.5839 11.4358Z" fill="black"/>
+    <path d="M50.2717 0H53.1117V17.7547H50.2717V0Z" fill="black"/>
+    <path d="M55.1956 0H58.0356V17.7547H55.1956V0Z" fill="black"/>
+    <path d="M68.3864 11.4359C68.3864 9.0824 66.9114 7.4686 64.558 7.4686C62.2046 7.4686 60.6521 9.0824 60.6521 11.4359C60.6521 13.7893 62.2047 15.4031 64.558 15.4031C66.9114 15.4031 68.3864 13.7893 68.3864 11.4359ZM57.8122 11.4359C57.8122 7.6839 60.6847 4.8114 64.4367 4.8114C66.1809 4.8114 67.4374 5.45579 68.6939 6.57469V5.07422H71.5341V18.0602C71.5341 22.1174 68.5725 24.618 64.5575 24.618C61.2553 24.618 58.5041 22.8739 57.7383 20.0013L60.5347 19.1142C61.0577 20.6146 62.5748 21.9605 64.5575 21.9605C66.9111 21.9605 68.6941 20.5285 68.6941 18.0602V16.297C67.4374 17.4159 66.1809 18.0603 64.4367 18.0603C60.6847 18.0603 57.8122 15.1878 57.8122 11.4359Z" fill="black"/>
+    <path d="M74.0307 11.4358C74.0307 7.6839 76.9032 4.8114 80.6551 4.8114C84.4071 4.8114 87.2796 7.6839 87.2796 11.4358C87.2796 15.1877 84.4071 18.0602 80.6551 18.0602C76.9032 18.0602 74.0307 15.1877 74.0307 11.4358ZM84.4835 11.4358C84.4835 9.1702 83.0085 7.4686 80.6551 7.4686C78.3016 7.4686 76.8266 9.1702 76.8266 11.4358C76.8266 13.7014 78.3016 15.403 80.6551 15.403C83.0085 15.403 84.4835 13.7014 84.4835 11.4358Z" fill="black"/>
+    <path d="M89.9903 2.69156C89.9903 1.63531 90.7989 0.82666 91.8551 0.82666C92.9114 0.82666 93.72 1.63531 93.72 2.69156C93.72 3.74781 92.9114 4.55645 91.8551 4.55645C90.7989 4.55645 89.9903 3.74781 89.9903 2.69156ZM90.1952 5.07422H93.5149V17.7547H90.1952V5.07422Z" fill="black"/>
+</svg>
+"""
+# Function to filter dataframe based on type
+def filter_by_type(df, type_filter):
+    if type_filter == "All":
+        return df
+    return df[df["type"].str.contains(type_filter)]
+# Function to filter dataframe based on search term
+def filter_by_search(df, search_term):
+    if not search_term:
+        return df
+    # Convert search term to lowercase for case-insensitive search
+    search_term = search_term.lower()
+    # Filter based on model, organization, or task
+    mask = (
+        df["model"].str.lower().str.contains(search_term) |
+        df["organization"].str.lower().str.contains(search_term) |
+        df["task"].str.lower().str.contains(search_term)
+    )
+    return df[mask]
+# Create the Gradio interface
+def create_leaderboard_interface():
+    # Create DataFrame
+    df_orig = pd.DataFrame(data)
+    # Sort by accuracy descending by default
+    df_orig = df_orig.sort_values(by="accuracy", ascending=False)
+    with gr.Blocks(css=css) as demo:
+        gr.HTML(f"""
+        <div class="header">
+            <div class="header-content">
+                <div>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+                        <path d="M9 16H11V24H9V16Z" fill="black"/>
+                        <path d="M13 11H15V29H13V11Z" fill="black"/>
+                        <path d="M17 15H19V25H17V15Z" fill="black"/>
+                        <path d="M21 11H23V29H21V11Z" fill="black"/>
+                        <path d="M25 16H27V24H25V16Z" fill="black"/>
+                        <path d="M29 14H31V26H29V14Z" fill="black"/>
+                    </svg>
+                </div>
+                <div class="header-text">
+                    <h1>KITAB-Bench Leaderboard</h1>
+                    <p>Arabic OCR and Document Understanding Benchmark</p>
+                </div>
+            </div>
+            <div>
+                <a href="https://huggingface.co/spaces" target="_blank" style="color: black; text-decoration: underline;">
+                    Powered by 🤗 Spaces
+                </a>
+            </div>
+        </div>
+        """)
+        # Filter controls
+        with gr.Row(equal_height=True):
+            type_filter = gr.Radio(
+                ["All", "Open-source", "Closed-source"],
+                label="Model Type",
+                value="All",
+                interactive=True
             )
+            search_input = gr.Textbox(
+                label="Search Models, Organizations, or Tasks",
+                placeholder="Type to search...",
+                interactive=True
             )
+            sort_by = gr.Dropdown(
+                ["accuracy", "f1_score", "cer", "downloads"],
+                label="Sort by",
+                value="accuracy",
+                interactive=True
+            )
+            sort_order = gr.Radio(
+                ["Descending", "Ascending"],
+                label="Sort Order",
+                value="Descending",
+                interactive=True
+            )
+        # Table output
+        table_output = gr.HTML()
+        # Define update function
+        def update_table(type_filter, search_term, sort_by, sort_order):
+            # Filter by type
+            filtered_df = filter_by_type(df_orig, type_filter)
+            # Filter by search term
+            filtered_df = filter_by_search(filtered_df, search_term)
+            # Sort the dataframe
+            is_ascending = sort_order == "Ascending"
+            # For CER, we might want to reverse the default sorting (since lower is better)
+            if sort_by == "cer":
+                is_ascending = not is_ascending
+            filtered_df = filtered_df.sort_values(by=sort_by, ascending=is_ascending)
+            # Format the dataframe
+            formatted_df = format_dataframe(filtered_df)
+            # Generate HTML table
+            html_table = f"""
+            <div style="overflow-x: auto;">
+                <table style="width:100%">
+                    <thead>
+                        <tr>
+                            <th>Model</th>
+                            <th>Organization</th>
+                            <th>Type</th>
+                            <th>Task</th>
+                            <th>Accuracy</th>
+                            <th>F1 Score</th>
+                            <th>CER</th>
+                            <th>Downloads</th>
+                            <th>Last Updated</th>
+                            <th>Paper</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+            """
+            for _, row in formatted_df.iterrows():
+                html_table += f"""
+                <tr>
+                    <td>{row['model']}</td>
+                    <td>{row['organization']}</td>
+                    <td>{row['type']}</td>
+                    <td>{row['task']}</td>
+                    <td>{row['accuracy']}</td>
+                    <td>{row['f1_score']}</td>
+                    <td>{row['cer']}</td>
+                    <td>{row['downloads']}</td>
+                    <td>{row['last_updated']}</td>
+                    <td>{row['paper']}</td>
+                </tr>
+                """
+            html_table += """
+                    </tbody>
+                </table>
+            </div>
+            <div class="footer">
+                <span>Showing {count} of {total} models</span>
+                <div>
+                    <a href="https://github.com/mbzuai-oryx/KITAB-Bench" target="_blank">GitHub Repository</a>
+                    <span style="margin: 0 8px;">|</span>
+                    <a href="https://arxiv.org/abs/2502.14949" target="_blank">KITAB-Bench Paper</a>
+                </div>
+            </div>
+            """.format(count=len(filtered_df), total=len(df_orig))
+            return html_table
+        # Set up event handlers
+        type_filter.change(update_table, [type_filter, search_input, sort_by, sort_order], table_output)
+        search_input.change(update_table, [type_filter, search_input, sort_by, sort_order], table_output)
+        sort_by.change(update_table, [type_filter, search_input, sort_by, sort_order], table_output)
+        sort_order.change(update_table, [type_filter, search_input, sort_by, sort_order], table_output)
+        # Initialize table on page load
+        demo.load(update_table, [type_filter, search_input, sort_by, sort_order], table_output)
+        gr.HTML("""
+        <div style="margin-top: 20px; text-align: center; font-size: 0.8rem; color: #6B7280;">
+            <p>For more information about the KITAB-Bench, visit the <a href="https://mbzuai-oryx.github.io/KITAB-Bench/" target="_blank">project website</a>.</p>
+        </div>
+        """)
+    return demo
+# Launch the app
+demo = create_leaderboard_interface()
+if __name__ == "__main__":
+    demo.launch()