mirror of
https://github.com/NVIDIA/dgx-spark-playbooks.git
synced 2026-04-23 02:23:53 +00:00
78213ac8a8
LitServe-based prompt injection detection server with a React monitoring dashboard. Serves HuggingFace classification models behind an OpenAI-compatible API with real-time metrics and GPU acceleration. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
71 lines
3.0 KiB
TypeScript
71 lines
3.0 KiB
TypeScript
import type { Metrics } from "../hooks/useMetrics";
|
|
|
|
interface Props {
|
|
metrics: Metrics;
|
|
}
|
|
|
|
export default function ModelStatus({ metrics }: Props) {
|
|
const models = metrics.models_loaded || [];
|
|
|
|
return (
|
|
<div className="card p-6 h-full">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h3 className="text-[15px] font-semibold text-[var(--text-primary)]">
|
|
Active Models
|
|
</h3>
|
|
<p className="text-xs text-[var(--text-muted)] mt-0.5">
|
|
{models.length} model{models.length !== 1 ? "s" : ""} deployed
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{models.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center h-52 text-[var(--text-muted)]">
|
|
<p className="text-sm">No models loaded</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{models.map((m) => (
|
|
<div
|
|
key={m.name}
|
|
className="group rounded-xl border border-[var(--border)] bg-[var(--bg-primary)]/50 p-4 hover:border-[var(--border-light)] transition-colors"
|
|
>
|
|
<div className="flex items-start justify-between mb-2">
|
|
<span className="text-sm font-semibold text-[var(--text-primary)]">
|
|
{m.name}
|
|
</span>
|
|
<span className="inline-flex items-center gap-1.5 text-[11px] font-medium px-2.5 py-1 rounded-full bg-[var(--success-bg)] text-[var(--success)] border border-[var(--success)]/15">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-[var(--success)]" />
|
|
Running
|
|
</span>
|
|
</div>
|
|
|
|
<p className="text-xs text-[var(--text-muted)] font-mono mb-3 break-all leading-relaxed">
|
|
{m.hf_model}
|
|
</p>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center gap-1.5 text-xs text-[var(--text-secondary)] bg-[var(--bg-card)] px-2.5 py-1 rounded-md border border-[var(--border)]">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<rect x="4" y="4" width="16" height="16" rx="2"/>
|
|
<rect x="9" y="9" width="6" height="6"/>
|
|
</svg>
|
|
{m.device}
|
|
</div>
|
|
<div className="flex items-center gap-1.5 text-xs text-[var(--text-secondary)] bg-[var(--bg-card)] px-2.5 py-1 rounded-md border border-[var(--border)]">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
|
|
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
|
</svg>
|
|
Batch {m.batch_size}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|