Sanitized mirror from private repository - 2026-04-05 05:34:18 UTC

dashboard/ui/components/ollama-card.tsx

@@ -0,0 +1,113 @@
+"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";
+
+function tempColor(temp: number): string {
+  if (temp < 50) return "text-green-400";
+  if (temp < 70) return "text-amber-400";
+  return "text-red-400";
+}
+
+function tempBarGradient(temp: number): string {
+  if (temp < 50) return "from-green-500 to-green-400";
+  if (temp < 70) return "from-green-500 via-amber-500 to-amber-400";
+  return "from-green-500 via-amber-500 to-red-500";
+}
+
+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";
+}
+
+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">
+      <div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-violet-500 to-purple-600" />
+      <CardHeader className="pb-2 flex flex-row items-center justify-between">
+        <CardTitle className="text-sm font-medium">LLM / GPU</CardTitle>
+        {data && (
+          <StatusBadge
+            color={ollamaUp ? "green" : "red"}
+            label={ollamaUp ? "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">
+              {vramUsed != null && vramTotal != null && (
+                <div>
+                  <p className="text-muted-foreground">VRAM</p>
+                  <p className="text-foreground">
+                    {(vramUsed / 1024).toFixed(1)} /{" "}
+                    {(vramTotal / 1024).toFixed(1)} GB
+                  </p>
+                  <div className="mt-1 h-2 rounded-full bg-secondary/50 overflow-hidden relative">
+                    <div
+                      className={`h-full rounded-full bg-gradient-to-r ${vramGradient(vramPct)} animate-bar-glow transition-all duration-700`}
+                      style={{
+                        width: `${vramPct}%`,
+                      }}
+                    />
+                  </div>
+                </div>
+              )}
+              {gpu.temp_c != null && (
+                <div>
+                  <p className="text-muted-foreground">Temperature</p>
+                  <p className={`font-medium ${tempColor(gpu.temp_c)}`}>
+                    {gpu.temp_c}&deg;C
+                  </p>
+                  <div className="mt-1 h-1.5 rounded-full bg-secondary/50 overflow-hidden">
+                    <div
+                      className={`h-full rounded-full bg-gradient-to-r ${tempBarGradient(gpu.temp_c)} transition-all duration-700`}
+                      style={{ width: `${Math.min(gpu.temp_c, 100)}%` }}
+                    />
+                  </div>
+                </div>
+              )}
+              {power != null && (
+                <div>
+                  <p className="text-muted-foreground">Power</p>
+                  <p className="text-foreground">
+                    {power}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 font-medium">
+                    {gpu.utilization_pct}%
+                  </p>
+                </div>
+              )}
+            </div>
+          </>
+        ) : (
+          <p className="text-xs text-muted-foreground">GPU not available</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}