add - init

.dockerignore

@@ -0,0 +1,69 @@
+# Git 相关文件
+.git
+.gitignore
+.gitattributes
+
+# IDE 相关文件
+.idea
+.vscode
+*.swp
+*.swo
+
+# Python 相关文件
+__pycache__
+*.pyc
+*.pyo
+*.pyd
+.Python
+env
+pip-log.txt
+pip-delete-this-directory.txt
+.tox
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.log
+.git
+.mypy_cache
+.pytest_cache
+.hypothesis
+
+# 虚拟环境
+.venv
+venv/
+ENV/
+env/
+.venv/
+
+# 系统文件
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# 临时文件
+*.tmp
+*.temp
+*.bak
+*.backup
+
+# 日志文件
+*.log
+logs/
+
+# 文档文件
+README.md
+TODO.md
+*.md
+
+# 测试文件
+test/
+tests/
+*_test.py
+test_*.py 

DEPLOYMENT.md

@@ -0,0 +1,125 @@
+# Docker 部署指南
+
+## 项目概述
+这是一个基于 Streamlit 的 Web 应用，提供了多语言文本处理功能。
+
+## 部署方式
+
+### 方式一：使用 Docker Compose（推荐）
+
+1. **构建并启动服务**
+   ```bash
+   docker-compose up --build
+   ```
+
+2. **后台运行**
+   ```bash
+   docker-compose up -d --build
+   ```
+
+3. **停止服务**
+   ```bash
+   docker-compose down
+   ```
+
+4. **查看日志**
+   ```bash
+   docker-compose logs -f
+   ```
+
+### 方式二：使用 Docker 命令
+
+1. **构建镜像**
+   ```bash
+   docker build -t streamlit-rteb .
+   ```
+
+2. **运行容器**
+   ```bash
+   docker run -d -p 8501:8501 --name streamlit-rteb streamlit-rteb
+   ```
+
+3. **停止容器**
+   ```bash
+   docker stop streamlit-rteb
+   docker rm streamlit-rteb
+   ```
+
+## 访问应用
+
+部署成功后，在浏览器中访问：
+- **本地访问**: http://localhost:8501
+- **局域网访问**: http://[服务器IP]:8501
+
+## 环境变量
+
+可以通过环境变量自定义配置：
+
+```bash
+# 设置端口
+export STREAMLIT_SERVER_PORT=8501
+
+# 设置地址
+export STREAMLIT_SERVER_ADDRESS=0.0.0.0
+
+# 设置 Python 路径
+export PYTHONPATH=/app
+```
+
+## 健康检查
+
+应用内置了健康检查机制：
+- 检查间隔：30秒
+- 超时时间：10秒
+- 重试次数：3次
+- 启动等待时间：40秒
+
+## 故障排除
+
+### 1. 端口被占用
+如果 8501 端口被占用，可以修改端口映射：
+```bash
+docker run -d -p 8502:8501 --name streamlit-rteb streamlit-rteb
+```
+
+### 2. 构建失败
+检查 Dockerfile 和依赖文件是否正确：
+```bash
+docker build --no-cache -t streamlit-rteb .
+```
+
+### 3. 应用无法启动
+查看容器日志：
+```bash
+docker logs streamlit-rteb
+```
+
+## 开发模式
+
+如果需要开发调试，可以挂载本地目录：
+
+1. **修改 docker-compose.yml**
+   ```yaml
+   volumes:
+     - ./app:/app/app
+     - ./utils:/app/utils
+     - ./app.py:/app/app.py
+   ```
+
+2. **重新启动服务**
+   ```bash
+   docker-compose up --build
+   ```
+
+## 性能优化
+
+1. **使用多阶段构建**（可选）
+2. **启用缓存**：Docker 会自动缓存构建层
+3. **优化镜像大小**：使用 slim 基础镜像
+
+## 安全建议
+
+1. **生产环境**：使用非 root 用户运行
+2. **网络安全**：配置防火墙规则
+3. **镜像安全**：定期更新基础镜像
+4. **依赖安全**：定期更新 Python 依赖包 

Dockerfile

@@ -0,0 +1,38 @@
+# 使用 Python 3.11 slim 镜像作为基础镜像
+FROM python:3.11-slim
+
+# 设置工作目录
+WORKDIR /app
+
+# 安装系统依赖
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    curl \
+    software-properties-common \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# 复制依赖文件
+COPY requirements.txt ./
+
+# 安装 Python 依赖
+RUN pip install --no-cache-dir -r requirements.txt
+
+# 复制应用代码
+COPY app/ ./app/
+COPY utils/ ./utils/
+COPY app.py ./
+
+# 暴露 Streamlit 默认端口
+EXPOSE 8501
+
+# 健康检查
+HEALTHCHECK CMD curl --fail http://localhost:8501/_stcore/health || exit 1
+
+# 设置环境变量
+ENV PYTHONPATH=/app
+ENV STREAMLIT_SERVER_PORT=8501
+ENV STREAMLIT_SERVER_ADDRESS=0.0.0.0
+
+# 启动命令
+ENTRYPOINT ["streamlit", "run", "app.py", "--server.port=8501", "--server.address=0.0.0.0"]

app.py

@@ -0,0 +1,63 @@
+import os
+
+# Compatibility fix - must be executed before importing streamlit
+try:
+    import streamlit.components.v1 as components
+    if not hasattr(components, 'components'):
+        components.components = components
+    if not hasattr(components, 'MarshallComponentException'):
+        class MarshallComponentException(Exception):
+            pass
+        components.MarshallComponentException = MarshallComponentException
+except Exception as e:
+    print(f"Compatibility fix warning: {e}")
+
+import streamlit as st
+
+from st_pages import get_nav_from_toml, add_page_title
+
+from app.backend.app_init_func import LI_CSS, init_leaderboard, init_pages
+from app.backend.data_engine import DataEngine
+
+
+def main():
+    # init global data engine
+    data_engine = DataEngine()
+
+    st.session_state["data_engine"] = data_engine
+    st.set_page_config(layout="wide")
+
+    # init leaderboard and pages
+    leaderboard_change, page_change = init_leaderboard()
+
+    init_pages(leaderboard_change, page_change)
+
+    # load page tree
+    nav = get_nav_from_toml(
+        "app/ui/pages_sections.toml"
+    )
+
+    # Add custom CSS
+    css = "\n".join(LI_CSS)
+    st.markdown(f"""
+        <style>
+    
+            div[data-testid="stToolbar"] {{visibility: hidden; height: 0px;}}
+    
+            footer {{visibility: hidden;}}
+        </style>
+    
+        <style>
+            {css}
+        </style>
+        """
+                , unsafe_allow_html=True)
+
+    pg = st.navigation(nav)
+
+    # add_page_title(pg)
+
+    pg.run()
+
+if __name__ == '__main__':
+    main()

app/__init__.py

@@ -0,0 +1 @@
+

app/backend/__init__.py

@@ -0,0 +1 @@
+

app/backend/app_init_func.py

@@ -0,0 +1,85 @@
+import streamlit as st
+import os
+
+from app.backend.constant import LEADERBOARD_ICON_MAP
+from app.backend.data_engine import DataEngine
+
+LEADERBOARD_MAP = {}
+LI_CSS = []
+PAGE_SECTIONS = []
+
+
+def init_leaderboard():
+    data_engine = st.session_state.get("data_engine",DataEngine())
+    leaderboard_map = {}
+    page_sections = []
+    li_css = []
+    sort_id = 0
+    leaderboard_change = False
+    page_change = False
+
+    for dataset in data_engine.datasets:
+        sort_id += 1
+        leaderboard = dataset["leaderboard"]
+        name = dataset["name"]
+
+        leaderboard_section = f"{leaderboard.capitalize()} Leaderboard"
+        if leaderboard_section not in leaderboard_map:
+            leaderboard_map[leaderboard_section] = []
+        if name.lower() == leaderboard.lower():
+            leaderboard_map[leaderboard_section].append((name, 0))
+        else:
+            leaderboard_map[leaderboard_section].append((name, sort_id))
+            li_css.append(f"""
+            ul[data-testid="stSidebarNavItems"] li:nth-child({sort_id}) {{
+            text-indent: 2rem;
+        }}
+            """)
+        page_name = leaderboard_section if name.lower() == leaderboard.lower() else name.capitalize()
+        page_sections.append(f"""
+        [[pages]]
+        path = "app/ui/pages/{name}.py"
+        name = "{page_name}"
+        icon = "{LEADERBOARD_ICON_MAP.get(page_name, "")}"
+        """)
+
+    # ensure leaderboard is first
+    for k, v in leaderboard_map.items():
+        v.sort(key=lambda x: x[1])
+
+    if leaderboard_map != LEADERBOARD_MAP:
+        LEADERBOARD_MAP.update(leaderboard_map)
+        leaderboard_change = True
+    if page_sections != PAGE_SECTIONS:
+        PAGE_SECTIONS.clear()
+        PAGE_SECTIONS.extend(page_sections)
+        page_change = True
+    if li_css != LI_CSS:
+        LI_CSS.clear()
+        LI_CSS.extend(li_css)
+
+    return leaderboard_change, page_change
+
+
+def init_pages(leaderboard_change, page_change):
+    # init pages
+    if leaderboard_change:
+        with open("app/ui/pages/data_page.py", "r", encoding="utf-8") as f:
+            data_page = f.read()
+        for leaderboard, group_names in LEADERBOARD_MAP.items():
+
+            for group_name in group_names:
+                path = os.path.join("app/ui/pages", f"{group_name[0]}.py")
+                with open(path, "w", encoding="utf-8") as f:
+                    f.write(data_page.replace("$group_name$", group_name[0])
+                            )
+    if page_change:
+        with open("app/ui/pages_sections.toml", "w", encoding="utf-8") as f:
+            f.write("\n".join(PAGE_SECTIONS))
+
+
+if __name__ == '__main__':
+    init_leaderboard()
+    init_pages()
+    print("\n".join(PAGE_SECTIONS))
+    print("\n".join(LI_CSS))

