chat gpt의 등장으로 ai가 뜨면서 회사에서도 이 진보한 기술을 사용하는 프로젝트를 시작했다.
여러 업무중에 나는 이미지에서 특정 물체를 찾아서 지우는 업무와 이미지에서 텍스트를 찾아내서 지우는 추후에는 분석해서 번역하는 업무를 진행하였다.
1번 물체를 찾아서 지우는 기능은 LLAMA 모델을 기반으로 만들어진 lama-cleaner를 사용하고, 2번 텍스트를 찾아서 지우거나 교체하는 작업은 easyOCR을 이용해서 진행하였다.
일단 프론트에서 사용할수 있는 기능이어야 했기에 레이아웃 구조부터 잡으면서 시작했다.
먼저 수정할 이미지는 작업하면서 계속 확인할수 있어야했기에 가장 아래쪽에 두고, 수정된 이미지가 보여질 레이아웃을 중간에, 수정할 부분을 선택할 박스를 가장 위로 올렸다.
그럼 먼저 이미지를 페이지에 업로드를 하는 것으로 시작된다.
export const useImage = (src:string)=>{
const [isImgLoaded,setImgLoadState] =useState(false);
const image = new Image();
image.onLoad = ()=>{
setImgLoadState(true);
}
image.src = src;
return [image,isImgLoading]
}선택된 이미지를 캔버스에 그리기 위해서는 HTMLImage타입으로 만들어주어야한다. 그렇게 만들어진 Image는 canvas.drawImage() 메소드를 통해서 캔버스에 그려지게 된다.
하지만 최초 업로드된 이미지는 수정되거나 하지 않았기 때문에 canvas에 그리지 않고 Image로 가지고만 있는다. 이후 영역을 선택하여 지울 영역을 선택하게되면, 원본이미지 + 선택된 영역을 색칠하여 마스크로 이용하여 지우게 된다.