Update app.py

app.py

@@ -27,12 +27,13 @@ tasks = [
     'summarization.csv'
 ]
 
+### HELPER FUNCTIONS ###
+
 def format_stars(score):
     try:
         score_int = int(score)
     except Exception:
         score_int = 0
-    # Render stars in green with a slightly larger font.
     return f'<span style="color: #3fa45bff; font-size:1.5em;">{"★" * score_int}</span>'
 
 def make_link(mname):
@@ -41,7 +42,6 @@ def make_link(mname):
     return f'<a href="https://huggingface.co/{mname}" target="_blank">{display_name}</a>'
 
 def extract_link_text(html_link):
-    """Extracts the inner text from an HTML link."""
     start = html_link.find('>') + 1
     end = html_link.rfind('</a>')
     if start > 0 and end > start:
@@ -50,13 +50,7 @@ def extract_link_text(html_link):
         return html_link
 
 def generate_html_table_from_df(df):
-    """
-    Generates an HTML table with four columns:
-      - Model (with link)
-      - Provider (extracted from the model field)
-      - GPU Energy (Wh) plus a horizontal bar
-      - Score (as stars)
-    """
+    # Compute a static width for the Model column based on the longest model name.
     if not df.empty:
         max_length = max(len(extract_link_text(link)) for link in df['Model'])
     else:
@@ -70,7 +64,7 @@ def generate_html_table_from_df(df):
     html += '<th style="text-align: left; padding: 8px;" title="Model name with link to Hugging Face">Model</th>'
     html += '<th style="text-align: left; padding: 8px;" title="AI Provider extracted from the model name">Provider</th>'
     html += '<th style="text-align: left; padding: 8px;" title="GPU energy consumed in Watt-hours for 1,000 queries">GPU Energy (Wh)</th>'
-    html += '<th style="text-align: left; padding: 8px;" title="Energy efficiency score">Score</th>'
+    html += '<th style="text-align: left; padding: 8px;" title="Energy efficiency score (stars)">Score</th>'
     html += '</tr></thead>'
     html += '<tbody>'
     for _, row in df.iterrows():
@@ -91,9 +85,30 @@ def generate_html_table_from_df(df):
     html += '</tbody></table>'
     return f'<div class="table-container">{html}</div>'
 
-# --- Functions for creating the efficiency difference callout cards ---
-def get_efficiency_diff_for_all():
-    """Calculates the efficiency difference across all models."""
+def process_df(task, sort_order="Low to High", filter_fn=None):
+    df = pd.read_csv('data/energy/' + task)
+    if df.columns[0].startswith("Unnamed:"):
+        df = df.iloc[:, 1:]
+    df['energy_score'] = df['energy_score'].astype(int)
+    df['gpu_energy_numeric'] = pd.to_numeric(df['total_gpu_energy'], errors='raise') * 1000
+    if filter_fn is not None:
+        df = filter_fn(df)
+    df['Provider'] = df['model'].apply(lambda x: str(x).split('/')[0])
+    df['Model'] = df['model'].apply(make_link)
+    df['Score'] = df['energy_score'].apply(format_stars)
+    ascending = True if sort_order == "Low to High" else False
+    df = df.sort_values(by='gpu_energy_numeric', ascending=ascending)
+    return df
+
+def compute_efficiency_ratio(df):
+    if df.empty:
+        return 1
+    min_val = df['gpu_energy_numeric'].min()
+    max_val = df['gpu_energy_numeric'].max()
+    ratio = max_val / min_val if min_val > 0 else 1
+    return ratio
+
+def get_global_callout():
     all_df = pd.DataFrame()
     for task in tasks:
         df = pd.read_csv('data/energy/' + task)
@@ -101,41 +116,10 @@ def get_efficiency_diff_for_all():
             df = df.iloc[:, 1:]
         df['gpu_energy_numeric'] = pd.to_numeric(df['total_gpu_energy'], errors='raise') * 1000
         all_df = pd.concat([all_df, df], ignore_index=True)
