Update app.py

app.py

@@ -77,17 +77,15 @@ def generate_html_table_from_df(df):
         html += '<tr>'
         html += f'<td style="padding: 8px; width: {static_width}px;">{row["Model"]}</td>'
         html += f'<td style="padding: 8px;">{row["Provider"]}</td>'
-        html += (
-            f'<td style="padding: 8px;">{energy_str}<br>'
-            f'<div style="background-color: {bar_color}; width: {bar_width:.1f}%; height: 10px;"></div></td>'
-        )
+        html += (f'<td style="padding: 8px;">{energy_str}<br>'
+                 f'<div style="background-color: {bar_color}; width: {bar_width:.1f}%; height: 10px;"></div></td>')
         html += f'<td style="padding: 8px;">{row["Score"]}</td>'
         html += '</tr>'
     html += '</tbody></table>'
     return f'<div class="table-container">{html}</div>'
 
 def process_df(task, sort_order="Low to High", filter_fn=None):
-    df = pd.read_csv('data/energy/' + task)
+    df = pd.read_csv(os.path.join("data", "energy", task))
     if df.columns[0].startswith("Unnamed:"):
         df = df.iloc[:, 1:]
     df['energy_score'] = df['energy_score'].astype(int)
@@ -123,7 +121,7 @@ def generate_info_callout(ratio, scope_text):
 def get_global_callout():
     all_df = pd.DataFrame()
     for task in tasks:
-        df = pd.read_csv('data/energy/' + task)
+        df = pd.read_csv(os.path.join("data", "energy", task))
         if df.columns[0].startswith("Unnamed:"):
             df = df.iloc[:, 1:]
         df['gpu_energy_numeric'] = pd.to_numeric(df['total_gpu_energy'], errors='raise') * 1000
@@ -134,7 +132,7 @@ def get_global_callout():
 ### ZIP DOWNLOAD FUNCTIONS ###
 
 def zip_csv_files():
-    data_dir = "data/energy"
+    data_dir = os.path.join("data", "energy")
     zip_filename = "data.zip"
     with zipfile.ZipFile(zip_filename, "w", zipfile.ZIP_DEFLATED) as zipf:
         for filename in os.listdir(data_dir):
@@ -241,7 +239,7 @@ def update_extractive_qa(sort_order):
 def update_all_tasks(sort_order):
     all_df = pd.DataFrame()
     for task in tasks:
-        df = pd.read_csv('data/energy/' + task)
+        df = pd.read_csv(os.path.join("data", "energy", task))
         if df.columns[0].startswith("Unnamed:"):
             df = df.iloc[:, 1:]
         df['energy_score'] = df['energy_score'].astype(int)
@@ -260,6 +258,18 @@ def update_all_tasks(sort_order):
 
 ### BUILD THE GRADIO INTERFACE ###
 
