LiteRT 소개: 온디바이스 AI를 위한 Google의 고성능 런타임(이전 명칭: TensorFlow Lite)입니다.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

웹용 이미지 세분화 가이드

MediaPipe 이미지 세그먼트 도구 작업을 사용하면 사전 정의된 카테고리를 흐리게 처리할 수 있습니다. 이러한 안내에는 노드 및 웹 앱용 이미지 세분화 도구를 사용하는 방법이 나와 있습니다. 대상 애플리케이션의 기능, 모델, 구성 옵션에 대해 개요를 참조하세요.

코드 예

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

설정

이 섹션에서는 개발 환경을 설정하는 주요 단계를 설명하고 Image Segmenter를 사용하는 데 도움이 됩니다. 일반적인 정보 다음과 같은 MediaPipe 작업을 사용하기 위한 개발 환경 설정 자세한 내용은 웹 설정 가이드

JavaScript 패키지

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.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()

작업 실행

Image Segmenter는 segment() 메서드를 이미지 모드 및 추론을 트리거하는 video 모드의 segmentForVideo() 메서드 이 이미지 세그먼트 도구가 감지된 세그먼트를 이미지 데이터로 콜백에 반환합니다. 함수를 호출합니다.

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

이미지

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

Video

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

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

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

이미지 세그먼트 도구 실행에 대한 더 완전한 구현은 다음을 참조하세요. 코드 예를 참고하세요.

결과 처리 및 표시

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

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

카테고리 신뢰도

다음 이미지는 카테고리의 작업 출력을 시각화한 것입니다. 신뢰도 마스크. 신뢰도 마스크 출력에는 [0, 1]

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

카테고리 값

다음 이미지는 카테고리의 작업 출력을 시각화한 것입니다. 값 마스크. 카테고리 마스크 범위는 [0, 255]이며 각 픽셀 값입니다. 모델 출력의 우수 카테고리 지수를 나타냅니다. 수상 부문 모델이 인식할 수 있는 카테고리 중 가장 높은 점수를 나타냅니다.

원본 이미지 및 카테고리 마스크 출력. 출처: 파스칼 VOC 2012 데이터 세트입니다.

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