웹용 이미지 분류 가이드

MediaPipe Image Classifier 작업을 사용하면 이미지를 분류할 수 있습니다. 이때 정의된 카테고리 집합 중에서 이미지가 무엇을 나타내는지 식별하기 위해 살펴보겠습니다 이 안내에서는 이미지 분류 기준을 사용하는 방법을 네 가지 옵션을 제공합니다

이 작업의 동작을 확인하려면 demo 기능, 모델, 구성 옵션에 대한 자세한 내용은 개요를 참조하세요.

코드 예

이미지 분류기의 코드 예는 다음과 같이 자바스크립트 작업을 참조하세요. 이 코드는 이 작업을 테스트하고 자체 이미지 분류 앱 빌드를 시작해 보세요. 데이터를 보고, 실행하고, 이 이미지 분류 기준 예시 코드 할 수 있습니다.

설정

이 섹션에서는 개발 환경을 설정하는 주요 단계를 설명하고 코드 프로젝트에서 Image Classifier를 사용할 수 있습니다. 일반적인 정보 다음과 같은 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.js"
    crossorigin="anonymous"></script>
</head>

모델

MediaPipe Image Classifier 작업에는 다음과 호환되는 학습된 모델이 필요합니다. 태스크에 맞추는 것입니다. Image Classifier에 사용할 수 있는 학습된 모델에 대한 자세한 내용은 다음을 참조하세요. 작업 개요의 모델 섹션을 확인합니다.

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

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

할 일 만들기

Image Classifier 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: 단일 이미지 입력 모드입니다. 동영상: 동영상의 디코딩된 프레임 모드 입력 데이터의 라이브 스트림(예: 카메라)	{`IMAGE, VIDEO`}	`IMAGE`
`displayNamesLocale`	작업 모델의 메타데이터입니다(있는 경우). 기본값은 `en`입니다. 영어입니다. 커스텀 모델의 메타데이터에 현지화된 라벨을 추가할 수 있습니다. TensorFlow Lite Metadata Writer API 사용	언어 코드	en
`maxResults`	최고 점수를 매긴 분류 결과의 최대 개수(선택사항)를 반환합니다. < 0이면 사용 가능한 모든 결과가 반환됩니다.	모든 양수	`-1`
`scoreThreshold`	제공된 값을 재정의하는 예측 점수 임곗값을 설정합니다. 모델 메타데이터 (있는 경우) 이 값 미만의 결과는 거부됩니다.	모든 부동 소수점 수	설정되지 않음
`categoryAllowlist`	허용되는 카테고리 이름의 목록(선택사항)을 설정합니다. 비어 있지 않은 경우 카테고리 이름이 이 집합에 없는 분류 결과는 표시됩니다. 중복되거나 알 수 없는 카테고리 이름은 무시됩니다. 이 옵션은 `categoryDenylist`와 상호 배타적이며 둘 다 오류가 발생합니다.	모든 문자열	설정되지 않음
`categoryDenylist`	허용되지 않는 카테고리 이름의 목록(선택사항)을 설정합니다. 만약 비어 있지 않음. 카테고리 이름이 이 세트에 포함된 분류 결과가 필터링됩니다. 있습니다. 중복되거나 알 수 없는 카테고리 이름은 무시됩니다. 이 옵션은 `categoryAllowlist`와 함께 사용할 수 없으며 두 가지를 모두 사용하면 오류가 발생합니다.	모든 문자열	설정되지 않음
`resultListener`	분류 결과를 수신하도록 결과 리스너를 설정합니다. 이미지 분류기가 라이브 스트림에 있을 때 비동기식으로 있습니다. 달리기 모드가 `LIVE_STREAM`로 설정된 경우에만 사용할 수 있습니다.	해당 사항 없음	설정되지 않음

데이터 준비

Image Classifier는 이미지 안에 있는 객체를 호스트 브라우저. 이 작업은 또한 다음을 포함한 데이터 입력 전처리를 처리합니다. 크기 조정, 회전, 값 정규화 등이 있습니다.

이미지 분류 기준 classify() 및 classifyForVideo() 메서드 호출이 실행됩니다. 비동기식으로 처리하고 사용자 인터페이스 스레드를 차단해야 합니다 객체를 분류하면 동영상 프레임을 수신하면 각 분류는 기본 프레임의 스레드가 필요합니다. 웹 작업자를 구현하여 다른 대화목록의 classify() 및 classifyForVideo()

작업 실행

이미지 분류기는 이미지 모드와 함께 classify() 메서드를 사용합니다. 트리거할 video 모드의 classifyForVideo() 메서드 제공합니다. Image Classifier 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
  );

이미지 분류기 작업 실행에 관한 더 완전한 구현은 다음을 참조하세요. 코드 예시 참조)

결과 처리 및 표시

추론을 실행하면 Image Classifier 작업은 가능한 카테고리 목록이 포함된 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

이 결과는 Bird Classifier를 실행하여 얻은 것입니다. 날짜:

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