Spaces:
Runtime error
Runtime error
File size: 1,786 Bytes
096a28d | 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 | export default function ImageComparison({ imagePreview, heatmapBase64, faceDetected }) {
return (
<div className="space-y-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-4xl mx-auto">
{/* Original */}
<div className="rounded-2xl overflow-hidden bg-surface border border-white/5">
<div className="px-4 py-2 bg-white/[0.03] border-b border-white/5 flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-brand" />
<span className="text-xs font-medium text-gray-400 uppercase tracking-wider">Original</span>
</div>
<img src={imagePreview} alt="Original" className="w-full object-contain max-h-[360px]" />
</div>
{/* Heatmap */}
<div className="rounded-2xl overflow-hidden bg-surface border border-white/5">
<div className="px-4 py-2 bg-white/[0.03] border-b border-white/5 flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-fake" />
<span className="text-xs font-medium text-gray-400 uppercase tracking-wider">Grad-CAM Heatmap</span>
</div>
<img
src={`data:image/png;base64,${heatmapBase64}`}
alt="Heatmap"
className="w-full object-contain max-h-[360px]"
/>
</div>
</div>
{/* Face badge */}
<div className="flex justify-center">
<span className={[
"text-xs font-medium px-3 py-1 rounded-full border",
faceDetected
? "border-real/30 text-real bg-real/10"
: "border-white/10 text-gray-500 bg-white/[0.03]",
].join(" ")}>
{faceDetected ? "Face detected" : "No face detected — full image analysed"}
</span>
</div>
</div>
);
}
|