cleaner update

app.py

@@ -1,7 +1,16 @@
 import gradio as gr
 import pandas as pd
 
-# Simplified leaderboard data
+from src.about import (
+    CITATION_BUTTON_LABEL,
+    CITATION_BUTTON_TEXT,
+    EVALUATION_QUEUE_TEXT,
+    INTRODUCTION_TEXT,
+    LLM_BENCHMARKS_TEXT,
+    TITLE,
+)
+
+# Simplified DataFrame for the leaderboard
 data = {
     "Model": [
         "Handwritten TAG",
@@ -37,9 +46,8 @@ def hyperlink_model(model):
 
 leaderboard_df["Model"] = leaderboard_df["Model"].apply(hyperlink_model)
 
-# Gradio app
+# Simplified Gradio app
 with gr.Blocks() as demo:
-    # Title and subtitle
     gr.HTML(
         """
         <div style="text-align: center;">
@@ -48,19 +56,27 @@ with gr.Blocks() as demo:
         </div>
         """
     )
+    gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
 
-    # Leaderboard table
-    gr.HTML(
-        leaderboard_df.to_html(
-            index=False,
-            escape=False,
-            classes="leaderboard-table",
-        )
-    )
+    with gr.Tabs(elem_classes="tab-buttons") as tabs:
+        with gr.TabItem("🏅 LLM Benchmark", elem_id="llm-benchmark-tab-table", id=0):
+            # Highlight the top row in green for "Handwritten TAG"
+            with gr.Row():
+                gr.Dataframe(
+                    value=leaderboard_df,
+                    headers=["Model", "Code", "Execution Accuracy"],
+                    datatype=["str", "str", "str"],
+                    row_count=(5, "dynamic"),
+                    wrap=True,
+                    elem_id="leaderboard",
+                    type="pandas"
+                )
+
+        with gr.TabItem("📝 About", elem_id="llm-benchmark-tab-table", id=2):
+            gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")
+
+        with gr.TabItem("🚀 Submission Instructions ", elem_id="llm-benchmark-tab-table", id=3):
+            gr.Markdown(EVALUATION_QUEUE_TEXT, elem_classes="markdown-text")
 
-    # Footer or additional info (optional)
-    gr.Markdown(
-        "Note: Execution accuracy is based on the percentage of correctly answered queries."
-    )
 
 demo.launch()