118 lines
4.7 KiB
TypeScript
118 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import { usePoll } from "@/lib/use-poll";
|
|
import type { OverviewStats } from "@/lib/types";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { StatusBadge } from "./status-badge";
|
|
import { CardSkeleton } from "@/components/skeleton";
|
|
|
|
function tempColor(temp: number): string {
|
|
if (temp < 50) return "#22c55e";
|
|
if (temp < 70) return "#f59e0b";
|
|
return "#ef4444";
|
|
}
|
|
|
|
function vramGradient(pct: number): string {
|
|
if (pct < 50) return "from-blue-500 to-cyan-400";
|
|
if (pct < 80) return "from-blue-500 via-violet-500 to-purple-400";
|
|
return "from-violet-500 via-pink-500 to-red-400";
|
|
}
|
|
|
|
function MiniRing({ pct, color, size = 48, stroke = 4, children }: { pct: number; color: string; size?: number; stroke?: number; children?: React.ReactNode }) {
|
|
const radius = (size - stroke) / 2;
|
|
const circumference = 2 * Math.PI * radius;
|
|
const offset = circumference - (pct / 100) * circumference;
|
|
|
|
return (
|
|
<div className="relative" style={{ width: size, height: size }}>
|
|
<svg width={size} height={size} className="absolute inset-0 -rotate-90">
|
|
<circle className="gauge-track" cx={size / 2} cy={size / 2} r={radius} strokeWidth={stroke} />
|
|
<circle className="gauge-fill" cx={size / 2} cy={size / 2} r={radius} strokeWidth={stroke} stroke={color} strokeDasharray={circumference} strokeDashoffset={offset} />
|
|
</svg>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function OllamaCard() {
|
|
const { data } = usePoll<OverviewStats>("/api/stats/overview", 60000);
|
|
const gpu = data?.gpu;
|
|
const ollamaUp = data?.ollama?.available ?? data?.ollama_available ?? false;
|
|
const vramUsed = gpu?.vram_used_mb ?? gpu?.memory_used_mb;
|
|
const vramTotal = gpu?.vram_total_mb ?? gpu?.memory_total_mb;
|
|
const power = gpu?.power_w ?? gpu?.power_draw_w;
|
|
const vramPct =
|
|
vramUsed != null && vramTotal != null ? (vramUsed / vramTotal) * 100 : 0;
|
|
|
|
return (
|
|
<Card className="overflow-hidden relative">
|
|
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
|
<CardTitle className="text-base font-semibold">LLM / GPU</CardTitle>
|
|
{data && (
|
|
<StatusBadge
|
|
color={ollamaUp ? "green" : "red"}
|
|
label={ollamaUp ? "Online" : "Offline"}
|
|
/>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{!data ? (
|
|
<CardSkeleton lines={3} />
|
|
) : gpu?.available ? (
|
|
<>
|
|
{gpu.name && (
|
|
<p className="text-xs text-foreground/80 font-medium">{gpu.name}</p>
|
|
)}
|
|
{/* VRAM bar */}
|
|
{vramUsed != null && vramTotal != null && (
|
|
<div>
|
|
<div className="flex justify-between text-xs text-muted-foreground mb-1.5">
|
|
<span>VRAM</span>
|
|
<span>
|
|
{(vramUsed / 1024).toFixed(1)} / {(vramTotal / 1024).toFixed(1)} GB
|
|
</span>
|
|
</div>
|
|
<div className="glass-bar-track h-2.5">
|
|
<div
|
|
className={`h-full glass-bar-fill bg-gradient-to-r ${vramGradient(vramPct)} animate-bar-glow transition-all duration-700`}
|
|
style={{ width: `${vramPct}%`, boxShadow: "0 0 12px rgba(139, 92, 246, 0.3)" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* Temperature ring + Power text */}
|
|
<div className="flex items-center gap-4">
|
|
{gpu.temp_c != null && (
|
|
<div className="flex items-center gap-2">
|
|
<MiniRing pct={Math.min(gpu.temp_c, 100)} color={tempColor(gpu.temp_c)}>
|
|
<span className="text-[10px] font-bold text-foreground">{gpu.temp_c}°</span>
|
|
</MiniRing>
|
|
<span className="text-[10px] text-muted-foreground">Temp</span>
|
|
</div>
|
|
)}
|
|
{power != null && (
|
|
<div className="text-xs">
|
|
<p className="text-foreground font-medium">{power}W</p>
|
|
<p className="text-[10px] text-muted-foreground">
|
|
{gpu.power_limit_w ? `/ ${gpu.power_limit_w}W` : "Power"}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{gpu.utilization_pct != null && (
|
|
<div className="text-xs">
|
|
<p className="text-foreground font-medium">{gpu.utilization_pct}%</p>
|
|
<p className="text-[10px] text-muted-foreground">Util</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<p className="text-xs text-muted-foreground">GPU not available</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|