Update app.py

app.py

@@ -1,7 +1,8 @@
-
 import gradio as gr
 
 from src.helper import *
+
+
 # Custom CSS to replicate the Google-style card design from the image
 custom_head_html = """
 <link rel="stylesheet" href="https://africa.dlnlp.ai/sahara/font-awesome/css/font-awesome.min.css">
@@ -25,7 +26,40 @@ new_header_html = """
 """
 
 google_style_css = """
+/* Citation Block */
+        .citation-block {
+            position: relative;
+            background-color: #FDF6E3; /* Light cream background */
+            border-radius: 8px;
+            padding: 25px;
+        }
+        .citation-block pre {
+            background-color: transparent;
+            border: none;
+            padding: 0;
+            /* font-size: 14px; */
+            white-space: pre-wrap;
+            word-break: break-all;
+        }
+        .citation-block .btn-copy {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background-color: #D97706;
+            border-color: #c56a05;
+            color: white;
+        }
+        .citation-block .btn-copy:hover, .citation-block .btn-copy:focus {
+            background-color: #c56a05;
+            color: white;
+        }
 
+
+.fillable.svelte-15jxnnn.svelte-15jxnnn:not(.fill_width) {
+       /* min-width: 400px !important; */
+        max-width: 1580px !important;
+    }
+  
 .flat-navy-button {
     background-color: #117b75 !important; /* Navy Blue */
     color: #fff !important;
@@ -38,7 +72,7 @@ google_style_css = """
     background-color: #117b75 !important; /* Lighter navy for hover */
     color: #e8850e !important;
 }
-div.gradio-container-5-37-0{
+div[class*="gradio-container"] {
 background:#FFFBF5 !important;
 }
 
@@ -67,12 +101,12 @@ div.svelte-1nguped {
         }
         .content-card h2 {
           font-family: "Rubik", sans-serif;
-  font-size: 30px;
-  font-weight: 600;
-  line-height: 1.25;
-  letter-spacing: -1px;
-  color: #2f3b7d;
-  text-transform:none;
+          font-size: 30px;
+          font-weight: 600;
+          line-height: 1.25;
+          letter-spacing: -1px;
+          color: #2f3b7d;
+          text-transform:none;
 
             /* font-size: 30px;
             font-weight: bold;
@@ -80,6 +114,13 @@ div.svelte-1nguped {
             margin-top: 0;
             margin-bottom: 20px; */
         }
+        .content-card h3 {
+          font-size: 20px;
+          color: #2f3b7d;
+        }
+        .content-card h3 .title {
+          color: #7d3561;
+        }
         .content-card p {
             /* font-size: 18px; */
             /* line-height: 1.7; */
@@ -131,17 +172,17 @@ button.svelte-1tcem6n.svelte-1tcem6n {
     background-color: #7d3561 !important;
 }
 
-.gradio-container-5-37-0 .prose table,
-.gradio-container-5-37-0 .prose tr,
-.gradio-container-5-37-0 .prose td,
-.gradio-container-5-37-0 .prose th {
+div[class*="gradio-container"]  .prose table,
+div[class*="gradio-container"]  .prose tr,
+div[class*="gradio-container"]  .prose td,
+div[class*="gradio-container"]  .prose th {
     border: 0 !important;
     border-top: 2px solid #dca02a;
     border-bottom: 2px solid #dca02a;
 }
 
 
-.gradio-container-5-37-0 .prose table {
+div[class*="gradio-container"]  .prose table {
     border-top: 2px solid #dca02a !important;
     border-bottom: 2px solid #dca02a !important;
     margin-bottom:20px;
@@ -151,10 +192,20 @@ button.svelte-1tcem6n.svelte-1tcem6n {
     border-collapse: collapse;
     table-layout: fixed;
 }
-.gradio-container-5-37-0 .prose thead tr {
+div[class*="gradio-container"]  .prose thead tr {
     border-bottom: 2px solid #dca02a !important;
 }
-.gradio-container-5-37-0 .prose th {
+div[class*="gradio-container"] .prose th .rotate_div {
+transform: rotate(-45deg) !important; 
+color: #7d3561;
+padding-top: 10px !important;
+padding-bottom: 5px !important;
+font-weight: None !important;
+font-size: 12px !important;
+/*height: 30px !important;  Give the cell enough height for the rotated text */
+}
+div[class*="gradio-container"]  .prose th {
+    /* transform: rotate(-90deg) !important; */
     color: #7d3561;
     font-weight: bold;
     /* font-size: 20px; */
@@ -162,24 +213,25 @@ button.svelte-1tcem6n.svelte-1tcem6n {
     vertical-align: middle;
     border: 0 !important;
 }
-.gradio-container-5-37-0 .prose td {
+div[class*="gradio-container"]  .prose td {
     /* font-size: 18px; */
     padding: 8px 5px;
     border: 0 !important;
     vertical-align: middle;
 }
-.gradio-container-5-37-0 .prose th:first-child,
-.gradio-container-5-37-0 .prose td:first-child {
+div[class*="gradio-container"]  .prose th:first-child,
+div[class*="gradio-container"]  .prose td:first-child {
+    transform: rotate(0deg) !important;
     min-width: 400px !important;
-    max-width: 400px !important;
+    /* max-width: 400px !important; */
     width:400px !important;
     text-align: left !important;
 }
-.gradio-container-5-37-0 .prose th:not(:first-child),
-.gradio-container-5-37-0 .prose td:not(:first-child) {
+div[class*="gradio-container"]  .prose th:not(:first-child),
+div[class*="gradio-container"]  .prose td:not(:first-child) {
     min-width: 90px;
-    max-width: 140px;
-    width: auto;
+    /* max-width: 140px; */
+    width:auto !important;
     text-align: center;
 }
 """
@@ -189,64 +241,174 @@ introduction_text = """
 """
 # with gr.Blocks(title="Sahara Leaderboard", css=custom_css) as demo:
 # with gr.Blocks(title="Sahara Leaderboard") as demo:
-with gr.Blocks(css=google_style_css) as demo:
+with gr.Blocks(title="Sahara Benchmark Leaderboards", css=google_style_css) as demo:
     # Use elem_classes to apply our custom CSS to this group
     gr.HTML(new_header_html)
     # === UPDATED BUTTONS START ===
     with gr.Row():
         gr.Button("Official Website", link="https://africa.dlnlp.ai/sahara", elem_classes=['flat-navy-button'])
-        gr.Button("ACL 2025 Paper", link="https://arxiv.org/abs/2502.19582", elem_classes=['flat-navy-button'])
+        gr.Button("ACL 2025 Paper", link="https://aclanthology.org/2025.acl-long.1572", elem_classes=['flat-navy-button'])
         gr.Button("Tasks", link="https://africa.dlnlp.ai/sahara/tasks", elem_classes=['flat-navy-button'])
-        gr.Button("Submission Instructions", link="https://africa.dlnlp.ai/sahara/instructions", elem_classes=['flat-navy-button'])
-        gr.Button("New Submission", link="https://africa.dlnlp.ai/sahara/submit", elem_classes=['flat-navy-button'])
-        gr.Button("GitHub Repo", link="https://github.com/UBC-NLP/sahara", elem_classes=['flat-navy-button'])
+        # gr.Button("Submission Instructions", link="https://africa.dlnlp.ai/sahara/instructions", elem_classes=['flat-navy-button'])
+        # gr.Button("New Submission", link="https://africa.dlnlp.ai/sahara/submit", elem_classes=['flat-navy-button'])
+        # gr.Button("GitHub Repo", link="https://github.com/UBC-NLP/sahara", elem_classes=['flat-navy-button'])
+        # These buttons will now show an alert message
+        # submission_btn = gr.Button("Submission Instructions", elem_classes=['flat-navy-button'])
+        # new_submission_btn = gr.Button("New Submission", elem_classes=['flat-navy-button'])
+        # github_btn = gr.Button("GitHub Repo", elem_classes=['flat-navy-button'])
+        # # Function to display the alert
+        # def show_coming_soon_alert():
+        #     gr.Info("Stay tuned! It will be ready soon.")
+        
+        # # Link the click event of each button to the alert function
+        # submission_btn.click(fn=show_coming_soon_alert)
+        # new_submission_btn.click(fn=show_coming_soon_alert)
+        # github_btn.click(fn=show_coming_soon_alert)
     # === UPDATED BUTTONS END ===
-    # gr.Markdown(introduction_text)
-    # with gr.Group(elem_classes="content-card"):
-    #     gr.Markdown(introduction_text)
-    #     gr.Markdown(
-    #     "HI # 🏆 Model Evaluation Leaderboard (Clustered, Private HF Dataset)\n"
-    #     "- Language dropdown uses names, not ISO codes; e.g. Swahili = (swa+swh results).\n"
-    #     "- Tabs by cluster; each cluster tab shows only its tasks, with fixed column width via CSS HTML tables."
-    # )
+    
     with gr.Group(elem_classes="content-card"):
         gr.Markdown("<br>")
-        with gr.Tabs():
+        # Hidden component to trigger JavaScript on load
+        # url_trigger = gr.Textbox(visible=False)
+        
+        # State to hold URL parameters
+        # url_params_state = gr.State({})
+        
+        with gr.Tabs() as tabs:
             # Main leaderboard
-            with gr.Tab("Main Leaderboard"):
+            with gr.Tab("Main Leaderboard", id="main"):
                 gr.HTML("<br><br><center><h2>Main Leaderboard</h2></center><br>")
                 gr.HTML(df_to_html(main_overall_tab))
             # Task Clusters leaderboards
-            with gr.Tab("Task-Clusters Leaderboards"):
-                gr.HTML("<br><br><center><h2>Task-Clusters Leaderboards</h2></center><br>")
+            with gr.Tab("Task-Cluster Leaderboard", id="clusters"):
+                gr.HTML("<br><br><center><h2>Task-Cluster Leaderboard</h2></center><br>")
                 CLUSTERS_NAME=[cname for cname, cdf in cluster_tabs.items()]
+                cname = CLUSTERS_NAME[0]
+                initial_cluster_title_html = f"<h3><span class='title'>Task-Cluster name:</span> {cname}</span></h3>"
+
+                # 2. Create a variable for the title component so it can be updated.
+                cluster_title_component = gr.HTML(initial_cluster_title_html)
+                
+                clusters_dropdown = gr.Dropdown(
+                    choices=CLUSTERS_NAME, 
+                    label="Select Task-CLuster", 
+                    interactive=True, 
+                    elem_id="cluster_dropdown",
+                    value=CLUSTERS_NAME[0]  # Set default value
+                )
                 
-                clusters_dropdown = gr.Dropdown(choices=CLUSTERS_NAME, label="Select Task-CLuster", interactive=True)
                 def get_claster_table(cluster_name):
                     for cname, cdf in cluster_tabs.items():
                         if cname== cluster_name:
                             return cdf
+                    return None
+                    
                 cluster_table_component = gr.HTML(df_to_html(get_claster_table(CLUSTERS_NAME[0])) if CLUSTERS_NAME else "<b>No cluser found</b>")
+                
                 def update_cluster_table(cluster_name):
                     df = get_claster_table(cluster_name)
-                    return df_to_html(df)
-                clusters_dropdown.change(update_cluster_table, clusters_dropdown, cluster_table_component)
+                    cluster_title_html = f"<h3><span class='title'>Task-Cluster name:</span> {cluster_name}</span></h3>"
+                    return cluster_title_html, df_to_html(df) if df is not None else "<b>No data found</b>"
                 
+                clusters_dropdown.change(update_cluster_table, clusters_dropdown, outputs=[cluster_title_component, cluster_table_component])
                 
-            # for cname, cdf in cluster_tabs.items():
-            #     with gr.Tab(f"{cname}"):
-            #         gr.HTML(df_to_html(cdf))
             # Languages Leaderboards
-            with gr.Tab("Language-Specific Leaderboards"):
-                gr.HTML("<br><br><center><h2>Language-Specific Leaderboards</h2></center><br>")
+            # Task-Specific Leaderboards
+            with gr.Tab("Task-Specific Leaderboard", id="tasks"):
+                # --- MODIFIED ---
+                # 1. Define the initial title based on the first task in the list.
+                gr.HTML("<br><br><center><h2>Task-Specific Leaderboard (per langauge)</h2></center><br>")
+                initial_task_name = TASK_NAME_LIST[0]
+                tname=initial_task_name.split(' (')[0]
+                tid=initial_task_name.split(' (')[-1].split(')')[0]
+                initial_title_html = f"<h3><span class='title'>Task name:</span> {tname}<br> <span class='title'>Task identifier:</span> {tid}</h3>"
+
+                # 2. Create a variable for the title component so it can be updated.
+                task_title_component = gr.HTML(initial_title_html)
+                
+                # Dropdown for selecting the task (remains the same)
+                task_dropdown = gr.Dropdown(choices=TASK_NAME_LIST, label="Select Task", interactive=True, value=initial_task_name)
+                
+                # --- MODIFIED ---
+                # 3. Modify the update function to return TWO values: the new title and the new table.
+                def update_task_table(task_name_with_id):
+                    # Create the new dynamic title HTML
+                    tname=task_name_with_id.split(' (')[0]
+                    tid=task_name_with_id.split(' (')[-1].split(')')[0]
+                    new_title = f"<h3><span class='title'>Task name:</span> {tname}<br> <span class='title'>Task identifier:</span> {tid}</h3>"
+                    # new_title = f"<br><br><center><h2>{task_name_with_id} Leaderboard</h2></center><br>"
+                    
+                    # Parse the task key to get the data
+                    task_key = task_name_with_id.split('(')[-1].strip(')')
+                    df = get_task_leaderboard(task_key)
+                    
+                    # Return both the new title and the HTML for the table
+                    return new_title, df_to_html(df)
+
+                # Initial table display (remains the same)
+                initial_task_key = initial_task_name.split('(')[-1].strip(')')
+                task_table_component = gr.HTML(df_to_html(get_task_leaderboard(initial_task_key)))
+
+                # --- MODIFIED ---
+                # 4. Update the .change() event to send outputs to BOTH the title and table components.
+                task_dropdown.change(
+                    fn=update_task_table, 
+                    inputs=task_dropdown, 
+                    outputs=[task_title_component, task_table_component]
+                )
+                
+            with gr.Tab("Language-Specific Leaderboard", id="langs"):
+                gr.HTML("<br><br><center><h2>Language-Specific Leaderboard (per task)</h2></center><br>")
+                lang_name=LANG_NAME_LIST[0]
+                initial_lang_title_html = f"<h3><span class='title'>Language name:</span> {lang_name} <br> <span class='title'>Language ISO-3:</span> {next(iter(LANGNAME2ISOS.get(lang_name)))} </h3>"
+
+                # 2. Create a variable for the title component so it can be updated.
+                lang_title_component = gr.HTML(initial_lang_title_html)
                 lang_dropdown = gr.Dropdown(choices=LANG_NAME_LIST, label="Select Language", interactive=True)
                 lang_table_component = gr.HTML(df_to_html(get_lang_table(LANG_NAME_LIST[0])) if LANG_NAME_LIST else "<b>No languages found</b>")
                 def update_lang_table(lang_name):
                     df = get_lang_table(lang_name)
-                    return df_to_html(df)
-                lang_dropdown.change(update_lang_table, lang_dropdown, lang_table_component)
+                    new_title = f"<h3><span class='title'>Language name:</span> {lang_name} <br> <span class='title'>Language ISO-3:</span> {next(iter(LANGNAME2ISOS.get(lang_name)))}</h3>"
+                    return new_title, df_to_html(df)
+                lang_dropdown.change(update_lang_table, lang_dropdown,  outputs=[lang_title_component, lang_table_component])
+            # --- NEW TAB FOR MODEL-SPECIFIC LEADERBOARD ---
+            with gr.Tab("Model-Specific Leaderboard", id="models"):
+                gr.HTML("<br><br><center><h2>Model-Specific Leaderboard (per task)</h2></center><br>")
+                
+                initial_model_name = MODEL_NAME_LIST[0]
+                initial_model_title_html = f"<h3><span class='title'>Model name:</span> {initial_model_name}</h3>"
+        
+                # Component to display the dynamic title
+                model_title_component = gr.HTML(initial_model_title_html)
+                
+                # Dropdown for selecting the model
+                model_dropdown = gr.Dropdown(
+                    choices=MODEL_NAME_LIST, 
+                    label="Select Model", 
+                    interactive=True,
+                    value=initial_model_name
+                )
+                
+                # Component to display the model's performance table
+                model_table_component = gr.HTML(df_to_html(get_model_table(initial_model_name)))
+        
+                # Function to update the title and table based on dropdown selection
+                def update_model_table(model_name):
+                    df = get_model_table(model_name)
+                    new_title = f"<h3><span class='title'>Model name:</span> {model_name}</h3>"
+                    return new_title, df_to_html(df)
+        
+                # Link the dropdown's change event to the update function
+                model_dropdown.change(
+                    fn=update_model_table, 
+                    inputs=model_dropdown, 
+                    outputs=[model_title_component, model_table_component]
+                )
+    with gr.Group(elem_classes="content-card"):
+        gr.Markdown("<br>")
+        gr.HTML("<h2>Citation</h2>If you use the Sahara benchmark for your scientific publication, or if you find the resources in this website useful, please cite our <a href='https://africa.dlnlp.ai/sahara/'>ACL2025 paper </a>as well as the papers of the <a href='https://africa.dlnlp.ai/sahara/tasks'>original authors</a>.")
     gr.HTML("<center><img src='https://africa.dlnlp.ai/sahara//img/sahara_web_sponsers.jpg' width='25%'> </center>")
-   
 
+    
 if __name__ == "__main__":
     demo.launch(share=True)