Создайте умную веб-камеру на JavaScript с помощью предварительно обученной модели машинного обучения TensorFlow.js.

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

Машинное обучение — это сейчас очень популярное слово. Кажется, его применение безгранично, и в ближайшем будущем оно, похоже, затронет практически все отрасли. Если вы работаете инженером или дизайнером, занимаетесь фронтендом или бэкендом, и знакомы с JavaScript, этот практический курс поможет вам начать осваивать машинное обучение.

Предварительные требования

Данный практический урок предназначен для опытных инженеров, уже знакомых с JavaScript.

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

В этом практическом занятии вы...

• Создайте веб-страницу, которая использует машинное обучение непосредственно в веб-браузере с помощью TensorFlow.js для классификации и обнаружения распространенных объектов (да, включая несколько объектов одновременно) из потока веб-камеры в реальном времени.
• Расширьте возможности своей обычной веб-камеры, чтобы она могла распознавать объекты и получать координаты ограничивающего прямоугольника для каждого обнаруженного объекта.
• Выделите найденный объект в видеопотоке, как показано ниже:

Представьте, что вы можете определить, находится ли человек в кадре, и подсчитать, сколько людей присутствовало в любой момент времени, чтобы оценить загруженность определенного места в течение дня, или отправить себе оповещение, если ваша собака обнаружена в комнате вашего дома, пока вас нет, и, возможно, ей не следует там находиться. Если бы вы могли это сделать, вы были бы на верном пути к созданию собственной версии камеры Google Nest , которая могла бы оповещать вас об обнаружении злоумышленника (любого типа), используя собственное модифицированное оборудование! Довольно круто. Сложно ли это сделать? Нет. Давайте начнем взламывать...

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

• Как загрузить предварительно обученную модель TensorFlow.js.
• Как получить данные с веб-камеры в режиме реального времени и отобразить их на холсте.
• Как классифицировать кадр изображения, чтобы найти ограничивающие рамки любого объекта (объектов), который модель была обучена распознавать.
• Как использовать данные, передаваемые из модели, для выделения найденных объектов.

Данный практический урок посвящен началу работы с предварительно обученными моделями TensorFlow.js. Концепции и блоки кода, не имеющие отношения к TensorFlow.js и машинному обучению, не объясняются и предоставляются для простого копирования и вставки.

2. Что такое TensorFlow.js?

TensorFlow.js — это библиотека машинного обучения с открытым исходным кодом , которая может работать везде, где работает JavaScript. Она основана на оригинальной библиотеке TensorFlow, написанной на Python , и стремится воссоздать этот опыт разработки и набор API для экосистемы JavaScript.

Где его можно использовать?

Благодаря переносимости JavaScript, теперь вы можете писать код на одном языке и с легкостью выполнять машинное обучение на всех следующих платформах:

• Клиентская часть в веб-браузере с использованием чистого JavaScript.
• Node.js используется на стороне сервера и даже для устройств IoT, таких как Raspberry Pi.
• Настольные приложения, использующие Electron
• Нативные мобильные приложения, созданные с использованием React Native.

TensorFlow.js также поддерживает несколько бэкендов в каждой из этих сред (фактические аппаратные среды, в которых он может выполняться, например, ЦП или WebGL. В данном контексте «бэкенд» не означает серверную среду — бэкенд для выполнения может быть клиентской стороной, например, в WebGL), чтобы обеспечить совместимость и высокую скорость работы. В настоящее время TensorFlow.js поддерживает:

• Выполнение WebGL на графическом процессоре устройства (GPU) — это самый быстрый способ выполнения больших моделей (размером более 3 МБ) с ускорением GPU.
• Выполнение Web Assembly (WASM) на ЦП — для повышения производительности ЦП на устройствах, включая, например, мобильные телефоны старого поколения. Это лучше подходит для небольших моделей (размером менее 3 МБ), которые на самом деле могут работать на ЦП быстрее с WASM, чем с WebGL, из-за накладных расходов на загрузку контента в графический процессор.
• Выполнение на ЦП — это резервный вариант на случай, если ни одна из других сред недоступна. Это самый медленный из трех вариантов, но он всегда доступен.

Примечание: Вы можете принудительно выбрать один из этих бэкэндов, если знаете, на каком устройстве будете выполнять программу, или же можете просто позволить TensorFlow.js выбрать его за вас, если не укажете это.

Сверхспособности на стороне клиента

