Update app.py

app.py

@@ -1,4 +1,3 @@
-# app.py
 import gradio as gr
 import pandas as pd
 from math import isnan
@@ -69,20 +68,298 @@ def _controller(search, quick):
 
 CUSTOM_CSS = """
 :root {
-  --bg: #0e1116; --panel:#12161f; --text:#e6e6e6; --muted:#9aa3b2; --bar:#2ea043; --bar-bg:#1f2a36;
-}
-.gradio-container {background: var(--bg)!important; color: var(--text);}
-.lb-table { width:100%; border-collapse: collapse; }
-.lb-table thead th { background: var(--panel); padding: 10px; text-align:left; }
-.lb-table tbody td { padding: 10px; border-bottom: 1px solid #1d2430; }
-.lb-table td.rank { width:60px; font-weight:700; }
-.lb-table td.team { min-width:200px; }
-.cell { position:relative; height:20px; background: var(--bar-bg); border-radius:6px; }
-.cell .bar { position:absolute; left:0; top:0; bottom:0; background: var(--bar);}
-.cell .val { position:absolute; right:8px; top:0; bottom:0; display:flex; align-items:center; }
+  --bg: #ffffff; --panel:#f8f9fa; --text:#000000; --muted:#6c757d; --bar:#28a745; --bar-bg:#e9ecef;
+}
+
+/* Global Gradio container styling */
+.gradio-container {
+  background: var(--bg) !important;
+  color: var(--text) !important;
+}
+
+/* Main background */
+.main {
+  background: var(--bg) !important;
+}
+
+/* Panel backgrounds */
+.panel {
+  background: var(--panel) !important;
+}
+
+/* Text elements */
+h1, h2, h3, h4, h5, h6, p, span, div {
+  color: var(--text) !important;
+}
+
+/* Form elements */
+input, textarea, select {
+  background: #ffffff !important;
+  color: var(--text) !important;
+  border: 1px solid #ced4da !important;
+}
+
+/* Labels */
+label {
+  color: var(--text) !important;
+  font-weight: 500 !important;
+}
+
+/* Radio buttons */
+.radio-group {
+  background: var(--panel) !important;
+}
+
+.radio-group label {
+  color: var(--text) !important;
+}
+
+/* Buttons */
+button {
+  background: var(--bar) !important;
+  color: white !important;
+  border: none !important;
+}
+
+button:hover {
+  background: #218838 !important;
+}
+
+/* Table styling */
+.lb-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--bg) !important;
+}
+
+.lb-table thead th {
+  background: var(--panel) !important;
+  padding: 10px;
+  text-align: left;
+  color: var(--text) !important;
+  border-bottom: 2px solid #dee2e6 !important;
+}
+
+.lb-table tbody td {
+  padding: 10px;
+  border-bottom: 1px solid #dee2e6;
+  color: var(--text) !important;
+}
+
+.lb-table td.rank {
+  width: 60px;
+  font-weight: 700;
+  color: var(--text) !important;
+}
+
+.lb-table td.team {
+  min-width: 200px;
+  color: var(--text) !important;
+}
+
+/* Progress bars */
+.cell {
+  position: relative;
+  height: 20px;
+  background: var(--bar-bg);
+  border-radius: 6px;
+}
+
+.cell .bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background: var(--bar);
+}
+
+.cell .val {
+  position: absolute;
+  right: 8px;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  color: var(--text) !important;
+  font-weight: 500 !important;
+}
+
+/* Gradio specific overrides */
+.gradio-input, .gradio-output {
+  background: var(--bg) !important;
+  color: var(--text) !important;
+}
+
+.gradio-input input, .gradio-input textarea {
+  background: #ffffff !important;
+  color: var(--text) !important;
+  border: 1px solid #ced4da !important;
+}
+
+.gradio-input label {
+  color: var(--text) !important;
+}
+
+.gradio-radio {
+  background: var(--panel) !important;
+}
+
+.gradio-radio label {
+  color: var(--text) !important;
+}
+
+/* Search bar specific styling */
+.gradio-input-container {
+  background: var(--bg) !important;
+}
+
+.gradio-input-container label {
+  color: var(--text) !important;
+  background: var(--bg) !important;
+}
+
+/* Target the search input specifically */
+.gradio-input input[type="text"] {
+  background: #ffffff !important;
+  color: var(--text) !important;
+  border: 1px solid #ced4da !important;
+}
+
+/* Override any dark backgrounds on input containers */
+.gradio-input > div {
+  background: var(--bg) !important;
+}
+
+/* Ensure labels are black text on white background */
+.gradio-input label, .gradio-input-container label {
+  color: var(--text) !important;
+  background: var(--bg) !important;
+}
+
+/* Override any panel backgrounds that might be dark */
+.gradio-input .panel, .gradio-input .gradio-panel {
+  background: var(--bg) !important;
+}
+
+/* Force all input-related elements to have light backgrounds */
+.gradio-input, .gradio-input *, .gradio-input-container, .gradio-input-container * {
+  background: var(--bg) !important;
+}
+
+/* Override any dark backgrounds on the entire row containing search and filter */
+.gradio-row {
+  background: var(--bg) !important;
+}
+
+.gradio-row * {
+  background: var(--bg) !important;
+}
+
+/* Specific targeting for search and filter containers */
+.gradio-input[data-testid="textbox"], .gradio-input[data-testid="radio"] {
+  background: var(--bg) !important;
+}
+
+.gradio-input[data-testid="textbox"] label, .gradio-input[data-testid="radio"] label {
+  color: var(--text) !important;
+  background: var(--bg) !important;
+}
+
+/* Override any remaining dark backgrounds */
+.gradio-input, .gradio-input-container, .gradio-input-container > div {
+  background: var(--bg) !important;
+}
+
+/* Ensure the search input field itself is white */
+input[type="text"], input[placeholder*="Tìm team"] {
+  background: #ffffff !important;
+  color: var(--text) !important;
+  border: 1px solid #ced4da !important;
+}
+
+/* Aggressive override for the dark panel container */
+.gradio-input, .gradio-input-container, .gradio-input-container > div,
+.gradio-input > div, .gradio-input > div > div {
+  background: var(--bg) !important;
+  background-color: var(--bg) !important;
+}
+
+/* Force all elements in the search row to have white backgrounds */
+.gradio-row, .gradio-row > div, .gradio-row > div > div,
+.gradio-row .gradio-input, .gradio-row .gradio-input-container {
+  background: var(--bg) !important;
+  background-color: var(--bg) !important;
+}
+
+/* Override any remaining dark backgrounds with maximum specificity */
+.gradio-input, .gradio-input *, .gradio-input-container, .gradio-input-container *,
+.gradio-input > div, .gradio-input > div *, .gradio-input-container > div, .gradio-input-container > div * {
+  background: var(--bg) !important;
+  background-color: var(--bg) !important;
+}
+
+/* Target the specific search and filter components */
+.gradio-input[data-testid="textbox"], .gradio-input[data-testid="radio"],
+.gradio-input[data-testid="textbox"] *, .gradio-input[data-testid="radio"] * {
+  background: var(--bg) !important;
+  background-color: var(--bg) !important;
+}
+
+/* Override any CSS variables that might be setting dark backgrounds */
+.gradio-input, .gradio-input-container {
+  --background: var(--bg) !important;
+  --background-color: var(--bg) !important;
+  --panel-background: var(--bg) !important;
+  --panel-background-color: var(--bg) !important;
+}
+
+/* Target the dark panel wrapper specifically */
+.gradio-panel, .gradio-panel *, .gradio-container .gradio-panel,
+.gradio-container .gradio-panel *, .gradio-input .gradio-panel,
+.gradio-input .gradio-panel * {
+  background: var(--bg) !important;
+  background-color: var(--bg) !important;
+}
+
+/* Override any remaining dark backgrounds with !important */
+.gradio-input, .gradio-input-container, .gradio-input-container > div,
+.gradio-input > div, .gradio-input > div > div,
+.gradio-input > div > div > div, .gradio-input > div > div > div > div {
+  background: var(--bg) !important;
+  background-color: var(--bg) !important;
+}
+
+/* Force the entire search row to be white */
+.gradio-row, .gradio-row *, .gradio-row > div, .gradio-row > div *,
+.gradio-row > div > div, .gradio-row > div > div * {
+  background: var(--bg) !important;
+  background-color: var(--bg) !important;
+}
+
+/* Maximum specificity override for any dark backgrounds */
+.gradio-input, .gradio-input-container, .gradio-input-container > div,
+.gradio-input > div, .gradio-input > div *, .gradio-input-container > div,
+.gradio-input-container > div *, .gradio-input > div > div, .gradio-input > div > div *,
+.gradio-input > div > div > div, .gradio-input > div > div > div * {
+  background: var(--bg) !important;
+  background-color: var(--bg) !important;
+}
+
+/* Download button */
+.gradio-button {
+  background: var(--bar) !important;
+  color: white !important;
+  border: none !important;
+  padding: 8px 16px !important;
+  border-radius: 6px !important;
+}
+
+.gradio-button:hover {
+  background: #218838 !important;
+}
 """
 
