Update miniapp_leaderboard.py

miniapp_leaderboard.py

@@ -50,7 +50,7 @@ NUMERIC_COLS = [
     "Lifestyle",
 ]
 
-# Avg 最左 + 多级表头展示用
+# 展示顺序：Avg 最左
 DISPLAY_ORDER = [
     "Avg",
     "Model name",
@@ -211,7 +211,7 @@ def _submitted_today(username: str) -> bool:
     return any(str(v).startswith(today) for v in user_rows["Submitted at"].tolist())
 
 
-# ---------- HTML Leaderboard helpers ----------
+# ---------- HTML Leaderboard ----------
 def _fmt_cell(v):
     if v is None or (isinstance(v, float) and pd.isna(v)):
         return ""
@@ -221,12 +221,10 @@ def _fmt_cell(v):
 
 
 def _apply_search_and_sort(df: pd.DataFrame, search_text: str, sort_col: str, sort_dir: str) -> pd.DataFrame:
-    # 搜索仅 Model name
     s = (search_text or "").strip().lower()
     if s:
         df = df[df["Model name"].astype(str).str.lower().str.contains(s, na=False)]
 
-    # 排序
     sort_col = sort_col if sort_col in df.columns else "Avg"
     asc = sort_dir == "asc"
     df = df.sort_values(by=[sort_col], ascending=asc, kind="stable", na_position="last")
@@ -236,13 +234,15 @@ def _apply_search_and_sort(df: pd.DataFrame, search_text: str, sort_col: str, so
 def _render_leaderboard_html(df: pd.DataFrame, sort_col: str, sort_dir: str) -> str:
     import html as _html
 
-    def th(label, col=None, cls=""):
+    def th(label, col=None, align_left=False, cls=""):
         if col:
             arrow = ""
             if col == sort_col:
-                arrow = " ▲" if sort_dir == "asc" else " ▼"
-            return f'<th class="clickable {cls}" data-col="{_html.escape(col)}">{_html.escape(label)}{arrow}</th>'
-        return f'<th class="{cls}">{_html.escape(label)}</th>'
+                arrow = " ↑" if sort_dir == "asc" else " ↓"
+            al = " left" if align_left else ""
+            return f'<th class="h clickable{al} {cls}" data-col="{_html.escape(col)}">{_html.escape(label)}{arrow}</th>'
+        al = " left" if align_left else ""
+        return f'<th class="h{al} {cls}">{_html.escape(label)}</th>'
 
     trs = []
     for _, r in df.iterrows():
@@ -250,44 +250,46 @@ def _render_leaderboard_html(df: pd.DataFrame, sort_col: str, sort_dir: str) ->
         for c in DISPLAY_ORDER:
             val = _fmt_cell(r.get(c, ""))
             if c == "Model name":
-                tds.append(f'<td class="model">{_html.escape(val)}</td>')
+                tds.append(f'<td class="cell model">{_html.escape(val)}</td>')
             else:
-                tds.append(f'<td class="num">{_html.escape(val)}</td>')
-        trs.append("<tr>" + "".join(tds) + "</tr>")
+                tds.append(f'<td class="cell num">{_html.escape(val)}</td>')
+        trs.append("<tr class='r'>" + "".join(tds) + "</tr>")
 
     return f"""
-    <div class="lb-wrap">
-      <table class="lb" id="lb_table">
-        <thead>
-          <tr class="top">
-            {th("Avg. (%)", "Avg", "avg")}
-            {th("Model", "Model name", "model")}
-            <th class="group" colspan="9">Pass Rate (%)</th>
-          </tr>
-          <tr class="mid">
-            <th></th>
-            <th></th>
-            <th class="group" colspan="3">Difficulty</th>
-            <th class="group" colspan="6">Domain</th>
-          </tr>
-          <tr class="bot">
-            <th></th>
-            <th></th>
-            {th("Easy", "Easy")}
-            {th("Mid", "Mid")}
-            {th("Hard", "Hard")}
-            {th("Games", "Games")}
-            {th("Science", "Science")}
-            {th("Tools", "Tools")}
-            {th("Humanities", "Humanities")}
-            {th("Viz.", "Viz")}
-            {th("Lifestyle", "Lifestyle")}
-          </tr>
-        </thead>
-        <tbody>
-          {''.join(trs)}
-        </tbody>
-      </table>
+    <div class="lb-card">
+      <div class="lb-scroll">
+        <table class="lb" id="lb_table">
+          <thead>
+            <tr class="t1">
+              {th("Avg. (%)", "Avg", cls="avg")}
+              {th("Model", "Model name", align_left=True, cls="model")}
+              <th class="h group" colspan="9">Pass Rate (%)</th>
+            </tr>
+            <tr class="t2">
+              <th class="h"></th>
+              <th class="h"></th>
+              <th class="h group" colspan="3">Difficulty</th>
+              <th class="h group" colspan="6">Domain</th>
+            </tr>
+            <tr class="t3">
+              <th class="h"></th>
+              <th class="h"></th>
+              {th("Easy", "Easy")}
+              {th("Mid", "Mid")}
+              {th("Hard", "Hard")}
+              {th("Games", "Games")}
+              {th("Science", "Science")}
+              {th("Tools", "Tools")}
+              {th("Humanities", "Humanities")}
+              {th("Viz.", "Viz")}
+              {th("Lifestyle", "Lifestyle")}
+            </tr>
+          </thead>
+          <tbody>
+            {''.join(trs)}
+          </tbody>
+        </table>
+      </div>
     </div>
     """
 
@@ -316,7 +318,6 @@ def submit(
     sort_dir: str,
     profile: gr.OAuthProfile | None,
 ):
-    # Login required to submit (in Spaces)
     if IN_SPACES and (profile is None or not getattr(profile, "username", None)):
         return "You must log in to submit.", render_lb(search_text, sort_col, sort_dir)
 
@@ -387,68 +388,103 @@ def submit(
 
 
 CSS = r"""
-/* 顶部一行：搜索不明显 */
-#topbar { display:flex; align-items:center; gap:10px; }
-#searchbox { max-width: 320px; }
+/* 让 Blocks 内容更贴边、更像网站 */
+.gradio-container { max-width: 100% !important; }
+#page { padding: 18px 18px 28px 18px; }
+
+/* 顶部一行 */
+#topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
+#titleline { font-weight: 700; font-size: 20px; line-height: 1; }
+#searchbox { width: 280px; }
 #searchbox label { display:none !important; }
 #searchbox textarea, #searchbox input {
+  height: 36px !important;
+  border-radius: 10px !important;
   border: 1px solid rgba(0,0,0,.10) !important;
   background: rgba(0,0,0,.02) !important;
   box-shadow: none !important;
 }
 #searchbox textarea::placeholder, #searchbox input::placeholder { color: rgba(0,0,0,.35); }
 
-/* 表格风格接近截图 */
-.lb-wrap { width: 100%; overflow-x: auto; }
-table.lb { width: 100%; border-collapse: collapse; font-family: serif; }
-table.lb thead th { text-align:center; font-weight:700; padding:10px 8px; border-bottom:1px solid #222; white-space:nowrap; }
-table.lb thead tr.top th { border-top:2px solid #222; font-size: 22px; }
-table.lb thead tr.mid th { border-bottom:1px solid #777; font-weight:700; padding-top:6px; padding-bottom:6px; font-size: 20px; }
-table.lb thead tr.bot th { border-bottom:2px solid #222; padding-top:8px; padding-bottom:8px; font-size: 20px; }
-
-table.lb tbody td { padding:10px 10px; border-bottom:1px solid rgba(0,0,0,.08); font-family: sans-serif; font-size: 14px; }
-table.lb tbody td.num { text-align:right; }
-table.lb tbody td.model { text-align:left; min-width:260px; }
-
-th.group { font-weight:800; letter-spacing:.2px; }
-th.avg { min-width:100px; }
-th.model { text-align:left; min-width:260px; }
-
-/* 点击排序 */
-th.clickable { user-select:none; }
-th.clickable:hover { background: rgba(0,0,0,.04); cursor:pointer; }
+/* 卡片式表格 */
+.lb-card{
+  width: 100%;
+  border: 1px solid rgba(0,0,0,.08);
+  border-radius: 14px;
+  background: white;
+}
+.lb-scroll { width: 100%; overflow-x: auto; }
+table.lb { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1100px; }
+table.lb thead th.h{
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
+  font-weight: 700;
+  font-size: 13px;
+  color: rgba(0,0,0,.75);
+  padding: 10px 12px;
+  text-align: center;
+  border-bottom: 1px solid rgba(0,0,0,.08);
+  background: rgba(0,0,0,.02);
+  white-space: nowrap;
+}
+table.lb thead tr.t1 th { border-bottom: 1px solid rgba(0,0,0,.10); }
+table.lb thead tr.t2 th { background: rgba(0,0,0,.015); }
+table.lb thead th.left{ text-align:left; }
+table.lb thead th.group{
+  font-weight: 800;
+  color: rgba(0,0,0,.80);
+}
 
-/* 提交区紧凑 */
-#submitbox { max-width: 720px; }
+table.lb tbody td.cell{
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
+  font-size: 13px;
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(0,0,0,.06);
+  background: white;
+}
+table.lb tbody tr.r:hover td { background: rgba(0,0,0,.02); }
+td.num { text-align:right; }
+td.model { text-align:left; min-width: 280px; }
+th.avg, td.avg { min-width: 90px; }
+
+th.clickable { cursor: pointer; user-select: none; }
+th.clickable:hover { background: rgba(0,0,0,.05); }
+
+/* 提交区：全宽卡片 */
+#submit_card{
+  width: 100%;
+  border: 1px solid rgba(0,0,0,.08);
+  border-radius: 14px;
+  padding: 14px;
+  background: white;
+}
+#submit_card .prose { margin: 0 0 10px 0; color: rgba(0,0,0,.72); font-size: 13px; }
 """
 
-
 with gr.Blocks(title=f"{APP_NAME} leaderboard") as demo:
-    gr.Markdown(f"## {APP_NAME} leaderboard")
-
-    with gr.Row(elem_id="topbar"):
-        search_text = gr.Textbox(
-            elem_id="searchbox",
-            placeholder="Search model…",
-            show_label=False,
-            container=False,
-            scale=1,
-        )
-        refresh_btn = gr.Button("Refresh", scale=0)
-
-    # 排序状态
-    sort_col = gr.State("Avg")
-    sort_dir = gr.State("desc")
-
-    # HTML leaderboard
-    lb_html = gr.HTML(value=render_lb("", "Avg", "desc"))
-
-    # 用 elem_id 精确定位的隐藏输入：JS 写入点击列名
-    clicked_col = gr.Textbox(visible=False, elem_id="clicked_col")
-
-    # JS：绑定表头点击，把 data-col 写入隐藏 textbox
-    gr.HTML(
-        """
+    with gr.Column(elem_id="page"):
+        # 顶部栏：左标题，右搜索 + 刷新（同一行，不显眼）
+        with gr.Row(elem_id="topbar"):
+            gr.Markdown(f"<div id='titleline'>{APP_NAME} leaderboard</div>")
+            with gr.Row():
+                search_text = gr.Textbox(
+                    elem_id="searchbox",
+                    placeholder="Search model…",
+                    show_label=False,
+                    container=False,
+                    scale=1,
+                )
+                refresh_btn = gr.Button("Refresh", scale=0)
+
+        sort_col = gr.State("Avg")
+        sort_dir = gr.State("desc")
+
+        lb_html = gr.HTML(value=render_lb("", "Avg", "desc"))
+
+        clicked_col = gr.Textbox(visible=False, elem_id="clicked_col")
+
+        # JS：表头点击 -> 写入隐藏 textbox -> 触发 change
+        gr.HTML(
+            """
 <script>
 (function(){
   function bindClicks(){
@@ -466,51 +502,54 @@ with gr.Blocks(title=f"{APP_NAME} leaderboard") as demo:
     });
   }
 
-  // 首次 + 每次页面更新后都尝试重新绑定
   const obs = new MutationObserver(()=>bindClicks());
   obs.observe(document.body, {subtree:true, childList:true});
-  setTimeout(bindClicks, 300);
+  setTimeout(bindClicks, 250);
 })();
 </script>
 """
-    )
+        )
 
-    # 搜索/刷新：重新渲染 HTML
-    search_text.change(render_lb, inputs=[search_text, sort_col, sort_dir], outputs=[lb_html])
-    refresh_btn.click(render_lb, inputs=[search_text, sort_col, sort_dir], outputs=[lb_html])
+        search_text.change(render_lb, inputs=[search_text, sort_col, sort_dir], outputs=[lb_html])
+        refresh_btn.click(render_lb, inputs=[search_text, sort_col, sort_dir], outputs=[lb_html])
 
-    # 点击列名：更新排序状态 + 重新渲染
-    def _on_click(col, cur_col, cur_dir, s):
-        new_col, new_dir = toggle_sort(col, cur_col, cur_dir)
-        return new_col, new_dir, render_lb(s, new_col, new_dir)
+        def _on_click(col, cur_col, cur_dir, s):
+            new_col, new_dir = toggle_sort(col, cur_col, cur_dir)
+            return new_col, new_dir, render_lb(s, new_col, new_dir)
 
-    clicked_col.change(
-        _on_click,
-        inputs=[clicked_col, sort_col, sort_dir, search_text],
-        outputs=[sort_col, sort_dir, lb_html],
-    )
+        clicked_col.change(
+            _on_click,
+            inputs=[clicked_col, sort_col, sort_dir, search_text],
+            outputs=[sort_col, sort_dir, lb_html],
+        )
 
-    gr.Markdown(
-        "### Submission\n"
-        "- Submit **Model API URL** and **API key** only\n"
-        "- Requires login (in Spaces)\n"
-        "- One submission per user per day\n"
-        "- HF account must be older than 4 months\n"
-        "- API key **will not be stored**"
-    )
+        # 提交：全宽卡片 + 两列输入
+        gr.HTML(
+            """
+<div id="submit_card">
+  <div class="prose">
+    <b>Submission</b> — Submit <b>Model API URL</b> and <b>API key</b> only.
+    Requires login (Spaces). One submission per user per day. Account must be older than 4 months.
+    API key will <b>not</b> be stored.
+  </div>
+</div>
+"""
+        )
 
-    with gr.Column(elem_id="submitbox"):
-        model_api = gr.Textbox(label="Model API URL (required)", placeholder="https://...")
-        api_key = gr.Textbox(label="API key (required)", type="password", placeholder="Will not be stored")
-        with gr.Row():
-            gr.LoginButton()
-            submit_btn = gr.Button("Submit", variant="primary")
-        status = gr.Markdown()
-
-    submit_btn.click(
-        submit,
-        inputs=[model_api, api_key, search_text, sort_col, sort_dir],
-        outputs=[status, lb_html],
-    )
+        # 用 Column/Row 做“占满横向”的提交表单
+        with gr.Column():
+            with gr.Row():
+                model_api = gr.Textbox(label="Model API URL", placeholder="https://...", scale=3)
+                api_key = gr.Textbox(label="API key", type="password", placeholder="Will not be stored", scale=2)
+            with gr.Row():
+                gr.LoginButton()
+                submit_btn = gr.Button("Submit", variant="primary")
+            status = gr.Markdown()
+
+        submit_btn.click(
+            submit,
+            inputs=[model_api, api_key, search_text, sort_col, sort_dir],
+            outputs=[status, lb_html],
+        )
 
 demo.launch(css=CSS, ssr_mode=False)