Запуск TensorFlow.js в веб-браузере на клиентском компьютере может привести к ряду преимуществ, которые стоит учитывать.

Конфиденциальность

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

Скорость

Поскольку вам не нужно отправлять данные на удаленный сервер, процесс классификации данных может быть быстрее. Более того, у вас есть прямой доступ к датчикам устройства, таким как камера, микрофон, GPS, акселерометр и другие, если пользователь предоставит вам такой доступ.

Охват и масштаб

Одним щелчком мыши любой человек в мире может перейти по отправленной вами ссылке, открыть веб-страницу в своем браузере и использовать созданный вами функционал. Нет необходимости в сложной серверной настройке Linux с драйверами CUDA и многим другим, чтобы просто использовать систему машинного обучения.

Расходы

Отсутствие серверов означает, что вам нужно платить только за CDN для размещения ваших HTML, CSS, JS и файлов моделей. Стоимость CDN намного ниже, чем содержание сервера (возможно, с подключенной видеокартой), работающего круглосуточно.

Функции на стороне сервера

Использование реализации TensorFlow.js в Node.js позволяет реализовать следующие возможности.

Полная поддержка CUDA

На стороне сервера для ускорения работы с видеокартой необходимо установить драйверы NVIDIA CUDA , чтобы TensorFlow мог работать с видеокартой (в отличие от браузера, который использует WebGL — установка не требуется). Однако полная поддержка CUDA позволяет в полной мере использовать возможности видеокарты на более низком уровне, что приводит к ускорению обучения и вывода результатов. Производительность сопоставима с реализацией TensorFlow на Python, поскольку обе используют один и тот же бэкенд на C++.

Размер модели

Для передовых моделей, полученных в результате исследований, вы можете работать с очень большими моделями, размером, возможно, в гигабайты. В настоящее время такие модели нельзя запускать в веб-браузере из-за ограничений на использование памяти на вкладку браузера. Для запуска таких больших моделей вы можете использовать Node.js на собственном сервере с необходимыми аппаратными характеристиками для эффективного запуска подобных моделей.

Интернет вещей

Node.js поддерживается на популярных одноплатных компьютерах, таких как Raspberry Pi , что, в свою очередь, означает, что вы можете запускать модели TensorFlow.js и на таких устройствах.

Скорость

Node.js написан на JavaScript, что означает, что он выигрывает от компиляции «на лету». Это значит, что вы часто можете наблюдать повышение производительности при использовании Node.js, поскольку он будет оптимизирован во время выполнения, особенно для любой предварительной обработки, которую вы можете выполнять. Отличный пример этого можно увидеть в этом тематическом исследовании , которое показывает, как Hugging Face использовала Node.js для получения двукратного повышения производительности своей модели обработки естественного языка.

Теперь, когда вы понимаете основы TensorFlow.js, где он может работать и некоторые из его преимуществ, давайте начнем делать с ним полезные вещи!

3. Предварительно обученные модели

TensorFlow.js предоставляет множество предварительно обученных моделей машинного обучения (ML). Эти модели были обучены командой TensorFlow.js и упакованы в простой в использовании класс, и являются отличным способом сделать первые шаги в машинном обучении. Вместо того чтобы создавать и обучать модель для решения вашей задачи, вы можете импортировать предварительно обученную модель в качестве отправной точки.

На странице TensorFlow.js Models for JavaScript вы найдете постоянно пополняющийся список простых в использовании предварительно обученных моделей. Также существуют и другие места, где можно получить преобразованные модели TensorFlow, работающие в TensorFlow.js, включая TensorFlow Hub .

Зачем мне использовать предварительно обученную модель?

Использование популярной предварительно обученной модели, подходящей для ваших задач, имеет ряд преимуществ, таких как:

1. Нет необходимости самостоятельно собирать обучающие данные. Подготовка данных в правильном формате и их маркировка для использования системой машинного обучения может быть очень трудоемким и дорогостоящим процессом.
2. Возможность быстро создавать прототипы идей с меньшими затратами и временем.
   Нет смысла «изобретать велосипед», когда предварительно обученная модель может быть достаточно хороша для решения ваших задач, позволяя вам сосредоточиться на использовании полученных от модели знаний для реализации ваших творческих идей.
