Update app.py

app.py

@@ -39,7 +39,7 @@ def make_link(mname):
     display_name = parts[1] if len(parts) > 1 else mname
     return f'[{display_name}](https://huggingface.co/{mname})'
 
-# --- Leaderboard Table Functions (Using gr.HTML Component) ---
+# --- 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."""
@@ -49,12 +49,10 @@ def create_minimal_bar_html(energy_value_wh, energy_score, max_energy_value):
         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 style="display: flex; align-items: center; gap: 5px;">
-        <div style="width: {bar_percentage}%; height: 10px; background-color: {bar_color}; border-radius: 2px;"></div>
-        <span>{energy_value_wh:.4f} Wh</span>
-    </div>
-    """
+    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 html
 
 
@@ -69,7 +67,7 @@ def get_model_names(task):
     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: gr.HTML(create_minimal_bar_html(row['total_gpu_energy'], row['energy_score'], max_energy_for_task)), axis=1)
+    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['Model'] = df['model'].apply(make_link)
     df['Score'] = df['energy_score'].apply(format_stars)
@@ -91,7 +89,7 @@ def get_all_model_names():
     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: gr.HTML(create_minimal_bar_html(row['total_gpu_energy'], row['energy_score'], max_energy_overall)), axis=1)
+    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']]
@@ -111,7 +109,7 @@ def get_text_generation_model_names(model_class):
     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: gr.HTML(create_minimal_bar_html(row['total_gpu_energy'], row['energy_score'], max_energy_for_class)), axis=1)
+    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['Model'] = df['model'].apply(make_link)
     df['Score'] = df['energy_score'].apply(format_stars)
@@ -122,7 +120,7 @@ def update_text_generation(model_class):
     table = get_text_generation_model_names(model_class)
     return table
 
-# --- Build the Gradio Interface (Plots Removed, Tables with Dynamic Bars using gr.HTML) ---
+# --- Build the Gradio Interface (Plots Removed, Tables with Dynamic Bars using datatype="markdown") ---
 
 demo = gr.Blocks(css="""
 .gr-dataframe table {
@@ -135,17 +133,25 @@ demo = gr.Blocks(css="""
     overflow: hidden;
     text-overflow: ellipsis;
 }
-/* CSS for minimal bar chart inside table cell */
-.minimal-bar-container {
+/* 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; /* space between bar and text */
+    gap: 5px;
+    margin: 0; /* Reset margins */
+    padding: 0; /* Reset paddings */
+    line-height: normal; /* Reset line-height */
 }
-.minimal-bar {
+.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:
@@ -162,41 +168,41 @@ Select different tasks to see scored models. Submit open models for testing and
             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")) # No datatype="markdown" here
+            tg_table = gr.Dataframe(get_text_generation_model_names("A"), datatype="markdown") # IMPORTANT: datatype="markdown"
             # Update table when the dropdown value changes
             model_class_dropdown.change(fn=update_text_generation,
                                         inputs=model_class_dropdown,
                                         outputs=[tg_table])
 
         with gr.TabItem("Image Generation 📷"):
-            table = gr.Dataframe(get_model_names('image_generation.csv')) # No datatype="markdown" here
+            table = gr.Dataframe(get_model_names('image_generation.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
 
         with gr.TabItem("Text Classification 🎭"):
-            table = gr.Dataframe(get_model_names('text_classification.csv')) # No datatype="markdown" here
+            table = gr.Dataframe(get_model_names('text_classification.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
 
         with gr.TabItem("Image Classification 🖼️"):
-            table = gr.Dataframe(get_model_names('image_classification.csv')) # No datatype="markdown" here
+            table = gr.Dataframe(get_model_names('image_classification.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
 
         with gr.TabItem("Image Captioning 📝"):
-            table = gr.Dataframe(get_model_names('image_captioning.csv')) # No datatype="markdown" here
+            table = gr.Dataframe(get_model_names('image_captioning.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
 
         with gr.TabItem("Summarization 📃"):
-            table = gr.Dataframe(get_model_names('summarization.csv')) # No datatype="markdown" here
+            table = gr.Dataframe(get_model_names('summarization.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
 
         with gr.TabItem("Automatic Speech Recognition 💬"):
-            table = gr.Dataframe(get_model_names('asr.csv')) # No datatype="markdown" here
+            table = gr.Dataframe(get_model_names('asr.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
 
         with gr.TabItem("Object Detection 🚘"):
-            table = gr.Dataframe(get_model_names('object_detection.csv')) # No datatype="markdown" here
+            table = gr.Dataframe(get_model_names('object_detection.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
 
         with gr.TabItem("Sentence Similarity 📚"):
-            table = gr.Dataframe(get_model_names('sentence_similarity.csv')) # No datatype="markdown" here
+            table = gr.Dataframe(get_model_names('sentence_similarity.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
 
         with gr.TabItem("Extractive QA ❔"):
-            table = gr.Dataframe(get_model_names('question_answering.csv')) # No datatype="markdown" here
+            table = gr.Dataframe(get_model_names('question_answering.csv'), datatype="markdown") # IMPORTANT: datatype="markdown"
 
         with gr.TabItem("All Tasks 💡"):
-            table = gr.Dataframe(get_all_model_names()) # No datatype="markdown" here
+            table = gr.Dataframe(get_all_model_names(), datatype="markdown") # IMPORTANT: datatype="markdown"
 
     with gr.Accordion("📙 Citation", open=False):
         citation_button = gr.Textbox(
@@ -210,4 +216,4 @@ Select different tasks to see scored models. Submit open models for testing and
         """Last updated: February 2025"""
     )
 
-demo.launch(share=True) # Added share=True here
+demo.launch(share=True)