Создайте собственное веб-приложение для обнаружения объектов с помощью MediaPipe.

1. Прежде чем начать

MediaPipe Solutions позволяет применять решения на основе машинного обучения (ML) к вашим приложениям. Он предоставляет фреймворк, позволяющий настраивать предварительно созданные конвейеры обработки, которые обеспечивают немедленный, привлекательный и полезный результат для пользователей. Вы даже можете настраивать эти решения с помощью Model Maker для обновления моделей по умолчанию.

Обнаружение объектов — одна из нескольких задач машинного зрения, предлагаемых MediaPipe Solutions. MediaPipe Tasks доступен для Android, Python и веб-приложений.

В этом практическом занятии вы добавите функцию распознавания объектов в веб-приложение для обнаружения собак на изображениях и видео с веб-камеры в режиме реального времени.

Что вы узнаете

• Как интегрировать задачу обнаружения объектов в веб-приложение с помощью MediaPipe Tasks .

Что вы построите

• Веб-приложение, которое определяет присутствие собак. Вы также можете настроить модель для обнаружения объектов выбранного вами класса с помощью MediaPipe Model Maker .

Что вам понадобится

• Аккаунт CodePen
• Устройство с веб-браузером
• Базовые знания JavaScript, CSS и HTML.

2. Настройка

В этом практическом занятии ваш код будет запущен в CodePen — социальной среде разработки, которая позволяет писать код в браузере и проверять результаты по мере сборки.

Для начала выполните следующие шаги:

1. В своем аккаунте CodePen перейдите по этой ссылке . Используйте этот код в качестве отправной точки для создания собственного детектора объектов.
2. В нижней части страницы CodePen в навигационном меню нажмите кнопку «Fork» , чтобы создать копию стартового кода.

3. На вкладке JS нажмите на Расширьте окно редактора JavaScript, затем выберите «Развернуть редактор JavaScript» . В этом практическом задании вы редактируете только код на вкладке JS , поэтому вам не нужно видеть вкладки HTML или CSS .

Ознакомьтесь с приложением для начинающих.

1. В окне предварительного просмотра обратите внимание на два изображения собак и возможность включения веб-камеры. Модель, используемая в этом руководстве, была обучена на трех собаках, изображенных на двух фотографиях.

Примечание: Если вы предпочитаете создать веб-приложение с более универсальным детектором объектов, описанным в этом руководстве, см. раздел «Модели» .

2. На вкладке JS обратите внимание на несколько комментариев, разбросанных по всему коду. Например, следующий комментарий можно найти на строке 15:

// Import the required package.

Эти комментарии указывают, куда нужно вставить фрагменты кода.

3. Импортируйте пакет mediaPipe tasks-vision и добавьте необходимые переменные.

1. На вкладке JS импортируйте пакет MediaPipe tasks-vision :

// Import the required package.
​​import { ObjectDetector, FilesetResolver, Detection } from "https://cdn.skypack.dev/@mediapipe/tasks-vision@latest";

В этом коде для импорта пакета используется сеть доставки контента (CDN) Skypack. Более подробную информацию об использовании Skypack с CodePen см. в разделе Skypack + CodePen .

В своих проектах вы можете использовать Node.js с npm, менеджером пакетов или CDN по вашему выбору. Для получения дополнительной информации о необходимых для установки пакетах см. раздел «Пакеты JavaScript» .

2. Объявите переменные для детектора объектов и режима работы:

// Create required variables.
let objectDetector = null;
let runningMode = "IMAGE";

Переменная runningMode представляет собой строку, которая принимает значение "IMAGE" при обнаружении объектов на изображениях или значение "VIDEO" при обнаружении объектов в видео.

4. Инициализация детектора объектов.

• Для инициализации детектора объектов добавьте следующий код после соответствующего комментария во вкладке JS :

// Initialize the object detector.
async function initializeObjectDetector() {
  const visionFilesetResolver = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );
  objectDetector = await ObjectDetector.createFromOptions(visionFilesetResolver, {
    baseOptions: {
      modelAssetPath: "https://storage.googleapis.com/mediapipe-assets/dogs.tflite"
    },
    scoreThreshold: 0.3,
    runningMode: runningMode
  });
}
initializeObjectDetector();

