Spaces:
Paused
Paused
File size: 3,275 Bytes
8c1b9fe | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | "use client";
import { useEffect, useRef, useState } from "react";
import { fetchEstimate, type ResourceEstimate } from "@/lib/modelfit";
import { VerdictPill } from "@/components/modelfit/VerdictPill";
const CTX_MIN = 2048;
const CTX_MAX = 32768;
const CTX_STEP = 2048;
function fmtCtx(n: number): string {
return n >= 1024 ? `${Math.round(n / 1024)}K` : `${n}`;
}
/**
* Live memory planner (LM Studio's best interaction): drag the context length
* and watch the estimated VRAM + will-it-run verdict update. Debounce-calls the
* authoritative backend estimator (never a client-side guess) so the numbers
* stay honest — no model is touched, this is pure estimation.
*/
export function MemoryPlanner({
modelId,
paramsB,
quantization,
initial,
}: {
modelId: string;
paramsB: number;
quantization: string;
initial: ResourceEstimate | null;
}) {
const [ctx, setCtx] = useState(initial?.context_tokens ?? 4096);
const [est, setEst] = useState<ResourceEstimate | null>(initial);
const [loading, setLoading] = useState(false);
const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
useEffect(() => {
setLoading(true);
if (timer.current) clearTimeout(timer.current);
timer.current = setTimeout(() => {
fetchEstimate(modelId, paramsB, quantization, ctx)
.then(setEst)
.catch(() => {})
.finally(() => setLoading(false));
}, 250);
return () => {
if (timer.current) clearTimeout(timer.current);
};
}, [ctx, modelId, paramsB, quantization]);
const vram = est?.estimated_vram_gb ?? 0;
const headroom = est?.headroom_gb;
const avail = headroom != null ? vram + headroom : null;
const pct = avail && avail > 0 ? Math.min(100, (vram / avail) * 100) : null;
const barCol = pct == null ? "bg-sky-500" : pct > 90 ? "bg-red-500" : pct > 75 ? "bg-amber-500" : "bg-sky-500";
return (
<div className="space-y-2">
<div className="flex items-center justify-between">
<p className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">Memory planner</p>
{est?.verdict && <VerdictPill verdict={est.verdict} />}
</div>
<div className="flex items-center justify-between text-xs">
<span className="text-zinc-500">Context length</span>
<span className="font-mono text-zinc-200">{fmtCtx(ctx)} tokens</span>
</div>
<input
type="range"
min={CTX_MIN}
max={CTX_MAX}
step={CTX_STEP}
value={ctx}
onChange={(e) => setCtx(Number(e.target.value))}
className="w-full accent-sky-500"
aria-label="Context length"
/>
{pct != null && (
<div className="h-2 w-full overflow-hidden rounded-full bg-zinc-800">
<div className={`h-full rounded-full transition-all duration-200 ${barCol}`} style={{ width: `${pct}%` }} />
</div>
)}
<div className="flex items-center justify-between text-xs">
<span className={`font-mono ${loading ? "text-zinc-500" : "text-zinc-200"}`}>
~{vram.toFixed(1)} GB{avail != null ? ` / ${avail.toFixed(1)} GB` : ""}
</span>
<span className="text-[10px] text-zinc-600">{loading ? "updating…" : "estimated"}</span>
</div>
</div>
);
}
|