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

Merge branch 'fe/feat/api' into 'fe/develop'

Browse Source 
Feat: 레이블 카테고리 , 모델 api 및 쿼리 구현

See merge request s11-s-project/S11P21S002!139
This commit is contained in:
김진현 2024-09-23 16:26:57 +09:00
commit c019d7a227
14 changed files with 271 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/api/categoryApi.ts Normal file
View File

@ -0,0 +1,31 @@
import api from '@/api/axiosConfig';
import { LabelCategoryRequest, LabelCategoryResponse } from '@/types';
// 레이블 카테고리 리스트 조회
export async function getProjectCategories(projectId: number) {
return api.get<LabelCategoryResponse[]>(`/projects/${projectId}/categories`).then(({ data }) => data);
}
// 레이블 카테고리 추가
export async function addProjectCategories(projectId: number, categoryData: LabelCategoryRequest) {
return api.post(`/projects/${projectId}/categories`, categoryData).then(({ data }) => data);
}
// 레이블 카테고리 단일 조회
export async function getCategoryById(projectId: number, categoryId: number) {
return api.get<LabelCategoryResponse>(`/projects/${projectId}/categories/${categoryId}`).then(({ data }) => data);
}
// 레이블 카테고리 삭제
export async function deleteCategory(projectId: number, categoryId: number) {
return api.delete(`/projects/${projectId}/categories/${categoryId}`).then(({ data }) => data);
}
// 레이블 카테고리 존재 여부 조회
export async function checkCategoryExists(projectId: number, categoryName: string) {
return api
.get<boolean>(`/projects/${projectId}/categories/exist`, {
params: { categoryName },
})
.then(({ data }) => data);
}

22
frontend/src/api/modelApi.ts Normal file
View File

@ -0,0 +1,22 @@
import api from '@/api/axiosConfig';
import { ModelRequest, ModelResponse, ProjectModelsResponse, ModelCategoryResponse } from '@/types';
export async function updateModelName(projectId: number, modelId: number, modelData: ModelRequest) {
return api.put<ModelResponse>(`/projects/${projectId}/models/${modelId}`, modelData).then(({ data }) => data);
}
export async function trainModel(projectId: number) {
return api.post(`/projects/${projectId}/train`).then(({ data }) => data);
}
export async function getProjectModels(projectId: number) {
return api.get<ProjectModelsResponse>(`/projects/${projectId}/models`).then(({ data }) => data);
}
export async function addProjectModel(projectId: number, modelData: ModelRequest) {
return api.post<ModelResponse>(`/projects/${projectId}/models`, modelData).then(({ data }) => data);
}
export async function getModelCategories(modelId: number) {
return api.get<ModelCategoryResponse[]>(`/models/${modelId}/categories`).then(({ data }) => data);
}

136
frontend/src/pages/ModelManage.tsx
View File

