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

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

코드 예

Interactive Image Segmenter의 샘플 코드는 참조용으로 JavaScript에서 이 태스크의 완전한 구현을 제공합니다. 이 코드는 이 태스크를 테스트하고 자체 대화형 이미지 분할 앱을 빌드하는 데 도움이 됩니다. 웹브라우저만 사용하여 Interactive Image Segmenter 샘플 을 보고, 실행하고, 수정할 수 있습니다.

설정

이 섹션에서는 Interactive Image Segmenter를 사용하기 위해 개발 환경과 코드 프로젝트를 설정하는 주요 단계를 설명합니다. 플랫폼 버전 요구사항을 비롯하여 MediaPipe 태스크를 사용하기 위한 개발 환경 설정에 관한 일반적인 내용은 웹 설정 가이드를 참고하세요.

자바스크립트 패키지

Interactive Image Segmenter 코드는 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.mjs"
    crossorigin="anonymous"></script>
</head>

모델

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

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

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

태스크 만들기

Interactive Image Segmenter createFrom...() 함수 중 하나를 사용하여 추론을 실행할 태스크를 준비합니다. 학습된 모델 파일의 상대 또는 절대 경로와 함께 createFromModelPath() 함수를 사용합니다. 모델이 이미 메모리에 로드된 경우 createFromModelBuffer() 메서드를 사용할 수 있습니다.

아래 코드 예에서는 createFromOptions() 함수를 사용하여 태스크를 설정하는 방법을 보여줍니다. createFromOptions 함수를 사용하면 구성 옵션으로 Interactive Image Segmenter를 맞춤설정할 수 있습니다. 구성 옵션에 관한 자세한 내용은 구성 옵션을 참고하세요.

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

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 메타데이터 작성기 API 를 사용하여 맞춤 모델의 메타데이터에 현지화된 라벨을 추가할 수 있습니다. 로케일 코드 en

데이터 준비

Interactive Image Segmenter는 호스트 브라우저에서 지원하는 모든 형식의 이미지에서 객체를 분할할 수 있습니다. 또한 태스크는 크기 조정, 회전, 값 정규화를 비롯한 데이터 입력 전처리를 처리합니다.

Interactive Image Segmenter segment() 및 segmentForVideo() 메서드 호출은 동기식으로 실행되며 사용자 인터페이스 스레드를 차단합니다. 기기의 카메라에서 동영상 프레임의 객체를 분할하는 경우 각 분할 태스크는 기본 스레드를 차단합니다. 웹 작업자를 구현하여 다른 스레드에서 segment() 및 segmentForVideo()를 실행하면 이를 방지할 수 있습니다.

태스크 실행

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

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

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