-    if all_df.empty:
-        return "<div>No data available</div>"
-    min_val = all_df['gpu_energy_numeric'].min()
-    max_val = all_df['gpu_energy_numeric'].max()
-    diff = max_val - min_val
-    # A colorful gradient card for global stats.
-    return (
-        f"<div style='background: linear-gradient(135deg, #f6d365, #fda085); padding: 15px; "
-        f"border-radius: 8px; margin: 10px; color: #333;'>"
-        f"<strong>All Models:</strong> Efficiency difference is <strong>{diff:.2f} Wh</strong> "
-        f"(min: {min_val:.2f} Wh, max: {max_val:.2f} Wh)"
-        f"</div>"
-    )
-
-def get_efficiency_diff_for_task(task_filename):
-    """Calculates the efficiency difference for models in a given task."""
-    df = pd.read_csv('data/energy/' + task_filename)
-    if df.columns[0].startswith("Unnamed:"):
-        df = df.iloc[:, 1:]
-    df['gpu_energy_numeric'] = pd.to_numeric(df['total_gpu_energy'], errors='raise') * 1000
-    if df.empty:
-        return "<div>No data available</div>"
-    min_val = df['gpu_energy_numeric'].min()
-    max_val = df['gpu_energy_numeric'].max()
-    diff = max_val - min_val
-    # A different gradient for the selected task
-    return (
-        f"<div style='background: linear-gradient(135deg, #a8e063, #56ab2f); padding: 15px; "
-        f"border-radius: 8px; margin: 10px; color: #333;'>"
-        f"<strong>Selected Task:</strong> Efficiency difference is <strong>{diff:.2f} Wh</strong> "
-        f"(min: {min_val:.2f} Wh, max: {max_val:.2f} Wh)"
-        f"</div>"
-    )
+    ratio = compute_efficiency_ratio(all_df)
+    return f'<div style="background-color: #f2f2f2; padding: 10px; border-radius: 5px;">Energy efficiency difference of <strong>{round(ratio, 1)}x</strong> for all models in leaderboard.</div>'
 
-# --- Function to zip all CSV files (unchanged) ---
+### ZIP DOWNLOAD (unchanged) ###
 def zip_csv_files():
     data_dir = "data/energy"
     zip_filename = "data.zip"
@@ -159,54 +143,8 @@ def get_zip_data_link():
     )
     return href
 
-# --- Modified functions to include a sort_order parameter ---
-def get_model_names_html(task, sort_order="Low to High"):
-    df = pd.read_csv('data/energy/' + task)
-    if df.columns[0].startswith("Unnamed:"):
-        df = df.iloc[:, 1:]
-    df['energy_score'] = df['energy_score'].astype(int)
-    df['gpu_energy_numeric'] = pd.to_numeric(df['total_gpu_energy'], errors='raise') * 1000
-    # Add Provider column (text before the slash in the model field)
-    df['Provider'] = df['model'].apply(lambda x: str(x).split('/')[0])
-    df['Model'] = df['model'].apply(make_link)
-    df['Score'] = df['energy_score'].apply(format_stars)
-    ascending = (sort_order == "Low to High")
-    df = df.sort_values(by='gpu_energy_numeric', ascending=ascending)
-    return generate_html_table_from_df(df)
-
-def get_all_model_names_html(sort_order="Low to High"):
-    all_df = pd.DataFrame()
-    for task in tasks:
-        df = pd.read_csv('data/energy/' + task)
-        if df.columns[0].startswith("Unnamed:"):
-            df = df.iloc[:, 1:]
-        df['energy_score'] = df['energy_score'].astype(int)
-        df['gpu_energy_numeric'] = pd.to_numeric(df['total_gpu_energy'], errors='raise') * 1000
-        df['Provider'] = df['model'].apply(lambda x: str(x).split('/')[0])
-        df['Model'] = df['model'].apply(make_link)
-        df['Score'] = df['energy_score'].apply(format_stars)
-        all_df = pd.concat([all_df, df], ignore_index=True)
-    all_df = all_df.drop_duplicates(subset=['model'])
-    ascending = (sort_order == "Low to High")
-    all_df = all_df.sort_values(by='gpu_energy_numeric', ascending=ascending)
-    return generate_html_table_from_df(all_df)
-
-def get_text_generation_model_names_html(model_class, sort_order="Low to High"):
-    df = pd.read_csv('data/energy/text_generation.csv')
-    if df.columns[0].startswith("Unnamed:"):
-        df = df.iloc[:, 1:]
-    if 'class' in df.columns:
-        df = df[df['class'] == model_class]
-    df['energy_score'] = df['energy_score'].astype(int)
-    df['gpu_energy_numeric'] = pd.to_numeric(df['total_gpu_energy'], errors='raise') * 1000
-    df['Provider'] = df['model'].apply(lambda x: str(x).split('/')[0])
-    df['Model'] = df['model'].apply(make_link)
-    df['Score'] = df['energy_score'].apply(format_stars)
-    ascending = (sort_order == "Low to High")
-    df = df.sort_values(by='gpu_energy_numeric', ascending=ascending)
-    return generate_html_table_from_df(df)
+### UPDATE FUNCTIONS FOR TASKS (returning both callout and table) ###
 
