code

about_content.py

@@ -0,0 +1,15 @@
+# about_content.py
+
+about_markdown = """
+### About Page
+
+This application is a demonstration of KV Cache Benchmarking. It allows users to explore and compare different KV cache implementations across various models and datasets.
+
+#### Features:
+- Interactive filtering by model types and datasets
+- Real-time updates of benchmark results
+- Visualization of Quality and TTFT metrics
+
+#### Contact:
+For more information, please contact us at [email@example.com](mailto:email@example.com).
+"""

app.py

@@ -2,6 +2,9 @@ import os
 import json
 import gradio as gr
 import pandas as pd
+from about_content import about_markdown  # Import the about page content
+from submission_content import submission_markdown  # Import the submission page content
+import plotly.express as px
 
 # Helper function to load data from JSON files
 def load_data(data_dir):
@@ -37,6 +40,13 @@ def filter_and_display(selected_columns, model_types, datasets):
     display_columns = ["Method", "Model"] + [col for col in ["Quality", "TTFT", "Link"] if col in selected_columns]
     return filtered[display_columns] if not filtered.empty else pd.DataFrame(columns=display_columns)
 
+def create_visualization(filtered_data):
+    if filtered_data.empty:
+        return None
+    fig = px.bar(filtered_data, x='Model', y='Quality', color='Method', barmode='group',
+                 title='Quality by Model and Method')
+    return fig
+
 # Load the data from the /data folder
 data_dir = "data"
 data = load_data(data_dir)
@@ -46,9 +56,9 @@ def create_gradio_app():
     with gr.Blocks() as app:
         with gr.Row():
             gr.Markdown(
-                """# KV Cache Benchmark
+                """<h1 style="text-align: center; font-size: 3em;">KV Cache Benchmark</h1>
 ### Demo leaderboard  
-Intro text
+This demo leaderboard allows users to explore and compare different KV cache implementations across various models and datasets. It provides interactive filtering options and real-time updates of benchmark results, including visualization of Quality and TTFT metrics.
 """)
         
         with gr.Tabs():
@@ -83,17 +93,26 @@ Intro text
                 
                 results = gr.Dataframe(value=filter_and_display(["Quality", "TTFT"], list(data["Model"].unique()), list(data["Dataset"].unique())), headers=["Method", "Model", "Quality", "TTFT", "Link"])
 
+                with gr.Row():
+                    gr.Markdown("### Visualization")
+                    plot = gr.Plot(value=create_visualization(data))
+
                 def auto_update(selected_columns, model_types, datasets):
                     if not model_types or not datasets:
-                        return pd.DataFrame(columns=["Method", "Model"] + selected_columns)
-                    return filter_and_display(selected_columns, model_types, datasets)
+                        return pd.DataFrame(columns=["Method", "Model"] + selected_columns), None
+                    filtered_data = filter_and_display(selected_columns, model_types, datasets)
+                    return filtered_data, create_visualization(filtered_data)
+
+                columns_to_display.change(auto_update, inputs=[columns_to_display, model_types, datasets], outputs=[results, plot])
+                model_types.change(auto_update, inputs=[columns_to_display, model_types, datasets], outputs=[results, plot])
+                datasets.change(auto_update, inputs=[columns_to_display, model_types, datasets], outputs=[results, plot])
 
-                columns_to_display.change(auto_update, inputs=[columns_to_display, model_types, datasets], outputs=[results])
-                model_types.change(auto_update, inputs=[columns_to_display, model_types, datasets], outputs=[results])
-                datasets.change(auto_update, inputs=[columns_to_display, model_types, datasets], outputs=[results])
 
             with gr.TabItem("About"):
-                gr.Markdown("### About Page Placeholder")
+                gr.Markdown(about_markdown)  # Use the imported about page content
+
+            with gr.TabItem("Submission Instructions"):
+                gr.Markdown(submission_markdown)  # Use the imported submission page content
 
     return app
 

requirements.txt

@@ -0,0 +1,17 @@
+APScheduler
+black
+datasets
+gradio
+gradio[oauth]
+gradio_leaderboard==0.0.13
+gradio_client
+huggingface-hub>=0.18.0
+matplotlib
+numpy
+pandas
+python-dateutil
+tqdm
+transformers
+plotly
+tokenizers>=0.15.0
+sentencepiece

submission_content.py

@@ -0,0 +1,12 @@
+submission_markdown = """
+###Submission Instructions
+
+Please follow these steps to submit your data:
+
+1. Prepare your data in JSON format.
+2. Ensure the file name follows the format: `method_model_dataset.json`.
+3. Upload your file to the `data` directory.
+4. Refresh the application to see your data in the leaderboard.
+
+For any questions, contact us at [support@example.com](mailto:support@example.com).
+"""