80 lines
2.9 KiB
TypeScript
80 lines
2.9 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";
|
|
|
|
export function OllamaCard() {
|
|
const { data } = usePoll<OverviewStats>("/api/stats/overview", 60000);
|
|
const gpu = data?.gpu;
|
|
const ollama = data?.ollama;
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
|
<CardTitle className="text-sm font-medium">LLM / GPU</CardTitle>
|
|
{ollama && (
|
|
<StatusBadge
|
|
color={ollama.available ? "green" : "red"}
|
|
label={ollama.available ? "Online" : "Offline"}
|
|
/>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
{!data ? (
|
|
<p className="text-xs text-muted-foreground">Loading...</p>
|
|
) : gpu?.available ? (
|
|
<>
|
|
{gpu.name && (
|
|
<p className="text-xs text-foreground font-medium">{gpu.name}</p>
|
|
)}
|
|
<div className="grid grid-cols-2 gap-2 text-xs">
|
|
{gpu.vram_used_mb != null && gpu.vram_total_mb != null && (
|
|
<div>
|
|
<p className="text-muted-foreground">VRAM</p>
|
|
<p className="text-foreground">
|
|
{(gpu.vram_used_mb / 1024).toFixed(1)} /{" "}
|
|
{(gpu.vram_total_mb / 1024).toFixed(1)} GB
|
|
</p>
|
|
<div className="mt-1 h-1.5 rounded-full bg-secondary overflow-hidden">
|
|
<div
|
|
className="h-full rounded-full bg-primary"
|
|
style={{
|
|
width: `${(gpu.vram_used_mb / gpu.vram_total_mb) * 100}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{gpu.temp_c != null && (
|
|
<div>
|
|
<p className="text-muted-foreground">Temperature</p>
|
|
<p className="text-foreground">{gpu.temp_c}°C</p>
|
|
</div>
|
|
)}
|
|
{gpu.power_w != null && (
|
|
<div>
|
|
<p className="text-muted-foreground">Power</p>
|
|
<p className="text-foreground">
|
|
{gpu.power_w}W
|
|
{gpu.power_limit_w ? ` / ${gpu.power_limit_w}W` : ""}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{gpu.utilization_pct != null && (
|
|
<div>
|
|
<p className="text-muted-foreground">Utilization</p>
|
|
<p className="text-foreground">{gpu.utilization_pct}%</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<p className="text-xs text-muted-foreground">GPU not available</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|