Update app.py

app.py

@@ -111,16 +111,12 @@ def compute_efficiency_ratio(df):
 
 def generate_info_callout(ratio, scope_text):
     """
-    Returns an inline, right-aligned "did you know" callout using a lightbulb emoji.
-    The callout uses a light green background, a small font, and states:
-      "💡 did you know: XXXx energy use difference between most and least efficient model in [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.
     """
     return (
-        f'<div style="text-align: right;">'
-        f'  <div style="display: inline-block; background-color: #e6ffe6; padding: 8px; '
-        f'       border-radius: 5px; font-size: 0.8em;">'
-        f'    💡 Did you know? There\'s a <strong>{ratio:,.1f}x</strong> energy use difference between the most and least efficient models in {scope_text}.'
-        f'  </div>'
+        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>'
     )
 
@@ -295,20 +291,53 @@ with demo:
     </div>
     ''')
 
-    # --- Logo & Global Callout Row ---
-    with gr.Row():
-        with gr.Column(scale=8):
-            gr.HTML('''
-            <div style="text-align: center; margin-top: 0px;">
-                <img src="https://huggingface.co/spaces/AIEnergyScore/Leaderboard/resolve/main/logo.png" 
-                     alt="Logo" 
-                     style="display: inline-block; max-width: 300px; height: auto;">
-            </div>
-            ''')
-        with gr.Column(scale=4):
-            global_callout = gr.HTML(get_global_callout())
-
-    # --- Tabs for the different tasks ---
+    # --- Global Header: Centered Logo with Global Callout Positioned to Its Right ---
+    <!-- We force the logo to be 300px wide and center it. The callout is positioned 160px to the right of the center. -->
+    {% raw %}
+    <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%);">
+         <!-- Insert the global callout HTML here -->
+         {global_callout_html}
+      </div>
+    </div>
+    {% endraw %}
+    <!-- We'll compute global_callout_html below and pass it into the template using gr.HTML(). -->
+    <!-- Instead, we'll do this in Python: -->
+    {% raw %}
+    <script>
+      // The following script block is just a placeholder. In Gradio we will generate the full HTML in Python.
+    </script>
+    {% endraw %}
+
+    <!-- For Gradio, we generate the combined HTML in Python -->
+    {% endraw %}
+    <!-- Generate the global header HTML with the computed callout -->
+    {% raw %}
+    <script>
+    </script>
+    {% endraw %}
+    <!-- We'll now use gr.HTML with f-string formatting: -->
+    {% raw %}
+    {% endraw %}
+    {# Compute the global callout HTML in Python #}
+    {% python %}
+global_callout_html = get_global_callout()
+    {% endpython %}
+    {% raw %}
+    <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%);">
+         {global_callout_html}
+      </div>
+    </div>
+    {% endraw %}
+
+    <!-- --- Tabs for the different tasks --- -->
     with gr.Tabs():
         # --- Text Generation Tab (dropdowns side by side with task callout to the right) ---
         with gr.TabItem("Text Generation 💬"):