Update app.py

app.py

@@ -63,13 +63,11 @@ def generate_html_table_from_df(df):
         max_length = max(len(extract_link_text(link)) for link in df['Model'])
     else:
         max_length = 10
-    # Multiply by an estimated average character width (10 pixels) and add some extra padding.
     static_width = max_length * 10 + 16
 
     max_energy = df['gpu_energy_numeric'].max() if not df.empty else 1
     color_map = {"1": "black", "2": "black", "3": "black", "4": "black", "5": "black"}
     html = '<table style="width:100%; border-collapse: collapse; font-family: Inter, sans-serif;">'
-    # Keep only one header (the one with hover text)
     html += '<thead><tr style="background-color: #f2f2f2;">'
     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="GPU energy consumed in Watt-hours for 1,000 queries">GPU Energy (Wh)</th>'
@@ -79,7 +77,6 @@ def generate_html_table_from_df(df):
     for _, row in df.iterrows():
         energy_numeric = row['gpu_energy_numeric']
         energy_str = f"{energy_numeric:.2f}"
-        # Compute the relative width (as a percentage)
         bar_width = (energy_numeric / max_energy) * 100
         score_val = row['energy_score']
         bar_color = color_map.get(str(score_val), "gray")
@@ -92,7 +89,8 @@ def generate_html_table_from_df(df):
         html += f'<td style="padding: 8px;">{row["Score"]}</td>'
         html += '</tr>'
     html += '</tbody></table>'
-    return html
+    # 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 ---
 def zip_csv_files():
@@ -114,7 +112,7 @@ def get_zip_data_link():
     href = (
         f'<a href="data:application/zip;base64,{b64}" '
         'download="data.zip" '
-        'style="margin: 0 15px; text-decoration: none; font-weight: bold; font-size: 1.1em; '
+        'style="text-decoration: none; font-weight: bold; font-size: 1.1em; '
         'color: black; font-family: \'Inter\', sans-serif;">Download Data</a>'
     )
     return href
@@ -125,7 +123,6 @@ def get_model_names_html(task, sort_order="Low to High"):
     if df.columns[0].startswith("Unnamed:"):
         df = df.iloc[:, 1:]
     df['energy_score'] = df['energy_score'].astype(int)
-    # Convert kWh to Wh:
     df['gpu_energy_numeric'] = pd.to_numeric(df['total_gpu_energy'], errors='raise') * 1000
     df['Model'] = df['model'].apply(make_link)
     df['Score'] = df['energy_score'].apply(format_stars)
@@ -164,8 +161,6 @@ def get_text_generation_model_names_html(model_class, sort_order="Low to High"):
     return generate_html_table_from_df(df)
 
 # --- Update functions for dropdown changes ---
-
-# For Text Generation, two dropdowns: model class and sort order.
 def update_text_generation(selected_display, sort_order):
     mapping = {
         "A (Single Consumer GPU) <20B parameters": "A",
@@ -175,7 +170,6 @@ def update_text_generation(selected_display, sort_order):
     model_class = mapping.get(selected_display, "A")
     return get_text_generation_model_names_html(model_class, sort_order)
 
-# For the other tabs, each update function simply takes the sort_order.
 def update_image_generation(sort_order):
     return get_model_names_html('image_generation.csv', sort_order)
 
@@ -207,7 +201,6 @@ def update_all_tasks(sort_order):
     return get_all_model_names_html(sort_order)
 
 # --- Build the Gradio Interface ---
-
 demo = gr.Blocks(css="""
 .gr-dataframe table {
     table-layout: fixed;
@@ -219,49 +212,37 @@ demo = gr.Blocks(css="""
     overflow: hidden;
     text-overflow: ellipsis;
 }
+.table-container {
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+}
 """)
 
 with demo:
-    # --- Header Links (at the very top) ---
-    with gr.Row():
-        submission_link = gr.HTML(
-            '<a href="https://huggingface.co/spaces/AIEnergyScore/submission_portal" '
-            'style="margin: 0 10px; text-decoration: none; font-weight: bold; font-size: 1.1em; '
-            'color: black; font-family: \'Inter\', sans-serif;">Submission Portal</a>'
-        )
-        label_link = gr.HTML(
-            '<a href="https://huggingface.co/spaces/AIEnergyScore/Label" '
-            'style="margin: 0 10px; text-decoration: none; font-weight: bold; font-size: 1.1em; '
-            'color: black; font-family: \'Inter\', sans-serif;">Label Generator</a>'
-        )
-        faq_link = gr.HTML(
-            '<a href="https://huggingface.github.io/AIEnergyScore/#faq" '
-            'style="margin: 0 10px; text-decoration: none; font-weight: bold; font-size: 1.1em; '
-            'color: black; font-family: \'Inter\', sans-serif;">FAQ</a>'
-        )
-        documentation_link = gr.HTML(
-            '<a href="https://huggingface.github.io/AIEnergyScore/#documentation" '
-            'style="margin: 0 10px; text-decoration: none; font-weight: bold; font-size: 1.1em; '
-            'color: black; font-family: \'Inter\', sans-serif;">Documentation</a>'
-        )
-        download_link = gr.HTML(get_zip_data_link())
-        community_link = gr.HTML(
-            '<a href="https://huggingface.co/spaces/AIEnergyScore/README/discussions" '
-            'style="margin: 0 10px; text-decoration: none; font-weight: bold; font-size: 1.1em; '
-            'color: black; font-family: \'Inter\', sans-serif;">Community</a>'
-        )
-    
+    # --- Header Links (at the very top, 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>
+        <a href="https://huggingface.co/spaces/AIEnergyScore/Label" style="text-decoration: none; font-weight: bold; font-size: 1.1em; color: black; font-family: 'Inter', sans-serif;">Label Generator</a>
+        <a href="https://huggingface.github.io/AIEnergyScore/#faq" style="text-decoration: none; font-weight: bold; font-size: 1.1em; color: black; font-family: 'Inter', sans-serif;">FAQ</a>
+        <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) ---
     gr.HTML('''
-    <div style="text-align: center; margin-top: 20px;">
+    <div style="margin-top: 20px;">
         <img src="https://huggingface.co/spaces/AIEnergyScore/Leaderboard/resolve/main/logo.png" 
              alt="Logo" 
-             style="max-width: 300px; height: auto;">
+             style="display: block; margin: 0 auto; max-width: 300px; height: auto;">
     </div>
     ''')
 
     # --- Subtitle (centered) ---
-    gr.Markdown('<p style="text-align: center;">Welcome to the leaderboard for the <a href="https://huggingface.co/AIEnergyScore">AI Energy Score Project!</a> — Select different tasks to see scored models.</p>')
+    gr.Markdown('<div style="text-align: center;">Welcome to the AI Energy Score leaderboard. Select different tasks to see scored models.</div>')
     
     # --- Tabs for the different tasks ---
     with gr.Tabs():
@@ -284,7 +265,6 @@ with demo:
                     value="Low to High"
                 )
             tg_table = gr.HTML(get_text_generation_model_names_html("A", "Low to High"))
-            # When either dropdown changes, update the table.
             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)
         
@@ -396,6 +376,6 @@ with demo:
             lines=10,
             show_copy_button=True,
         )
-    gr.Markdown("""Last updated: February 2025""")
+    gr.Markdown("Last updated: February 2025")
 
-demo.launch()
+demo.launch()