app/backend/component/header_tooltip_link_component.py

@@ -0,0 +1,654 @@
+from st_aggrid import JsCode
+
+
+def get_header_tooltip_link_component_simple(theme_type="light"):
+    """
+    真正的最小化版本 - 只添加tooltip链接功能
+    
+    基于工作组件的实现，修复排序、菜单和抖动问题
+    """
+    return JsCode(f"""
+    class HeaderTooltipLinkSimple {{
+        init(params) {{
+            this.params = params;
+            this.themeType = "{theme_type}";
+            this.isDestroyed = false;
+            this.customTooltip = null;
+            this.hideTimeout = null;
+            this.eGui = null;
+            this.isInitialized = false;
+            this.eventListenersBound = false; // 添加事件监听器绑定标志
+        }}
+
+        getGui() {{
+            if (!this.eGui && !this.isDestroyed) {{
+                this.eGui = this.createGui();
+                this.isInitialized = true;
+            }}
+            return this.eGui || document.createElement('div');
+        }}
+
+        createGui() {{
+            try {{
+                // 🎯 创建基本的header容器
+                const container = document.createElement('div');
+                container.classList.add('ag-cell-label-container');
+                container.style.cssText = `
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-start;
+                    height: 100%;
+                    width: 100%;
+                `;
+
+                // 🎯 创建header label
+                const headerLabel = document.createElement('div');
+                headerLabel.classList.add('ag-header-cell-label');
+                headerLabel.style.cssText = `
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-start;
+                    height: 100%;
+                    width: 100%;
+                    cursor: pointer;
+                `;
+
+                // 🎯 显示列名
+                const textSpan = document.createElement('span');
+                const displayText = this.params.displayName || 
+                                  (this.params.column && this.params.column.colDef ? this.params.column.colDef.headerName : '') ||
+                                  (this.params.column && this.params.column.colDef ? this.params.column.colDef.field : '') ||
+                                  '';
+                textSpan.textContent = displayText;
+                headerLabel.appendChild(textSpan);
+
+                // 🎯 排序图标
+                const sortContainer = document.createElement('span');
+                sortContainer.classList.add('ag-header-icon', 'ag-header-icon-sort');
+                this.sortIcon = document.createElement('span');
+                this.updateSortIcon();
+                sortContainer.appendChild(this.sortIcon);
+                headerLabel.appendChild(sortContainer);
+
+                // 🎯 菜单按钮 - 使用正确的样式
+                const menuButton = document.createElement('span');
+                menuButton.classList.add('ag-header-icon', 'ag-header-cell-menu-button');
+                menuButton.innerHTML = '<i class="ag-icon ag-icon-filter"></i>';
+                headerLabel.appendChild(menuButton);
+
+                container.appendChild(headerLabel);
+
+                // 🎯 创建tooltip - 只在第一次创建
+                if (!this.customTooltip) {{
+                    this.createCustomTooltip();
+                }}
+
+                // 🎯 事件监听 - 只在第一次绑定
+                if (!this.eventListenersBound) {{
+                    this.setupEventListeners(container, headerLabel, menuButton);
+                    this.eventListenersBound = true;
+                }}
+
+                return container;
+            }} catch (error) {{
+                console.error('Error creating header component:', error);
+                // 返回一个简单的fallback
+                const fallback = document.createElement('div');
+                fallback.textContent = this.params.displayName || '';
+                return fallback;
+            }}
+        }}
+
+        setupEventListeners(container, headerLabel, menuButton) {{
+            // 🎯 Tooltip事件
+            container.addEventListener('mouseenter', (event) => {{
+                if (this.params.linkUrl && this.params.linkUrl !== '#' && !this.isDestroyed) {{
+                    this.cancelHideTimeout();
+                    this.showCustomTooltip(event);
+                }}
+            }});
+
+            container.addEventListener('mouseleave', () => {{
+                if (!this.isDestroyed) {{
+                    this.startHideTimeout();
+                }}
+            }});
+
+            // 🎯 自定义tooltip事件
+            if (this.customTooltip) {{
+                this.customTooltip.addEventListener('mouseenter', () => {{
+                    if (!this.isDestroyed) {{
+                        this.cancelHideTimeout();
+                    }}
+                }});
+
+                this.customTooltip.addEventListener('mouseleave', () => {{
+                    if (!this.isDestroyed) {{
+                        this.hideCustomTooltip();
+                    }}
+                }});
+            }}
+
+            // 🎯 排序功能 - 使用正确的API
+            headerLabel.addEventListener('click', (event) => {{
+                if (this.params.enableSorting && !this.isDestroyed) {{
+                    // 使用新的API调用方法
+                    if (this.params.progressSort) {{
+                        this.params.progressSort();
+                    }} else if (this.params.column && this.params.column.setSort) {{
+                        const currentSort = this.params.column.getSort();
+                        const newSort = currentSort === 'asc' ? 'desc' : 
+                                      currentSort === 'desc' ? null : 'asc';
+                        this.params.column.setSort(newSort);
+                    }}
+                    this.updateSortIcon();
+                }}
+            }});
+
+            // 🎯 菜单功能 - 使用正确的API
+            menuButton.addEventListener('click', (event) => {{
+                event.stopPropagation();
+                if (!this.isDestroyed && this.params.api) {{
+                    // 使用更兼容的菜单API
+                    try {{
+                        // 尝试使用新的API
+                        if (this.params.api.showColumnMenuAfterButtonClick) {{
+                            this.params.api.showColumnMenuAfterButtonClick(
+                                this.params.column,
+                                menuButton,
+                                'columnMenu'
+                            );
+                        }} else if (this.params.api.showColumnMenu) {{
+                            // 备用API
+                            this.params.api.showColumnMenu(this.params.column);
+                        }} else {{
+                            // 最后的备用方案 - 触发原生菜单事件
+                            const menuEvent = new MouseEvent('click', {{
+                                bubbles: true,
+                                cancelable: true,
+                                view: window
+                            }});
+                            menuButton.dispatchEvent(menuEvent);
+                        }}
+                    }} catch (error) {{
+                        console.warn('Menu API not available:', error);
+                        // 最后的备用方案 - 触发原生菜单事件
+                        try {{
+                            const menuEvent = new MouseEvent('click', {{
+                                bubbles: true,
+                                cancelable: true,
+                                view: window
+                            }});
+                            menuButton.dispatchEvent(menuEvent);
+                        }} catch (e) {{
+                            console.warn('Fallback menu also failed:', e);
+                        }}
+                    }}
+                }}
+            }});
+        }}
+
+        createCustomTooltip() {{
+            // 确保tooltip只创建一次
+            if (this.customTooltip) return;
+            
+            this.customTooltip = document.createElement('div');
+            this.customTooltip.classList.add('header-tooltip-link-simple');
+            this.customTooltip.style.cssText = `
+                position: fixed;
+                display: none;
+                z-index: 999999;
+                padding: 8px 12px;
+                border-radius: 4px;
+                font-size: 12px;
+                white-space: nowrap;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+                pointer-events: auto;
+                transition: opacity 0.2s;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            `;
+
+            if (this.themeType === 'dark') {{
+                this.customTooltip.style.backgroundColor = '#1a202c';
+                this.customTooltip.style.color = '#ffffff';
+                this.customTooltip.style.border = '1px solid #2d3748';
+            }} else {{
+                this.customTooltip.style.backgroundColor = '#ffffff';
+                this.customTooltip.style.color = '#2d3748';
+                this.customTooltip.style.border = '1px solid #e2e8f0';
+            }}
+
+            const linkButton = document.createElement('button');
+            linkButton.style.cssText = `
+                background: none;
+                border: none;
+                cursor: pointer;
+                padding: 4px 8px;
+                border-radius: 3px;
+                font-size: 12px;
+                color: inherit;
+            `;
+
+            if (this.params.tooltipContent) {{
+                linkButton.innerHTML = `<span style="margin-right: 4px;">🔗</span>${{this.params.tooltipContent}}`;
+            }} else {{
+                linkButton.innerHTML = '<span style="margin-right: 4px;">🔗</span>Navigate Link';
+            }}
+
+            linkButton.addEventListener('click', (event) => {{
+                event.stopPropagation();
+                const url = this.params.linkUrl || '#';
+                if (url !== '#' && !this.isDestroyed) {{
+                    window.open(url, '_blank');
+                }}
+                this.hideCustomTooltip();
+            }});
+
+            this.customTooltip.appendChild(linkButton);
+            document.body.appendChild(this.customTooltip);
+        }}
+
+        showCustomTooltip(event) {{
+            if (this.isDestroyed || !this.customTooltip) return;
+
+            try {{
+                const rect = event.currentTarget.getBoundingClientRect();
+                const mouseX = event.clientX;
+                const mouseY = rect.bottom + 5;
+
+                this.customTooltip.style.left = mouseX + 'px';
+                this.customTooltip.style.top = mouseY + 'px';
+                this.customTooltip.style.transform = 'translateX(-50%)';
+                this.customTooltip.style.display = 'block';
+            }} catch (error) {{
+                console.error('Error showing custom tooltip:', error);
+            }}
+        }}
+
+        startHideTimeout() {{
+            this.cancelHideTimeout();
+            this.hideTimeout = setTimeout(() => {{
+                this.hideCustomTooltip();
+            }}, 300);
+        }}
+
+        cancelHideTimeout() {{
+            if (this.hideTimeout) {{
+                clearTimeout(this.hideTimeout);
+                this.hideTimeout = null;
+            }}
+        }}
+
+        hideCustomTooltip() {{
+            this.cancelHideTimeout();
+            if (this.customTooltip && !this.isDestroyed) {{
+                this.customTooltip.style.display = 'none';
+            }}
+        }}
+
+        updateSortIcon() {{
+            try {{
+                const sortState = this.params.column.getSort();
+                if (this.sortIcon) {{
+                    this.sortIcon.innerHTML = '';
+                    if (sortState === 'asc') {{
+                        this.sortIcon.innerHTML = '<i class="ag-icon ag-icon-asc"></i>';
+                    }} else if (sortState === 'desc') {{
+                        this.sortIcon.innerHTML = '<i class="ag-icon ag-icon-desc"></i>';
+                    }}
+                }}
+            }} catch (error) {{
+                console.warn('Error updating sort icon:', error);
+            }}
+        }}
+
+        destroy() {{
+            this.isDestroyed = true;
+            this.cancelHideTimeout();
+            if (this.customTooltip && this.customTooltip.parentNode) {{
+                this.customTooltip.parentNode.removeChild(this.customTooltip);
+            }}
+            // Clean up event listeners
+            if (this.eGui) {{
+                this.eGui = null;
+            }}
+            this.eventListenersBound = false;
+        }}
+
+        refresh(params) {{
+            if (!this.isDestroyed) {{
+                this.params = params;
+                this.updateSortIcon();
+            }}
+        }}
+    }}
+    """)
+
+
+def get_header_tooltip_link_component(theme_type="light"):
+    """
+    完整版本 - 完全重写header组件（保留作为备选）
+    """
+    # print("xxx")
+    return JsCode(f"""
+    class HeaderTooltipLinkComponent {{
+        init(params) {{
+            this.params = params;
+            this.themeType = "{theme_type}";
+            this.isDestroyed = false;
+            this.customTooltip = null;
+            this.hideTimeout = null;
+            this.eGui = null;
+            this.isInitialized = false;
+            this.eventListenersBound = false; // 添加事件监听器绑定标志
+        }}
+
+        getGui() {{
+            if (!this.eGui && !this.isDestroyed) {{
+                this.eGui = this.createGui();
+                this.isInitialized = true;
+            }}
+            return this.eGui || document.createElement('div');
+        }}
+
+        createGui() {{
+            try {{
+                // 🎯 完全重写header组件
+                const container = document.createElement('div');
+                container.classList.add('ag-cell-label-container');
+                container.style.cssText = `
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-start;
+                    height: 100%;
+                    width: 100%;
+                `;
+
+                // 🎯 创建header label
+                const headerLabel = document.createElement('div');
+                headerLabel.classList.add('ag-header-cell-label');
+                headerLabel.style.cssText = `
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-start;
+                    height: 100%;
+                    width: 100%;
+                    cursor: pointer;
+                `;
+
+                // 🎯 显示列名
+                const textSpan = document.createElement('span');
+                const displayText = this.params.displayName || 
+                                  (this.params.column && this.params.column.colDef ? this.params.column.colDef.headerName : '') ||
+                                  (this.params.column && this.params.column.colDef ? this.params.column.colDef.field : '') ||
+                                  '';
+                textSpan.textContent = displayText;
+
+                // 🎯 排序图标
+                const sortContainer = document.createElement('span');
+                sortContainer.classList.add('ag-header-icon', 'ag-header-icon-sort');
+                this.sortIcon = document.createElement('span');
+                this.updateSortIcon();
+                sortContainer.appendChild(this.sortIcon);
+
+                // 🎯 菜单按钮
+                const menuButton = document.createElement('span');
+                menuButton.classList.add('ag-header-icon', 'ag-header-cell-menu-button');
+                menuButton.innerHTML = '<i class="ag-icon ag-icon-menu"></i>';
+
+                // 🎯 组装结构
+                headerLabel.appendChild(textSpan);
+                headerLabel.appendChild(sortContainer);
+                headerLabel.appendChild(menuButton);
+                container.appendChild(headerLabel);
+
+                // 🎯 创建tooltip - 只在第一次创建
+                if (!this.customTooltip) {{
+                    this.createCustomTooltip();
+                }}
+
+                // 🎯 事件监听 - 只在第一次绑定
+                if (!this.eventListenersBound) {{
+                    this.setupEventListeners(container, headerLabel, menuButton);
+                    this.eventListenersBound = true;
+                }}
+
+                return container;
+            }} catch (error) {{
+                console.error('Error creating header component:', error);
+                // 返回一个简单的fallback
+                const fallback = document.createElement('div');
+                fallback.textContent = this.params.displayName || '';
+                return fallback;
+            }}
+        }}
+
+        createCustomTooltip() {{
+            // 确保tooltip只创建一次
+            if (this.customTooltip) return;
+            
+            this.customTooltip = document.createElement('div');
+            this.customTooltip.classList.add('header-tooltip-link-container');
+            this.customTooltip.style.cssText = `
+                position: fixed;
+                display: none;
+                z-index: 999999;
+                padding: 8px 12px;
+                border-radius: 4px;
+                font-size: 12px;
+                white-space: nowrap;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+                pointer-events: auto;
+                transition: opacity 0.2s;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            `;
+
+            if (this.themeType === 'dark') {{
+                this.customTooltip.style.backgroundColor = '#1a202c';
+                this.customTooltip.style.color = '#ffffff';
+                this.customTooltip.style.border = '1px solid #2d3748';
+            }} else {{
+                this.customTooltip.style.backgroundColor = '#ffffff';
+                this.customTooltip.style.color = '#2d3748';
+                this.customTooltip.style.border = '1px solid #e2e8f0';
+            }}
+
+            const linkButton = document.createElement('button');
+            linkButton.classList.add('header-tooltip-link-button');
+            linkButton.style.cssText = `
+                background: none;
+                border: none;
+                cursor: pointer;
+                padding: 4px 8px;
+                border-radius: 3px;
+                font-size: 12px;
+                transition: background-color 0.2s;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                color: inherit;
+            `;
+
+            if (this.params.tooltipContent) {{
+                linkButton.innerHTML = `<span style="margin-right: 4px;">🔗</span>${{this.params.tooltipContent}}`;
+            }} else {{
+                linkButton.innerHTML = '<span style="margin-right: 4px;">🔗</span>Navigate Link';
+            }}
+
+            linkButton.addEventListener('click', (event) => {{
+                event.stopPropagation();
+                const url = this.params.linkUrl || '#';
+                if (url !== '#' && !this.isDestroyed) {{
+                    window.open(url, '_blank');
+                }}
+                this.hideCustomTooltip();
+            }});
+
+            this.customTooltip.appendChild(linkButton);
+            document.body.appendChild(this.customTooltip);
+        }}
+
+        setupEventListeners(container, headerLabel, menuButton) {{
+            // 🎯 Tooltip事件
+            container.addEventListener('mouseenter', (event) => {{
+                if (this.params.linkUrl && this.params.linkUrl !== '#' && !this.isDestroyed) {{
+                    this.cancelHideTimeout();
+                    this.showCustomTooltip(event);
+                }}
+            }});
+
+            container.addEventListener('mouseleave', () => {{
+                if (!this.isDestroyed) {{
+                    this.startHideTimeout();
+                }}
+            }});
+
+            // 🎯 自定义tooltip事件
+            if (this.customTooltip) {{
+                this.customTooltip.addEventListener('mouseenter', () => {{
+                    if (!this.isDestroyed) {{
+                        this.cancelHideTimeout();
+                    }}
+                }});
+
+                this.customTooltip.addEventListener('mouseleave', () => {{
+                    if (!this.isDestroyed) {{
+                        this.hideCustomTooltip();
+                    }}
+                }});
+            }}
+
+            // 🎯 排序功能
+            headerLabel.addEventListener('click', (event) => {{
+                if (this.params.enableSorting && !this.isDestroyed) {{
+                    if (this.params.progressSort) {{
+                        this.params.progressSort();
+                    }} else if (this.params.column && this.params.column.setSort) {{
+                        const currentSort = this.params.column.getSort();
+                        const newSort = currentSort === 'asc' ? 'desc' : 
+                                      currentSort === 'desc' ? null : 'asc';
+                        this.params.column.setSort(newSort);
+                    }}
+                    this.updateSortIcon();
+                }}
+            }});
+
+            // 🎯 菜单功能
+            menuButton.addEventListener('click', (event) => {{
+                event.stopPropagation();
+                if (!this.isDestroyed && this.params.api) {{
+                    // 使用更兼容的菜单API
+                    try {{
+                        // 尝试使用新的API
+                        if (this.params.api.showColumnMenuAfterButtonClick) {{
+                            this.params.api.showColumnMenuAfterButtonClick(
+                                this.params.column,
+                                menuButton,
+                                'columnMenu'
+                            );
+                        }} else if (this.params.api.showColumnMenu) {{
+                            // 备用API
+                            this.params.api.showColumnMenu(this.params.column);
+                        }} else {{
+                            // 最后的备用方案 - 触发原生菜单事件
+                            const menuEvent = new MouseEvent('click', {{
+                                bubbles: true,
+                                cancelable: true,
+                                view: window
+                            }});
+                            menuButton.dispatchEvent(menuEvent);
+                        }}
+                    }} catch (error) {{
+                        console.warn('Menu API not available:', error);
+                        // 最后的备用方案 - 触发原生菜单事件
+                        try {{
+                            const menuEvent = new MouseEvent('click', {{
+                                bubbles: true,
+                                cancelable: true,
+                                view: window
+                            }});
+                            menuButton.dispatchEvent(menuEvent);
+                        }} catch (e) {{
+                            console.warn('Fallback menu also failed:', e);
+                        }}
+                    }}
+                }}
+            }});
+        }}
+
+        showCustomTooltip(event) {{
+            if (this.isDestroyed || !this.customTooltip) return;
+
+            try {{
+                const rect = event.currentTarget.getBoundingClientRect();
+                const mouseX = event.clientX;
+                const mouseY = rect.bottom + 5;
+
+                this.customTooltip.style.left = mouseX + 'px';
+                this.customTooltip.style.top = mouseY + 'px';
+                this.customTooltip.style.transform = 'translateX(-50%)';
+                this.customTooltip.style.display = 'block';
+            }} catch (error) {{
+                console.error('Error showing custom tooltip:', error);
+            }}
+        }}
+
+        startHideTimeout() {{
+            this.cancelHideTimeout();
+            this.hideTimeout = setTimeout(() => {{
+                this.hideCustomTooltip();
+            }}, 300);
+        }}
+
+        cancelHideTimeout() {{
+            if (this.hideTimeout) {{
+                clearTimeout(this.hideTimeout);
+                this.hideTimeout = null;
+            }}
+        }}
+
+        hideCustomTooltip() {{
+            this.cancelHideTimeout();
+            if (this.customTooltip && !this.isDestroyed) {{
+                this.customTooltip.style.display = 'none';
+            }}
+        }}
+
+        updateSortIcon() {{
+            try {{
+                const sortState = this.params.column.getSort();
+                if (this.sortIcon) {{
+                    this.sortIcon.innerHTML = '';
+                    if (sortState === 'asc') {{
+                        this.sortIcon.innerHTML = '<i class="ag-icon ag-icon-asc"></i>';
+                    }} else if (sortState === 'desc') {{
+                        this.sortIcon.innerHTML = '<i class="ag-icon ag-icon-desc"></i>';
+                    }}
+                }}
+            }} catch (error) {{
+                console.warn('Error updating sort icon:', error);
+            }}
+        }}
+
+        destroy() {{
+            this.isDestroyed = true;
+            this.cancelHideTimeout();
+            if (this.customTooltip && this.customTooltip.parentNode) {{
+                this.customTooltip.parentNode.removeChild(this.customTooltip);
+            }}
+            // Clean up event listeners
+            if (this.eGui) {{
+                this.eGui = null;
+            }}
+            this.eventListenersBound = false;
+        }}
+
+        refresh(params) {{
+            if (!this.isDestroyed) {{
+                this.params = params;
+                this.updateSortIcon();
+            }}
+        }}
+    }}
+    """) 

