Upload 24 files

Dockerfile

@@ -0,0 +1,18 @@
+FROM node:18 as frontend
+
+WORKDIR /app
+COPY frontend ./frontend
+WORKDIR /app/frontend
+RUN npm install && npm run build
+
+FROM python:3.11
+
+WORKDIR /app
+COPY . .
+
+# copy frontend build
+COPY --from=frontend /app/frontend/dist ./static
+
+RUN pip install fastapi uvicorn httpx
+
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]

api/routes/metrics.py

@@ -0,0 +1,22 @@
+from fastapi import APIRouter
+from app.services.storage import storage
+
+router = APIRouter()
+
+@router.get("/")
+def get_metrics(repoId: str, range: str = "hour"):
+    data = storage.get_aggregated_metrics(repoId, range)
+
+    return {
+        "timestamps": [m["timestamp"] for m in data],
+        "cpu": {
+            "avg": [m["cpu_avg"] for m in data],
+            "max": [m["cpu_max"] for m in data],
+            "min": [m["cpu_min"] for m in data],
+        },
+        "memory": {
+            "avg": [m["mem_avg"] for m in data],
+            "max": [m["mem_max"] for m in data],
+            "min": [m["mem_min"] for m in data],
+        },
+    }

api/routes/repos.py

@@ -0,0 +1,23 @@
+from fastapi import APIRouter, HTTPException
+from app.models.schema import Repo
+from app.services.storage import storage
+from app.services.connection_registry import registry
+
+router = APIRouter()
+
+@router.post("/", response_model=Repo)
+def add_repo(data: dict):
+    repo = Repo(namespace=data["namespace"], repo=data["repo"])
+    storage.add_repo(repo)
+    registry.register(repo)
+    return repo
+
+@router.get("/")
+def list_repos():
+    return storage.list_repos()
+
+@router.delete("/{repo_id}")
+def delete_repo(repo_id: str):
+    registry.unregister(repo_id)
+    storage.remove_repo(repo_id)
+    return {"status": "deleted"}

api/routes/status.py

@@ -0,0 +1,10 @@
+from fastapi import APIRouter
+from app.services.storage import InMemoryStorage
+
+router = APIRouter()
+storage = InMemoryStorage()
+
+
+@router.get("/")
+def get_status(repoId: str):
+    return storage.get_status(repoId)

frontend/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "spaceprobe-dashboard",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "axios": "^1.6.0",
+    "lucide-react": "^0.344.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "recharts": "^2.8.0",
+    "zustand": "^4.5.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}

frontend/src/App.tsx

@@ -0,0 +1,5 @@
+import Dashboard from "./pages/Dashboard";
+
+export default function App() {
+  return <Dashboard />;
+}

frontend/src/api/client.ts

@@ -0,0 +1,19 @@
+import axios from "axios";
+
+const api = axios.create({
+  baseURL: "/api",
+});
+
+export const getRepos = () => api.get("/repos").then(r => r.data);
+
+export const addRepo = (data: { namespace: string; repo: string }) =>
+  api.post("/repos", data);
+
+export const deleteRepo = (id: string) =>
+  api.delete(`/repos/${id}`);
+
+export const getMetrics = (repoId: string, range: string) =>
+  api.get("/metrics", { params: { repoId, range } }).then(r => r.data);
+
+export const getStatus = (repoId: string) =>
+  api.get("/status", { params: { repoId } }).then(r => r.data);

