웹용 대화형 이미지 세분화 가이드

MediaPipe Interactive Image Segmenter 태스크는 이미지의 위치를 가져와 해당 위치에서 객체의 경계를 추정하고 객체의 세분화를 이미지 데이터로 반환합니다. 이 안내에서는 노드 및 웹 앱에 대화형 이미지 세그먼터 도구를 사용하는 방법을 보여줍니다. 이 태스크의 기능, 모델, 구성 옵션에 관한 자세한 내용은 개요를 참고하세요.

코드 예

대화형 이미지 세그먼터의 코드 예는 참고용으로 JavaScript에서 이 작업을 완전히 구현한 코드를 제공합니다. 이 코드는 이 작업을 테스트하고 나만의 대화형 이미지 세분화 앱을 빌드하는 데 도움이 됩니다. 웹브라우저만 사용하여 대화형 이미지 세분화 도구 예시 코드를 보고, 실행하고, 수정할 수 있습니다. GitHub에서 이 예시의 코드를 검토할 수도 있습니다.

설정

이 섹션에서는 특히 대화형 이미지 세그먼터 사용을 위해 개발 환경 및 코드 프로젝트를 설정하는 주요 단계를 설명합니다. 플랫폼 버전 요구사항을 비롯하여 MediaPipe 태스크를 사용하기 위한 개발 환경 설정에 관한 일반적인 정보는 웹용 설정 가이드를 참고하세요.

JavaScript 패키지

대화형 이미지 세그먼터 코드는 MediaPipe @mediapipe/tasks-vision NPM 패키지를 통해 사용할 수 있습니다. 이러한 라이브러리는 플랫폼 설정 가이드에 제공된 링크에서 찾고 다운로드할 수 있습니다.

다음 명령어를 사용하여 로컬 스테이징을 위해 다음 코드로 필요한 패키지를 설치할 수 있습니다.

npm install --save @mediapipe/tasks-vision

콘텐츠 전송 네트워크 (CDN) 서비스를 통해 작업 코드를 가져오려면 HTML 파일의 태그에 다음 코드를 추가합니다.

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

모델

MediaPipe Interactive Image Segmenter 태스크에는 이 태스크와 호환되는 학습된 모델이 필요합니다. 대화형 이미지 세그먼터에 사용할 수 있는 학습된 모델에 관한 자세한 내용은 작업 개요 모델 섹션을 참고하세요.

모델을 선택하고 다운로드한 다음 프로젝트 디렉터리에 저장합니다.

<dev-project-root>/app/shared/models/

할 일 만들기

대화형 이미지 세그먼터 createFrom...() 함수 중 하나를 사용하여 추론 실행 작업을 준비합니다. 학습된 모델 파일의 상대 또는 절대 경로와 함께 createFromModelPath() 함수를 사용합니다. 모델이 이미 메모리에 로드된 경우 createFromModelBuffer() 메서드를 사용할 수 있습니다.

아래의 코드 예는 createFromOptions() 함수를 사용하여 태스크를 설정하는 방법을 보여줍니다. createFromOptions 함수를 사용하면 구성 옵션으로 대화형 이미지 세그먼터 도구를 맞춤설정할 수 있습니다. 구성 옵션에 관한 자세한 내용은 구성 옵션을 참고하세요.

다음 코드는 맞춤 옵션으로 작업을 빌드하고 구성하는 방법을 보여줍니다.

async function createSegmenter() {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

구성 옵션

이 작업에는 웹 애플리케이션의 다음과 같은 구성 옵션이 있습니다.

옵션 이름	설명	값 범위	기본값
`outputCategoryMask`	`True`로 설정하면 출력에 세분화 마스크가 uint8 이미지로 포함되며, 여기서 각 픽셀 값은 픽셀이 관심 영역에 있는 객체의 일부인지 여부를 나타냅니다.	{`True, False`}	`False`
`outputConfidenceMasks`	`True`로 설정하면 출력에 세분화 마스크가 부동 소수점 값 이미지로 포함됩니다. 여기서 각 부동 소수점 값은 픽셀이 관심 영역에 있는 객체의 일부라는 확신을 나타냅니다.	{`True, False`}	`True`
`displayNamesLocale`	가능한 경우 태스크 모델의 메타데이터에 제공된 표시 이름에 사용할 라벨의 언어를 설정합니다. 기본값은 영어의 경우 `en`입니다. TensorFlow Lite Metadata Writer API를 사용하여 맞춤 모델의 메타데이터에 현지화된 라벨을 추가할 수 있습니다.	언어 코드	en

데이터 준비

대화형 이미지 세그멘터는 호스트 브라우저에서 지원하는 모든 형식의 이미지에서 객체를 분할할 수 있습니다. 이 작업은 크기 조절, 회전, 값 정규화 등 데이터 입력 전처리도 처리합니다.

양방향 이미지 세그먼터 segment() 및 segmentForVideo() 메서드 호출은 동기식으로 실행되고 사용자 인터페이스 스레드를 차단합니다. 기기의 카메라에서 동영상 프레임의 객체를 세분화하면 각 세분화 작업이 기본 스레드를 차단합니다. 웹 워커를 구현하여 다른 스레드에서 segment() 및 segmentForVideo()를 실행하면 이를 방지할 수 있습니다.

태스크 실행

대화형 이미지 세그멘터는 segment() 메서드를 사용하여 추론을 트리거합니다. 대화형 이미지 세그먼터는 감지된 세그먼트를 이미지 데이터로 태스크의 추론을 실행할 때 설정한 콜백 함수에 반환합니다.

다음 코드는 태스크 모델로 처리를 실행하는 방법을 보여줍니다.

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);

대화형 이미지 세그먼터 작업 실행의 더 완전한 구현은 코드 예시를 참고하세요.

결과 처리 및 표시

추론을 실행하면 양방향 이미지 세그먼터 작업이 세그먼트 이미지 데이터를 콜백 함수에 반환합니다. 출력의 콘텐츠는 이미지 데이터이며 태스크를 구성할 때 설정한 내용에 따라 카테고리 마스크, 신뢰도 마스크 또는 둘 다를 포함할 수 있습니다.

다음 섹션에서는 이 태스크의 출력 데이터를 자세히 설명합니다.

카테고리 마스크

다음 이미지는 관심 장소 지점이 표시된 카테고리 값 마스크의 작업 출력 시각화를 보여줍니다. 각 픽셀은 픽셀이 관심 영역에 있는 객체의 일부인지 나타내는 uint8 값입니다. 두 번째 이미지의 흑백 원은 선택한 관심 영역을 나타냅니다.

낙엽 더미 사이에 서 있는 개 이전 이미지의 개 윤곽선

원본 이미지 및 카테고리 마스크 출력 Pascal VOC 2012 데이터 세트의 소스 이미지입니다.

신뢰도 마스크

신뢰도 마스크의 출력에는 각 이미지 입력 채널의 [0, 1] 사이의 부동 소수점 값이 포함됩니다. 값이 클수록 이미지 픽셀이 관심 영역에 있는 객체의 일부일 확률이 높습니다.

대화형 이미지 세그먼터 예시 코드는 태스크에서 반환된 분류 결과를 표시하는 방법을 보여줍니다. 자세한 내용은 코드 예시를 참고하세요.