Руководство по обнаружению объектов для Интернета

Задача MediaPipe Object Detector позволяет определять наличие и местоположение объектов различных классов. Эта задача принимает данные изображения и выдает список результатов обнаружения, каждый из которых представляет собой объект, идентифицированный на изображении. Вы можете просмотреть, запустить и отредактировать пример Object Detector, используя только веб-браузер.

Для получения более подробной информации о возможностях, моделях и параметрах конфигурации этой задачи см. раздел «Обзор» .

Настраивать

В этом разделе описаны ключевые шаги по настройке среды разработки специально для использования Object Detector. Общую информацию о настройке среды разработки веб-приложений и JavaScript, включая требования к версиям платформы, см. в руководстве по настройке веб-приложений .

пакеты JavaScript

Код детектора объектов доступен через NPM- пакет MediaPipe @mediapipe/tasks-vision . Вы можете найти и загрузить эти библиотеки, следуя инструкциям в руководстве по настройке платформы.

Необходимые пакеты можно установить через NPM, используя следующую команду:

npm install @mediapipe/tasks-vision

Если вы хотите импортировать код задачи через службу сети доставки контента (CDN), добавьте следующий код в тег <head> вашего 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/

Создайте задачу

Используйте одну из функций ObjectDetector.createFrom...() из библиотеки ObjectDetector для подготовки задачи к выполнению выводов. Используйте функцию 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, VIDEO` }	`IMAGE`
`displayNamesLocale`	Задает язык меток, используемых для отображаемых имен, указанных в метаданных модели задачи, если таковые имеются. По умолчанию используется английский `en` ). Вы можете добавить локализованные метки в метаданные пользовательской модели, используя API TensorFlow Lite Metadata Writer.	Код локали	эн
`maxResults`	Устанавливает необязательное максимальное количество возвращаемых результатов обнаружения с наивысшим баллом.	Любые положительные числа	-1 (возвращаются все результаты)
`scoreThreshold`	Устанавливает пороговое значение прогнозируемой оценки, которое переопределяет значение, указанное в метаданных модели (если таковые имеются). Результаты ниже этого значения отклоняются.	Любой плавучий объект	Не задано
`categoryAllowlist`	Задает необязательный список разрешенных названий категорий. Если список не пуст, результаты обнаружения, названия категорий которых отсутствуют в этом наборе, будут отфильтрованы. Дублирующиеся или неизвестные названия категорий игнорируются. Этот параметр взаимоисключающий с `categoryDenylist` , и использование обоих приводит к ошибке.	Любые строки	Не задано
`categoryDenylist`	Задает необязательный список запрещенных названий категорий. Если список не пуст, результаты обнаружения, названия категорий которых присутствуют в этом наборе, будут отфильтрованы. Повторяющиеся или неизвестные названия категорий игнорируются. Этот параметр взаимоисключающий с `categoryAllowlist` , и использование обоих приводит к ошибке.	Любые строки	Не задано

Подготовка данных

Object Detector может обнаруживать объекты на изображениях любого формата, поддерживаемого браузером. Задача также обрабатывает входные данные, включая изменение размера, поворот и нормализацию значений. Для обнаружения объектов в видео можно использовать 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

На следующем изображении представлена визуализация результатов выполнения задачи:

Две собаки, выделенные ограничивающими рамками.

Пример кода детектора объектов демонстрирует, как отобразить результаты обнаружения, полученные в ходе выполнения задачи; подробности см. в примере кода .