Update app.py

app.py

@@ -111,7 +111,12 @@ def get_zip_data_link():
     with open(zip_filename, "rb") as f:
         data = f.read()
     b64 = base64.b64encode(data).decode()
-    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;">Download Data</a>'
+    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; '
+        'color: black; font-family: \'Inter\', sans-serif;">Download Data</a>'
+    )
     return href
 
 # --- Modified functions to include a sort_order parameter ---
@@ -217,7 +222,36 @@ demo = gr.Blocks(css="""
 """)
 
 with demo:
-    # Replace title with a centered logo and a centered subtitle.
+    # --- 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>'
+        )
+    
+    # --- Logo (centered) ---
     gr.HTML('''
     <div style="text-align: center; margin-top: 20px;">
         <img src="https://huggingface.co/spaces/AIEnergyScore/Leaderboard/resolve/main/logo.png" 
@@ -226,17 +260,10 @@ with demo:
     </div>
     ''')
 
-    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>')
-    
-    # Header links (using a row of components, including a Download Data link)
-    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;">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;">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;">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;">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;">Community</a>')
+    # --- Subtitle (centered) ---
+    gr.Markdown('<p style="text-align: center;">Welcome to the <a href="https://huggingface.co/AIEnergyScore">AI Energy Score</a> Leaderboard. Select the task to see scored model results.</p>')
     
+    # --- Tabs for the different tasks ---
     with gr.Tabs():
         # --- Text Generation Tab ---
         with gr.TabItem("Text Generation 💬"):