-# --- Update functions for dropdown changes ---
 def update_text_generation(selected_display, sort_order):
     mapping = {
         "A (Single Consumer GPU) <20B parameters": "A",
@@ -214,60 +152,102 @@ def update_text_generation(selected_display, sort_order):
         "C (Multiple Cloud GPUs) >66B parameters": "C"
     }
     model_class = mapping.get(selected_display, "A")
-    table_html = get_text_generation_model_names_html(model_class, sort_order)
-    # Update the task-specific callout for text generation
-    task_diff_html = get_efficiency_diff_for_task('text_generation.csv')
-    return table_html, task_diff_html
+    def filter_fn(df):
+        if 'class' in df.columns:
+            return df[df['class'] == model_class]
+        return df
+    df = process_df('text_generation.csv', sort_order, filter_fn)
+    ratio = compute_efficiency_ratio(df)
+    callout = f'<div style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; margin-bottom:10px;">Energy efficiency difference of <strong>{round(ratio, 1)}x</strong> for all models in task.</div>'
+    table_html = generate_html_table_from_df(df)
+    return callout, table_html
 
 def update_image_generation(sort_order):
-    table_html = get_model_names_html('image_generation.csv', sort_order)
-    task_diff_html = get_efficiency_diff_for_task('image_generation.csv')
-    return table_html, task_diff_html
+    df = process_df('image_generation.csv', sort_order)
+    ratio = compute_efficiency_ratio(df)
+    callout = f'<div style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; margin-bottom:10px;">Energy efficiency difference of <strong>{round(ratio, 1)}x</strong> for all models in task.</div>'
+    table_html = generate_html_table_from_df(df)
+    return callout, table_html
 
 def update_text_classification(sort_order):
-    table_html = get_model_names_html('text_classification.csv', sort_order)
-    task_diff_html = get_efficiency_diff_for_task('text_classification.csv')
-    return table_html, task_diff_html
+    df = process_df('text_classification.csv', sort_order)
+    ratio = compute_efficiency_ratio(df)
+    callout = f'<div style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; margin-bottom:10px;">Energy efficiency difference of <strong>{round(ratio, 1)}x</strong> for all models in task.</div>'
+    table_html = generate_html_table_from_df(df)
+    return callout, table_html
 
 def update_image_classification(sort_order):
-    table_html = get_model_names_html('image_classification.csv', sort_order)
-    task_diff_html = get_efficiency_diff_for_task('image_classification.csv')
-    return table_html, task_diff_html
+    df = process_df('image_classification.csv', sort_order)
+    ratio = compute_efficiency_ratio(df)
+    callout = f'<div style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; margin-bottom:10px;">Energy efficiency difference of <strong>{round(ratio, 1)}x</strong> for all models in task.</div>'
+    table_html = generate_html_table_from_df(df)
+    return callout, table_html
 
 def update_image_captioning(sort_order):
-    table_html = get_model_names_html('image_captioning.csv', sort_order)
-    task_diff_html = get_efficiency_diff_for_task('image_captioning.csv')
-    return table_html, task_diff_html
+    df = process_df('image_captioning.csv', sort_order)
+    ratio = compute_efficiency_ratio(df)
+    callout = f'<div style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; margin-bottom:10px;">Energy efficiency difference of <strong>{round(ratio, 1)}x</strong> for all models in task.</div>'
+    table_html = generate_html_table_from_df(df)
+    return callout, table_html
 
 def update_summarization(sort_order):
