Spaces:

SorrowTea
/

PhotoBench-Leaderboard

Sleeping

Fix blank leaderboard, unify metric scale to

a262c5b about 1 month ago

14 kB

NAVIGATION = """
<div style="text-align:center; margin-bottom: 24px;">
    <div style="display:inline-flex; flex-wrap:wrap; gap:8px; justify-content:center;">
        <a href="https://github.com/LaVieEnRose365/PhotoBench" target="_blank" style="text-decoration:none;">
            <span style="display:inline-block; padding:8px 14px; background:#fff; border:1px solid #e8e0d8; border-radius:10px; color:#555; font-size:0.85em; font-weight:500; transition:all 0.2s;">🏠 GitHub</span>
        </a>
        <a href="https://arxiv.org/abs/2603.01493v1" target="_blank" style="text-decoration:none;">
            <span style="display:inline-block; padding:8px 14px; background:#fff; border:1px solid #e8e0d8; border-radius:10px; color:#555; font-size:0.85em; font-weight:500;">📄 arXiv</span>
        </a>
        <span style="display:inline-block; padding:8px 14px; background:#F37021; border:1px solid #F37021; border-radius:10px; color:#fff; font-size:0.85em; font-weight:600;">🏅 Leaderboard</span>
        <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 #e8e0d8; border-radius:10px; color:#555; font-size:0.85em; font-weight:500;">📦 Dataset</span>
        </a>
        <a href="https://huggingface.co/spaces/SorrowTea/PhotoBench-Protected/" target="_blank" style="text-decoration:none;">
            <span style="display:inline-block; padding:8px 14px; background:#fff; border:1px solid #e8e0d8; border-radius:10px; color:#545; font-size:0.85em; font-weight:500;">🏅 Protected Leaderboard</span>
        </a>
        <a href="https://huggingface.co/datasets/SorrowTea/PhotoBench-Protected" target="_blank" style="text-decoration:none;">
            <span style="display:inline-block; padding:8px 14px; background:#fff; border:1px solid #e8e0d8; border-radius:10px; color:#545; font-size:0.85em; font-weight:500;">📦 Protected Dataset</span>
        </a>
        <span style="display:inline-block; padding:8px 14px; background:#fff; border:1px solid #e8e0d8; border-radius:10px; color:#555; font-size:0.85em; font-weight:500;">
            🖼️ Raw Images:
            <a href="https://sbox.myoas.com/l/Be5be4053f6b43840" target="_blank" style="color:#555; text-decoration:none; font-weight:600;">obox</a>
            ·
            <a href="https://drive.google.com/drive/folders/1IyAlRskgnXG6pJ7fYL5Ie0SFDKZ95-cI?usp=drive_link" target="_blank" style="color:#555; text-decoration:none; font-weight:600;">Google Drive</a>
            (pwd: Oppo2026)
        </span>
    </div>
</div>
<script>
(function() {
    function cleanTitles() {
        document.querySelectorAll('.ag-header-cell, .ag-header-cell-label, .ag-header-cell-text, .ag-sort-indicator-container, .ag-header-cell-menu-button, .ag-header-icon').forEach(function(el) {
            el.removeAttribute('title');
        });
    }
    cleanTitles();
    if (window.MutationObserver) {
        var obs = new MutationObserver(cleanTitles);
        obs.observe(document.body, { childList: true, subtree: true });
    }
})();
</script>
"""

TITLE = """
<div style="text-align:center; padding: 48px 20px; background: linear-gradient(160deg, #faf8f5 0%, #f5f0eb 100%); border-radius: 20px; margin-bottom: 32px; border: 1px solid #e8e0d8;">
    <h1 style="color:#1a1a1a; font-size:3em; font-weight:600; letter-spacing:-1px; margin:0; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
        PhotoBench
    </h1>
    <p style="color:#F37021; font-size:1.1em; font-weight:500; letter-spacing:2px; margin:12px 0 0 0;">
        OFFICIAL LEADERBOARD
    </p>
    <div style="width:60px; height:3px; background:#F37021; margin:20px auto; border-radius:2px;"></div>
    <p style="color:#666; font-size:0.95em; margin-top:12px;">
        Open-ended Image Retrieval Benchmark
    </p>
</div>
"""

