File size: 4,771 Bytes
263280b ea15c76 263280b ea15c76 263280b ea15c76 263280b ea15c76 263280b | 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 128 129 130 131 132 133 | import { Progress } from './ui/progress';
interface ProcessingPipelineProps {
currentStep: number;
isProcessing: boolean;
}
export function ProcessingPipeline({ currentStep, isProcessing }: ProcessingPipelineProps) {
const steps = [
{
id: 1,
title: 'Step 1: Video Enhancement',
description: 'Brightening darkened video data',
},
{
id: 2,
title: 'Step 2: Keypoint Extraction',
description: 'Detecting hand and body landmarks',
},
{
id: 3,
title: 'Step 3: Transformer Translation',
description: 'Sequence classification using the trained transformer model',
},
{
id: 4,
title: 'Overall Progress',
description: 'Total processing completion',
},
];
const getStepStatus = (stepId: number) => {
if (stepId === 4) {
if (currentStep >= 4) return 'completed';
if (currentStep > 0) return 'processing';
return 'pending';
}
if (currentStep > stepId) return 'completed';
if (currentStep === stepId) return 'processing';
return 'pending';
};
const getStatusIcon = (stepId: number) => {
const status = getStepStatus(stepId);
if (status === 'completed') return '✓';
if (status === 'processing') return '⟳';
return '○';
};
const getStatusColor = (stepId: number) => {
const status = getStepStatus(stepId);
if (status === 'completed') return 'text-green-600 bg-green-50';
if (status === 'processing') return 'text-blue-600 bg-blue-50';
return 'text-gray-400 bg-gray-100';
};
return (
<div className="bg-white rounded-lg border border-gray-200 p-6 mb-6">
<div className="flex items-center justify-between mb-4">
<div>
<h2 className="text-xl mb-1">Processing Pipeline</h2>
<p className="text-sm text-gray-600">Real-time translation progress and status</p>
</div>
<div className={`px-3 py-1.5 rounded-lg text-sm ${
currentStep === 0 ? 'bg-gray-100 text-gray-600' :
isProcessing ? 'bg-blue-50 text-blue-600' :
'bg-green-50 text-green-600'
}`}>
{currentStep === 0 ? 'Idle' : isProcessing ? 'Processing...' : 'Completed'}
</div>
</div>
<div className="space-y-4">
{steps.map((step, index) => (
<div
key={step.id}
className={`border rounded-lg p-4 transition-all ${
getStepStatus(step.id) === 'processing' ? 'border-blue-300 bg-blue-50' :
getStepStatus(step.id) === 'completed' ? 'border-green-300 bg-green-50' :
'border-gray-200 bg-white'
}`}
>
<div className="flex items-start justify-between">
<div className="flex items-start gap-3 flex-1">
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-lg ${getStatusColor(step.id)}`}>
{getStatusIcon(step.id)}
</div>
<div className="flex-1">
<div className="font-medium mb-1">{step.title}</div>
<div className="text-sm text-gray-600">{step.description}</div>
{getStepStatus(step.id) !== 'pending' && step.id !== 4 && (
<div className="mt-3">
<Progress
value={getStepStatus(step.id) === 'completed' ? 100 : 60}
className="h-2"
/>
</div>
)}
{step.id === 4 && currentStep > 0 && (
<div className="mt-3">
<div className="flex items-center justify-between mb-2">
<span className="text-sm text-gray-600">Progress</span>
<span className="text-sm font-medium">
{getStepStatus(step.id) === 'completed' ? 100 : Math.min(currentStep * 25, 100)}%
</span>
</div>
<Progress
value={
getStepStatus(step.id) === 'completed'
? 100
: Math.min(currentStep * 25, 100)
}
className="h-2"
/>
</div>
)}
</div>
</div>
<div className="text-sm text-gray-500">
{getStepStatus(step.id) === 'completed' ? 'Done' :
getStepStatus(step.id) === 'processing' ? 'In Progress' :
'Pending'}
</div>
</div>
</div>
))}
</div>
</div>
);
}
|