Spaces:
Running
Running
File size: 3,399 Bytes
3a909c0 |
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 |
import React from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { TrainingStatus } from '../types';
import { TrendingUp, CheckCircle, Activity, Clock } from 'lucide-react';
interface MonitoringStatsProps {
trainingStatus: TrainingStatus;
getProgressPercentage: () => number;
formatTime: (seconds: number) => string;
}
const MonitoringStats: React.FC<MonitoringStatsProps> = ({ trainingStatus, getProgressPercentage, formatTime }) => {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<Card className="bg-slate-800/50 border-slate-700 rounded-xl">
<CardContent className="p-6">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/20 text-blue-400">
<TrendingUp className="w-6 h-6" />
</div>
<div>
<h3 className="text-sm text-slate-400 mb-1">Progress</h3>
<div className="text-2xl font-bold text-white">
{trainingStatus.current_step} / {trainingStatus.total_steps}
</div>
</div>
</div>
<Progress value={getProgressPercentage()} className="mt-4" />
</CardContent>
</Card>
<Card className="bg-slate-800/50 border-slate-700 rounded-xl">
<CardContent className="p-6">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/20 text-green-400">
<CheckCircle className="w-6 h-6" />
</div>
<div>
<h3 className="text-sm text-slate-400 mb-1">Current Loss</h3>
<div className="text-2xl font-bold text-white">
{trainingStatus.current_loss?.toFixed(4) || "N/A"}
</div>
</div>
</div>
</CardContent>
</Card>
<Card className="bg-slate-800/50 border-slate-700 rounded-xl">
<CardContent className="p-6">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-orange-500/20 text-orange-400">
<Activity className="w-6 h-6" />
</div>
<div>
<h3 className="text-sm text-slate-400 mb-1">Learning Rate</h3>
<div className="text-2xl font-bold text-white">
{trainingStatus.current_lr?.toExponential(2) || "N/A"}
</div>
</div>
</div>
</CardContent>
</Card>
<Card className="bg-slate-800/50 border-slate-700 rounded-xl">
<CardContent className="p-6">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-purple-500/20 text-purple-400">
<Clock className="w-6 h-6" />
</div>
<div>
<h3 className="text-sm text-slate-400 mb-1">ETA</h3>
<div className="text-2xl font-bold text-white">
{trainingStatus.eta_seconds ? formatTime(trainingStatus.eta_seconds) : "N/A"}
</div>
</div>
</div>
</CardContent>
</Card>
</div>
);
};
export default MonitoringStats;
|