Update app.py

app.py

@@ -24,103 +24,101 @@ tasks = [
     'summarization.csv'
 ]
 
-color_map = {"1": "red", "2": "orange", "3": "yellow", "4": "lightgreen", "5": "green"} # Keep color map
-
 def format_stars(score):
     try:
         score_int = int(score)
     except Exception:
         score_int = 0
     # Render stars in black with a slightly larger font
-    return f'<span style="color: black !important; font-size:1.5em !important;">{"★" * score_int}</span>'
+    return f'<span style="color: black; font-size:1.5em;">{"★" * score_int}</span>'
 
 def make_link(mname):
     parts = str(mname).split('/')
     display_name = parts[1] if len(parts) > 1 else mname
-    return f'[{display_name}](https://huggingface.co/{mname})'
-
-# --- Leaderboard Table Functions (Back to datatype="markdown" approach) ---
-
-def create_minimal_bar_html(energy_value_wh, energy_score, max_energy_value):
-    """Generates HTML for the minimal bar chart."""
-    if max_energy_value <= 0: # Avoid division by zero if max energy is 0 or negative
-        bar_percentage = 0
-    else:
-        bar_percentage = min(100, (energy_value_wh / max_energy_value) * 100) # Cap at 100%
-    bar_color = color_map.get(str(energy_score), "gray") # Default color if score is unexpected
-
-    html = f"""<div class='minimal-bar-container'>
-        <div class='minimal-bar' style='width: {bar_percentage}%; background-color: {bar_color};'></div>
-        <span style='margin-left: 5px;'>{energy_value_wh:.4f} Wh</span>
-    </div>""" # Added classes and inline styles for better control
+    return f'<a href="https://huggingface.co/{mname}" target="_blank">{display_name}</a>'
+
+def generate_html_table_from_df(df):
+    """
+    Given a dataframe that already includes:
+      - 'gpu_energy_numeric': numeric energy (in Wh)
+      - 'Model': the model link HTML,
+      - 'Score': the HTML stars,
+      - and 'energy_score' as an integer,
+    generate an HTML table that shows the energy value plus a horizontal bar whose width is computed
+    relative to the maximum energy.
+    """
+    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"}
+    html = '<table style="width:100%; border-collapse: collapse; font-family: Arial, sans-serif;">'
+    html += '<thead><tr style="background-color: #f2f2f2;">'
+    html += '<th style="text-align: left; padding: 8px;">Model</th>'
+    html += '<th style="text-align: left; padding: 8px;">GPU Energy (Wh)</th>'
+    html += '<th style="text-align: left; padding: 8px;">Score</th>'
+    html += '</tr></thead>'
+    html += '<tbody>'
+    for _, row in df.iterrows():
+        energy_numeric = row['gpu_energy_numeric']
+        energy_str = f"{energy_numeric:.4f}"
+        # Compute the relative width (as a percentage) for the horizontal bar
+        bar_width = (energy_numeric / max_energy) * 100
+        score_val = row['energy_score']
+        bar_color = color_map.get(str(score_val), "gray")
+        html += '<tr>'
+        html += f'<td style="padding: 8px;">{row["Model"]}</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 html
 
-
-def get_model_names(task):
+def get_model_names_html(task):
     df = pd.read_csv('data/energy/' + task)
     if df.columns[0].startswith("Unnamed:"):
         df = df.iloc[:, 1:]
-    df['total_gpu_energy'] = pd.to_numeric(df['total_gpu_energy'], errors='raise') * 1000 # kWh to Wh conversion
+    # Convert energy_score to integer and total_gpu_energy from kWh to Wh
     df['energy_score'] = df['energy_score'].astype(int)
-
-    df = df.sort_values(by='total_gpu_energy') # Sort BEFORE creating HTML column
-    max_energy_for_task = df['total_gpu_energy'].max() # Calculate max energy for this task
-
-    # Create HTML bar chart for GPU Energy column, passing dynamic max_energy_for_task
-    df['GPU Energy (Wh)'] = df.apply(lambda row: create_minimal_bar_html(row['total_gpu_energy'], row['energy_score'], max_energy_for_task), axis=1)
-
+    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)
-    df = df[['Model', 'GPU Energy (Wh)', 'Score']] # Keep only these columns
-    return df
+    df = df.sort_values(by='gpu_energy_numeric')
+    return generate_html_table_from_df(df)
 
-def get_all_model_names():
+def get_all_model_names_html():
     all_df = pd.DataFrame()
-    max_energy_overall = 0 # Initialize overall max energy
     for task in tasks:
         df = pd.read_csv('data/energy/' + task)
-        df['total_gpu_energy'] = pd.to_numeric(df['total_gpu_energy'], errors='raise') * 1000 # kWh to Wh conversion
+        if df.columns[0].startswith("Unnamed:"):
+            df = df.iloc[:, 1:]
         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)
         all_df = pd.concat([all_df, df], ignore_index=True)
-
     all_df = all_df.drop_duplicates(subset=['model'])
-    all_df = all_df.sort_values(by='total_gpu_energy') # Sort ALL DATA before calculating max and creating HTML
-
-    max_energy_overall = all_df['total_gpu_energy'].max() # Calculate overall max AFTER sorting
-
-    # Create HTML bar chart for GPU Energy column, passing dynamic max_energy_overall
-    all_df['GPU Energy (Wh)'] = all_df.apply(lambda row: create_minimal_bar_html(row['total_gpu_energy'], row['energy_score'], max_energy_overall), axis=1)
-    all_df['Model'] = all_df['model'].apply(make_link)
-    all_df['Score'] = all_df['energy_score'].apply(format_stars)
-    all_df = all_df[['Model', 'GPU Energy (Wh)', 'Score']]
-    return all_df[['Model', 'GPU Energy (Wh)', 'Score']]
+    all_df = all_df.sort_values(by='gpu_energy_numeric')
+    return generate_html_table_from_df(all_df)
 
