Если вы JS-разработчик, которого всегда поражало то, что Data Scientist делает с машинным обучением и искусственным интеллектом. Загляните в этот блог и узнайте, как вы можете создавать свои собственные классификаторы изображений, используя только Javascript, менее чем за несколько минут!
AngularInDepth уходит от Medium. Более свежие статьи размещаются на новой платформе inDepth.dev. Спасибо за то, что участвуете в глубоком движении!
AI (искусственный интеллект) и машинное обучение, безусловно, являются самыми модными словечками последних нескольких лет.
Такое ощущение, что все вокруг говорят об ИИ. Но чувства - это не факты, поэтому я проверил тенденции Google, чтобы убедиться, что эти два термина продолжают расти:
Почему-то мне всегда кажется, что эта тема предназначена только для специалистов по обработке данных, разработчиков Python или кого-либо еще, или кто-то намного умнее меня. Итак, я проверил похожие запросы в Google Trends:
Ни внешнего интерфейса, ни javascript, ни Angular. В основном Python.
Должен признаться, меня всегда поражало то, что люди делают с ИИ, и, как фронтенд-разработчик, я всегда думал про себя, почему мы не можем сделать ИИ на JS?
Что такое ИИ?
Теория и разработка компьютерных систем, способных выполнять задачи, обычно требующие человеческого интеллекта, такие как визуальное восприятие, распознавание речи, принятие решений и перевод между языками (источник)
Иными словами: все, что делают компьютеры, требует человеческого интеллекта.
Примеры?
Siri, Alexa, Tesla и даже Netflix используют концепции на основе искусственного интеллекта, чтобы рекомендовать ваше следующее телешоу.
Как это работает?
Хотите верьте, хотите нет, но это основано на биологии.
Наш разум полон нейронов, которые получают сигналы от наших органов чувств и генерируют сигнал через аксон. Важный факт - это то, что создает интеллектуальную часть нашего мозга.
А теперь давайте попробуем взять эту штуку и преобразовать ее в математическую модель.
Как мы можем реализовать Neuron с помощью кода наиболее простым способом?
Вероятно, это узел, который получает некоторые входные данные и генерирует их. в один выход.
В большинстве случаев одного нейрона будет недостаточно для создания модели прогнозирования, которую мы хотим. Итак, мы фактически преобразовали его в нейронную сеть, которая выглядит так:
Любое входное значение получает вес на узлах, и, запустив некоторую функцию активации, мы получаем выход на втором ребре.
Но, допустим, мы знаем, что полученный результат не является ожидаемым, o нам нужно пересчитать веса узлов, чтобы модель соответствовала нашему примеру. Фактически мы снова увеличиваем числа для того же примера, чтобы получить исключенный результат на следующей итерации. Этот процесс называется обучением, и именно так наша модель улучшается каждый раз, когда мы добавляем в нее новые данные.
Одним из наиболее эффективных способов создания таких нейронных сетей является технология под названием TensorFlow.
И почти год назад Google анонсирует Tensorflow.js!
Сначала я подумал, что Tensorflow.js - это своего рода привязка к Tensorflow, написанному на C, вам нужно скачать и установите его на свой компьютер. Но факт в том, что TensorFlow.js - это полное переписывание Tensorflow на… JS!
Достаточно ли силен JS для расчета сложной модели?
Если вы задаетесь вопросом, как браузер может выполнить такой математический процесс за разумное время? Благодаря технологии под названием WebGL мы можем запускать наш JS-код, используя память нашей видеокарты, которая намного сильнее и быстрее, чем наша оперативная память.
на самом деле мы можем выполнять машинное обучение в браузере без каких-либо зависимостей!
Классификаторы изображений
Одна из самых захватывающих концепций, связанных с ИИ, - это классификаторы изображений.
Меня всегда поражала способность компьютерной системы понимать и классифицировать изображения, как это делают люди.
Возьмем, к примеру, Facebook - функция «Кто-то добавил фотографию, на которой вы, возможно, есть» была для меня сногсшибательной, как они, черт возьми, знают ?!
Мы только что сказали, что можем сделать то же самое в браузере? Давай сделаем это!
Мы собираемся использовать предварительно обученную модель, которая называется «мобильная сеть». Причина, по которой она называется мобильной сетью, заключается в том, что эта модель разработана для мобильных устройств и загружается очень быстро по сравнению с другими моделями прогнозирования.
Мы создадим 2 примера:
- Загрузите изображение, и пусть браузер классифицирует в нем пшеницу.
- Подключите нашу веб-камеру, и пусть браузер классифицирует то, что мы видим на веб-камере.
Классификатор загрузки изображений
Шаг 1. Установите TensorFlow и Mobilenet
npm i @tensorflow/tfjs npm I @tensorflow-models/mobilenet
Шаг 2. Импортируйте мобильную сеть в свой компонент
Шаг 3. Загрузите модель мобильной сети
Загрузим модель OnInit, а также добавим индикацию загрузки:
Шаг 4. Подготовьте HTML-код
Теперь - давайте добавим наш раздел входного файла вместе с индикацией загрузки в шаблон:
Шаг 5. Реализуйте функцию fileChange ()
Я добавляю свойство imgSrc class, которое я получу из FileReader, чтобы показать предварительный просмотр загруженного изображения.
Шаг 6. Классифицируйте загруженное изображение
У меня есть imgSrc, теперь я могу запустить model.classify() method и получить прогнозы модели:
Теперь давайте также обновим шаблон, чтобы отображать прогнозы:
И результат:
Все работает! и мы только что создали наш первый классификатор изображений, используя только JavaScript!
Классификатор веб-камеры
Классификация Mobilenet может выполняться не только на статических изображениях, мы действительно можем классифицировать и прогнозировать поток видео в реальном времени!
Давайте добавим в наш шаблон тег HTML5video:
Теперь, чтобы подключить нашу веб-камеру, мы должны настроить поток. Давайте сначала займемся элементом видео с помощью @ViewChild:
И реализовать жизненный цикл AfterViewInit:
Здесь следует обратить внимание на несколько вещей:
- Поскольку мы меняем элементы DOM, лучше использовать жизненный цикл AfterViewInit.
- Мы проверяем, есть ли у пользователя файл navigator.mediaDevices.getUserMedia, чтобы убедиться, что мы поддерживаем все браузеры.
- Мы получили обещание от функции getUserMedia, которая содержит поток, и мы установили видео
nativeElement.srcObjectв этот поток, и с этим мы можем увидеть себя:
И последнее - давайте будем запускать метод classify() каждые 3 секунды в потоке веб-камеры:
И результат:
Я проверил пульт дистанционного управления, кошелек и сотовый телефон. Вы можете видеть, что классификатор действительно успешно классифицирует эти предметы!
Это не на 100% точно, но все же очень впечатляет!
Подведем итог тому, что мы только что узнали:
- Вам больше не нужно быть специалистом по обработке данных, чтобы заниматься искусственным интеллектом!
- TensorFlow.js - это независимый пакет, вы можете запустить его в браузере с помощью простого импорта.
- Будут ли разработчики FE участвовать в построении моделей прогнозирования на основе ИИ? Я положу на это свои деньги :)
Живая демонстрация
Я создал репозиторий stackblitz с примерами, которые мы только что создали:
Посетите мой сайт для получения дополнительной информации.
Свяжитесь со мной в Twitter.
Спасибо за прочтение!
Дополнительные ссылки:
- Я говорю о ML в JS на DevDays Europe 2019:
2. Любит упаковщика? Давай поиграем в упаковщика ... По-другому ...
Один из самых крутых проектов, которые я видел, - это игра с упаковщиком, в которую можно играть, обучая модель двигаться в 4 разных направлениях в зависимости от изображений, которые вы предоставите для каждого направления. ("Ссылка")
3. Асим Хуссейн суетливой беседы с AngularConnect 2019 о том, как использовать ИИ в JS:
