Spaces:
Runtime error
Runtime error
File size: 1,820 Bytes
0e7e985 7b92dc3 0e7e985 |
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 |
import Image from "next/image";
import HFSad from "@/assets/hfsad.svg";
interface ResultsInterface {
label: string;
score: number;
}
export const Results = ({ results }: { results: ResultsInterface[] }) => {
return (
<div className="w-full flex-col flex gap-5">
{results?.length > 0 ? (
<>
<p className="text-white font-bold text-xl text-center uppercase tracking-widest">
Results
</p>
{results?.map((result) => (
<div key={result.label}>
<div className="flex items-center justify-between border-b border-dashed border-slate-500/20 pb-1">
<p className="text-slate-400 font-medium text-xs">
{result.label}
</p>
<p className="text-slate-300 font-bold text-xs">
{(result.score * 100).toFixed(3)}%
</p>
</div>
<div className="w-full h-1.5 rounded-full bg-slate-700 mt-2">
<div
className="bg-gradient-to-r from-indigo-600 to-teal-500 h-full blur-[1px] rounded-full"
style={{
width: `${result.score * 100}%`,
}}
></div>
</div>
</div>
))}
</>
) : (
<div className="h-full flex items-center justify-center flex-col">
<Image
src={HFSad}
width={70}
height={70}
className="w-full max-w-[140px] mx-auto"
alt="Hugging Face sad because no result"
/>
<p className="text-slate-600 text-sm text-center mt-4">
I'm waiting for you to upload an image so I can tell you what's
in...
</p>
</div>
)}
</div>
);
};
|