Update app.py

app.py

@@ -5,32 +5,42 @@ import shutil
 
 # Description and Introduction texts
 DESCRIPTION = """
-Independent performance benchmark of LLMs with various Inference Engines. Definitions are below the table.
+<h2 style='text-align: center; color: #cbff4d !important; text-shadow: 2px 2px 4px rgba(0,0,0,0.1);'>🚀 LLM Inference Leaderboard: Pushing the Boundaries of Performance 🚀</h2>
 """
 
 INTRODUCTION = """
-**Introduction**
-In our ongoing quest to help developers find the right libraries and LLMs for their use cases.
-
-We tested them across six different inference engines (vLLM, TGI, TensorRT-LLM, Tritonvllm, Deepspeed-mii, ctranslate) on A100 GPUs hosted on Azure, ensuring a neutral playing field separate from our Inferless platform.
-The goal?
-To help developers, researchers, and AI enthusiasts pinpoint the best LLMs for their needs, whether for development or production.
+<div style='background-color: #e6ffd9; padding: 20px; border-radius: 15px; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);'>
+<h3 style='color: #00480a;'>🔬 Our Exciting Quest</h3>
+<p style='color: #00480a;'>We're on a thrilling journey to help developers discover the perfect LLMs and libraries for their innovative projects! We've put these models through their paces using six cutting-edge inference engines:</p>
+<ul style='color: #00480a;'>
+    <li>🚄 vLLM</li>
+    <li>🌟 TGI</li>
+    <li>⚡ TensorRT-LLM</li>
+    <li>🔮 Tritonvllm</li>
+    <li>🚀 Deepspeed-mii</li>
+    <li>🎯 ctranslate</li>
+</ul>
+<p style='color: #00480a;'>All our tests were conducted on state-of-the-art A100 GPUs hosted on Azure, ensuring a fair and neutral battleground!</p>
+<p style='color: #00480a; font-weight: bold;'>Our mission: Empower developers, researchers, and AI enthusiasts to find their perfect LLM match for both development and production environments!</p>
+</div>
 """
 
 HOW_WE_TESTED = """
-**How we tested?**
-Here's how we ensured consistent, reliable benchmarks:
-* **Platform:** All tests ran on A100 GPUs from Azure, providing a level playing field.
-* **Setup:** Docker containers for each library ensured a consistent environment.
-* **Configuration:** Standard settings (temperature 0.5, top_p 1) kept the focus on performance, not external variables.
-* **Prompts & Token Ranges:** We used six distinct prompts with input lengths from 20 to 2,000 tokens and tested generation lengths of 100, 200, and 500 tokens to evaluate each library's flexibility.
-* **Models & Libraries Tested:** We evaluated Phi-3-medium-128k-instruct, Meta-Llama-3.1-8B-Instruct, Mistral-7B-Instruct-v0.3, Qwen2-7B-Instruct, and Gemma-2-9b-it using Text Generation Inference (TGI), vLLM, DeepSpeed Mii, CTranslate2, Triton with vLLM Backend, and TensorRT-LLM.
+<div style='background-color: #cbff4d; padding: 20px; border-radius: 15px; margin-top: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);'>
+<h3 style='color: #00480a;'>🧪 Our Rigorous Testing Process</h3>
+<p style='color: #00480a;'>We left no stone unturned in our quest for reliable benchmarks:</p>
+<ul style='color: #00480a;'>
+    <li><strong>🖥️ Platform:</strong> A100 GPUs from Azure - the ultimate testing ground!</li>
+    <li><strong>🐳 Setup:</strong> Docker containers for each library, ensuring a pristine environment.</li>
+    <li><strong>⚙️ Configuration:</strong> Standardized settings (temperature 0.5, top_p 1) for laser-focused performance comparisons.</li>
+    <li><strong>📊 Prompts & Token Ranges:</strong> Six diverse prompts, input lengths from 20 to 2,000 tokens, and generation lengths of 100, 200, and 500 tokens - pushing the boundaries of flexibility!</li>
+    <li><strong>🤖 Models & Libraries Tested:</strong> We put the best through their paces: Phi-3-medium-128k-instruct, Meta-Llama-3.1-8B-Instruct, Mistral-7B-Instruct-v0.3, Qwen2-7B-Instruct, and Gemma-2-9b-it, using TGI, vLLM, DeepSpeed Mii, CTranslate2, Triton with vLLM Backend, and TensorRT-LLM.</li>
+</ul>
+</div>
 """
 
-# Replace 'path/to/your/csv/folder' with the actual path to your folder containing CSV files
 csv_folder_path = 'result_csv/'
 
-# Function to read all CSV files from a folder and rearrange columns
 def read_and_process_csv_files(folder_path):
     all_data = []
     for filename in os.listdir(folder_path):
@@ -41,18 +51,15 @@ def read_and_process_csv_files(folder_path):
     
     combined_df = pd.concat(all_data, ignore_index=True)
     
-    # Rearrange columns
     columns_order = [
         "Model_Name", "Library", "TTFT", "Tokens-per-Second", "Token_Count", 
-        "Input_Tokens", "Output_Tokens", "Input", "Output"
+        "input_length", "output_length", "Input", "Output"
     ]
     
