Spaces:
Running
Running
| custom_css = """ | |
| /* Reset any Gradio overflow restrictions */ | |
| * { box-sizing: border-box; } | |
| .markdown-text { font-size: 16px !important; } | |
| .welcome-banner { | |
| background: linear-gradient(135deg, #a8b5f7 0%, #c9a8f7 100%); | |
| color: #333; | |
| padding: 25px; | |
| border-radius: 12px; | |
| margin: 20px 10px; | |
| text-align: center; | |
| box-shadow: 0 4px 15px rgba(168, 181, 247, 0.3); | |
| } | |
| .welcome-banner h2 { margin: 0 0 10px 0; font-size: 1.5em; color: #333; } | |
| .welcome-banner p { margin: 0; font-size: 1.1em; color: #444; } | |
| /* Modern, clean leaderboard table - no border */ | |
| .leaderboard-table { | |
| width: 100%; | |
| min-width: 30px; | |
| border-collapse: collapse; | |
| background: #fff; | |
| border-radius: 12px; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| } | |
| .leaderboard-table thead { | |
| background: linear-gradient(135deg, #a8b5f7 0%, #c9a8f7 100%); | |
| } | |
| .leaderboard-table th { | |
| padding: 16px 10px; | |
| text-align: center; | |
| font-weight: 700; | |
| font-size: 14px; | |
| cursor: pointer; | |
| user-select: none; | |
| border: none; | |
| color: #4a3a6e; | |
| } | |
| .leaderboard-table th:hover { background: rgba(255,255,255,0.2); } | |
| .leaderboard-table th.sortable::after { content: ' ↕'; opacity: 0.5; font-size: 11px; } | |
| .leaderboard-table th.sort-asc::after { content: ' ↑'; opacity: 1; } | |
| .leaderboard-table th.sort-desc::after { content: ' ↓'; opacity: 1; } | |
| .leaderboard-table td { | |
| padding: 12px 8px; | |
| text-align: center; | |
| font-size: 12px; | |
| color: #333; | |
| border-bottom: 1px solid #f0f0f0; | |
| border-left: none; | |
| border-right: none; | |
| } | |
| .leaderboard-table tbody tr:hover { background-color: #fafafa; } | |
| .leaderboard-table tbody tr:last-child td { border-bottom: none; } | |
| .aup-score { font-size: 17px; font-weight: 700; color: #333; display: block; } | |
| .sub-metrics { font-size: 9px; color: #999; display: block; margin-top: 2px; } | |
| .method-cell { | |
| text-align: center !important; | |
| font-weight: 600; | |
| min-width: 100px; | |
| } | |
| .method-cell a { | |
| color: #5a3d8a; | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| font-size: 15px; | |
| } | |
| .method-cell a:hover { color: #3d2760; text-decoration: underline; } | |
| .rank-cell { font-size: 16px; } | |
| .type-cell { min-width: 45px; font-size: 9px; } | |
| .foundation-cell { min-width: 60px; font-size: 9px; } | |
| .avg-cell { background-color: #f8f7ff; } | |
| .avg-cell .aup-score { font-size: 18px; color: #5a3d8a; font-weight: 700; } | |
| /* Type badges - rounded pill style */ | |
| .type-badge { | |
| display: inline-block; | |
| padding: 2px 6px; | |
| border-radius: 10px; | |
| font-size: 8px; | |
| font-weight: 600; | |
| } | |
| .type-badge.ar { background-color: #B93413; color: #fff; } | |
| .type-badge.dllm { background-color: #193D3A; color: #fff; } | |
| /* Foundation badges - low saturation colors, pill style */ | |
| .foundation-badge { | |
| display: inline-block; | |
| padding: 2px 6px; | |
| border-radius: 10px; | |
| font-size: 8px; | |
| font-weight: 500; | |
| } | |
| .foundation-badge.f0 { background-color: #e8e4f0; color: #5a4a6e; } | |
| .foundation-badge.f1 { background-color: #e4ecf0; color: #4a5a6e; } | |
| .foundation-badge.f2 { background-color: #e4f0e8; color: #4a6e5a; } | |
| .foundation-badge.f3 { background-color: #f0e8e4; color: #6e5a4a; } | |
| .foundation-badge.f4 { background-color: #f0e4ec; color: #6e4a5a; } | |
| .foundation-badge.f5 { background-color: #ecf0e4; color: #5a6e4a; } | |
| .foundation-badge.f6 { background-color: #e4e8f0; color: #4a5a6e; } | |
| .foundation-badge.f7 { background-color: #f0ece4; color: #6e5a4a; } | |
| .foundation-badge.f8 { background-color: #e8f0ec; color: #4a6e5e; } | |
| .foundation-badge.f9 { background-color: #f0e4e4; color: #6e4a4a; } | |
| .rank-medal { font-size: 16px; } | |
| .rank-medal .top-medal { font-size: 24px; } | |
| .tab-buttons button { font-size: 16px; } | |
| .tip-text { font-size: 12px; color: #888; font-style: italic; margin: 8px 0 15px 0; } | |
| /* Container and layout - force overflow to work */ | |
| html, body { overflow-x: auto !important; } | |
| .gradio-container { | |
| max-width: 1400px !important; | |
| margin: auto !important; | |
| padding: 0 5px !important; | |
| } | |
| .tabs, .tabitem, .tabitem > div, #component-0, .contain, .block, .wrap, .prose { | |
| width: 100% !important; | |
| height: auto !important; | |
| min-height: auto !important; | |
| max-height: none !important; | |
| } | |
| .tabitem[style*="display: none"] { display: none !important; } | |
| /* Table wrapper - critical for horizontal scroll */ | |
| .table-wrapper { | |
| width: 100%; | |
| overflow-x: scroll !important; | |
| overflow-y: visible; | |
| -webkit-overflow-scrolling: touch; | |
| display: block; | |
| padding-bottom: 15px; | |
| } | |
| /* Content wrapper */ | |
| .content-wrapper { | |
| width: 100%; | |
| max-width: 100%; | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| box-sizing: border-box; | |
| } | |
| /* Responsive font sizes for smaller screens */ | |
| @media (max-width: 1000px) { | |
| .welcome-banner { padding: 20px 15px; margin: 15px 5px; } | |
| .welcome-banner h2 { font-size: 1.3em; } | |
| .welcome-banner p { font-size: 1em; } | |
| } | |
| @media (max-width: 600px) { | |
| .welcome-banner { padding: 15px 10px; margin: 10px 5px; } | |
| .welcome-banner h2 { font-size: 1.1em; } | |
| .welcome-banner p { font-size: 0.9em; } | |
| } | |
| """ | |
| sort_table_js = """ | |
| <script> | |
| (function() { | |
| function initSort() { | |
| const table = document.querySelector('.leaderboard-table'); | |
| if (!table) { setTimeout(initSort, 100); return; } | |
| const headers = table.querySelectorAll('th'); | |
| let currentSort = { col: -1, dir: 'desc' }; | |
| headers.forEach((th, idx) => { | |
| if (idx < 4) return; | |
| th.classList.add('sortable'); | |
| th.onclick = function() { sortTable(idx); }; | |
| }); | |
| function sortTable(colIdx) { | |
| const tbody = table.querySelector('tbody'); | |
| const rows = Array.from(tbody.querySelectorAll('tr')); | |
| const dir = (currentSort.col === colIdx && currentSort.dir === 'desc') ? 'asc' : 'desc'; | |
| currentSort = { col: colIdx, dir }; | |
| headers.forEach((h, i) => { | |
| h.classList.remove('sort-asc', 'sort-desc'); | |
| if (i === colIdx) h.classList.add('sort-' + dir); | |
| }); | |
| rows.sort((a, b) => { | |
| const aEl = a.cells[colIdx].querySelector('.aup-score'); | |
| const bEl = b.cells[colIdx].querySelector('.aup-score'); | |
| const aVal = parseFloat(aEl ? aEl.textContent : '0') || 0; | |
| const bVal = parseFloat(bEl ? bEl.textContent : '0') || 0; | |
| return dir === 'desc' ? bVal - aVal : aVal - bVal; | |
| }); | |
| rows.forEach((row, i) => { | |
| const rankCell = row.cells[0]; | |
| const medal = i < 3 ? ['🥇', '🥈', '🥉'][i] : (i + 1); | |
| rankCell.innerHTML = '<span class="rank-medal">' + medal + '</span>'; | |
| tbody.appendChild(row); | |
| }); | |
| } | |
| } | |
| if (document.readyState === 'loading') { | |
| document.addEventListener('DOMContentLoaded', initSort); | |
| } else { | |
| initSort(); | |
| } | |
| })(); | |
| </script> | |
| """ | |
| # Foundation model to badge class mapping | |
| FOUNDATION_COLORS = {} | |
| _foundation_idx = 0 | |
| def get_foundation_class(foundation): | |
| global _foundation_idx, FOUNDATION_COLORS | |
| if foundation not in FOUNDATION_COLORS: | |
| FOUNDATION_COLORS[foundation] = f"f{_foundation_idx % 10}" | |
| _foundation_idx += 1 | |
| return FOUNDATION_COLORS[foundation] | |