Spaces:
Build error
Build error
File size: 4,522 Bytes
49e53ae |
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 127 |
'use client';
interface ModelPerformanceCardProps {
vqcAccuracy: number;
qaoaAccuracy: number;
qnnAccuracy: number;
}
export default function ModelPerformanceCard({
vqcAccuracy,
qaoaAccuracy,
qnnAccuracy
}: ModelPerformanceCardProps) {
const models = [
{ name: 'VQC', percentage: vqcAccuracy, weight: 40 },
{ name: 'QAOA', percentage: qaoaAccuracy, weight: 30 },
{ name: 'QNN', percentage: qnnAccuracy, weight: 30 },
];
return (
<div className="card-purple rounded-3xl p-6 card-hover h-full">
{/* Header */}
<div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
<Atom className="w-5 h-5" />
</div>
<div>
<h3 className="text-xl font-bold">QUANTUM MODELS</h3>
<p className="text-xs text-white/60">Performance Overview</p>
</div>
</div>
<button className="text-white/60 hover:text-white transition-colors">
<MoreIcon />
</button>
</div>
{/* Circular Progress Indicators */}
<div className="flex justify-center gap-6 mb-6">
{models.map((model, index) => (
<div key={model.name} className="flex flex-col items-center">
<div className="relative w-20 h-20">
<svg className="w-full h-full -rotate-90" viewBox="0 0 100 100">
{/* Background circle */}
<circle
cx="50"
cy="50"
r="40"
fill="none"
stroke="rgba(255,255,255,0.2)"
strokeWidth="8"
/>
{/* Progress circle */}
<circle
cx="50"
cy="50"
r="40"
fill="none"
stroke="white"
strokeWidth="8"
strokeLinecap="round"
strokeDasharray={`${model.percentage * 2.51} 251`}
className="transition-all duration-1000"
/>
</svg>
<div className="absolute inset-0 flex items-center justify-center">
<span className="text-lg font-bold">{model.percentage}%</span>
</div>
</div>
<span className="mt-2 text-sm font-semibold">{model.name}</span>
<span className="text-xs text-white/60">Weight: {model.weight}%</span>
</div>
))}
</div>
{/* Ensemble Info */}
<div className="bg-white/10 rounded-2xl p-4">
<div className="flex items-center justify-between mb-3">
<span className="text-sm text-white/80">ENSEMBLE ACCURACY</span>
<span className="text-xs bg-white/20 px-2 py-0.5 rounded-full">
20% Quantum Weight
</span>
</div>
<div className="flex items-baseline gap-2">
<span className="text-3xl font-bold">
{((vqcAccuracy * 0.4 + qaoaAccuracy * 0.3 + qnnAccuracy * 0.3)).toFixed(1)}%
</span>
<span className="text-sm text-white/60">combined quantum</span>
</div>
</div>
{/* Legend */}
<div className="mt-4 flex items-center justify-center gap-4 text-xs text-white/60">
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-white" />
<span>Active</span>
</div>
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-white/30" />
<span>Remaining</span>
</div>
</div>
</div>
);
}
function Atom({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<circle cx="12" cy="12" r="1" />
<ellipse cx="12" cy="12" rx="10" ry="4" />
<ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(60 12 12)" />
<ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(120 12 12)" />
</svg>
);
}
function MoreIcon() {
return (
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
<circle cx="12" cy="5" r="2" />
<circle cx="12" cy="12" r="2" />
<circle cx="12" cy="19" r="2" />
</svg>
);
}
|