-    # Ensure all required columns exist, if not, create them with NaN values
     for col in columns_order:
         if col not in combined_df.columns:
             combined_df[col] = pd.NA
     
-    # Select and order the columns
     return combined_df[columns_order]
 
 df = read_and_process_csv_files(csv_folder_path)
@@ -65,60 +72,120 @@ def add_new_entry(file):
     if file is None:
         return df, "No file uploaded."
     
-    # Read the uploaded CSV file
     new_df = pd.read_csv(file.name)
     
-    # Rearrange columns to match the existing DataFrame
     columns_order = [
         "Model_Name", "Library", "TTFT", "Tokens-per-Second", "Token_Count", 
-        "Input_Tokens", "Output_Tokens", "Input", "Output"
+        "input_length", "output_length", "Input", "Output"
     ]
     for col in columns_order:
         if col not in new_df.columns:
             new_df[col] = pd.NA
     new_df = new_df[columns_order]
     
-    # Append the new data to the existing DataFrame
     df = pd.concat([df, new_df], ignore_index=True)
     
-    # Save the uploaded file to the CSV folder
     filename = os.path.basename(file.name)
     destination = os.path.join(csv_folder_path, filename)
     shutil.copy(file.name, destination)
     
     return df, f"File '{filename}' uploaded and data added successfully!"
 
-with gr.Blocks() as demo:
-    gr.Markdown("# LLM Inference Leaderboard")
+def filter_and_search(search_term, library_filter):
+    filtered_df = df.copy()
+    
+    if search_term:
+        filtered_df = filtered_df[filtered_df['Model_Name'].str.contains(search_term, case=False, na=False)]
     
-    # About section at the top
-    with gr.Column():
-        gr.Markdown("---")
-        gr.Markdown(DESCRIPTION)
-        gr.Markdown(INTRODUCTION)
-        gr.Markdown("---")
+    if library_filter != "All":
+        filtered_df = filtered_df[filtered_df['Library'] == library_filter]
+    
+    return filtered_df
+
+custom_css = """
+body {
+    background-color: #f0fff0;
+    font-family: 'Roboto', sans-serif;
+}
+.gradio-container {
+    max-width: 1200px !important;
+}
+.gradio-container .prose * {
+    color: #00480a !important;
+}
+.gradio-container .prose h2,
+.gradio-container .prose h3 {
+    color: #00480a !important;
+}
+.tabs {
+    background-color: #e6ffd9;
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+.tab-nav {
+    background-color: #00480a;
+    padding: 10px;
+}
+.tab-nav button {
+    color: #cbff4d !important;
+    background-color: #006400;
+    border: none;
+    padding: 10px 20px;
+    margin-right: 5px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+.tab-nav button:hover {
+    background-color: #cbff4d;
+    color: #00480a !important;
+}
+.tab-nav button.selected {
+    background-color: #cbff4d;
+    color: #00480a !important;
+    font-weight: bold;
+}
+.gr-button-primary {
+    background-color: #00480a !important;
+    border-color: #00480a !important;
+    color: #cbff4d !important;
+}
+.gr-button-primary:hover {
+    background-color: #cbff4d !important;
+    color: #00480a !important;
+}
+"""
+
+with gr.Blocks(css=custom_css) as demo:
+    gr.HTML(DESCRIPTION)
+    gr.HTML(INTRODUCTION)
     
-    # Tabs for Leaderboard and Add New Entry
     with gr.Tabs():
-        with gr.TabItem("Leaderboard"):
+        with gr.TabItem("📊 Leaderboard"):
+            with gr.Row():
+                search_input = gr.Textbox(label="🔍 Search Model Name", placeholder="Enter model name...")
+                library_dropdown = gr.Dropdown(choices=["All"] + df['Library'].unique().tolist(), label="🏷️ Filter by Library", value="All")
+            
             leaderboard = gr.DataFrame(df)
+            
+            gr.HTML(HOW_WE_TESTED)
         
-        with gr.TabItem("Add New Entry"):
-            file_upload = gr.File(label="Upload CSV File")
-            submit_button = gr.Button("Add Entry")
+        with gr.TabItem("➕ Add New Entry"):
+            file_upload = gr.File(label="📁 Upload CSV File")
+            submit_button = gr.Button("📤 Add Entry", variant="primary")
             result = gr.Markdown()
 
-    # How we tested section at the bottom
-    with gr.Column():
-        gr.Markdown("---")
-        gr.Markdown(HOW_WE_TESTED)
-
     submit_button.click(
         add_new_entry,
         inputs=[file_upload],
         outputs=[leaderboard, result]
     )
 
+    search_input.change(filter_and_search, inputs=[search_input, library_dropdown], outputs=leaderboard)
+    library_dropdown.change(filter_and_search, inputs=[search_input, library_dropdown], outputs=leaderboard)
+
     demo.load(get_leaderboard_df, outputs=[leaderboard])
 
-demo.launch()
+if __name__ == "__main__":
+    demo.launch()