웹용 객체 감지 가이드

MediaPipe 객체 감지기 작업을 사용하면 여러 객체의 존재와 위치를 감지할 수 있습니다. 객체의 클래스입니다 이 작업은 이미지 데이터를 가져와 감지 목록을 출력합니다. 각각 이미지에서 식별된 객체를 나타냅니다. 코드 샘플 자세한 내용은 CodePen과 같은 메서드를 사용합니다.

이 작업의 동작을 확인하려면 demo Google Cloud의 기능, 모델 및 구성 옵션에 대해서는 개요를 참조하세요.

코드 예

객체 감지기의 코드 예시는 이 객체의 온전한 구현을 제공합니다. 자바스크립트 작업을 참조하세요. 이 코드는 이 작업을 테스트하고 자체 텍스트 분류 앱을 빌드해 보겠습니다. 데이터를 보고, 실행하고, 객체 감지기 예시 코드 수정 할 수 있습니다.

설정

이 섹션에서는 개발 환경을 설정하는 주요 단계를 설명합니다. 객체 감지기를 사용해야 합니다 일반적인 정보 웹 및 자바스크립트 개발 환경 설정, 자세한 내용은 웹 설정 가이드

JavaScript 패키지

객체 감지기 코드는 MediaPipe @mediapipe/tasks-vision를 통해 제공됩니다. NPM 패키지 다음과 같은 작업을 할 수 있습니다. 플랫폼의 안내에 따라 이러한 라이브러리를 찾아 다운로드합니다. 설정 가이드

<ph type="x-smartling-placeholder">

NPM을 통해 필수 패키지를 설치할 수 있습니다. 사용하여 다음 명령어를 실행합니다.

npm install @mediapipe/tasks-vision

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

<!-- 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 객체 감지기 태스크에는 다음과 호환되는 학습된 모델이 필요합니다. 태스크에 맞추는 것입니다. 객체 감지기에 사용할 수 있는 학습된 모델에 대한 자세한 내용은 다음을 참조하세요. 모델 섹션에서 작업 개요를 확인합니다.

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

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

할 일 만들기

객체 감지기 ObjectDetector.createFrom...() 함수 중 하나를 사용하여 다음 작업을 수행합니다. 추론 실행을 위한 작업을 준비합니다. createFromModelPath() 사용 학습된 모델 파일에 대한 상대 또는 절대 경로를 사용하여 함수를 생성합니다. 모델이 이미 메모리에 로드된 경우 createFromModelBuffer() 메서드를 사용하여 지도 가장자리에 패딩을 추가할 수 있습니다. 아래 코드 예에서는 createFromOptions() 함수: 추가 구성을 설정할 수 있습니다. 있습니다. 사용 가능한 구성 옵션에 대한 자세한 내용은 다음을 참조하세요. 구성 옵션 섹션을 참조하세요.

다음 코드는 이 작업을 빌드하고 구성하는 방법을 보여줍니다.

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
  },
  scoreThreshold: 0.5,
  runningMode: runningMode
});

객체 감지기 작업을 만드는 더 완전한 구현은 다음을 참조하세요. 코드 예를 참고하세요.

구성 옵션

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

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

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

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

데이터 준비

객체 감지기는 지원되는 모든 형식의 이미지에서 객체를 감지할 수 있습니다. 호스트 브라우저. 이 작업은 또한 다음을 포함한 데이터 입력 전처리를 처리합니다. 크기 조정, 회전, 값 정규화 등이 있습니다. 동영상에서 객체를 감지하려면 는 API를 사용하여 한 번에 프레임을 빠르게 처리할 수 있습니다. 이때 프레임의 타임스탬프를 사용하면 프레임을 설정하여 동영상에서 동작이 발생하는 시점을 결정합니다.

작업 실행

객체 감지기는 단일 이미지 작업에 detect()를 사용하고 detectForVideo()는 동영상 프레임에서 객체를 감지합니다. 태스크 프로세스는 데이터를 처리하고, 객체를 인식하려고 시도한 다음 결과를 보고합니다.

detect() 및 detectForVideo() 메서드 호출이 실행됩니다. 비동기식으로 처리하고 사용자 인터페이스 스레드를 차단해야 합니다 물체를 인식할 수 있는 동영상 프레임의 경우, 각 분류에서는 기본 프레임이 스레드가 필요합니다. 탐지를 실행하도록 웹 작업자를 구현하여 이러한 현상을 방지할 수 있습니다. 다른 스레드가 필요합니다.

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

이미지

const image = document.getElementById("image") as HTMLImageElement;
const detections = objectDetector.detect(image);

동영상

await objectDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = detector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

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

객체 감지기 작업 실행에 대한 더 완전한 구현은 다음을 참조하세요. 코드 예를 참고하세요.

결과 처리 및 표시

객체 감지기는 각 감지가 실행될 때마다 감지 결과 객체를 생성합니다. 결과 객체에는 감지 목록이 포함되며, 각 감지에는 다음이 포함됩니다. 경계 상자 및 감지된 객체에 대한 카테고리 정보( 객체의 이름 및 신뢰도 점수입니다.

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

ObjectDetectorResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : dog
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : dog

다음 이미지는 작업 출력을 시각화한 것입니다.

객체 감지기 예시 코드에서는 감지를 표시하는 방법을 보여줍니다. 자세히 알아보려면 코드 예시 참조하세요.