INTRODUCTION = """
<div style="text-align:center; margin:0 auto 40px; color:#444; line-height:1.8;">
<strong>PhotoBench</strong> is the first benchmark constructed from authentic, personal albums, designed to shift the paradigm from visual matching to personalized multi-source intent-driven photo retrieval.
This leaderboard provides the <strong>complete raw image collection</strong> for unrestricted image retrieval research.
Unlike the protected version, you are free to choose your own embedding model, caption generator, or agent-based workflow.
<a href="https://huggingface.co/datasets/SorrowTea/PhotoBench" target="_blank" style="color:#F37021; font-weight:600; text-decoration:none;">Download the dataset ↗</a> to get started, then submit your prediction results and see how your approach ranks on the leaderboard.
</div>
"""

SUBMISSION_GUIDE = """
### Submission Format
The dataset provides one `albumN_test.json` per album. You must **combine all albums into a single JSON array** and add the `album_id` field to each query before submitting.
**Example transformation:**
```python
import json
submission = []
for album_id in ["1", "2", "3"]:
    with open(f"album{album_id}_test.json") as f:
        queries = json.load(f)
    for q in queries:
        submission.append({
            "album_id": album_id,
            "query_en": q["query_en"],
            "pred": ["IMG_0001.JPG", "IMG_0002.JPG", ...]  # your predictions
        })
with open("submission.json", "w") as f:
    json.dump(submission, f, indent=2)
```
**Final submission format:**
```json
[
  {
    "album_id": "1",
    "query_en": "cluttered desk",
    "pred": ["IMG_1234.jpg", "IMG_5678.jpg", ...]
  }
]
```
**Required fields:**
- `album_id`: Album number (`"1"`, `"2"`, or `"3"` — string)
- `query_en`: The English query text (must match exactly, case-sensitive)
- `pred`: Ordered list of predicted image filenames (order matters for NDCG)
You may submit results for any subset of albums. Partial submissions are accepted and evaluated, but **only full submissions** (all 3 albums, all queries) are eligible for public leaderboard ranking.
"""

EVALUATION_INFO = """
### Evaluation Metrics
| Metric | Description |
|--------|-------------|
| **Recall@k** | Proportion of ground-truth images found in top-k predictions |
| **NDCG@k** | Normalized Discounted Cumulative Gain at rank k |
Supported k values: **1, 5, 10, 20, 50, 100**
Results are averaged across all evaluated queries per album, then averaged across albums for the final leaderboard score.
"""

METHOD_INFO = """
### Method Categories
- **Embedding** — Image/text embedding-based retrieval (e.g., CLIP, SigLIP)
- **Caption** — Caption-based indexing and retrieval
- **Agent** — LLM agent with multi-step planning and tool use
"""

ELIGIBILITY_INFO = """
### Why Isn't My Submission on the Leaderboard?
Evaluation and leaderboard ranking are two separate steps. **Every well-formed submission is fully evaluated and receives its metric scores** — no exceptions. However, **only complete submissions are eligible for the public leaderboard**. To be ranked, a submission must satisfy all three conditions:
1. **Cover all 3 albums** (album 1, 2, and 3). Missing any album disqualifies the entry.
2. **Answer every query.** The system matches each submitted item against the ground truth by `query_en`; only matched queries count. If any ground-truth queries are missing from your file, the submission is marked as *partial* and cannot be ranked. Extra queries (e.g., from an outdated `test.json`) are simply ignored — a few of them do not affect eligibility.
3. **Opt in to publish.** If "Publish to public leaderboard" is unchecked, your result is recorded privately and never appears on the board.
Why so strict? Leaderboard numbers must be comparable. If two methods answered different sets of queries, comparing their average scores would be meaningless — so only results that answer **every query in every album** are ranked.
If your submission does not appear on the leaderboard, the returned result tells you why, for example:
> Result saved but NOT eligible for leaderboard: incomplete submission (850/900 queries). Only full submissions across all 3 albums are ranked.
This is **not** a failure — your metrics are still computed and returned to you. Simply fill in the missing queries and resubmit (note: each email may submit once per hour).
Finally, for repeated submissions under the same email and model name, only the best-scoring entry is kept.
"""

