Merge branch 'fe/refactor/learn' into 'fe/develop'

Refactor: 모델 학습 리팩토링

See merge request s11-s-project/S11P21S002!284
This commit is contained in:
김진현 2024-10-04 14:14:40 +09:00
commit 7b657c1b5c
4 changed files with 25 additions and 19 deletions

View File

@ -109,11 +109,11 @@ function ModelEvaluation({ projectId, selectedModel }: ModelEvaluationProps) {
{/* 차트의 높이를 100%로 맞춤 */} {/* 차트의 높이를 100%로 맞춤 */}
<ModelBarChart <ModelBarChart
data={[ data={[
{ name: 'precision', value: resultData[0]?.precision, fill: 'var(--color-precision)' }, { name: 'precision', value: resultData[0]?.precision, fill: 'hsl(0, 0%, 0%)' },
{ name: 'recall', value: resultData[0]?.recall, fill: 'var(--color-recall)' }, { name: 'recall', value: resultData[0]?.recall, fill: 'hsl(0, 0%, 30%)' },
{ name: 'map50', value: resultData[0]?.map50, fill: 'var(--color-map50)' }, { name: 'map50', value: resultData[0]?.map50, fill: 'hsl(0, 0%, 25%)' },
{ name: 'map5095', value: resultData[0]?.map5095, fill: 'var(--color-map5095)' }, { name: 'map5095', value: resultData[0]?.map5095, fill: 'hsl(0, 0%, 35%)' },
{ name: 'fitness', value: resultData[0]?.fitness, fill: 'var(--color-fitness)' }, { name: 'fitness', value: resultData[0]?.fitness, fill: 'hsl(0, 0%, 15%)' },
]} ]}
className="h-full" className="h-full"
/> />

View File

@ -1,5 +1,6 @@
'use client'; 'use client';
import { useState } from 'react';
import { Bar, BarChart, CartesianGrid, XAxis, YAxis, Rectangle } from 'recharts'; import { Bar, BarChart, CartesianGrid, XAxis, YAxis, Rectangle } from 'recharts';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'; import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';
@ -18,27 +19,29 @@ interface ModelBarChartProps {
const chartConfig = { const chartConfig = {
precision: { precision: {
label: 'Precision', label: 'Precision',
color: '#FF6347', color: 'hsl(var(--chart-1))',
}, },
recall: { recall: {
label: 'Recall', label: 'Recall',
color: '#1E90FF', color: 'hsl(var(--chart-2))',
}, },
map50: { map50: {
label: 'mAP50', label: 'mAP50',
color: '#32CD30', color: 'hsl(var(--chart-3))',
}, },
map5095: { map5095: {
label: 'mAP50-95', label: 'mAP50-95',
color: '#BA55D3', color: 'hsl(var(--chart-4))',
}, },
fitness: { fitness: {
label: 'Fitness', label: 'Fitness',
color: '#FF1493', color: 'hsl(var(--chart-5))',
}, },
} satisfies ChartConfig; } satisfies ChartConfig;
export default function ModelBarChart({ data, className }: ModelBarChartProps) { export default function ModelBarChart({ data, className }: ModelBarChartProps) {
const [activeIndex, setActiveIndex] = useState<number | null>(null);
return ( return (
<Card className={className}> <Card className={className}>
<CardHeader> <CardHeader>
@ -73,15 +76,17 @@ export default function ModelBarChart({ data, className }: ModelBarChartProps) {
dataKey="value" dataKey="value"
strokeWidth={0} strokeWidth={0}
radius={8} radius={8}
activeIndex={2} fillOpacity={1}
activeBar={({ ...props }) => { onMouseEnter={(_, index) => setActiveIndex(index)}
onMouseLeave={() => setActiveIndex(null)}
shape={({ ...props }) => {
return ( return (
<Rectangle <Rectangle
{...props} {...props}
fillOpacity={1} fill={props.fill}
stroke={props.payload.fill} fillOpacity={activeIndex === props.index ? 0.8 : 1}
strokeDasharray={0} stroke={activeIndex === props.index ? props.fill : 'none'}
strokeDashoffset={0} strokeWidth={activeIndex === props.index ? 2 : 0}
/> />
); );
}} }}

View File

@ -70,6 +70,7 @@ export default function TrainingSettings({
const selected = models?.find((model) => model.id === parseInt(value, 10)); const selected = models?.find((model) => model.id === parseInt(value, 10));
setSelectedModel(selected || null); setSelectedModel(selected || null);
}} }}
disabled={isWaiting || isTraining}
/> />
</div> </div>

View File

@ -34,13 +34,13 @@ export default function TrainingTab({ projectId }: TrainingTabProps) {
); );
setIsTraining(newIsTraining); setIsTraining(newIsTraining);
if (selectedModel && trainingModels.some((model) => model.id === selectedModel.id)) { if (trainingModels.length > 0) {
setSelectedModel(selectedModel); setSelectedModel(trainingModels[0]);
} else { } else {
setSelectedModel(null); setSelectedModel(null);
} }
} }
}, [models, selectedModel]); }, [models]);
useEffect(() => { useEffect(() => {
if (models && selectedModel) { if (models && selectedModel) {