Skip to content

Commit eee88f3

Browse files
kerthcetkerthcet
authored
Support to launch the dashboard via alphatrion (#105)
* support alphatrion dashboard Signed-off-by: kerthcet <kerthcet@gmail.com> * Fix bug Signed-off-by: kerthcet <kerthcet@gmail.com> * fix lint Signed-off-by: kerthcet <kerthcet@gmail.com> --------- Signed-off-by: kerthcet <kerthcet@gmail.com>
1 parent 8e1e7c2 commit eee88f3

10 files changed

Lines changed: 297 additions & 18 deletions

File tree

‎Makefile‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,7 @@ seed:
5252
.PHONY: seed-cleanup
5353
seed-cleanup:
5454
python hack/seed.py cleanup
55+
56+
build-dashboard:
57+
rm -rf alphatrion/static/*
58+
cd dashboard && npm install && npm run build

‎README.md‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ HostName: postgres
5454
ServerPWD: alphatr1on
5555
```
5656

57-
### Run a Sample Experiment
57+
### Run a Simple Experiment
5858

5959
Below is a simple example with two approaches demonstrating how to create an experiment and log performance metrics.
6060

@@ -75,27 +75,25 @@ async with alpha.CraftExperiment.setup(name="my_experiment") as exp:
7575
await run.wait()
7676
```
7777

78-
### View Results
78+
### View Dashboard
7979

80-
The dashboard is under active development.
80+
The dashboard is under active development.
8181
You can already run the frontend locally to explore experiments, trials, runs, and metrics through the UI.
8282

8383
### Prerequisites
8484
Make sure the following are installed:
8585

8686
- **Node.js ≥ 18**
87-
- **npm ≥ 9**
87+
- **npm ≥ 9**
8888
- **Vite**
89-
- Backend (`alphatrion server`) running
9089

91-
### Running the Frontend
90+
### Launch Dashboard
9291

93-
Inside the `dashboard` directory:
9492
```bash
95-
npm install
96-
npm run dev
93+
alphatrion server # Start the backend server
94+
alphatrion dashboard # Start the dashboard
9795
```
98-
Dashboard is available at `http://localhost:5173`
96+
Dashboard is available at `http://localhost:3000` by default.
9997

10098
### Cleanup
10199

‎alphatrion/server/cmd/main.py‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import argparse
2+
import os
3+
import webbrowser
4+
from pathlib import Path
25

36
import uvicorn
47
from dotenv import load_dotenv
8+
from fastapi import FastAPI
9+
from fastapi.responses import FileResponse
10+
from fastapi.staticfiles import StaticFiles
511
from rich.console import Console
612
from rich.text import Text
713

@@ -24,7 +30,11 @@ def main():
2430
)
2531
server.set_defaults(func=run_server)
2632

27-
# Reserve for dashboard command in the future
33+
dashboard = subparsers.add_parser("dashboard", help="Run the AlphaTrion dashboard")
34+
dashboard.add_argument(
35+
"--port", type=int, default=3000, help="Port to run the dashboard on"
36+
)
37+
dashboard.set_defaults(func=start_dashboard)
2838

2939
args = parser.parse_args()
3040
args.func(args)
@@ -38,3 +48,22 @@ def run_server(args):
3848
console.print(msg)
3949
graphql_init()
4050
uvicorn.run("alphatrion.server.cmd.app:app", host=args.host, port=args.port)
51+
52+
53+
def start_dashboard(args):
54+
static_path = Path(__file__).resolve().parents[2] / "static"
55+
56+
app = FastAPI()
57+
app.mount("/static", StaticFiles(directory=static_path, html=True), name="static")
58+
59+
@app.get("/{full_path:path}")
60+
def spa_fallback(full_path: str):
61+
index_file = os.path.join(static_path, "index.html")
62+
if os.path.exists(index_file):
63+
return FileResponse(index_file)
64+
return {"error": "index.html not found"}
65+
66+
url = f"http://localhost:{args.port}"
67+
webbrowser.open(url)
68+
69+
uvicorn.run(app, host="127.0.0.1", port=args.port)

‎alphatrion/static/alphatrion.png‎

141 KB
Loading

‎alphatrion/static/assets/index-CZjEehIf.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎alphatrion/static/assets/index-DzgxcILT.js‎

Lines changed: 226 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎alphatrion/static/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>LLM Observatory</title>
8+
<script type="module" crossorigin src="/static/assets/index-DzgxcILT.js"></script>
9+
<link rel="stylesheet" crossorigin href="/static/assets/index-CZjEehIf.css">
10+
</head>
11+
12+
<body>
13+
<div id="root"></div>
14+
<!-- Vite entry points to src/main.tsx -->
15+
</body>
16+
17+
</html>

‎alphatrion/static/logo.png‎

117 KB
Loading

‎dashboard/src/pages/App.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ function App() {
9595
<div className="flex justify-center items-center h-screen">
9696
<div className="relative">
9797
<div className="w-16 h-16 border-4 border-indigo-200 rounded-full animate-spin border-t-indigo-600"></div>
98-
<img src="/logo.png" alt="Loading" className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-6" />
98+
<img src="/static/logo.png" alt="Loading" className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-6" />
9999
</div>
100100
</div>
101101
);
@@ -127,17 +127,17 @@ function App() {
127127
<div className="flex h-screen">
128128
{/* Sidebar */}
129129
<div
130-
className={`${sidebarOpen ? "w-64" : "w-19"}
131-
transition-all duration-300 flex-shrink-0
132-
bg-white/70 backdrop-blur-xl
130+
className={`${sidebarOpen ? "w-64" : "w-19"}
131+
transition-all duration-300 flex-shrink-0
132+
bg-white/70 backdrop-blur-xl
133133
border-r border-gray-200/50
134134
shadow-[1px_0_30px_-15px_rgba(0,0,0,0.1)]`}
135135
>
136136
<div className="flex flex-col h-full">
137137
{/* Logo */}
138138
<div className="flex items-center justify-between h-16 px-3 border-b border-gray-200/50">
139139
<div className="flex items-center gap-3">
140-
<img src="/logo.png" alt="Alphatrion" className="w-9 h-9 rounded-xl flex-shrink-0" />
140+
<img src="/static/logo.png" alt="AlphaTrion" className="w-9 h-9 rounded-xl flex-shrink-0" />
141141
{sidebarOpen && (
142142
<span className="font-bold text-lg bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
143143
AlphaTrion
@@ -170,7 +170,7 @@ function App() {
170170
setSelectedTrialId(null);
171171
navigate(`/experiments?projectId=${id}`);
172172
}}
173-
className="mt-2 block w-full px-3 py-2 text-sm bg-gray-50/80 border border-gray-200 rounded-lg
173+
className="mt-2 block w-full px-3 py-2 text-sm bg-gray-50/80 border border-gray-200 rounded-lg
174174
focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-400
175175
transition-all cursor-pointer hover:bg-gray-100/80"
176176
>
@@ -183,7 +183,7 @@ function App() {
183183
</div>
184184
) : (
185185
<div
186-
className="w-10 h-10 bg-gradient-to-br from-gray-100 to-gray-50 rounded-lg flex items-center justify-center
186+
className="w-10 h-10 bg-gradient-to-br from-gray-100 to-gray-50 rounded-lg flex items-center justify-center
187187
text-indigo-600 text-sm font-semibold cursor-pointer border border-gray-200
188188
hover:shadow-md transition-all mx-auto"
189189
title={selectedProject?.name || "Select Project"}

‎dashboard/vite.config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,9 @@ import { defineConfig } from "vite";
22
import react from "@vitejs/plugin-react";
33

44
export default defineConfig({
5+
base: "/static/",
56
plugins: [react()],
7+
build: {
8+
outDir: "../alphatrion/static",
9+
},
610
});

0 commit comments

Comments
 (0)