custom_css = """
/* Apple-inspired modern clean theme */
body {
    background: #faf8f5 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 17px !important;
}
/* Tab buttons */
.tab-buttons button {
    font-weight: 500 !important;
    font-size: 0.9em !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 12px 24px !important;
    background: #f0ebe5 !important;
    color: #555 !important;
    border: none !important;
    transition: all 0.25s ease !important;
}
.tab-buttons button.selected {
    background: #fff !important;
    color: #1a1a1a !important;
    box-shadow: 0 -2px 0 #F37021 inset !important;
}
/* Primary buttons */
.gr-button-primary {
    background: #F37021 !important;
    border: none !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 0.95em !important;
    padding: 12px 28px !important;
    transition: all 0.25s ease !important;
}
.gr-button-primary:hover {
    background: #e5631a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(243,112,33,0.25) !important;
}
/* Markdown */
.markdown-text {
    margin: 0 auto;
    color: #333;
    line-height: 1.8;
    font-size: 1.05em;
}
/* DataFrame Table */
.gr-dataframe {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
    border: 1px solid #e8e0d8 !important;
    font-size: 0.95em !important;
}
.gr-dataframe th {
    background: #f5f0eb !important;
    color: #444 !important;
    font-weight: 600 !important;
    font-size: 0.8em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 14px 10px !important;
    border-bottom: 2px solid #e8e0d8 !important;
}
.gr-dataframe td {
    padding: 12px 10px !important;
    border-bottom: 1px solid #f0ebe5 !important;
    color: #333 !important;
}
.gr-dataframe tr:hover td {
    background: #fdf8f3 !important;
}
/* Inputs */
input, textarea, select {
    border-radius: 10px !important;
    border: 1px solid #d4ccc4 !important;
    background: #fff !important;
    font-size: 1em !important;
    padding: 10px 14px !important;
}
input:focus, textarea:focus, select:focus {
    border-color: #F37021 !important;
    box-shadow: 0 0 0 3px rgba(243,112,33,0.12) !important;
    outline: none !important;
}
/* Form containers */
.gr-form .gr-box {
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid #e8e0d8 !important;
    padding: 24px !important;
}
/* Labels */
.gr-input-label, .gr-dropdown-label {
    font-weight: 500 !important;
    color: #444 !important;
    font-size: 0.9em !important;
    margin-bottom: 6px !important;
}
/* JSON output */
.gr-json {
    border-radius: 12px !important;
    background: #faf8f5 !important;
    border: 1px solid #e8e0d8 !important;
    font-size: 0.9em !important;
}
/* Center submit form */
#submit-form-container {
    max-width: 600px;
    margin: 0 auto;
}
/* Section headers */
.gr-tab-item h3 {
    color: #1a1a1a !important;
    font-weight: 600 !important;
    font-size: 1.2em !important;
    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: #F37021 !important;
}
.toggle-switch input[type="checkbox"]:checked::after {
    transform: translateX(20px) !important;
}
/* Leaderboard controls alignment */
.leaderboard-controls {
    align-items: flex-end !important; /* Align items to the bottom */
    gap: 12px !important; /* Add space between controls */
}
/* Refresh button styling */
.refresh-btn {
    min-width: 0 !important; /* Override gradio default min-width */
    height: 42px !important; /* Match dropdown height */
    width: auto !important;
    padding: 8px 20px !important; /* Adjust padding */
    margin: 0 !important; /* Reset margin */
    font-size: 0.95em !important; /* Match other inputs */
    line-height: normal !important; /* Reset line-height */
    border-radius: 10px !important; /* Ensure all corners are rounded */
    background: #f0ebe5 !important;
    color: #555 !important;
    border: 1px solid #d4ccc4 !important;
    transition: all 0.2s ease !important;
}
.refresh-btn:hover {
    background: #e8e0d8 !important;
    border-color: #c8b8ae !important;
}
/* Hide ag-grid header menu button and tooltips to prevent mixed CN/EN UI */
.ag-header-cell-menu-button {
    display: none !important;
}
.ag-tooltip {
    display: none !important;
}
"""

	NAVIGATION = """
	<div style="text-align:center; margin-bottom: 24px;">
	<div style="display:inline-flex; flex-wrap:wrap; gap:8px; justify-content:center;">
	<a href="https://github.com/LaVieEnRose365/PhotoBench" target="_blank" style="text-decoration:none;">
	<span style="display:inline-block; padding:8px 14px; background:#fff; border:1px solid #e8e0d8; border-radius:10px; color:#555; font-size:0.85em; font-weight:500; transition:all 0.2s;">🏠 GitHub</span>
	</a>
	<a href="https://arxiv.org/abs/2603.01493v1" target="_blank" style="text-decoration:none;">
	<span style="display:inline-block; padding:8px 14px; background:#fff; border:1px solid #e8e0d8; border-radius:10px; color:#555; font-size:0.85em; font-weight:500;">📄 arXiv</span>
	</a>
	<span style="display:inline-block; padding:8px 14px; background:#F37021; border:1px solid #F37021; border-radius:10px; color:#fff; font-size:0.85em; font-weight:600;">🏅 Leaderboard</span>
	<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 #e8e0d8; border-radius:10px; color:#555; font-size:0.85em; font-weight:500;">📦 Dataset</span>
	</a>
	<a href="https://huggingface.co/spaces/SorrowTea/PhotoBench-Protected/" target="_blank" style="text-decoration:none;">
	<span style="display:inline-block; padding:8px 14px; background:#fff; border:1px solid #e8e0d8; border-radius:10px; color:#545; font-size:0.85em; font-weight:500;">🏅 Protected Leaderboard</span>
	</a>
	<a href="https://huggingface.co/datasets/SorrowTea/PhotoBench-Protected" target="_blank" style="text-decoration:none;">
	<span style="display:inline-block; padding:8px 14px; background:#fff; border:1px solid #e8e0d8; border-radius:10px; color:#545; font-size:0.85em; font-weight:500;">📦 Protected Dataset</span>
	</a>
	<span style="display:inline-block; padding:8px 14px; background:#fff; border:1px solid #e8e0d8; border-radius:10px; color:#555; font-size:0.85em; font-weight:500;">
	🖼️ Raw Images:
	<a href="https://sbox.myoas.com/l/Be5be4053f6b43840" target="_blank" style="color:#555; text-decoration:none; font-weight:600;">obox</a>
	·
	<a href="https://drive.google.com/drive/folders/1IyAlRskgnXG6pJ7fYL5Ie0SFDKZ95-cI?usp=drive_link" target="_blank" style="color:#555; text-decoration:none; font-weight:600;">Google Drive</a>
	(pwd: Oppo2026)
	</span>
	</div>
	</div>
	<script>
	(function() {
	function cleanTitles() {
	document.querySelectorAll('.ag-header-cell, .ag-header-cell-label, .ag-header-cell-text, .ag-sort-indicator-container, .ag-header-cell-menu-button, .ag-header-icon').forEach(function(el) {
	el.removeAttribute('title');
	});
	}
	cleanTitles();
	if (window.MutationObserver) {
	var obs = new MutationObserver(cleanTitles);
	obs.observe(document.body, { childList: true, subtree: true });
	}
	})();
	</script>
	"""

	TITLE = """
	<div style="text-align:center; padding: 48px 20px; background: linear-gradient(160deg, #faf8f5 0%, #f5f0eb 100%); border-radius: 20px; margin-bottom: 32px; border: 1px solid #e8e0d8;">
	<h1 style="color:#1a1a1a; font-size:3em; font-weight:600; letter-spacing:-1px; margin:0; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
	PhotoBench
	</h1>
	<p style="color:#F37021; font-size:1.1em; font-weight:500; letter-spacing:2px; margin:12px 0 0 0;">
	OFFICIAL LEADERBOARD
	</p>
	<div style="width:60px; height:3px; background:#F37021; margin:20px auto; border-radius:2px;"></div>
	<p style="color:#666; font-size:0.95em; margin-top:12px;">
	Open-ended Image Retrieval Benchmark
	</p>
	</div>
	"""

	INTRODUCTION = """
	<div style="text-align:center; margin:0 auto 40px; color:#444; line-height:1.8;">

	<strong>PhotoBench</strong> is the first benchmark constructed from authentic, personal albums, designed to shift the paradigm from visual matching to personalized multi-source intent-driven photo retrieval.
	This leaderboard provides the <strong>complete raw image collection</strong> for unrestricted image retrieval research.
	Unlike the protected version, you are free to choose your own embedding model, caption generator, or agent-based workflow.

	<a href="https://huggingface.co/datasets/SorrowTea/PhotoBench" target="_blank" style="color:#F37021; font-weight:600; text-decoration:none;">Download the dataset ↗</a> to get started, then submit your prediction results and see how your approach ranks on the leaderboard.

	</div>
	"""

	SUBMISSION_GUIDE = """
	### Submission Format

	The dataset provides one `albumN_test.json` per album. You must combine all albums into a single JSON array and add the `album_id` field to each query before submitting.

	Example transformation:

	```python
	import json

	submission = []
	for album_id in ["1", "2", "3"]:
	with open(f"album{album_id}_test.json") as f:
	queries = json.load(f)
	for q in queries:
	submission.append({
	"album_id": album_id,
	"query_en": q["query_en"],
	"pred": ["IMG_0001.JPG", "IMG_0002.JPG", ...] # your predictions
	})

	with open("submission.json", "w") as f:
	json.dump(submission, f, indent=2)
	```

	Final submission format:

	```json
	[
	{
	"album_id": "1",
	"query_en": "cluttered desk",
	"pred": ["IMG_1234.jpg", "IMG_5678.jpg", ...]
	}
	]
	```

	Required fields:
	- `album_id`: Album number (`"1"`, `"2"`, or `"3"` — string)
	- `query_en`: The English query text (must match exactly, case-sensitive)
	- `pred`: Ordered list of predicted image filenames (order matters for NDCG)

	You may submit results for any subset of albums. Partial submissions are accepted and evaluated, but only full submissions (all 3 albums, all queries) are eligible for public leaderboard ranking.
	"""

	EVALUATION_INFO = """
	### Evaluation Metrics

	\| Metric \| Description \|
	\|--------\|-------------\|
	\| Recall@k \| Proportion of ground-truth images found in top-k predictions \|
	\| NDCG@k \| Normalized Discounted Cumulative Gain at rank k \|

	Supported k values: 1, 5, 10, 20, 50, 100

	Results are averaged across all evaluated queries per album, then averaged across albums for the final leaderboard score.
	"""

	METHOD_INFO = """
	### Method Categories

	- Embedding — Image/text embedding-based retrieval (e.g., CLIP, SigLIP)
	- Caption — Caption-based indexing and retrieval
	- Agent — LLM agent with multi-step planning and tool use
	"""

	ELIGIBILITY_INFO = """
	### Why Isn't My Submission on the Leaderboard?

	Evaluation and leaderboard ranking are two separate steps. Every well-formed submission is fully evaluated and receives its metric scores — no exceptions. However, only complete submissions are eligible for the public leaderboard. To be ranked, a submission must satisfy all three conditions:

	1. Cover all 3 albums (album 1, 2, and 3). Missing any album disqualifies the entry.
	2. Answer every query. The system matches each submitted item against the ground truth by `query_en`; only matched queries count. If any ground-truth queries are missing from your file, the submission is marked as partial and cannot be ranked. Extra queries (e.g., from an outdated `test.json`) are simply ignored — a few of them do not affect eligibility.
	3. Opt in to publish. If "Publish to public leaderboard" is unchecked, your result is recorded privately and never appears on the board.

	Why so strict? Leaderboard numbers must be comparable. If two methods answered different sets of queries, comparing their average scores would be meaningless — so only results that answer every query in every album are ranked.

	If your submission does not appear on the leaderboard, the returned result tells you why, for example:

	> Result saved but NOT eligible for leaderboard: incomplete submission (850/900 queries). Only full submissions across all 3 albums are ranked.

	This is not a failure — your metrics are still computed and returned to you. Simply fill in the missing queries and resubmit (note: each email may submit once per hour).

	Finally, for repeated submissions under the same email and model name, only the best-scoring entry is kept.
	"""

	custom_css = """
	/* Apple-inspired modern clean theme */
	body {
	background: #faf8f5 !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
	font-size: 17px !important;
	}

	/* Tab buttons */
	.tab-buttons button {
	font-weight: 500 !important;
	font-size: 0.9em !important;
	border-radius: 10px 10px 0 0 !important;
	padding: 12px 24px !important;
	background: #f0ebe5 !important;
	color: #555 !important;
	border: none !important;
	transition: all 0.25s ease !important;
	}

	.tab-buttons button.selected {
	background: #fff !important;
	color: #1a1a1a !important;
	box-shadow: 0 -2px 0 #F37021 inset !important;
	}

	/* Primary buttons */
	.gr-button-primary {
	background: #F37021 !important;
	border: none !important;
	border-radius: 10px !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 0.95em !important;
	padding: 12px 28px !important;
	transition: all 0.25s ease !important;
	}

	.gr-button-primary:hover {
	background: #e5631a !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 20px rgba(243,112,33,0.25) !important;
	}

	/* Markdown */
	.markdown-text {
	margin: 0 auto;
	color: #333;
	line-height: 1.8;
	font-size: 1.05em;
	}

	/* DataFrame Table */
	.gr-dataframe {
	border-radius: 14px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
	border: 1px solid #e8e0d8 !important;
	font-size: 0.95em !important;
	}

	.gr-dataframe th {
	background: #f5f0eb !important;
	color: #444 !important;
	font-weight: 600 !important;
	font-size: 0.8em !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	padding: 14px 10px !important;
	border-bottom: 2px solid #e8e0d8 !important;
	}

	.gr-dataframe td {
	padding: 12px 10px !important;
	border-bottom: 1px solid #f0ebe5 !important;
	color: #333 !important;
	}

	.gr-dataframe tr:hover td {
	background: #fdf8f3 !important;
	}

	/* Inputs */
	input, textarea, select {
	border-radius: 10px !important;
	border: 1px solid #d4ccc4 !important;
	background: #fff !important;
	font-size: 1em !important;
	padding: 10px 14px !important;
	}

	input:focus, textarea:focus, select:focus {
	border-color: #F37021 !important;
	box-shadow: 0 0 0 3px rgba(243,112,33,0.12) !important;
	outline: none !important;
	}

	/* Form containers */
	.gr-form .gr-box {
	border-radius: 14px !important;
	background: #fff !important;
	border: 1px solid #e8e0d8 !important;
	padding: 24px !important;
	}

	/* Labels */
	.gr-input-label, .gr-dropdown-label {
	font-weight: 500 !important;
	color: #444 !important;
	font-size: 0.9em !important;
	margin-bottom: 6px !important;
	}

	/* JSON output */
	.gr-json {
	border-radius: 12px !important;
	background: #faf8f5 !important;
	border: 1px solid #e8e0d8 !important;
	font-size: 0.9em !important;
	}

	/* Center submit form */
	#submit-form-container {
	max-width: 600px;
	margin: 0 auto;
	}

	/* Section headers */
	.gr-tab-item h3 {
	color: #1a1a1a !important;
	font-weight: 600 !important;
	font-size: 1.2em !important;
	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: #F37021 !important;
	}

	.toggle-switch input[type="checkbox"]:checked::after {
	transform: translateX(20px) !important;
	}

	/* Leaderboard controls alignment */
	.leaderboard-controls {
	align-items: flex-end !important; /* Align items to the bottom */
	gap: 12px !important; /* Add space between controls */
	}

	/* Refresh button styling */
	.refresh-btn {
	min-width: 0 !important; /* Override gradio default min-width */
	height: 42px !important; /* Match dropdown height */
	width: auto !important;
	padding: 8px 20px !important; /* Adjust padding */
	margin: 0 !important; /* Reset margin */
	font-size: 0.95em !important; /* Match other inputs */
	line-height: normal !important; /* Reset line-height */
	border-radius: 10px !important; /* Ensure all corners are rounded */
	background: #f0ebe5 !important;
	color: #555 !important;
	border: 1px solid #d4ccc4 !important;
	transition: all 0.2s ease !important;
	}

	.refresh-btn:hover {
	background: #e8e0d8 !important;
	border-color: #c8b8ae !important;
	}

	/* Hide ag-grid header menu button and tooltips to prevent mixed CN/EN UI */
	.ag-header-cell-menu-button {
	display: none !important;
	}
	.ag-tooltip {
	display: none !important;
	}
	"""