feat: add backend health status indicator and update functionality

- Implemented a backend health status indicator in the Gradio interface.
- Added JavaScript to automatically update the backend status every 30 seconds.
- Enhanced CSS for visual representation of backend health states (undefined, healthy, unhealthy).
- Updated app.py to include health check logic and integrate the new status indicator.
- Introduced a new backend_status.js file for managing status updates.

app.py

@@ -3,6 +3,7 @@ import threading
 import gradio as gr
 import gradio.components as grc
 import pandas as pd
+import requests
 import uvicorn
 from apscheduler.schedulers.background import BackgroundScheduler
 from huggingface_hub import snapshot_download
@@ -18,7 +19,7 @@ from src.about import (
     TITLE,
 )
 from src.backend.app import create_app
-from src.display.css_html_js import custom_css
+from src.display.css_html_js import backend_status_js, custom_css
 from src.display.utils import (
     BASE_COLS,
     BENCHMARK_COLS,
@@ -39,6 +40,58 @@ def restart_space():
     API.restart_space(repo_id=settings.REPO_ID)
 
 
+def get_backend_status_undefined_html() -> str:
+    """
+    返回未定义状态（首次检查前）的 HTML
+    """
+    return """
+    <div id="backend-status-indicator">
+        <span class="backend-status-light undefined"></span>
+        <span>Backend Status: Checking...</span>
+    </div>
+    """
+
+
+def check_backend_health() -> tuple[bool, str]:
+    """
+    查询后端健康状态
+    返回: (is_healthy, status_html)
+    """
+    try:
+        response = requests.get("http://localhost:8000/api/v1/health/", timeout=2)
+        if response.status_code == 200:
+            data = response.json()
+            if data.get("code") == 0:
+                return (
+                    True,
+                    """
+                <div id="backend-status-indicator">
+                    <span class="backend-status-light healthy"></span>
+                    <span>Backend Status: Healthy</span>
+                </div>
+                """,
+                )
+        return (
+            False,
+            """
+        <div id="backend-status-indicator">
+            <span class="backend-status-light unhealthy"></span>
+            <span>Backend Status: Unhealthy</span>
+        </div>
+        """,
+        )
+    except Exception:
+        return (
+            False,
+            """
+        <div id="backend-status-indicator">
+            <span class="backend-status-light unhealthy"></span>
+            <span>Backend Status: Unavailable</span>
+        </div>
+        """,
+        )
+
+
 print("///// --- Settings --- /////", settings.model_dump())
 
 # Space initialisation
@@ -282,6 +335,35 @@ with demo:
             gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")
 
         with gr.TabItem("🚀 Submit here! ", elem_id="submit-tab", id=len(BENCHMARKS) + 1):
+            # Backend status indicator - 初始状态为 undefined
+            backend_status = gr.HTML(value=get_backend_status_undefined_html(), elem_id="backend-status-container")
+
+            # 定时更新后端状态
+            def update_backend_status():
+                return check_backend_health()[1]
+
+            # 创建一个隐藏的按钮用于定时触发更新
+            status_trigger = gr.Button(visible=False, elem_id="backend-status-trigger-btn")
+
+            # 绑定按钮点击事件来更新状态
+            status_trigger.click(
+                fn=update_backend_status,
+                inputs=None,
+                outputs=backend_status,
+            )
+
+            # 加载外部 JavaScript 文件
+            js_content = backend_status_js.read_text(encoding="utf-8")
+            status_trigger_js_html = f'<script>{js_content}</script>'
+            gr.HTML(status_trigger_js_html)
+
+            # 页面加载时立即检查一次
+            demo.load(
+                fn=update_backend_status,
+                inputs=None,
+                outputs=backend_status,
+            )
+
             with gr.Column():
                 with gr.Row():
                     gr.Markdown(EVALUATION_QUEUE_TEXT, elem_classes="markdown-text")
@@ -413,13 +495,13 @@ if __name__ == "__main__":
     # Backend server - 在单独的线程中运行
     app = create_app()
 
-    def run_fastapi():
-        print("Starting FastAPI server on http://0.0.0.0:8000")
+    def run_fastapi(host: str = "127.0.0.1", port: int = 8000):
+        print(f"Starting FastAPI server on http://{host}:{port}")
         uvicorn.run(
             app,
-            host="0.0.0.0",
-            port=8000,
-            log_level="info",
+            host=host,
+            port=port,
+            log_level="debug",
             access_log=True,
         )
 

src/assets/css/custom.css

@@ -105,3 +105,45 @@
     overflow: hidden !important;
     text-overflow: ellipsis !important;
 }
+
+/* Backend status indicator - breathing light animation */
+#backend-status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px;
+}
+
+.backend-status-light {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    display: inline-block;
+    animation: breathing 2s ease-in-out infinite;
+}
+
+.backend-status-light.undefined {
+    background-color: #6b7280;
+    box-shadow: 0 0 10px rgba(107, 114, 128, 0.5);
+}
+
+.backend-status-light.healthy {
+    background-color: #10b981;
+    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
+}
+
+.backend-status-light.unhealthy {
+    background-color: #ef4444;
+    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
+}
+
+@keyframes breathing {
+    0%, 100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.6;
+        transform: scale(1.1);
+    }
+}

src/assets/js/backend_status.js

