Spaces:
Sleeping
Sleeping
File size: 4,600 Bytes
f65e025 | 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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | "use client";
import { useState } from "react";
import { Loader2, RefreshCw, Tag } from "lucide-react";
import { api } from "@/lib/api";
import { toast } from "@/lib/toast";
import type { DocumentDetail } from "@/lib/types";
export default function ClassifyPanel({
detail,
provider,
onRefresh,
}: {
detail: DocumentDetail;
provider: string | null;
onRefresh: () => void;
}) {
const [busy, setBusy] = useState(false);
const c = detail.classification;
const reClassify = async () => {
setBusy(true);
try {
await api.reClassify(detail.id, provider ?? undefined);
toast.success("Re-classified");
onRefresh();
} catch (e: any) {
toast.error("Classification failed", e?.message ?? String(e));
} finally {
setBusy(false);
}
};
return (
<div className="h-full overflow-y-auto p-5">
<div className="mb-4 flex items-center justify-between">
<h3 className="text-sm font-semibold text-white">Classification</h3>
<button
onClick={reClassify}
disabled={busy}
className="flex items-center gap-1.5 rounded-lg border border-white/[0.08] bg-surface-850 px-2.5 py-1.5 text-xs text-white/70 transition hover:border-brand-500/40 hover:text-white disabled:opacity-50"
>
{busy ? <Loader2 size={12} className="animate-spin" /> : <RefreshCw size={12} />}
Re-classify
</button>
</div>
{!c ? (
<div className="card rounded-2xl p-6">
<div className="flex items-center gap-4">
<div className="skeleton h-12 w-12 rounded-xl" />
<div className="flex-1 space-y-2">
<div className="skeleton h-5 w-40 rounded" />
<div className="skeleton h-3 w-24 rounded" />
</div>
</div>
</div>
) : (
<>
<div className="card relative overflow-hidden rounded-2xl p-6">
<div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-brand-500/10 blur-2xl" />
<div className="relative flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500/25 to-brand-700/10 ring-1 ring-brand-500/30">
<Tag className="text-brand-200" size={22} />
</div>
<div>
<p className="text-[11px] uppercase tracking-wider text-white/40">
Detected type
</p>
<p className="text-2xl font-semibold capitalize text-white">
{c.doc_type.replace(/_/g, " ")}
</p>
</div>
<div className="ml-auto text-right">
<p className="text-[11px] uppercase tracking-wider text-white/40">
Confidence
</p>
<p className="bg-gradient-to-r from-emerald-400 to-accent-400 bg-clip-text text-2xl font-semibold tabular-nums text-transparent">
{Math.round(c.confidence * 100)}%
</p>
</div>
</div>
{c.rationale && (
<p className="relative mt-4 border-t border-white/[0.06] pt-3 text-xs leading-relaxed text-white/55">
{c.rationale}
</p>
)}
</div>
{c.candidates?.length > 0 && (
<div className="mt-5">
<p className="mb-2.5 text-[11px] font-semibold uppercase tracking-wider text-white/40">
Other candidates
</p>
<div className="space-y-2.5">
{c.candidates.map((cand, i) => (
<div key={i} className="flex items-center gap-3">
<span className="w-28 truncate text-xs capitalize text-white/65">
{String(cand.type).replace(/_/g, " ")}
</span>
<div className="h-2 flex-1 overflow-hidden rounded-full bg-white/[0.06]">
<div
className="h-full rounded-full bg-gradient-to-r from-brand-500/70 to-brand-400/70 transition-all"
style={{ width: `${(cand.confidence ?? 0) * 100}%` }}
/>
</div>
<span className="w-10 text-right text-[10px] tabular-nums text-white/40">
{Math.round((cand.confidence ?? 0) * 100)}%
</span>
</div>
))}
</div>
</div>
)}
</>
)}
</div>
);
}
|