import gradio as gr from gradio_leaderboard import Leaderboard, ColumnFilter, SelectColumns import pandas as pd # 🎨 增强后的自定义 CSS custom_css = """ /* 全局设置:简洁、高级的字体和背景 */ :root { --color-background-primary: #f8f8f8; /* 浅米白色背景 */ --color-background-secondary: #ffffff; /* 卡片背景 */ --color-text-primary: #333333; --color-accent: #8e80ff; /* 浅紫色强调色 (Primary) */ --color-accent-light: #a99dff; /* 浅紫色悬停色 */ --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08); } body { background-color: var(--color-background-primary) !important; } /* 增加容器最大宽度以展示完整表格 */ .gradio-container { max-width: 1400px; /* 宽度从 1800px 调窄到 1400px */ margin: 0 auto; padding: 20px; } /* 标题样式 */ #space-title { color: var(--color-text-primary); font-size: 3em; font-weight: 700; margin-bottom: 0.5em; padding-top: 20px; } /* Group/Block 组件的卡片样式 */ .gr-group, .gr-block { background-color: var(--color-background-secondary); border-radius: 12px; box-shadow: var(--shadow-medium); transition: box-shadow 0.3s ease; padding: 15px; margin-bottom: 20px; } .gr-group:hover, .gr-block:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); } /* Leaderboard 容器:调整内部布局的关键 */ .leaderboard_root { padding: 0 !important; } /* 搜索栏布局调整 (第一行) */ .leaderboard_root > div:nth-child(1) { padding: 0 15px 15px 15px; } /* 过滤器和列选择布局调整 (第二行) */ .leaderboard_root > div:nth-child(2) { display: flex; padding: 0 15px 15px 15px; } .leaderboard_root .gr-form { border: none; } /* Search Bar */ #search-bar-table-box { width: 100%; margin-bottom: 10px; } #search-bar-table-box > div:first-child { background: none; border: none; } /* === Select Columns to Display: 强制单行展示 === */ /* 定位 SelectColumns 的内部复选框容器 */ .leaderboard-filter-column:first-child .gr-form-checkbox-group { /* 使用 flex 容器 */ display: flex !important; flex-wrap: nowrap !important; /* 强制不换行 */ overflow-x: auto !important; /* 允许水平滚动 */ gap: 10px; padding-bottom: 5px; } /* 确保每个复选框标签保持内联块级元素 */ .leaderboard-filter-column:first-child .gr-form-checkbox-group label { flex-shrink: 0 !important; /* 防止选项被压缩 */ display: inline-block !important; /* 确保每个选项占据其自然宽度 */ margin: 0; white-space: nowrap; /* 确保文字也不换行 */ } #leaderboard-table, #leaderboard-table-lite { margin-top: 15px; border-radius: 8px; overflow: hidden; } #leaderboard-table th { background-color: var(--color-accent); color: white; font-weight: 600; text-transform: uppercase; border-bottom: 2px solid var(--color-accent-light); } #leaderboard-table tr:hover { background-color: #f0f0f0; cursor: pointer; transition: background-color 0.2s ease; } #leaderboard-table td:nth-child(2), #leaderboard-table th:nth-child(2) { max-width: 400px; overflow: auto; white-space: nowrap; } #leaderboard-table td:nth-child(3) { font-weight: bold; color: var(--color-accent); } /* Citation 区域 */ #citation-group { padding: 20px; margin-top: 10px; } #citation-button { margin-top: 0; padding: 0; } /* 修复 Citation 复制图标重叠问题 */ #citation-button label { display: block; position: relative; } #citation-button textarea { font-family: monospace; background-color: #f1f1f1; border: 1px solid #cccccc; border-radius: 6px; padding: 10px; padding-right: 40px !important; /* 为复制按钮腾出空间 */ font-size: 14px !important; width: 100% !important; box-sizing: border-box; } /* 调整复制按钮的位置 */ #citation-button > label > button { position: absolute; top: 10px; right: 10px; margin: 0; transform: scale(1.1); transition: transform 0.2s ease; background-color: var(--color-accent) !important; color: white !important; border: none !important; border-radius: 6px; z-index: 10; } #citation-button > label > button:hover { transform: scale(1.2); background-color: var(--color-accent-light) !important; } /* Leaderboard 内部过滤/选择组件微调 */ .leaderboard_root .leaderboard-filter-column:last-child { flex-grow: 1; max-width: 50%; } .leaderboard_root .leaderboard-filter-column:first-child { max-width: 50%; padding-right: 20px; } #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 } /* 其他 Gradio 元素的简洁化 */ .wrap-inner input[type="text"], .wrap-inner input[type="number"] { border-radius: 6px; border: 1px solid #cccccc; padding: 8px 12px; } """ get_window_url_params = """ function(url_params) { const params = new URLSearchParams(window.location.search); url_params = Object.fromEntries(params); return url_params; } """ TITLE = """