Update app.py

app.py

@@ -59,7 +59,7 @@ def generate_html_table_from_df(df):
 
     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;">'
+    html = '<table class="data-table" style="width:100%; border-collapse: collapse; font-family: Inter, sans-serif;">'
     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="AI Provider extracted from the model name">Provider</th>'
@@ -114,7 +114,7 @@ def generate_info_callout(ratio, scope_text):
     """
     return (
         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'<div class="info-callout" 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> difference between the highest and lowest energy use in {scope_text}.'
         f'</div></div>'
     )
@@ -170,7 +170,7 @@ 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)
-    # Change the info_callout text to end with "in this class" for Text Generation
+    # For Text Generation, use "this class" at the end.
     callout = generate_info_callout(ratio, "this class")
     table_html = generate_html_table_from_df(df)
     return callout, table_html
@@ -258,22 +258,27 @@ def update_all_tasks(sort_order):
     table_html = generate_html_table_from_df(all_df)
     return callout, table_html
 
-### BUILD THE GRADIO INTERFACE ###
+### GLOBAL HEADER (Logo & 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).
+# Use a <picture> element so that dark mode uses logodark.png.
 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;">
+  <picture style="display:inline-block;">
+    <source media="(prefers-color-scheme: dark)" srcset="https://huggingface.co/spaces/AIEnergyScore/Leaderboard/resolve/main/logodark.png">
+    <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;">
+  </picture>
   <div style="position: absolute; top: 50%; right: 20px; transform: translateY(-50%);">
       {get_global_callout()}
   </div>
 </div>
 """
 
-demo = gr.Blocks(css="""
+### GRADIO INTERFACE ###
+
+# Additional CSS for dark mode and mobile responsiveness
+custom_css = """
 .gr-dataframe table {
     table-layout: fixed;
     width: 100%;
@@ -289,7 +294,34 @@ demo = gr.Blocks(css="""
     margin-left: auto;
     margin-right: auto;
 }
-""")
+
+/* Dark mode styles */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #121212;
+        color: #e0e0e0;
+    }
+    .gr-dataframe th {
+        background-color: #333;
+        color: #e0e0e0;
+    }
+    .gr-dataframe td {
+        color: #e0e0e0;
+    }
+    a {
+        color: #bb86fc;
+    }
+}
+
+/* Mobile styles: hide callout boxes on small screens */
+@media (max-width: 600px) {
+    .info-callout {
+        display: none;
+    }
+}
+"""
+
+demo = gr.Blocks(css=custom_css)
 
 with demo:
     # --- Header Links ---
@@ -309,7 +341,7 @@ with demo:
     
     # --- Tabs for the different tasks ---
     with gr.Tabs():
-        # --- Text Generation Tab (dropdowns side by side with task callout to the right) ---
+        # --- Text Generation Tab ---
         with gr.TabItem("Text Generation 💬"):
             with gr.Row():
                 with gr.Column(scale=4):