-    table_html = get_model_names_html('summarization.csv', sort_order)
-    task_diff_html = get_efficiency_diff_for_task('summarization.csv')
-    return table_html, task_diff_html
+    df = process_df('summarization.csv', sort_order)
+    ratio = compute_efficiency_ratio(df)
+    callout = f'<div style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; margin-bottom:10px;">Energy efficiency difference of <strong>{round(ratio, 1)}x</strong> for all models in task.</div>'
+    table_html = generate_html_table_from_df(df)
+    return callout, table_html
 
 def update_asr(sort_order):
-    table_html = get_model_names_html('asr.csv', sort_order)
-    task_diff_html = get_efficiency_diff_for_task('asr.csv')
-    return table_html, task_diff_html
+    df = process_df('asr.csv', sort_order)
+    ratio = compute_efficiency_ratio(df)
+    callout = f'<div style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; margin-bottom:10px;">Energy efficiency difference of <strong>{round(ratio, 1)}x</strong> for all models in task.</div>'
+    table_html = generate_html_table_from_df(df)
+    return callout, table_html
 
 def update_object_detection(sort_order):
-    table_html = get_model_names_html('object_detection.csv', sort_order)
-    task_diff_html = get_efficiency_diff_for_task('object_detection.csv')
-    return table_html, task_diff_html
+    df = process_df('object_detection.csv', sort_order)
+    ratio = compute_efficiency_ratio(df)
+    callout = f'<div style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; margin-bottom:10px;">Energy efficiency difference of <strong>{round(ratio, 1)}x</strong> for all models in task.</div>'
+    table_html = generate_html_table_from_df(df)
+    return callout, table_html
 
 def update_sentence_similarity(sort_order):
-    table_html = get_model_names_html('sentence_similarity.csv', sort_order)
-    task_diff_html = get_efficiency_diff_for_task('sentence_similarity.csv')
-    return table_html, task_diff_html
+    df = process_df('sentence_similarity.csv', sort_order)
+    ratio = compute_efficiency_ratio(df)
+    callout = f'<div style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; margin-bottom:10px;">Energy efficiency difference of <strong>{round(ratio, 1)}x</strong> for all models in task.</div>'
+    table_html = generate_html_table_from_df(df)
+    return callout, table_html
 
 def update_extractive_qa(sort_order):
-    table_html = get_model_names_html('question_answering.csv', sort_order)
-    task_diff_html = get_efficiency_diff_for_task('question_answering.csv')
-    return table_html, task_diff_html
+    df = process_df('question_answering.csv', sort_order)
+    ratio = compute_efficiency_ratio(df)
+    callout = f'<div style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; margin-bottom:10px;">Energy efficiency difference of <strong>{round(ratio, 1)}x</strong> for all models in task.</div>'
+    table_html = generate_html_table_from_df(df)
+    return callout, table_html
 
 def update_all_tasks(sort_order):
-    return get_all_model_names_html(sort_order)
+    # Process all CSV files together
+    all_df = pd.DataFrame()
+    for task in tasks:
+        df = pd.read_csv('data/energy/' + task)
+        if df.columns[0].startswith("Unnamed:"):
+            df = df.iloc[:, 1:]
+        df['energy_score'] = df['energy_score'].astype(int)
+        df['gpu_energy_numeric'] = pd.to_numeric(df['total_gpu_energy'], errors='raise') * 1000
+        df['Provider'] = df['model'].apply(lambda x: str(x).split('/')[0])
+        df['Model'] = df['model'].apply(make_link)
+        df['Score'] = df['energy_score'].apply(format_stars)
+        all_df = pd.concat([all_df, df], ignore_index=True)
+    all_df = all_df.drop_duplicates(subset=['model'])
+    ascending = True if sort_order == "Low to High" else False
+    all_df = all_df.sort_values(by='gpu_energy_numeric', ascending=ascending)
+    ratio = compute_efficiency_ratio(all_df)
+    callout = f'<div style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; margin-bottom:10px;">Energy efficiency difference of <strong>{round(ratio, 1)}x</strong> for all models in leaderboard.</div>'
+    table_html = generate_html_table_from_df(all_df)
+    return callout, table_html
+
+### BUILD THE GRADIO INTERFACE ###
 
