Update app.py

app.py

@@ -69,7 +69,6 @@ def generate_html_table_from_df(df):
     html += '<tbody>'
     for _, row in df.iterrows():
         energy_numeric = row['gpu_energy_numeric']
-        # 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']
@@ -111,11 +110,13 @@ def generate_info_callout(ratio, scope_text):
     """
     Returns a "did you know" callout with a lightbulb emoji.
     The callout uses a light green background, a small font, and is limited to a max-width of 250px.
+    It is wrapped in a container that aligns it to the right.
     """
     return (
-        f'<div style="max-width:250px; font-size:0.8em; background-color:#e6ffe6; padding:8px; border-radius:5px;">'
-        f'💡 did you know: <strong>{ratio:,.1f}x</strong> energy use difference between most and least efficient model in {scope_text}.'
-        f'</div>'
+        f'<div style="text-align: right;">'
+        f'<div style="display:inline-block; max-width:250px; font-size:0.8em; background-color:#e6ffe6; padding:8px; border-radius:5px;">'
+        f'💡 There\'s a <strong>{ratio:,.1f}x</strong> energy use difference between the most and least efficient model in {scope_text}.'
+        f'</div></div>'
     )
 
 def get_global_callout():
@@ -258,13 +259,14 @@ def update_all_tasks(sort_order):
 
 ### BUILD THE GRADIO INTERFACE ###
 
-# Compute the global header HTML using the global callout.
+# Build the global header HTML. The logo is centered across the full width,
+# and the global callout is positioned at the right edge (20px from the right).
 global_header_html = f"""
 <div style="position: relative; width: 100%; text-align: center; margin-bottom: 20px;">
   <img src="https://huggingface.co/spaces/AIEnergyScore/Leaderboard/resolve/main/logo.png" 
        alt="Logo" 
-       style="width:300px; max-width:300px; height:auto; display: inline-block;">
-  <div style="position: absolute; top: 50%; left: calc(50% + 160px); transform: translateY(-50%);">
+       style="width:300px; max-width:300px; height:auto; display:inline-block;">
+  <div style="position: absolute; top: 50%; right: 20px; transform: translateY(-50%);">
       {get_global_callout()}
   </div>
 </div>
@@ -289,7 +291,7 @@ demo = gr.Blocks(css="""
 """)
 
 with demo:
-    # Header Links
+    # --- 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>
@@ -301,12 +303,12 @@ with demo:
     </div>
     """)
     
-    # Global Header: Centered Logo with Global Callout
+    # --- Global Header: Centered Logo with Global Callout at Right Edge ---
     gr.HTML(global_header_html)
     
-    # Tabs for different tasks
+    # --- Tabs for the different tasks ---
     with gr.Tabs():
-        # Text Generation Tab
+        # --- Text Generation Tab (dropdowns side by side with task callout to the right) ---
         with gr.TabItem("Text Generation 💬"):
             with gr.Row():
                 with gr.Column(scale=4):
@@ -327,7 +329,7 @@ with demo:
             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
+        # --- Image Generation Tab ---
         with gr.TabItem("Image Generation 📷"):
             with gr.Row():
                 with gr.Column(scale=8):
@@ -340,7 +342,7 @@ with demo:
             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
+        # --- Text Classification Tab ---
         with gr.TabItem("Text Classification 🎭"):
             with gr.Row():
                 with gr.Column(scale=8):
@@ -353,7 +355,7 @@ with demo:
             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
+        # --- Image Classification Tab ---
         with gr.TabItem("Image Classification 🖼️"):
             with gr.Row():
                 with gr.Column(scale=8):
@@ -366,7 +368,7 @@ with demo:
             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
+        # --- Image Captioning Tab ---
         with gr.TabItem("Image Captioning 📝"):
             with gr.Row():
                 with gr.Column(scale=8):
@@ -379,7 +381,7 @@ with demo:
             icap_table.value = init_table
             sort_dropdown_icap.change(fn=update_image_captioning, inputs=sort_dropdown_icap, outputs=[icap_callout, icap_table])
         
-        # Summarization Tab
+        # --- Summarization Tab ---
         with gr.TabItem("Summarization 📃"):
             with gr.Row():
                 with gr.Column(scale=8):
@@ -392,7 +394,7 @@ with demo:
             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
+        # --- Automatic Speech Recognition Tab ---
         with gr.TabItem("Automatic Speech Recognition 💬"):
             with gr.Row():
                 with gr.Column(scale=8):
@@ -405,7 +407,7 @@ with demo:
             asr_table.value = init_table
             sort_dropdown_asr.change(fn=update_asr, inputs=sort_dropdown_asr, outputs=[asr_callout, asr_table])
         
-        # Object Detection Tab
+        # --- Object Detection Tab ---
         with gr.TabItem("Object Detection 🚘"):
             with gr.Row():
                 with gr.Column(scale=8):
@@ -418,7 +420,7 @@ with demo:
             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
+        # --- Sentence Similarity Tab ---
         with gr.TabItem("Sentence Similarity 📚"):
             with gr.Row():
                 with gr.Column(scale=8):
@@ -431,7 +433,7 @@ with demo:
             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
+        # --- Extractive QA Tab ---
         with gr.TabItem("Extractive QA ❔"):
             with gr.Row():
                 with gr.Column(scale=8):
@@ -444,7 +446,7 @@ with demo:
             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
+        # --- All Tasks Tab ---
         with gr.TabItem("All Tasks 💡"):
             with gr.Row():
                 with gr.Column(scale=8):