Spaces:
Runtime error
Runtime error
File size: 4,567 Bytes
3baa9da |
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 122 123 124 125 126 |
'use client';
// Color palette for labels
const LABEL_COLORS = [
['bg-green-100 text-green-800', 'bg-green-400'],
['bg-blue-100 text-blue-800', 'bg-blue-400'],
['bg-purple-100 text-purple-800', 'bg-purple-400'],
['bg-yellow-100 text-yellow-800', 'bg-yellow-400'],
['bg-pink-100 text-pink-800', 'bg-pink-400'],
['bg-indigo-100 text-indigo-800', 'bg-indigo-400'],
["bg-red-100 text-red-800", "bg-red-400"],
["bg-teal-100 text-teal-800", "bg-teal-400"],
["bg-orange-100 text-orange-800", "bg-orange-400"],
];
// Deterministically assign a color to each label
const labelColorMap: Record<string, number> = {};
let colorIndex = 0;
function getColorForLabel(label: string): string[] {
if (!(label in labelColorMap)) {
labelColorMap[label] = colorIndex % LABEL_COLORS.length;
colorIndex++;
}
return LABEL_COLORS[labelColorMap[label]];
}
export function ClassificationResultDisplay({
result,
ready,
task,
}: {
result: any;
ready: boolean | null;
task: string;
// getColorForLabel: (label: string) => string[];
}) {
if (ready === null) {
return null;
}
if (!ready || !result) {
return (
<div className="text-center text-gray-400 animate-pulse">
Results will appear here
</div>
);
}
if (task === 'image-classification') {
return (
<div className="space-y-6 w-full">
<div className="text-center">
<h2 className="text-2xl font-bold text-gray-800 mb-2">
{result[0].label}
</h2>
<div className="w-full bg-gray-200 rounded-full h-3 mb-2">
<div
className={`h-3 rounded-full transition-all duration-1000 ease-out ${getColorForLabel(result[0].label)[1]}`}
style={{ width: `${result[0].score * 100}%` }}
/>
</div>
<div className="text-sm text-gray-500">
Confidence: {(result[0].score * 100).toFixed(2)}%
</div>
</div>
<div className="border-t border-gray-200 my-4"></div>
<div className="space-y-3">
{result.slice(1).map((item: any) => (
<div key={item.label} className="space-y-1">
<div className="flex justify-between items-center">
<span className="text-gray-700 text-sm">{item.label}</span>
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${getColorForLabel(item.label)[0]}`}>
{(item.score * 100).toFixed(2)}%
</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className={`h-2 rounded-full transition-all duration-1000 ease-out ${getColorForLabel(item.label)[1]}`}
style={{ width: `${item.score * 100}%` }}
/>
</div>
</div>
))}
</div>
</div>
);
}
// Default: text-classification
return (
<div className="space-y-6 w-full">
<div className="text-center">
<h2 className="text-2xl font-bold text-gray-800 mb-2">
{result[0].label}
</h2>
<div className="w-full bg-gray-200 rounded-full h-3 mb-2">
<div
className={`h-3 rounded-full transition-all duration-1000 ease-out ${getColorForLabel(result[0].label)[1]}`}
style={{ width: `${result[0].score * 100}%` }}
/>
</div>
<div className="text-sm text-gray-500">
Confidence: {(result[0].score * 100).toFixed(2)}%
</div>
</div>
<div className="border-t border-gray-200 my-4"></div>
<div className="space-y-3">
{result.slice(1).map((item: any) => (
<div key={item.label} className="space-y-1">
<div className="flex justify-between items-center">
<span className="text-gray-700 text-sm">{item.label}</span>
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${getColorForLabel(item.label)[0]}`}>
{(item.score * 100).toFixed(2)}%
</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className={`h-2 rounded-full transition-all duration-1000 ease-out ${getColorForLabel(item.label)[1]}`}
style={{ width: `${item.score * 100}%` }}
/>
</div>
</div>
))}
</div>
</div>
);
} |