metric color

app.py

@@ -179,17 +179,19 @@ def get_model_info_blocks(chosen_model_name):
 
     skills_bar_df = skills_bar_df.sort_values(by=['Scores'], ascending=False).reset_index(drop=True)
 
+    def get_metric_html(metric_title):
+        return f"<div class='deep-dive-metric'><b>{metric_title}</b><span class='ddm-value'>{{}}</div>"
     
     with gr.Accordion("Model Details"):
 
         with gr.Row():
-            model_name = gr.HTML("""<span class='deep-dive-metric'><b>Model Name:</b> {}</span> """.format(chosen_model_name))
+            model_name = gr.HTML(get_metric_html("Model Name").format(chosen_model_name))
         with gr.Row():
-            benchmark_score =   gr.HTML("""<span class='deep-dive-metric'><b>Benchmark Score:</b>{}/10</span>""".format(filtered_df["Benchmark Score"][0]))
-            rank = gr.HTML("""<span class='deep-dive-metric'><b>Benchmark Rank:</b>{}</span>""".format(filtered_df["Rank"][0]))
-            speed =  gr.HTML("""<span class='deep-dive-metric'><b>Speed:</b>{} words per second</span>""".format(filtered_df["Speed (words/sec)"][0]))
-            contamination =     gr.HTML("""<span class='deep-dive-metric'><b>Contamination Score:</b>{}</span>""".format(filtered_df["Contamination Score"][0]))
-            size =  gr.HTML("""<span class='deep-dive-metric'><b>Size Category:</b>{}</span>""".format(filtered_df["Category"][0]))
+            benchmark_score = gr.HTML(get_metric_html("Benchmark Score").format(filtered_df["Benchmark Score"][0]))
+            rank = gr.HTML(get_metric_html("Benchmark Rank").format(filtered_df["Rank"][0]))
+            speed = gr.HTML(get_metric_html("Speed").format(filtered_df["Speed (words/sec)"][0]))
+            contamination =  gr.HTML(get_metric_html("Contamination Score").format(filtered_df["Contamination Score"][0]))
+            size =  gr.HTML(get_metric_html("Size Category").format(filtered_df["Category"][0]))
 
     with gr.Row():
         skills_bar = gr.BarPlot(

src/display/css_html_js.py

@@ -129,6 +129,13 @@ border-radius: 10px;
     align-items: normal;
     max-height: 120px;
 }
+
+
+.ddm-value{
+    color:#1000b6;
+}
+
+
 .model_responses_container td{
     max-width:180px;
 }