feat: enhance backend status indicator and refactor app structure

- Introduced a dedicated backend status indicator with visual states (undefined, healthy, unhealthy) using HTML and CSS.
- Refactored app.py to streamline the Gradio interface and integrate the new status indicator.
- Added JavaScript functionality for automatic backend health updates every 30 seconds.
- Removed deprecated backend status logic and CSS from custom.css, consolidating styles into a new backend-status-indicator.css file.
- Updated the backend status retrieval logic to utilize new HTML templates for better maintainability.

app.py

@@ -19,7 +19,12 @@ from src.about import (
     TITLE,
 )
 from src.backend.app import create_app
-from src.display.css_html_js import backend_status_js, custom_css
+from src.display.css_html_js import (
+    backend_status_indicator_css,
+    backend_status_indicator_html,
+    backend_status_js,
+    custom_css,
+)
 from src.display.utils import (
     BASE_COLS,
     BENCHMARK_COLS,
@@ -40,58 +45,6 @@ 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(f"http://localhost:{settings.BACKEND_PORT}/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
@@ -311,187 +264,216 @@ def init_leaderboard_tabs(dataframe: pd.DataFrame, cols: list[str]):
     return leaderboard
 
 
-demo = gr.Blocks(css_paths=[custom_css])
-with demo:
-    gr.HTML(TITLE)
-    gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
-
-    with gr.Tabs(elem_classes="tab-buttons") as tabs:
-        for i, benchmark in enumerate[str](sorted(BENCHMARKS)):
-            with gr.TabItem(f"🏅 {benchmark}", elem_id="llm-benchmark-tab-table", id=i):
-                benchmark_cols = [
-                    BENCHMARK_COL for BENCHMARK_COL in BENCHMARK_COLS if BENCHMARK_COL.startswith(benchmark)
-                ]
-                cols = BASE_COLS + benchmark_cols
-                BENCHMARK_DF = get_leaderboard_df(
-                    settings.EVAL_RESULTS_PATH,
-                    settings.EVAL_REQUESTS_PATH,
-                    cols,
-                    benchmark_cols,
-                )
-                leaderboard = init_leaderboard_tabs(BENCHMARK_DF, benchmark_cols)
-
-        with gr.TabItem("📝 About", elem_id="about-tab", id=len(BENCHMARKS)):
-            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")
+def main():
+    demo = gr.Blocks(css_paths=[custom_css, backend_status_indicator_css])
+    with demo:
+        gr.HTML(TITLE)
+        gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
+
+        with gr.Tabs(elem_classes="tab-buttons") as _tabs:
+            for i, benchmark in enumerate[str](sorted(BENCHMARKS)):
+                with gr.TabItem(f"🏅 {benchmark}", elem_id="llm-benchmark-tab-table", id=i):
+                    benchmark_cols = [
+                        BENCHMARK_COL for BENCHMARK_COL in BENCHMARK_COLS if BENCHMARK_COL.startswith(benchmark)
+                    ]
+                    cols = BASE_COLS + benchmark_cols
+                    BENCHMARK_DF = get_leaderboard_df(
+                        settings.EVAL_RESULTS_PATH,
+                        settings.EVAL_REQUESTS_PATH,
+                        cols,
+                        benchmark_cols,
+                    )
+                    _leaderboard = init_leaderboard_tabs(BENCHMARK_DF, benchmark_cols)
 
-            # 绑定按钮点击事件来更新状态
-            status_trigger.click(
-                fn=update_backend_status,
-                inputs=None,
-                outputs=backend_status,
-            )
+            with gr.TabItem("📝 About", elem_id="about-tab", id=len(BENCHMARKS)):
+                gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")
 
-            # 加载外部 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)
+            with gr.TabItem("🚀 Submit here! ", elem_id="submit-tab", id=len(BENCHMARKS) + 1):
+                with gr.Column():
+                    with gr.Row():
+                        gr.Markdown(EVALUATION_QUEUE_TEXT, elem_classes="markdown-text")
+
+                    with gr.Column():
+                        with gr.Accordion(
+                            f"✅ Finished Evaluations ({len(finished_eval_queue_df)})",
+                            open=False,
+                        ):
+                            with gr.Row():
+                                _finished_eval_table = grc.Dataframe(
+                                    value=finished_eval_queue_df,
+                                    headers=EVAL_COLS,
+                                    datatype=EVAL_TYPES,
+                                    row_count=5,
+                                )
+                        with gr.Accordion(
+                            f"🔄 Running Evaluation Queue ({len(running_eval_queue_df)})",
+                            open=False,
+                        ):
+                            with gr.Row():
+                                _running_eval_table = grc.Dataframe(
+                                    value=running_eval_queue_df,
+                                    headers=EVAL_COLS,
+                                    datatype=EVAL_TYPES,
+                                    row_count=5,
+                                )
+
+                        with gr.Accordion(
+                            f"⏳ Pending Evaluation Queue ({len(pending_eval_queue_df)})",
+                            open=False,
+                        ):
+                            with gr.Row():
+                                _pending_eval_table = grc.Dataframe(
+                                    value=pending_eval_queue_df,
+                                    headers=EVAL_COLS,
+                                    datatype=EVAL_TYPES,
+                                    row_count=5,
+                                )
+                with gr.Row():
+                    gr.Markdown("# ✉️✨ Submit your model here!", elem_classes="markdown-text")
 
-            # 页面加载时立即检查一次
-            demo.load(
-                fn=update_backend_status,
-                inputs=None,
-                outputs=backend_status,
-            )
+                with gr.Row():
+                    search_name = gr.Textbox(label="search model name", placeholder="user/model_name")
 
-            with gr.Column():
                 with gr.Row():
-                    gr.Markdown(EVALUATION_QUEUE_TEXT, elem_classes="markdown-text")
+                    table = gr.Dataframe(
+                        headers=["Model Name", "Pipeline", "Downloads", "Likes"],
+                        datatype=["str", "str", "number", "number"],
+                        interactive=False,
+                        wrap=True,
+                        label="click model name to select",
+                    )
 
-                with gr.Column():
-                    with gr.Accordion(
-                        f"✅ Finished Evaluations ({len(finished_eval_queue_df)})",
-                        open=False,
-                    ):
-                        with gr.Row():
-                            finished_eval_table = grc.Dataframe(
-                                value=finished_eval_queue_df,
-                                headers=EVAL_COLS,
-                                datatype=EVAL_TYPES,
-                                row_count=5,
-                            )
-                    with gr.Accordion(
-                        f"🔄 Running Evaluation Queue ({len(running_eval_queue_df)})",
-                        open=False,
-                    ):
-                        with gr.Row():
-                            running_eval_table = grc.Dataframe(
-                                value=running_eval_queue_df,
-                                headers=EVAL_COLS,
-                                datatype=EVAL_TYPES,
-                                row_count=5,
-                            )
-
-                    with gr.Accordion(
-                        f"⏳ Pending Evaluation Queue ({len(pending_eval_queue_df)})",
-                        open=False,
-                    ):
-                        with gr.Row():
-                            pending_eval_table = grc.Dataframe(
-                                value=pending_eval_queue_df,
-                                headers=EVAL_COLS,
-                                datatype=EVAL_TYPES,
-                                row_count=5,
-                            )
-            with gr.Row():
-                gr.Markdown("# ✉️✨ Submit your model here!", elem_classes="markdown-text")
-
-            with gr.Row():
-                search_name = gr.Textbox(label="search model name", placeholder="user/model_name")
-
-            with gr.Row():
-                table = gr.Dataframe(
-                    headers=["Model Name", "Pipeline", "Downloads", "Likes"],
-                    datatype=["str", "str", "number", "number"],
-                    interactive=False,
-                    wrap=True,
-                    label="click model name to select",
+                with gr.Row():
+                    with gr.Column():
+                        model_name_textbox = gr.Textbox(label="Model name", placeholder="user/model_name")
+                        revision_name_textbox = gr.Textbox(label="Revision commit", placeholder="main")
+                        model_type = gr.Dropdown(
+                            choices=[t.to_str(" : ") for t in ModelType if t != ModelType.Unknown],
+                            label="Model type",
+                            multiselect=False,
+                            value=None,
+                            interactive=True,
+                        )
+
+                        def search_models(query):
+                            if not query.strip():
+                                return []
+                            models = API.list_models(search=query, limit=10)
+                            results = []
+                            for m in models:
+                                results.append([m.id, m.pipeline_tag or "N/A", m.downloads or 0, m.likes or 0])
+                            return results
+
+                        def on_select(evt: gr.SelectData, data):
+                            row_idx = evt.index[0]  # 获取点击行号
+                            if row_idx < len(data):
+                                return data.iloc[row_idx, 0]  # 返回模型名
+                            return ""
+
+                        search_name.change(fn=search_models, inputs=search_name, outputs=table)
+                        table.select(fn=on_select, inputs=table, outputs=model_name_textbox)
+
+                    with gr.Column():
+                        precision = gr.Dropdown(
+                            choices=[i.value.name for i in Precision if i != Precision.Unknown],
+                            label="Precision",
+                            multiselect=False,
+                            value="float16",
+                            interactive=True,
+                        )
+                        weight_type = gr.Dropdown(
+                            choices=[i.value.name for i in WeightType],
+                            label="Weights type",
+                            multiselect=False,
+                            value="Original",
+                            interactive=True,
+                        )
+                        base_model_name_textbox = gr.Textbox(label="Base model (for delta or adapter weights)")
+
+                submit_button = gr.Button("Submit Eval")
+                submission_result = gr.Markdown()
+                submit_button.click(
+                    add_new_eval,
+                    [
+                        model_name_textbox,
+                        base_model_name_textbox,
+                        revision_name_textbox,
+                        precision,
+                        weight_type,
+                        model_type,
+                    ],
+                    submission_result,
                 )
 
-            with gr.Row():
-                with gr.Column():
-                    model_name_textbox = gr.Textbox(label="Model name", placeholder="user/model_name")
-                    revision_name_textbox = gr.Textbox(label="Revision commit", placeholder="main")
-                    model_type = gr.Dropdown(
-                        choices=[t.to_str(" : ") for t in ModelType if t != ModelType.Unknown],
-                        label="Model type",
-                        multiselect=False,
-                        value=None,
-                        interactive=True,
-                    )
+        with gr.Row():
+            with gr.Accordion("📙 Citation", open=False):
+                _citation_button = gr.Textbox(
+                    value=CITATION_BUTTON_TEXT,
+                    label=CITATION_BUTTON_LABEL,
+                    lines=20,
+                    elem_id="citation-button",
+                    show_copy_button=True,
+                )
 
-                    def search_models(query):
-                        if not query.strip():
-                            return []
-                        models = API.list_models(search=query, limit=10)
-                        results = []
-                        for m in models:
-                            results.append([m.id, m.pipeline_tag or "N/A", m.downloads or 0, m.likes or 0])
-                        return results
+        # Backend status indicator
+        backend_status = gr.HTML(
+            value=get_backend_status_undefined_html(),
+            elem_id="backend-status-container",
+        )
+        # trigger button to bind the click event
+        status_trigger = gr.Button(elem_id="backend-status-trigger-btn", visible=False)
+        status_trigger.click(
+            fn=lambda: check_backend_health()[1],
+            inputs=None,
+            outputs=backend_status,
+        )
+        # load external JavaScript file
+        js_content = backend_status_js()
+        status_trigger_js_html = f'<script>{js_content}</script>'
+        gr.HTML(status_trigger_js_html, visible=False)
+        demo.load(
+            fn=lambda: check_backend_health()[1],
+            inputs=None,
+            outputs=backend_status,
+        )
+    return demo
 
-                    def on_select(evt: gr.SelectData, data):
-                        row_idx = evt.index[0]  # 获取点击行号
-                        if row_idx < len(data):
-                            return data.iloc[row_idx, 0]  # 返回模型名
-                        return ""
 
-                    search_name.change(fn=search_models, inputs=search_name, outputs=table)
-                    table.select(fn=on_select, inputs=table, outputs=model_name_textbox)
+def get_backend_status_undefined_html() -> str:
+    """
+    返回未定义状态（首次检查前）的 HTML
+    """
+    return backend_status_indicator_html("undefined")
 
-                with gr.Column():
-                    precision = gr.Dropdown(
-                        choices=[i.value.name for i in Precision if i != Precision.Unknown],
-                        label="Precision",
-                        multiselect=False,
-                        value="float16",
-                        interactive=True,
-                    )
-                    weight_type = gr.Dropdown(
-                        choices=[i.value.name for i in WeightType],
-                        label="Weights type",
-                        multiselect=False,
-                        value="Original",
-                        interactive=True,
-                    )
-                    base_model_name_textbox = gr.Textbox(label="Base model (for delta or adapter weights)")
-
-            submit_button = gr.Button("Submit Eval")
-            submission_result = gr.Markdown()
-            submit_button.click(
-                add_new_eval,
-                [
-                    model_name_textbox,
-                    base_model_name_textbox,
-                    revision_name_textbox,
-                    precision,
-                    weight_type,
-                    model_type,
-                ],
-                submission_result,
-            )
 
-    with gr.Row():
-        with gr.Accordion("📙 Citation", open=False):
-            citation_button = gr.Textbox(
-                value=CITATION_BUTTON_TEXT,
-                label=CITATION_BUTTON_LABEL,
-                lines=20,
-                elem_id="citation-button",
-                show_copy_button=True,
-            )
+def check_backend_health() -> tuple[bool, str]:
+    """
+    查询后端健康状态
+    返回: (is_healthy, status_html)
+    """
+    try:
+        response = requests.get(f"http://localhost:{settings.BACKEND_PORT}/api/v1/health/", timeout=2)
+        if response.status_code == 200:
+            data = response.json()
+            if data.get("code") == 0:
+                return (
+                    True,
+                    backend_status_indicator_html("healthy"),
+                )
+        return (
+            False,
+            backend_status_indicator_html("unhealthy"),
+        )
+    except Exception:
+        return (
+            False,
+            backend_status_indicator_html("unhealthy"),
+        )
 
 
 if __name__ == "__main__":
+    demo = main()
+
     # Backend server - 在单独的线程中运行
     app = create_app()
 

src/assets/css/backend-status-indicator.css

@@ -0,0 +1,41 @@
+/* Backend status indicator - breathing light animation */
+#backend-status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px;
+}
+
+.backend-status-light {
+    width: 12px;
+    height: 12px;
+    border-radius: 75%;
+    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/css/custom.css

@@ -105,45 +105,3 @@
     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/html/backend-status-indicator.healthy.html

@@ -0,0 +1,4 @@
+<div id="backend-status-indicator">
+    <span class="backend-status-light healthy"></span>
+    <span>Backend Status: Healthy</span>
+</div>

src/assets/html/backend-status-indicator.undefined.html

@@ -0,0 +1,4 @@
+<div id="backend-status-indicator">
+    <span class="backend-status-light undefined"></span>
+    <span>Backend Status: Checking...</span>
+</div>

src/assets/html/backend-status-indicator.unhealthy.html

@@ -0,0 +1,4 @@
+<div id="backend-status-indicator">
+    <span class="backend-status-light unhealthy"></span>
+    <span>Backend Status: Unhealthy</span>
+</div>

src/display/css_html_js.py

@@ -1,13 +1,54 @@
+import warnings
+from functools import lru_cache
 from pathlib import Path
+from typing import Literal
 
-custom_css = Path("src/assets/css/custom.css")
-backend_status_js = Path("src/assets/js/backend_status.js")
+PROJECT_ROOT = Path(__file__).parents[2]
 
-# FIXME: seems deprecated
-get_window_url_params = """
+CSS_FOLDER = PROJECT_ROOT / "src/assets/css"
+if not CSS_FOLDER.exists():
+    warnings.warn(f"CSS folder not found: {CSS_FOLDER.as_posix()!r}. Please check the folder exists.", stacklevel=2)
+JS_FOLDER = PROJECT_ROOT / "src/assets/js"
+if not JS_FOLDER.exists():
+    warnings.warn(
+        f"JavaScript folder not found: {JS_FOLDER.as_posix()!r}. Please check the folder exists.", stacklevel=2
+    )
+HTML_FOLDER = PROJECT_ROOT / "src/assets/html"
+if not HTML_FOLDER.exists():
+    warnings.warn(f"HTML folder not found: {HTML_FOLDER.as_posix()!r}. Please check the folder exists.", stacklevel=2)
+
+
+custom_css = CSS_FOLDER / "custom.css"
+
+
+# ------------------------------------------------------------
+# Backend status indicator
+# ------------------------------------------------------------
+@lru_cache(maxsize=1)
+def backend_status_js() -> str:
+    file_path = JS_FOLDER / "backend-status.js"
+    if not file_path.exists():
+        raise FileNotFoundError(f"JavaScript file not found: {file_path.as_posix()!r}. Please check the file exists.")
+    return file_path.read_text(encoding="utf-8")
+
+
+@lru_cache(maxsize=3)
+def backend_status_indicator_html(status: Literal["healthy", "unhealthy", "undefined"]) -> str:
+    file_path = HTML_FOLDER / f"backend-status-indicator.{status}.html"
+    if not file_path.exists():
+        raise FileNotFoundError(f"HTML file not found: {file_path.as_posix()!r}. Please check the file exists.")
+    return file_path.read_text(encoding="utf-8")
+
+
+@lru_cache(maxsize=1)
+def get_window_url_params() -> str:
+    return """
     function(url_params) {
         const params = new URLSearchParams(window.location.search);
         url_params = Object.fromEntries(params);
         return url_params;
     }
     """
+
+
+backend_status_indicator_css = CSS_FOLDER / "backend-status-indicator.css"