Создание JavaScript приложения для распознавания лиц, как в кино

Создание JavaScript приложения для распознавания лиц, как в кино

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

Чтобы создать приложение для распознавания лиц, мы можем использовать такую библиотеку, как, face-api.js, расположенную по адресу https://github.com/justadudewhohacks/face-api.js/. Работает как в браузере, так и на Node.js. Вы используете его, обучая Tensorflow с помощью изображений, чтобы генерировать тестовые данные, которые загружаете в приложение, а затем оно сможет распознавать лица. Генерация данных выходит за рамки этой статьи, но вы можете загрузить предустановленные данные. По ссылке выше есть папка weights, которую вы можете использовать в своем приложении.

В этой статье мы создадим простое приложение для распознавания лиц, которое пользователи могут использовать для определения эмоций лица, пола и возраста человека. Мы будем использовать для сборки приложения Vue.js вместе с библиотекой face-api.js. Чтобы начать, мы запускаем Vue CLI, выполнив npx @vue/cli create facial-recognition-app. В мастере мы выбираем «Выбор объектов вручную», затем выбираем Babel, препроцессоры CSS, Vuex и Vue Router.
Теперь нам нужно установить библиотеки. В дополнение к face-api.js нам также требуется Axios для выполнения запросов к бэк-энд и BootstrapVue для стилизации. Чтобы установить их, мы запускаем:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Теперь мы переходим к разработке приложения. Создайте папку mixins в каталоге src, а затем создайте файл с именем requestsMixin.js. В него добавьте:

Здесь у нас есть функции для отправки запросов к бэк-энд для сохранения изображений, которые мы настроим позже. Затем Home.vue замените существующий код на:

Вот где происходит магия распознавания изображений. В хук beforeMount мы загружаем все данные, необходимые для face-api.js для распознавания лиц. WEIGHTS_URL — это просто папка weights из репозитория https://github.com/justadudewhohacks/face-api.js/, обслуживаемая HTTP-сервером. С помощью этой ссылки мы можем загрузить весь репозиторий в Zip-файл и извлечь из него папку weights. Затем загрузите http-server, запустив npm i -g http-server. Перейдите в папку weights и запустите http-server —cors, чтобы мы не получали ошибки CORS. Обратите внимание, что загрузка файлов может занять несколько секунд.

В шаблоне у нас есть кнопка «Загрузить изображения» для загрузки изображения. При нажатии откроется диалоговое окно загрузки файла, а затем будет вызвано onChangeFileUpload для преобразования его в строку base64, которая затем сохраняется на сервере. Обратите внимание, что это сделано только для того, чтобы приложение было простым. В производственных целях его, вероятно, следует сохранить в файл с внутренним приложением.

Когда изображение будет загружено, оно будет отображаться на карточках. Каждая карточка будет иметь кнопку «Определить лицо». При нажатии вызывается функция detectFace, которая запускает вызывающую функцию распознавания лица face-api.js detectAllFaces. Обратите внимание, что, прежде чем выполнять распознавание лиц, мы использовали TinyFaceDetectorOptions для сжатия изображений, чтобы ускорить его. Мы объединяем функции, начинающиеся с with, чтобы получить представление, понятное человеку. Когда это будет сделано, будут загружены карточки с результатами.

Затем App.vue заменит существующий код на:

Это добавляет панель навигации Bootstrap вверху страниц, и отображение router-view маршрутов, которые мы определили. Далее в main.js замените код на:

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Это включает в себя главную страницу и страницы поисков. Затем в store.js мы заменим существующий код на:

Это добавляет состояние images в хранилище, чтобы мы могли наблюдать его в блоке computed HomePage. У нас есть функция setImages для обновления состояния passwords, мы используем ее в компонентах, вызывая, this.$store.commit(“setImages”, data); как мы это делали для HomePage.

Наконец, в index.html замените существующий код на:

Это меняет заголовок.

Теперь мы можем запустить приложение, выполнив npm run serve. Чтобы запустить серверную часть, мы сначала устанавливаем пакет json-server, выполнив npm i json-server. Затем перейдите в папку проекта и запустите:

В db.json измените текст на:

Таким образом, у нас есть конечные точки images, определенные в requests.js. И мы получаем следующее:

Как вы можете видеть, face-api.js довольно точно определяет пол и выражение лица — как мужского, так и женского. Возраст также определился довольно близко к тому, чего вы ожидаете. Это интересно, учитывая, что для создания этого приложения была проделана не такая уж большая работа. Спасибо разработчикам face-api.js.

Автор: John Au-Yeung

Источник: https://levelup.gitconnected.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Полное руководство

Изучите самый популярный язык разработки и станьте высокооплачиваемым профи

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий