Update app.py

app.py

@@ -69,7 +69,8 @@ def generate_html_table_from_df(df):
     html += '<tbody>'
     for _, row in df.iterrows():
         energy_numeric = row['gpu_energy_numeric']
-        energy_str = f"{energy_numeric:.2f}"
+        # Format energy with commas and 2 decimal places.
+        energy_str = f"{energy_numeric:,.2f}"
         bar_width = (energy_numeric / max_energy) * 100
         score_val = row['energy_score']
         bar_color = color_map.get(str(score_val), "gray")
@@ -108,6 +109,20 @@ def compute_efficiency_ratio(df):
     ratio = max_val / min_val if min_val > 0 else 1
     return ratio
 
+def generate_callout(ratio, scope_text):
+    """
+    Returns a right-aligned callout where the inner box is shrink-wrapped to its text.
+    The ratio is formatted with a comma for thousands.
+    """
+    return (
+        f'<div style="text-align: right;">'
+        f'  <div style="display: inline-block; background-color: #f2f2f2; padding: 10px; '
+        f'       border-radius: 5px; margin-bottom:10px;">'
+        f'    Energy difference of <strong>{ratio:,.1f}x</strong> for {scope_text}.'
+        f'  </div>'
+        f'</div>'
+    )
+
 def get_global_callout():
     all_df = pd.DataFrame()
     for task in tasks:
@@ -117,9 +132,10 @@ def get_global_callout():
         df['gpu_energy_numeric'] = pd.to_numeric(df['total_gpu_energy'], errors='raise') * 1000
         all_df = pd.concat([all_df, df], ignore_index=True)
     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>'
+    return generate_callout(ratio, "all models in leaderboard")
+
+### ZIP DOWNLOAD FUNCTIONS ###
 
-### ZIP DOWNLOAD (unchanged) ###
 def zip_csv_files():
     data_dir = "data/energy"
     zip_filename = "data.zip"
@@ -143,7 +159,7 @@ def get_zip_data_link():
     )
     return href
 
-### UPDATE FUNCTIONS FOR TASKS (returning both callout and table) ###
+### UPDATE FUNCTIONS (RETURNING CALLOUT AND TABLE HTML) ###
 
 def update_text_generation(selected_display, sort_order):
     mapping = {
@@ -158,75 +174,74 @@ def update_text_generation(selected_display, sort_order):
         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>'
+    callout = generate_callout(ratio, "all models in task")
     table_html = generate_html_table_from_df(df)
     return callout, table_html
 
 def update_image_generation(sort_order):
     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>'
+    callout = generate_callout(ratio, "all models in task")
     table_html = generate_html_table_from_df(df)
     return callout, table_html
 
 def update_text_classification(sort_order):
     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>'
+    callout = generate_callout(ratio, "all models in task")
     table_html = generate_html_table_from_df(df)
     return callout, table_html
 
 def update_image_classification(sort_order):
     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>'
+    callout = generate_callout(ratio, "all models in task")
     table_html = generate_html_table_from_df(df)
     return callout, table_html
 
 def update_image_captioning(sort_order):
     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>'
+    callout = generate_callout(ratio, "all models in task")
     table_html = generate_html_table_from_df(df)
     return callout, table_html
 
 def update_summarization(sort_order):
     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>'
+    callout = generate_callout(ratio, "all models in task")
     table_html = generate_html_table_from_df(df)
     return callout, table_html
 
 def update_asr(sort_order):
     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>'
+    callout = generate_callout(ratio, "all models in task")
     table_html = generate_html_table_from_df(df)
     return callout, table_html
 
 def update_object_detection(sort_order):
     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>'
+    callout = generate_callout(ratio, "all models in task")
     table_html = generate_html_table_from_df(df)
     return callout, table_html
 
 def update_sentence_similarity(sort_order):
     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>'
+    callout = generate_callout(ratio, "all models in task")
     table_html = generate_html_table_from_df(df)
     return callout, table_html
 
 def update_extractive_qa(sort_order):
     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>'
+    callout = generate_callout(ratio, "all models in task")
     table_html = generate_html_table_from_df(df)
     return callout, table_html
 
 def update_all_tasks(sort_order):
-    # Process all CSV files together
     all_df = pd.DataFrame()
     for task in tasks:
         df = pd.read_csv('data/energy/' + task)
@@ -242,7 +257,7 @@ def update_all_tasks(sort_order):
     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>'
+    callout = generate_callout(ratio, "all models in leaderboard")
     table_html = generate_html_table_from_df(all_df)
     return callout, table_html
 
@@ -267,7 +282,7 @@ demo = gr.Blocks(css="""
 """)
 
 with demo:
-    # --- Header Links (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>
@@ -288,11 +303,10 @@ with demo:
     </div>
     ''')
 
-    # --- Global Callout (for all models in leaderboard) ---
+    # --- Global Callout ---
     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>')
+    gr.Markdown('<div style="text-align: center; margin-top: 10px;">Select different tasks to see scored models.</div>')
 
     # --- Tabs for the different tasks ---
     with gr.Tabs():
@@ -316,7 +330,6 @@ with demo:
                 )
             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