Spaces:
Build error
Build error
File size: 3,485 Bytes
035a8a6 | 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 | import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from './ui/Card';
import { Button } from './ui/Button';
import { Play, Pause, Download } from 'lucide-react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
export default function TrainingMonitor() {
const [isTraining, setIsTraining] = useState(false);
const [history, setHistory] = useState({
loss: [],
epoch: [],
lr: [],
});
const startTraining = async () => {
setIsTraining(true);
try {
const response = await fetch('/api/training/start', {
method: 'POST',
});
const data = await response.json();
setHistory(data.history);
} catch (error) {
console.error('Training failed:', error);
} finally {
setIsTraining(false);
}
};
const stopTraining = () => {
setIsTraining(false);
};
const chartData = history.epoch.map((epoch, idx) => ({
epoch,
loss: history.loss[idx],
lr: history.lr[idx],
}));
return (
<div className="space-y-6">
<h2 className="text-3xl font-bold text-gray-800">Training & Submit</h2>
<Card>
<CardHeader>
<CardTitle>Training Monitor</CardTitle>
</CardHeader>
<CardContent>
<div className="flex gap-4 mb-6">
<Button onClick={startTraining} disabled={isTraining}>
<Play className="w-4 h-4 mr-2" />
Start Training
</Button>
<Button onClick={stopTraining} variant="secondary" disabled={!isTraining}>
<Pause className="w-4 h-4 mr-2" />
Stop
</Button>
<Button variant="outline">
<Download className="w-4 h-4 mr-2" />
Export Model
</Button>
</div>
{isTraining && (
<div className="mb-6">
<div className="flex items-center justify-center py-8">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500"></div>
</div>
<p className="text-center text-gray-600">Training in progress...</p>
</div>
)}
{chartData.length > 0 && (
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold mb-4">Training Loss</h3>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={chartData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="epoch" />
<YAxis />
<Tooltip />
<Line type="monotone" dataKey="loss" stroke="#FF4B4B" />
</LineChart>
</ResponsiveContainer>
</div>
<div>
<h3 className="text-lg font-semibold mb-4">Learning Rate</h3>
<ResponsiveContainer width="100%" height={200}>
<LineChart data={chartData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="epoch" />
<YAxis />
<Tooltip />
<Line type="monotone" dataKey="lr" stroke="#764ba2" />
</LineChart>
</ResponsiveContainer>
</div>
</div>
)}
</CardContent>
</Card>
</div>
);
} |