Создание инструмента для классификации изображений с помощью ml5.js и HTML

Машинное обучение – популярная и увлекательная область, и вы можете начать экспериментировать с базовой концепцией, используя всего лишь веб-браузер

Машинное обучение – это фундаментальная технология в современном мире. Компьютеры могут научиться распознавать изображения, создавать произведения искусства и даже писать собственный код – и все это при минимальном вмешательстве человека

Но как работает машинное обучение и как вы можете использовать его самостоятельно?

Что такое машинное обучение?

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

Хорошим примером являются виртуальные помощники.Siri, Cortana и Google Assistant широко используют машинное обучение для понимания человеческой речи. Это начинается с пула существующих аудиозаписей, но эти инструменты также могут учиться на основе взаимодействия с вами. Это позволяет им совершенствоваться самостоятельно

Что такое ml5.js?

Большинство алгоритмов и инструментов машинного обучения используют для своего кода R или Python, но ml5.js отличается от них. Выступая в качестве интерфейса для библиотеки Tensorflow.js от Google, ml5.js – это проект с открытым исходным кодом, который дает возможность разработчикам JavaScript использовать машинное обучение

Вы можете начать использовать ml5.js в своем веб-приложении, включив один внешний скрипт в HTML

Начало работы с машинным обучением: Процесс обучения

Обучение алгоритма машинного обучения требует времени. Компьютеры учатся гораздо быстрее людей, но и учатся они по-разному. К счастью, ml5.js поставляется с набором предварительно обученных моделей, так что вы можете пропустить этот шаг

Изучение того, как алгоритмы машинного обучения обучаются, – отличный способ лучше понять такие инструменты, как этот

Создание инструмента классификации изображений на JavaScript

ml5.js позволяет легко создать инструмент классификации изображений для запуска на вашем сайте.HTML-страница в этом примере содержит поле ввода файла для выбора изображения. Загруженные изображения отображаются внутри подготовленного HTML-элемента, чтобы ml5.js мог просканировать и идентифицировать их

Шаг 1: Включите библиотеку ml5.js

Для работы этого проекта необходимы две библиотеки: ml5.js и p5.js.ml5.js – это библиотека машинного обучения, а p5.js позволяет правильно работать с изображениями. Для добавления этих библиотек вам потребуется две строки HTML:

<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1. 0. 0/p5.min.js'></script>
<script src='https://unpkg.com/ml5@latest/dist/ml5.min.js'></script>

Шаг 2: Создайте некоторые элементы HTML

Далее пришло время создать некоторые элементы HTML. Самым важным является div с ID и классом imageResult, который будет хранить конечный результат:

<h1>ПК Image Classifier</h1>

<div class='imageResult' id='imageResult'></div>


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

<div class='imageInput'>
<input type='file'
oninput='uploadedImage.src=window.URL.createObjectURL(this.files[0]); startImageScan()'>
</div>


Вход прослушивает событие oninput и выполняет в ответ два оператора, разделенные точкой с запятой. Первое создает URL объекта для изображения, что позволяет работать с данными без необходимости загружать их на сервер. Второе вызывает функцию startImageScan(), которую вы создадите в следующем шаге

Наконец, добавьте элемент img для отображения изображения, загруженного пользователем:

<img class='uploadedImage' id='uploadedImage' />

Шаг 3: Создайте JS-функцию для сканирования изображений

Теперь, когда у вас есть HTML, пришло время добавить немного JS. Начните с добавления переменной const для хранения элемента imageResult, который вы создали в последнем шаге

const element = document.getElementById('imageResult');

Далее добавьте функцию startImageScan() и внутри нее инициализируйте классификатор изображений ml5.js, использующий MobileNet

После этого выполните команду classifier.classify. Передайте ей ссылку на элемент uploadedImage, который вы добавили ранее, а также функцию обратного вызова для обработки результата

function startImageScan() {
// Create a variable to initialize the ml5.js image classifier with MobileNet
const classifier = ml5.imageClassifier('MobileNet');
classifier.classify(document.getElementById('uploadedImage'), imageScanResult);
element.innerHTML = '.';
}

Шаг 4: Создание функции отображения результата

Вам также понадобится функция для отображения результатов классификации изображений, которую вы выполнили. Эта функция содержит простой оператор if для проверки на наличие ошибок

function imageScanResult(error, results) {
if (error) {
element.innerHTML = error;
} else {
let num = results[0].confidence * 100;
element.innerHTML = results[0].label + '<br>Confidence: ' + num.toFixed(0) + '%';
}
}

Шаг 5: Соберите все вместе

Наконец, пришло время собрать весь этот код вместе. Важно помнить о тегах <body>, <script> и <style>, чтобы убедиться, что ваш код работает

<!DOCTYPE html>
<html>

</html>


Теперь вы можете протестировать свой скрипт с некоторыми изображениями! ml5.js отлично справляется с классификацией изображений животных, таких как этот сверчок

К сожалению, библиотека может испытывать трудности, когда дело доходит до изображений большей сложности. Многие мобильные устройства поставляются с подобной технологией, встроенной в камеру устройства. Классификация изображений на iPhone и Android менее чем идеальна и имеет репутацию неточной. Но это то, что со временем будет только улучшаться, поэтому стоит использовать последнюю версию ml5.js для вашего проекта

Машинное обучение: Будущее вычислений

Как видите, работать с инструментами машинного обучения на JavaScript проще, чем можно было бы ожидать. Этот тип технологии, вероятно, станет будущим вычислительной техники, поскольку такие идеи, как сильный искусственный интеллект, полагаются на него в своей работе