descriptive html

app.py

@@ -217,11 +217,12 @@ with demo:
     gr.HTML(TITLE)
 
     # introduction text
-    gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
+    gr.Markdown(INTRODUCTION_TEXT, elem_classes="descriptive-text")
 
     # leaderboard tabs
     with gr.Tabs(elem_classes="A100-tabs") as A100_tabs:
-        with gr.TabItem("🖥️ A100-80GB Leaderboar Table 🏆", id=0):
+        with gr.TabItem("🖥️ A100-80GB Benchmark 🏆", id=0):
+            gr.HTML("👉 Scroll right 👉 to more columns.", elem_id="descriptive-text")
             # Original leaderboard table
             A100_leaderboard = gr.components.Dataframe(
                 value=A100_table,
@@ -230,7 +231,11 @@ with demo:
                 elem_id="1xA100-table",
             )
 
-        with gr.TabItem("🖥️ A100-80GB Interactive Plot 📊", id=2):
+        with gr.TabItem("🖥️ A100-80GB Plot 📊", id=1):
+            gr.HTML(
+                "👆 Hover over the points 👆 to get more information about models.",
+                elem_id="descriptive-text",
+            )
             # Original leaderboard plot
             A100_plotly = gr.components.Plot(
                 value=A100_plot,
@@ -238,7 +243,7 @@ with demo:
                 show_label=False,
             )
 
-        with gr.TabItem("🎮 Control Panel 🎛️", id=3):
+        with gr.TabItem("Control Panel 🎛️", id=2):
             # control panel interface
             with gr.Row():
                 with gr.Column(scale=1):
@@ -298,8 +303,8 @@ with demo:
                     elem_id="filter-button",
                 )
 
-        with gr.TabItem("📖 About ❔", id=4):
-            gr.HTML(ABOUT_TEXT, elem_classes="html-text")
+        with gr.TabItem("About 📖", id=3):
+            gr.HTML(ABOUT_TEXT, elem_classes="descriptive-text")
 
     demo.load(
         change_tab,

src/assets/css_html_js.py

@@ -1,8 +1,5 @@
 custom_css = """
-.markdown-text {
-    font-size: 16px !important;
-}
-.html-text {
+.descriptive-text {
     font-size: 16px !important;
 }