add some explanationes

app.py

@@ -8,6 +8,7 @@ from src.assets.text_content import (
     TITLE,
     INTRODUCTION_TEXT,
     A100_TEXT,
+    About_TEXT,
     CITATION_BUTTON_LABEL,
     CITATION_BUTTON_TEXT,
 )
@@ -220,93 +221,93 @@ with demo:
     # introduction text
     gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
 
-    # control panel title
-    gr.HTML("<h2>Control Panel 🎛️</h2>")
-
-    # control panel interface
-    with gr.Row():
-        with gr.Column(scale=1):
-            search_bar = gr.Textbox(
-                label="Model 🤗",
-                info="🔍 Search for a model name",
-                elem_id="search-bar",
+    # leaderboard tabs
+    with gr.Tabs(elem_classes="A100-tabs") as A100_tabs:
+        with gr.TabItem("🖥️ A100-80GB Leaderboard Table   🏆", id=0):
+            gr.HTML(A100_TEXT)
+
+            # Original leaderboard table
+            A100_leaderboard = gr.components.Dataframe(
+                value=A100_table,
+                datatype=COLUMNS_DATATYPES,
+                headers=list(COLUMNS_MAPPING.values()),
+                elem_id="1xA100-table",
             )
-        with gr.Column(scale=1):
-            with gr.Box():
-                score_slider = gr.Slider(
-                    label="Open LLM Score 📈",
-                    info="🎚️ Slide to minimum Open LLM score",
-                    value=0,
-                    elem_id="threshold-slider",
-                )
-        with gr.Column(scale=1):
-            with gr.Box():
-                memory_slider = gr.Slider(
-                    label="Peak Memory (MB) 📈",
-                    info="🎚️ Slide to maximum Peak Memory",
-                    minimum=0,
-                    maximum=80 * 1024,
-                    value=80 * 1024,
-                    elem_id="memory-slider",
-                )
 
-    with gr.Row():
-        with gr.Column(scale=1):
-            backend_checkboxes = gr.CheckboxGroup(
-                label="Backends 🏭",
-                choices=["pytorch", "onnxruntime"],
-                value=["pytorch", "onnxruntime"],
-                info="☑️ Select the backends",
-                elem_id="backend-checkboxes",
-            )
-        with gr.Column(scale=1):
-            datatype_checkboxes = gr.CheckboxGroup(
-                label="Datatypes 📥",
-                choices=["float32", "float16"],
-                value=["float32", "float16"],
-                info="☑️ Select the load datatypes",
-                elem_id="datatype-checkboxes",
-            )
-        with gr.Column(scale=2):
-            optimizations_checkboxes = gr.CheckboxGroup(
-                label="Optimizations 🛠️",
-                choices=["None", "BetterTransformer", "LLM.int8", "LLM.fp4"],
-                value=["None", "BetterTransformer", "LLM.int8", "LLM.fp4"],
-                info="☑️ Select the optimizations",
-                elem_id="optimizations-checkboxes",
+        with gr.TabItem("🖥️ A100-80GB Interactive Plot 📊", id=1):
+            gr.HTML(A100_TEXT)
+
+            # Original leaderboard plot
+            A100_plotly = gr.components.Plot(
+                value=A100_plot,
+                elem_id="1xA100-plot",
+                show_label=False,
             )
 
-    with gr.Row():
-        filter_button = gr.Button(
-            value="Filter 🚀",
-            elem_id="filter-button",
-        )
+        with gr.TabItem("🖥️ A100-80GB Control Panel 🎛️", id=2):
+            gr.HTML(A100_TEXT)
 
-    # leaderboard tabs
-    with gr.Tabs(elem_classes="hardware-tabs"):
-        with gr.TabItem("🖥️ A100-80GB 🖥️", id=0):
-            with gr.Tabs(elem_classes="A100-tabs") as A100_tabs:
-                with gr.TabItem("🏅 Leaderboard 🏆", id=0):
-                    gr.HTML(A100_TEXT)
-
-                    # Original leaderboard table
-                    A100_leaderboard = gr.components.Dataframe(
-                        value=A100_table,
-                        datatype=COLUMNS_DATATYPES,
-                        headers=list(COLUMNS_MAPPING.values()),
-                        elem_id="1xA100-table",
+            # control panel interface
+            with gr.Row():
+                with gr.Column(scale=1):
+                    search_bar = gr.Textbox(
+                        label="Model 🤗",
+                        info="🔍 Search for a model name",
+                        elem_id="search-bar",
+                    )
+                with gr.Column(scale=1):
+                    with gr.Box():
+                        score_slider = gr.Slider(
+                            label="Open LLM Score 📈",
+                            info="🎚️ Slide to minimum Open LLM score",
+                            value=0,
+                            elem_id="threshold-slider",
+                        )
+                with gr.Column(scale=1):
+                    with gr.Box():
+                        memory_slider = gr.Slider(
+                            label="Peak Memory (MB) 📈",
+                            info="🎚️ Slide to maximum Peak Memory",
+                            minimum=0,
+                            maximum=80 * 1024,
+                            value=80 * 1024,
+                            elem_id="memory-slider",
+                        )
+
+            with gr.Row():
+                with gr.Column(scale=1):
+                    backend_checkboxes = gr.CheckboxGroup(
+                        label="Backends 🏭",
+                        choices=["pytorch", "onnxruntime"],
+                        value=["pytorch", "onnxruntime"],
+                        info="☑️ Select the backends",
+                        elem_id="backend-checkboxes",
+                    )
+                with gr.Column(scale=1):
+                    datatype_checkboxes = gr.CheckboxGroup(
+                        label="Datatypes 📥",
+                        choices=["float32", "float16"],
+                        value=["float32", "float16"],
+                        info="☑️ Select the load datatypes",
+                        elem_id="datatype-checkboxes",
+                    )
+                with gr.Column(scale=2):
+                    optimizations_checkboxes = gr.CheckboxGroup(
+                        label="Optimizations 🛠️",
+                        choices=["None", "BetterTransformer", "LLM.int8", "LLM.fp4"],
+                        value=["None", "BetterTransformer", "LLM.int8", "LLM.fp4"],
+                        info="☑️ Select the optimizations",
+                        elem_id="optimizations-checkboxes",
                     )
 
-                with gr.TabItem("📉 Plot 📊", id=1):
-                    # Original leaderboard plot
-                    gr.HTML(A100_TEXT)
+            with gr.Row():
+                filter_button = gr.Button(
+                    value="Filter 🚀",
+                    elem_id="filter-button",
+                )
 
-                    # Original leaderboard plot
-                    A100_plotly = gr.components.Plot(
-                        value=A100_plot,
-                        elem_id="1xA100-plot",
-                        show_label=False,
-                    )
+        with gr.TabItem("❔ About 📖", id=3):
+            gr.HTML(About_TEXT)
 
     demo.load(
         change_tab,
@@ -336,8 +337,6 @@ with demo:
             ).style(show_copy_button=True)
 
 
-
-
 # Restart space every hour
 scheduler = BackgroundScheduler()
 scheduler.add_job(

src/assets/text_content.py

@@ -15,6 +15,16 @@ A100_TEXT = """<h3>Single-GPU Benchmark (1xA100):</h3>
 </ul>
 """
 
+About_TEXT = """<h3>About the benchmarks</h3>
+<ul>
+  <li>The performances benchmarks were obtained using [Optimum-Benchmark](https://github.com/huggingface/optimum-benchmark).</li>
+  <li>Throughput is measured in tokens per second when generating 1000 tokens with a batch size of 1.</li>
+  <li>Peak memory is measured in MB during the first forward pass of the model (no warmup).</li>
+  <li>Open LLM Score is an average evaluation score obtained from the [🤗 Open LLM Leaderboard](https://huggingface.co/spaces/HuggingFaceH4/open_llm_leaderboard).</li>
+  <li>Open LLM Tradeoff is the euclidean distance between an LLM and the "perfect LLM" (i.e. 0 latency and 100% accuracy) translating the tradeoff between latency and accuracy.</li>
+</ul>
+"""
+
 CITATION_BUTTON_LABEL = "Copy the following snippet to cite these results."
 CITATION_BUTTON_TEXT = r"""@misc{open-llm-perf-leaderboard,
   author = {Ilyas Moutawwakil, Régis Pierrard},