3. Использование передовых исследований. Предварительно обученные модели часто основаны на популярных исследованиях, что позволяет ознакомиться с такими моделями и понять их работу в реальном мире.
4. Простота использования и обширная документация. Благодаря популярности таких моделей.
5. Возможности переноса обучения . Некоторые предварительно обученные модели предлагают возможности переноса обучения, что по сути представляет собой перенос информации, полученной в одной задаче машинного обучения, на другую аналогичную задачу. Например, модель, изначально обученную распознавать кошек, может быть переобучена для распознавания собак, если ей предоставить новые обучающие данные. Это будет быстрее, поскольку вам не придется начинать с чистого листа. Модель сможет использовать уже полученные знания для распознавания кошек, чтобы затем распознать новый объект — у собак тоже есть глаза и уши, так что если она уже знает, как находить эти признаки, мы уже на полпути к цели. Переобучите модель на собственных данных гораздо быстрее.

Что такое COCO-SSD?

COCO-SSD — это название предварительно обученной модели машинного обучения для обнаружения объектов, которую вы будете использовать в этом практическом занятии. Ее цель — локализация и идентификация нескольких объектов на одном изображении. Другими словами, она может сообщить вам ограничивающую рамку объектов, которые она обучена находить, чтобы определить местоположение этого объекта на любом представленном ей изображении. Пример показан на изображении ниже:

Если на изображении выше изображено более одной собаки, вам будут предоставлены координаты двух ограничивающих рамок, описывающих местоположение каждой из них. COCO-SSD предварительно обучена распознавать 90 распространенных повседневных объектов , таких как человек, автомобиль, кошка и т. д.

Откуда взялось это название?

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

• COCO: Это означает, что модель была обучена на наборе данных COCO (Common Objects in Context) , который свободно доступен для скачивания и использования любым желающим при обучении собственных моделей. Набор данных содержит более 200 000 размеченных изображений, которые можно использовать для обучения.
• SSD (Single Shot MultiBox Detection): обозначает часть архитектуры модели, использованную при её реализации. Для выполнения этого задания вам не обязательно понимать это, но если вам интересно, вы можете узнать больше о SSD здесь .

4. Подготовка к работе

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

• Современный веб-браузер.
• Базовые знания HTML, CSS, JavaScript и инструментов разработчика Chrome (просмотр вывода в консоль).

Давайте начнём программировать!

Для начала работы были созданы шаблоны от Glitch.com или Codepen.io . Вы можете просто клонировать любой из этих шаблонов в качестве базового состояния для этой практической работы всего одним щелчком мыши.

На Glitch нажмите кнопку «Remix this» , чтобы создать форк и новый набор файлов для редактирования.

В качестве альтернативы, на Codepen нажмите кнопку «Fork» в правом нижнем углу экрана.

Этот очень простой шаблон предоставляет вам следующие файлы:

• HTML-страница (index.html)
• Таблица стилей (style.css)
• Файл для написания нашего JavaScript-кода (script.js)

Для вашего удобства в HTML-файл добавлен импорт библиотеки TensorFlow.js. Он выглядит следующим образом:

index.html

<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>

Альтернативный вариант: используйте предпочитаемый вами веб-редактор или работайте локально.

Если вы хотите загрузить код и работать локально или в другом онлайн-редакторе, просто создайте 3 файла, указанных выше, в той же директории и скопируйте и вставьте код из нашего шаблона Glitch в каждый из них.

Внимание: если вы запускаете программу локально, а не на другом сайте, таком как Codepen.io или аналогичном, убедитесь, что файлы предоставляются веб-сервером, а не просто открываются двойным щелчком по index.html с использованием протокола file://.

5. Заполните HTML-шаблон.

Для всех прототипов требуется базовая HTML-структура. Вы будете использовать её для отображения результатов работы модели машинного обучения позже. Давайте настроим её сейчас:

• Заголовок страницы
• Некоторый описательный текст
• Кнопка для включения веб-камеры
• Видеотег для рендеринга видеопотока с веб-камеры.

Для настройки этих функций откройте файл index.html и вставьте вместо существующего кода следующее:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Multiple object detection using pre trained model in TensorFlow.js</title>
    <meta charset="utf-8">
    <!-- Import the webpage's stylesheet -->
    <link rel="stylesheet" href="style.css">
  </head>  
  <body>
    <h1>Multiple object detection using pre trained model in TensorFlow.js</h1>

    <p>Wait for the model to load before clicking the button to enable the webcam - at which point it will become visible to use.</p>
    
    <section id="demos" class="invisible">

      <p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
      
      <div id="liveView" class="camView">
        <button id="webcamButton">Enable Webcam</button>
        <video id="webcam" autoplay muted width="640" height="480"></video>
      </div>
    </section>

    <!-- Import TensorFlow.js library -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
    <!-- Load the coco-ssd model to use to recognize things in images -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
    
    <!-- Import the page's JavaScript to do some stuff -->
    <script src="script.js" defer></script>
  </body>
