Spaces:
Running
Running
| custom_css = """ | |
| :root, html, body, .gradio-container, .dark, body.dark, html.dark { | |
| --body-background-fill: white !important; | |
| --background-fill-primary: white !important; | |
| --background-fill-secondary: #f9fafb !important; | |
| --body-text-color: #1f2937 !important; | |
| --body-text-color-subdued: #6b7280 !important; | |
| --block-background-fill: white !important; | |
| --block-border-color: #e5e7eb !important; | |
| --block-label-background-fill: #f3f4f6 !important; | |
| --block-label-text-color: #374151 !important; | |
| --block-title-text-color: #111827 !important; | |
| --input-background-fill: white !important; | |
| --input-border-color: #d1d5db !important; | |
| --table-even-background-fill: #f9fafb !important; | |
| --table-odd-background-fill: white !important; | |
| --table-row-focus: #e0f2fe !important; | |
| --table-border-color: #e5e7eb !important; | |
| --border-color-primary: #e5e7eb !important; | |
| --border-color-accent: #8CD0FF !important; | |
| --color-accent: #8CD0FF !important; | |
| --neutral-50: #f9fafb !important; | |
| --neutral-100: #f3f4f6 !important; | |
| --neutral-200: #e5e7eb !important; | |
| --neutral-300: #d1d5db !important; | |
| --neutral-400: #9ca3af !important; | |
| --neutral-500: #6b7280 !important; | |
| --neutral-600: #4b5563 !important; | |
| --neutral-700: #374151 !important; | |
| --neutral-800: #1f2937 !important; | |
| --neutral-900: #111827 !important; | |
| --neutral-950: #030712 !important; | |
| } | |
| html, body, .gradio-container { | |
| background: white !important; | |
| color: #1f2937 !important; | |
| } | |
| .dark .svelte-table, body.dark .svelte-table, | |
| .dark [data-testid="dataframe"], body.dark [data-testid="dataframe"], | |
| .table-wrap:not(.js-plotly-plot *), | |
| .dataframe:not(.js-plotly-plot *) { | |
| background: white !important; | |
| color: #1f2937 !important; | |
| } | |
| .gradio-container table:not(.js-plotly-plot table), | |
| .dark .gradio-container table:not(.js-plotly-plot table) { | |
| background: white !important; | |
| color: #1f2937 !important; | |
| } | |
| .gradio-container th:not(.js-plotly-plot th), | |
| .gradio-container td:not(.js-plotly-plot td), | |
| .dark .gradio-container th:not(.js-plotly-plot th), | |
| .dark .gradio-container td:not(.js-plotly-plot td) { | |
| background-color: inherit !important; | |
| color: #1f2937 !important; | |
| border-color: #e5e7eb !important; | |
| } | |
| .gradio-container thead:not(.js-plotly-plot thead), | |
| .dark .gradio-container thead:not(.js-plotly-plot thead) { | |
| background: #f8fafc !important; | |
| } | |
| .gradio-container tbody tr:nth-child(even):not(.js-plotly-plot tr), | |
| .dark .gradio-container tbody tr:nth-child(even):not(.js-plotly-plot tr) { | |
| background: #f9fafb !important; | |
| } | |
| .gradio-container tbody tr:nth-child(odd):not(.js-plotly-plot tr), | |
| .dark .gradio-container tbody tr:nth-child(odd):not(.js-plotly-plot tr) { | |
| background: white !important; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root, html, body, .gradio-container { | |
| --body-background-fill: white !important; | |
| --background-fill-primary: white !important; | |
| --body-text-color: #1f2937 !important; | |
| background: white !important; | |
| color: #1f2937 !important; | |
| } | |
| } | |
| .js-plotly-plot, .js-plotly-plot *, | |
| .plotly, .plotly *, | |
| .js-plotly-plot svg, .js-plotly-plot svg * { | |
| background: unset !important; | |
| background-color: unset !important; | |
| } | |
| .js-plotly-plot .plotly .main-svg, | |
| .js-plotly-plot .plotly .bg { | |
| fill: white !important; | |
| } | |
| .gradio-container, | |
| .gradio-container *, | |
| body { | |
| font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; | |
| } | |
| b, strong, | |
| .gradio-container b, | |
| .gradio-container strong, | |
| .prose b, | |
| .prose strong, | |
| .md b, | |
| .md strong, | |
| .markdown-code b, | |
| .markdown-code strong, | |
| [class*="markdown"] b, | |
| [class*="markdown"] strong, | |
| p b, p strong, | |
| span b, span strong, | |
| div b, div strong { | |
| font-weight: 600 !important; | |
| } | |
| #banner-image { | |
| width: 100%; | |
| margin-bottom: 1rem; | |
| } | |
| #banner-image img { | |
| width: 100%; | |
| height: auto; | |
| object-fit: contain; | |
| border-radius: 8px; | |
| } | |
| :root { | |
| --metric-table-bg: #ffffff; | |
| --metric-table-border: #d3d3d3; | |
| --metric-table-header-bg: #f8fafc; | |
| --metric-table-header-color: #0f172a; | |
| --metric-table-row-header-bg: #f2f5f9; | |
| --metric-table-caption: #666666; | |
| --metric-table-empty-color: #777777; | |
| --metric-table-row-highlight: #DDF1FF; | |
| } | |
| ::selection { | |
| background-color: rgba(140, 208, 255, 0.4) !important; | |
| color: inherit !important; | |
| } | |
| ::-moz-selection { | |
| background-color: rgba(140, 208, 255, 0.4) !important; | |
| color: inherit !important; | |
| } | |
| button.primary { | |
| background-color: #8CD0FF !important; | |
| border-color: #8CD0FF !important; | |
| color: #0f172a !important; | |
| } | |
| button.primary:hover { | |
| background-color: #6bc0f5 !important; | |
| border-color: #6bc0f5 !important; | |
| color: #0f172a !important; | |
| } | |
| .visually-hidden[aria-hidden="true"] button, | |
| [aria-hidden="true"] .tab-container button, | |
| .tab-container.visually-hidden[aria-hidden="true"] button, | |
| div[aria-hidden="true"] button { | |
| pointer-events: none !important; | |
| visibility: hidden !important; | |
| } | |
| .markdown-text { | |
| font-size: 16px !important; | |
| line-height: 1.6 !important; | |
| } | |
| #filter-customize-accordion .label-wrap span, | |
| #filter-customize-accordion .label-wrap .open-button, | |
| #filter-customize-accordion > div > button span { | |
| font-size: 15px !important; | |
| font-weight: 400 !important; | |
| } | |
| .explainer-text, | |
| .explainer-text h3, | |
| .explainer-text p { | |
| font-size: 15px !important; | |
| line-height: 1.5 !important; | |
| } | |
| #wer-leaderboard-table th:first-child, | |
| #cer-leaderboard-table th:first-child, | |
| #rtfx-leaderboard-table th:first-child { | |
| width: 40px !important; | |
| min-width: 40px !important; | |
| max-width: 60px !important; | |
| font-weight: 400 !important; | |
| } | |
| #wer-leaderboard-table td:first-child, | |
| #cer-leaderboard-table td:first-child, | |
| #rtfx-leaderboard-table td:first-child { | |
| width: 40px !important; | |
| min-width: 40px !important; | |
| max-width: 60px !important; | |
| font-weight: 400 !important; | |
| text-align: center; | |
| } | |
| #wer-leaderboard-table th:nth-child(2), | |
| #cer-leaderboard-table th:nth-child(2), | |
| #rtfx-leaderboard-table th:nth-child(2) { | |
| background-color: #EEF8FF !important; | |
| } | |
| #wer-leaderboard-table td:nth-child(2), | |
| #cer-leaderboard-table td:nth-child(2), | |
| #rtfx-leaderboard-table td:nth-child(2) { | |
| background-color: #EEF8FF !important; | |
| } | |
| body.dark #wer-leaderboard-table th:nth-child(2), | |
| body.dark #cer-leaderboard-table th:nth-child(2), | |
| body.dark #rtfx-leaderboard-table th:nth-child(2), | |
| body.dark #wer-leaderboard-table td:nth-child(2), | |
| body.dark #cer-leaderboard-table td:nth-child(2), | |
| body.dark #rtfx-leaderboard-table td:nth-child(2), | |
| [data-theme="dark"] #wer-leaderboard-table th:nth-child(2), | |
| [data-theme="dark"] #cer-leaderboard-table th:nth-child(2), | |
| [data-theme="dark"] #rtfx-leaderboard-table th:nth-child(2), | |
| [data-theme="dark"] #wer-leaderboard-table td:nth-child(2), | |
| [data-theme="dark"] #cer-leaderboard-table td:nth-child(2), | |
| [data-theme="dark"] #rtfx-leaderboard-table td:nth-child(2) { | |
| background-color: rgba(140, 208, 255, 0.3) !important; | |
| } | |
| .cell-menu, | |
| .context-menu, | |
| [data-testid="dataframe"] .cell-menu, | |
| [data-testid="dataframe"] .context-menu, | |
| .table-wrap .cell-menu, | |
| .table-wrap .context-menu, | |
| .svelte-virtual-table-viewport .cell-menu, | |
| .svelte-virtual-table-viewport .context-menu, | |
| #wer-leaderboard-table .cell-menu, | |
| #cer-leaderboard-table .cell-menu, | |
| #rtfx-leaderboard-table .cell-menu, | |
| #wer-leaderboard-table .context-menu, | |
| #cer-leaderboard-table .context-menu, | |
| #rtfx-leaderboard-table .context-menu { | |
| display: none !important; | |
| visibility: hidden !important; | |
| pointer-events: none !important; | |
| } | |
| .metric-note { | |
| font-size: 14px !important; | |
| color: #666 !important; | |
| margin-bottom: 8px !important; | |
| padding: 8px 12px !important; | |
| background-color: #f8f9fa !important; | |
| border-left: 3px solid #8CD0FF !important; | |
| border-radius: 4px !important; | |
| } | |
| .metric-note p, | |
| .metric-note .prose p, | |
| .metric-note .prose, | |
| .metric-note > div, | |
| .metric-note .markdown-code, | |
| .metric-note .md { | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| background: transparent !important; | |
| border: none !important; | |
| } | |
| #models-to-add-text { | |
| font-size: 18px !important; | |
| } | |
| #citation-button span { | |
| font-size: 16px !important; | |
| } | |
| #citation-button textarea { | |
| font-size: 16px !important; | |
| } | |
| #citation-button > label > button { | |
| margin: 6px; | |
| transform: scale(1.3); | |
| } | |
| #leaderboard-table { | |
| margin-top: 15px | |
| } | |
| #leaderboard-table-lite { | |
| margin-top: 15px | |
| } | |
| #wer-leaderboard-table, | |
| #cer-leaderboard-table, | |
| #rtfx-leaderboard-table { | |
| margin-top: 15px; | |
| } | |
| #wer-leaderboard-table table, | |
| #cer-leaderboard-table table, | |
| #rtfx-leaderboard-table table { | |
| font-size: 14px; | |
| } | |
| #wer-leaderboard-table th, | |
| #cer-leaderboard-table th, | |
| #rtfx-leaderboard-table th { | |
| position: relative; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| min-width: 70px; | |
| } | |
| #wer-leaderboard-table th .col-resize-handle, | |
| #cer-leaderboard-table th .col-resize-handle, | |
| #rtfx-leaderboard-table th .col-resize-handle { | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 5px; | |
| cursor: col-resize; | |
| background: transparent; | |
| z-index: 10; | |
| } | |
| #wer-leaderboard-table th .col-resize-handle:hover, | |
| #cer-leaderboard-table th .col-resize-handle:hover, | |
| #rtfx-leaderboard-table th .col-resize-handle:hover, | |
| #wer-leaderboard-table th .col-resize-handle.resizing, | |
| #cer-leaderboard-table th .col-resize-handle.resizing, | |
| #rtfx-leaderboard-table th .col-resize-handle.resizing { | |
| background: #8CD0FF; | |
| } | |
| #wer-leaderboard-table td, | |
| #cer-leaderboard-table td, | |
| #rtfx-leaderboard-table td { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| #wer-leaderboard-table td[title], | |
| #cer-leaderboard-table td[title], | |
| #rtfx-leaderboard-table td[title], | |
| #wer-leaderboard-table th[title], | |
| #cer-leaderboard-table th[title], | |
| #rtfx-leaderboard-table th[title] { | |
| cursor: help; | |
| } | |
| #wer-leaderboard-table th, | |
| #cer-leaderboard-table th, | |
| #rtfx-leaderboard-table th { | |
| cursor: pointer; | |
| user-select: none; | |
| transition: background-color 0.2s ease; | |
| font-weight: 600; | |
| } | |
| #wer-leaderboard-table th, | |
| #wer-leaderboard-table th *, | |
| #cer-leaderboard-table th, | |
| #cer-leaderboard-table th *, | |
| #rtfx-leaderboard-table th, | |
| #rtfx-leaderboard-table th * { | |
| font-size: 15px !important; | |
| } | |
| #wer-leaderboard-table th:hover, | |
| #cer-leaderboard-table th:hover, | |
| #rtfx-leaderboard-table th:hover { | |
| background-color: transparent !important; | |
| text-decoration: underline; | |
| } | |
| #wer-leaderboard-table th.focus, | |
| #cer-leaderboard-table th.focus, | |
| #rtfx-leaderboard-table th.focus, | |
| #wer-leaderboard-table th:focus, | |
| #cer-leaderboard-table th:focus, | |
| #rtfx-leaderboard-table th:focus, | |
| #wer-leaderboard-table th.sorted, | |
| #cer-leaderboard-table th.sorted, | |
| #rtfx-leaderboard-table th.sorted { | |
| --ring-color: transparent !important; | |
| box-shadow: none !important; | |
| outline: none !important; | |
| background-color: transparent !important; | |
| } | |
| body.dark #wer-leaderboard-table th.focus, | |
| body.dark #cer-leaderboard-table th.focus, | |
| body.dark #rtfx-leaderboard-table th.focus, | |
| body.dark #wer-leaderboard-table th:focus, | |
| body.dark #cer-leaderboard-table th:focus, | |
| body.dark #rtfx-leaderboard-table th:focus, | |
| body.dark #wer-leaderboard-table th.sorted, | |
| body.dark #cer-leaderboard-table th.sorted, | |
| body.dark #rtfx-leaderboard-table th.sorted, | |
| [data-theme="dark"] #wer-leaderboard-table th.focus, | |
| [data-theme="dark"] #cer-leaderboard-table th.focus, | |
| [data-theme="dark"] #rtfx-leaderboard-table th.focus, | |
| [data-theme="dark"] #wer-leaderboard-table th:focus, | |
| [data-theme="dark"] #cer-leaderboard-table th:focus, | |
| [data-theme="dark"] #rtfx-leaderboard-table th:focus, | |
| [data-theme="dark"] #wer-leaderboard-table th.sorted, | |
| [data-theme="dark"] #cer-leaderboard-table th.sorted, | |
| [data-theme="dark"] #rtfx-leaderboard-table th.sorted { | |
| --ring-color: transparent !important; | |
| box-shadow: none !important; | |
| outline: none !important; | |
| background-color: transparent !important; | |
| } | |
| #wer-leaderboard-table th .cell-wrap, | |
| #cer-leaderboard-table th .cell-wrap, | |
| #rtfx-leaderboard-table th .cell-wrap, | |
| #wer-leaderboard-table th .header-button, | |
| #cer-leaderboard-table th .header-button, | |
| #rtfx-leaderboard-table th .header-button { | |
| background-color: transparent !important; | |
| box-shadow: none !important; | |
| outline: none !important; | |
| } | |
| body.dark #wer-leaderboard-table th .cell-wrap, | |
| body.dark #cer-leaderboard-table th .cell-wrap, | |
| body.dark #rtfx-leaderboard-table th .cell-wrap, | |
| body.dark #wer-leaderboard-table th .header-button, | |
| body.dark #cer-leaderboard-table th .header-button, | |
| body.dark #rtfx-leaderboard-table th .header-button, | |
| [data-theme="dark"] #wer-leaderboard-table th .cell-wrap, | |
| [data-theme="dark"] #cer-leaderboard-table th .cell-wrap, | |
| [data-theme="dark"] #rtfx-leaderboard-table th .cell-wrap, | |
| [data-theme="dark"] #wer-leaderboard-table th .header-button, | |
| [data-theme="dark"] #cer-leaderboard-table th .header-button, | |
| [data-theme="dark"] #rtfx-leaderboard-table th .header-button { | |
| background-color: transparent !important; | |
| box-shadow: none !important; | |
| outline: none !important; | |
| } | |
| #wer-leaderboard-table td:first-child, | |
| #cer-leaderboard-table td:first-child, | |
| #rtfx-leaderboard-table td:first-child { | |
| font-weight: 600; | |
| position: sticky; | |
| left: 0; | |
| background-color: var(--metric-table-row-header-bg); | |
| z-index: 1; | |
| } | |
| #wer-leaderboard-table td:nth-child(1), | |
| #wer-leaderboard-table td:nth-child(2), | |
| #cer-leaderboard-table td:nth-child(1), | |
| #cer-leaderboard-table td:nth-child(2), | |
| #rtfx-leaderboard-table td:nth-child(1), | |
| #rtfx-leaderboard-table td:nth-child(2) { | |
| cursor: pointer; | |
| transition: background-color 0.2s ease, color 0.2s ease; | |
| position: relative; | |
| } | |
| .row-sort-btn { | |
| display: inline-block; | |
| margin-left: 4px; | |
| font-size: 10px; | |
| opacity: 0.4; | |
| cursor: pointer; | |
| vertical-align: middle; | |
| } | |
| #wer-leaderboard-table td:nth-child(2):hover .row-sort-btn, | |
| #cer-leaderboard-table td:nth-child(2):hover .row-sort-btn, | |
| #rtfx-leaderboard-table td:nth-child(2):hover .row-sort-btn { | |
| opacity: 0.8; | |
| } | |
| #wer-leaderboard-table td:nth-child(1):hover, | |
| #wer-leaderboard-table td:nth-child(2):hover, | |
| #cer-leaderboard-table td:nth-child(1):hover, | |
| #cer-leaderboard-table td:nth-child(2):hover, | |
| #rtfx-leaderboard-table td:nth-child(1):hover, | |
| #rtfx-leaderboard-table td:nth-child(2):hover { | |
| background-color: rgba(140, 208, 255, 0.2) !important; | |
| text-decoration: underline; | |
| color: #0066cc !important; | |
| } | |
| #search-bar-table-box > div:first-child { | |
| background: none; | |
| border: none; | |
| } | |
| #search-bar { | |
| padding: 0px; | |
| } | |
| #leaderboard-table td:nth-child(2), | |
| #leaderboard-table th:nth-child(2) { | |
| max-width: 400px; | |
| overflow: auto; | |
| white-space: nowrap; | |
| } | |
| .tab-buttons button { | |
| font-size: 20px; | |
| } | |
| .tab-buttons button.selected, | |
| .tabs button.selected, | |
| button.tab-nav.selected, | |
| [role="tab"][aria-selected="true"], | |
| .tab-nav.selected { | |
| background-color: #DDF1FF !important; | |
| border-color: #8CD0FF !important; | |
| color: #0f172a !important; | |
| } | |
| .tab-buttons button:hover, | |
| .tabs button:hover, | |
| button.tab-nav:hover, | |
| [role="tab"]:hover { | |
| background-color: #DDF1FF !important; | |
| } | |
| body.dark .tab-buttons button:hover, | |
| body.dark .tabs button:hover, | |
| body.dark button.tab-nav:hover, | |
| body.dark [role="tab"]:hover, | |
| [data-theme="dark"] .tab-buttons button:hover, | |
| [data-theme="dark"] .tabs button:hover, | |
| [data-theme="dark"] button.tab-nav:hover, | |
| [data-theme="dark"] [role="tab"]:hover, | |
| .dark .tab-buttons button:hover, | |
| .dark .tabs button:hover, | |
| .dark button.tab-nav:hover, | |
| .dark [role="tab"]:hover { | |
| background-color: transparent !important; | |
| text-decoration: underline; | |
| } | |
| body.dark .tab-buttons button.selected, | |
| body.dark .tabs button.selected, | |
| body.dark button.tab-nav.selected, | |
| body.dark [role="tab"][aria-selected="true"], | |
| [data-theme="dark"] .tab-buttons button.selected, | |
| [data-theme="dark"] .tabs button.selected, | |
| [data-theme="dark"] button.tab-nav.selected, | |
| [data-theme="dark"] [role="tab"][aria-selected="true"], | |
| .dark .tab-buttons button.selected, | |
| .dark .tabs button.selected, | |
| .dark button.tab-nav.selected, | |
| .dark [role="tab"][aria-selected="true"] { | |
| background-color: rgba(140, 208, 255, 0.2) !important; | |
| border-color: #8CD0FF !important; | |
| color: #e5e7eb !important; | |
| } | |
| .tab-buttons button, | |
| .tabs button, | |
| button.tab-nav, | |
| [role="tab"] { | |
| -webkit-user-select: none !important; | |
| -moz-user-select: none !important; | |
| -ms-user-select: none !important; | |
| user-select: none !important; | |
| } | |
| .tabs .tab-nav::after, | |
| .tab-buttons button::after, | |
| button.tab-nav::after, | |
| [role="tab"]::after { | |
| background-color: #8CD0FF !important; | |
| } | |
| .tabs .tab-nav.selected::after, | |
| .tab-buttons button.selected::after, | |
| button.tab-nav.selected::after, | |
| [role="tab"][aria-selected="true"]::after { | |
| background-color: #8CD0FF !important; | |
| } | |
| .table-wrap td.focus, | |
| .table-wrap th.focus, | |
| table td:focus, | |
| table th:focus, | |
| .dataframe td.selected, | |
| .dataframe th.selected, | |
| .svelte-table td.focus, | |
| .svelte-table th.focus, | |
| [data-testid="dataframe"] td.selected, | |
| [data-testid="dataframe"] th.selected { | |
| outline-color: #8CD0FF !important; | |
| border-color: #8CD0FF !important; | |
| box-shadow: 0 0 0 2px #8CD0FF !important; | |
| } | |
| *:focus { | |
| outline-color: #8CD0FF !important; | |
| } | |
| input:focus, | |
| textarea:focus, | |
| select:focus, | |
| button:focus { | |
| border-color: #8CD0FF !important; | |
| box-shadow: 0 0 0 2px rgba(140, 208, 255, 0.3) !important; | |
| } | |
| .gradio-container { | |
| --color-accent: #8CD0FF !important; | |
| --color-accent-soft: #DDF1FF !important; | |
| --checkbox-label-background-fill-selected: transparent !important; | |
| --checkbox-background-color-selected: #8CD0FF !important; | |
| --checkbox-border-color-selected: #8CD0FF !important; | |
| --slider-color: #8CD0FF !important; | |
| --primary-50: #DDF1FF !important; | |
| --primary-100: #c5e7ff !important; | |
| --primary-200: #aeddff !important; | |
| --primary-300: #8CD0FF !important; | |
| --primary-400: #6bc0f5 !important; | |
| --primary-500: #4ab0eb !important; | |
| --primary-600: #29a0e1 !important; | |
| --primary-700: #0890d7 !important; | |
| } | |
| body.dark .gradio-container, | |
| [data-theme="dark"] .gradio-container { | |
| --color-accent: #8CD0FF !important; | |
| --color-accent-soft: #1e3a5f !important; | |
| --checkbox-label-background-fill-selected: transparent !important; | |
| --checkbox-background-color-selected: #8CD0FF !important; | |
| --checkbox-border-color-selected: #8CD0FF !important; | |
| --slider-color: #8CD0FF !important; | |
| } | |
| .progress-bar, | |
| .eta-bar, | |
| [class*="progress"], | |
| [class*="loader"], | |
| [class*="loading"], | |
| .wrap.svelte-j1gjts, | |
| .wrap.svelte-j1gjts .progress-bar { | |
| background-color: transparent !important; | |
| } | |
| body.dark .progress-bar, | |
| body.dark .eta-bar, | |
| body.dark [class*="progress"], | |
| [data-theme="dark"] .progress-bar, | |
| [data-theme="dark"] .eta-bar, | |
| [data-theme="dark"] [class*="progress"], | |
| .dark .progress-bar, | |
| .dark .eta-bar, | |
| .dark [class*="progress"] { | |
| background-color: transparent !important; | |
| } | |
| .label-wrap:hover, | |
| button.label-wrap:hover { | |
| background-color: transparent !important; | |
| -webkit-user-select: none !important; | |
| -moz-user-select: none !important; | |
| -ms-user-select: none !important; | |
| user-select: none !important; | |
| } | |
| body.dark .label-wrap:hover, | |
| body.dark button.label-wrap:hover, | |
| [data-theme="dark"] .label-wrap:hover, | |
| [data-theme="dark"] button.label-wrap:hover, | |
| .dark .label-wrap:hover, | |
| .dark button.label-wrap:hover { | |
| background-color: transparent !important; | |
| -webkit-user-select: none !important; | |
| user-select: none !important; | |
| } | |
| .label-wrap::selection, | |
| .label-wrap *::selection, | |
| button.label-wrap::selection, | |
| button.label-wrap *::selection { | |
| background-color: transparent !important; | |
| } | |
| body.dark .label-wrap::selection, | |
| body.dark .label-wrap *::selection, | |
| [data-theme="dark"] .label-wrap::selection, | |
| [data-theme="dark"] .label-wrap *::selection, | |
| .dark .label-wrap::selection, | |
| .dark .label-wrap *::selection { | |
| background-color: transparent !important; | |
| } | |
| body.dark table th:hover, | |
| body.dark [data-testid="dataframe"] th:hover, | |
| body.dark .table-wrap th:hover, | |
| body.dark .svelte-table th:hover, | |
| [data-theme="dark"] table th:hover, | |
| [data-theme="dark"] [data-testid="dataframe"] th:hover, | |
| [data-theme="dark"] .table-wrap th:hover, | |
| [data-theme="dark"] .svelte-table th:hover, | |
| .dark table th:hover, | |
| .dark [data-testid="dataframe"] th:hover, | |
| .dark .table-wrap th:hover, | |
| .dark .svelte-table th:hover { | |
| background-color: transparent !important; | |
| -webkit-user-select: none !important; | |
| user-select: none !important; | |
| } | |
| body.dark th, | |
| body.dark thead th, | |
| body.dark .header, | |
| body.dark [class*="header"], | |
| body.dark th[role="columnheader"], | |
| [data-theme="dark"] th, | |
| [data-theme="dark"] thead th, | |
| [data-theme="dark"] .header, | |
| [data-theme="dark"] [class*="header"], | |
| [data-theme="dark"] th[role="columnheader"], | |
| .dark th, | |
| .dark thead th, | |
| .dark .header, | |
| .dark [class*="header"], | |
| .dark th[role="columnheader"] { | |
| -webkit-user-select: none !important; | |
| -moz-user-select: none !important; | |
| user-select: none !important; | |
| } | |
| body.dark th:hover, | |
| body.dark thead th:hover, | |
| body.dark th[role="columnheader"]:hover, | |
| [data-theme="dark"] th:hover, | |
| [data-theme="dark"] thead th:hover, | |
| [data-theme="dark"] th[role="columnheader"]:hover, | |
| .dark th:hover, | |
| .dark thead th:hover, | |
| .dark th[role="columnheader"]:hover { | |
| background-color: transparent !important; | |
| text-decoration: underline; | |
| } | |
| th::selection, | |
| th *::selection, | |
| thead::selection, | |
| thead *::selection { | |
| background-color: transparent !important; | |
| } | |
| body.dark th.focus, | |
| body.dark thead th.focus, | |
| body.dark .table-wrap th.focus, | |
| body.dark [data-testid="dataframe"] th.focus, | |
| [data-theme="dark"] th.focus, | |
| [data-theme="dark"] thead th.focus, | |
| [data-theme="dark"] .table-wrap th.focus, | |
| [data-theme="dark"] [data-testid="dataframe"] th.focus, | |
| .dark th.focus, | |
| .dark thead th.focus, | |
| .dark .table-wrap th.focus, | |
| .dark [data-testid="dataframe"] th.focus { | |
| --ring-color: transparent !important; | |
| box-shadow: none !important; | |
| outline: none !important; | |
| } | |
| body.dark th.selected, | |
| body.dark thead th.selected, | |
| body.dark th[aria-selected="true"], | |
| [data-theme="dark"] th.selected, | |
| [data-theme="dark"] thead th.selected, | |
| [data-theme="dark"] th[aria-selected="true"], | |
| .dark th.selected, | |
| .dark thead th.selected, | |
| .dark th[aria-selected="true"] { | |
| --ring-color: transparent !important; | |
| box-shadow: none !important; | |
| outline: none !important; | |
| background-color: transparent !important; | |
| } | |
| th.focus, | |
| thead th.focus, | |
| .table-wrap th.focus, | |
| [data-testid="dataframe"] th.focus { | |
| --ring-color: transparent !important; | |
| box-shadow: none !important; | |
| outline: none !important; | |
| } | |
| th.selected, | |
| thead th.selected, | |
| th[aria-selected="true"] { | |
| --ring-color: transparent !important; | |
| box-shadow: none !important; | |
| outline: none !important; | |
| } | |
| .sort-indicators, | |
| .table-wrap .sort-indicators, | |
| [data-testid="dataframe"] .sort-indicators, | |
| th .sort-indicators { | |
| display: flex !important; | |
| visibility: visible !important; | |
| opacity: 1 !important; | |
| } | |
| .sort-arrow, | |
| .sort-indicators .sort-arrow, | |
| th .sort-arrow { | |
| display: flex !important; | |
| visibility: visible !important; | |
| opacity: 1 !important; | |
| color: var(--body-text-color) !important; | |
| } | |
| .sort-priority, | |
| .sort-indicators .sort-priority, | |
| th .sort-priority { | |
| display: flex !important; | |
| visibility: visible !important; | |
| } | |
| th.sorted, | |
| th[aria-sort="ascending"], | |
| th[aria-sort="descending"] { | |
| background-color: transparent !important; | |
| } | |
| body.dark th.sorted, | |
| body.dark th[aria-sort="ascending"], | |
| body.dark th[aria-sort="descending"], | |
| [data-theme="dark"] th.sorted, | |
| [data-theme="dark"] th[aria-sort="ascending"], | |
| [data-theme="dark"] th[aria-sort="descending"], | |
| .dark th.sorted, | |
| .dark th[aria-sort="ascending"], | |
| .dark th[aria-sort="descending"] { | |
| background-color: transparent !important; | |
| } | |
| th .cell-wrap, | |
| thead th .cell-wrap, | |
| .table-wrap th .cell-wrap, | |
| [data-testid="dataframe"] th .cell-wrap { | |
| background-color: transparent !important; | |
| box-shadow: none !important; | |
| outline: none !important; | |
| } | |
| th .header-button, | |
| thead th .header-button, | |
| th .cell-wrap .header-button, | |
| th button.header-button { | |
| background-color: transparent !important; | |
| box-shadow: none !important; | |
| outline: none !important; | |
| } | |
| body.dark th .cell-wrap, | |
| body.dark th .header-button, | |
| body.dark th .cell-wrap .header-button, | |
| [data-theme="dark"] th .cell-wrap, | |
| [data-theme="dark"] th .header-button, | |
| [data-theme="dark"] th .cell-wrap .header-button, | |
| .dark th .cell-wrap, | |
| .dark th .header-button, | |
| .dark th .cell-wrap .header-button { | |
| background-color: transparent !important; | |
| box-shadow: none !important; | |
| outline: none !important; | |
| } | |
| th .header-button:focus, | |
| th .header-button:active, | |
| th .header-button:hover, | |
| th .cell-wrap:focus, | |
| th .cell-wrap:active { | |
| background-color: transparent !important; | |
| box-shadow: none !important; | |
| outline: none !important; | |
| } | |
| body.dark th .header-button:focus, | |
| body.dark th .header-button:active, | |
| body.dark th .header-button:hover, | |
| body.dark th .cell-wrap:focus, | |
| body.dark th .cell-wrap:active, | |
| [data-theme="dark"] th .header-button:focus, | |
| [data-theme="dark"] th .header-button:active, | |
| [data-theme="dark"] th .header-button:hover, | |
| [data-theme="dark"] th .cell-wrap:focus, | |
| [data-theme="dark"] th .cell-wrap:active, | |
| .dark th .header-button:focus, | |
| .dark th .header-button:active, | |
| .dark th .header-button:hover, | |
| .dark th .cell-wrap:focus, | |
| .dark th .cell-wrap:active { | |
| background-color: transparent !important; | |
| box-shadow: none !important; | |
| outline: none !important; | |
| } | |
| body.dark table th:focus, | |
| body.dark table td:focus, | |
| body.dark [data-testid="dataframe"] th:focus, | |
| body.dark [data-testid="dataframe"] td:focus, | |
| [data-theme="dark"] table th:focus, | |
| [data-theme="dark"] table td:focus, | |
| [data-theme="dark"] [data-testid="dataframe"] th:focus, | |
| [data-theme="dark"] [data-testid="dataframe"] td:focus, | |
| .dark table th:focus, | |
| .dark table td:focus, | |
| .dark [data-testid="dataframe"] th:focus, | |
| .dark [data-testid="dataframe"] td:focus { | |
| background-color: rgba(140, 208, 255, 0.15) !important; | |
| } | |
| table th::selection, | |
| table th *::selection, | |
| [data-testid="dataframe"] th::selection, | |
| [data-testid="dataframe"] th *::selection { | |
| background-color: transparent !important; | |
| } | |
| body.dark ::selection, | |
| [data-theme="dark"] ::selection, | |
| .dark ::selection { | |
| background-color: rgba(140, 208, 255, 0.4) !important; | |
| color: inherit !important; | |
| } | |
| input[type="radio"]:checked { | |
| accent-color: #8CD0FF !important; | |
| } | |
| .gradio-radio label.selected, | |
| [data-testid*="radio-label"].selected { | |
| background-color: transparent !important; | |
| border-color: transparent !important; | |
| } | |
| input[type="checkbox"]:checked { | |
| accent-color: #8CD0FF !important; | |
| } | |
| #scale-logo { | |
| border-style: none !important; | |
| box-shadow: none; | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| max-width: 600px; | |
| } | |
| #scale-logo .download { | |
| display: none; | |
| } | |
| #filter_type{ | |
| border: 0; | |
| padding-left: 0; | |
| padding-top: 0; | |
| } | |
| #filter_type label { | |
| display: flex; | |
| } | |
| #filter_type label > span{ | |
| margin-top: var(--spacing-lg); | |
| margin-right: 0.5em; | |
| } | |
| #filter_type label > .wrap{ | |
| width: 103px; | |
| } | |
| #filter_type label > .wrap .wrap-inner{ | |
| padding: 2px; | |
| } | |
| #filter_type label > .wrap .wrap-inner input{ | |
| width: 1px | |
| } | |
| #filter-columns-type{ | |
| border:0; | |
| padding:0.5; | |
| } | |
| #filter-columns-size{ | |
| border:0; | |
| padding:0.5; | |
| } | |
| #box-filter > .form{ | |
| border: 0 | |
| } | |
| .metric-tabs button { | |
| font-size: 18px; | |
| } | |
| .metric-table-wrapper { | |
| overflow-x: auto; | |
| margin-top: 1rem; | |
| } | |
| .markdown-text table th:nth-child(4), | |
| .markdown-text table td:nth-child(4), | |
| .prose table th:nth-child(4), | |
| .prose table td:nth-child(4) { | |
| min-width: 80px !important; | |
| white-space: nowrap; | |
| } | |
| .markdown-text table th:nth-child(5), | |
| .markdown-text table td:nth-child(5), | |
| .prose table th:nth-child(5), | |
| .prose table td:nth-child(5) { | |
| min-width: 100px !important; | |
| white-space: nowrap; | |
| } | |
| .chart-gallery { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 1rem; | |
| margin: 1rem 0; | |
| } | |
| .js-plotly-plot, .plotly { | |
| width: 100% !important; | |
| } | |
| .js-plotly-plot .plotly .main-svg { | |
| width: 100% !important; | |
| } | |
| @media (max-width: 768px) { | |
| .js-plotly-plot .plotly .legend { | |
| font-size: 9px !important; | |
| } | |
| .js-plotly-plot .plotly .gtitle { | |
| font-size: 14px !important; | |
| } | |
| .js-plotly-plot .plotly .xtitle, | |
| .js-plotly-plot .plotly .ytitle { | |
| font-size: 11px !important; | |
| } | |
| } | |
| .chart-card { | |
| background: var(--metric-table-bg, #ffffff); | |
| border: 1px solid var(--metric-table-border, #d3d3d3); | |
| border-radius: 8px; | |
| padding: 1rem; | |
| transition: box-shadow 0.2s ease, transform 0.2s ease; | |
| } | |
| .chart-card:hover { | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| transform: translateY(-2px); | |
| } | |
| .chart-card h4 { | |
| margin: 0 0 0.5rem 0; | |
| color: var(--metric-table-header-color, #0f172a); | |
| font-size: 1.1rem; | |
| } | |
| .chart-card p { | |
| margin: 0; | |
| color: var(--metric-table-caption, #666666); | |
| font-size: 0.9rem; | |
| line-height: 1.4; | |
| } | |
| .metric-table { | |
| border-collapse: collapse; | |
| width: 100%; | |
| min-width: 600px; | |
| text-align: center; | |
| font-size: 16px; | |
| background-color: var(--metric-table-bg); | |
| } | |
| .metric-table caption { | |
| caption-side: bottom; | |
| padding-top: 0.5rem; | |
| color: var(--metric-table-caption); | |
| font-size: 0.9rem; | |
| } | |
| .metric-table th, | |
| .metric-table td { | |
| border: 1px solid var(--metric-table-border); | |
| padding: 0.5rem; | |
| } | |
| .metric-table thead th { | |
| background-color: var(--metric-table-header-bg); | |
| color: var(--metric-table-header-color); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1; | |
| } | |
| .metric-table tbody th { | |
| text-align: left; | |
| background-color: var(--metric-table-row-header-bg); | |
| color: var(--metric-table-header-color); | |
| position: sticky; | |
| left: 0; | |
| z-index: 2; | |
| cursor: pointer; | |
| } | |
| .metric-table tbody th:hover { | |
| text-decoration: underline; | |
| } | |
| .metric-table tbody tr.row-highlighted { | |
| background-color: var(--metric-table-row-highlight) !important; | |
| } | |
| .metric-table tbody tr.row-highlighted td, | |
| .metric-table tbody tr.row-highlighted th { | |
| background-color: var(--metric-table-row-highlight) !important; | |
| } | |
| #wer-leaderboard-table tbody tr.leaderboard-row-highlighted, | |
| #cer-leaderboard-table tbody tr.leaderboard-row-highlighted, | |
| #rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted { | |
| background-color: var(--metric-table-row-highlight, rgba(140, 208, 255, 0.3)) !important; | |
| } | |
| #wer-leaderboard-table tbody tr.leaderboard-row-highlighted td, | |
| #cer-leaderboard-table tbody tr.leaderboard-row-highlighted td, | |
| #rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted td { | |
| background-color: var(--metric-table-row-highlight, rgba(140, 208, 255, 0.3)) !important; | |
| } | |
| body.dark #wer-leaderboard-table tbody tr.leaderboard-row-highlighted, | |
| body.dark #cer-leaderboard-table tbody tr.leaderboard-row-highlighted, | |
| body.dark #rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted, | |
| [data-theme="dark"] #wer-leaderboard-table tbody tr.leaderboard-row-highlighted, | |
| [data-theme="dark"] #cer-leaderboard-table tbody tr.leaderboard-row-highlighted, | |
| [data-theme="dark"] #rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted { | |
| background-color: rgba(140, 208, 255, 0.25) !important; | |
| } | |
| body.dark #wer-leaderboard-table tbody tr.leaderboard-row-highlighted td, | |
| body.dark #cer-leaderboard-table tbody tr.leaderboard-row-highlighted td, | |
| body.dark #rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted td, | |
| [data-theme="dark"] #wer-leaderboard-table tbody tr.leaderboard-row-highlighted td, | |
| [data-theme="dark"] #cer-leaderboard-table tbody tr.leaderboard-row-highlighted td, | |
| [data-theme="dark"] #rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted td { | |
| background-color: rgba(140, 208, 255, 0.25) !important; | |
| } | |
| #wer-leaderboard-table tbody td, | |
| #cer-leaderboard-table tbody td, | |
| #rtfx-leaderboard-table tbody td { | |
| cursor: pointer; | |
| } | |
| .metric-table-empty { | |
| padding: 1rem; | |
| text-align: center; | |
| color: var(--metric-table-empty-color); | |
| } | |
| .paza-footer { | |
| margin-top: 2rem; | |
| padding: 1.5rem 1rem; | |
| border-top: 1px solid var(--metric-table-border, #d3d3d3); | |
| text-align: center; | |
| font-size: 0.9rem; | |
| color: var(--metric-table-caption, #666666); | |
| } | |
| .paza-footer a { | |
| color: #0078d4; | |
| text-decoration: none; | |
| transition: color 0.2s ease; | |
| } | |
| .paza-footer a:hover { | |
| color: #106ebe; | |
| text-decoration: underline; | |
| } | |
| body.dark .paza-footer a, | |
| [data-theme="dark"] .paza-footer a, | |
| body[class*="dark"] .paza-footer a, | |
| [data-color-mode="dark"] .paza-footer a { | |
| color: #60a5fa; | |
| } | |
| body.dark .paza-footer a:hover, | |
| [data-theme="dark"] .paza-footer a:hover, | |
| body[class*="dark"] .paza-footer a:hover, | |
| [data-color-mode="dark"] .paza-footer a:hover { | |
| color: #93c5fd; | |
| } | |
| .paza-footer-links { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 1rem 1.5rem; | |
| } | |
| .paza-footer-links .copyright { | |
| font-size: 0.85rem; | |
| } | |
| """ | |
| get_window_url_params = """ | |
| function(url_params) { | |
| const params = new URLSearchParams(window.location.search); | |
| url_params = Object.fromEntries(params); | |
| return url_params; | |
| } | |
| """ | |
| fix_aria_hidden_focus_js = """ | |
| <script> | |
| (function() { | |
| const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; | |
| const isHFDark = document.documentElement.classList.contains('dark') || | |
| document.body?.classList.contains('dark') || | |
| document.documentElement.getAttribute('data-theme') === 'dark' || | |
| document.documentElement.getAttribute('data-color-mode') === 'dark'; | |
| if (isDarkMode || isHFDark) { | |
| document.documentElement.classList.add('dark'); | |
| document.documentElement.setAttribute('data-theme', 'dark'); | |
| if (document.body) { | |
| document.body.classList.add('dark'); | |
| } else { | |
| document.addEventListener('DOMContentLoaded', function() { | |
| document.body.classList.add('dark'); | |
| }); | |
| } | |
| } | |
| const observer = new MutationObserver(function(mutations) { | |
| mutations.forEach(function(mutation) { | |
| if (mutation.attributeName === 'class' || | |
| mutation.attributeName === 'data-theme' || | |
| mutation.attributeName === 'data-color-mode') { | |
| const html = document.documentElement; | |
| const body = document.body; | |
| if (html.classList.contains('dark') || | |
| html.getAttribute('data-theme') === 'dark' || | |
| html.getAttribute('data-color-mode') === 'dark') { | |
| if (body && !body.classList.contains('dark')) { | |
| body.classList.add('dark'); | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| observer.observe(document.documentElement, { | |
| attributes: true, | |
| attributeFilter: ['class', 'data-theme', 'data-color-mode'] | |
| }); | |
| })(); | |
| </script> | |
| <script> | |
| (function() { | |
| function fixAriaHiddenFocus() { | |
| const hiddenContainers = document.querySelectorAll('[aria-hidden="true"]'); | |
| hiddenContainers.forEach(container => { | |
| const focusableElements = container.querySelectorAll( | |
| 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' | |
| ); | |
| focusableElements.forEach(el => { | |
| el.setAttribute('tabindex', '-1'); | |
| el.setAttribute('aria-disabled', 'true'); | |
| el.setAttribute('data-a11y-fixed', 'true'); | |
| if (el.tagName === 'BUTTON') { | |
| el.disabled = true; | |
| } | |
| }); | |
| }); | |
| } | |
| fixAriaHiddenFocus(); | |
| document.addEventListener('DOMContentLoaded', fixAriaHiddenFocus); | |
| setTimeout(fixAriaHiddenFocus, 100); | |
| setTimeout(fixAriaHiddenFocus, 500); | |
| setTimeout(fixAriaHiddenFocus, 1000); | |
| setTimeout(fixAriaHiddenFocus, 2000); | |
| const observer = new MutationObserver((mutations) => { | |
| fixAriaHiddenFocus(); | |
| }); | |
| function startObserver() { | |
| if (document.body) { | |
| observer.observe(document.body, { | |
| childList: true, | |
| subtree: true, | |
| attributes: true, | |
| attributeFilter: ['aria-hidden'] | |
| }); | |
| fixAriaHiddenFocus(); | |
| } else { | |
| setTimeout(startObserver, 10); | |
| } | |
| } | |
| startObserver(); | |
| })(); | |
| (function() { | |
| function setupRowHighlighting() { | |
| const tables = document.querySelectorAll('.metric-table'); | |
| tables.forEach(table => { | |
| if (table.dataset.highlightSetup) return; | |
| table.dataset.highlightSetup = 'true'; | |
| const rows = table.querySelectorAll('tbody tr'); | |
| rows.forEach(row => { | |
| const languageCell = row.querySelector('th'); | |
| if (languageCell) { | |
| languageCell.addEventListener('click', function() { | |
| const isHighlighted = row.classList.contains('row-highlighted'); | |
| rows.forEach(r => r.classList.remove('row-highlighted')); | |
| if (!isHighlighted) { | |
| row.classList.add('row-highlighted'); | |
| } | |
| }); | |
| } | |
| }); | |
| }); | |
| } | |
| document.addEventListener('DOMContentLoaded', setupRowHighlighting); | |
| setTimeout(setupRowHighlighting, 100); | |
| setTimeout(setupRowHighlighting, 500); | |
| setTimeout(setupRowHighlighting, 1000); | |
| setTimeout(setupRowHighlighting, 2000); | |
| const rowObserver = new MutationObserver((mutations) => { | |
| setupRowHighlighting(); | |
| }); | |
| function startRowObserver() { | |
| if (document.body) { | |
| rowObserver.observe(document.body, { | |
| childList: true, | |
| subtree: true | |
| }); | |
| setupRowHighlighting(); | |
| } else { | |
| setTimeout(startRowObserver, 10); | |
| } | |
| } | |
| startRowObserver(); | |
| })(); | |
| (function() { | |
| const rowSortState = {}; | |
| const setupContainers = new WeakSet(); | |
| function setupLeaderboardRowSorting() { | |
| const leaderboardIds = ['#wer-leaderboard-table', '#cer-leaderboard-table', '#rtfx-leaderboard-table']; | |
| leaderboardIds.forEach(tableId => { | |
| const container = document.querySelector(tableId); | |
| if (!container) return; | |
| if (!rowSortState[tableId]) { | |
| rowSortState[tableId] = { rowIndex: null, ascending: true }; | |
| } | |
| if (setupContainers.has(container)) return; | |
| setupContainers.add(container); | |
| console.log('Setting up row sort for', tableId); | |
| container.addEventListener('click', function(e) { | |
| if (e.target.closest('button') || e.target.closest('.sort-button')) { | |
| return; | |
| } | |
| const ariaHiddenTable = e.target.closest('table[aria-hidden="true"]'); | |
| if (ariaHiddenTable) { | |
| return; | |
| } | |
| let clickedCell = e.target.closest('td'); | |
| if (!clickedCell) { | |
| const cellWrap = e.target.closest('.cell-wrap'); | |
| if (cellWrap) { | |
| clickedCell = cellWrap.closest('td'); | |
| } | |
| } | |
| if (!clickedCell) { | |
| return; | |
| } | |
| const clickedRow = clickedCell.closest('tr'); | |
| if (!clickedRow) { | |
| return; | |
| } | |
| const tbody = clickedRow.closest('tbody.tbody') || clickedRow.closest('tbody'); | |
| if (!tbody) { | |
| return; | |
| } | |
| const virtualViewport = tbody.closest('svelte-virtual-table-viewport'); | |
| if (!virtualViewport) { | |
| return; | |
| } | |
| const allCells = Array.from(clickedRow.querySelectorAll('td')); | |
| const cellIndex = allCells.indexOf(clickedCell); | |
| console.log('Row sort click - cell index:', cellIndex, 'Cell text:', clickedCell.textContent.trim().substring(0, 20)); | |
| if (cellIndex === 0 || cellIndex === 1) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| const virtualTableViewport = container.querySelector('svelte-virtual-table-viewport'); | |
| const table = virtualTableViewport ? | |
| virtualTableViewport.querySelector('table.table') : | |
| container.querySelector('table:not([aria-hidden="true"])'); | |
| const thead = table ? table.querySelector('thead.thead') || table.querySelector('thead') : null; | |
| const virtualTbody = table ? table.querySelector('tbody.tbody') || table.querySelector('tbody') : null; | |
| console.log('Found elements - table:', !!table, 'thead:', !!thead, 'tbody:', !!virtualTbody); | |
| if (table && thead && virtualTbody) { | |
| sortRowColumns(tableId, table, thead, virtualTbody, clickedRow); | |
| } else { | |
| console.log('Missing table elements:', { table: !!table, thead: !!thead, tbody: !!virtualTbody }); | |
| } | |
| return; | |
| } | |
| const allRows = tbody.querySelectorAll('tr'); | |
| const isHighlighted = clickedRow.classList.contains('leaderboard-row-highlighted'); | |
| allRows.forEach(row => row.classList.remove('leaderboard-row-highlighted')); | |
| if (!isHighlighted) { | |
| clickedRow.classList.add('leaderboard-row-highlighted'); | |
| } | |
| }, true); | |
| addRowSortTooltips(container); | |
| }); | |
| } | |
| function addRowSortTooltips(container) { | |
| const virtualTableViewport = container.querySelector('svelte-virtual-table-viewport'); | |
| const table = virtualTableViewport ? | |
| virtualTableViewport.querySelector('table.table') : | |
| container.querySelector('table:not([aria-hidden="true"])'); | |
| const tbody = table ? table.querySelector('tbody.tbody') || table.querySelector('tbody') : null; | |
| if (!tbody) return; | |
| const rows = tbody.querySelectorAll('tr'); | |
| rows.forEach(row => { | |
| const cells = row.querySelectorAll('td'); | |
| if (cells.length >= 2) { | |
| if (cells[0] && !cells[0].dataset.tooltipSet) { | |
| cells[0].title = 'Click to sort columns by this row\'s values'; | |
| cells[0].dataset.tooltipSet = 'true'; | |
| } | |
| if (cells[1] && !cells[1].dataset.tooltipSet) { | |
| const langName = cells[1].textContent.trim(); | |
| cells[1].title = `Click to sort model columns by ${langName}'s scores`; | |
| cells[1].dataset.tooltipSet = 'true'; | |
| } | |
| } | |
| }); | |
| } | |
| function sortRowColumns(tableId, table, thead, tbody, clickedRow) { | |
| console.log('sortRowColumns called for', tableId); | |
| const headerRow = thead.querySelector('tr'); | |
| if (!headerRow) { | |
| console.log('No header row found'); | |
| return; | |
| } | |
| const headerCells = Array.from(headerRow.querySelectorAll('th')); | |
| const rowCells = Array.from(clickedRow.querySelectorAll('td')); | |
| console.log('Header cells:', headerCells.length, 'Row cells:', rowCells.length); | |
| const fixedCols = 2; | |
| const modelHeaders = headerCells.slice(fixedCols); | |
| const modelCells = rowCells.slice(fixedCols); | |
| if (modelHeaders.length === 0 || modelCells.length === 0) { | |
| console.log('No model columns to sort'); | |
| return; | |
| } | |
| const allBodyRows = Array.from(tbody.querySelectorAll('tr')); | |
| const rowIndex = allBodyRows.indexOf(clickedRow); | |
| let ascending; | |
| if (rowSortState[tableId].rowIndex === rowIndex) { | |
| ascending = !rowSortState[tableId].ascending; | |
| } else { | |
| ascending = !tableId.includes('rtfx'); | |
| } | |
| rowSortState[tableId] = { rowIndex, ascending }; | |
| console.log('Sorting', ascending ? 'ascending' : 'descending', 'for row', rowIndex); | |
| const columnsData = modelHeaders.map((header, i) => { | |
| const cell = modelCells[i]; | |
| let cellText = ''; | |
| if (cell) { | |
| const textEl = cell.querySelector('.cell-wrap .text') || | |
| cell.querySelector('.cell-wrap') || | |
| cell.querySelector('span') || | |
| cell; | |
| cellText = textEl.textContent.trim(); | |
| } | |
| let value = parseFloat(cellText); | |
| if (isNaN(value) || cellText === '--' || cellText === '') { | |
| value = ascending ? Infinity : -Infinity; | |
| } | |
| console.log('Column', i, ':', cellText, '->', value); | |
| return { header, cell, value, originalIndex: i }; | |
| }); | |
| columnsData.sort((a, b) => { | |
| if (ascending) { | |
| return a.value - b.value; | |
| } else { | |
| return b.value - a.value; | |
| } | |
| }); | |
| console.log('New order:', columnsData.map(c => `${c.originalIndex}:${c.value}`).join(', ')); | |
| const newOrder = columnsData.map(col => col.originalIndex); | |
| const newHeaderOrder = []; | |
| for (let i = 0; i < fixedCols; i++) { | |
| newHeaderOrder.push(headerCells[i]); | |
| } | |
| newOrder.forEach(idx => { | |
| newHeaderOrder.push(headerCells[fixedCols + idx]); | |
| }); | |
| while (headerRow.firstChild) { | |
| headerRow.removeChild(headerRow.firstChild); | |
| } | |
| newHeaderOrder.forEach(cell => { | |
| if (cell) headerRow.appendChild(cell); | |
| }); | |
| allBodyRows.forEach((row, rIdx) => { | |
| const cells = Array.from(row.querySelectorAll('td')); | |
| const newCellOrder = []; | |
| for (let i = 0; i < fixedCols; i++) { | |
| newCellOrder.push(cells[i]); | |
| } | |
| newOrder.forEach(idx => { | |
| newCellOrder.push(cells[fixedCols + idx]); | |
| }); | |
| while (row.firstChild) { | |
| row.removeChild(row.firstChild); | |
| } | |
| newCellOrder.forEach(cell => { | |
| if (cell) row.appendChild(cell); | |
| }); | |
| }); | |
| allBodyRows.forEach(row => row.classList.remove('leaderboard-row-highlighted')); | |
| const newRows = tbody.querySelectorAll('tr'); | |
| if (newRows[rowIndex]) { | |
| newRows[rowIndex].classList.add('leaderboard-row-highlighted'); | |
| } | |
| console.log('Sort complete'); | |
| } | |
| document.addEventListener('DOMContentLoaded', setupLeaderboardRowSorting); | |
| setTimeout(setupLeaderboardRowSorting, 500); | |
| setTimeout(setupLeaderboardRowSorting, 1000); | |
| setTimeout(setupLeaderboardRowSorting, 2000); | |
| setTimeout(setupLeaderboardRowSorting, 3000); | |
| setTimeout(setupLeaderboardRowSorting, 5000); | |
| const leaderboardObserver = new MutationObserver((mutations) => { | |
| for (const m of mutations) { | |
| if (m.type === 'childList') { | |
| const targetContainer = m.target.closest('#wer-leaderboard-table, #cer-leaderboard-table, #rtfx-leaderboard-table'); | |
| if (targetContainer) { | |
| const tableId = '#' + targetContainer.id; | |
| if (rowSortState[tableId]) { | |
| rowSortState[tableId] = { rowIndex: null, ascending: true }; | |
| } | |
| addRowSortTooltips(targetContainer); | |
| } | |
| } | |
| } | |
| setupLeaderboardRowSorting(); | |
| const containers = document.querySelectorAll('#wer-leaderboard-table, #cer-leaderboard-table, #rtfx-leaderboard-table'); | |
| containers.forEach(addRowSortTooltips); | |
| }); | |
| function startLeaderboardObserver() { | |
| if (document.body) { | |
| leaderboardObserver.observe(document.body, { | |
| childList: true, | |
| subtree: true | |
| }); | |
| setupLeaderboardRowSorting(); | |
| } else { | |
| setTimeout(startLeaderboardObserver, 10); | |
| } | |
| } | |
| startLeaderboardObserver(); | |
| })(); | |
| (function() { | |
| function setupColumnResize() { | |
| const leaderboardIds = ['#wer-leaderboard-table', '#cer-leaderboard-table', '#rtfx-leaderboard-table']; | |
| leaderboardIds.forEach(tableId => { | |
| const container = document.querySelector(tableId); | |
| if (!container) return; | |
| const table = container.querySelector('table'); | |
| if (!table || table.dataset.resizeSetup) return; | |
| table.dataset.resizeSetup = 'true'; | |
| const headers = table.querySelectorAll('thead th'); | |
| headers.forEach((th, index) => { | |
| if (th.querySelector('.col-resize-handle')) return; | |
| const headerText = th.textContent.trim(); | |
| if (headerText && !th.getAttribute('title')) { | |
| th.setAttribute('title', headerText); | |
| } | |
| const resizeHandle = document.createElement('div'); | |
| resizeHandle.className = 'col-resize-handle'; | |
| th.appendChild(resizeHandle); | |
| let startX, startWidth, isResizing = false; | |
| resizeHandle.addEventListener('mousedown', function(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| isResizing = true; | |
| startX = e.pageX; | |
| startWidth = th.offsetWidth; | |
| resizeHandle.classList.add('resizing'); | |
| document.body.style.cursor = 'col-resize'; | |
| document.body.style.userSelect = 'none'; | |
| }); | |
| document.addEventListener('mousemove', function(e) { | |
| if (!isResizing) return; | |
| const diff = e.pageX - startX; | |
| const newWidth = Math.max(60, Math.min(300, startWidth + diff)); | |
| th.style.width = newWidth + 'px'; | |
| th.style.minWidth = newWidth + 'px'; | |
| th.style.maxWidth = newWidth + 'px'; | |
| const tbody = table.querySelector('tbody'); | |
| if (tbody) { | |
| const rows = tbody.querySelectorAll('tr'); | |
| rows.forEach(row => { | |
| const cell = row.children[index]; | |
| if (cell) { | |
| cell.style.width = newWidth + 'px'; | |
| cell.style.minWidth = newWidth + 'px'; | |
| cell.style.maxWidth = newWidth + 'px'; | |
| } | |
| }); | |
| } | |
| }); | |
| document.addEventListener('mouseup', function() { | |
| if (isResizing) { | |
| isResizing = false; | |
| resizeHandle.classList.remove('resizing'); | |
| document.body.style.cursor = ''; | |
| document.body.style.userSelect = ''; | |
| } | |
| }); | |
| }); | |
| const cells = table.querySelectorAll('tbody td'); | |
| cells.forEach(cell => { | |
| const cellText = cell.textContent.trim(); | |
| if (cellText && !cell.getAttribute('title')) { | |
| cell.setAttribute('title', cellText); | |
| } | |
| }); | |
| }); | |
| } | |
| document.addEventListener('DOMContentLoaded', setupColumnResize); | |
| setTimeout(setupColumnResize, 100); | |
| setTimeout(setupColumnResize, 500); | |
| setTimeout(setupColumnResize, 1000); | |
| setTimeout(setupColumnResize, 2000); | |
| setTimeout(setupColumnResize, 3000); | |
| const resizeObserver = new MutationObserver((mutations) => { | |
| setupColumnResize(); | |
| }); | |
| function startResizeObserver() { | |
| if (document.body) { | |
| resizeObserver.observe(document.body, { | |
| childList: true, | |
| subtree: true | |
| }); | |
| setupColumnResize(); | |
| } else { | |
| setTimeout(startResizeObserver, 10); | |
| } | |
| } | |
| startResizeObserver(); | |
| })(); | |
| (function() { | |
| function disableDataframeContextMenu() { | |
| const leaderboardIds = ['#wer-leaderboard-table', '#cer-leaderboard-table', '#rtfx-leaderboard-table']; | |
| leaderboardIds.forEach(tableId => { | |
| const container = document.querySelector(tableId); | |
| if (!container || container.dataset.contextMenuDisabled) return; | |
| container.dataset.contextMenuDisabled = 'true'; | |
| container.addEventListener('contextmenu', function(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| return false; | |
| }, true); | |
| }); | |
| const dataframes = document.querySelectorAll('[data-testid="dataframe"], .table-wrap, .svelte-virtual-table-viewport'); | |
| dataframes.forEach(df => { | |
| if (df.dataset.contextMenuDisabled) return; | |
| df.dataset.contextMenuDisabled = 'true'; | |
| df.addEventListener('contextmenu', function(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| return false; | |
| }, true); | |
| }); | |
| } | |
| document.addEventListener('DOMContentLoaded', disableDataframeContextMenu); | |
| setTimeout(disableDataframeContextMenu, 100); | |
| setTimeout(disableDataframeContextMenu, 500); | |
| setTimeout(disableDataframeContextMenu, 1000); | |
| setTimeout(disableDataframeContextMenu, 2000); | |
| const contextMenuObserver = new MutationObserver((mutations) => { | |
| disableDataframeContextMenu(); | |
| }); | |
| function startContextMenuObserver() { | |
| if (document.body) { | |
| contextMenuObserver.observe(document.body, { | |
| childList: true, | |
| subtree: true | |
| }); | |
| disableDataframeContextMenu(); | |
| } else { | |
| setTimeout(startContextMenuObserver, 10); | |
| } | |
| } | |
| startContextMenuObserver(); | |
| })(); | |
| </script> | |
| """ | |
| light_mode_head = """ | |
| <script> | |
| (function() { | |
| document.documentElement.classList.remove('dark'); | |
| document.body && document.body.classList.remove('dark'); | |
| var url = new URL(window.location); | |
| if (url.searchParams.get('__theme') !== 'light') { | |
| url.searchParams.set('__theme', 'light'); | |
| var newUrl = url.pathname + url.search + url.hash; | |
| history.replaceState(null, '', newUrl); | |
| } | |
| var observer = new MutationObserver(function(mutations) { | |
| mutations.forEach(function(mutation) { | |
| if (mutation.attributeName === 'class') { | |
| var target = mutation.target; | |
| if (target.classList.contains('dark')) { | |
| target.classList.remove('dark'); | |
| } | |
| } | |
| }); | |
| }); | |
| observer.observe(document.documentElement, { attributes: true }); | |
| if (document.body) { | |
| observer.observe(document.body, { attributes: true }); | |
| } else { | |
| document.addEventListener('DOMContentLoaded', function() { | |
| document.body.classList.remove('dark'); | |
| observer.observe(document.body, { attributes: true }); | |
| }); | |
| } | |
| })(); | |
| </script> | |
| <style> | |
| :root, html, body, .gradio-container, .dark, body.dark { | |
| --body-background-fill: white !important; | |
| --background-fill-primary: white !important; | |
| --background-fill-secondary: #f9fafb !important; | |
| --body-text-color: #1f2937 !important; | |
| --body-text-color-subdued: #6b7280 !important; | |
| --block-background-fill: white !important; | |
| --block-border-color: #e5e7eb !important; | |
| --block-label-background-fill: #f3f4f6 !important; | |
| --block-label-text-color: #374151 !important; | |
| --block-title-text-color: #111827 !important; | |
| --input-background-fill: white !important; | |
| --input-border-color: #d1d5db !important; | |
| --table-even-background-fill: #f9fafb !important; | |
| --table-odd-background-fill: white !important; | |
| --table-row-focus: #e0f2fe !important; | |
| --border-color-primary: #e5e7eb !important; | |
| --neutral-50: #f9fafb !important; | |
| --neutral-100: #f3f4f6 !important; | |
| --neutral-200: #e5e7eb !important; | |
| --neutral-700: #374151 !important; | |
| --neutral-800: #1f2937 !important; | |
| --neutral-900: #111827 !important; | |
| --neutral-950: #030712 !important; | |
| } | |
| html, body, .gradio-container { | |
| background: white !important; | |
| color: #1f2937 !important; | |
| } | |
| .gradio-container table:not(.js-plotly-plot table), | |
| .dark .gradio-container table:not(.js-plotly-plot table) { | |
| background: white !important; | |
| color: #1f2937 !important; | |
| } | |
| .gradio-container th:not(.js-plotly-plot th), | |
| .gradio-container td:not(.js-plotly-plot td) { | |
| background: inherit !important; | |
| color: #1f2937 !important; | |
| border-color: #e5e7eb !important; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root, html, body, .gradio-container { | |
| --body-background-fill: white !important; | |
| --background-fill-primary: white !important; | |
| --background-fill-secondary: #f9fafb !important; | |
| --body-text-color: #1f2937 !important; | |
| --block-background-fill: white !important; | |
| background: white !important; | |
| color: #1f2937 !important; | |
| } | |
| } | |
| .js-plotly-plot, .js-plotly-plot *, | |
| .plotly, .plotly * { | |
| background: unset !important; | |
| background-color: unset !important; | |
| } | |
| </style> | |
| """ | |
| # ============================================================================= | |
| # HTML Templates | |
| # ============================================================================= | |
| chart_gallery_html = """ | |
| <div class="chart-gallery"> | |
| <div class="chart-card"> | |
| <h4>🏆 CER Performance Leaderboard</h4> | |
| <p>Ranks models by Character Error Rate. Especially useful for agglutinative and low-resource languages.</p> | |
| </div> | |
| <div class="chart-card"> | |
| <h4>🏆 WER Performance Leaderboard</h4> | |
| <p>Ranks model families or top individual models by Word Error Rate. Filter by language to see top performers.</p> | |
| </div> | |
| <div class="chart-card"> | |
| <h4>🚀 Speed vs Accuracy Tradeoffs</h4> | |
| <p>Scatter plot comparing model speed (RTFx) against accuracy (WER). Find the sweet spot between fast and accurate models.</p> | |
| </div> | |
| <div class="chart-card"> | |
| <h4>🔍 CER vs WER Correlation</h4> | |
| <p>Scatter plot showing relationship between character and word error rates. Understand error patterns across models.</p> | |
| </div> | |
| </div> | |
| """ | |
| section_divider_html = "<hr style='margin: 2rem 0;'>" | |
| footer_html = """ | |
| <footer class="paza-footer"> | |
| <div class="paza-footer-links"> | |
| <a href="https://go.microsoft.com/fwlink/?LinkId=521839" target="_blank" rel="noopener noreferrer">Privacy & Cookies</a> | |
| <a href="https://www.microsoft.com/en-us/research/lab/microsoft-research-lab-africa-nairobi/" target="_blank" rel="noopener noreferrer">Microsoft Research Africa, Nairobi</a> | |
| <a href="https://www.microsoft.com/en-us/research/project/project-gecko/" target="_blank" rel="noopener noreferrer">Project Gecko</a> | |
| <a href="https://www.microsoft.com/en-us/research/" target="_blank" rel="noopener noreferrer" class="copyright">© Microsoft Research 2026</a> | |
| </div> | |
| </footer> | |
| """ | |