MediaPipe 이미지 세분화 도구를 사용하면 배경 블러와 같은 시각적 효과를 적용하기 위해 사전 정의된 카테고리에 따라 이미지를 영역으로 나눌 수 있습니다. 이 안내에서는 노드 및 웹 앱용 이미지 분할기를 사용하는 방법을 보여줍니다. 이 작업의 기능, 모델, 구성 옵션에 대한 자세한 내용은 개요를 참조하세요.
코드 예시
이미지 분할기의 예시 코드는 이 작업을 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 이미지 분할기 작업에는 이 작업과 호환되는 학습된 모델이 필요합니다. 이미지 분할기에 사용할 수 있는 학습된 모델에 대한 자세한 내용은 작업 개요 모델 섹션을 참조하세요.
모델을 선택 및 다운로드한 후 프로젝트 디렉터리에 저장합니다.
<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();
이미지 분할기 작업을 만드는 보다 완전한 구현은 코드 예를 참고하세요.
구성 옵션
이 태스크에는 웹 애플리케이션을 위한 다음과 같은 구성 옵션이 있습니다.
| 옵션 이름 | 설명 | 값 범위 | 기본값 |
|---|---|---|---|
runningMode |
작업의 실행 모드를 설정합니다. 두 가지 모드가 있습니다. IMAGE: 단일 이미지 입력 모드입니다. VIDEO: 동영상의 디코딩된 프레임 또는 입력 데이터의 라이브 스트림(예: 카메라)의 모드입니다. |
{IMAGE, VIDEO} |
IMAGE |
outputCategoryMask |
True로 설정하면 출력에 uint8 이미지로 세분화 마스크가 포함되며, 여기서 각 픽셀 값은 선정된 카테고리 값을 나타냅니다. |
{True, False} |
False |
outputConfidenceMasks |
True로 설정하면 출력에 분할 마스크가 부동 값 이미지로 포함되며, 여기서 각 부동 소수점 값은 카테고리의 신뢰도 점수 맵을 나타냅니다. |
{True, False} |
True |
displayNamesLocale |
가능한 경우 태스크 모델의 메타데이터에 제공되는 표시 이름에 사용할 라벨 언어를 설정합니다. 기본값은 영어의 경우 en입니다. TensorFlow Lite Metadata Writer API를 사용하여 커스텀 모델의 메타데이터에 현지화된 라벨을 추가할 수 있습니다.
| 언어 코드 | 한국어 |
데이터 준비
이미지 분할기를 사용하면 호스트 브라우저에서 지원하는 모든 형식으로 이미지 객체를 분할할 수 있습니다. 이 작업은 크기 조절, 회전, 값 정규화를 포함한 데이터 입력 전처리도 처리합니다.
이미지 분할기 segment() 및 segmentForVideo() 메서드 호출은 동기적으로 실행되며 사용자 인터페이스 스레드를 차단합니다. 기기의 카메라에서 동영상 프레임의 객체를 분할하면 각 세분화 작업이 기본 스레드를 차단합니다. 다른 스레드에서 segment() 및 segmentForVideo()를 실행하도록 웹 워커를 구현하여 이를 방지할 수 있습니다.
작업 실행
이미지 세분화는 이미지 모드와 함께 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] 사이의 부동 소수점 값이 포함됩니다.
원본 이미지 및 카테고리 신뢰도 마스크 출력. Pascal VOC 2012 데이터 세트의 소스 이미지
카테고리 값
다음 이미지는 카테고리 값 마스크의 작업 출력을 시각화한 것입니다. 카테고리 마스크 범위는 [0, 255]이며 각 픽셀 값은 모델 출력의 최우수 카테고리 색인을 나타냅니다. 우승한 카테고리 색인은 모델이 인식할 수 있는 카테고리 중에서 가장 높은 점수를 받습니다.
원본 이미지 및 카테고리 마스크 출력. Pascal VOC 2012 데이터 세트의 소스 이미지
이미지 세분화기 예시 코드는 태스크에서 반환된 세분화 결과를 표시하는 방법을 보여줍니다. 자세한 내용은 코드 예시를 참고하세요.