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

Наш проект будет использовать ml5.js, p5.js и пакет npm под названием live-server.

Настройте свой проект:

  • Создайте папку для вашего проекта.
  • Создайте два файла внутри папки. Файл sketch.js и файл index.html.

index.html:

  • Внутри вашего файла index.html мы создаем базовый HTML-скелет.
  • Затем мы помещаем ссылку CDN на ml5.js и p5.js в заголовок. Это позволит нам использовать обе эти библиотеки в нашей программе sketch.js.
  • Теперь мы помещаем путь к нашему файлу sketch.js в тело.

sketch.js:

  • Мы начинаем скетч с создания функции настройки. Функция установки взята из p5.js и автоматически запускается при загрузке окна браузера.
  • В верхней части скетча объявите две переменные: модель и изображение. Мы присвоим им значения в функции настройки.
  • Внутри функции настройки назначьте нашу переменную изображения новому изображению, используя функцию createImg из p5. Это изображение, которое мы укажем ml5.js классифицировать.
  • Теперь мы можем скачать изображение предмета или животного (алгоритм не работает с людьми), которое вы хотите использовать, и поместить его в папку вашего проекта.
  • Затем мы назначаем переменную модели новому объекту ml5 imageClassifier с первым параметром, установленным для модели, которую мы хотим, чтобы классификатор изображений использовал. В данном случае мы используем MobileNet. Второй параметр — это обратный вызов, который запускается после загрузки нашей модели. Далее мы напишем эту функцию обратного вызова. А пока дайте ему имя.
  • Теперь мы создаем функцию обратного вызова. Я назвал свой modelReady.
  • В modelReady мы запишем в консоль сообщение о том, что модель загружена.
  • Мы также вызовем model.classify с параметрами нашего изображения и обратным вызовом. Это говорит ml5 сравнить изображение с моделью и найти совпадающие шаблоны. Затем результаты этого сравнения отправляются функции обратного вызова gotResults.
  • Теперь мы можем создать функцию полученных результатов. Поскольку ml5 использует обратные вызовы error first, ошибка является первым параметром нашей функции, а результаты сравнения — вторым параметром.
  • Внутри gotResults мы используем оператор if для проверки ошибок. Если возникает ошибка, она регистрируется в консоли. Если ошибок нет, мы записываем результаты в консоль и используем функцию createP p5 для создания тега абзаца на странице с первым элементом наших результатов в качестве его значения.
  • Ваш файл sketch.js теперь должен выглядеть так:

Тестирование:

  • Теперь, когда наш проект завершен, нам нужно запустить наш проект с помощью live-сервера.
  • Чтобы установить live-сервер, откройте свой терминал и введите: «узел»

  • Если вы получаете сообщение об ошибке вместо приветственного сообщения, вам необходимо установить node.js. Вы можете сделать это здесь: https://nodejs.org/en/. Загрузите LTS-версию, запустите ее и следуйте инструкциям по установке.
  • После установки node.js установите пакет npm live-server, выполнив: «npm install -g live-server» в терминале.
  • Теперь, когда живой сервер установлен, вы можете запустить свой проект, перейдя в папку проекта и выполнив: «live-terminal».
  • Когда модель загружается, в консоли должно быть зарегистрировано «Модель готова», а под изображением должен появиться текст с результатами изображения.

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