@ -1,12 +1,11 @@
import { Rabbit, Bird, Turtle, Settings, Share } from 'lucide-react';
import { Rabbit, Bird, Turtle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import ModelLineChart from '@/components/ModelLineChart';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useState, useEffect } from 'react';
import { useState } from 'react';
import ModelBarChart from '@/components/ModelBarChart';
export default function ModelManage() {
@ -27,17 +26,7 @@ export default function ModelManage() {
const [lossData] = useState<MetricData[]>(dummyLossData);
const [training, setTraining] = useState(false);
useEffect(() => {
if (training) {
const socket = new WebSocket('ws://localhost:8080/ws');
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('Received data:', data);
};
return () => socket.close();
}
}, [training]);
const [selectedModel, setSelectedModel] = useState<string | null>(null);
const handleTrainingToggle = () => {
setTraining((prev) => !prev);
@ -48,32 +37,6 @@ export default function ModelManage() {
<div className="flex flex-col">
<header className="bg-background sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b px-4">
<h1 className="text-xl font-semibold">모델 관리</h1>
<Drawer>
<DrawerTrigger asChild>
<Button
variant="ghost"
size="icon"
className="md:hidden"
>
<Settings className="size-4" />
<span className="sr-only">설정</span>
</Button>
</DrawerTrigger>
<DrawerContent className="max-h-[80vh]">
<DrawerHeader>
<DrawerTitle>설정</DrawerTitle>
</DrawerHeader>
<SettingsForm />
</DrawerContent>
</Drawer>
<Button
variant="outline"
size="sm"
className="ml-auto gap-1.5 text-sm"
>
<Share className="size-3.5" />
공유
</Button>
</header>
<main className="grid flex-1 gap-4 overflow-auto p-4">
@ -86,42 +49,61 @@ export default function ModelManage() {
<TabsTrigger value="results">모델 평가</TabsTrigger>
</TabsList>
{/* 모델 학습 탭 */}
<TabsContent value="train">
<div className="grid gap-8 md:grid-cols-2">
<div className="flex flex-col gap-6">
<SettingsForm />
<Button
variant={training ? 'destructive' : 'default'}
variant={training ? 'destructive' : 'outlinePrimary'}
size="lg"
onClick={handleTrainingToggle}
>
{training ? '학습 중단' : '학습 시작'}
</Button>
</div>
<div className="flex flex-col justify-center">
<ModelLineChart data={lossData} />
</div>
</div>
</TabsContent>
{/* 모델 평가 탭 */}
<TabsContent value="results">
<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 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>
{/* 선택된 모델에 따른 BarChart 및 Labeling Preview */}
{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>
)}
</TabsContent>
</Tabs>
</main>
@ -190,11 +172,22 @@ function SettingsForm() {
placeholder="-1"
id="batch"
/>
<SelectWithLabel
label="옵티마이저"
id="optimizer"
options={['SGD', 'Adam', 'AdamW', 'NAdam', 'RAdam', 'RMSProp']}
placeholder="옵티마이저 선택"
/>
<InputWithLabel
label="학습률(LR0)"
placeholder="0.01"
id="lr0"
/>
<InputWithLabel
label="학습률(LRF)"
placeholder="0.01"
id="lrf"
/>
</div>
</fieldset>
</form>
@ -244,3 +237,32 @@ function InputWithLabel({ label, id, placeholder }: InputWithLabelProps) {
</div>
);
}
interface SelectWithLabelProps {
label: string;
id: string;
options: string[];
placeholder: string;
}
function SelectWithLabel({ label, id, options, placeholder }: SelectWithLabelProps) {
return (
<div className="grid gap-3">
<Label htmlFor={id}>{label}</Label>
<Select>
<SelectTrigger id={id}>
<SelectValue placeholder={placeholder} />
</SelectTrigger>
<SelectContent>
{options.map((option) => (
<SelectItem
key={option}
value={option}
>
{option}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
);
}

14
frontend/src/queries/category/useAddCategoryQuery.ts Normal file
View File

@ -0,0 +1,14 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { addProjectCategories } from '@/api/categoryApi';
import { LabelCategoryRequest } from '@/types';
export default function useAddCategoryQuery(projectId: number) {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (categoryData: LabelCategoryRequest) => addProjectCategories(projectId, categoryData),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['projectCategories', projectId] });
},
});
}

9
frontend/src/queries/category/useCategoryByIdQuery.ts Normal file
View File

@ -0,0 +1,9 @@
import { getCategoryById } from '@/api/categoryApi';
import { useSuspenseQuery } from '@tanstack/react-query';
export default function useCategoryByIdQuery(projectId: number, categoryId: number) {
return useSuspenseQuery({
queryKey: ['category', projectId, categoryId],
queryFn: () => getCategoryById(projectId, categoryId),
});
}

9
frontend/src/queries/category/useCheckCategoryExistsQuery.ts Normal file
View File

@ -0,0 +1,9 @@
import { checkCategoryExists } from '@/api/categoryApi';
import { useSuspenseQuery } from '@tanstack/react-query';
export default function useCheckCategoryExistsQuery(projectId: number, categoryName: string) {
return useSuspenseQuery({
queryKey: ['categoryExists', projectId, categoryName],
queryFn: () => checkCategoryExists(projectId, categoryName),
});
}

13
frontend/src/queries/category/useDeleteCategoryQuery.ts Normal file
View File

@ -0,0 +1,13 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { deleteCategory } from '@/api/categoryApi';
export default function useDeleteCategoryQuery(projectId: number, categoryId: number) {
const queryClient = useQueryClient();
return useMutation({
mutationFn: () => deleteCategory(projectId, categoryId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['projectCategories', projectId] });
},
});
}