app/backend/constant.py

@@ -0,0 +1,92 @@
+from enum import Enum
+
+
+class Navigation(Enum):
+    TEXT_LEADERBOARD = "Text Leaderboard"
+    MULTIMODAL_LEADERBOARD = "Multimodal Leaderboard"
+
+
+class TaskCategory(Enum):
+    LAW = "Law"
+    CODE = "Code"
+    CONVERSATIONAL = "Conversational"
+    TECH = "Tech"
+    LONG_CONTEXT = "Long-context"
+    MULTILINGUAL = "Multilingual"
+
+
+class ModelProvider(Enum):
+    OPENAI = "OpenAI"
+    VOYAGEAI = "VoyageAI"
+    COHERE = "Cohere"
+    OTHERS = "Others"
+
+
+class EvaluationMetric(Enum):
+    NDCG_1 = "NDCG@1"
+    NDCG_3 = "NDCG@3"
+    NDCG_5 = "NDCG@5"
+    NDCG_10 = "NDCG@10"
+    NDCG_20 = "NDCG@20"
+    NDCG_50 = "NDCG@50"
+    NDCG_100 = "NDCG@100"
+    RECALL_1 = "RECALL@1"
+    RECALL_3 = "RECALL@3"
+    RECALL_5 = "RECALL@5"
+    RECALL_10 = "RECALL@10"
+    RECALL_20 = "RECALL@20"
+    RECALL_50 = "RECALL@50"
+    RECALL_100 = "RECALL@100"
+    PRECISION_1 = "PRECISION@1"
+    PRECISION_3 = "PRECISION@3"
+    PRECISION_5 = "PRECISION@5"
+    PRECISION_10 = "PRECISION@10"
+    PRECISION_20 = "PRECISION@20"
+    PRECISION_50 = "PRECISION@50"
+    PRECISION_100 = "PRECISION@100"
+
+
+class EmbdDtype(Enum):
+    ALL = "all"
+    FLOAT_32 = "float32"
+    INT_8 = "int8"
+    BINARY = "binary"
+
+
+class EmbdDim(Enum):
+    OP1 = "<=1k"
+    OP2 = "1k-2k"
+    OP3 = "2k-5k"
+    OP4 = ">=5k"
+
+
+class Similarity(Enum):
+    ALL = "all"
+    COSINE = "cosine"
+    DOT = "dot"
+    EUCLIDEAN = "euclidean"
+
+
+LEADERBOARD_ICON_MAP = {
+    "Text Leaderboard": "📚",
+    "Law": "⚖️",
+    "Multilingual": "🌎",
+    "German": "🇩🇪",
+    "Code": "💻",
+    "Tech": "🛠️",
+    "Legal": "📜",
+    "English": "🇬🇧",
+    "Healthcare": "🏥",
+    "Finance": "💰",
+    "French": "🇫🇷",
+    "Japanese": "🇯🇵",
+
+}
+
+
+# USERNAME = "embedding-benchmark"
+# SPACENAME = "RTEB"
+USERNAME = "q275343119"
+SPACENAME = "streamlit-rteb"
+# https://{UserName}-{SpaceName}.hf.space/
+BASE_URL = f"https://{USERNAME}-{SPACENAME}.hf.space/"