+# Compute the global header HTML using the global callout.
+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%);">
+      {get_global_callout()}
+  </div>
+</div>
+"""
+
 demo = gr.Blocks(css="""
 .gr-dataframe table {
     table-layout: fixed;
@@ -279,8 +289,8 @@ demo = gr.Blocks(css="""
 """)
 
 with demo:
-    # --- Header Links ---
-    gr.HTML(f'''
+    # 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>
         <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>
@@ -289,51 +299,14 @@ with demo:
         {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>
-    ''')
-
-    # --- Global Header: Centered Logo with Global Callout Positioned to Its Right ---
-    {% 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 %}
-    {% raw %}
-    <script>
-      // The following script block is just a placeholder. In Gradio we will generate the full HTML in Python.
-    </script>
-    {% endraw %}
-
-    {% endraw %}
-    {% raw %}
-    <script>
-    </script>
-    {% endraw %}
-    {% 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 --- -->
+    """)
+    
+    # Global Header: Centered Logo with Global Callout
+    gr.HTML(global_header_html)
+    
+    # Tabs for 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):
@@ -342,17 +315,9 @@ global_callout_html = get_global_callout()
                         "B (Single Cloud GPU) 20-66B parameters",
                         "C (Multiple Cloud GPUs) >66B parameters"
                     ]
-                    model_class_dropdown = gr.Dropdown(
-                        choices=model_class_options,
-                        label="Select Model Class",
-                        value=model_class_options[0]
-                    )
+                    model_class_dropdown = gr.Dropdown(choices=model_class_options, label="Select Model Class", value=model_class_options[0])
                 with gr.Column(scale=4):
-                    sort_dropdown_tg = gr.Dropdown(
-                        choices=["Low to High", "High to Low"],
-                        label="Sort",
-                        value="Low to High"
-                    )
+                    sort_dropdown_tg = gr.Dropdown(choices=["Low to High", "High to Low"], label="Sort", value="Low to High")
                 with gr.Column(scale=4):
                     tg_callout = gr.HTML()
             tg_table = gr.HTML()
@@ -362,15 +327,11 @@ global_callout_html = get_global_callout()
             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):
-                    sort_dropdown_img = gr.Dropdown(
-                        choices=["Low to High", "High to Low"],
-                        label="Sort",
-                        value="Low to High"
-                    )
+                    sort_dropdown_img = gr.Dropdown(choices=["Low to High", "High to Low"], label="Sort", value="Low to High")
                 with gr.Column(scale=4):
                     img_callout = gr.HTML()
             img_table = gr.HTML()
@@ -379,15 +340,11 @@ global_callout_html = get_global_callout()
             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):
-                    sort_dropdown_tc = gr.Dropdown(
-                        choices=["Low to High", "High to Low"],
-                        label="Sort",
-                        value="Low to High"
-                    )
+                    sort_dropdown_tc = gr.Dropdown(choices=["Low to High", "High to Low"], label="Sort", value="Low to High")
                 with gr.Column(scale=4):
                     tc_callout = gr.HTML()
             tc_table = gr.HTML()
@@ -396,15 +353,11 @@ global_callout_html = get_global_callout()
             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):
-                    sort_dropdown_ic = gr.Dropdown(
-                        choices=["Low to High", "High to Low"],
-                        label="Sort",
-                        value="Low to High"
-                    )
+                    sort_dropdown_ic = gr.Dropdown(choices=["Low to High", "High to Low"], label="Sort", value="Low to High")
                 with gr.Column(scale=4):
                     ic_callout = gr.HTML()
             ic_table = gr.HTML()
@@ -413,15 +366,11 @@ global_callout_html = get_global_callout()
             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):
-                    sort_dropdown_icap = gr.Dropdown(
-                        choices=["Low to High", "High to Low"],
-                        label="Sort",
-                        value="Low to High"
-                    )
+                    sort_dropdown_icap = gr.Dropdown(choices=["Low to High", "High to Low"], label="Sort", value="Low to High")
                 with gr.Column(scale=4):
                     icap_callout = gr.HTML()
             icap_table = gr.HTML()
@@ -430,15 +379,11 @@ global_callout_html = get_global_callout()
             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):
-                    sort_dropdown_sum = gr.Dropdown(
-                        choices=["Low to High", "High to Low"],
-                        label="Sort",
-                        value="Low to High"
-                    )
+                    sort_dropdown_sum = gr.Dropdown(choices=["Low to High", "High to Low"], label="Sort", value="Low to High")
                 with gr.Column(scale=4):
                     sum_callout = gr.HTML()
             sum_table = gr.HTML()
@@ -447,15 +392,11 @@ global_callout_html = get_global_callout()
             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):
-                    sort_dropdown_asr = gr.Dropdown(
-                        choices=["Low to High", "High to Low"],
-                        label="Sort",
-                        value="Low to High"
-                    )
+                    sort_dropdown_asr = gr.Dropdown(choices=["Low to High", "High to Low"], label="Sort", value="Low to High")
                 with gr.Column(scale=4):
                     asr_callout = gr.HTML()
             asr_table = gr.HTML()
@@ -464,15 +405,11 @@ global_callout_html = get_global_callout()
             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):
-                    sort_dropdown_od = gr.Dropdown(
-                        choices=["Low to High", "High to Low"],
-                        label="Sort",
-                        value="Low to High"
-                    )
+                    sort_dropdown_od = gr.Dropdown(choices=["Low to High", "High to Low"], label="Sort", value="Low to High")
                 with gr.Column(scale=4):
                     od_callout = gr.HTML()
             od_table = gr.HTML()
@@ -481,15 +418,11 @@ global_callout_html = get_global_callout()
             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):
-                    sort_dropdown_ss = gr.Dropdown(
-                        choices=["Low to High", "High to Low"],
-                        label="Sort",
-                        value="Low to High"
-                    )
+                    sort_dropdown_ss = gr.Dropdown(choices=["Low to High", "High to Low"], label="Sort", value="Low to High")
                 with gr.Column(scale=4):
                     ss_callout = gr.HTML()
             ss_table = gr.HTML()
@@ -498,15 +431,11 @@ global_callout_html = get_global_callout()
             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):
-                    sort_dropdown_qa = gr.Dropdown(
-                        choices=["Low to High", "High to Low"],
-                        label="Sort",
-                        value="Low to High"
-                    )
+                    sort_dropdown_qa = gr.Dropdown(choices=["Low to High", "High to Low"], label="Sort", value="Low to High")
                 with gr.Column(scale=4):
                     qa_callout = gr.HTML()
             qa_table = gr.HTML()
@@ -515,15 +444,11 @@ global_callout_html = get_global_callout()
             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):
-                    sort_dropdown_all = gr.Dropdown(
-                        choices=["Low to High", "High to Low"],
-                        label="Sort",
-                        value="Low to High"
-                    )
+                    sort_dropdown_all = gr.Dropdown(choices=["Low to High", "High to Low"], label="Sort", value="Low to High")
                 with gr.Column(scale=4):
                     all_callout = gr.HTML()
             all_table = gr.HTML()
@@ -542,4 +467,4 @@ global_callout_html = get_global_callout()
         )
     gr.Markdown("Last updated: February 2025")
 
-demo.launch()
+demo.launch()