Метод FilesetResolver.forVisionTasks() указывает местоположение исполняемого файла WebAssembly (Wasm) для задачи.

Метод ObjectDetector.createFromOptions() создает экземпляр детектора объектов. Необходимо указать путь к модели, используемой для обнаружения. В данном случае модель обнаружения собак размещена в Cloud Storage .

Примечание: Если вы хотите использовать более универсальную модель обнаружения объектов, см. раздел «Модели» .

Свойство scoreThreshold установлено на значение 0.3 . Это означает, что модель возвращает результаты для любого обнаруженного объекта с уровнем достоверности 30% или выше. Вы можете настроить этот порог в соответствии с потребностями вашего приложения.

Свойство runningMode устанавливается при инициализации объекта ObjectDetector . Вы можете изменить этот и другие параметры по мере необходимости позже.

5. Выполните прогнозирование на изображениях.

• Для выполнения прогнозирования на изображениях перейдите к функции handleClick() и добавьте следующий код в тело функции:

// Verify object detector is initialized and choose the correct running mode.
if (!objectDetector) {
    alert("Object Detector still loading. Please try again");
    return;
  }

  if (runningMode === "VIDEO") {
    runningMode = "IMAGE";
    await objectDetector.setOptions({ runningMode: runningMode });
  }

Этот код определяет, инициализируется ли детектор объектов, и гарантирует установку режима работы для изображений.

Обнаружение объектов

• Для обнаружения объектов на изображениях добавьте следующий код в тело функции handleClick() :

// Run object detection.
  const detections = objectDetector.detect(event.target);

Примечание: Метод objectDetector.detect() является блокирующим, поэтому при выполнении в основном потоке он блокирует пользовательский интерфейс.

Приведённый ниже фрагмент кода содержит пример выходных данных этой задачи:

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

Обработка и отображение прогнозов

1. В конце тела функции handleClick() вызовите функцию displayImageDetections() :

// Call the displayImageDetections() function.
displayImageDetections(detections, event.target);

2. В теле функции displayImageDetections() добавьте следующий код для отображения результатов обнаружения объектов:

// Display object detection results.
  
  const ratio = resultElement.height / resultElement.naturalHeight;

  for (const detection of result.detections) {
    // Description text
    const p = document.createElement("p");
    p.setAttribute("class", "info");
    p.innerText =
      detection.categories[0].categoryName +
      " - with " +
      Math.round(parseFloat(detection.categories[0].score) * 100) +
      "% confidence.";
    // Positioned at the top-left of the bounding box.
    // Height is that of the text.
    // Width subtracts text padding in CSS so that it fits perfectly.
    p.style =
      "left: " +
      detection.boundingBox.originX * ratio +
      "px;" +
      "top: " +
      detection.boundingBox.originY * ratio +
      "px; " +
      "width: " +
      (detection.boundingBox.width * ratio - 10) +
      "px;";
    const highlighter = document.createElement("div");
    highlighter.setAttribute("class", "highlighter");
    highlighter.style =
      "left: " +
      detection.boundingBox.originX * ratio +
      "px;" +
      "top: " +
      detection.boundingBox.originY * ratio +
      "px;" +
      "width: " +
      detection.boundingBox.width * ratio +
      "px;" +
      "height: " +
      detection.boundingBox.height * ratio +
      "px;";

    resultElement.parentNode.appendChild(highlighter);
    resultElement.parentNode.appendChild(p);
  }

Эта функция отображает ограничивающие рамки поверх объектов, обнаруженных на изображениях. Она удаляет предыдущее выделение, а затем создает и отображает теги <p> для выделения каждого обнаруженного объекта.

Протестируйте приложение

При внесении изменений в код в CodePen панель предварительного просмотра автоматически обновляется после сохранения. Если автосохранение включено, ваше приложение, скорее всего, уже обновилось, но рекомендуется обновить его еще раз.

Чтобы протестировать приложение, выполните следующие шаги:

