Изучение и внедрение различных приложений на базе искусственного интеллекта с использованием библиотеки TensorFlow.js дает вам возможность делать так много удивительных вещей с помощью машинного обучения в браузере.
Это руководство является последним в моей серии, использующей TensorFlow.js для машинного обучения и реализации этих моделей в приложениях React. Здесь мы узнаем о другой библиотеке TensorFlow, которая помогает с сегментацией тела.
Сегментация тела - это задача глубокого обучения, которая сегментирует и выделяет границы между различными частями тела, такими как туловище, нижняя часть руки, плечо, бедро и голень. Модель тела-пикс, предоставляемая TensorFlow.js, может обнаруживать до 23 различных сегментов человеческого тела.
В этом уроке мы узнаем, как сегментировать части тела с помощью веб-камеры в режиме реального времени, а затем рисовать цветные маски на основе частей тела на холсте.
Идея состоит в том, чтобы создать приложение React с потоком веб-камеры, который передает видеоданные в модель body-pix TF.js, которая сегментирует части тела, позволяя нам рисовать цветные маски поверх этих частей тела.
Что мы рассмотрим в этом уроке
- Создание холста для потоковой передачи видео с веб-камеры.
- Обнаружение и сегментирование частей тела с использованием предварительно обученной модели body-pix из TensorFlow.js.
- Рисование масок цветных сегментов вокруг частей тела на холсте JavaScript в реальном времени с помощью веб-камеры.
Приступим!
Создание приложения React
Сначала мы собираемся создать новый проект приложения React. Для этого нам нужно запустить следующую команду в требуемом локальном каталоге:
npx create-react-app body-segmentation-reactПосле успешной настройки проекта мы можем запустить его, выполнив следующую команду:
npm run startПосле успешной сборки откроется окно браузера со следующим результатом:
Установка необходимых пакетов
Теперь нам нужно установить в наш проект необходимые зависимости. В нашем проекте необходимо установить следующие зависимости:
- @ tensorflow / tfjs: основной пакет TensorFlow на основе JavaScript.
- @ tensorflow-models / body-pix: Этот пакет предоставляет предварительно обученную модель TensorFlow для исправления тела для сегментирования частей тела. Этот пакет также предлагает модули для рисования цветной маски вокруг сегментированных частей тела.
- react-webcam: этот компонент библиотеки обеспечивает доступ к веб-камере в проекте React.
Мы можем использовать npm или yarn для установки зависимостей, выполнив следующие команды в нашем терминале проекта:
npm install @tensorflow/tfjs @tensorflow-models/body-pix react-webcamТеперь нам нужно импортировать все установленные зависимости в наш файл App.js, как указано в фрагменте кода ниже:
import './App.css';
import React, { useRef } from "react";
import * as tf from "@tensorflow/tfjs";
import * as bodyPix from "@tensorflow-models/body-pix";
import Webcam from "react-webcam";Настроить веб-камеру и холст
Здесь мы собираемся инициализировать веб-камеру и холст для просмотра потока с веб-камеры на веб-дисплее. Для этого мы собираемся использовать компонент Webcam, который мы установили и импортировали ранее. Во-первых, нам нужно создать ссылочные переменные для веб-камеры, а также холста с помощью хука useRef, как показано во фрагменте кода ниже:
const webcamReference = useRef(null);
const canvasReference = useRef(null);Затем нам нужно инициализировать компонент Webcam в нашем методе render. Используя это, мы можем транслировать поток веб-камеры на холсте, также передавая refs как свойства prop. Нам также нужно добавить компонент canvas чуть ниже компонента Webcam. Компонент canvas позволяет нам рисовать все, что мы хотим отобразить в потоке веб-камеры.
return (
<div className="App">
**<Webcam
ref={webcamReference}
style={{
position: "absolute",
marginLeft: "auto",
marginRight: "auto",
left: 0,
right: 0,
textAlign: "center",
zindex: 9,
width: 720,
height: 500,
}}
/>
<canvas
ref={canvasReference}
style={{
position: "absolute",
marginLeft: "auto",
marginRight: "auto",
left: 0,
right: 0,
textAlign: "center",
zindex: 9,
width: 720,
height: 500,
}}
/>
</div>
);Здесь стили, применяемые для компонентов Webcam и canvas, одинаковы, поскольку мы собираемся нарисовать цветную маску на холсте, который помещается поверх потока веб-камеры.
Следовательно, теперь мы получим поток с веб-камеры в окне браузера:
Загрузка модели body-pix
На этом этапе мы собираемся создать функцию с именем loadBodyPixModel, которая инициализирует модель body-pix с помощью метода load из модуля bodyPix. Мы загружаем модель как нейронную сеть в константу network. Общий код этой функции представлен во фрагменте ниже:
const loadBodyPixModel = async () => {
const network = await bodyPix.load();
console.log("Body-Pix model loaded.");
};Теперь, чтобы запустить эту функцию, нам нужно вызвать ее в функции основного функционального компонента:
loadBodyPixModel();
return (Обнаружение сегментов тела
Здесь мы собираемся создать функцию с именем detectBodySegments, которая будет обрабатывать сегментацию частей тела, а также рисование цветной маски. Во-первых, нам нужно проверить, работает ли веб-камера и принимает ли поток видеоданных, используя следующий код:
const detectBodySegments = async (network) => {
// Check data is available
if (
typeof webcamReference.current !== "undefined" &&
webcamReference.current !== null &&
webcamReference.current.video.readyState === 4
) {
}
{Затем нам нужно получить свойства видео вместе с размерами, используя webcamReference, который мы определили ранее:
const video = webcamReference.current.video;
const videoWidth = webcamReference.current.video.videoWidth;
const videoHeight = webcamReference.current.video.videoHeight;Затем нам нужно установить одинаковые размеры Webcam и canvas в зависимости от высоты и ширины видеопотока, используя код из следующего фрагмента:
webcamReference.current.video.width = videoWidth; webcamReference.current.video.height = videoHeight;canvasReference.current.width = videoWidth; canvasReference.current.height = videoHeight;
Теперь мы начинаем процесс сегментации, используя метод segmentPersonParts, предоставленный моделью нейронной сети network, полученной в качестве параметра. Метод segmentPersonParts принимает данные потока video в качестве параметра, как показано во фрагменте кода ниже:
const body = await network.segmentPersonParts(video);
console.log(body);Затем нам нужно вызвать эту detectBodySegments функцию внутри метода loadBodyPixModel в методе setInterval, передав модель нейронной сети network в качестве параметра. Это позволяет функции detectBodySegments запускаться каждые 100 миллисекунд. Реализация кодирования представлена ниже:
const loadBodyPixModel = async () => {
const network = await bodyPix.load();
console.log("Body-Pix model loaded.");
setInterval(() => {
detectBodySegments(network);
}, 100);
};Если мы запустим проект, данные о сегментации нашего тела с веб-камеры будут записаны в консоли браузера:
Каждый поток данных из процесса сегментации будет содержать данные о частях тела вместе с их ключевыми точками:
На приведенном выше снимке экрана мы можем видеть данные части тела вместе с координатами положения, что позволит нам нарисовать вокруг нее цветную маску.
Рисование цветной маски на холсте
Теперь, когда у нас есть данные координат сегментированных частей тела, мы можем использовать эти данные для рисования цветной маски вокруг соответствующих частей тела.
К счастью, библиотека моделей body-pix предоставляет нам метод окраски маски: toColoredPartMask. Чтобы нарисовать маску, мы можем использовать метод drawMask из модуля bodyPix, передавая конфигурации как холст, видео, инициализированные данные coloredBodyParts, значение непрозрачности, плотность размытия и свойства отражения по горизонтали. Все это показано во фрагменте кода ниже:
const body = await network.segmentPersonParts(video); console.log(body);const coloredBodyParts = bodyPix.toColoredPartMask(body); const opacityValue = 0.7; const flipHorizontal = false; const maskBlurDensity = 0; const canvas = canvasReference.current;bodyPix.drawMask( canvas, video, coloredBodyParts, opacityValue, maskBlurDensity, flipHorizontal );
А вот и полная функция:
const detectBodySegments = async (network) => { if ( typeof webcamReference.current !== "undefined" && webcamReference.current !== null && webcamReference.current.video.readyState === 4 ) { const video = webcamReference.current.video; const videoWidth = webcamReference.current.video.videoWidth; const videoHeight = webcamReference.current.video.videoHeight;webcamReference.current.video.width = videoWidth; webcamReference.current.video.height = videoHeight;canvasReference.current.width = videoWidth; canvasReference.current.height = videoHeight;const body = await network.segmentPersonParts(video); console.log(body);const coloredBodyParts = bodyPix.toColoredPartMask(body); const opacityValue = 0.7; const flipHorizontal = false; const maskBlurDensity = 0; const canvas = canvasReference.current;bodyPix.drawMask( canvas, video, coloredBodyParts, opacityValue, maskBlurDensity, flipHorizontal ); } };
Таким образом, демонстрируется окончательный результат:
Мы можем видеть формирование цветных масок вокруг сегментированных частей тела по мере движения тела.
Мы успешно реализовали сегментацию тела в реальном времени с использованием модели TensorFlow и веб-камеры в нашем проекте React.
Вывод
В этом руководстве мы узнали, как использовать модель body-pix TensorFlow.js и библиотеку веб-камеры React, чтобы сегментировать части человеческого тела и рисовать цветные маски вокруг этих сегментированных частей. Весь процесс реализации этого приложения React для сегментации тела был упрощен благодаря доступности предварительно обученной модели TensorFlow body-pix.
Я надеюсь, что вы нашли это руководство полезным и полезным. Такую сегментацию тела можно использовать в различных приложениях, связанных с модой, чтобы позволить виртуальную примерку или иным образом добавить эффекты к телу человека.
В более глубоком смысле его также можно использовать для определения положения частей тела, поскольку координаты каждой части тела собираются отдельно. Однако обратите внимание, что оценка позы человека - это устоявшаяся задача глубокого обучения компьютерного зрения, которая также делает это.
Для демонстрации всего проекта вы можете заглянуть в Codesandbox.
Примечание редактора. Heartbeat - это онлайн-публикация и сообщество, созданное авторами и посвященное предоставлению первоклассных образовательных ресурсов для специалистов по науке о данных, машинному обучению и глубокому обучению. Мы стремимся поддерживать и вдохновлять разработчиков и инженеров из всех слоев общества.
Независимо от редакции, Heartbeat спонсируется и публикуется Comet, платформой MLOps, которая позволяет специалистам по обработке данных и группам машинного обучения отслеживать, сравнивать, объяснять и оптимизировать свои эксперименты. Мы платим участникам и не продаем рекламу.
Если вы хотите внести свой вклад, отправляйтесь на наш призыв к участникам. Вы также можете подписаться на наши еженедельные информационные бюллетени (Deep Learning Weekly и Comet Newsletter), присоединиться к нам в » «Slack и подписаться на Comet в Twitter и LinkedIn для получения ресурсов, событий и гораздо больше, что поможет вам быстрее и лучше строить модели машинного обучения.
