Use Svelte source for Gradio components directly in Trackio dashboard (#450)

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

Author: abidlabs

.changeset/busy-nails-relate.md

@@ -0,0 +1,5 @@
+---
+"trackio": minor
+---
+
+feat:Use Svelte source for Gradio components directly in Trackio dashboard

.github/workflows/format.yml

@@ -29,4 +29,19 @@ jobs:
         
     - name: Check code with ruff
       run: |
-        ruff check . 
+        ruff check .
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+
+    - name: Install frontend dependencies
+      run: |
+        cd trackio/frontend
+        npm ci
+
+    - name: Lint frontend
+      run: |
+        cd trackio/frontend
+        npm run lint

.github/workflows/test.yml

@@ -12,11 +12,15 @@ jobs:
       matrix:
         os: [ubuntu-latest, windows-latest]
     runs-on: ${{ matrix.os }}
+    defaults:
+      run:
+        shell: bash
 
     steps:
     - uses: actions/checkout@v3
 
     - name: Set up Python
+      id: setup-python
       uses: actions/setup-python@v4
       with:
         python-version: '3.10'
@@ -48,20 +52,34 @@ jobs:
         
     - name: Install Python dependencies
       run: |
-        uv pip install --system -e .[dev,tensorboard,spaces] --prerelease=allow
-        uv pip install --system pytest --prerelease=allow
+        uv pip install --system -e '.[dev,tensorboard,spaces]' --prerelease=allow --python "${{ steps.setup-python.outputs.python-path }}"
+        uv pip install --system pytest --prerelease=allow --python "${{ steps.setup-python.outputs.python-path }}"
+
+    - name: Set up Node.js
+      if: matrix.os == 'ubuntu-latest'
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+
+    - name: Build frontend
+      if: matrix.os == 'ubuntu-latest'
+      run: |
+        cd trackio/frontend
+        npm ci
+        npm run build
 
     - name: Install Playwright
+      if: matrix.os == 'ubuntu-latest'
       run: |
-        playwright install
-        
+        "${{ steps.setup-python.outputs.python-path }}" -m playwright install chromium
+
     - name: Run backend unit tests
       run: |
-        pytest --deselect=tests/ui --deselect=tests/e2e-spaces
+        "${{ steps.setup-python.outputs.python-path }}" -m pytest --deselect=tests/ui --deselect=tests/e2e-spaces
 
     - name: Run ui/ux interaction tests
       if: matrix.os == 'ubuntu-latest'
       run: |
-        pytest tests/ui 
+        "${{ steps.setup-python.outputs.python-path }}" -m pytest tests/ui
 
     

.gitignore

@@ -11,4 +11,5 @@ trackio.db
 node_modules/
 dist/
 build/
-tf_test_run/
+tf_test_run/
+test.py

CLAUDE.md

@@ -48,8 +48,9 @@ Trackio is a lightweight experiment tracking library that provides a drop-in rep
 ### Core Flow
 1. **User API** (`trackio/__init__.py`, `run.py`) - Provides wandb-compatible API (`init()`, `log()`, `finish()`)
 2. **Storage Layer** (`sqlite_storage.py`) - Manages SQLite database operations for local persistence
-3. **UI Layer** (`ui/`) - Gradio-based web dashboard for visualization
-4. **Background Sync** (`commit_scheduler.py`) - Optional Hugging Face dataset synchronization
+3. **API Layer** (`ui/main.py`) - Gradio-based API server exposing endpoints via `gr.api()`
+4. **Frontend** (`frontend/`) - Svelte 5 SPA dashboard served alongside the Gradio API
+5. **Background Sync** (`commit_scheduler.py`) - Optional Hugging Face dataset synchronization
 
 ### Key Design Decisions
 
@@ -68,7 +69,8 @@ Tests are split into unit tests (testing individual modules) and e2e tests (test
 ### Important Files for Common Tasks
 
 - **Adding new logging features**: Modify `run.py` (Run class) and `sqlite_storage.py` (storage operations)
-- **Changing UI/dashboard**: Edit `ui/` (Gradio interface)
+- **Changing UI/dashboard**: Edit `frontend/src/` (Svelte 5 components), then run `npm run build` in `trackio/frontend/`
+- **Changing API endpoints**: Edit `ui/main.py` (Gradio API layer)
 - **Modifying API compatibility**: Update `trackio/__init__.py` and ensure wandb compatibility
 - **Adding import formats**: Extend `imports.py` with new import functions
 - **CLI modifications**: Update `cli.py` and entry points in `pyproject.toml`

README.md

@@ -20,9 +20,9 @@
 
 </div>
 
-Welcome to `trackio`: a lightweight, <u>free</u> experiment tracking Python library built by Hugging Face 🤗. It is local-first, supports very high logging throughputs for many parallel experiments, and provides an easy CLI interface for querying, perfect for LLM-driven experimenting.
+Welcome to `trackio`: a lightweight, <u>free</u> experiment tracking library built by Hugging Face 🤗. The **logging API, storage, and server** are implemented in **Python**; the **dashboard** is a **Svelte 5** single-page app served alongside a **Gradio** API server, with several UI controls built from **Gradio’s component source** (sliders, checkboxes, etc.) for consistency with the Gradio ecosystem. Trackio is local-first, supports very high logging throughputs for many parallel experiments, and provides an easy CLI interface for querying, perfect for LLM-driven experimenting.
 
-For human users, Trackio also ships with a Gradio-based dashboard you can use to view metrics, media, tables, alerts, etc:
+For human users, Trackio ships with that dashboard so you can view metrics, media, tables, alerts, etc.:
 
 ![Screen Recording 2025-11-06 at 5 34 50 PM](https://github.com/user-attachments/assets/8c9c1b96-f17a-401c-83a4-26ac754f89c7)
 
@@ -37,12 +37,12 @@ Trackio's main features:
 
 - **Local-first** design: dashboard runs locally by default. You can also host it on Spaces by specifying a `space_id` in `trackio.init()`.
   - Persists logs in a Sqlite database locally (or, if you provide a `space_id`, in a private Hugging Face Dataset)
-  - Visualize experiments with a Gradio dashboard locally (or, if you provide a `space_id`, on Hugging Face Spaces)
+  - Visualize experiments with a **Svelte 5** dashboard locally (or, if you provide a `space_id`, on Hugging Face Spaces)
 - **LLM-friendly**: Built with autonomous ML experiments in mind, Trackio includes a CLI for programmatic access and a Python API for run management, making it easy for LLMs to log metrics and query experiment data.
 
 - **Free**: Everything here, including hosting on Hugging Face, is free!
 
-Trackio is designed to be lightweight and _forkable_. It is written almost entirely in Python so that developers can easily fork the repository and add functionality that they care about.
+Trackio is designed to be lightweight and _forkable_: **Python** for the backend and API, **Svelte 5** for the dashboard, and **Gradio component** code where UI widgets need to match Gradio behavior—so developers can fork the repository and extend either side.
 
 ## Installation
 
@@ -193,14 +193,15 @@ If you are hosting your Trackio dashboard on Spaces, then you can embed the url
 
 Supported query parameters:
 
-- `project`: (string) Filter the dashboard to show only a specific project
-- `metrics`: (comma-separated list) Filter the dashboard to show only specific metrics, e.g. `train_loss,train_accuracy`
-- `sidebar`: (string: one of "hidden" or "collapsed"). If "hidden", then the sidebar will not be visible. If "collapsed", the sidebar will be in a collapsed state initially but the user will be able to open it. Otherwise, by default, the sidebar is shown in an open and visible state.
-- `footer`: (string: "false"). When set to "false", hides the Gradio footer. By default, the footer is visible.
-- `xmin`: (number) Set the initial minimum value for the x-axis limits across all metric plots.
-- `xmax`: (number) Set the initial maximum value for the x-axis limits across all metric plots.
+- `project`: (string) Open the dashboard on this project only. The project picker is hidden and the selection cannot be changed while this parameter is present (useful for embeds). The alias `selected_project` is accepted for the same behavior.
+- `metrics`: (comma-separated list) Show only metrics whose names match exactly (after splitting on commas), e.g. `train_loss,train_accuracy`. Applied as the metrics filter on the Metrics page.
+- `sidebar`: (string) One of `hidden`, `collapsed`, or omitted (default). **`hidden`** removes the sidebar entirely (full-width content; no rail). **`collapsed`** starts with the sidebar collapsed to the narrow rail; the user can expand it. By default the sidebar is open.
+- `footer`: (string: "false"). When set to "false", hides the Gradio footer (Gradio-hosted Spaces). By default, the footer is visible.
+- `xmin` / `xmax`: (numbers, use both together) Set the initial horizontal zoom range on the Metrics plots (shared x-axis window). Both must be valid numbers with `xmin < xmax`.
 - `smoothing`: (number) Set the initial value of the smoothing slider (0-20, where 0 = no smoothing).
 - `accordion`: (string: "hidden"). When set to "hidden", hides the section header accordions around metric groups. By default, section headers are visible.
+- `theme`: (string) Dashboard theme, e.g. `light` or `dark` (see theme behavior in the app).
+- `write_token`: (string) One-time token written to a cookie for write access on Hugging Face Spaces deployments; stripped from the URL after load.
 
 ## Alerts
 
@@ -294,9 +295,9 @@ pip install -e ".[dev,tensorboard]"
 
 ## Forking Trackio
 
-Trackio is designed to be extremely forkable. It is written entirely in Python with a Gradio-based dashboard, so you can fork the repo, make changes to the source code (e.g. adding new elements to the dashboard, custom metrics, or new pages), and see those changes reflected immediately when running locally.
+Trackio is designed to be extremely forkable. The codebase is **not** Python-only: the **backend** lives in Python (SQLite, Gradio API, CLI), and the **dashboard** is **Svelte 5** under `trackio/frontend/` (with a production build bundled into the Python package). UI controls that mirror Gradio are implemented using **Gradio’s component source** as a starting point. You can fork the repo, change Python, frontend, or both (e.g. new dashboard pages, metrics, API routes), and see updates when running locally after installing in editable mode and rebuilding the frontend where needed.
 
-Even better, if you deploy your Trackio dashboard to Hugging Face Spaces (by setting a `space_id` in `trackio.init()`), the Space UI will reflect your local version of Trackio — so any customizations you make to the Python source carry over to your hosted dashboard as well.
+If you deploy your Trackio dashboard to Hugging Face Spaces (by setting a `space_id` in `trackio.init()`), the Space UI reflects **your** checkout of Trackio—including any changes to the Python backend and the built Svelte assets.
 
 To get started, follow the [Contributing Guide](#CONTRIBUTING.md) instructions to set up Trackio locally, then make your changes and run `trackio show` to preview them locally.
 

hatch_build.py

@@ -0,0 +1,45 @@
+import os
+import shutil
+import subprocess
+import sys
+from pathlib import Path
+
+from hatchling.builders.hooks.plugin.interface import BuildHookInterface
+
+
+def _run_npm(args: list[str], cwd: str) -> None:
+    if sys.platform == "win32":
+        subprocess.run(["cmd", "/c", "npm", *args], cwd=cwd, check=True)
+    else:
+        subprocess.run(["npm", *args], cwd=cwd, check=True)
+
+
+class CustomBuildHook(BuildHookInterface):
+    PLUGIN_NAME = "custom"
+
+    def initialize(self, version: str, build_data: dict) -> None:
+        if os.environ.get("SKIP_FRONTEND_BUILD") == "1":
+            return
+
+        root = Path(self.root)
+        frontend = root / "trackio" / "frontend"
+        dist_index = frontend / "dist" / "index.html"
+        if (
+            dist_index.is_file()
+            and os.environ.get("TRACKIO_FRONTEND_FORCE_REBUILD") != "1"
+        ):
+            return
+
+        if not (frontend / "package.json").is_file():
+            return
+
+        if not shutil.which("npm"):
+            raise RuntimeError(
+                "The Trackio dashboard frontend is not built (trackio/frontend/dist/index.html "
+                "is missing) and npm is not available. Install Node.js and npm, then run "
+                "`cd trackio/frontend && npm ci && npm run build`, or set SKIP_FRONTEND_BUILD=1 "
+                "only if dist/ was produced another way."
+            )
+
+        _run_npm(["ci"], str(frontend))
+        _run_npm(["run", "build"], str(frontend))

pyproject.toml

@@ -15,7 +15,7 @@ requires-python = ">=3.10"
 dependencies = [
     "pandas<3.0.0",
     "huggingface-hub<2.0.0",
-    "gradio[oauth]>=6.8.0,<7.0.0",
+    "gradio[oauth]>=6.10.0,<7.0.0",
     "numpy<3.0.0",
     "pillow<12.0.0",
     "orjson>=3.0,<4.0.0",
@@ -59,8 +59,11 @@ spaces = [
 [project.scripts]
 trackio = "trackio.cli:main"
 
+[tool.hatch.build.hooks.custom]
+
 [tool.hatch.build.targets.wheel]
 packages = ["trackio"]
+artifacts = ["trackio/frontend/dist/**"]
 
 [tool.hatch.version]
 path = "trackio/package.json"
@@ -76,6 +79,7 @@ exclude = [
     "__pycache__",
     "build",
     "dist",
+    "trackio/frontend",
 ]
 
 # Same as Black.

tests/e2e-spaces/test_cli_remote.py

@@ -1,6 +1,7 @@
 import json
 import secrets
 import subprocess
+import time
 
 
 def test_cli_remote_list_and_get(test_space_id):
@@ -14,14 +15,18 @@ def test_cli_remote_list_and_get(test_space_id):
     trackio.log({"loss": 0.3, "acc": 0.9})
     trackio.finish()
 
-    def cli(*args):
-        result = subprocess.run(
-            ["trackio", *args, "--space", test_space_id, "--json"],
-            capture_output=True,
-            text=True,
-        )
-        assert result.returncode == 0, f"CLI failed: {result.stderr}"
-        return json.loads(result.stdout)
+    def cli(*args, retries=3):
+        for attempt in range(retries):
+            result = subprocess.run(
+                ["trackio", *args, "--space", test_space_id, "--json"],
+                capture_output=True,
+                text=True,
+            )
+            if result.returncode == 0:
+                return json.loads(result.stdout)
+            if attempt < retries - 1:
+                time.sleep(10)
+        assert False, f"CLI failed after {retries} attempts: {result.stderr}"
 
     projects = cli("list", "projects")
     assert project_name in projects["projects"]

tests/e2e-spaces/test_data_robustness.py

@@ -148,7 +148,15 @@ def wrapped_predict(*args, **kwargs):
     time.sleep(10)
     trackio.finish()
 
-    verify_client = Client(test_space_id)
+    verify_client = None
+    deadline = time.time() + 60
+    while time.time() < deadline:
+        try:
+            verify_client = Client(test_space_id, verbose=False)
+            break
+        except Exception:
+            time.sleep(10)
+    assert verify_client is not None, "Could not connect to Space"
     summary = verify_client.predict(
         project=project_name, run=run_name, api_name="/get_run_summary"
     )