1. В окне предварительного просмотра щелкните каждое изображение, чтобы просмотреть прогнозы. В ограничивающей рамке отображается имя собаки и уровень достоверности модели.
2. Если ограничивающая рамка отсутствует, откройте инструменты разработчика Chrome и проверьте панель «Консоль» на наличие ошибок или просмотрите предыдущие шаги, чтобы убедиться, что вы ничего не упустили.

6. Выполните прогнозирование на основе видео с веб-камеры в режиме реального времени.

Обнаружение объектов

• Для обнаружения объектов в видео с веб-камеры в режиме реального времени перейдите к функции predictWebcam() и добавьте следующий код в тело функции:

// Run video object detection.
  // If image mode is initialized, create a classifier with video runningMode.
  if (runningMode === "IMAGE") {
    runningMode = "VIDEO";
    await objectDetector.setOptions({ runningMode: runningMode });
  }
  let nowInMs = performance.now();

  // Detect objects with the detectForVideo() method.
  const result = await objectDetector.detectForVideo(video, nowInMs);

  displayVideoDetections(result.detections);

Обнаружение объектов в видео использует одни и те же методы независимо от того, выполняете ли вы вывод на потоковых данных или на полном видео. Метод detectForVideo() аналогичен методу detect() используемому для фотографий, но включает дополнительный параметр для временной метки, связанной с текущим кадром. Функция выполняет обнаружение в режиме реального времени, поэтому в качестве временной метки передается текущее время.

Обработка и отображение прогнозов

• Для обработки и отображения результатов обнаружения перейдите к функции displayVideoDetections() и добавьте следующий код в тело функции:

//  Display video object detection results.
  for (let child of children) {
    liveView.removeChild(child);
  }
  children.splice(0);

  // Iterate through predictions and draw them to the live view.
  for (const detection of result.detections) {
    const p = document.createElement("p");
    p.innerText =
      detection.categories[0].categoryName +
      " - with " +
      Math.round(parseFloat(detection.categories[0].score) * 100) +
      "% confidence.";
    p.style =
      "left: " +
      (video.offsetWidth -
        detection.boundingBox.width -
        detection.boundingBox.originX) +
      "px;" +
      "top: " +
      detection.boundingBox.originY +
      "px; " +
      "width: " +
      (detection.boundingBox.width - 10) +
      "px;";

    const highlighter = document.createElement("div");
    highlighter.setAttribute("class", "highlighter");
    highlighter.style =
      "left: " +
      (video.offsetWidth -
        detection.boundingBox.width -
        detection.boundingBox.originX) +
      "px;" +
      "top: " +
      detection.boundingBox.originY +
      "px;" +
      "width: " +
      (detection.boundingBox.width - 10) +
      "px;" +
      "height: " +
      detection.boundingBox.height +
      "px;";

    liveView.appendChild(highlighter);
    liveView.appendChild(p);

    // Store drawn objects in memory so that they're queued to delete at next call.
    children.push(highlighter);
    children.push(p);
  }
}

Этот код удаляет предыдущую подсветку, а затем создает и отображает теги <p> для подсветки каждого обнаруженного объекта.

Протестируйте приложение

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

Чтобы протестировать приложение, выполните следующие шаги:

1. Загрузите одну из фотографий собаки на свой телефон.
2. В окне предварительного просмотра нажмите «Включить веб-камеру» .
3. Если ваш браузер отобразит диалоговое окно с запросом на предоставление доступа к веб-камере, предоставьте разрешение.
4. Наведите изображение собаки на телефоне на веб-камеру. В рамке отобразится имя собаки и уровень уверенности модели.
5. Если ограничивающая рамка отсутствует, откройте инструменты разработчика Chrome и проверьте панель «Консоль» на наличие ошибок или просмотрите предыдущие шаги, чтобы убедиться, что вы ничего не упустили.

7. Поздравляем!

Поздравляем! Вы создали веб-приложение, которое распознает объекты на изображениях. Чтобы узнать больше, посмотрите готовую версию приложения на CodePen .

Узнать больше

• Обнаружение объектов для веб-сайтов
• MediaPipe Studio
• MediaPipe Model Maker
• Обучите собственную модель обнаружения объектов с помощью MediaPipe Model Maker.
• Пользовательское обнаружение объектов в браузере с использованием TensorFlow.js