app/backend/data_engine.py

@@ -0,0 +1,168 @@
+"""
+Data service provider
+"""
+import json
+from typing import List
+
+import pandas as pd
+
+from utils.cache_decorator import cache_df_with_custom_key, cache_dict_with_custom_key
+from utils.http_utils import get
+
+COLUMNS = ['model_name',
+           'embd_dtype', 'embd_dim', 'num_params', 'max_tokens', 'similarity',
+           'query_instruct', 'corpus_instruct',
+
+           ]
+COLUMNS_TYPES = ["markdown",
+                 'str', 'str', 'number', 'number', 'str',
+                 'str', 'str',
+
+                 ]
+
+BRANCH = 'main'
+GIT_URL = f"https://raw.githubusercontent.com/embedding-benchmark/rteb/refs/heads/{BRANCH}/results/"
+DATASET_URL = f"{GIT_URL}datasets.json"
+MODEL_URL = f"{GIT_URL}models.json"
+RESULT_URL = f"{GIT_URL}results.json"
+
+
+class DataEngine:
+
+    def __init__(self):
+        self.df = self.init_dataframe()
+
+    @property
+    @cache_dict_with_custom_key("models")
+    def models(self):
+        """
+        Get models data
+        """
+        res = get(MODEL_URL)
+        if res.status_code == 200:
+            return res.json()
+        return {}
+
+    @property
+    @cache_dict_with_custom_key("datasets")
+    def datasets(self):
+        """
+        Get tasks data
+        """
+        res = get(DATASET_URL)
+        if res.status_code == 200:
+            return res.json()
+        return {}
+
+    @property
+    @cache_dict_with_custom_key("results")
+    def results(self):
+        """
+        Get results data
+        """
+        res = get(RESULT_URL)
+        if res.status_code == 200:
+            return res.json()
+        return {}
+
+    def init_dataframe(self):
+        """
+        Initialize DataFrame
+        """
+        d = {"hello": [123], "world": [456]}
+        return pd.DataFrame(d)
+
+    @cache_df_with_custom_key("json_result")
+    def jsons_to_df(self):
+
+        results_list = self.results
+        df_results_list = []
+        for result_dict in results_list:
+            dataset_name = result_dict["dataset_name"]
+            df_result_row = pd.DataFrame(result_dict["results"])
+            df_result_row["dataset_name"] = dataset_name
+            df_results_list.append(df_result_row)
+        df_result = pd.concat(df_results_list)
+
+        df_result = df_result[["model_name", "dataset_name", "ndcg_at_10", "embd_dim", "embd_dtype"]]
+
+        df_result["ndcg_at_10"] = (df_result["ndcg_at_10"] * 100).round(2)
+
+        df_datasets_list = []
+        for item in self.datasets:
+            dataset_names = item["datasets"]
+            df_dataset_row = pd.DataFrame(
+                {
+                    "group_name": [item["name"] for _ in range(len(dataset_names))],
+                    "dataset_name": dataset_names,
+                    "leaderboard": [item["leaderboard"] for _ in range(len(dataset_names))]
+                }
+            )
+            df_datasets_list.append(df_dataset_row)
+        df_dataset = pd.concat(df_datasets_list).drop_duplicates()
+
+        models_list = self.models
+
+        df_model = pd.DataFrame(models_list)
+
+        # Create mapping for model names/aliases
+        if 'alias' in df_model.columns:
+            # Create a lookup table for alias to model_name mapping
+            alias_mapping = df_model[df_model['alias'].notna()].set_index('alias')['model_name'].to_dict()
+
+            # Add rows for aliases to enable joining
+            alias_rows = []
+            for _, row in df_model[df_model['alias'].notna()].iterrows():
+                alias_row = row.copy()
+                alias_row['model_name'] = row['alias']
+                alias_rows.append(alias_row)
+
+            if alias_rows:
+                df_model_extended = pd.concat([df_model, pd.DataFrame(alias_rows)], ignore_index=True)
+            else:
+                df_model_extended = df_model
+        else:
+            df_model_extended = df_model
+
+        df = pd.merge(df_result, df_dataset, on=["dataset_name"], how="inner")
+
+        # set dataset default value to 0
+        df = df.pivot(index=["model_name", "embd_dim", "embd_dtype", "group_name"], columns="dataset_name",
+                 values=["ndcg_at_10"]).fillna(0).stack(level=1).reset_index()
+        df = pd.merge(df, df_dataset, on=["group_name","dataset_name"], how="inner")
+
+        # dataset_num_map = {}
+        # grouped_dataset_count = df.groupby(["group_name"]).agg({
+        #     "dataset_name": "nunique"
+        # }).reset_index()
+        #
+        # for _, row in grouped_dataset_count.iterrows():
+        #     dataset_num_map[row["group_name"]] = row["dataset_name"]
+
+        grouped_model = df.groupby(["model_name", "group_name", "embd_dim", "embd_dtype"]).agg({
+            "ndcg_at_10": "mean",
+        }).reset_index()
+
+        pivot = grouped_model.pivot(index=["model_name", "embd_dim", "embd_dtype"], columns="group_name",
+                                    values=["ndcg_at_10"]).round(2).fillna(0)
+
+        # Rename columns
+        pivot.columns = list(
+            map(lambda x: f"{x[1].capitalize()} Average" if x[1] != 'text' else f"Average", pivot.columns))
+
+        pivot_dataset = df_result.pivot(index=["model_name", "embd_dim", "embd_dtype"], columns="dataset_name", values="ndcg_at_10").fillna(0)
+
+        df = pd.merge(df_model_extended, pivot, on=["model_name", "embd_dim", "embd_dtype"])
+        df = pd.merge(df, pivot_dataset, on=["model_name", "embd_dim", "embd_dtype"])
+
+        if df.empty:
+            return pd.DataFrame(columns=COLUMNS + ["reference"])
+        return df
+
+    def filter_df(self, group_name: str):
+        """
+        filter_by_providers
+        """
+        df = self.jsons_to_df()
+
+        return df[df["group_name"] == group_name][COLUMNS][:]

