Update app.py

app.py

@@ -32,7 +32,7 @@ def format_stars(score):
         score_int = int(score)
     except Exception:
         score_int = 0
-    # Render stars in black with a slightly larger font.
+    # 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):
@@ -51,15 +51,12 @@ def extract_link_text(html_link):
 
 def generate_html_table_from_df(df):
     """
-    Given a dataframe with a numeric energy column (gpu_energy_numeric),
-    generate an HTML table with four columns:
-      - Model (the link, with a fixed width based on the longest model name)
+    Generates an HTML table with four columns:
+      - Model (with link)
       - Provider (extracted from the model field)
-      - GPU Energy (Wh) plus a horizontal bar whose width is proportional
-        to the energy value relative to the maximum in the table.
-      - Score (displayed as stars)
+      - GPU Energy (Wh) plus a horizontal bar
+      - Score (as stars)
     """
-    # Compute a static width (in pixels) 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:
@@ -73,7 +70,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="5 is most efficient, 1 is least. Relative energy efficiency score relative to other models in task/class at the time of leaderboard launch">Score</th>'
+    html += '<th style="text-align: left; padding: 8px;" title="Energy efficiency score">Score</th>'
     html += '</tr></thead>'
     html += '<tbody>'
     for _, row in df.iterrows():
@@ -92,10 +89,53 @@ def generate_html_table_from_df(df):
         html += f'<td style="padding: 8px;">{row["Score"]}</td>'
         html += '</tr>'
     html += '</tbody></table>'
-    # Wrap the table in a container so its edges match the dropdown menus.
     return f'<div class="table-container">{html}</div>'
 
-# --- Function to zip all CSV files ---
+# --- Functions for creating the efficiency difference callout cards ---
+def get_efficiency_diff_for_all():
+    """Calculates the efficiency difference across all models."""
+    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['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>"
+    )
+
+# --- Function to zip all CSV files (unchanged) ---
 def zip_csv_files():
     data_dir = "data/energy"
     zip_filename = "data.zip"
@@ -107,7 +147,6 @@ def zip_csv_files():
     return zip_filename
 
 def get_zip_data_link():
-    """Creates a data URI download link for the ZIP file."""
     zip_filename = zip_csv_files()
     with open(zip_filename, "rb") as f:
         data = f.read()
@@ -127,11 +166,11 @@ def get_model_names_html(task, sort_order="Low to High"):
         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 the Provider column (text before the slash in the model field)
+    # 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 = True if sort_order == "Low to High" else False
+    ascending = (sort_order == "Low to High")
     df = df.sort_values(by='gpu_energy_numeric', ascending=ascending)
     return generate_html_table_from_df(df)
 
@@ -143,13 +182,12 @@ def get_all_model_names_html(sort_order="Low to High"):
             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 the Provider column here as well.
         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
+    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)
 
@@ -161,11 +199,10 @@ def get_text_generation_model_names_html(model_class, sort_order="Low to High"):
         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
-    # Add the Provider column here as well.
     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
+    ascending = (sort_order == "Low to High")
     df = df.sort_values(by='gpu_energy_numeric', ascending=ascending)
     return generate_html_table_from_df(df)
 
@@ -177,34 +214,55 @@ def update_text_generation(selected_display, sort_order):
         "C (Multiple Cloud GPUs) >66B parameters": "C"
     }
     model_class = mapping.get(selected_display, "A")