frontend/src/components/AddRepoModal.tsx

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { addRepo } from "../api/client";
+
+export default function AddRepoModal({ onClose }) {
+  const [namespace, setNamespace] = useState("");
+  const [repo, setRepo] = useState("");
+
+  const submit = async () => {
+    await addRepo({ namespace, repo });
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/60 flex justify-center items-center">
+      <div className="bg-zinc-800 p-6 rounded-xl">
+        <input
+          placeholder="namespace"
+          onChange={(e) => setNamespace(e.target.value)}
+        />
+        <input
+          placeholder="repo"
+          onChange={(e) => setRepo(e.target.value)}
+        />
+        <button onClick={submit}>Add</button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ChartPanel.tsx

@@ -0,0 +1,30 @@
+import {
+  LineChart,
+  Line,
+  XAxis,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+export default function ChartPanel({ data, metric }) {
+  const formatted = data.timestamps.map((t, i) => ({
+    time: new Date(t).toLocaleTimeString(),
+    avg: data[metric].avg[i],
+    max: data[metric].max[i],
+    min: data[metric].min[i],
+  }));
+
+  return (
+    <div className="h-64">
+      <ResponsiveContainer>
+        <LineChart data={formatted}>
+          <XAxis dataKey="time" hide />
+          <Tooltip />
+          <Line dataKey="avg" stroke="#00ffcc" />
+          <Line dataKey="max" stroke="#ff4d4f" />
+          <Line dataKey="min" stroke="#8884d8" />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

frontend/src/components/RepoCard.tsx

@@ -0,0 +1,48 @@
+import { useQuery } from "@tanstack/react-query";
+import { getMetrics, getStatus, deleteRepo } from "../api/client";
+import ChartPanel from "./ChartPanel";
+import StatusBadge from "./StatusBadge";
+import { useAppStore } from "../store/useAppStore";
+import { useAutoRefresh } from "../hooks/useAutoRefresh";
+
+export default function RepoCard({ repo }) {
+  const { selectedRange, autoRefresh } = useAppStore();
+
+  const metricsQuery = useQuery({
+    queryKey: ["metrics", repo.id, selectedRange],
+    queryFn: () => getMetrics(repo.id, selectedRange),
+  });
+
+  const statusQuery = useQuery({
+    queryKey: ["status", repo.id],
+    queryFn: () => getStatus(repo.id),
+  });
+
+  useAutoRefresh(metricsQuery.refetch, autoRefresh);
+  useAutoRefresh(statusQuery.refetch, autoRefresh);
+
+  return (
+    <div className="bg-zinc-900 p-4 rounded-xl shadow-lg">
+      <div className="flex justify-between">
+        <h2>{repo.namespace}/{repo.repo}</h2>
+        <button onClick={() => deleteRepo(repo.id)}>❌</button>
+      </div>
+
+      {statusQuery.data && (
+        <StatusBadge
+          state={statusQuery.data.state}
+          stage={statusQuery.data.stage}
+        />
+      )}
+
+      {metricsQuery.data ? (
+        <>
+          <ChartPanel data={metricsQuery.data} metric="cpu" />
+          <ChartPanel data={metricsQuery.data} metric="memory" />
+        </>
+      ) : (
+        <p>Loading...</p>
+      )}
+    </div>
+  );
+}

frontend/src/components/StatusBadge.tsx

@@ -0,0 +1,14 @@
+export default function StatusBadge({ state, stage }) {
+  const color =
+    state === "CONNECTED"
+      ? "bg-green-500"
+      : state === "ERROR"
+      ? "bg-red-500"
+      : "bg-gray-500";
+
+  return (
+    <div className={`px-3 py-1 rounded ${color}`}>
+      {stage}
+    </div>
+  );
+}

frontend/src/hooks/useAutoRefresh.ts

@@ -0,0 +1,10 @@
+import { useEffect } from "react";
+
+export const useAutoRefresh = (refetch: () => void, enabled: boolean) => {
+  useEffect(() => {
+    if (!enabled) return;
+
+    const id = setInterval(refetch, 5000);
+    return () => clearInterval(id);
+  }, [enabled]);
+};

frontend/src/main.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,37 @@
+import { useQuery } from "@tanstack/react-query";
+import { getRepos } from "../api/client";
+import RepoCard from "../components/RepoCard";
+import AddRepoModal from "../components/AddRepoModal";
+import { useState } from "react";
+import { useAppStore } from "../store/useAppStore";
+
+export default function Dashboard() {
+  const { data } = useQuery({ queryKey: ["repos"], queryFn: getRepos });
+  const [open, setOpen] = useState(false);
+  const { setRange, toggleRefresh } = useAppStore();
+
+  return (
+    <div className="p-6 bg-black min-h-screen text-white">
+      <div className="flex justify-between mb-6">
+        <button onClick={() => setOpen(true)}>+ Add Repo</button>
+
+        <select onChange={(e) => setRange(e.target.value as any)}>
+          <option value="hour">Hour</option>
+          <option value="day">Day</option>
+          <option value="week">Week</option>
+          <option value="month">Month</option>
+        </select>
+
+        <button onClick={toggleRefresh}>Toggle Refresh</button>
+      </div>
+
+      <div className="grid grid-cols-3 gap-4">
+        {data?.map((repo) => (
+          <RepoCard key={repo.id} repo={repo} />
+        ))}
+      </div>
+
+      {open && <AddRepoModal onClose={() => setOpen(false)} />}
+    </div>
+  );
+}

frontend/src/store/useAppStore.ts

@@ -0,0 +1,18 @@
+import { create } from "zustand";
+
+type Range = "hour" | "day" | "week" | "month";
+
+interface State {
+  selectedRange: Range;
+  autoRefresh: boolean;
+  setRange: (r: Range) => void;
+  toggleRefresh: () => void;
+}
+
+export const useAppStore = create<State>((set) => ({
+  selectedRange: "hour",
+  autoRefresh: true,
+  setRange: (r) => set({ selectedRange: r }),
+  toggleRefresh: () =>
+    set((s) => ({ autoRefresh: !s.autoRefresh })),
+}));

frontend/tailwind.config.js

@@ -0,0 +1,7 @@
+export default {
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

frontend/vite.config.ts

@@ -0,0 +1,7 @@
+export default {
+  server: {
+    proxy: {
+      "/api": "http://localhost:8000",
+    },
+  },
+};

main.py

@@ -0,0 +1,25 @@
+from fastapi import FastAPI
+from app.api.routes import repos, metrics, status
+from app.services.storage import storage
+import asyncio
+
+app = FastAPI(title="SpaceProbe API")
+
+app.include_router(repos.router, prefix="/api/repos")
+app.include_router(metrics.router, prefix="/api/metrics")
+app.include_router(status.router, prefix="/api/status")
+
+
+from fastapi.staticfiles import StaticFiles
+
+app.mount("/", StaticFiles(directory="static", html=True), name="static")
+
+@app.on_event("startup")
+async def start_aggregator_service():
+    async def loop():
+        while True:
+            for repo_id in storage.repos.keys():
+                storage.aggregate(repo_id)
+            await asyncio.sleep(5)
+
+    asyncio.create_task(loop())

models/schema.py

@@ -0,0 +1,20 @@
+from pydantic import BaseModel, Field
+from datetime import datetime
+from typing import Literal, List, Dict, Optional
+import uuid
+
+class Repo(BaseModel):
+    id: str = Field(default_factory=lambda: str(uuid.uuid4()))
+    namespace: str
+    repo: str
+
+class MetricPoint(BaseModel):
+    timestamp: datetime
+    cpu_usage_pct: float
+    memory_used_bytes: int
+    memory_total_bytes: int
+
+class RepoStatus(BaseModel):
+    state: Literal["CONNECTED", "DISCONNECTED", "ERROR"]
+    stage: str
+    last_updated: datetime

services/connection_manager.py

@@ -0,0 +1,60 @@
+import asyncio
+import json
+from datetime import datetime
+from app.services.stream_client import SSEClient
+from app.services.storage import storage
+from app.models.schema import MetricPoint, RepoStatus
+from app.utils.time import exponential_backoff
+
+class RepoConnection:
+    def __init__(self, repo_id: str, namespace: str, repo: str):
+        self.repo_id = repo_id
+        self.namespace = namespace
+        self.repo_name = repo
+        self.tasks = []
+        self.is_running = False
+
+    async def _listen_events(self):
+        attempt = 0
+        url = f"https://huggingface.co/api/spaces/{self.namespace}/{self.repo_name}/events"
+        while True:
+            try:
+                async for data in SSEClient(url).connect():
+                    attempt = 0
+                    payload = json.loads(data)
+                    stage = payload.get("compute", {}).get("status", {}).get("stage", "Unknown")
+                    
+                    storage.set_status(self.repo_id, RepoStatus(
+                        state="CONNECTED", stage=stage, last_updated=datetime.utcnow()
+                    ))
+
+                    if stage == "Running" and not self.is_running:
+                        self.is_running = True
+                        self.tasks.append(asyncio.create_task(self._listen_metrics()))
+                    elif stage != "Running":
+                        self.is_running = False
+                
+            except Exception:
+                attempt += 1
+                await exponential_backoff(attempt)
+
+    async def _listen_metrics(self):
+        url = f"https://huggingface.co/api/spaces/{self.namespace}/{self.repo_name}/metrics"
+        while self.is_running:
+            try:
+                async for data in SSEClient(url).connect():
+                    payload = json.loads(data)
+                    storage.add_metric(self.repo_id, MetricPoint(
+                        timestamp=datetime.utcnow(),
+                        cpu_usage_pct=payload.get("cpu_usage_pct", 0),
+                        memory_used_bytes=payload.get("memory_used_bytes", 0),
+                        memory_total_bytes=payload.get("memory_total_bytes", 1)
+                    ))
+            except Exception:
+                await asyncio.sleep(1)
+
+    def start(self):
+        self.tasks.append(asyncio.create_task(self._listen_events()))
+
+    def stop(self):
+        for t in self.tasks: t.cancel()

services/connection_registry.py

@@ -0,0 +1,18 @@
+from typing import Dict
+from app.services.connection_manager import RepoConnection
+
+class ConnectionRegistry:
+    def __init__(self):
+        self.connections: Dict[str, RepoConnection] = {}
+
+    def register(self, repo):
+        if repo.id in self.connections: return
+        conn = RepoConnection(repo.id, repo.namespace, repo.repo)
+        self.connections[repo.id] = conn
+        conn.start()
+
+    def unregister(self, repo_id: str):
+        if conn := self.connections.pop(repo_id, None):
+            conn.stop()
+
+registry = ConnectionRegistry()

services/storage.py

@@ -0,0 +1,83 @@
+from typing import Dict, List, Any
+from datetime import datetime, timedelta
+from app.models.schema import Repo, MetricPoint, RepoStatus
+
+class InMemoryStorage:
+    def __init__(self):
+        self.repos = {}
+        self.status = {}
+        self.metrics = {}
+
+    def add_repo(self, repo: Repo):
+        self.repos[repo.id] = repo
+        self.metrics[repo.id] = {
+            "raw": [],
+            "hour": [],
+            "day": [],
+            "week": [],
+            "month": []
+        }
+
+    def add_metric(self, repo_id: str, metric: MetricPoint):
+        if repo_id not in self.metrics:
+            return
+
+        raw = self.metrics[repo_id]["raw"]
+        raw.append(metric)
+
+        # ✅ Keep raw for 1 hour
+        cutoff = datetime.utcnow() - timedelta(hours=1)
+        self.metrics[repo_id]["raw"] = [
+            m for m in raw if m.timestamp > cutoff
+        ]
+
+    def aggregate(self, repo_id: str):
+        buckets = self.metrics.get(repo_id)
+        if not buckets:
+            return
+
+        raw = buckets["raw"]
+
+        def compute(points):
+            if not points:
+                return None
+
+            cpu_vals = [p.cpu_usage_pct for p in points]
+            mem_vals = [
+                (p.memory_used_bytes / p.memory_total_bytes) * 100
+                for p in points
+            ]
+
+            return {
+                "timestamp": datetime.utcnow(),
+                "cpu_avg": sum(cpu_vals) / len(cpu_vals),
+                "cpu_max": max(cpu_vals),
+                "cpu_min": min(cpu_vals),
+                "mem_avg": sum(mem_vals) / len(mem_vals),
+                "mem_max": max(mem_vals),
+                "mem_min": min(mem_vals),
+            }
+
+        now = datetime.utcnow()
+
+        intervals = {
+            "hour": timedelta(seconds=30),
+            "day": timedelta(minutes=30),
+            "week": timedelta(hours=12),
+            "month": timedelta(hours=12),
+        }
+
+        for key, delta in intervals.items():
+            series = buckets[key]
+
+            if not series or now - series[-1]["timestamp"] >= delta:
+                agg = compute(raw)
+                if agg:
+                    series.append(agg)
+
+                # prune (keep reasonable size)
+                if len(series) > 1000:
+                    series.pop(0)
+
+# Global instance
+storage = InMemoryStorage()

services/stream_client.py

@@ -0,0 +1,13 @@
+import httpx
+from typing import AsyncGenerator
+
+class SSEClient:
+    def __init__(self, url: str):
+        self.url = url
+
+    async def connect(self) -> AsyncGenerator[str, None]:
+        async with httpx.AsyncClient(timeout=None) as client:
+            async with client.stream("GET", self.url) as response:
+                async for line in response.aiter_lines():
+                    if line.startswith("data:"):
+                        yield line[5:].strip()

utils/time.py

@@ -0,0 +1,5 @@
+import asyncio
+
+async def exponential_backoff(attempt: int, base: float = 1.0, max_delay: float = 30.0):
+    delay = min(base * (2 ** attempt), max_delay)
+    await asyncio.sleep(delay)