웹용 이미지 세분화 가이드

MediaPipe 이미지 세그먼터 작업을 사용하면 배경 흐리게 처리와 같은 시각적 효과를 적용하기 위해 사전 정의된 카테고리를 기반으로 이미지를 영역으로 나눌 수 있습니다. 이 안내에서는 Node 및 웹 앱에서 이미지 세그먼터 도구를 사용하는 방법을 보여줍니다. 이 태스크의 기능, 모델, 구성 옵션에 관한 자세한 내용은 개요를 참고하세요.

코드 예

이미지 세그먼트 도구의 예제 코드는 이 자바스크립트 작업을 참조하세요. 이 코드는 이 작업을 테스트하고 자체 이미지 분할 앱 빌드를 시작해 보세요. 데이터를 보고, 실행하고, 이미지 세그먼트 도구를 수정하여 예시 코드 할 수 있습니다. 다음 위치에서 이 예시의 코드를 검토할 수도 있습니다. GitHub

설정

이 섹션에서는 특히 Image Segmenter를 사용하기 위해 개발 환경 및 코드 프로젝트를 설정하는 주요 단계를 설명합니다. 일반적인 정보 다음과 같은 MediaPipe 작업을 사용하기 위한 개발 환경 설정 자세한 내용은 웹 설정 가이드

JavaScript 패키지

Image Segmenter 코드는 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 함수를 사용하면 구성 옵션으로 이미지 세그먼터기를 맞춤설정할 수 있습니다. 태스크에 대한 자세한 내용은 구성 옵션을 참고하세요.

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

runningMode = "IMAGE";

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

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

이미지 세그먼터 태스크를 만드는 더 완전한 구현은 코드 예시를 참고하세요.

구성 옵션

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

옵션 이름 설명 값 범위 기본값
outputCategoryMask True로 설정하면 출력에 세분화 마스크가 uint8 이미지로 포함되며 여기서 각 픽셀 값은 낙찰된 카테고리 값을 나타냅니다. {True, False} False
outputConfidenceMasks True로 설정하면 출력에 세분화 마스크가 부동 소수점 값 이미지로 포함되며, 여기서 각 부동 소수점 값은 카테고리의 신뢰도 점수 맵을 나타냅니다. {True, False} True
displayNamesLocale 작업 모델의 메타데이터입니다(있는 경우). 기본값은 en입니다. 영어입니다. TensorFlow Lite Metadata Writer API를 사용하여 맞춤 모델의 메타데이터에 현지화된 라벨을 추가할 수 있습니다. 언어 코드 en
resultListener 이미지 세그먼터가 LIVE_STREAM 모드일 때 세분화 결과를 비동기식으로 수신하도록 결과 리스너를 설정합니다. 달리기 모드가 LIVE_STREAM로 설정된 경우에만 사용할 수 있습니다. 해당 사항 없음 해당 사항 없음

데이터 준비

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

Image Segmenter segment() 및 segmentForVideo() 메서드 호출이 실행됩니다. 비동기식으로 처리하고 사용자 인터페이스 스레드를 차단해야 합니다 피처스토어의 객체를 분류하면 각 세그멘테이션 작업은 기본 프레임이 스레드가 필요합니다. 웹 워커를 구현하여 다른 스레드에서 segment() 및 segmentForVideo()를 실행하면 이를 방지할 수 있습니다.

작업 실행

이미지 세그먼터는 이미지 모드에서 segment() 메서드를 사용하고 video 모드에서 segmentForVideo() 메서드를 사용하여 추론을 트리거합니다. 이미지 세그먼터는 감지된 세그먼트를 작업에 대한 추론을 실행할 때 설정한 콜백 함수에 이미지 데이터로 반환합니다.

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

이미지

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

동영상

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

이미지 세그먼터 태스크 실행의 더 완전한 구현은 코드 예시를 참고하세요.

결과 처리 및 표시

추론을 실행하면 이미지 세그먼터 태스크가 세그먼트 이미지 데이터를 콜백 함수에 반환합니다. 출력 내용은 설정한 outputType에 따라 다릅니다. 태스크를 구성한 시점입니다.

다음 섹션에서는 이 작업의 출력 데이터 예시를 보여줍니다.

카테고리 신뢰도

다음 이미지는 카테고리 신뢰도 마스크의 태스크 출력 시각화를 보여줍니다. 신뢰도 마스크 출력에는 [0, 1]

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

카테고리 값

다음 이미지는 카테고리 값 마스크의 태스크 출력 시각화를 보여줍니다. 카테고리 마스크 범위는 [0, 255]이며 각 픽셀 값입니다. 모델 출력의 우수 카테고리 지수를 나타냅니다. 낙찰된 카테고리 색인은 모델이 인식할 수 있는 카테고리 중에서 가장 높은 점수를 갖습니다.

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

이미지 세분화 도구 예제 코드는 세분화를 표시하는 방법을 보여줍니다. 자세히 알아보려면 코드 예시 참조하세요.