-    return get_text_generation_model_names_html(model_class, sort_order)
+    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 update_image_generation(sort_order):
-    return get_model_names_html('image_generation.csv', 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
 
 def update_text_classification(sort_order):
-    return get_model_names_html('text_classification.csv', 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
 
 def update_image_classification(sort_order):
-    return get_model_names_html('image_classification.csv', 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
 
 def update_image_captioning(sort_order):
-    return get_model_names_html('image_captioning.csv', 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
 
 def update_summarization(sort_order):
-    return get_model_names_html('summarization.csv', 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
 
 def update_asr(sort_order):
-    return get_model_names_html('asr.csv', 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
 
 def update_object_detection(sort_order):
-    return get_model_names_html('object_detection.csv', 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
 
 def update_sentence_similarity(sort_order):
-    return get_model_names_html('sentence_similarity.csv', 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
 
 def update_extractive_qa(sort_order):
-    return get_model_names_html('question_answering.csv', 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
 
 def update_all_tasks(sort_order):
     return get_all_model_names_html(sort_order)
@@ -229,7 +287,7 @@ demo = gr.Blocks(css="""
 """)
 
 with demo:
-    # --- Header Links (at the very top, evenly spaced) ---
+    # --- Header Links ---
     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>
@@ -238,19 +296,26 @@ with demo:
         <a href="https://huggingface.github.io/AIEnergyScore/#documentation" style="text-decoration: none; font-weight: bold; font-size: 1.1em; color: black; font-family: 'Inter', sans-serif;">Documentation</a>
         {get_zip_data_link()}
         <a href="https://huggingface.co/spaces/AIEnergyScore/README/discussions" style="text-decoration: none; font-weight: bold; font-size: 1.1em; color: black; font-family: 'Inter', sans-serif;">Community</a>
+    </div>
     ''')
 
-    # --- Logo (centered) ---
+    # --- Logo and Subtitle ---
     gr.HTML('''
-    <div style="margin-top: 0px;">
+    <div style="margin-top: 0px; text-align: center;">
         <img src="https://huggingface.co/spaces/AIEnergyScore/Leaderboard/resolve/main/logo.png" 
              alt="Logo" 
-             style="display: block; margin: 0 auto; max-width: 300px; height: auto;">
+             style="max-width: 300px; height: auto; margin-bottom: 10px;">
+    </div>
     ''')
-    # --- Subtitle (centered) ---
-    gr.Markdown('<div style="text-align: center;">Welcome to the AI Energy Score leaderboard. Select different tasks to see scored models.</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>')
     
-    # --- Tabs for the different tasks ---
+    # --- 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 ---
     with gr.Tabs():
         # --- Text Generation Tab ---
         with gr.TabItem("Text Generation 💬"):
@@ -270,9 +335,18 @@ 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)
-            sort_dropdown_tg.change(fn=update_text_generation, inputs=[model_class_dropdown, sort_dropdown_tg], outputs=tg_table)
+            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]
+            )
         
         # --- Image Generation Tab ---
         with gr.TabItem("Image Generation 📷"):
@@ -282,7 +356,11 @@ with demo:
                 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)
+            sort_dropdown_img.change(
+                fn=update_image_generation, 
+                inputs=sort_dropdown_img, 
+                outputs=[img_table, selected_task_card]
+            )
         
         # --- Text Classification Tab ---
         with gr.TabItem("Text Classification 🎭"):
@@ -292,7 +370,11 @@ with demo:
                 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)
+            sort_dropdown_tc.change(
+                fn=update_text_classification, 
+                inputs=sort_dropdown_tc, 
+                outputs=[tc_table, selected_task_card]
+            )
         
         # --- Image Classification Tab ---
         with gr.TabItem("Image Classification 🖼️"):
@@ -302,7 +384,11 @@ with demo:
                 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)
+            sort_dropdown_ic.change(
+                fn=update_image_classification, 
+                inputs=sort_dropdown_ic, 
+                outputs=[ic_table, selected_task_card]
+            )
         
         # --- Image Captioning Tab ---
         with gr.TabItem("Image Captioning 📝"):
@@ -312,7 +398,11 @@ with demo:
                 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)
+            sort_dropdown_icap.change(
+                fn=update_image_captioning, 
+                inputs=sort_dropdown_icap, 
+                outputs=[icap_table, selected_task_card]
+            )
         
         # --- Summarization Tab ---
         with gr.TabItem("Summarization 📃"):
@@ -322,7 +412,11 @@ with demo:
                 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)
+            sort_dropdown_sum.change(
+                fn=update_summarization, 
+                inputs=sort_dropdown_sum, 
+                outputs=[sum_table, selected_task_card]
+            )
         
         # --- Automatic Speech Recognition Tab ---
         with gr.TabItem("Automatic Speech Recognition 💬"):
@@ -332,7 +426,11 @@ with demo:
                 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)
+            sort_dropdown_asr.change(
+                fn=update_asr, 
+                inputs=sort_dropdown_asr, 
+                outputs=[asr_table, selected_task_card]
+            )
         
         # --- Object Detection Tab ---
         with gr.TabItem("Object Detection 🚘"):
@@ -342,7 +440,11 @@ with demo:
                 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)
+            sort_dropdown_od.change(
+                fn=update_object_detection, 
+                inputs=sort_dropdown_od, 
+                outputs=[od_table, selected_task_card]
+            )
         
         # --- Sentence Similarity Tab ---
         with gr.TabItem("Sentence Similarity 📚"):
@@ -352,7 +454,11 @@ with demo:
                 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)
+            sort_dropdown_ss.change(
+                fn=update_sentence_similarity, 
+                inputs=sort_dropdown_ss, 
+                outputs=[ss_table, selected_task_card]
+            )
         
         # --- Extractive QA Tab ---
         with gr.TabItem("Extractive QA ❔"):
@@ -362,9 +468,13 @@ with demo:
                 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)
+            sort_dropdown_qa.change(
+                fn=update_extractive_qa, 
+                inputs=sort_dropdown_qa, 
+                outputs=[qa_table, selected_task_card]
+            )
         
-        # --- All Tasks Tab ---
+        # --- All Tasks Tab (only table update) ---
         with gr.TabItem("All Tasks 💡"):
             sort_dropdown_all = gr.Dropdown(
                 choices=["Low to High", "High to Low"],