gr.DataFrame instead of Markdown table

app.py

@@ -145,31 +145,27 @@ def fetch_model_detail(submission_id):
 
 def change_leaderboard_category(category):
     if category == leaderboard_server.TASKS_CATEGORY_OVERALL:
-        task_abbreviation_legend = ""
+        task_abbreviation_legend = gr.update(
+            value=None,
+            headers=None,
+            visible=False,
+        )
     else:
-        # TODO: gr.DataFrame
         task_abbreviation_legend_head = [
-            "### Legend",
-            "",
-            "| task abbreviation | task name |",
-            "| --- | --- |",
+            "task abbreviation",
+            "task name",
         ]
         task_abbreviation_legend_body = []
-        task_abbreviation_legend_tail = [
-            "",
-        ]
+        
         abbreviation2name = leaderboard_server.CATEGORY_TO_TASK_ABBREVIATION_TO_NAME[category]
         for abbr, name in abbreviation2name.items():
-            abbr_escaped = xmlEscape(abbr, MARKDOWN_SPECIAL_CHARACTERS)
-            name_escaped = xmlEscape(name, MARKDOWN_SPECIAL_CHARACTERS)
-            task_abbreviation_legend_body.append(f"| {abbr_escaped} | {name_escaped} |")
+            task_abbreviation_legend_body.append([abbr, name])
         
-        task_abbreviation_legend = (
-            task_abbreviation_legend_head
-            + task_abbreviation_legend_body
-            + task_abbreviation_legend_tail
+        task_abbreviation_legend = gr.update(
+            value=task_abbreviation_legend_body,
+            headers=task_abbreviation_legend_head,
+            visible=True,
         )
-        task_abbreviation_legend = "\n".join(task_abbreviation_legend)
     
     return (
         gr.update(
@@ -177,9 +173,7 @@ def change_leaderboard_category(category):
             visible=True,
             datatype="markdown",
         ),
-        gr.update(
-            value=task_abbreviation_legend,
-        ),
+        task_abbreviation_legend,
     )
 
 def show_modal():
@@ -291,7 +285,15 @@ with gr.Blocks(theme=gr.themes.Soft(text_size=text_md), css=custom_css) as main:
                     )
                 
                 with gr.Row():
-                    results_table_legend = gr.Markdown()
+                    results_table_legend = gr.DataFrame(
+                        value=None,
+                        headers=None,
+                        datatype="str",
+                        label=None,
+                        visible=False,
+                        interactive=False,
+                        elem_classes="leaderboard-table-legend",
+                    )
                 
                 category_of_tasks.change(
                     fn=change_leaderboard_category,