Spaces:
Sleeping
Sleeping
File size: 2,342 Bytes
01d5a5d |
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 |
import { type ModelStatus } from '@/store/useTrainingStore';
interface StatusBarProps {
status: ModelStatus;
}
export function StatusBar({ status }: StatusBarProps) {
const steps = [
{ title: 'Identity', status: 'seed_identity', icon: '🌱' },
{ title: 'Memory Upload', status: 'memory_upload', icon: '📝' },
{ title: 'Training', status: 'training', icon: '⚡' },
{ title: 'Trained', status: 'trained', icon: '✓' }
] as const;
const getStepState = (stepStatus: (typeof steps)[number]['status']) => {
const statusOrder = ['seed_identity', 'memory_upload', 'training', 'trained'];
const currentIndex = statusOrder.indexOf(status);
const stepIndex = statusOrder.indexOf(stepStatus);
// If current status is trained, all previous steps should be completed
if (status === 'trained') {
return {
isActive: stepStatus === 'trained',
isCompleted: stepStatus !== 'trained'
};
}
// If current status is training, previous steps should be completed
if (
status === 'training' &&
(stepStatus === 'seed_identity' || stepStatus === 'memory_upload')
) {
return {
isActive: false,
isCompleted: true
};
}
return {
isActive: stepStatus === status,
isCompleted: currentIndex > stepIndex
};
};
return (
<div className="inline-flex items-center">
{steps.map((step, index) => {
const state = getStepState(step.status);
const currentStepIndex = steps.findIndex((s) => s.status === status);
return (
<div key={step.status} className="flex items-center">
{index > 0 && (
<div
className={`w-9 h-[1px] transition-colors ${index <= currentStepIndex ? 'bg-blue-600' : 'bg-gray-200'}`}
/>
)}
<div
className={`flex items-center gap-1.5 px-2 py-1 text-sm font-medium transition-colors whitespace-nowrap
${state.isActive || state.isCompleted ? 'text-blue-600' : 'text-gray-300'}`}
>
<span className={state.isActive || state.isCompleted ? 'text-blue-600' : ''}>
{step.icon}
</span>
<span>{step.title}</span>
</div>
</div>
);
})}
</div>
);
}
|