Готовьтесь — искусственный интеллект уберёт вас из кадра.
Один программист опубликовал на Гитхабе проект — нейросеть, которая убирает людей из видео с веб-камеры в реальном времени. Мы хотим показать, что каждый может повторить это в домашних условиях. Вот как это работает в жизни:
Что нам понадобится
- Компьютер или ноутбук с веб-камерой;
- интернет;
- знание HTML и CSS;
- 10 минут свободного времени.
Как это работает
Принцип такой.
- Мы делаем HTML-страницу, где размещаем все нужные элементы.
- Ставим на страницу кнопку, которая будет включать веб-камеру.
- Когда мы нажимаем на неё, появляются два блока с видео — исходный с камеры и обработанный нейронкой.
- Обработанное видео строится так: нейросеть смотрит каждый кадр и пытается понять, есть ли там человек, его лицо, руки или ноги. Если есть — вместо них ставит картинку с заднего фона, которая никуда не двигается.
- Чем дальше от камеры и чем медленнее двигается человек — тем лучше нейронка понимает, что находится в кадре, и на выходе получается более реалистичная картинка.
Готовим HTML-страницу
Для начала берём стандартный шаблон из прошлых проектов, меняем заголовок и подключаем таблицу стилей.
👉 Важно: в разделе <head> подключаем TensorFlow — библиотеку для машинного обучения. В нашем случае эта библиотека реализована на JavaScript.
После этого делаем заголовок и описание проекта, а ниже — разделы с кнопкой включения камеры и видео. Чтобы у нас получилось сразу два видеопотока (исходный и обработанный), сделаем так: видео с камеры выведем в блоке <video>, а результат — в блоке <overlay>. Для этого используем Glitch-кнопку — специальный инструмент, который создаёт отдельный независимый блок внутри страницы. Именно в него мы отправим результат работы нейросети.
Сам скрипт, который обрабатывает каждый кадр, встраивается в самый конец HTML-файла вот таким колдунством: сначала загружаем обученную на людях модель распознавания, а потом сам алгоритм распознавания, который будет опираться на эту модель.
<!-- Загружаем нейросеть, обученную распознавать людей в кадре -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0"></script>
<!-- Подключаем скрипт, который будет обрабатывать видео -->
<script src="https://thecode.media/wp-content/uploads/2020/02/script.js" defer></script>
Готовый HTML-код
Подключаем стили
Здесь ничего сложного нет: берём стили исходного проекта и чистим их до тех пор, пока не останется действительно нужное — общие настройки страницы и параметры внешнего вида для видео.
Если вы пропустили, что такое CSS и как с ним работать — почитайте нашу статью. Если нет — просто сохраняете код как .css-файл и кладёте в ту же папку, что и HTML-код.
Файл style.css
Запускаем
Сохраните HTML и CSS-код как отдельные файлы, обновите страницу и нажмите «Включить веб-камеру». Скорее всего, браузер спросит у вас, можно ли получить доступ к камере — ответьте, что можно:
Размышления
По сути мы взяли чужую разработку и внедрили её на свою страницу. Так как разработка была с открытой лицензией, мы ничего не нарушили и никому не навредили.
В коммерческом проекте имело бы смысл тщательно протестировать и дообучать нейроночку, чтобы она давала более предсказуемый и полезный нам результат. Но всё равно можно было бы использовать чужие наработки.
Вообще использовать чужое — хорошо, особенно если автор разрешил. Это основа прогресса. Используйте чужое и делитесь своим.