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

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

О практической работе

subjectПоследнее обновление: окт. 12, 2023
account_circleАвторы: Jen Person

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 в меню навигации нажмите «Развилка» , чтобы создать копию стартового кода.

Меню навигации в CodePen, где расположена кнопка «Вилка».

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

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

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

Предварительный просмотр веб-приложения из стартового кода

  1. Обратите внимание, что на вкладке 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 .

  1. Объявите переменные для детектора объектов и режима работы:
// 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);

Следующий фрагмент кода содержит пример выходных данных этой задачи:

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

Ограничивающая рамка над изображением собаки, показанной перед веб-камерой в реальном времени.