Update app.py

app.py

@@ -29,7 +29,7 @@ def format_stars(score):
         score_int = int(score)
     except Exception:
         score_int = 0
-    # Render stars in black with a slightly larger font
+    # Render stars in black with a slightly larger font.
     return f'<span style="color: black; font-size:1.5em;">{"★" * score_int}</span>'
 
 def make_link(mname):
@@ -39,9 +39,12 @@ def make_link(mname):
 
 def generate_html_table_from_df(df):
     """
-    Generate an HTML table from the given DataFrame.
-    Each GPU Energy cell contains both the numeric energy (Wh) and a horizontal bar
-    whose width is computed relative to the maximum energy in the table.
+    Given a dataframe with a numeric energy column (gpu_energy_numeric),
+    generate an HTML table with three columns:
+      - Model (the link)
+      - GPU Energy (Wh) plus a horizontal bar whose width is proportional
+        to the energy value relative to the maximum in the table.
+      - Score (displayed as stars)
     """
     max_energy = df['gpu_energy_numeric'].max() if not df.empty else 1
     color_map = {"1": "red", "2": "orange", "3": "yellow", "4": "lightgreen", "5": "green"}
@@ -55,7 +58,7 @@ def generate_html_table_from_df(df):
     for _, row in df.iterrows():
         energy_numeric = row['gpu_energy_numeric']
         energy_str = f"{energy_numeric:.4f}"
-        # Calculate the relative width as a percentage
+        # 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")
@@ -70,20 +73,21 @@ def generate_html_table_from_df(df):
     html += '</tbody></table>'
     return html
 
-def get_model_names_html(task):
+# --- Modified functions to include a sort_order parameter ---
+def get_model_names_html(task, sort_order="High to Low"):
     df = pd.read_csv('data/energy/' + task)
     if df.columns[0].startswith("Unnamed:"):
         df = df.iloc[:, 1:]
-    # Convert energy_score to integer and total_gpu_energy from kWh to Wh
     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)
-    # Sort descending (high to low)
-    df = df.sort_values(by='gpu_energy_numeric', ascending=False)
+    ascending = True if sort_order == "Low to High" else False
+    df = df.sort_values(by='gpu_energy_numeric', ascending=ascending)
     return generate_html_table_from_df(df)
 
-def get_all_model_names_html():
+def get_all_model_names_html(sort_order="High to Low"):
     all_df = pd.DataFrame()
     for task in tasks:
         df = pd.read_csv('data/energy/' + task)
@@ -95,35 +99,66 @@ def get_all_model_names_html():
         df['Score'] = df['energy_score'].apply(format_stars)
         all_df = pd.concat([all_df, df], ignore_index=True)
     all_df = all_df.drop_duplicates(subset=['model'])
-    # Sort descending
-    all_df = all_df.sort_values(by='gpu_energy_numeric', ascending=False)
+    ascending = True if sort_order == "Low to High" else False
+    all_df = all_df.sort_values(by='gpu_energy_numeric', ascending=ascending)
     return generate_html_table_from_df(all_df)
 
-def get_text_generation_model_names_html(model_class):
+def get_text_generation_model_names_html(model_class, sort_order="High to Low"):
     df = pd.read_csv('data/energy/text_generation.csv')
     if df.columns[0].startswith("Unnamed:"):
         df = df.iloc[:, 1:]
-    # Filter by model class if the "class" column exists
     if 'class' in df.columns:
         df = df[df['class'] == model_class]
     df['energy_score'] = df['energy_score'].astype(int)
     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)
-    # Sort descending
-    df = df.sort_values(by='gpu_energy_numeric', ascending=False)
+    ascending = True if sort_order == "Low to High" else False
+    df = df.sort_values(by='gpu_energy_numeric', ascending=ascending)
     return generate_html_table_from_df(df)
 
-def update_text_generation(selected_display):
-    # Mapping from display text to the internal value
+# --- 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",
         "B (Single Cloud GPU) 20-66B parameters": "B",
         "C (Multiple Cloud GPUs) >66B parameters": "C"
     }
     model_class = mapping.get(selected_display, "A")