</html>

Разберитесь в коде.

Обратите внимание на некоторые ключевые моменты, которые вы добавили:

• Вы добавили тег <h1> и несколько тегов <p> для заголовка, а также некоторую информацию о том, как использовать страницу. Ничего особенного здесь нет.

Вы также добавили тег раздела, представляющий ваше демонстрационное пространство:

index.html

    <section id="demos" class="invisible">

      <p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
      
      <div id="liveView" class="webcam">
        <button id="webcamButton">Enable Webcam</button>
        <video id="webcam" autoplay width="640" height="480"></video>
      </div>
    </section>

• Изначально этому section следует присвоить класс «invisible». Это позволит визуально показать пользователю, когда модель готова и можно безопасно нажать кнопку включения веб-камеры .
• Вы добавили кнопку включения веб-камеры , которую нужно будет стилизовать в CSS.
• Вы также добавили тег video, на который будете передавать видеопоток с веб-камеры. Вскоре вы настроите это в своем JavaScript-коде.

Если вы сейчас просмотрите результат, он должен выглядеть примерно так:

Совет: Вы можете предварительно просмотреть свою работу на Glitch.com, нажав на выпадающее меню «Показать» в левом верхнем углу экрана и выбрав пункт рядом с кодом .

6. Добавьте стиля

Настройки элементов по умолчанию

Для начала добавим стили к только что добавленным HTML-элементам, чтобы обеспечить их корректное отображение:

style.css

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
  color: #3D3D3D;
}

h1 {
  font-style: italic;
  color: #FF6F00;
}

video {
  display: block;
}

section {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}

Далее добавим несколько полезных CSS-классов, которые помогут управлять различными состояниями пользовательского интерфейса, например, когда мы хотим скрыть кнопку или сделать демонстрационную область недоступной, если модель еще не готова.

style.css

.removed {
  display: none;
}

.invisible {
  opacity: 0.2;
}

.camView {
  position: relative;
  float: left;
  width: calc(100% - 20px);
  margin: 10px;
  cursor: pointer;
}

.camView p {
  position: absolute;
  padding: 5px;
  background-color: rgba(255, 111, 0, 0.85);
  color: #FFF;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  z-index: 2;
  font-size: 12px;
}

.highlighter {
  background: rgba(0, 255, 0, 0.25);
  border: 1px dashed #fff;
  z-index: 1;
  position: absolute;
}

Отлично! Это всё, что вам нужно. Если вы успешно перезаписали свои стили с помощью двух приведенных выше фрагментов кода, то предварительный просмотр должен выглядеть примерно так:

Обратите внимание, что текст в демонстрационной области и кнопка недоступны, поскольку HTML-код по умолчанию имеет класс «invisible». Вы будете использовать JavaScript для удаления этого класса, когда модель будет готова к использованию.

7. Создайте шаблон JavaScript.

Совет: Приведённый ниже код отображается по порядку, но разбит на более мелкие части для более подробного объяснения. Если вы будете копировать и вставлять каждый сегмент в конец файла JavaScript или заменять определённую пустую функцию из предыдущего шага, как рекомендовано, всё должно работать отлично :-)

Ссылки на ключевые элементы DOM

Во-первых, убедитесь, что у вас есть доступ к ключевым частям страницы, которые вам понадобятся для дальнейшей обработки или доступа в нашем коде:

скрипт.js

const video = document.getElementById('webcam');
const liveView = document.getElementById('liveView');
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');

Проверьте наличие поддержки веб-камеры.

Теперь вы можете добавить вспомогательные функции, чтобы проверить, поддерживает ли используемый вами браузер доступ к потоку с веб-камеры через getUserMedia :

скрипт.js

// Check if webcam access is supported.
function getUserMediaSupported() {
  return !!(navigator.mediaDevices &&
    navigator.mediaDevices.getUserMedia);
}

// If webcam supported, add event listener to button for when user
// wants to activate it to call enableCam function which we will 
// define in the next step.
if (getUserMediaSupported()) {
  enableWebcamButton.addEventListener('click', enableCam);
} else {
  console.warn('getUserMedia() is not supported by your browser');
}

// Placeholder function for next step. Paste over this in the next step.
function enableCam(event) {
}

