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

MediaPipe 대화형 이미지 세그멘터 작업은 이미지에서 위치를 가져와 각 영역의 경계를 추정합니다. 해당 위치에 객체를 저장하고, 객체의 세분화를 이미지로 반환합니다. 데이터를 수집하는 데 사용됩니다 이 안내에서는 노드 및 웹용 대화형 이미지 세분화 도구를 사용하는 방법을 보여줍니다. 있습니다. 기능, 모델, 구성에 대한 자세한 내용은 개요를 참조하세요.

코드 예

대화형 이미지 세그먼트 도구의 예제 코드는 이 자바스크립트 작업을 참조하세요. 이 코드는 이 작업을 테스트하고 자체 대화형 이미지 세분화 앱을 만들어 보세요. 다음과 같은 작업을 할 수 있습니다. 대화형 이미지 세분화 도구 보기, 실행 및 수정 예시 코드 할 수 있습니다. 다음 위치에서 이 예시의 코드를 검토할 수도 있습니다. GitHub

설정

이 섹션에서는 개발 환경을 설정하는 주요 단계를 설명하고 대화형 이미지 세그먼테이터를 사용하는 방법에 대해 이야기해 보겠습니다 일반적인 정보 다음과 같은 MediaPipe 작업을 사용하기 위한 개발 환경 설정 자세한 내용은 웹 설정 가이드

JavaScript 패키지

양방향 이미지 세그먼터 코드는 MediaPipe @mediapipe/tasks-vision를 통해 제공됩니다. NPM 패키지 다음과 같은 작업을 할 수 있습니다. 플랫폼에 제공된 링크에서 이러한 라이브러리를 찾아 다운로드 설정 가이드

<ph type="x-smartling-placeholder">

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

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 대화형 이미지 세분화 작업에는 이 기능과 호환되는 학습된 모델이 필요합니다. 태스크에 맞추는 것입니다. 대화형 이미지 세분화 도구에 사용할 수 있는 학습된 모델에 대한 자세한 내용은 다음을 참조하세요. 작업 개요의 모델 섹션을 확인합니다.

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

<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);
드림