app/backend/data_page.py

@@ -0,0 +1,409 @@
+# -*- coding: utf-8 -*-
+# @Date     : 2025/2/5 16:26
+# @Author   : q275343119
+# @File     : data_page.py
+# @Description:
+import io
+
+from st_aggrid import AgGrid, JsCode, ColumnsAutoSizeMode
+
+import streamlit as st
+
+from app.backend.data_engine import DataEngine
+from app.backend.multi_header_util import get_header_options, tooltip_renderer
+from utils.st_copy_to_clipboard import st_copy_to_clipboard
+from streamlit_theme import st_theme
+
+from app.backend.app_init_func import LEADERBOARD_MAP
+from app.backend.constant import LEADERBOARD_ICON_MAP, BASE_URL
+from app.backend.json_util import compress_msgpack, decompress_msgpack
+
+COLUMNS = ['model_name',
+           'embd_dtype', 'embd_dim', 'num_params', 'max_tokens', 'similarity',
+           'query_instruct', 'corpus_instruct', 'reference'
+
+           ]
+HEADER_STYLE = {'fontSize': '18px'}
+CELL_STYLE = {'fontSize': '18px'}
+
+
+def is_section(group_name):
+    for k, v in LEADERBOARD_MAP.items():
+        leaderboard_name = v[0][0]
+
+        if group_name == leaderboard_name:
+            return True
+    return False
+
+
+def get_closed_dataset():
+    data_engine = st.session_state.get("data_engine",DataEngine())
+    closed_list = []
+    results = data_engine.results
+    for result in results:
+        if result.get("is_closed"):
+            closed_list.append(result.get("dataset_name"))
+    return closed_list
+
+
+def convert_df_to_csv(df):
+    output = io.StringIO()
+    df.to_csv(output, index=False)
+    return output.getvalue()
+
+
+def get_column_state():
+    """
+    get column state from url
+    """
+    query_params = st.query_params.get("grid_state", None)
+    sider_bar_hidden = st.query_params.get("sider_bar_hidden", "False")
+    table_only = st.query_params.get("table_only", "False")
+    if query_params:
+        grid_state = decompress_msgpack(query_params)
+        st.session_state.grid_state = grid_state
+    if sider_bar_hidden.upper() == 'FALSE':
+        st.session_state.sider_bar_hidden = False
+    if table_only.upper() == 'FALSE':
+        st.session_state.table_only = False
+    return None
+
+
+def sidebar_css():
+    """
+
+    :return:
+    """
+    if st.session_state.get("sider_bar_hidden"):
+        st.markdown("""
+            <style>
+            [data-testid="stSidebar"] {
+                display: none !important;
+            }
+            [data-testid="stSidebarNav"] {
+                display: none !important;
+            }
+
+            [data-testid="stBaseButton-headerNoPadding"] {
+                display: none !important;
+            }
+
+           h1#retrieval-embedding-benchmark-rteb {
+                text-align: center;
+            }
+
+            </style>
+        """, unsafe_allow_html=True)
+
+
+def table_only_css():
+    if st.session_state.get("table_only"):
+        st.markdown("""
+                <style>
+
+                [data-testid="stMainBlockContainer"] {
+                    padding-top: 0px;
+                    padding-left: 0px;
+                    padding-bottom: 0px;
+                    padding-right: 0px;
+                }
+
+                [data-testid="stHeader"] {
+                    height: 0px;
+                }
+
+                [data-testid="stApp"] {
+                    height: 456px;
+                }
+
+                .st-emotion-cache-1dp5vir {
+
+                    height: 0px;
+
+                }
+                 </style>
+            """, unsafe_allow_html=True)
+
+
+def table_area(group_name, grid_state, data_engine=None, df=None):
+    """
+    table_area
+    :param group_name:
+    :param grid_state:
+    :param data_engine:
+    :param df:
+    :return:
+    """
+    table_only_css()
+
+    if data_engine is None:
+        data_engine = st.session_state.get("data_engine",DataEngine())
+    if df is None:
+        df = data_engine.jsons_to_df().copy()
+
+    # get columns
+    column_list = []
+    avg_column = None
+    if is_section(group_name):
+        avg_columns = []
+        for column in df.columns:
+
+            if column.startswith("Average"):
+                avg_columns.insert(0, column)
+                continue
+            if "Average" in column:
+                avg_columns.append(column)
+                continue
+        avg_column = avg_columns[0]
+        column_list.extend(avg_columns)
+    else:
+        for column in df.columns:
+
+            if column.startswith(group_name.capitalize() + " "):
+                avg_column = column
+
+                column_list.append(avg_column)
+
+    dataset_list = []
+
+    for dataset_dict in data_engine.datasets:
+        if dataset_dict["name"] == group_name:
+            dataset_list = dataset_dict["datasets"]
+    if not is_section(group_name):
+        column_list.extend(dataset_list)
+    closed_list = get_closed_dataset()
+    close_avg_list = list(set(dataset_list) & set(closed_list))
+    df["Closed average"] = df[close_avg_list].mean(axis=1).round(2)
+    column_list.append("Closed average")
+
+    open_avg_list = list(set(dataset_list) - set(closed_list))
+    df["Open average"] = df[open_avg_list].mean(axis=1).round(2)
+    column_list.append("Open average")
+
+    df = df[COLUMNS + column_list].sort_values(by=avg_column, ascending=False)
+
+    # rename avg column  name
+    if not is_section(group_name):
+        new_column = avg_column.replace(group_name.capitalize(), "").strip()
+        df.rename(columns={avg_column: new_column}, inplace=True)
+        column_list.remove(avg_column)
+        avg_column = new_column
+
+    # setting column config
+    grid_options = st.session_state.get(f"{group_name}_grid_options")
+    if grid_options is None:
+        grid_options = get_header_options(column_list,avg_column,is_section(group_name))
+        st.session_state[f"{group_name}_grid_options"] = grid_options
+    grid_options["initialState"] = grid_state
+
+    custom_css = {
+        # Model Name Cell
+        ".a-cell": {
+            "display": "inline-block",
+            "white-space": "nowrap",
+            "overflow": "hidden",
+            "text-overflow": "ellipsis",
+            "width": "100%",
+            "min-width": "0"
+        },
+        # Header
+        ".multi-line-header": {
+            "text-overflow": "clip",
+            "overflow": "visible",
+            "white-space": "normal",
+            "height": "auto",
+            "font-family": 'Arial',
+            "font-size": "14px",
+            "font-weight": "bold",
+            "padding": "10px",
+            "text-align": "left",
+        },
+        # Custom header and cell styles to replace headerStyle and cellStyle
+        ".custom-header-style": {
+            "text-overflow": "clip",
+            "overflow": "visible",
+            "white-space": "normal",
+            "height": "auto",
+            "font-family": 'Arial',
+            "font-size": "14px",
+            "font-weight": "bold",
+            "padding": "10px",
+            "text-align": "left",
+        },
+        ".custom-cell-style": {
+            "font-size": "14px",
+            "color": "inherit",
+        },
+        # Filter Options and Input
+        ".ag-theme-streamlit .ag-popup": {
+            "font-family": 'Arial',
+            "font-size": "14px",
+
+        }
+        , ".ag-picker-field-display": {
+            "font-family": 'Arial',
+            "font-size": "14px",
+
+        },
+        ".ag-input-field-input .ag-text-field-input": {
+            "font-family": 'Arial',
+            "font-size": "14px",
+
+        }
+
+    }
+
+    grid = AgGrid(
+        df,
+        enable_enterprise_modules=False,
+        gridOptions=grid_options,
+        allow_unsafe_jscode=True,
+        columns_auto_size_mode=ColumnsAutoSizeMode.FIT_ALL_COLUMNS_TO_VIEW,
+        theme="streamlit",
+        custom_css=custom_css,
+        update_on=["stateUpdated"],
+        custom_js_components={"CustomTooltip": tooltip_renderer}
+    )
+
+    return grid
+
+
+def main_page(group_name, grid_state):
+    """
+    main_page
+    :param group_name:
+    :param grid_state:
+    :return:
+    """
+
+    # Add theme color and grid styles
+    st.title("Retrieval Embedding Benchmark (RTEB)")
+    st.markdown("""
+        <style>
+            :root {
+                --theme-color: rgb(129, 150, 64);
+                --theme-color-light: rgba(129, 150, 64, 0.2);
+            }
+
+            /* AG Grid specific overrides */
+            .ag-theme-alpine {
+                --ag-selected-row-background-color: var(--theme-color-light) !important;
+                --ag-row-hover-color: var(--theme-color-light) !important;
+                --ag-selected-tab-color: var(--theme-color) !important;
+                --ag-range-selection-border-color: var(--theme-color) !important;
+                --ag-range-selection-background-color: var(--theme-color-light) !important;
+            }
+
+            .ag-row-hover {
+                background-color: var(--theme-color-light) !important;
+            }
+
+            .ag-row-selected {
+                background-color: var(--theme-color-light) !important;
+            }
+
+            .ag-row-focus {
+                background-color: var(--theme-color-light) !important;
+            }
+
+            .ag-cell-focus {
+                border-color: var(--theme-color) !important;
+            }
+
+            /* Keep existing styles */
+            .center-text {
+                text-align: center;
+                color: var(--theme-color);
+            }
+            .center-image {
+                display: block;
+                margin-left: auto;
+                margin-right: auto;
+            }
+            h2 {
+                color: var(--theme-color) !important;
+            }
+            .ag-header-cell {
+                background-color: var(--theme-color) !important;
+                color: white !important;
+            }
+            a {
+                color: var(--theme-color) !important;
+            }
+            a:hover {
+                color: rgba(129, 150, 64, 0.8) !important;
+            }
+            /* Download Button */
+            button[data-testid="stBaseButton-secondary"] {
+                float: right;
+
+            }
+            /* Toast On The Top*/
+            div[data-testid="stToastContainer"] {
+                position: fixed !important;
+                z-index: 2147483647 !important;
+            }
+
+        </style>
+
+    """, unsafe_allow_html=True)
+
+    #  logo
+    # st.markdown('<img src="https://www.voyageai.com/logo.svg" class="center-image" width="200">', unsafe_allow_html=True)
+    title = f'<h2 class="center-text">{LEADERBOARD_ICON_MAP.get(group_name.capitalize(), "")} {group_name.capitalize()}</h2>'
+    if is_section(group_name):
+        title = f'<h2 class="center-text">{LEADERBOARD_ICON_MAP.get(group_name.capitalize() + " Leaderboard", "")} {group_name.capitalize() + " Leaderboard"}</h2>'
+    # title
+    st.markdown(title, unsafe_allow_html=True)
+
+    data_engine = st.session_state.get("data_engine",DataEngine())
+
+    df = data_engine.jsons_to_df().copy()
+
+    csv = convert_df_to_csv(df)
+    file_name = f"{group_name.capitalize()} Leaderboard" if is_section(group_name) else group_name.capitalize()
+    st.download_button(
+        label="Download CSV",
+        data=csv,
+        file_name=f"{file_name}.csv",
+        mime="text/csv",
+        icon=":material/download:",
+    )
+
+    grid = table_area(group_name, grid_state, data_engine, df)
+
+    @st.dialog("URL")
+    def share_url():
+        state = grid.grid_state
+        if state:
+            share_link = f'{BASE_URL.replace("_", "-")}{group_name}/?grid_state={compress_msgpack(state)}' if not is_section(
+                group_name) else f'{BASE_URL.replace("_", "-")}?grid_state={compress_msgpack(state)}'
+        else:
+            share_link = f'{BASE_URL.replace("_", "-")}{group_name}'
+        st.write(share_link)
+        theme = st_theme()
+        if theme:
+            theme = theme.get("base")
+        else:
+            theme = "light"
+        st_copy_to_clipboard(share_link, before_copy_label='📋Push to copy', after_copy_label='✅Text copied!',
+                             theme=theme)
+
+    share_btn = st.button("Share this page", icon=":material/share:")
+
+    if share_btn:
+        share_url()
+
+
+def render_page(group_name):
+    grid_state = st.session_state.get("grid_state", {})
+    st.session_state.sider_bar_hidden = True
+    st.session_state.table_only = True
+    get_column_state()
+
+    sidebar_css()
+
+    if st.session_state.get("table_only"):
+        table_area(group_name, grid_state)
+    else:
+        main_page(group_name, grid_state)