-
-def get_text_generation_model_names(model_class):
+def get_text_generation_model_names_html(model_class):
     df = pd.read_csv('data/energy/text_generation.csv')
     if df.columns[0].startswith("Unnamed:"):
         df = df.iloc[:, 1:]
     if 'class' in df.columns:
         df = df[df['class'] == model_class]
-    df['total_gpu_energy'] = pd.to_numeric(df['total_gpu_energy'], errors='raise') * 1000 # kWh to Wh conversion
     df['energy_score'] = df['energy_score'].astype(int)
-
-    df = df.sort_values(by='total_gpu_energy') # Sort BEFORE creating HTML column
-    max_energy_for_class = df['total_gpu_energy'].max() # Calculate max energy for this class
-
-    # Create HTML bar chart for GPU Energy column, passing dynamic max_energy_for_class
-    df['GPU Energy (Wh)'] = df.apply(lambda row: create_minimal_bar_html(row['total_gpu_energy'], row['energy_score'], max_energy_for_class), axis=1)
-
+    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)
-    df = df[['Model', 'GPU Energy (Wh)', 'Score']] # Keep only these columns
-    return df
+    df = df.sort_values(by='gpu_energy_numeric')
+    return generate_html_table_from_df(df)
 
 def update_text_generation(model_class):
-    table = get_text_generation_model_names(model_class)
-    return table
+    table_html = get_text_generation_model_names_html(model_class)
+    return table_html
 
-# --- Build the Gradio Interface (Plots Removed, Tables with Dynamic Bars using datatype="markdown") ---
+# --- Build the Gradio Interface ---
 
 demo = gr.Blocks(css="""
 .gr-dataframe table {
@@ -133,25 +131,6 @@ demo = gr.Blocks(css="""
     overflow: hidden;
     text-overflow: ellipsis;
 }
-/* CSS for minimal bar chart inside table cell - more specific CSS */
-.gr-dataframe td > .minimal-bar-container { /* Target minimal-bar-container WITHIN dataframe cells */
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    margin: 0; /* Reset margins */
-    padding: 0; /* Reset paddings */
-    line-height: normal; /* Reset line-height */
-}
-.gr-dataframe td > .minimal-bar-container > .minimal-bar { /* Target minimal-bar WITHIN container in dataframe cells */
-    height: 10px;
-    background-color: blue; /* default, will be overridden by dynamic color */
-    border-radius: 2px;
-}
-.gr-dataframe td > .minimal-bar-container > span { /* Target span for text value in dataframe cells */
-    font-size: 0.9em; /* Adjust text size if needed */
-    color: #333; /* Adjust text color if needed */
-}
-
 """)
 
 with demo:
@@ -164,45 +143,43 @@ Select different tasks to see scored models. Submit open models for testing and
     with gr.Tabs():
         # --- Text Generation Tab with Dropdown for Model Class ---
         with gr.TabItem("Text Generation 💬"):
-            # Dropdown moved above the leaderboard
             model_class_dropdown = gr.Dropdown(choices=["A", "B", "C"],
                                                  label="Select Model Class",
                                                  value="A")
-            tg_table = gr.Dataframe(get_text_generation_model_names("A"), datatype="markdown") # IMPORTANT: datatype="markdown"
-            # Update table when the dropdown value changes
+            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])
+                                        outputs=tg_table)
 
         with gr.TabItem("Image Generation 📷"):
-            table = gr.Dataframe(get_model_names('image_generation.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
+            gr.HTML(get_model_names_html('image_generation.csv'))
 
         with gr.TabItem("Text Classification 🎭"):
-            table = gr.Dataframe(get_model_names('text_classification.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
+            gr.HTML(get_model_names_html('text_classification.csv'))
 
         with gr.TabItem("Image Classification 🖼️"):
-            table = gr.Dataframe(get_model_names('image_classification.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
+            gr.HTML(get_model_names_html('image_classification.csv'))
 
         with gr.TabItem("Image Captioning 📝"):
-            table = gr.Dataframe(get_model_names('image_captioning.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
+            gr.HTML(get_model_names_html('image_captioning.csv'))
 
         with gr.TabItem("Summarization 📃"):
-            table = gr.Dataframe(get_model_names('summarization.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
+            gr.HTML(get_model_names_html('summarization.csv'))
 
         with gr.TabItem("Automatic Speech Recognition 💬"):
-            table = gr.Dataframe(get_model_names('asr.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
+            gr.HTML(get_model_names_html('asr.csv'))
 
         with gr.TabItem("Object Detection 🚘"):
-            table = gr.Dataframe(get_model_names('object_detection.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
+            gr.HTML(get_model_names_html('object_detection.csv'))
 
         with gr.TabItem("Sentence Similarity 📚"):
-            table = gr.Dataframe(get_model_names('sentence_similarity.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
+            gr.HTML(get_model_names_html('sentence_similarity.csv'))
 
         with gr.TabItem("Extractive QA ❔"):
-            table = gr.Dataframe(get_model_names('question_answering.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
+            gr.HTML(get_model_names_html('question_answering.csv'))
 
         with gr.TabItem("All Tasks 💡"):
-            table = gr.Dataframe(get_all_model_names(), datatype="markdown") # IMPORTANT: datatype="markdown"
+            gr.HTML(get_all_model_names_html())
 
     with gr.Accordion("📙 Citation", open=False):
         citation_button = gr.Textbox(
@@ -216,4 +193,4 @@ Select different tasks to see scored models. Submit open models for testing and
         """Last updated: February 2025"""
     )
 
-demo.launch(share=True)
+demo.launch()