Update src/streamlit_app.py (#3)

- Update src/streamlit_app.py (d4421a9a8339431aa6a7eb00b0e30fa79e4f89c6)


Co-authored-by: Amy Liu <amyliiu@users.noreply.huggingface.co>

src/streamlit_app.py

@@ -17,13 +17,9 @@ def encode_image(image):
     return base64.b64encode(buffered.getvalue()).decode("utf-8")
 
 # Display logo
-# buffered = BytesIO()
-# logo_image.save(buffered, format="PNG")
-# img_data = base64.b64encode(buffered.getvalue()).decode("utf-8")
 img_logo = encode_image(logo_small)
 img_data = encode_image(logo_image)
 
-    # <div class="logo-container" style="display:flex; justify-content: center;">
 st.markdown(
     f"""
     <div class="logo-container" style="display:flex; justify-content: center; align-items: center; gap: 20px;">
@@ -49,6 +45,7 @@ st.markdown(
     ''',
     unsafe_allow_html=True
 )
+
 # ─── Load data ────────────────────────────────────────────────────────────────
 @st.cache_data
 def load_data(path):
@@ -64,7 +61,6 @@ def load_data(path):
 
 # one page description
 st.markdown("## 🏆 Leaderboard")
-# st.markdown("**Leaderboard:** higher scores shaded green; best models bolded.")
 
 tiers = ['F1', 'Accuracy']
 selected_tier = st.selectbox('Select metric:', tiers)
@@ -91,12 +87,15 @@ if selected_tier == 'F1':
             else:
                 rank = int(row[f"{col}_rank"])
                 norm = 1 - (rank - 1) / ((max_ranks[col] - 1) or 1)
-                # interpolate green (182,243,182) → white (255,255,255)
+                # interpolate green (182,243,182) → white/transparent for better contrast
                 r = int(255 - norm*(255-182))
                 g = int(255 - norm*(255-243))
                 b = 255
                 bold = "font-weight:bold;" if rank == 1 else ""
-                style = f"background-color:rgb({r},{g},{b}); padding:6px; {bold}"
+                
+                # Use dark text color for better contrast against light green backgrounds
+                text_color = "#000" if norm > 0.5 else "var(--text-color, #000)"
+                style = f"background-color:rgba({r},{g},{b},0.8); padding:6px; {bold} color:{text_color}; border: 1px solid #444;"
                 html += f"<td style='{style}'>{val}</td>"
         html += "</tr>"
     html += "</table>"
@@ -107,6 +106,7 @@ else:
     # Precompute max ranks for color scaling
     score_cols = [f"T{i}" for i in range(1, 12)] + ["Avg"]
     max_ranks = {col: df2[f"{col}_rank"].max() for col in score_cols}
+    
     # Build raw HTML table
     cols = ["Model"] + [f"T{i}" for i in range(1,12)] + ["Avg"]
     html = "<table style='border-collapse:collapse; width:100%; font-size:14px;'>"
@@ -123,12 +123,15 @@ else:
             else:
                 rank = int(row[f"{col}_rank"])
                 norm = 1 - (rank - 1) / ((max_ranks[col] - 1) or 1)
-                # interpolate green (182,243,182) → white (255,255,255)
+                # interpolate green (182,243,182) → white/transparent for better contrast
                 r = int(255 - norm*(255-182))
                 g = int(255 - norm*(255-243))
                 b = 255
                 bold = "font-weight:bold;" if rank == 1 else ""
-                style = f"background-color:rgb({r},{g},{b}); padding:6px; {bold}"
+                
+                # Use dark text color for better contrast against light green backgrounds
+                text_color = "#000" if norm > 0.5 else "var(--text-color, #000)"
+                style = f"background-color:rgba({r},{g},{b},0.8); padding:6px; {bold} color:{text_color}; border: 1px solid #444;"
                 html += f"<td style='{style}'>{val}</td>"
         html += "</tr>"
     html += "</table>"
@@ -136,8 +139,6 @@ else:
 
 
 
-
-
 pipeline_image = Image.open("src/pipeline.png")
 buffered2 = BytesIO()
 pipeline_image.save(buffered2, format="PNG")