Создайте собственное веб-приложение для обнаружения объектов с помощью 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 перейдите к этому CodePen . Вы используете этот код в качестве отправной точки для создания собственного детектора объектов.
2. В нижней части CodePen в меню навигации нажмите «Развилка» , чтобы создать копию стартового кода.

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

Обзор стартового приложения

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

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

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

// Import the required package.

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

3. Импортируйте пакет задач-видения MediaPipe и добавьте необходимые переменные.

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

// 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 DevTools, а затем проверьте панель консоли на наличие ошибок или просмотрите предыдущие шаги, чтобы убедиться, что вы ничего не пропустили.

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 DevTools, а затем проверьте панель консоли на наличие ошибок или просмотрите предыдущие шаги, чтобы убедиться, что вы ничего не пропустили.

7. Поздравления

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

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

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