app/backend/json_util.py

@@ -0,0 +1,15 @@
+import msgpack
+import gzip
+import base64
+
+
+def compress_msgpack(data):
+    packed = msgpack.packb(data)
+    compressed = gzip.compress(packed)
+    return base64.urlsafe_b64encode(compressed).decode('utf-8')
+
+
+def decompress_msgpack(compressed_str):
+    compressed = base64.urlsafe_b64decode(compressed_str)
+    unpacked = gzip.decompress(compressed)
+    return msgpack.unpackb(unpacked, raw=False)

app/backend/multi_header_util.py

@@ -0,0 +1,225 @@
+"""
+handle multi_header options
+"""
+from st_aggrid import JsCode
+from streamlit_theme import st_theme
+
+from .component.header_tooltip_link_component import get_header_tooltip_link_component_simple
+
+HEADER_STYLE = {'fontSize': '18px'}
+CELL_STYLE = {'fontSize': '18px'}
+LINK = ' https://huggingface.co/datasets/embedding-benchmark/'
+
+tooltip_renderer = JsCode("""
+class CustomTooltip {
+    init(params) {
+        const value = params.value || params.colDef.headerName;
+        const url = params.colDef.tooltipLink || "https://example.com";
+        this.eGui = document.createElement('div');
+        this.eGui.innerHTML = `
+            <a href="${url}" target="_blank" style="text-decoration: underline; color: #1a73e8;">
+                ${value}
+            </a>
+        `;
+    }
+    getGui() {
+        return this.eGui;
+    }
+}
+""")
+
+def mutil_header_options(column_list: list, avg_column: str, is_section: bool):
+    """
+    get mutil_header_options
+    :param column_list:
+    :param avg_column:
+    :param is_section:
+    :return:
+    """
+    if is_section:
+        column_def_list = [
+            {'headerName': column if "Average" not in column else column.replace("Average", "").strip().capitalize(),
+             'field': column,
+             'headerClass': 'custom-header-style',
+             'cellClass': 'custom-cell-style',
+             'headerTooltip': column if "Average" not in column else column.replace("Average",
+                                                                                    "").strip().capitalize()
+             # 'suppressSizeToFit': True
+             } for column in column_list if
+            column not in (avg_column, "Closed average", "Open average")]
+
+        return column_def_list
+
+    mutil_column_list = [column for column in column_list if
+                         column not in (avg_column, "Closed average", "Open average")]
+    close_group_list = list(filter(lambda x: x.startswith('_'), mutil_column_list))
+    open_group_list = list(filter(lambda x: not x.startswith('_'), mutil_column_list))
+
+    theme = st_theme(key="st_theme_1")
+    if theme:
+        current_theme = theme.get("base", "light")
+    else:
+        current_theme = "light"
+
+    close_group_def = {
+        'headerName': 'CLOSED DATASETS',
+        'children': [
+            {'headerName': column.replace('_', ''),
+             'field': column,
+             'headerComponent': get_header_tooltip_link_component_simple(current_theme),
+             'headerComponentParams': {
+                 "linkUrl": LINK + column.replace('_', ''),
+                 "tooltipContent": column.replace('_', ''),
+                 "enableSorting": True,
+                 "enableFiltering": True,
+             },
+
+             'headerClass': 'custom-header-style',
+             'cellClass': 'custom-cell-style',
+             'sortable': True,
+             'width': 105,
+             # "suppressColumnVirtualisation": True,
+
+             } for column in close_group_list
+        ],
+
+    }
+    open_group_def = {
+        'headerName': 'OPEN DATASETS',
+        'children': [
+            {'headerName': column,
+             'field': column,
+             'headerComponent': get_header_tooltip_link_component_simple(current_theme),
+             'headerComponentParams': {
+                 "linkUrl": LINK + column,
+                 "tooltipContent": column,
+                 "enableSorting": True,
+                 "enableFiltering": True,
+             },
+             'headerClass': 'custom-header-style',
+             'cellClass': 'custom-cell-style',
+             'sortable': True,
+             'width': 105,
+             "suppressColumnVirtualisation": True,
+
+             } for column in open_group_list
+        ],
+
+    }
+    return [close_group_def, open_group_def]
+
+
+def get_header_options(column_list: list, avg_column: str,  is_section: bool):
+    grid_options = {
+        'columnDefs': [
+            {
+                'headerName': 'Model Name',
+                'field': 'model_name',
+                'pinned': 'left',
+                'sortable': False,
+                'headerClass': 'custom-header-style',
+                'cellClass': 'custom-cell-style',
+                'autoHeaderHeight': True,
+                "tooltipValueGetter": JsCode(
+                    """function(p) {return p.value}"""
+                ),
+                "width": 250,
+                'cellRenderer': JsCode("""class CustomHTML {
+                            init(params) {
+                                const link = params.data.reference;
+                                this.eGui = document.createElement('div');
+                                this.eGui.innerHTML = link ? 
+                                    `<a href="${link}" class="a-cell" target="_blank">${params.value} </a>` : 
+                                    params.value;
+                            }
+
+                            getGui() {
+                                return this.eGui;
+                            }
+                        }"""),
+                'suppressSizeToFit': True
+
+            },
+            {'headerName': "Overall Score",
+             'field': avg_column,
+             'headerClass': 'custom-header-style',
+             'cellClass': 'custom-cell-style',
+             # 'suppressSizeToFit': True
+             },
+
+            # Add Open average column definition
+            {'headerName': 'Open Average',
+             'field': 'Open average',
+             'headerClass': 'custom-header-style',
+             'cellClass': 'custom-cell-style',
+             # 'suppressSizeToFit': True
+             },
+
+            {'headerName': 'Closed Average',
+             'field': 'Closed average',
+             'headerClass': 'custom-header-style',
+             'cellClass': 'custom-cell-style',
+             # 'suppressSizeToFit': True
+             },
+
+            {
+                'headerName': 'Embd Dtype',
+                'field': 'embd_dtype',
+                'headerClass': 'custom-header-style',
+                'cellClass': 'custom-cell-style',
+                # 'suppressSizeToFit': True,
+            },
+            {
+                'headerName': 'Embd Dim',
+                'field': 'embd_dim',
+                'headerClass': 'custom-header-style',
+                'cellClass': 'custom-cell-style',
+                # 'suppressSizeToFit': True,
+            },
+            {
+                'headerName': 'Number of Parameters',
+                'field': 'num_params',
+                'cellDataType': 'number',
+                "colId": "num_params",
+                'headerClass': 'custom-header-style',
+                'cellClass': 'custom-cell-style',
+                'valueFormatter': JsCode(
+                    """function(params) {
+                    const num = params.value;
+                    if (num >= 1e9) return (num / 1e9).toFixed(2) + "B";
+                    if (num >= 1e6) return (num / 1e6).toFixed(2) + "M";
+                    if (num >= 1e3) return (num / 1e3).toFixed(2) + "K";
+                    return num;
+                    }"""
+                ),
+                "width": 120,
+                # 'suppressSizeToFit': True,
+            },
+            {
+                'headerName': 'Context Length',
+                'field': 'max_tokens',
+                'headerClass': 'custom-header-style',
+                'cellClass': 'custom-cell-style',
+                # 'suppressSizeToFit': True,
+            },
+
+            *mutil_header_options(column_list, avg_column, is_section)
+        ],
+        'defaultColDef': {
+            'filter': True,
+            'sortable': True,
+            'resizable': True,
+            'headerClass': "multi-line-header",
+            'autoHeaderHeight': True,
+            'width': 105
+        },
+
+        "autoSizeStrategy": {
+            "type": 'fitCellContents',
+            "colIds": [column for column in column_list if column not in (avg_column, "Closed average", "Open average")]
+        },
+        "tooltipShowDelay": 500,
+
+    }
+
+    return grid_options