-# --- Build the Gradio Interface ---
 demo = gr.Blocks(css="""
 .gr-dataframe table {
     table-layout: fixed;
@@ -287,7 +267,7 @@ demo = gr.Blocks(css="""
 """)
 
 with demo:
-    # --- Header Links ---
+    # --- Header Links (evenly spaced) ---
     gr.HTML(f'''
     <div style="display: flex; justify-content: space-evenly; align-items: center; margin-bottom: 20px;">
         <a href="https://huggingface.co/spaces/AIEnergyScore/submission_portal" style="text-decoration: none; font-weight: bold; font-size: 1.1em; color: black; font-family: 'Inter', sans-serif;">Submission Portal</a>
@@ -299,23 +279,22 @@ with demo:
     </div>
     ''')
 
-    # --- Logo and Subtitle ---
+    # --- Centered Logo ---
     gr.HTML('''
-    <div style="margin-top: 0px; text-align: center;">
+    <div style="text-align: center; margin-top: 0px;">
         <img src="https://huggingface.co/spaces/AIEnergyScore/Leaderboard/resolve/main/logo.png" 
              alt="Logo" 
-             style="max-width: 300px; height: auto; margin-bottom: 10px;">
+             style="display: inline-block; max-width: 300px; height: auto;">
     </div>
     ''')
-    gr.Markdown('<div style="text-align: center; font-size: 1.2em;">Welcome to the AI Energy Score leaderboard. Select different tasks to see scored models.</div>')
-    
-    # --- Callout Cards (Row at the Top) ---
-    with gr.Row():
-        all_models_card = gr.HTML(get_efficiency_diff_for_all())
-        # Initially, we show the stats for text_generation as default for the selected task.
-        selected_task_card = gr.HTML(get_efficiency_diff_for_task('text_generation.csv'))
 
-    # --- Tabs for the Different Tasks ---
+    # --- Global Callout (for all models in leaderboard) ---
+    global_callout = gr.HTML(get_global_callout())
+
+    # --- Welcome Text (moved below the callouts) ---
+    gr.Markdown('<div style="text-align: center; margin-top: 10px;">Welcome to the AI Energy Score leaderboard. Select different tasks to see scored models.</div>')
+
+    # --- Tabs for the different tasks ---
     with gr.Tabs():
         # --- Text Generation Tab ---
         with gr.TabItem("Text Generation 💬"):
@@ -335,18 +314,14 @@ with demo:
                     label="Sort",
                     value="Low to High"
                 )
-            # Two outputs: the table and the task callout card.
-            tg_table = gr.HTML(get_text_generation_model_names_html("A", "Low to High"))
-            model_class_dropdown.change(
-                fn=update_text_generation, 
-                inputs=[model_class_dropdown, sort_dropdown_tg], 
-                outputs=[tg_table, selected_task_card]
-            )
-            sort_dropdown_tg.change(
-                fn=update_text_generation, 
-                inputs=[model_class_dropdown, sort_dropdown_tg], 
-                outputs=[tg_table, selected_task_card]
-            )
+            tg_callout = gr.HTML()
+            tg_table = gr.HTML()
+            # Set initial values
+            init_callout, init_table = update_text_generation(model_class_options[0], "Low to High")
+            tg_callout.value = init_callout
+            tg_table.value = init_table
+            model_class_dropdown.change(fn=update_text_generation, inputs=[model_class_dropdown, sort_dropdown_tg], outputs=[tg_callout, tg_table])
+            sort_dropdown_tg.change(fn=update_text_generation, inputs=[model_class_dropdown, sort_dropdown_tg], outputs=[tg_callout, tg_table])
         
         # --- Image Generation Tab ---
         with gr.TabItem("Image Generation 📷"):
@@ -355,12 +330,12 @@ with demo:
                 label="Sort",
                 value="Low to High"
             )
-            img_table = gr.HTML(get_model_names_html('image_generation.csv', "Low to High"))
-            sort_dropdown_img.change(
-                fn=update_image_generation, 
-                inputs=sort_dropdown_img, 
-                outputs=[img_table, selected_task_card]
-            )
+            img_callout = gr.HTML()
+            img_table = gr.HTML()
+            init_callout, init_table = update_image_generation("Low to High")
+            img_callout.value = init_callout
+            img_table.value = init_table
+            sort_dropdown_img.change(fn=update_image_generation, inputs=sort_dropdown_img, outputs=[img_callout, img_table])
         
         # --- Text Classification Tab ---
         with gr.TabItem("Text Classification 🎭"):
@@ -369,12 +344,12 @@ with demo:
                 label="Sort",
                 value="Low to High"
             )
-            tc_table = gr.HTML(get_model_names_html('text_classification.csv', "Low to High"))
-            sort_dropdown_tc.change(
-                fn=update_text_classification, 
-                inputs=sort_dropdown_tc, 
-                outputs=[tc_table, selected_task_card]
-            )
+            tc_callout = gr.HTML()
+            tc_table = gr.HTML()
+            init_callout, init_table = update_text_classification("Low to High")
+            tc_callout.value = init_callout
+            tc_table.value = init_table
+            sort_dropdown_tc.change(fn=update_text_classification, inputs=sort_dropdown_tc, outputs=[tc_callout, tc_table])
         
         # --- Image Classification Tab ---
         with gr.TabItem("Image Classification 🖼️"):
@@ -383,12 +358,12 @@ with demo:
                 label="Sort",
                 value="Low to High"
             )
-            ic_table = gr.HTML(get_model_names_html('image_classification.csv', "Low to High"))
-            sort_dropdown_ic.change(
-                fn=update_image_classification, 
-                inputs=sort_dropdown_ic, 
-                outputs=[ic_table, selected_task_card]
-            )
+            ic_callout = gr.HTML()
+            ic_table = gr.HTML()
+            init_callout, init_table = update_image_classification("Low to High")
+            ic_callout.value = init_callout
+            ic_table.value = init_table
+            sort_dropdown_ic.change(fn=update_image_classification, inputs=sort_dropdown_ic, outputs=[ic_callout, ic_table])
         
         # --- Image Captioning Tab ---
         with gr.TabItem("Image Captioning 📝"):
@@ -397,12 +372,12 @@ with demo:
                 label="Sort",
                 value="Low to High"
             )
-            icap_table = gr.HTML(get_model_names_html('image_captioning.csv', "Low to High"))
-            sort_dropdown_icap.change(
-                fn=update_image_captioning, 
-                inputs=sort_dropdown_icap, 
-                outputs=[icap_table, selected_task_card]
-            )
+            icap_callout = gr.HTML()
+            icap_table = gr.HTML()
+            init_callout, init_table = update_image_captioning("Low to High")
+            icap_callout.value = init_callout
+            icap_table.value = init_table
+            sort_dropdown_icap.change(fn=update_image_captioning, inputs=sort_dropdown_icap, outputs=[icap_callout, icap_table])
         
         # --- Summarization Tab ---
         with gr.TabItem("Summarization 📃"):
@@ -411,12 +386,12 @@ with demo:
                 label="Sort",
                 value="Low to High"
             )
-            sum_table = gr.HTML(get_model_names_html('summarization.csv', "Low to High"))
-            sort_dropdown_sum.change(
-                fn=update_summarization, 
-                inputs=sort_dropdown_sum, 
-                outputs=[sum_table, selected_task_card]
-            )
+            sum_callout = gr.HTML()
+            sum_table = gr.HTML()
+            init_callout, init_table = update_summarization("Low to High")
+            sum_callout.value = init_callout
+            sum_table.value = init_table
+            sort_dropdown_sum.change(fn=update_summarization, inputs=sort_dropdown_sum, outputs=[sum_callout, sum_table])
         
         # --- Automatic Speech Recognition Tab ---
         with gr.TabItem("Automatic Speech Recognition 💬"):
@@ -425,12 +400,12 @@ with demo:
                 label="Sort",
                 value="Low to High"
             )
-            asr_table = gr.HTML(get_model_names_html('asr.csv', "Low to High"))
-            sort_dropdown_asr.change(
-                fn=update_asr, 
-                inputs=sort_dropdown_asr, 
-                outputs=[asr_table, selected_task_card]
-            )
+            asr_callout = gr.HTML()
+            asr_table = gr.HTML()
+            init_callout, init_table = update_asr("Low to High")
+            asr_callout.value = init_callout
+            asr_table.value = init_table
+            sort_dropdown_asr.change(fn=update_asr, inputs=sort_dropdown_asr, outputs=[asr_callout, asr_table])
         
         # --- Object Detection Tab ---
         with gr.TabItem("Object Detection 🚘"):
@@ -439,12 +414,12 @@ with demo:
                 label="Sort",
                 value="Low to High"
             )
-            od_table = gr.HTML(get_model_names_html('object_detection.csv', "Low to High"))
-            sort_dropdown_od.change(
-                fn=update_object_detection, 
-                inputs=sort_dropdown_od, 
-                outputs=[od_table, selected_task_card]
-            )
+            od_callout = gr.HTML()
+            od_table = gr.HTML()
+            init_callout, init_table = update_object_detection("Low to High")
+            od_callout.value = init_callout
+            od_table.value = init_table
+            sort_dropdown_od.change(fn=update_object_detection, inputs=sort_dropdown_od, outputs=[od_callout, od_table])
         
         # --- Sentence Similarity Tab ---
         with gr.TabItem("Sentence Similarity 📚"):
@@ -453,12 +428,12 @@ with demo:
                 label="Sort",
                 value="Low to High"
             )
-            ss_table = gr.HTML(get_model_names_html('sentence_similarity.csv', "Low to High"))
-            sort_dropdown_ss.change(
-                fn=update_sentence_similarity, 
-                inputs=sort_dropdown_ss, 
-                outputs=[ss_table, selected_task_card]
-            )
+            ss_callout = gr.HTML()
+            ss_table = gr.HTML()
+            init_callout, init_table = update_sentence_similarity("Low to High")
+            ss_callout.value = init_callout
+            ss_table.value = init_table
+            sort_dropdown_ss.change(fn=update_sentence_similarity, inputs=sort_dropdown_ss, outputs=[ss_callout, ss_table])
         
         # --- Extractive QA Tab ---
         with gr.TabItem("Extractive QA ❔"):
@@ -467,22 +442,26 @@ with demo:
                 label="Sort",
                 value="Low to High"
             )
-            qa_table = gr.HTML(get_model_names_html('question_answering.csv', "Low to High"))
-            sort_dropdown_qa.change(
-                fn=update_extractive_qa, 
-                inputs=sort_dropdown_qa, 
-                outputs=[qa_table, selected_task_card]
-            )
+            qa_callout = gr.HTML()
+            qa_table = gr.HTML()
+            init_callout, init_table = update_extractive_qa("Low to High")
+            qa_callout.value = init_callout
+            qa_table.value = init_table
+            sort_dropdown_qa.change(fn=update_extractive_qa, inputs=sort_dropdown_qa, outputs=[qa_callout, qa_table])
         
-        # --- All Tasks Tab (only table update) ---
+        # --- All Tasks Tab ---
         with gr.TabItem("All Tasks 💡"):
             sort_dropdown_all = gr.Dropdown(
                 choices=["Low to High", "High to Low"],
                 label="Sort",
                 value="Low to High"
             )
-            all_table = gr.HTML(get_all_model_names_html("Low to High"))
-            sort_dropdown_all.change(fn=update_all_tasks, inputs=sort_dropdown_all, outputs=all_table)
+            all_callout = gr.HTML()
+            all_table = gr.HTML()
+            init_callout, init_table = update_all_tasks("Low to High")
+            all_callout.value = init_callout
+            all_table.value = init_table
+            sort_dropdown_all.change(fn=update_all_tasks, inputs=sort_dropdown_all, outputs=[all_callout, all_table])
     
     with gr.Accordion("📙 Citation", open=False):
         citation_button = gr.Textbox(