jhynsoo/worlabel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor: 모델 api 연결

Browse Source
This commit is contained in:
정현조 2024-09-25 06:43:01 +09:00
parent 8aec3342e3
commit c40cd0741d
14 changed files with 427 additions and 379 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
frontend/src/components/ModelManage/EvaluationTab.tsx
View File

@ -1,55 +1,116 @@
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import ModelBarChart from '@/components/ModelBarChart';
import { useState } from 'react';
import useProjectModelsQuery from '@/queries/models/useProjectModelsQuery';
import useModelReportsQuery from '@/queries/models/useModelReportsQuery';
import useModelResultsQuery from '@/queries/models/useModelResultsQuery';
import ModelBarChart from './ModelBarChart';
import ModelLineChart from './ModelLineChart';
interface EvaluationTabProps {
selectedModel: string | null;
setSelectedModel: (model: string | null) => void;
projectId: number | null;
}
export default function EvaluationTab({ selectedModel, setSelectedModel }: EvaluationTabProps) {
export default function EvaluationTab({ projectId }: EvaluationTabProps) {
const [selectedModel, setSelectedModel] = useState<number | null>(null);
const { data: models } = useProjectModelsQuery(projectId ?? 0);
return (
<div>
<div className="mb-4">
<Label htmlFor="select-model">모델 선택</Label>
<Select onValueChange={setSelectedModel}>
<SelectTrigger id="select-model">
<SelectValue placeholder="모델을 선택하세요" />
</SelectTrigger>
<SelectContent>
<SelectItem value="genesis">Genesis</SelectItem>
<SelectItem value="explorer">Explorer</SelectItem>
<SelectItem value="quantum">Quantum</SelectItem>
</SelectContent>
</Select>
</div>
<ModelSelection
models={models}
setSelectedModel={setSelectedModel}
/>
{selectedModel && (
<div className="grid gap-8 md:grid-cols-2">
<div className="flex flex-col gap-6">
<ModelBarChart
data={[
{ name: 'precision', value: 0.734, fill: 'var(--color-precision)' },
{ name: 'recall', value: 0.75, fill: 'var(--color-recall)' },
{ name: 'mAP50', value: 0.995, fill: 'var(--color-map50)' },
{ name: 'mAP50_95', value: 0.97, fill: 'var(--color-map50-95)' },
{ name: 'fitness', value: 0.973, fill: 'var(--color-fitness)' },
]}
/>
</div>
<div className="flex flex-col justify-center">
<LabelingPreview />
</div>
</div>
<ModelEvaluation
projectId={projectId as number}
selectedModel={selectedModel}
/>
)}
</div>
);
}
function LabelingPreview() {
interface ModelSelectionProps {
models: Array<{ id: number; name: string }> | undefined;
setSelectedModel: (modelId: number) => void;
}
function ModelSelection({ models, setSelectedModel }: ModelSelectionProps) {
return (
<div className="flex items-center justify-center rounded-lg border bg-white p-4">
<p>레이블링 프리뷰</p>
<div className="mb-4">
<Label htmlFor="select-model">모델 선택</Label>
<Select onValueChange={(value) => setSelectedModel(parseInt(value))}>
<SelectTrigger id="select-model">
<SelectValue placeholder="모델을 선택하세요" />
</SelectTrigger>
<SelectContent>
{models?.map((model) => (
<SelectItem
key={model.id}
value={model.id.toString()}
>
{model.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
);
}
interface ModelEvaluationProps {
projectId: number;
selectedModel: number;
}
function ModelEvaluation({ projectId, selectedModel }: ModelEvaluationProps) {
const { data: reportData } = useModelReportsQuery(projectId, selectedModel);
const { data: resultData } = useModelResultsQuery(selectedModel);
if (!reportData || !resultData) {
return null;
}
return (
<div className="grid gap-8 md:grid-cols-2">
<div className="flex flex-col gap-6">
<ModelBarChart
data={[
{ name: 'precision', value: resultData[0]?.precision, fill: 'var(--color-precision)' },
{ name: 'recall', value: resultData[0]?.recall, fill: 'var(--color-recall)' },
{ name: 'mAP50', value: resultData[0]?.map50, fill: 'var(--color-map50)' },
{ name: 'mAP50_95', value: resultData[0]?.map5095, fill: 'var(--color-map50-95)' },
{ name: 'fitness', value: resultData[0]?.fitness, fill: 'var(--color-fitness)' },
]}
/>
</div>
<div className="flex flex-col gap-6">
<ModelLineChart
data={reportData.map((report) => ({
epoch: report.epoch.toString(),
loss1: report.boxLoss,
loss2: report.clsLoss,
loss3: report.dflLoss,
fitness: report.fitness,
}))}
/>
</div>
{/* <div className="flex flex-col justify-center">
<LabelingPreview />
</div> */}
</div>
);
}
// function LabelingPreview() {
// return (
// <div className="flex items-center justify-center rounded-lg border bg-white p-4">
// <p>레이블링 프리뷰</p>
// </div>
// );
// }

24
frontend/src/components/ModelManage/InputWithLabel.tsx Normal file
View File

@ -0,0 +1,24 @@
import { Label } from '@/components/ui/label';
import { Input } from '../ui/input';
interface InputWithLabelProps {
label: string;
id: string;
placeholder: string;
value: number;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}
export default function InputWithLabel({ label, id, placeholder, value, onChange }: InputWithLabelProps) {
return (
<div className="grid gap-3">
<Label htmlFor={id}>{label}</Label>
<Input
id={id}
type="number"
placeholder={placeholder}
value={value}
onChange={onChange}
/>
</div>
);
}

0
frontend/src/components/ModelBarChart/ModelBarChart.tsx → frontend/src/components/ModelManage/ModelBarChart.tsx
View File

0
frontend/src/components/ModelLineChart/ModelLineChart.tsx → frontend/src/components/ModelManage/ModelLineChart.tsx
View File

42
frontend/src/components/ModelManage/SelectWithLabel.tsx Normal file
View File

@ -0,0 +1,42 @@
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Label } from '@/components/ui/label';
interface SelectWithLabelOption {
label: string;
value: string;
}
interface SelectWithLabelProps {
label: string;
id: string;
options: SelectWithLabelOption[];
placeholder: string;
value: string;
onChange: (value: string) => void;
}
export default function SelectWithLabel({ label, id, options, placeholder, value, onChange }: SelectWithLabelProps) {
return (
<div className="grid gap-3">
<Label htmlFor={id}>{label}</Label>
<Select
value={value}
onValueChange={onChange}
>
<SelectTrigger id={id}>
<SelectValue placeholder={placeholder} />
</SelectTrigger>
<SelectContent>
{options.map((option) => (
<SelectItem
key={option.value}
value={option.value}
>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
);
}

189
frontend/src/components/ModelManage/SettingsForm.tsx
View File

@ -1,189 +0,0 @@
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import useProjectModelsQuery from '@/queries/models/useProjectModelsQuery';
import { useState } from 'react';
interface SettingsFormProps {
projectId: string | null; // projectId를 프랍으로 받음
onSubmit?: (data: SettingsFormData) => void;
}
export interface SettingsFormData {
projectId: number | null;
selectedModel: string | null;
ratio: number;
epochs: number;
batchSize: number;
optimizer: string;
lr0: number;
lrf: number;
}
export default function SettingsForm({ projectId, onSubmit }: SettingsFormProps) {
const numericProjectId = projectId ? parseInt(projectId, 10) : null;
const { data: models } = useProjectModelsQuery(numericProjectId ?? 0);
const [selectedModel, setSelectedModel] = useState<string | null>(null);
const [ratio, setRatio] = useState<number>(0.8);
const [epochs, setEpochs] = useState<number>(50);
const [batchSize, setBatchSize] = useState<number>(32);
const [optimizer, setOptimizer] = useState<string>('SGD');
const [lr0, setLr0] = useState<number>(0.01);
const [lrf, setLrf] = useState<number>(0.001);
const handleSubmit = () => {
if (onSubmit) {
onSubmit({
projectId: numericProjectId,
selectedModel,
ratio,
epochs,
batchSize,
optimizer,
lr0,
lrf,
});
}
};
return (
<form
className="grid w-full gap-6"
onSubmit={handleSubmit}
>
<fieldset className="grid gap-6 rounded-lg border p-4">
<legend className="-ml-1 px-1 text-sm font-medium">모델 설정</legend>
{/* 모델 선택 */}
<div className="grid gap-3">
<Label htmlFor="model">모델 선택</Label>
<Select onValueChange={setSelectedModel}>
<SelectTrigger id="model">
<SelectValue placeholder="모델을 선택하세요" />
</SelectTrigger>
<SelectContent>
{models?.map((model) => (
<SelectItem
key={model.id}
value={model.name}
>
{model.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* 훈련/검증 비율 및 학습 파라미터 */}
<div className="grid grid-cols-2 gap-4">
<InputWithLabel
label="훈련/검증 비율"
placeholder="예: 0.8 (80% 훈련, 20% 검증)"
id="ratio"
value={ratio}
onChange={(e) => setRatio(parseFloat(e.target.value))}
/>
<InputWithLabel
label="에포크 수"
placeholder="예: 50 (총 반복 횟수)"
id="epochs"
value={epochs}
onChange={(e) => setEpochs(parseInt(e.target.value, 10))}
/>
<InputWithLabel
label="Batch 크기"
placeholder="예: 32 (한번에 처리할 샘플 수)"
id="batch"
value={batchSize}
onChange={(e) => setBatchSize(parseInt(e.target.value, 10))}
/>
<SelectWithLabel
label="옵티마이저"
id="optimizer"
options={['SGD', 'Adam', 'AdamW', 'NAdam', 'RAdam', 'RMSProp']}
value={optimizer}
onChange={setOptimizer}
placeholder="옵티마이저 선택"
/>
<InputWithLabel
label="학습률(LR0)"
placeholder="예: 0.01 (초기 학습률)"
id="lr0"
value={lr0}
onChange={(e) => setLr0(parseFloat(e.target.value))}
/>
<InputWithLabel
label="최종 학습률(LRF)"
placeholder="예: 0.001 (최종 학습률)"
id="lrf"
value={lrf}
onChange={(e) => setLrf(parseFloat(e.target.value))}
/>
</div>
<button
type="submit"
className="btn-primary"
>
설정 저장
</button>
</fieldset>
</form>
);
}
interface InputWithLabelProps {
label: string;
id: string;
placeholder: string;
value: number;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}
function InputWithLabel({ label, id, placeholder, value, onChange }: InputWithLabelProps) {
return (
<div className="grid gap-3">
<Label htmlFor={id}>{label}</Label>
<Input
id={id}
type="number"
placeholder={placeholder}
value={value}
onChange={onChange}
/>
</div>
);
}
interface SelectWithLabelProps {
label: string;
id: string;
options: string[];
placeholder: string;
value: string;
onChange: (value: string) => void;
}
function SelectWithLabel({ label, id, options, placeholder, onChange }: SelectWithLabelProps) {
return (
<div className="grid gap-3">
<Label htmlFor={id}>{label}</Label>
<Select onValueChange={onChange}>
<SelectTrigger id={id}>
<SelectValue placeholder={placeholder} />
</SelectTrigger>
<SelectContent>
{options.map((option) => (
<SelectItem
key={option}
value={option}
>
{option}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
);
}

25
frontend/src/components/ModelManage/TrainingGraph.tsx Normal file
View File

@ -0,0 +1,25 @@
import ModelLineChart from './ModelLineChart';
import usePollingModelReportsQuery from '@/queries/models/usePollingModelReportsQuery';
interface TrainingGraphProps {
projectId: number | null;
selectedModel: number | null;
}
export default function TrainingGraph({ projectId, selectedModel }: TrainingGraphProps) {
const { data: trainingDataList } = usePollingModelReportsQuery(projectId as number, selectedModel ?? 0);
return (
<ModelLineChart
data={
trainingDataList?.map((data) => ({
epoch: data.epoch.toString(),
loss1: data.boxLoss,
loss2: data.clsLoss,
loss3: data.dflLoss,
fitness: data.fitness,
})) || []
}
/>
);
}

134
frontend/src/components/ModelManage/TrainingSettings.tsx Normal file
View File

@ -0,0 +1,134 @@
import SelectWithLabel from './SelectWithLabel';
import InputWithLabel from './InputWithLabel';
import { Button } from '@/components/ui/button';
import useProjectModelsQuery from '@/queries/models/useProjectModelsQuery';
import { ModelTrainRequest } from '@/types';
import { useState } from 'react';
interface TrainingSettingsProps {
projectId: number | null;
selectedModel: number | null;
setSelectedModel: (model: number | null) => void;
handleTrainingStart: (trainData: ModelTrainRequest) => void;
isTraining: boolean;
}
export default function TrainingSettings({
projectId,
selectedModel,
setSelectedModel,
handleTrainingStart,
isTraining,
}: TrainingSettingsProps) {
const { data: models } = useProjectModelsQuery(projectId ?? 0);
const [ratio, setRatio] = useState<number>(0.8);
const [epochs, setEpochs] = useState<number>(50);
const [batchSize, setBatchSize] = useState<number>(32);
const [optimizer, setOptimizer] = useState<'SGD' | 'AUTO' | 'ADAM' | 'ADAMW' | 'NADAM' | 'RADAM' | 'RMSPROP'>('AUTO');
const [lr0, setLr0] = useState<number>(0.01);
const [lrf, setLrf] = useState<number>(0.001);
const handleSubmit = () => {
if (selectedModel !== null) {
const trainData: ModelTrainRequest = {
modelId: selectedModel,
ratio,
epochs,
batch: batchSize,
optimizer,
lr0,
lrf,
};
handleTrainingStart(trainData);
}
};
return (
<fieldset
className="grid gap-6 rounded-lg border p-4"
disabled={isTraining}
>
<legend className="-ml-1 px-1 text-sm font-medium">모델 설정</legend>
<div className="grid gap-3">
<SelectWithLabel
label="모델 선택"
id="model"
options={
models?.map((model) => ({
label: model.name,
value: model.id.toString(),
})) || []
}
placeholder="모델을 선택하세요"
value={selectedModel ? selectedModel.toString() : ''}
onChange={(value) => setSelectedModel(parseInt(value, 10))}
/>
</div>
<div className="grid grid-cols-2 gap-4">
<InputWithLabel
label="훈련/검증 비율"
placeholder="예: 0.8 (80% 훈련, 20% 검증)"
id="ratio"
value={ratio}
onChange={(e) => setRatio(parseFloat(e.target.value))}
/>
<InputWithLabel
label="에포크 수"
placeholder="예: 50 (총 반복 횟수)"
id="epochs"
value={epochs}
onChange={(e) => setEpochs(parseInt(e.target.value, 10))}
/>
<InputWithLabel
label="Batch 크기"
placeholder="예: 32 (한번에 처리할 샘플 수)"
id="batch"
value={batchSize}
onChange={(e) => setBatchSize(parseInt(e.target.value, 10))}
/>
<SelectWithLabel
label="옵티마이저"
id="optimizer"
options={[
{ label: 'AUTO', value: 'AUTO' },
{ label: 'SGD', value: 'SGD' },
{ label: 'ADAM', value: 'ADAM' },
{ label: 'ADAMW', value: 'ADAMW' },
{ label: 'NADAM', value: 'NADAM' },
{ label: 'RADAM', value: 'RADAM' },
{ label: 'RMSPROP', value: 'RMSPROP' },
]}
placeholder="옵티마이저 선택"
value={optimizer}
onChange={(value) => setOptimizer(value as 'AUTO' | 'SGD' | 'ADAM' | 'ADAMW' | 'NADAM' | 'RADAM' | 'RMSPROP')}
/>
<InputWithLabel
label="학습률(LR0)"
placeholder="예: 0.01 (초기 학습률)"
id="lr0"
value={lr0}
onChange={(e) => setLr0(parseFloat(e.target.value))}
/>
<InputWithLabel
label="최종 학습률(LRF)"
placeholder="예: 0.001 (최종 학습률)"
id="lrf"
value={lrf}
onChange={(e) => setLrf(parseFloat(e.target.value))}
/>
</div>
<Button
variant="outlinePrimary"
size="lg"
onClick={handleSubmit}
disabled={!selectedModel || isTraining}
>
학습 시작
</Button>
</fieldset>
);
}

85
frontend/src/components/ModelManage/TrainingTab.tsx
View File

@ -1,45 +1,60 @@
import { Button } from '@/components/ui/button';
import ModelLineChart from '@/components/ModelLineChart';
import SettingsForm from './SettingsForm';
import useTrainModelQuery from '@/queries/models/useTrainModelQuery';
import useModelStore from '@/stores/useModelStore';
import TrainingSettings from './TrainingSettings';
import TrainingGraph from './TrainingGraph';
import { ModelTrainRequest } from '@/types';
interface TrainingTabProps {
training: boolean;
handleTrainingToggle: () => void;
trainingDataList: {
epoch: number;
box_loss: number;
cls_loss: number;
dfl_loss: number;
fitness: number;
}[];
projectId: string | null; // projectId를 프랍으로 받음
projectId: number | null;
}
export default function TrainingTab({ training, handleTrainingToggle, trainingDataList, projectId }: TrainingTabProps) {
export default function TrainingTab({ projectId }: TrainingTabProps) {
const numericProjectId = projectId ? parseInt(projectId.toString(), 10) : null;
const { isTrainingByProject, setIsTraining, selectedModelByProject, setSelectedModel, trainingDataByProject } =
useModelStore((state) => ({
isTrainingByProject: state.isTrainingByProject,
setIsTraining: state.setIsTraining,
selectedModelByProject: state.selectedModelByProject,
setSelectedModel: state.setSelectedModel,
trainingDataByProject: state.trainingDataByProject,
}));
const isTraining = isTrainingByProject[numericProjectId?.toString() || ''] || false;
const selectedModel = selectedModelByProject[numericProjectId?.toString() || ''];
const { mutate: startTraining } = useTrainModelQuery(numericProjectId as number);
const handleTrainingStart = (trainData: ModelTrainRequest) => {
if (!isTraining && selectedModel !== null) {
setIsTraining(numericProjectId?.toString() || '', true);
startTraining(trainData);
}
};
const trainingData = trainingDataByProject[numericProjectId?.toString() || ''];
return (
<div className="grid gap-8 md:grid-cols-2">
<div className="flex flex-col gap-6">
<SettingsForm projectId={projectId} />
<Button
variant={training ? 'destructive' : 'outlinePrimary'}
size="lg"
onClick={handleTrainingToggle}
>
{training ? '학습 중단' : '학습 시작'}
</Button>
</div>
<TrainingSettings
projectId={numericProjectId}
selectedModel={selectedModel}
setSelectedModel={(modelId) => setSelectedModel(numericProjectId?.toString() || '', modelId)}
handleTrainingStart={handleTrainingStart}
isTraining={isTraining}
/>
<div className="flex flex-col justify-center">
<ModelLineChart
data={trainingDataList.map((data) => ({
epoch: data.epoch.toString(),
loss1: data.box_loss,
loss2: data.cls_loss,
loss3: data.dfl_loss,
fitness: data.fitness,
}))}
/>
</div>
<TrainingGraph
projectId={numericProjectId}
selectedModel={selectedModel}
/>
{trainingData && (
<div className="mt-4">
<p>현재 에포크: {trainingData[trainingData.length - 1]?.epoch}</p>
<p>총 에포크: {trainingData[trainingData.length - 1]?.totalEpochs}</p>
<p>예상 남은시간: {trainingData[trainingData.length - 1]?.leftSecond}</p>
</div>
)}
</div>
);
}

33
frontend/src/components/ModelManage/index.tsx
View File

@ -1,28 +1,11 @@
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useState } from 'react';
import { useParams } from 'react-router-dom';
import useTrainWebSocket from '@/hooks/useTrainPolling';
import useTrainStore from '@/stores/useTrainStore';
import TrainingTab from './TrainingTab';
import EvaluationTab from './EvaluationTab';
export default function ModelManage() {
const { projectId } = useParams<{ projectId?: string }>();
const [training, setTraining] = useState(false);
const [selectedModel, setSelectedModel] = useState<string | null>(null);
const numericProjectId = projectId ?? null;
useTrainWebSocket(training, numericProjectId);
const { trainingDataList } = useTrainStore((state) => ({
trainingDataList: numericProjectId ? state.trainingDataByProject[numericProjectId] || [] : [],
}));
const handleTrainingToggle = () => {
setTraining((prev) => !prev);
};
const numericProjectId = projectId ? parseInt(projectId, 10) : null;
return (
<div className="grid h-screen w-full">
@ -41,22 +24,12 @@ export default function ModelManage() {
<TabsTrigger value="results">모델 평가</TabsTrigger>
</TabsList>
{/* 학습 탭 */}
<TabsContent value="train">
<TrainingTab
training={training}
handleTrainingToggle={handleTrainingToggle}
trainingDataList={trainingDataList}
projectId={numericProjectId}
/>
<TrainingTab projectId={numericProjectId} />
</TabsContent>
{/* 평가 탭 */}
<TabsContent value="results">
<EvaluationTab
selectedModel={selectedModel}
setSelectedModel={setSelectedModel}
/>
<EvaluationTab projectId={numericProjectId} />
</TabsContent>
</Tabs>
</main>

49
frontend/src/hooks/useTrainPolling.ts
View File

@ -1,49 +0,0 @@
// 임시 가짜 훅
import { useEffect, useRef, useCallback } from 'react';
import axios from 'axios';
import useTrainStore from '@/stores/useTrainStore';
export default function useTrainPolling(start: boolean, projectId?: string | null) {
const { addTrainingData, resetTrainingData } = useTrainStore((state) => ({
addTrainingData: state.addTrainingData,
resetTrainingData: state.resetTrainingData,
}));
const intervalIdRef = useRef<number | null>(null);
// 함수 api 후 교체 예정
const fetchTrainingData = useCallback(async () => {
if (projectId) {
try {
const response = await axios.get(`/api/바보=${projectId}`);
const data = response.data;
addTrainingData(projectId, {
epoch: data.epoch,
total_epochs: data.total_epochs,
box_loss: data.box_loss,
cls_loss: data.cls_loss,
dfl_loss: data.dfl_loss,
fitness: data.fitness,
epoch_time: data.epoch_time,
left_second: data.left_second,
});
} catch (error) {
console.error('Fetching error:', error);
}
}
}, [projectId, addTrainingData]);
useEffect(() => {
if (start && projectId) {
resetTrainingData(projectId);
intervalIdRef.current = window.setInterval(fetchTrainingData, 5000);
}
return () => {
if (intervalIdRef.current) {
clearInterval(intervalIdRef.current);
intervalIdRef.current = null;
}
};
}, [start, projectId, fetchTrainingData, resetTrainingData]);
}

12
frontend/src/queries/models/usePollingModelReportsQuery.ts Normal file
View File

@ -0,0 +1,12 @@
import { useQuery } from '@tanstack/react-query';
import { getModelReports } from '@/api/modelApi';
import { ReportResponse } from '@/types';
export default function usePollingModelReportsQuery(projectId: number, modelId: number) {
return useQuery<ReportResponse[]>({
queryKey: ['pollingModelReports', projectId, modelId],
queryFn: () => getModelReports(projectId, modelId),
refetchInterval: 5000,
enabled: !!projectId && !!modelId,
});
}

40
frontend/src/stores/useModelStore.ts Normal file
View File

@ -0,0 +1,40 @@
import { create } from 'zustand';
import { ReportResponse } from '@/types';
interface ModelStoreState {
trainingDataByProject: Record<string, ReportResponse[]>;
isTrainingByProject: Record<string, boolean>;
selectedModelByProject: Record<string, number | null>;
setIsTraining: (projectId: string, status: boolean) => void;
saveTrainingData: (projectId: string, data: ReportResponse[]) => void;
setSelectedModel: (projectId: string, modelId: number | null) => void;
}
const useModelStore = create<ModelStoreState>((set) => ({
trainingDataByProject: {},
isTrainingByProject: {},
selectedModelByProject: {},
setIsTraining: (projectId, status) =>
set((state) => ({
isTrainingByProject: {
...state.isTrainingByProject,
[projectId]: status,
},
})),
saveTrainingData: (projectId, data) =>
set((state) => ({
trainingDataByProject: {
...state.trainingDataByProject,
[projectId]: data,
},
})),
setSelectedModel: (projectId, modelId) =>
set((state) => ({
selectedModelByProject: {
...state.selectedModelByProject,
[projectId]: modelId,
},
})),
}));
export default useModelStore;

40
frontend/src/stores/useTrainStore.ts
View File

@ -1,40 +0,0 @@
import { create } from 'zustand';
interface TrainingData {
epoch: number;
total_epochs: number;
box_loss: number;
cls_loss: number;
dfl_loss: number;
fitness: number;
epoch_time: number;
left_second: number;
}
interface StoreState {
trainingDataByProject: { [projectId: string]: TrainingData[] };
addTrainingData: (projectId: string, data: TrainingData) => void;
resetTrainingData: (projectId: string) => void;
}
const useTrainStore = create<StoreState>((set) => ({
trainingDataByProject: {},
addTrainingData: (projectId: string, data: TrainingData) =>
set((state) => ({
trainingDataByProject: {
...state.trainingDataByProject,
[projectId]: [...(state.trainingDataByProject[projectId] || []), data],
},
})),
resetTrainingData: (projectId: string) =>
set((state) => ({
trainingDataByProject: {
...state.trainingDataByProject,
[projectId]: [],
},
})),
}));
export default useTrainStore;