Получение видеопотока с веб-камеры

Далее заполните код для ранее пустой функции enableCam которую мы определили выше, скопировав и вставив приведенный ниже код:

Внимание: обязательно скопируйте приведенный ниже код и вставьте его в функцию enableCam , определенную на предыдущем шаге, а не просто добавьте в конец файла.

скрипт.js

// Enable the live webcam view and start classification.
function enableCam(event) {
  // Only continue if the COCO-SSD has finished loading.
  if (!model) {
    return;
  }
  
  // Hide the button once clicked.
  event.target.classList.add('removed');  
  
  // getUsermedia parameters to force video but not audio.
  const constraints = {
    video: true
  };

  // Activate the webcam stream.
  navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
    video.srcObject = stream;
    video.addEventListener('loadeddata', predictWebcam);
  });
}

Наконец, добавьте временный код, чтобы проверить, работает ли веб-камера.

Приведённый ниже код будет имитировать загрузку вашей модели и активирует кнопку камеры, чтобы вы могли на неё нажать. На следующем шаге вы замените весь этот код, поэтому будьте готовы удалить его через мгновение:

скрипт.js

// Placeholder function for next step.
function predictWebcam() {
}

// Pretend model has loaded so we can try out the webcam code.
var model = true;
demosSection.classList.remove('invisible');

Попробуйте! На данном этапе, если вы запустите текущий код и нажмете кнопку, как только она станет доступна, вы должны увидеть изображение с веб-камеры в режиме реального времени после того, как вы примете разрешение на доступ к веб-камере в веб-браузере (обычно это всплывающее окно появляется в верхнем левом углу браузера).

Отлично! Если вы запустите код и нажмете кнопку в текущем виде, вы должны увидеть что-то подобное:

8. Использование моделей машинного обучения

Загрузка модели

Теперь вы готовы загрузить модель COCO-SSD.

После завершения инициализации активируйте демонстрационную область и кнопку на вашей веб-странице (вставьте этот код вместо временного кода, добавленного в конце предыдущего шага):

скрипт.js

// Store the resulting model in the global scope of our app.
var model = undefined;

// Before we can use COCO-SSD class we must wait for it to finish
// loading. Machine Learning models can be large and take a moment 
// to get everything needed to run.
// Note: cocoSsd is an external object loaded from our index.html
// script tag import so ignore any warning in Glitch.
cocoSsd.load().then(function (loadedModel) {
  model = loadedModel;
  // Show demo section now model is ready to use.
  demosSection.classList.remove('invisible');
});

После добавления приведенного выше кода и обновления страницы в режиме реального времени вы заметите, что через несколько секунд после загрузки страницы (в зависимости от скорости вашего интернет-соединения) автоматически появляется кнопка включения веб-камеры, когда модель готова к использованию. Однако вы также добавили функцию predictWebcam . Поэтому сейчас самое время полностью определить её, поскольку наш код в данный момент ничего делать не будет.

Переходим к следующему шагу!

Классификация кадра с веб-камеры

Запустите приведенный ниже код, чтобы приложение могло непрерывно получать кадр из видеопотока с веб-камеры, когда браузер будет готов, и передавать его модели для классификации.

Затем модель проанализирует результаты и отобразит тег <p> в полученных координатах, а также установит текст в соответствии с меткой объекта, если уровень достоверности превышает определенный порог.

скрипт.js

var children = [];

function predictWebcam() {
  // Now let's start classifying a frame in the stream.
  model.detect(video).then(function (predictions) {
    // Remove any highlighting we did previous frame.
    for (let i = 0; i < children.length; i++) {
      liveView.removeChild(children[i]);
    }
    children.splice(0);
    
    // Now lets loop through predictions and draw them to the live view if
    // they have a high confidence score.
    for (let n = 0; n < predictions.length; n++) {
      // If we are over 66% sure we are sure we classified it right, draw it!
      if (predictions[n].score > 0.66) {
        const p = document.createElement('p');
        p.innerText = predictions[n].class  + ' - with ' 
            + Math.round(parseFloat(predictions[n].score) * 100) 
            + '% confidence.';
        p.style = 'margin-left: ' + predictions[n].bbox[0] + 'px; margin-top: '
            + (predictions[n].bbox[1] - 10) + 'px; width: ' 
            + (predictions[n].bbox[2] - 10) + 'px; top: 0; left: 0;';

        const highlighter = document.createElement('div');
        highlighter.setAttribute('class', 'highlighter');
        highlighter.style = 'left: ' + predictions[n].bbox[0] + 'px; top: '
            + predictions[n].bbox[1] + 'px; width: ' 
            + predictions[n].bbox[2] + 'px; height: '
            + predictions[n].bbox[3] + 'px;';

        liveView.appendChild(highlighter);
        liveView.appendChild(p);
        children.push(highlighter);
        children.push(p);
      }
    }
    
    // Call this function again to keep predicting when the browser is ready.
    window.requestAnimationFrame(predictWebcam);
  });
}

