Пришло время раскрыть потенциал вашей камеры!

Что, если бы больше людей смогли превратить камеры своих мобильных телефонов в детекторы объектов с помощью всего лишь нескольких строк кода? Эта история написана для того, чтобы добавить веселья в жизнь каждого! Вероятно, это отличный способ начать изучать JavaScript и React!

Эта история предполагает простые базовые знания JavaScript, npm и React. Что ж, это может быть действительно легко реализовать, просто выполнив следующие действия! Напишите мне комментарий ниже, если вам нужна помощь в настройке.

Установка и начальная подготовка

Чтобы установить npm, установите Node.js, и npm придет вместе с ним. Затем запустите Командную строку (cmd), укажите каталог, в который вы хотите установить приложение React, и введите эту команду:

npx create-react-app obj-detector
cd obj-detector
npm install @tensorflow/tfjs @tensorflow-models/coco-ssd

Команда создаст новое приложение React и новый каталог с именем «obj-Detector». Затем он установит и tensorflow.js, и COCO-SSD (также известные как общие объекты в COntext и Single Shot MultiBox Detection соответственно).

Код

Перейдите в каталог obj-Detector / src / и откройте этот файл App.js. Замените все следующим кодом:

Затем замените все в App.css этим кодом:

.app-position {
  position: fixed;
  margin: auto;
}

Вот и все! Пора развернуть приложение.

Развертывание

Вернувшись в консоль, находясь в каталоге obj-Detector, введите следующее, чтобы развернуть приложение:

npm start

Через некоторое время вы должны увидеть в своем браузере страницу, указывающую на http: // localhost: 3000. Дайте разрешение использовать вашу веб-камеру и поиграйте с детектором объектов! Обратите внимание, что файл, используемый для обнаружения, относительно велик, поэтому потребуется некоторое время, прежде чем все начнет работать.

Подождите, разве вы не сказали, что мы можем пользоваться нашими мобильными телефонами?

Ну конечно; естественно. Однако необходимо сделать еще несколько шагов.

Сначала загрузите это программное обеспечение Ngrok и выполните первые 3 шага на странице, чтобы установить программное обеспечение. Затем, оставив существующую командную строку, в которой выполняется npm start, запустите другую командную строку и введите следующее:

# Run the code on cmd while in the directory that has ngrok.exe
ngrok http 3000

Затем с помощью мобильного телефона откройте URL-адрес https в своем браузере (в моем случае это https://5ca86203.ngrok.io) и, как обычно, укажите браузеру разрешение на доступ к вашей камере и дождитесь загрузки детектора. Пора поиграть с самодельным детектором предметов на мобильном телефоне!

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

На этом пока все для реализации. Напишите мне комментарии, если есть какие-либо проблемы с реализацией. Ваше здоровье!

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