added search bar

app.py

@@ -4,7 +4,7 @@ import pandas as pd
 from apscheduler.schedulers.background import BackgroundScheduler
 
 from src.assets.text_content import TITLE, INTRODUCTION_TEXT, CITATION_BUTTON_LABEL, CITATION_BUTTON_TEXT
-from src.assets.css_html_js import custom_css, get_window_url_params
+from src.assets.css_html_js import custom_css
 from src.utils import restart_space, load_dataset_repo, make_clickable_model
 
 
@@ -45,12 +45,25 @@ def get_benchmark_df(benchmark):
     return df
 
 
+def search_table(df, query):
+    filtered_df = df[df["model"].str.contains(query, case=False)]
+    return filtered_df
+
+
 # Define demo interface
 demo = gr.Blocks(css=custom_css)
 with demo:
     gr.HTML(TITLE)
     gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
 
+    with gr.Row():
+        with gr.Box(elem_id="search-bar-table-box"):
+            search_bar = gr.Textbox(
+                placeholder="🔍 Search your model and press ENTER...",
+                show_label=False,
+                elem_id="search-bar",
+            )
+
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
         with gr.TabItem("🖥️ A100-80GB Benchmark 🏋️", elem_id="A100-benchmark", id=0):
 
@@ -63,27 +76,53 @@ with demo:
             gr.HTML(SINGLE_A100_TEXT)
 
             single_A100_df = get_benchmark_df(benchmark="1xA100-80GB")
-            leaderboard_table_lite = gr.components.Dataframe(
+            # Original leaderboard table
+            single_A100_leaderboard = gr.components.Dataframe(
                 value=single_A100_df,
                 datatype=COLUMNS_DATATYPES,
                 headers=list(COLUMNS_MAPPING.values()),
                 elem_id="1xA100-table",
             )
+            # Dummy Leaderboard table for handling the case when the user uses backspace key
+            single_A100_for_search = gr.components.Dataframe(
+                value=single_A100_df,
+                datatype=COLUMNS_DATATYPES,
+                headers=list(COLUMNS_MAPPING.values()),
+                max_rows=None,
+                visible=False,
+            )
+            search_bar.submit(
+                search_table,
+                [single_A100_for_search, search_bar],
+                single_A100_leaderboard,
+            )
 
-        MULTI_A100_TEXT = """<h3>Multi-GPU (4xA100):</h3>
-        <ul>
-            <li>Singleton Batch (1)</li>
-            <li>Thousand Tokens (1000)</li>
-        </ul>"""
-        gr.HTML(MULTI_A100_TEXT)
-
-        multi_A100_df = get_benchmark_df(benchmark="4xA100-80GB")
-        leaderboard_table_full = gr.components.Dataframe(
-            value=multi_A100_df,
-            datatype=COLUMNS_DATATYPES,
-            headers=list(COLUMNS_MAPPING.values()),
-            elem_id="4xA100-table",
-        )
+            MULTI_A100_TEXT = """<h3>Multi-GPU (4xA100):</h3>
+            <ul>
+                <li>Singleton Batch (1)</li>
+                <li>Thousand Tokens (1000)</li>
+            </ul>"""
+            gr.HTML(MULTI_A100_TEXT)
+            multi_A100_df = get_benchmark_df(benchmark="4xA100-80GB")
+            multi_A100_leaderboard = gr.components.Dataframe(
+                value=multi_A100_df,
+                datatype=COLUMNS_DATATYPES,
+                headers=list(COLUMNS_MAPPING.values()),
+                elem_id="4xA100-table",
+            )
+            # Dummy Leaderboard table for handling the case when the user uses backspace key
+            multi_A100_for_search = gr.components.Dataframe(
+                value=single_A100_df,
+                datatype=COLUMNS_DATATYPES,
+                headers=list(COLUMNS_MAPPING.values()),
+                max_rows=None,
+                visible=False,
+            )
+            search_bar.submit(
+                search_table,
+                [multi_A100_for_search, search_bar],
+                multi_A100_leaderboard,
+            )
 
     with gr.Row():
         with gr.Accordion("📙 Citation", open=False):