Spaces:
Running
Running
File size: 4,197 Bytes
f2f99a3 | 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 | import type { DetectionResult, PresetName } from '@core/types.js';
interface ResultCardProps {
result: DetectionResult | null;
presetUsed?: PresetName | null;
loading?: boolean;
}
export default function ResultCard({ result, presetUsed, loading }: ResultCardProps) {
if (loading) {
return (
<div className="rounded-xl border border-zinc-800/50 bg-zinc-900/50 p-6">
<div className="flex items-center gap-3">
<div className="h-5 w-5 animate-spin rounded-full border-2 border-zinc-600 border-t-blue-500" />
<span className="text-sm text-zinc-400">Analyzing frames...</span>
</div>
</div>
);
}
if (!result) return null;
const payloadHex = result.payload
? Array.from(result.payload).map((b) => b.toString(16).padStart(2, '0')).join('').toUpperCase()
: '—';
return (
<div
className={`rounded-xl border p-6 transition-colors ${
result.detected
? 'border-emerald-800/50 bg-emerald-950/30'
: 'border-amber-800/50 bg-amber-950/20'
}`}
>
<div className="flex items-start justify-between">
<div>
<h3 className={`text-sm font-semibold ${result.detected ? 'text-emerald-400' : 'text-amber-400'}`}>
{result.detected ? 'Watermark Detected' : 'No Watermark Found'}
</h3>
{result.detected && (
<div className="mt-4 space-y-3">
<div>
<p className="text-[10px] uppercase tracking-wider text-zinc-500">Payload</p>
<p className="mt-0.5 font-mono text-lg tracking-wide text-zinc-100">{payloadHex}</p>
</div>
<div className="flex gap-6">
<div>
<p className="text-[10px] uppercase tracking-wider text-zinc-500">Confidence</p>
<div className="mt-1 flex items-center gap-2">
<div className="h-1.5 w-24 overflow-hidden rounded-full bg-zinc-800">
<div
className="h-full rounded-full bg-emerald-500 transition-all"
style={{ width: `${result.confidence * 100}%` }}
/>
</div>
<span className="text-xs tabular-nums text-zinc-400">
{(result.confidence * 100).toFixed(1)}%
</span>
</div>
</div>
<div>
<p className="text-[10px] uppercase tracking-wider text-zinc-500">Tiles used</p>
<p className="mt-0.5 text-sm tabular-nums text-zinc-300">
{result.tilesDecoded} of {result.tilesTotal} available
</p>
</div>
{presetUsed && (
<div>
<p className="text-[10px] uppercase tracking-wider text-zinc-500">Preset</p>
<p className="mt-0.5 text-sm capitalize text-zinc-300">
{presetUsed}
</p>
</div>
)}
</div>
</div>
)}
</div>
<div
className={`flex h-10 w-10 items-center justify-center rounded-full ${
result.detected ? 'bg-emerald-500/10' : 'bg-amber-500/10'
}`}
>
{result.detected ? (
<svg className="h-5 w-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
) : (
<svg className="h-5 w-5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z" />
</svg>
)}
</div>
</div>
</div>
);
}
|