Создайте забавную игру в браузер с JavaScript и Tensorflow.js
TL; DR, если вы здесь только для исходного кода, вы можете скачать его из моего репозитория ниже 👇👇👇
Andypotato/Rock-Paper Scissors
Рок, бумага, ножницы, внедренная с помощью tensorflow.js и Fingerpoy
Помните Microsoft Kinect? Этот громоздкий датчик, который был когда -то Самое быстро продаваемое в мире устройство потребительской электроники а позже, как известно, пришлось быть развернутым из пакета Xbox One?
Это не получило большой любви от разработчиков игр, но Kinect на самом деле был довольно приличным кусочком оборудования. Отслеживание головы и оценка позы тела сработала очень хорошо, и это может даже обнаружить простые жесты рук, такие как «Пинк» и «Кулак». По доступной розничной цене около 99 долларов США он быстро стал фаворитом в хакер и производитель сообщества.
К сожалению, мы не видели настоящего преемника модели “Kinect 2” 2014 года, которая была прекращена в 2018 году. «Kinect Azure» 2019 года не заполняет этот разрыв по нескольким причинам:
Это намного дороже. Вы можете найти подержанный Kinect 2 за 50 долларов США, в то время как наборы для разработки Azure в настоящее время продаются по ценам к северу от 1000 долларов США.
Kinect 2-это автономное устройство, которое работает из коробки. Azure требует дополнительного графического процессора NVIDIA (RTX 2060 или лучше) для работы. Удачи в поисках одного в эти дни.
К счастью, со всеми недавними достижениями в области машинного обучения и компьютерного зрения, теперь есть несколько отличных альтернатив для добавления функций, подобных Kinect, к вашему проекту.
Представляем Tensorflow.js
Разработан Google Brain Team , TensorFlow – это популярная библиотека машинного обучения (ML) для языка программирования Python. Tensorflow.js (TFJS) является его компаньонной библиотекой для JavaScript. Цитируя официальный сайт :
Tensorflow.js – это библиотека для машинного обучения в JavaScript. Разработайте модели ML в JavaScript и используйте ML непосредственно в браузере или в Node.js.
Tensorflow.js – это не просто удивительная часть программного обеспечения, но также дает вам доступ к Растущая библиотека моделей машинного обучения , готов к использованию с вашим проектом.
В этом уроке я покажу вам, как использовать модель машинного обучения на основе TFJS для создания игры «рок, бумаги, ножницы» с управлением жестами. Финальная игра будет запущена в вашем веб -браузере, используя только HTML и JavaScript.
Давайте сделаем игру!
В центре внимания этого учебника находится часть распознавания жестов, а не столько на разработке игр. Так что чтобы ускорить ситуацию, Я уже подготовил для вас простой игровой интерфейс Анкет 👇👇
Тем не менее, чтобы получить лучшее представление об игре, которую мы строим, давайте создадим простой документ по дизайну игрового процесса.
Документ по дизайну игры
При разработке игры, как правило, лучший способ начать – это описать игровой процесс, создав документ по дизайну игры. Есть много способов сделать это, например, нарисовав историю.
Для простой игры, такой как «Рок, бумага, ножницы», мы просто устно опишем, как должна работать игра:
- Игра загрузит и покажет сообщение «Подождите» во время инициализации
- Игрок и противник показаны рядом друг с другом
- Первый раунд игры начинается с нажатия клавиши или кнопки
- Новый раунд начинается с обратного отсчета, попросив игрока подготовиться
- Игрок должен показать жест рук (рок, бумага или ножницы)
- Как только действующий жест зарегистрирован, он сравнивается с компьютерным жестом (который все еще скрыт на данный момент)
- Результат оценивается в соответствии с правилами “Rock, Paper, ножниц”
- Победитель награждается одним очком, показатель счет обновляется
- Начните следующий раунд (перейдите к пункту № 4)
С помощью пользовательского интерфейса давайте прямо добраемся до хороших вещей.
Построение распознавания жестов рук
При создании камня, бумаги, ножниц, ключевая задача состоит в том, чтобы распознать жесты с тремя руками ✊🤚✌ внутри изображения камеры.
Прежде чем мы рассмотрим фактическую реализацию вещей, давайте сначала сделаем шаг назад и подумаем о том, как будет выглядеть процесс высокого уровня для обнаружения жестов рук:
- Мы пытаемся определить жесты рук с изображения камеры. Следовательно, первый шаг – определить, на самом деле находится ли рука в изображении камеры.
- Если обнаружена рука, мы оцениваем положение всех суставов пальцев, чтобы отследить скелет рук.
Детектор скелета ручного скелета возвращает 21 ключевые моменты (также называемые «ориентирами»): четыре соединения для каждого пальца плюс запястье. Это наши необработанные данные, которые мы будем обрабатывать дальше.
Работа с ключевыми моментами
Ключевые точки представляют 2D координаты, сообщающие нам о положении каждой точки скелета на рисунке. Это не очень полезно для описания жеста рук, так как трудно сравнить два жеста для рук в зависимости от положения суставов. Рука может появиться в любом месте на картинке, ее можно повернуть, и люди могут быть левыми или правыми.
Давайте попробуем найти лучшее представление, описывая жест рук, используя естественный язык:
Возьмите жест «большие пальцы вверх» в качестве примера: его можно описать как «все четыре пальца, полностью свернутые и указывающие на левую или справа. Большой палец не должен быть свергнут и указывать вверх ».
Скручивание и направление направления – это гораздо более краткий способ описания жеста рук. Они не зависят от размера и положения руки на изображении камеры, а также оба могут быть легко выведены из 2D -координат.
Это подводит нас к следующим шагам в нашем процессе обнаружения:
- Используя ключевые точки, мы описываем сгибание и направление направления для каждого обнаруженного пальца.
- Наконец, мы сравниваем это описание с списком известных жестов рук и проверяем, какой из них является лучшим совпадением.
Отлично, мы выяснили, как обнаружить жесты рук – по крайней мере, в теории. Теперь посмотрим, как Tensorflow.js может помочь нам фактически реализовать:
Выбор подходящей модели машинного обучения
Как я упоминал во введении, Tensorflow.js дает вам доступ к Библиотека многих полезных моделей машинного обучения который вы можете сразу же использовать в своем собственном приложении.
Одна из моделей называется «Ручной встречей» предлагает «обнаружение позов ручной позы». Описание гласит:
Детектор пальм и модель отслеживания пальцев ручного скелета. Он предсказывает 21 3D -ключ -точки на обнаруженную руку.
Звучит так, как будто эта модель уже может охватывать шаги (1) и (2) нашего процесса обнаружения и извлекать необходимые данные необработанных. Потрясающий! Давайте установим:
Установите Handpose
Сначала нам нужно установить саму модель:
npm i --save @tensorflow-models/handpose
Далее мы устанавливаем его зависимости tensorflow.js:
npm i --save @tensorflow/tfjs-core npm i --save @tensorflow/tfjs-converter npm i --save @tensorflow/tfjs-backend-webgl
TensorFlow.js может использовать графический процессор вашего компьютера для дополнительной производительности. Почти любой графический процессор (NVIDIA, AMD, Intel) работает до тех пор, пока он поддерживает WebGL. Ваш, скорее всего, , Так что обязательно установите бэкэнд WebGL, чтобы получить огромный повышение скорости бесплатно.
Обработка необработанных данных
Как я упоминал ранее, необработанные данные не очень полезны для обнаружения жестов. Чтобы работать с данными, нам нужно преобразовать его в «сгибание» и «направление направления». К счастью, есть другая библиотека, которая сделает именно это:
Andypotato/Fingerpot
Классификатор позы на основе TFJS для ручных достопримечательностей, обнаруженных MediaPipe Handpose Model
(Привет 👋 Я также автор библиотеки пальца)
Установите библиотеку пальца со следующей командой:
npm i --save fingerpose
Определите жесты
Fingerpoy ожидает, что вы определите жест рук, описывая направление и скручивание для каждого пальца. Наша игра использует три отдельных ручных жеста, поэтому нам нужно создать один Жесткоплекция для каждого жеста.
Опишите жест рок ✊:
Рок жест в основном только вы делаете кулак:
- Вы сгибаете пальцы в ладонь, скручивая их под до тех пор, пока кончик каждого пальца не коснется его соответствующего основания.
- Затем вы сгибаете большой палец вниз, чтобы он падал на верхние половинки индекса и средних пальцев.
Этот код описывает жест «рок» как:
- Все пальцы полностью скручены
- Большой палец должен быть наполовину скручен или вообще не скручивается
В случае, если вы задаетесь вопросом о втором условии: физически невозможно полностью свернуть большой палец (если вы не Гудини). Кроме того, некоторые люди, когда приготовление кулака поместят большой палец рядом с указательным пальцем, эффективно растягивая его. Поэтому мы говорим, что оба являются приемлемыми и одинаково достоверными.
Затем давайте посмотрим на жест “бумаги”:
Никаких сюрпризов здесь. Чтобы сделать жест «бумаги», вы должны вытянуть все пальцы и большой палец.
Наконец, давайте посмотрим на «ножницы» ✌:
Жест «ножниц» очень похож на знак «победы». Индекс и средние пальцы вытянуты. Кольцо и мизинец должны быть наполовину или полностью закручены. Нам не волнует большой палец, поэтому мы просто опускаем его.
В случае, если вы задаетесь вопросом о направлении направления каждого пальца: в отличие от жеста «большие пальцы вверх», который имеет совершенно другое значение при переводе с ног на голову, жесты нашей игры не меняют их значение при зеркале или вращении. Следовательно, направление может быть опущено, чтобы держать описания простыми.
Сделать все это вместе
Реализация распознавания жестов рук состоит из двух частей:
- Единственная инициализация модели
- Обработайте каждый видео кадр
Давайте посмотрим на какой -то код для процесса инициализации:
Код выше сначала создаст пальцем Жестерэстиматор пример. Просто передайте список известных жестов его конструктору, и он готов к использованию.
После этого модель Handpose загрузится и инициализируется. Это может занять некоторое время, так как он также загрузит несколько файлов (веса модели) с веб -сайта tfhub.dev.
Последний шаг необязательно, но значительно улучшит пользовательский опыт. После загрузки модели я рекомендую вам «разогреть» модель, сделав одно предсказание на образце изображения. Это связано с тем, что первое предсказание может занять много времени, в то время как последующие прогнозы обычно будут намного быстрее. Если вы сделаете первую (медленную) часть прогнозирования процесса инициализации, это не замедлит ваш игровой процесс позже.
Обработка видео кадры:
Опять же, сначала посмотрим на код:
Код объяснил:
- Мы предсказываем 21 ключевой момент (достопримечательности), вызывая функцию «Оценки рук» модели Handpose, передавая видео элемент HTML в качестве первого аргумента. Второй параметр указывает, является ли исходное видео горизонтально перевернуто.
- Если были предсказаны ключевые моменты, мы передаем их, чтобы они вместе с минимальной оценкой соответствия (от 0 до 10, матч). Оценка матча сообщает Fingerpoy игнорировать возможные матчи с более низким результатом.
- В зависимости от вашего минимального балла матча, Fingerpoy может вернуть массив с несколькими возможными матчами. Этот код выберет жест с самым высоким показателем матча (уверенность).
Возвращающимся значением этого метода будет название жеста с наивысшей оценкой матчей или пустой строкой в случае, если не было обнаружено никаких жестов.
Увеличить стабильность обнаружения
Когда вы запускаете код выше на исходном видео, вы заметите, что прогнозы иногда нестабильны. В некоторых кадрах Handpose обнаружит «фантомные руки» (ложные положительные) или вообще без рук (ложный отрицательный). Это может повлиять на игровой процесс.
Одним из простых решений является создание фильтра низкого уровня, объединив обнаружения из нескольких последовательных кадров до одного результата. Например, мы могли бы подождать, пока три рамы подряд будут классифицированы как «рок» жест, прежде чем мы излучаем событие «обнаруженного рока»:
Предотвратить блокирование игры в игру
Запуск модели машинного обучения может обременить на вашем процессоре и графическом процессоре. В то время как Tensorflow.js невероятно быстр (особенно при запуске с бэкэнд WebGL), он все равно может привести к тому, что ваш пользовательский интерфейс не отвечает. Особенно, когда вы запускаете модель на каждом кадре видеопотока.
Опять же, есть простой обходной путь, чтобы предотвратить записи пользовательского интерфейса. Вы можете обернуть Предсказание Функция внутри settimeout Позвоните с тайм -аутом нуля секунды. Проверьте Этот поток на Stackoverflow Чтобы узнать больше об этом обходном пути.
Ниже приведен пример кода, как создать неблокирующую цикл обнаружения:
Завершая это
С приведенным выше кодом мы реализовали быстрый и стабильный детектор жестов. Проверьте полный исходный код, чтобы узнать, как интегрировать его в финальной игре:
Andypotato/Rock-Paper Scissors
Рок, бумага, ножницы, внедренная с помощью tensorflow.js и Fingerpoy
Это конец моего урока. Не стесняйтесь использовать мой исходный код в качестве базы для собственной игры или приложения. Если у вас есть какие -либо комментарии, вопросы или предложения, пожалуйста, начните разговор в комментариях.
Также ознакомьтесь с моим другим руководством о том, как Создайте забавную игру, используя обнаружение выражения лица Анкет
Andypotato/Do-Not-Laugh
Простая игра AI, основанная на Vue.js и Electron
Большое спасибо за чтение этого урока! Оставьте мне немного любви ❤ Если бы вам понравилось – и я хотел бы увидеть все классные вещи, которые вы придумали! ️
Оригинал: “https://dev.to/andypotato/rock-paper-scissors-with-hand-gesture-recognition-465g”