app/ui/pages/data_page.py

@@ -0,0 +1,3 @@
+from app.backend.data_page import render_page
+
+render_page("$group_name$")

docker-compose.yml

@@ -0,0 +1,23 @@
+version: '3.8'
+
+services:
+  streamlit-app:
+    build: .
+    ports:
+      - "8501:8501"
+    environment:
+      - PYTHONPATH=/app
+      - STREAMLIT_SERVER_PORT=8501
+      - STREAMLIT_SERVER_ADDRESS=0.0.0.0
+    volumes:
+      # 可选：挂载本地目录用于开发调试
+      # - ./app:/app/app
+      # - ./utils:/app/utils
+      # - ./app.py:/app/app.py
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8501/_stcore/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s 

requirements.txt

@@ -0,0 +1,6 @@
+streamlit==1.41.1
+streamlit-aggrid==1.1.5
+st-pages==1.0.1
+msgpack==1.1.0
+zstandard==0.23.0
+st-theme==1.2.3

utils/cache_decorator.py

@@ -0,0 +1,54 @@
+import time
+from functools import wraps
+import pandas as pd
+
+CACHE = {}
+TTL = 3600
+
+
+def cache_df_with_custom_key(cache_key: str):
+    def decorator(func):
+        @wraps(func)
+        def wrapper(*args, **kwargs):
+            if cache_key in CACHE and CACHE[cache_key].get("expiry") - time.time() < TTL:
+                return CACHE[cache_key]["data"]
+
+            result: pd.DataFrame = func(*args, **kwargs)
+            if result is not None and not result.empty:
+                d = {"expiry": time.time(), "data": result}
+                CACHE[cache_key] = d
+                return result
+
+            CACHE[cache_key]["expiry"] += TTL
+            return CACHE[cache_key]["data"]
+
+        return wrapper
+
+    return decorator
+
+
+def cache_dict_with_custom_key(cache_key: str):
+    def decorator(func):
+        @wraps(func)
+        def wrapper(*args, **kwargs):
+            if cache_key in CACHE and time.time() - CACHE[cache_key].get("expiry") < TTL:
+                return CACHE[cache_key]["data"]
+
+            result: dict = func(*args, **kwargs)
+            if result:
+                d = {"expiry": time.time(), "data": result}
+                CACHE[cache_key] = d
+                return result
+
+            CACHE[cache_key]["expiry"] += TTL
+            return CACHE[cache_key]["data"]
+
+        return wrapper
+
+    return decorator
+
+
+if __name__ == '__main__':
+    a = time.time()
+    time.sleep(5)
+    print(time.time() - a)

