대학교 재학시절, AI에 관련된 수업을 들은 적이 있다.

거기서 처음으로 Yolo라는 모델을 사용해 이미지 학습을 진행해본 경험이 있는데, 그때 처음으로 라벨링 툴을 다뤄봤다.

요즘 AI 산업이 발달하고 있는데, 그에 따라 학습에 필요한 데이터를 전처리하는 인원의 수요도 늘어나고 있다.

그래서 로컬환경에 설치하는 프로그램이 아닌, 웹에서 라벨링할 수 있는 어플리케이션을 만들어 볼 계획이다.

View

1. 이번에는 Materail-UI를 활용해서 컴포넌트를 만들어 볼 계획이다.

제작과정

1) View

Material-UI docs를 참고해서 뷰를 만들었다.

완성된 뷰 모습

Material-UI에는 다양한 컴포넌트(버튼, 인풋박스, 심지어 그리드도 있다...)가 존재하는데, 커스터마이징을 하려니 코드가 복잡해지는 상황이 발생했다.

<컴포넌트 style={{스타일 속성}} />

위의 양식으로 코드를 작성하니 가독성이 떨어졌다. 간결하게 코드를 작성할 수 있는 방법을 찾던 도중

Matrial-ui에서 제공하는 makeStyles란 기능을 알게 되었다.

아래 코드처럼, Key, Value 형식으로 object를 만들 수 있는데 커스터마징하고 싶은 컴포넌트의 className 속성에 넣어주면 쉽게 커스터마이징이 가능하다.

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  container: {
    display: "flex",
  },
  sidebar: {
    flex: 1,
    backgroundColor: "#BEBEBE",
    padding: "15px",
    maxHeight: "100vh",
  },
  page: {
    flex: 4,
  },
  imagepage: {
    height: "100vh",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
  imageinput: {
    display: "none",
  },

  sideComponnent: {
    marginTop: "10px",
  },
}));

export default useStyles;

import useStyles from "../css/useStyles.js";

const SideBar = () => {
  const classes = useStyles();
  return (
    <div className={classes.sidebar}> // 쉽게 불러올 수 있다.
      <ImageAdd />
      <Divider />
      <LabelAdd />
    </div>
  );
};

export default SideBar;

2) Dicom 파일 state에 추가하기

filereader를 활용한 로컬 파일 가져오기

먼저 로컬환경에 존재하는 Dicom 파일들을 웹페이지로 로드해야 했다.

<input type="file" /> // type에 file을 넣어주면 간단하게 해결된다.