Spaces:
Running
Running
| # Gradio custom styles for the TSFM Realworld Bench leaderboard. | |
| custom_css = """ | |
| :root { | |
| --bench-ink: #18202f; | |
| --bench-muted: #5b6575; | |
| --bench-line: #d7dce5; | |
| --bench-panel: #f8fafc; | |
| --bench-blue: #2563eb; | |
| --bench-teal: #0f766e; | |
| --leaderboard-model-column-width: 180px; | |
| --leaderboard-metric-column-width: 118px; | |
| --leaderboard-rank-table-min-width: 1620px; | |
| } | |
| .gradio-container { | |
| max-width: 1320px !important; | |
| margin: 0 auto !important; | |
| } | |
| .markdown-text { | |
| font-size: 16px !important; | |
| color: var(--bench-muted); | |
| } | |
| .tab-buttons { | |
| overflow-x: auto !important; | |
| overflow-y: visible !important; | |
| } | |
| .tab-buttons > div:first-child, | |
| .tab-buttons .tab-nav, | |
| .tab-buttons [role="tablist"] { | |
| display: flex !important; | |
| flex-wrap: nowrap !important; | |
| gap: 4px !important; | |
| overflow-x: auto !important; | |
| overflow-y: visible !important; | |
| scrollbar-width: thin; | |
| } | |
| .tab-buttons button, | |
| .tab-buttons [role="tab"] { | |
| flex: 0 0 auto !important; | |
| white-space: nowrap !important; | |
| font-size: 16px !important; | |
| font-weight: 650 !important; | |
| border-radius: 6px 6px 0 0 !important; | |
| } | |
| #leaderboard-table { margin-top: 15px; } | |
| .summary-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 12px; | |
| margin: 18px 0 22px; | |
| } | |
| .summary-card { | |
| border: 1px solid var(--bench-line); | |
| border-radius: 8px; | |
| background: linear-gradient(180deg, #ffffff 0%, var(--bench-panel) 100%); | |
| padding: 14px 16px; | |
| box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); | |
| } | |
| .summary-value { | |
| color: var(--bench-ink); | |
| font-size: 28px; | |
| line-height: 1.1; | |
| font-weight: 780; | |
| } | |
| .summary-value.small { | |
| font-size: 18px; | |
| line-height: 1.35; | |
| } | |
| .summary-label { | |
| margin-top: 5px; | |
| color: var(--bench-muted); | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| font-weight: 700; | |
| } | |
| .dataframe, | |
| .leaderboard-dataframe { | |
| --cell-width-0: var(--leaderboard-model-column-width) !important; | |
| border-radius: 8px !important; | |
| overflow: hidden !important; | |
| border: 1px solid var(--bench-line) !important; | |
| } | |
| .rank-leaderboard-dataframe { | |
| --cell-width-0: var(--leaderboard-model-column-width) !important; | |
| } | |
| .dataframe table, | |
| .leaderboard-dataframe table { | |
| table-layout: fixed !important; | |
| min-width: 100% !important; | |
| font-size: 14px !important; | |
| } | |
| .dataframe th, | |
| .leaderboard-dataframe th { | |
| background: #eef2f7 !important; | |
| color: var(--bench-ink) !important; | |
| font-weight: 750 !important; | |
| } | |
| .dataframe td, | |
| .leaderboard-dataframe td { | |
| color: #263244 !important; | |
| overflow: hidden !important; | |
| } | |
| .dataframe th:first-child, | |
| .dataframe td:first-child, | |
| .leaderboard-dataframe th:first-child, | |
| .leaderboard-dataframe td:first-child { | |
| width: var(--leaderboard-model-column-width) !important; | |
| min-width: var(--leaderboard-model-column-width) !important; | |
| max-width: var(--leaderboard-model-column-width) !important; | |
| overflow-x: auto !important; | |
| overflow-y: hidden !important; | |
| white-space: nowrap !important; | |
| scrollbar-width: thin; | |
| } | |
| .dataframe th:first-child > div, | |
| .dataframe td:first-child > div, | |
| .leaderboard-dataframe th:first-child > div, | |
| .leaderboard-dataframe td:first-child > div, | |
| .leaderboard-dataframe [role="columnheader"]:first-child > div, | |
| .leaderboard-dataframe [role="gridcell"]:first-child > div { | |
| display: block !important; | |
| width: 100% !important; | |
| max-width: 100% !important; | |
| min-width: 0 !important; | |
| overflow-x: auto !important; | |
| overflow-y: hidden !important; | |
| white-space: nowrap !important; | |
| } | |
| .leaderboard-dataframe .table-wrap, | |
| .leaderboard-dataframe .table-wrap table, | |
| .leaderboard-dataframe .table-wrap thead, | |
| .leaderboard-dataframe .table-wrap tbody, | |
| .leaderboard-dataframe .table-wrap tr { | |
| --cell-width-0: var(--leaderboard-model-column-width) !important; | |
| max-width: 100% !important; | |
| } | |
| .rank-leaderboard-dataframe .table-wrap { | |
| --cell-width-0: var(--leaderboard-model-column-width) !important; | |
| overflow-x: auto !important; | |
| } | |
| .rank-leaderboard-dataframe .table-wrap > table, | |
| .rank-leaderboard-dataframe .table-wrap > table.fixed-layout, | |
| .rank-leaderboard-dataframe svelte-virtual-table-viewport table.table, | |
| .rank-leaderboard-dataframe svelte-virtual-table-viewport table.table thead, | |
| .rank-leaderboard-dataframe svelte-virtual-table-viewport table.table tbody, | |
| .rank-leaderboard-dataframe svelte-virtual-table-viewport table.table tfoot { | |
| min-width: var(--leaderboard-rank-table-min-width) !important; | |
| width: var(--leaderboard-rank-table-min-width) !important; | |
| } | |
| .rank-leaderboard-dataframe .table-wrap > table th:first-child, | |
| .rank-leaderboard-dataframe svelte-virtual-table-viewport table.table th:first-child, | |
| .rank-leaderboard-dataframe svelte-virtual-table-viewport table.table td:first-child { | |
| width: var(--leaderboard-model-column-width) !important; | |
| min-width: var(--leaderboard-model-column-width) !important; | |
| max-width: var(--leaderboard-model-column-width) !important; | |
| } | |
| .rank-leaderboard-dataframe .leaderboard-model-cell { | |
| display: block !important; | |
| width: 100% !important; | |
| max-width: 100% !important; | |
| min-width: 0 !important; | |
| box-sizing: border-box !important; | |
| overflow-x: auto !important; | |
| overflow-y: hidden !important; | |
| white-space: nowrap !important; | |
| text-overflow: clip !important; | |
| scrollbar-width: thin; | |
| } | |
| .rank-leaderboard-dataframe .leaderboard-model-cell::-webkit-scrollbar { | |
| height: 6px; | |
| } | |
| .rank-html-output, | |
| .domain-rank-html { | |
| border-radius: 8px !important; | |
| overflow: hidden !important; | |
| border: 1px solid var(--bench-line) !important; | |
| } | |
| .rank-table-scroll, | |
| .domain-rank-table-scroll { | |
| width: 100% !important; | |
| max-width: 100% !important; | |
| overflow-x: auto !important; | |
| overflow-y: hidden !important; | |
| scrollbar-width: thin; | |
| } | |
| .rank-table-scroll::-webkit-scrollbar, | |
| .rank-fixed-window::-webkit-scrollbar, | |
| .domain-rank-table-scroll::-webkit-scrollbar, | |
| .domain-rank-model-window::-webkit-scrollbar { | |
| height: 6px; | |
| } | |
| .rank-html-table, | |
| .domain-rank-table { | |
| width: 100% !important; | |
| min-width: var(--leaderboard-rank-table-min-width) !important; | |
| table-layout: fixed !important; | |
| border-collapse: separate !important; | |
| border-spacing: 0 !important; | |
| font-family: var(--font-mono) !important; | |
| font-size: 14px !important; | |
| line-height: var(--line-md) !important; | |
| color: #263244 !important; | |
| } | |
| .rank-html-table th, | |
| .rank-html-table td, | |
| .domain-rank-table th, | |
| .domain-rank-table td { | |
| padding: 12px 14px !important; | |
| border-left: 1px solid var(--bench-line) !important; | |
| box-sizing: border-box !important; | |
| overflow: hidden !important; | |
| white-space: nowrap !important; | |
| text-align: left !important; | |
| font-weight: 700 !important; | |
| } | |
| .rank-html-table th:first-child, | |
| .rank-html-table td:first-child, | |
| .domain-rank-table th:first-child, | |
| .domain-rank-table td:first-child { | |
| border-left: 0 !important; | |
| } | |
| .rank-html-table th, | |
| .domain-rank-table th { | |
| background: #eef2f7 !important; | |
| color: var(--bench-ink) !important; | |
| font-weight: 750 !important; | |
| } | |
| .rank-html-table tbody tr:nth-child(odd), | |
| .domain-rank-table tbody tr:nth-child(odd) { | |
| background: #f8fafc !important; | |
| } | |
| .rank-html-table tbody tr:nth-child(even), | |
| .domain-rank-table tbody tr:nth-child(even) { | |
| background: #ffffff !important; | |
| } | |
| .rank-html-table .rank-fixed-column { | |
| width: var(--leaderboard-model-column-width) !important; | |
| min-width: var(--leaderboard-model-column-width) !important; | |
| max-width: var(--leaderboard-model-column-width) !important; | |
| } | |
| .domain-rank-table .domain-rank-model-column { | |
| width: auto !important; | |
| min-width: 0 !important; | |
| max-width: none !important; | |
| } | |
| .rank-fixed-window, | |
| .domain-rank-model-window { | |
| display: block !important; | |
| width: 100% !important; | |
| max-width: 100% !important; | |
| overflow-x: auto !important; | |
| overflow-y: hidden !important; | |
| white-space: nowrap !important; | |
| text-overflow: clip !important; | |
| box-sizing: border-box !important; | |
| scrollbar-width: thin; | |
| } | |
| .leaderboard-dataframe .table-wrap .cell-wrap { | |
| min-width: 0 !important; | |
| max-width: 100% !important; | |
| overflow: hidden !important; | |
| } | |
| .leaderboard-dataframe .table-wrap th:first-child .cell-wrap, | |
| .leaderboard-dataframe .table-wrap td:first-child .cell-wrap { | |
| width: var(--leaderboard-model-column-width) !important; | |
| max-width: var(--leaderboard-model-column-width) !important; | |
| min-width: 0 !important; | |
| overflow-x: auto !important; | |
| overflow-y: hidden !important; | |
| } | |
| .leaderboard-dataframe .table-wrap th:first-child .cell-wrap > span, | |
| .leaderboard-dataframe .table-wrap td:first-child .cell-wrap > span { | |
| display: block !important; | |
| flex: 1 1 auto !important; | |
| min-width: 0 !important; | |
| max-width: 100% !important; | |
| overflow-x: auto !important; | |
| overflow-y: hidden !important; | |
| white-space: nowrap !important; | |
| text-overflow: clip !important; | |
| } | |
| .leaderboard-dataframe .table-wrap th:first-child .cell-wrap > span::-webkit-scrollbar, | |
| .leaderboard-dataframe .table-wrap td:first-child .cell-wrap > span::-webkit-scrollbar { | |
| height: 6px; | |
| } | |
| .leaderboard-dataframe [role="columnheader"]:first-child, | |
| .leaderboard-dataframe [role="gridcell"]:first-child { | |
| width: var(--leaderboard-model-column-width) !important; | |
| min-width: var(--leaderboard-model-column-width) !important; | |
| max-width: var(--leaderboard-model-column-width) !important; | |
| overflow-x: auto !important; | |
| overflow-y: hidden !important; | |
| white-space: nowrap !important; | |
| } | |
| .leaderboard-dataframe.leaderboard-model-col-1 { | |
| --cell-width-0: var(--leaderboard-metric-column-width) !important; | |
| --cell-width-1: var(--leaderboard-model-column-width) !important; | |
| } | |
| .leaderboard-dataframe.leaderboard-model-col-1 th:first-child, | |
| .leaderboard-dataframe.leaderboard-model-col-1 td:first-child, | |
| .leaderboard-dataframe.leaderboard-model-col-1 [role="columnheader"]:first-child, | |
| .leaderboard-dataframe.leaderboard-model-col-1 [role="gridcell"]:first-child, | |
| .leaderboard-dataframe.leaderboard-model-col-1 .table-wrap th:first-child .cell-wrap, | |
| .leaderboard-dataframe.leaderboard-model-col-1 .table-wrap td:first-child .cell-wrap { | |
| width: var(--leaderboard-metric-column-width) !important; | |
| min-width: var(--leaderboard-metric-column-width) !important; | |
| max-width: var(--leaderboard-metric-column-width) !important; | |
| } | |
| .leaderboard-dataframe.leaderboard-model-col-1 th:nth-child(2), | |
| .leaderboard-dataframe.leaderboard-model-col-1 td:nth-child(2), | |
| .leaderboard-dataframe.leaderboard-model-col-1 [role="columnheader"]:nth-child(2), | |
| .leaderboard-dataframe.leaderboard-model-col-1 [role="gridcell"]:nth-child(2) { | |
| width: var(--leaderboard-model-column-width) !important; | |
| min-width: var(--leaderboard-model-column-width) !important; | |
| max-width: var(--leaderboard-model-column-width) !important; | |
| overflow-x: auto !important; | |
| overflow-y: hidden !important; | |
| white-space: nowrap !important; | |
| } | |
| .leaderboard-dataframe.leaderboard-model-col-1 th:nth-child(2) > div, | |
| .leaderboard-dataframe.leaderboard-model-col-1 td:nth-child(2) > div, | |
| .leaderboard-dataframe.leaderboard-model-col-1 [role="columnheader"]:nth-child(2) > div, | |
| .leaderboard-dataframe.leaderboard-model-col-1 [role="gridcell"]:nth-child(2) > div, | |
| .leaderboard-dataframe.leaderboard-model-col-1 .table-wrap th:nth-child(2) .cell-wrap, | |
| .leaderboard-dataframe.leaderboard-model-col-1 .table-wrap td:nth-child(2) .cell-wrap { | |
| display: block !important; | |
| width: var(--leaderboard-model-column-width) !important; | |
| max-width: var(--leaderboard-model-column-width) !important; | |
| min-width: 0 !important; | |
| overflow-x: auto !important; | |
| overflow-y: hidden !important; | |
| white-space: nowrap !important; | |
| } | |
| .dataframe th:first-child::-webkit-scrollbar, | |
| .dataframe td:first-child::-webkit-scrollbar, | |
| .dataframe th:first-child > div::-webkit-scrollbar, | |
| .dataframe td:first-child > div::-webkit-scrollbar, | |
| .leaderboard-dataframe th:first-child::-webkit-scrollbar, | |
| .leaderboard-dataframe td:first-child::-webkit-scrollbar, | |
| .leaderboard-dataframe th:first-child > div::-webkit-scrollbar, | |
| .leaderboard-dataframe td:first-child > div::-webkit-scrollbar, | |
| .leaderboard-dataframe [role="columnheader"]:first-child::-webkit-scrollbar, | |
| .leaderboard-dataframe [role="gridcell"]:first-child::-webkit-scrollbar, | |
| .leaderboard-dataframe [role="columnheader"]:first-child > div::-webkit-scrollbar, | |
| .leaderboard-dataframe [role="gridcell"]:first-child > div::-webkit-scrollbar { | |
| height: 6px; | |
| } | |
| .domain-heading { | |
| margin-top: 1.75rem; | |
| margin-bottom: 0.5rem; | |
| font-size: 1.15rem; | |
| font-weight: 600; | |
| } | |
| .dataset-heading { | |
| margin-top: 2rem; | |
| margin-bottom: 0.75rem; | |
| font-size: 1.25rem !important; | |
| font-weight: 700 !important; | |
| line-height: 1.35; | |
| color: var(--bench-ink); | |
| } | |
| .dataset-heading p { | |
| font-size: 1.25rem !important; | |
| font-weight: 700 !important; | |
| margin: 0; | |
| } | |
| @media (max-width: 820px) { | |
| .summary-grid { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| } | |
| """ | |