@@ -0,0 +1,26 @@
+/**
+ * Backend status update script
+ * Automatically updates backend health status every 5 seconds
+ */
+(function() {
+    function startStatusUpdate() {
+        const trigger = document.getElementById('backend-status-trigger-btn');
+        if (trigger) {
+            // 立即执行一次
+            trigger.click();
+            // 然后每5秒执行一次
+            setInterval(function() {
+                trigger.click();
+            }, 30_000);
+        } else {
+            // 如果按钮还没加载，等待一下再试
+            setTimeout(startStatusUpdate, 1_500);
+        }
+    }
+    // 页面加载完成后开始
+    if (document.readyState === 'complete') {
+        startStatusUpdate();
+    } else {
+        window.addEventListener('load', startStatusUpdate);
+    }
+})();

src/backend/routes/hf.py

@@ -1,17 +1,30 @@
 import io
 from dataclasses import asdict
+from typing import TYPE_CHECKING, Annotated
 
-from fastapi import APIRouter
+from fastapi import APIRouter, Depends
 from loguru import logger
 
 from src.backend.config import settings
-from src.backend.schemas import HfRepoUrl, ResponseData, Submit_Params, Submit_RespData
+from src.backend.schemas import (
+    CommitInfo,
+    GetModelInfo_QueryParams,
+    GetModelInfo_RespData,
+    HfRepoUrl,
+    ResponseData,
+    Submit_Params,
+    Submit_RespData,
+)
+
+if TYPE_CHECKING:
+    from huggingface_hub import ModelInfo
+
 
 router = APIRouter(tags=["huggingface"])
 
 
 @router.post("/community/submit/")
-async def submit(params: Submit_Params) -> ResponseData[Submit_RespData]:
+async def submit(params: Annotated[Submit_Params, Depends()]) -> ResponseData[Submit_RespData]:
     """Submit a new evaluation request to the Hugging Face repository."""
     file_obj = io.BytesIO(params.content.encode("utf-8"))
     commit_info = settings.hf_api.upload_file(
@@ -45,3 +58,21 @@ async def submit(params: Submit_Params) -> ResponseData[Submit_RespData]:
             msg=msg,
             data=Submit_RespData.model_validate(data_dict),
         )
+
+
+# Get model info
+@router.get("/models/info/")
+async def get_model_info(
+    params: Annotated[GetModelInfo_QueryParams, Depends()],
+) -> ResponseData[GetModelInfo_RespData]:
+    # Get model info
+    model: ModelInfo = settings.hf_api.model_info(params.model_id, revision=params.revision or None)
+    # Get model commit history
+    commit_infos = settings.hf_api.list_repo_commits(repo_id=params.model_id, repo_type="model")
+    commits = [CommitInfo.model_validate(asdict(c)) for c in commit_infos]
+    # Response data
+    data = GetModelInfo_RespData.model_validate({
+        **asdict(model),
+        "commits": commits or None,
+    })
+    return ResponseData(data=data)

src/backend/schemas.py

@@ -1,4 +1,5 @@
-from typing import Annotated, Generic, Literal, TypeVar
+from datetime import datetime
+from typing import Annotated, Any, Generic, Literal, TypeVar
 
 from pydantic import BaseModel, ConfigDict, Field
 
@@ -42,3 +43,53 @@ class HfRepoUrl(BaseModel):
     repo_id: str
     repo_type: Literal["model", "dataset", "space"]
     url: str
+
+
+# --- Get Model Info ---
+class GetModelInfo_QueryParams(BaseModel):
+    """Parameters for model info query."""
+
+    model_id: str
+    revision: str | None = None
+
+
+class GetModelInfo_RespData(BaseModel):
+    model_config = ConfigDict(extra="allow")
+
+    id: str
+    author: str | None = None
+    downloads: int | None = None
+    likes: int | None = None
+    tags: list[str] | None = None
+    pipeline_tag: str | None = None
+    sha: str | None = None
+    created_at: datetime | None = None
+    last_modified: datetime | None = None
+    private: bool | None = None
+    disabled: bool | None = None
+    gated: bool | None = None
+    # ... others
+    safetensors: "SafetensorsField | None" = None
+    # commits
+    commits: list["CommitInfo"] | None = None
+
+
+class SafetensorsField(BaseModel):
+    model_config = ConfigDict(extra="allow")
+
+    parameters: dict[str, Any] | None = None
+    total: int | None = None
+
+
+class CommitInfo(BaseModel):
+    model_config = ConfigDict(extra="allow")
+
+    commit_id: str
+
+    authors: list[str]
+    created_at: datetime
+    title: str
+    message: str
+
+    formatted_title: str | None = None
+    formatted_message: str | None = None

src/display/css_html_js.py

@@ -1,6 +1,7 @@
 from pathlib import Path
 
 custom_css = Path("src/assets/css/custom.css")
+backend_status_js = Path("src/assets/js/backend_status.js")
 
 # FIXME: seems deprecated
 get_window_url_params = """

src/leaderboard/read_evals.py

@@ -62,7 +62,8 @@ class EvalResult(BaseModel):
     @classmethod
     def init_from_json_file(cls, json_filepath: str) -> Self:
         """Inits the result from the specific model result file"""
-        data = EvalResultJson.model_validate_json(Path(json_filepath).read_text())
+        json_content = Path(json_filepath).read_text(encoding="utf-8")
+        data = EvalResultJson.model_validate_json(json_content)
         config = data.config
 
         # Precision