웹용 이미지 분류 가이드

MediaPipe 이미지 분류기 작업을 사용하면 이미지에 대한 분류를 실행할 수 있습니다. 이 작업을 사용하여 학습 시간에 정의된 카테고리 집합 중에서 이미지가 나타내는 것을 식별할 수 있습니다. 이 안내에서는 Node 및 웹 앱용 이미지 분류기를 사용하는 방법을 보여줍니다.

데모를 보면 이 작업을 실제로 확인할 수 있습니다. 이 작업의 기능, 모델, 구성 옵션에 관한 자세한 내용은 개요를 참고하세요.

코드 예

이미지 분류기의 예시 코드에서는 이 작업의 완전한 구현을 JavaScript로 제공하므로 참고할 수 있습니다. 이 코드는 이 작업을 테스트하고 자체 이미지 분류 앱을 빌드하는 데 도움이 됩니다. 웹브라우저만 사용하여 이미지 분류기 예를 보고, 실행하고, 수정할 수 있습니다.

설정

이 섹션에서는 이미지 분류기를 사용하기 위해 개발 환경과 코드 프로젝트를 설정하는 주요 단계를 설명합니다. 플랫폼 버전 요구사항을 비롯해 MediaPipe 작업을 사용하기 위한 개발 환경 설정에 관한 일반 정보는 웹 설정 가이드를 참고하세요.

JavaScript 패키지

이미지 분류기 코드는 MediaPipe @mediapipe/tasks-vision NPM 패키지를 통해 사용할 수 있습니다. 이러한 라이브러리는 플랫폼 설정 가이드에 제공된 링크에서 찾아 다운로드할 수 있습니다.

다음 명령어를 사용하여 로컬 스테이징에 필요한 패키지를 다음 코드로 설치할 수 있습니다.

npm install @mediapipe/tasks-vision

콘텐츠 전송 네트워크 (CDN) 서비스를 통해 작업 코드를 가져오려면 HTML 파일의 태그에 다음 코드를 추가합니다.

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

모델

MediaPipe 이미지 분류기 작업에는 이 작업과 호환되는 학습된 모델이 필요합니다. 이미지 분류기에 사용할 수 있는 학습된 모델에 대한 자세한 내용은 작업 개요의 모델 섹션을 참고하세요.

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

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

작업 만들기

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

아래 코드 예시에서는 createFromOptions() 함수를 사용하여 작업을 설정하는 방법을 보여줍니다. createFromOptions 함수를 사용하면 구성 옵션으로 이미지 분류기를 맞춤설정할 수 있습니다. 구성 옵션에 대한 자세한 내용은 구성 옵션을 참고하세요.

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

async function createImageClassifier {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  imageClassifier = await ImageClassifier.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_classifier/efficientnet_lite0/float32/1/efficientnet_lite0.tflite`
    },
  });
}

구성 옵션

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

옵션 이름 설명 값 범위 기본값
runningMode 작업의 실행 모드를 설정합니다. 두 가지 모드가 있습니다.

IMAGE: 단일 이미지 입력 모드입니다.

VIDEO: 카메라와 같은 입력 데이터의 동영상 또는 라이브 스트림에서 디코딩된 프레임의 모드입니다.		 {IMAGE, VIDEO} IMAGE
displayNamesLocale 사용 가능한 경우 작업 모델의 메타데이터에 제공된 표시 이름에 사용할 라벨의 언어를 설정합니다. 기본값은 영어의 경우 en입니다. TensorFlow Lite 메타데이터 작성기 API를 사용하여 맞춤 모델의 메타데이터에 현지화된 라벨을 추가할 수 있습니다. 언어 코드 en
maxResults 반환할 점수가 가장 높은 분류 결과의 선택적 최대 수를 설정합니다. 0보다 작으면 사용 가능한 결과가 모두 반환됩니다. 모든 양수 -1
scoreThreshold 모델 메타데이터에 제공된 예측 점수 기준점을 재정의합니다 (있는 경우). 이 값 미만의 결과는 거부됩니다. 모든 부동 소수점 수 설정되지 않음
categoryAllowlist 허용된 카테고리 이름의 선택적 목록을 설정합니다. 비어 있지 않은 경우 카테고리 이름이 이 세트에 없는 분류 결과가 필터링됩니다. 중복되거나 알 수 없는 카테고리 이름은 무시됩니다. 이 옵션은 categoryDenylist과 상호 배타적이며 둘 다 사용하면 오류가 발생합니다. 모든 문자열 설정되지 않음
categoryDenylist 허용되지 않는 카테고리 이름의 선택적 목록을 설정합니다. 비어 있지 않은 경우 카테고리 이름이 이 세트에 있는 분류 결과가 필터링됩니다. 중복되거나 알 수 없는 카테고리 이름은 무시됩니다. 이 옵션은 categoryAllowlist와 상호 배타적이며 둘 다 사용하면 오류가 발생합니다. 모든 문자열 설정되지 않음
resultListener 이미지 분류기가 라이브 스트림 모드에 있을 때 분류 결과를 비동기적으로 수신하도록 결과 리스너를 설정합니다. 실행 모드가 LIVE_STREAM로 설정된 경우에만 사용할 수 있습니다. 해당 사항 없음 설정되지 않음

데이터 준비

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

이미지 분류기 classify() 및 classifyForVideo() 메서드 호출은 동기적으로 실행되며 사용자 인터페이스 스레드를 차단합니다. 기기 카메라의 동영상 프레임에서 객체를 분류하면 각 분류가 기본 스레드를 차단합니다. 다른 스레드에서 classify() 및 classifyForVideo()를 실행하도록 웹 워커를 구현하여 이를 방지할 수 있습니다.

태스크 실행

이미지 분류기는 이미지 모드에서는 classify() 메서드를 사용하고 video 모드에서는 classifyForVideo() 메서드를 사용하여 추론을 트리거합니다. 이미지 분류기 API는 입력 이미지 내 객체의 가능한 카테고리를 반환합니다.

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

이미지

const image = document.getElementById("image") as HTMLImageElement;
const imageClassifierResult = imageClassifier.classify(image);

동영상

const video = document.getElementById("video");
await imageClassifier.setOptions({ runningMode: "VIDEO" });

const timestamp = performance.now();
const classificationResult = await imageClassifier.classifyForVideo(
    video,
    timestamp
  );

이미지 분류기 작업을 실행하는 더 완전한 구현은 예시를 참고하세요.

결과 처리 및 표시

추론을 실행하면 이미지 분류기 작업은 입력 이미지 또는 프레임 내 객체의 가능한 카테고리 목록이 포함된 ImageClassifierResult 객체를 반환합니다.

다음은 이 작업의 출력 데이터 예시를 보여줍니다.

ImageClassifierResult:
 Classifications #0 (single classification head):
  head index: 0
  category #0:
   category name: "/m/01bwb9"
   display name: "Passer domesticus"
   score: 0.91406
   index: 671
  category #1:
   category name: "/m/01bwbt"
   display name: "Passer montanus"
   score: 0.00391
   index: 670

이 결과는 다음에서 새 분류기를 실행하여 얻은 것입니다.

참새의 클로즈업 사진

이미지 분류기 예시 코드에서는 작업에서 반환된 분류 결과를 표시하는 방법을 보여줍니다. 자세한 내용은 예시를 참고하세요.