Add toggle switch, compact layout, sync nav labels

app.py

@@ -166,12 +166,14 @@ with gr.Blocks(css=custom_css, title="PhotoBench-Protected Leaderboard") as demo
         # === Tab 1: Leaderboard ===
         with gr.TabItem("🏅 Leaderboard"):
             with gr.Row():
-                sort_by = gr.Dropdown(
-                    choices=ALL_METRIC_COLS,
-                    value="Recall@10",
-                    label="Sort by",
-                )
-            refresh_btn = gr.Button("Refresh", variant="primary")
+                with gr.Column(scale=3):
+                    sort_by = gr.Dropdown(
+                        choices=ALL_METRIC_COLS,
+                        value="Recall@10",
+                        label="Sort by",
+                    )
+                with gr.Column(scale=1):
+                    refresh_btn = gr.Button("Refresh", variant="primary")
             leaderboard_table = gr.DataFrame(
                 label="Top 30",
                 interactive=False,
@@ -214,6 +216,7 @@ with gr.Blocks(css=custom_css, title="PhotoBench-Protected Leaderboard") as demo
                             opt_in_toggle = gr.Checkbox(
                                 label="Publish to public leaderboard",
                                 value=True,
+                                elem_classes=["toggle-switch"],
                             )
                             submit_btn = gr.Button("Submit for Evaluation", variant="primary")
 

src/about.py

@@ -11,7 +11,7 @@ NAVIGATION = """
             <span style="display:inline-block; padding:8px 14px; background:#fff; border:1px solid #d4e0c8; border-radius:10px; color:#555; font-size:0.85em; font-weight:500;">🏅 Leaderboard</span>
         </a>
         <a href="https://huggingface.co/datasets/SorrowTea/PhotoBench" target="_blank" style="text-decoration:none;">
-            <span style="display:inline-block; padding:8px 14px; background:#fff; border:1px solid #d4e0c8; border-radius:10px; color:#555; font-size:0.85em; font-weight:500;">📊 Dataset</span>
+            <span style="display:inline-block; padding:8px 14px; background:#fff; border:1px solid #d4e0c8; border-radius:10px; color:#555; font-size:0.85em; font-weight:500;">📦 Dataset</span>
         </a>
         <span style="display:inline-block; padding:8px 14px; background:#7CB342; border:1px solid #7CB342; border-radius:10px; color:#fff; font-size:0.85em; font-weight:600;">🛡️ Protected Leaderboard</span>
         <a href="https://huggingface.co/datasets/SorrowTea/PhotoBench-Protected" target="_blank" style="text-decoration:none;">
@@ -232,4 +232,41 @@ input:focus, textarea:focus, select:focus {
     margin-top: 24px;
     margin-bottom: 12px;
 }
+
+/* Toggle switch for opt-in checkbox */
+.toggle-switch input[type="checkbox"] {
+    appearance: none !important;
+    -webkit-appearance: none !important;
+    width: 44px !important;
+    height: 24px !important;
+    background: #ccc !important;
+    border-radius: 12px !important;
+    position: relative !important;
+    cursor: pointer !important;
+    outline: none !important;
+    transition: background 0.3s ease !important;
+    flex-shrink: 0 !important;
+    vertical-align: middle !important;
+}
+
+.toggle-switch input[type="checkbox"]::after {
+    content: '' !important;
+    position: absolute !important;
+    width: 20px !important;
+    height: 20px !important;
+    background: white !important;
+    border-radius: 50% !important;
+    top: 2px !important;
+    left: 2px !important;
+    transition: transform 0.3s ease !important;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
+}
+
+.toggle-switch input[type="checkbox"]:checked {
+    background: #7CB342 !important;
+}
+
+.toggle-switch input[type="checkbox"]:checked::after {
+    transform: translateX(20px) !important;
+}
 """