9
frontend/src/queries/category/useProjectCategoriesQuery.ts Normal file
View File

@ -0,0 +1,9 @@
import { getProjectCategories } from '@/api/categoryApi';
import { useSuspenseQuery } from '@tanstack/react-query';
export default function useProjectCategoriesQuery(projectId: number) {
return useSuspenseQuery({
queryKey: ['projectCategories', projectId],
queryFn: () => getProjectCategories(projectId),
});
}

14
frontend/src/queries/models/useCreateModelQuery.ts Normal file
View File

@ -0,0 +1,14 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { addProjectModel } from '@/api/modelApi';
import { ModelRequest } from '@/types';
export default function useCreateModelQuery(projectId: number) {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (modelData: ModelRequest) => addProjectModel(projectId, modelData),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['projectModels', projectId] });
},
});
}

9
frontend/src/queries/models/useModelCategoriesQuery.ts Normal file
View File

@ -0,0 +1,9 @@
import { getModelCategories } from '@/api/modelApi';
import { useSuspenseQuery } from '@tanstack/react-query';
export default function useModelCategoriesQuery(modelId: number) {
return useSuspenseQuery({
queryKey: ['modelCategories', modelId],
queryFn: () => getModelCategories(modelId),
});
}

9
frontend/src/queries/models/useProjectModelsQuery.ts Normal file
View File

@ -0,0 +1,9 @@
import { getProjectModels } from '@/api/modelApi';
import { useSuspenseQuery } from '@tanstack/react-query';
export default function useProjectModelsQuery(projectId: number) {
return useSuspenseQuery({
queryKey: ['projectModels', projectId],
queryFn: () => getProjectModels(projectId),
});
}

8
frontend/src/queries/models/useTrainModelQuery.ts Normal file
View File

@ -0,0 +1,8 @@
import { useMutation } from '@tanstack/react-query';
import { trainModel } from '@/api/modelApi';
export default function useTrainModelQuery(projectId: number) {
return useMutation({
mutationFn: () => trainModel(projectId),
});
}

14
frontend/src/queries/models/useUpdateModelNameQuery.ts Normal file
View File

@ -0,0 +1,14 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { updateModelName } from '@/api/modelApi';
import { ModelRequest } from '@/types';
export default function useUpdateModelNameQuery(projectId: number, modelId: number) {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (modelData: ModelRequest) => updateModelName(projectId, modelId, modelData),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['projectModels', projectId] });
},
});
}

31
frontend/src/types/index.ts
View File

@ -280,3 +280,34 @@ export interface ImageFolderRequest {
parentId: number;
files: File[];
}
// 모델 요청 DTO (API로 전달할 데이터 타입)
export interface ModelRequest {
name: string;
}
// 모델 응답 DTO (API로부터 받는 데이터 타입)
export interface ModelResponse {
id: number;
name: string;
}
// 모델 카테고리 응답 DTO
export interface ModelCategoryResponse {
id: number;
name: string;
}
// 프로젝트 모델 리스트 응답 DTO
export interface ProjectModelsResponse extends Array<ModelResponse> {}
// 카테고리 요청 DTO
export interface LabelCategoryRequest {
labelCategoryList: number[];
}
// 카테고리 응답 DTO
export interface LabelCategoryResponse {
id: number;
name: string;
}