added tabs

about/custom_css.py

@@ -0,0 +1,107 @@
+custom_css = """
+#linguist-image img {
+    max-width: 300px;
+    height: auto;
+    margin: 0 auto;
+    display: block;
+}
+
+.custom-tab-button {
+        background-color: #004d99;
+        color: white;
+        padding: 8px 16px;
+        border-radius: 8px;
+        margin-right: 4px;
+    }
+
+.custom-tab-button:hover {
+    background-color: #0066cc;
+}
+.markdown-text {
+    font-size: 16px !important;
+}
+
+#models-to-add-text {
+    font-size: 18px !important;
+}
+
+#citation-button span {
+    font-size: 16px !important;
+}
+
+#citation-button textarea {
+    font-size: 16px !important;
+}
+
+#citation-button > label > button {
+    margin: 6px;
+    transform: scale(1.3);
+}
+
+#leaderboard-table {
+    margin-top: 15px
+}
+
+#leaderboard-table-lite {
+    margin-top: 15px
+}
+
+#search-bar-table-box > div:first-child {
+    background: none;
+    border: none;
+}
+ 
+#search-bar {
+    padding: 0px;
+}
+
+.tab-buttons button {
+    font-size: 20px;
+}
+
+#scale-logo {
+    border-style: none !important;
+    box-shadow: none;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 600px;
+}
+
+#scale-logo .download {
+    display: none;
+}
+#filter_type{
+    border: 0;
+    padding-left: 0;
+    padding-top: 0;
+}
+#filter_type label {
+    display: flex;
+}
+#filter_type label > span{
+    margin-top: var(--spacing-lg);
+    margin-right: 0.5em;
+}
+#filter_type label > .wrap{
+    width: 103px;
+}
+#filter_type label > .wrap .wrap-inner{  
+    padding: 2px;
+}
+#filter_type label > .wrap .wrap-inner input{
+    width: 1px
+}
+#filter-columns-type{
+    border:0;
+    padding:0.5;
+}
+#filter-columns-size{
+    border:0;
+    padding:0.5;
+}
+#box-filter > .form{
+    border: 0
+}
+"""
+

app.py

@@ -2,6 +2,7 @@ import gradio as gr
 import pandas as pd
 import os
 import markdown
+from about.custom_css import custom_css
 LEADERBOARD_DIR = "leaderboard_files"
 LEADERBOARD_FILE = os.path.join(LEADERBOARD_DIR, "leaderboard_data.csv")
 DESCRIPTION_FILE = "about/description.md"
@@ -52,87 +53,29 @@ def filter_leaderboard(selected_params, selected_shots, selected_data):
 
     return filtered[cols_to_show]
 
-with gr.Blocks() as demo:
+with gr.Blocks(css = custom_css) as demo:
     gr.HTML("<h1 style='text-align: center;'>🏆 Medical Classification Leaderboard - Beta</h1>")
     gr.Image("./about/linguist.png", elem_id="linguist-image", show_label=False)
-
-    # Add CSS to style the leaderboard table
-    demo.css = """
-    #linguist-image img {
-        max-width: 300px;
-        height: auto;
-        margin: 0 auto;
-        display: block;
-    }
-
-    /* Style the leaderboard label */
-    label[for*="leaderboard_table"] {
-        font-size: 24px;
-        font-weight: bold;
-        color: #2c3e50;
-        text-align: center;
-        margin-bottom: 10px;
-        display: block;
-    }
-
-    /* Table headers */
-    .dataframe thead th {
-        background-color: #4CAF50;
-        color: white;
-        font-size: 16px;
-        font-weight: bold;
-        padding: 12px;
-        text-align: left;
-        border-bottom: 2px solid #ccc;
-    }
-
-    /* Table cells */
-    .dataframe tbody td {
-        font-size: 14px;
-        padding: 10px 15px; /* Add horizontal spacing */
-        color: #333;
-    }
-
-    /* First and second columns spacing */
-    .dataframe tbody td:first-child,
-    .dataframe tbody td:nth-child(2) {
-        padding-left: 20px;
-        padding-right: 20px;
-    }
-
-    /* Zebra striping */
-    .dataframe tbody tr:nth-child(even) {
-        background-color: #f9f9f9;
-    }
-
-    /* Add hover effect */
-    .dataframe tbody tr:hover {
-        background-color: #e6f7ff;
-    }
-
-    /* Make sure the table is not squished */
-    .dataframe {
-        table-layout: auto;
-        width: 100%;
-        border-collapse: collapse;
-    }
-    """
-
     gr.HTML(load_description(DESCRIPTION_FILE))
-
-    with gr.Row():
-        with gr.Column():
-            column_selector_data = gr.CheckboxGroup(label="📊 Select Columns to Display - Dataset", choices=["Chexpert Plus", "CT Rate"], value=["Chexpert Plus", "CT Rate"])
-    
-        with gr.Column():
-            shot_filter = gr.CheckboxGroup(label="Select Shot Type", choices=shot_options, value=shot_options)
-            param_filter = gr.CheckboxGroup(choices=parameter_options, label="Filter by Parameter Count", value=parameter_options)
-
-    initial_data = filter_leaderboard(parameter_options, shot_options, ["Chexpert Plus", "CT Rate"])
-    leaderboard_table = gr.Dataframe(value=initial_data, label="🏅 Leaderboard", interactive=False)
-
-    column_selector_data.change(filter_leaderboard, inputs=[param_filter, shot_filter, column_selector_data], outputs=leaderboard_table)
-    param_filter.change(fn=filter_leaderboard, inputs=[param_filter, shot_filter, column_selector_data], outputs=leaderboard_table)
-    shot_filter.change(fn=filter_leaderboard, inputs=[param_filter, shot_filter, column_selector_data], outputs=leaderboard_table)
-
+    with gr.Tab("🏅 LLM Benchmark", elem_classes="custom-tab-buttons") as tabs:
+        with gr.Row():
+            with gr.Column():
+                column_selector_data = gr.CheckboxGroup(label="📊 Select Columns to Display - Dataset", choices=["Chexpert Plus", "CT Rate"], value=["Chexpert Plus", "CT Rate"])
+        
+            with gr.Column():
+                shot_filter = gr.CheckboxGroup(label="Select Shot Type", choices=shot_options, value=shot_options)
+                param_filter = gr.CheckboxGroup(choices=parameter_options, label="Filter by Parameter Count", value=parameter_options)
+
+        initial_data = filter_leaderboard(parameter_options, shot_options, ["Chexpert Plus", "CT Rate"])
+        leaderboard_table = gr.Dataframe(value=initial_data, label="🏅 Leaderboard", interactive=False, elem_id="leaderboard-table")
+        column_selector_data.change(filter_leaderboard, inputs=[param_filter, shot_filter, column_selector_data], outputs=leaderboard_table)
+        param_filter.change(fn=filter_leaderboard, inputs=[param_filter, shot_filter, column_selector_data], outputs=leaderboard_table)
+        shot_filter.change(fn=filter_leaderboard, inputs=[param_filter, shot_filter, column_selector_data], outputs=leaderboard_table)
+
+    with gr.Tab("🚀 Submit Prompt or model here! ", elem_classes="custom-tab-buttons"):
+        gr.Markdown("""
+        This is a placeholder for the prompt submission feature.
+        You can add your own functionality here.
+        """)
+        # Add your prompt submission code here
 demo.launch()