utils/http_utils.py

@@ -0,0 +1,7 @@
+import requests
+
+
+def get(url: str, params: str = None, verify: bool = False):
+    return requests.get(url, params, verify=verify)
+
+

utils/st_copy_to_clipboard/__init__.py

@@ -0,0 +1,66 @@
+from pathlib import Path
+from typing import Optional
+
+import streamlit as st
+import streamlit.components.v1 as components
+
+# Tell streamlit that there is a component called streamlit_copy_to_clipboard,
+# and that the code to display that component is in the "frontend" folder
+frontend_dir = (Path(__file__).parent / "frontend").absolute()
+_component_func = components.declare_component(
+    "streamlit_copy_to_clipboard", path=str(frontend_dir)
+)
+
+
+def st_copy_to_clipboard(
+    text: str,
+    before_copy_label: str = "📋",
+    after_copy_label: str = "✅",
+    show_text: bool = False,
+    key: Optional[str] = None,
+    theme: str = 'light', # default theme is 'light'
+    
+):
+    """
+    Streamlit component to copy text to clipboard.
+
+    Parameters
+    ----------
+    text : str
+        The text to be copied to the clipboard.
+    before_copy_label : str
+        Label of the button before text is copied.
+    after_copy_label : str
+        Label of the button after text is copied.
+    show_text: bool
+        If True, show text right before the button and make it clickable as well
+    key : str or None
+        An optional key that uniquely identifies the component.
+    theme: str
+        Set the current theme for the button.
+    """
+    component_value = _component_func(
+        key=key,
+        text=text,
+        before_copy_label=before_copy_label,
+        after_copy_label=after_copy_label,
+        show_text=show_text,
+        theme=theme,
+    )
+
+    return component_value
+
+
+def main():
+    st.write("## Example")
+    text = st.text_input("Enter text to copy to clipboard", value="Hello World")
+    st_copy_to_clipboard(text)
+    st_copy_to_clipboard(text, before_copy_label='📋Push to copy', after_copy_label='✅Text copied!')
+    st_copy_to_clipboard(text, before_copy_label='Push to copy', after_copy_label='Text copied!', show_text=True)
+    st_copy_to_clipboard(text, before_copy_label='Push to copy', after_copy_label='copied!', show_text=True, theme="dark")
+
+
+
+
+if __name__ == "__main__":
+    main()

utils/st_copy_to_clipboard/frontend/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>st-copy-to-clipboard</title>
+		<script src="./streamlit-component-lib.js"></script>
+		<script src="./main.js"></script>
+		<link rel="stylesheet" href="./style.css" />
+	</head>
+
+	<body>
+		<div id="root">
+			<button id="text-element" class="st-copy-to-clipboard-btn"></button>
+			<button id="copy-button" class="st-copy-to-clipboard-btn">📋</button>
+		</div>
+	</body>
+</html>

utils/st_copy_to_clipboard/frontend/main.js

@@ -0,0 +1,61 @@
+// The `Streamlit` object exists because our html file includes
+// `streamlit-component-lib.js`.
+// If you get an error about "Streamlit" not being defined, that
+// means you're missing that file.
+
+function sendValue(value) {
+	Streamlit.setComponentValue(value);
+}
+
+/**
+ * The component's render function. This will be called immediately after
+ * the component is initially loaded, and then again every time the
+ * component gets new data from Python.
+ */
+function onRender(event) {
+	// Only run the render code the first time the component is loaded.
+	if (!window.rendered) {
+		const { text, before_copy_label, after_copy_label, show_text, theme } = event.detail.args;
+
+		const container = document.querySelector('#container');
+		const button = document.querySelector('#copy-button');
+		const textElement = document.querySelector('#text-element');
+
+		if (theme == 'dark') {
+			button.style.border = '1px solid rgba(250, 250, 250, 0.2)';
+			button.style.color = 'white';
+		}
+
+		button.textContent = before_copy_label; // Set initial label
+
+		// Show text if show_text is true
+		if (show_text) {
+			textElement.textContent = text;
+			textElement.style.display = 'inline';
+		} else {
+			textElement.style.display = 'none';
+		}
+
+		function copyToClipboard() {
+			navigator.clipboard.writeText(text);
+
+			button.textContent = after_copy_label; // Change label after copying
+
+			setTimeout(() => {
+				if (!button) return;
+				button.textContent = before_copy_label; // Revert to original label after 1 second
+			}, 1000);
+		}
+		button.addEventListener('click', copyToClipboard);
+		textElement.addEventListener('click', copyToClipboard);
+
+		window.rendered = true;
+	}
+}
+
+// Render the component whenever python send a "render event"
+Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, onRender);
+// Tell Streamlit that the component is ready to receive events
+Streamlit.setComponentReady();
+// Render with the correct height, if this is a fixed-height component
+Streamlit.setFrameHeight(100);

utils/st_copy_to_clipboard/frontend/streamlit-component-lib.js

@@ -0,0 +1,36 @@
+// Borrowed minimalistic Streamlit API from Thiago
+// https://discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064
+function sendMessageToStreamlitClient(type, data) {
+	console.log(type, data);
+	const outData = Object.assign(
+		{
+			isStreamlitMessage: true,
+			type: type,
+		},
+		data
+	);
+	window.parent.postMessage(outData, '*');
+}
+
+const Streamlit = {
+	setComponentReady: function () {
+		sendMessageToStreamlitClient('streamlit:componentReady', { apiVersion: 1 });
+	},
+	setFrameHeight: function (height) {
+		sendMessageToStreamlitClient('streamlit:setFrameHeight', { height: height });
+	},
+	setComponentValue: function (value) {
+		sendMessageToStreamlitClient('streamlit:setComponentValue', { value: value });
+	},
+	RENDER_EVENT: 'streamlit:render',
+	events: {
+		addEventListener: function (type, callback) {
+			window.addEventListener('message', function (event) {
+				if (event.data.type === type) {
+					event.detail = event.data;
+					callback(event);
+				}
+			});
+		},
+	},
+};

utils/st_copy_to_clipboard/frontend/style.css

@@ -0,0 +1,31 @@
+.st-copy-to-clipboard-btn {
+	display: inline-flex;
+	-moz-box-align: center;
+	align-items: center;
+	-moz-box-pack: center;
+	justify-content: center;
+	font-weight: 400;
+	padding: 0.25rem 0.75rem;
+	border-radius: 0.5rem;
+	min-height: 38.4px;
+	margin: 0px;
+	line-height: 1.6;
+	color: inherit;
+	width: auto;
+	user-select: none;
+	background-color: transparent; /* set bgcolor to transparent to adjust to any theme */
+	border: 1px solid rgba(49, 51, 63, 0.2);
+	cursor: pointer;
+	float: right;
+}
+
+.st-copy-to-clipboard-btn:hover {
+	border-color: rgb(255, 75, 75);
+	color: rgb(255, 75, 75);
+}
+
+.st-copy-to-clipboard-btn:active {
+	border-color: rgb(255, 75, 75);
+	background-color: rgb(255, 75, 75);
+	color: rgb(255, 255, 255);
+}