Классификация изображений с помощью машинного обучения проще, чем вы думали. 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, чтобы она выглядела лучше.