-with gr.Blocks(css=CUSTOM_CSS) as demo:
+with gr.Blocks(theme=gr.themes.Soft(), css=CUSTOM_CSS) as demo:
     gr.Markdown("# 🏆 LegalSLM Leaderboard")
     with gr.Row():
         search = gr.Textbox(placeholder="Tìm team...", label="Search")
@@ -102,3 +379,124 @@ with gr.Blocks(css=CUSTOM_CSS) as demo:
 
 if __name__ == "__main__":
     demo.launch()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+# ########################################################____V1_____############################
+# # app.py
+# import gradio as gr
+# import pandas as pd
+# from math import isnan
+
+# ROWS = [
+#     {"Team_name":"Nguyen Quang Thao","vi-law-nli":0.5816,"vi-law-qa":0.8217,"vilaw-syllo":0.38,"Avg":0.5944333333},
+#     {"Team_name":"NHK","vi-law-nli":0.9333,"vi-law-qa":0.8683,"vilaw-syllo":0.3275,"Avg":0.7097},
+#     {"Team_name":"Innovation-LLM","vi-law-nli":0.9567,"vi-law-qa":0.8367,"vilaw-syllo":0.541666667,"Avg":0.7783555556},
+#     {"Team_name":"Bosch@AI Team","vi-law-nli":0.97,"vi-law-qa":0.9267,"vilaw-syllo":0.535833333,"Avg":0.8108444444},
+#     {"Team_name":"URAx","vi-law-nli":0.945,"vi-law-qa":0.8333,"vilaw-syllo":0.576666667,"Avg":0.7849888889},
+#     {"Team_name":"Abe","vi-law-nli":0.82,"vi-law-qa":0.84,"vilaw-syllo":0.2875,"Avg":0.6491666667},
+#     {"Team_name":"PSLV-Warrior","vi-law-nli":0.565,"vi-law-qa":0.0333,"vilaw-syllo":0.525,"Avg":0.3744333333},
+#     {"Team_name":"MinLegal","vi-law-nli":0.98,"vi-law-qa":0.8733,"vilaw-syllo":0.530833333,"Avg":0.7947111111},
+#     {"Team_name":"NLPhi","vi-law-nli":0.6517,"vi-law-qa":0.815,"vilaw-syllo":0.479166667,"Avg":0.6486222222},
+#     {"Team_name":"LICTU","vi-law-nli":0.8467,"vi-law-qa":0.8067,"vilaw-syllo":0.5375,"Avg":0.7303},
+# ]
+# BASE_DF = pd.DataFrame(ROWS)
+
+# NUM_COLS = ["vi-law-nli", "vi-law-qa", "vilaw-syllo", "Avg"]
+
+# def _prep_df(df: pd.DataFrame) -> pd.DataFrame:
+#     out = df.copy()
+#     for c in NUM_COLS:
+#         out[c] = pd.to_numeric(out[c], errors="coerce").astype(float).round(6)
+#     out = out.sort_values("Avg", ascending=False, kind="mergesort").reset_index(drop=True)
+#     out.insert(0, "Rank", range(1, len(out)+1))
+#     return out
+
+# def _bar_html(v: float) -> str:
+#     if v is None or (isinstance(v, float) and isnan(v)):
+#         return "-"
+#     pct = max(0.0, min(1.0, float(v))) * 100
+#     return f"<div class='cell'><div class='bar' style='width:{pct:.2f}%'></div><span class='val'>{v:.4f}</span></div>"
+
+# def _render_table(df: pd.DataFrame) -> str:
+#     cols = ["Rank","Team_name"]+NUM_COLS
+#     header = "".join([f"<th>{c}</th>" for c in cols])
+#     rows_html = []
+#     for _, row in df.iterrows():
+#         tds = [
+#             f"<td class='rank'>{int(row['Rank'])}</td>",
+#             f"<td class='team'>{row['Team_name']}</td>",
+#             f"<td>{_bar_html(row['vi-law-nli'])}</td>",
+#             f"<td>{_bar_html(row['vi-law-qa'])}</td>",
+#             f"<td>{_bar_html(row['vilaw-syllo'])}</td>",
+#             f"<td>{_bar_html(row['Avg'])}</td>",
+#         ]
+#         rows_html.append(f"<tr>{''.join(tds)}</tr>")
+#     return f"<table class='lb-table'><thead><tr>{header}</tr></thead><tbody>{''.join(rows_html)}</tbody></table>"
+
+# def _filter_and_sort(search: str, quick: str):
+#     df = BASE_DF.copy()
+#     if search:
+#         terms = [t.strip() for t in search.split(";") if t.strip()]
+#         for t in terms:
+#             df = df[df["Team_name"].str.contains(t, case=False, na=False)]
+#     if quick == "Top 3":
+#         df = df.sort_values("Avg", ascending=False).head(3)
+#     elif quick == "Top 5":
+#         df = df.sort_values("Avg", ascending=False).head(5)
+#     else:
+#         df = df.sort_values("Avg", ascending=False)
+#     return _prep_df(df)
+
+# def _controller(search, quick):
+#     df = _filter_and_sort(search, quick)
+#     return _render_table(df), df
+
+# CUSTOM_CSS = """
+# :root {
+#   --bg: #0e1116; --panel:#12161f; --text:#e6e6e6; --muted:#9aa3b2; --bar:#2ea043; --bar-bg:#1f2a36;
+# }
+# .gradio-container {background: var(--bg)!important; color: var(--text);}
+# .lb-table { width:100%; border-collapse: collapse; }
+# .lb-table thead th { background: var(--panel); padding: 10px; text-align:left; }
+# .lb-table tbody td { padding: 10px; border-bottom: 1px solid #1d2430; }
+# .lb-table td.rank { width:60px; font-weight:700; }
+# .lb-table td.team { min-width:200px; }
+# .cell { position:relative; height:20px; background: var(--bar-bg); border-radius:6px; }
+# .cell .bar { position:absolute; left:0; top:0; bottom:0; background: var(--bar);}
+# .cell .val { position:absolute; right:8px; top:0; bottom:0; display:flex; align-items:center; }
+# """
+
+# with gr.Blocks(css=CUSTOM_CSS) as demo:
+#     gr.Markdown("# 🏆 LegalSLM Leaderboard")
+#     with gr.Row():
+#         search = gr.Textbox(placeholder="Tìm team...", label="Search")
+#         quick = gr.Radio(choices=["All","Top 3","Top 5"], value="All", label="Quick Filter")
+#     html_table = gr.HTML(value=_render_table(_prep_df(BASE_DF)))
+#     csv_state = gr.State(_prep_df(BASE_DF))
+#     download = gr.DownloadButton("⬇️ Tải CSV")
+
+#     def _download(df):
+#         path = "/tmp/leaderboard.csv"
+#         df.to_csv(path,index=False)
+#         return path
+#     download.click(_download, inputs=[csv_state], outputs=download)
+
+#     for comp in [search, quick]:
+#         comp.change(_controller, [search, quick], [html_table, csv_state])
+
+# if __name__ == "__main__":
+#     demo.launch()