В этом новом коде действительно важным является вызов функции `model.detect()` .

Все готовые модели для TensorFlow.js имеют функцию, подобную этой (название которой может меняться от модели к модели, поэтому уточняйте подробности в документации), которая фактически выполняет вывод машинного обучения.

Вывод — это просто процесс обработки входных данных моделью машинного обучения (по сути, это множество математических операций) с последующим предоставлением результатов. В готовых моделях TensorFlow.js мы возвращаем наши прогнозы в виде объектов JSON, поэтому их легко использовать.

Полную информацию о функции predict вы найдете в нашей документации на GitHub для модели COCO-SSD здесь. Эта функция выполняет большую часть работы за кулисами: она может принимать в качестве параметра любой объект, похожий на изображение, например, изображение, видео, холст и так далее. Использование готовых моделей может сэкономить вам много времени и усилий, поскольку вам не нужно будет писать этот код самостоятельно, и вы сможете работать с ним «из коробки».

После выполнения этого кода вы получите изображение, которое будет выглядеть примерно так:

И наконец, вот пример кода, который обнаруживает несколько объектов одновременно:

Ура! Теперь вы можете представить, как просто было бы взять что-то подобное и создать устройство, похожее на Nest Cam, используя старый телефон, чтобы получать оповещения, когда оно увидит вашу собаку или кошку на диване. Если у вас возникли проблемы с кодом, проверьте мою окончательную рабочую версию здесь, чтобы убедиться, что вы ничего не скопировали неправильно.

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

Поздравляем, вы сделали первые шаги в использовании TensorFlow.js и машинного обучения в веб-браузере! Теперь ваша задача — превратить эти скромные начинания в нечто креативное. Что же вы создадите?

Краткий обзор

В этом практическом занятии мы:

• Узнал о преимуществах использования TensorFlow.js по сравнению с другими версиями TensorFlow.
• Освоили ситуации, в которых может потребоваться начать с предварительно обученной модели машинного обучения.
• Создана полностью рабочая веб-страница, которая может классифицировать объекты в режиме реального времени с помощью веб-камеры, включая:
• Создание HTML-скелета для контента
• Определение стилей для HTML-элементов и классов.
• Настройка JavaScript-кода для взаимодействия с HTML и определения наличия веб-камеры.
• Загрузка предварительно обученной модели TensorFlow.js
• Используя загруженную модель, можно выполнить непрерывную классификацию потока с веб-камеры и обвести объекты на изображении ограничивающей рамкой.

Следующие шаги

Поделитесь с нами своими творениями! Вы легко сможете применить результаты этого практического занятия и в других творческих целях. Мы призываем вас мыслить нестандартно и продолжать экспериментировать после завершения работы.

• Изучите все объекты, которые может распознать эта модель, и подумайте, как вы могли бы использовать эти знания для выполнения какого-либо действия. Какие креативные идеи теперь можно реализовать, расширив возможности того, что вы создали сегодня?

(Возможно, вы могли бы добавить простой серверный слой для отправки уведомления на другое устройство, когда оно увидит определенный объект по вашему выбору, используя веб-сокеты . Это был бы отличный способ дать вторую жизнь старому смартфону и использовать его по-новому. Возможности безграничны!)

• Отмечайте нас в социальных сетях, используя хэштег #MadeWithTFJS , чтобы получить шанс на публикацию вашего проекта в нашем блоге TensorFlow или даже на его демонстрации на будущих мероприятиях TensorFlow.

Больше практических заданий по TensorFlow.js для более глубокого изучения темы.

• Напишите нейронную сеть с нуля на TensorFlow.js
• Распознавание звука с использованием трансферного обучения в TensorFlow.js
• Пользовательская классификация изображений с использованием трансферного обучения в TensorFlow.js

Сайты, которые стоит посмотреть

• Официальный сайт TensorFlow.js
• готовые модели TensorFlow.js
• API TensorFlow.js
• Демонстрации TensorFlow.js