Spaces:
Running
Running
| custom_css = """ | |
| .logo { | |
| width: 300px; | |
| height: auto; | |
| margin: 0 auto; | |
| max-width: 100% | |
| object-fit: contain; | |
| } | |
| .text { | |
| font-size: 16px !important; | |
| } | |
| .tabs button { | |
| font-size: 20px; | |
| } | |
| .subtabs button { | |
| font-size: 20px; | |
| } | |
| .descriptive-text span { | |
| font-size: 16px !important; | |
| } | |
| #control-panel span { | |
| font-size: 20px !important; | |
| } | |
| #search-bar span { | |
| font-size: 16px !important; | |
| } | |
| #threshold-slider span { | |
| font-size: 16px !important; | |
| } | |
| #memory-slider span { | |
| font-size: 16px !important; | |
| } | |
| #columns-checkboxes span { | |
| font-size: 16px !important; | |
| } | |
| #backend-checkboxes span { | |
| font-size: 16px !important; | |
| } | |
| #dtype-checkboxes span { | |
| font-size: 16px !important; | |
| } | |
| #optimization-checkboxes span { | |
| font-size: 16px !important; | |
| } | |
| #quantization-checkboxes span { | |
| font-size: 16px !important; | |
| } | |
| #kernel-checkboxes span { | |
| font-size: 16px !important; | |
| } | |
| /* Hide Gradio's built-in sorting dropdown */ | |
| .gradio-container .dataframe .sort-dropdown, | |
| .gradio-container .dataframe .sort-button, | |
| .gradio-container .dataframe .sort-icon, | |
| .gradio-container .dataframe [data-testid="sort-dropdown"], | |
| .gradio-container .dataframe button[aria-label*="sort"], | |
| .gradio-container .dataframe .dropdown-menu, | |
| .gradio-container .dataframe .dropdown, | |
| .gradio-container .dataframe select, | |
| .gradio-container .dataframe .sort-menu, | |
| .gradio-container .dataframe .header-menu, | |
| .gradio-container .dataframe .column-menu, | |
| .gradio-dataframe .sort-dropdown, | |
| .gradio-dataframe .sort-button, | |
| .gradio-dataframe .sort-icon, | |
| .gradio-dataframe [data-testid="sort-dropdown"], | |
| .gradio-dataframe button[aria-label*="sort"], | |
| .gradio-dataframe .dropdown-menu, | |
| .gradio-dataframe .dropdown, | |
| .gradio-dataframe select, | |
| .gradio-dataframe .sort-menu, | |
| .gradio-dataframe .header-menu, | |
| .gradio-dataframe .column-menu { | |
| display: none !important; | |
| visibility: hidden !important; | |
| opacity: 0 !important; | |
| pointer-events: none !important; | |
| } | |
| /* Leaderboard table container */ | |
| #leaderboard-table, | |
| .gradio-container .gradio-dataframe { | |
| max-height: 650px !important; | |
| overflow: auto !important; | |
| width: 100% !important; | |
| border: 1px solid #ddd !important; | |
| border-radius: 8px !important; | |
| box-sizing: border-box !important; | |
| background: white !important; | |
| } | |
| /* Table structure */ | |
| .gradio-container .gradio-dataframe table, | |
| #leaderboard-table table { | |
| width: 100% !important; | |
| table-layout: auto !important; | |
| border-collapse: collapse !important; | |
| display: table !important; | |
| margin: 0 !important; | |
| background: white !important; | |
| } | |
| /* Table headers */ | |
| .gradio-container .gradio-dataframe th, | |
| .sortable-table th { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; | |
| color: white !important; | |
| font-weight: 600 !important; | |
| font-size: 16px !important; | |
| padding: 16px 12px !important; | |
| border: 1px solid rgba(255,255,255,0.2) !important; | |
| cursor: pointer !important; | |
| text-align: center !important; | |
| position: sticky !important; | |
| top: 0 !important; | |
| z-index: 10 !important; | |
| white-space: nowrap !important; | |
| user-select: none !important; | |
| transition: all 0.2s ease !important; | |
| line-height: 1.4 !important; | |
| } | |
| /* Sort arrow styling */ | |
| .gradio-container .gradio-dataframe th:contains("🔺") { | |
| background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important; | |
| box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3) !important; | |
| } | |
| .gradio-container .gradio-dataframe th:contains("🔻") { | |
| background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%) !important; | |
| box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3) !important; | |
| } | |
| .gradio-container .gradio-dataframe th:contains("⬆️⬇️") { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; | |
| } | |
| /* Header hover effects */ | |
| .gradio-container .gradio-dataframe th:hover { | |
| background: linear-gradient(135deg, #5a6fd8 0%, #6b4190 100%) !important; | |
| transform: translateY(-1px) !important; | |
| box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important; | |
| } | |
| .gradio-container .gradio-dataframe th:active { | |
| transform: translateY(0) !important; | |
| background: linear-gradient(135deg, #4e5bc6 0%, #5e397e 100%) !important; | |
| } | |
| /* Table cells */ | |
| .gradio-container .gradio-dataframe td { | |
| padding: 14px 12px !important; | |
| border: 1px solid #ddd !important; | |
| text-align: center !important; | |
| vertical-align: middle !important; | |
| white-space: nowrap !important; | |
| overflow: hidden !important; | |
| text-overflow: ellipsis !important; | |
| line-height: 1.5 !important; | |
| font-size: 14px !important; | |
| } | |
| /* Table rows */ | |
| .gradio-container .gradio-dataframe tr:nth-child(even) { | |
| background-color: #f8f9fa !important; | |
| } | |
| .gradio-container .gradio-dataframe tbody tr:hover { | |
| background-color: #e3f2fd !important; | |
| transition: background-color 0.2s ease !important; | |
| } | |
| /* Ensure table body structure */ | |
| .gradio-container .gradio-dataframe tbody { | |
| display: table-row-group !important; | |
| } | |
| .gradio-container .gradio-dataframe tr { | |
| height: auto !important; | |
| min-height: 48px !important; | |
| } | |
| .gradio-container .gradio-dataframe td, | |
| .gradio-container .gradio-dataframe th { | |
| display: table-cell !important; | |
| } | |
| /* Scrollbar styling */ | |
| .gradio-container .gradio-dataframe::-webkit-scrollbar { | |
| width: 12px !important; | |
| height: 12px !important; | |
| } | |
| .gradio-container .gradio-dataframe::-webkit-scrollbar-track { | |
| background: #f1f1f1 !important; | |
| border-radius: 6px !important; | |
| } | |
| .gradio-container .gradio-dataframe::-webkit-scrollbar-thumb { | |
| background: #888 !important; | |
| border-radius: 6px !important; | |
| border: 2px solid #f1f1f1 !important; | |
| } | |
| .gradio-container .gradio-dataframe::-webkit-scrollbar-thumb:hover { | |
| background: #555 !important; | |
| } | |
| /* Disable cell selection highlighting */ | |
| .gradio-container .gradio-dataframe td { | |
| user-select: none !important; | |
| -webkit-user-select: none !important; | |
| -moz-user-select: none !important; | |
| -ms-user-select: none !important; | |
| } | |
| /* Remove hover effects on data cells */ | |
| .gradio-container .gradio-dataframe tbody td:hover { | |
| background-color: inherit !important; | |
| cursor: default !important; | |
| } | |
| /* JavaScript for enhanced sorting visual feedback */ | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| function updateHeaderStyling() { | |
| const headers = document.querySelectorAll('.gradio-dataframe th, .sortable-table th'); | |
| headers.forEach(header => { | |
| const text = header.textContent || header.innerText; | |
| if (text.includes('🔺')) { | |
| header.style.background = 'linear-gradient(135deg, #4CAF50 0%, #45a049 100%)'; | |
| header.style.boxShadow = '0 2px 4px rgba(76, 175, 80, 0.3)'; | |
| } else if (text.includes('🔻')) { | |
| header.style.background = 'linear-gradient(135deg, #2196F3 0%, #1976D2 100%)'; | |
| header.style.boxShadow = '0 2px 4px rgba(33, 150, 243, 0.3)'; | |
| } else if (text.includes('⬆️⬇️')) { | |
| header.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; | |
| header.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'; | |
| } | |
| }); | |
| // Force hide any dropdown elements | |
| const dropdowns = document.querySelectorAll('.dataframe select, .dataframe .dropdown, .dataframe .sort-menu'); | |
| dropdowns.forEach(dropdown => { | |
| dropdown.style.display = 'none'; | |
| dropdown.style.visibility = 'hidden'; | |
| dropdown.style.opacity = '0'; | |
| }); | |
| } | |
| // Update styling on page load | |
| updateHeaderStyling(); | |
| // Update styling when table content changes | |
| const observer = new MutationObserver(updateHeaderStyling); | |
| const container = document.querySelector('.gradio-container'); | |
| if (container) { | |
| observer.observe(container, { childList: true, subtree: true }); | |
| } | |
| }); | |
| </script> | |
| /* Responsive design */ | |
| @media (max-width: 768px) { | |
| .gradio-container .gradio-dataframe th, | |
| .gradio-container .gradio-dataframe td { | |
| font-size: 12px !important; | |
| padding: 6px 4px !important; | |
| } | |
| } | |
| """ | |