-    table_html = get_text_generation_model_names_html(model_class)
-    return table_html
+    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)
+
+def update_text_classification(sort_order):
+    return get_model_names_html('text_classification.csv', sort_order)
+
+def update_image_classification(sort_order):
+    return get_model_names_html('image_classification.csv', sort_order)
+
+def update_image_captioning(sort_order):
+    return get_model_names_html('image_captioning.csv', sort_order)
+
+def update_summarization(sort_order):
+    return get_model_names_html('summarization.csv', sort_order)
+
+def update_asr(sort_order):
+    return get_model_names_html('asr.csv', sort_order)
+
+def update_object_detection(sort_order):
+    return get_model_names_html('object_detection.csv', sort_order)
+
+def update_sentence_similarity(sort_order):
+    return get_model_names_html('sentence_similarity.csv', sort_order)
+
+def update_extractive_qa(sort_order):
+    return get_model_names_html('question_answering.csv', sort_order)
+
+def update_all_tasks(sort_order):
+    return get_all_model_names_html(sort_order)
 
 # --- Build the Gradio Interface ---
 
@@ -142,12 +177,11 @@ demo = gr.Blocks(css="""
 
 with demo:
     gr.Markdown(
-        """# AI Energy Score Leaderboard
-### Welcome to the leaderboard for the [AI Energy Score Project!](https://huggingface.co/AIEnergyScore)
-Select different tasks to see scored models. Submit open models for testing and learn about testing proprietary models via the [submission portal](https://huggingface.co/spaces/AIEnergyScore/submission_portal)"""
+        """# AI Energy Score Leaderboard  
+### Welcome to the leaderboard for the [AI Energy Score Project!](https://huggingface.co/AIEnergyScore) — Select different tasks to see scored models."""
     )
     
-    # Visually appealing header links
+    # Header links:
     gr.HTML('''
     <div style="text-align: center; margin-bottom: 20px;">
         <a href="https://huggingface.co/spaces/AIEnergyScore/submission_portal" style="margin: 0 15px; text-decoration: none; font-weight: bold; font-size: 1.1em;">Submission Portal</a>
@@ -158,56 +192,129 @@ Select different tasks to see scored models. Submit open models for testing and
     ''')
     
     with gr.Tabs():
-        # --- Text Generation Tab with Dropdown for Model Class ---
+        # --- Text Generation Tab ---
         with gr.TabItem("Text Generation 💬"):
-            # Define the dropdown with descriptive text options.
-            model_class_options = [
-                "A (Single Consumer GPU) <20B parameters",
-                "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]
-            )
-            tg_table = gr.HTML(get_text_generation_model_names_html("A"))
-            model_class_dropdown.change(
-                fn=update_text_generation,
-                inputs=model_class_dropdown,
-                outputs=tg_table
-            )
-
+            with gr.Row():
+                model_class_options = [
+                    "A (Single Consumer GPU) <20B parameters",
+                    "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]
+                )
+                sort_dropdown_tg = gr.Dropdown(
+                    choices=["Low to High", "High to Low"],
+                    label="Sort",
+                    value="High to Low"
+                )
+            tg_table = gr.HTML(get_text_generation_model_names_html("A", "High to Low"))
+            # 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)
+        
+        # --- Image Generation Tab ---
         with gr.TabItem("Image Generation 📷"):
-            gr.HTML(get_model_names_html('image_generation.csv'))
-
+            sort_dropdown_img = gr.Dropdown(
+                choices=["Low to High", "High to Low"],
+                label="Sort",
+                value="High to Low"
+            )
+            img_table = gr.HTML(get_model_names_html('image_generation.csv', "High to Low"))
+            sort_dropdown_img.change(fn=update_image_generation, inputs=sort_dropdown_img, outputs=img_table)
+        
+        # --- Text Classification Tab ---
         with gr.TabItem("Text Classification 🎭"):
-            gr.HTML(get_model_names_html('text_classification.csv'))
-
+            sort_dropdown_tc = gr.Dropdown(
+                choices=["Low to High", "High to Low"],
+                label="Sort",
+                value="High to Low"
+            )
+            tc_table = gr.HTML(get_model_names_html('text_classification.csv', "High to Low"))
+            sort_dropdown_tc.change(fn=update_text_classification, inputs=sort_dropdown_tc, outputs=tc_table)
+        
+        # --- Image Classification Tab ---
         with gr.TabItem("Image Classification 🖼️"):
-            gr.HTML(get_model_names_html('image_classification.csv'))
-
+            sort_dropdown_ic = gr.Dropdown(
+                choices=["Low to High", "High to Low"],
+                label="Sort",
+                value="High to Low"
+            )
+            ic_table = gr.HTML(get_model_names_html('image_classification.csv', "High to Low"))
+            sort_dropdown_ic.change(fn=update_image_classification, inputs=sort_dropdown_ic, outputs=ic_table)
+        
+        # --- Image Captioning Tab ---
         with gr.TabItem("Image Captioning 📝"):
-            gr.HTML(get_model_names_html('image_captioning.csv'))
-
+            sort_dropdown_icap = gr.Dropdown(
+                choices=["Low to High", "High to Low"],
+                label="Sort",
+                value="High to Low"
+            )
+            icap_table = gr.HTML(get_model_names_html('image_captioning.csv', "High to Low"))
+            sort_dropdown_icap.change(fn=update_image_captioning, inputs=sort_dropdown_icap, outputs=icap_table)
+        
+        # --- Summarization Tab ---
         with gr.TabItem("Summarization 📃"):
-            gr.HTML(get_model_names_html('summarization.csv'))
-
+            sort_dropdown_sum = gr.Dropdown(
+                choices=["Low to High", "High to Low"],
+                label="Sort",
+                value="High to Low"
+            )
+            sum_table = gr.HTML(get_model_names_html('summarization.csv', "High to Low"))
+            sort_dropdown_sum.change(fn=update_summarization, inputs=sort_dropdown_sum, outputs=sum_table)
+        
+        # --- Automatic Speech Recognition Tab ---
         with gr.TabItem("Automatic Speech Recognition 💬"):
-            gr.HTML(get_model_names_html('asr.csv'))
-
+            sort_dropdown_asr = gr.Dropdown(
+                choices=["Low to High", "High to Low"],
+                label="Sort",
+                value="High to Low"
+            )
+            asr_table = gr.HTML(get_model_names_html('asr.csv', "High to Low"))
+            sort_dropdown_asr.change(fn=update_asr, inputs=sort_dropdown_asr, outputs=asr_table)
+        
+        # --- Object Detection Tab ---
         with gr.TabItem("Object Detection 🚘"):
-            gr.HTML(get_model_names_html('object_detection.csv'))
-
+            sort_dropdown_od = gr.Dropdown(
+                choices=["Low to High", "High to Low"],
+                label="Sort",
+                value="High to Low"
+            )
+            od_table = gr.HTML(get_model_names_html('object_detection.csv', "High to Low"))
+            sort_dropdown_od.change(fn=update_object_detection, inputs=sort_dropdown_od, outputs=od_table)
+        
+        # --- Sentence Similarity Tab ---
         with gr.TabItem("Sentence Similarity 📚"):
-            gr.HTML(get_model_names_html('sentence_similarity.csv'))
-
+            sort_dropdown_ss = gr.Dropdown(
+                choices=["Low to High", "High to Low"],
+                label="Sort",
+                value="High to Low"
+            )
+            ss_table = gr.HTML(get_model_names_html('sentence_similarity.csv', "High to Low"))
+            sort_dropdown_ss.change(fn=update_sentence_similarity, inputs=sort_dropdown_ss, outputs=ss_table)
+        
+        # --- Extractive QA Tab ---
         with gr.TabItem("Extractive QA ❔"):
-            gr.HTML(get_model_names_html('question_answering.csv'))
-
+            sort_dropdown_qa = gr.Dropdown(
+                choices=["Low to High", "High to Low"],
+                label="Sort",
+                value="High to Low"
+            )
+            qa_table = gr.HTML(get_model_names_html('question_answering.csv', "High to Low"))
+            sort_dropdown_qa.change(fn=update_extractive_qa, inputs=sort_dropdown_qa, outputs=qa_table)
+        
+        # --- All Tasks Tab ---
         with gr.TabItem("All Tasks 💡"):
-            gr.HTML(get_all_model_names_html())
-
+            sort_dropdown_all = gr.Dropdown(
+                choices=["Low to High", "High to Low"],
+                label="Sort",
+                value="High to Low"
+            )
+            all_table = gr.HTML(get_all_model_names_html("High to Low"))
+            sort_dropdown_all.change(fn=update_all_tasks, inputs=sort_dropdown_all, outputs=all_table)
+    
     with gr.Accordion("📙 Citation", open=False):
         citation_button = gr.Textbox(
             value=CITATION_BUTTON_TEXT,
@@ -218,4 +325,4 @@ Select different tasks to see scored models. Submit open models for testing and
         )
     gr.Markdown("""Last updated: February 2025""")
 
-demo.launch()
+demo.launch()