Многие модели машинного обучения позволяют тренироваться только с одним целевым атрибутом. Воспользуйтесь функцией Рабочий процесс Clarifai: она позволяет использовать до пяти различных моделей для анализа изображения.

Если вы еще не знаете, что такое Clarifai, это мощная платформа искусственного интеллекта для компьютерного зрения. Одна из его многочисленных функций - это рабочий процесс, который позволяет прогнозировать с использованием до пяти моделей. Следуйте вместе с исходным кодом на GitHub!

Создайте свое приложение Clarifai и рабочий процесс

Прежде чем мы начнем, убедитесь, что вы зарегистрировали бесплатную учетную запись Clarifai. Затем вам нужно будет создать новое приложение:

Нажмите «Создать приложение», выберите новое приложение из списка приложений и найдите раскрывающийся список ключей API. Этот ключ API позволяет вам использовать ваше приложение Clarifai - мы будем использовать его чуть позже.

В раскрывающемся списке «Рабочий процесс» нажмите «Создать рабочий процесс».

Здесь мы будем создавать наш новый рабочий процесс с несколькими моделями! Введите в идентификатор рабочего процесса что-нибудь описательное - мы будем использовать это в нашем коде. В разделе «Модель» добавьте до пяти различных моделей, с помощью которых вы хотите проанализировать изображение, а затем нажмите «Сохранить рабочий процесс».

Все публичные модели Clarifai можно найти здесь: https://clarifai.com/models

Большой! Теперь, когда все настроено, давайте перейдем непосредственно к коду.

Подготовьте HTML и CSS

Создайте HTML-файл с именем index.html. В него вы поместите этот код:

Https://gist.github.com/selynna/a98e5b07911f34ac4d48a5851a9b784c#file-index-html

В <head> мы связали пять разных вещей: файл CSS (для стилизации нашей страницы), шрифт, Clarifai JavaScript SDK, JQuery (чтобы немного упростить некоторые функции JavaScript) и наш файл JavaScript, содержащий всю обработку.

В <body> у нас есть три разных компонента: кнопка загрузки файла, чтобы мы могли загрузить изображение с нашего компьютера, заполнитель div для нашего анализа изображения и заполнитель div для фотографии.

Когда вы запустите его, вы увидите только заголовок и кнопку загрузки файла. Не беспокойтесь, что некоторые элементы отсутствуют! Остальное мы там скоро доставим.

Но сначала мы хотим немного оживить нашу страницу, добавив CSS в style.css. Вот здесь и пригодится шрифт! Вот CSS, который мы используем:

Https://gist.github.com/selynna/a98e5b07911f34ac4d48a5851a9b784c#file-style-css

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

Соедините все это с помощью JavaScript

Здесь будет происходить вся обработка и закулисная работа. Создайте index.js со следующим кодом:

Https://gist.github.com/selynna/a98e5b07911f34ac4d48a5851a9b784c#file-index-js

Помните ключ API и идентификатор рабочего процесса, которые были у нас на странице приложений? Скопируйте и вставьте ключ API в файл index.js, где указано YOUR_API_KEY, и идентификатор рабочего процесса, где указано YOUR_WORKFLOW_ID.

В этом коде много всего, поэтому давайте посмотрим, что делает каждый раздел. Приложение инициализируется функцией new Clarifai.App(). Это позволяет нам получить доступ к функциям прогнозирования рабочего процесса Clarifai.

Загрузка изображения в uploadImage ()

Прежде чем мы начнем отправлять данные в Clarifai, давайте настроим функцию загрузки изображения, чтобы мы могли анализировать фотографии, которые мы получаем локально. В функции под названием uploadImage() мы будем использовать document.querySelector, чтобы получить файл, загруженный нашим <input type=”file”> в HTML. Затем мы используем FileReader JavaScript для преобразования загруженного изображения в строку base64, которая затем помещается в элемент <img> в HTML. Наконец, мы можем взять тот же объект изображения и передать его в нашу predictFromWorkflow функцию, содержащую процессы Clarifai. Если файл проходит, мы устанавливаем CSS для div изображения равным display: inherit.

Использование Clarifai Workflow Predict API в predictFromWorkflow()

А теперь перейдем к predictFromWorkflow(). Мы позвоним в app.workflow.predict() Clarifai, чтобы воспользоваться созданным нами в Интернете рабочим процессом. В случае успеха полученный нами ответ предоставит нам всю информацию об изображении, проанализированном выбранными вами моделями. Мы будем анализировать каждую модель, чтобы отобразить ключевую информацию. Я буду использовать модели General, Apparel, Demographic, Celebrity и Food, все они общедоступны на Clarifai.

Если мы console.log(outputs) и откроем нашу модель еды, это будет выглядеть примерно так:

Как видите, outputs содержит всю информацию и результаты всех пяти моделей, и мы будем создавать отдельные записи в analysis div в HTML для каждой модели. Мы получаем название модели через getModelName(), чтобы наша основная функция была аккуратной. Он извлекает эту информацию из имени / отображаемого имени модели выходных данных.

Настройка вывода для различных моделей в getFormattedString ()

Мы создадим строку в произвольном формате, подходящую для каждой категории. Например, для нашей общей модели мы хотим сказать что-то вроде «Три вещи, в обнаружении которых мы наиболее уверены, это…», а для идентификации знаменитости мы хотели бы сказать «Человек на этой фотографии, в котором мы уверены. в детектировании это… ». Вся эта информация настраивается, поэтому мы будем обрабатывать отдельные случаи с помощью функции getFormattedString(), где она проверяется со всеми общедоступными моделями с помощью операторов if. Некоторые модели имеют разные способы отображения данных, и эти операторы if обрабатывают каждый отдельный случай (вот почему функция выглядит устрашающей!).

Clarifai обычно возвращает около 20 потенциально релевантных атрибутов, которые он обнаруживает (например, модель Celebrity возвращает 20 потенциальных знаменитостей, модель Food возвращает 20 потенциальных продуктов), но в нашем случае мы сделаем информацию легко усваиваемой, используя только три основных концепции. Однако это то, что вы можете изменить и настроить в своем коде!

Как только вся эта информация будет собрана, мы можем добавить ее в HTML, и в итоге она будет выглядеть примерно так:

Теперь, когда у нас есть вся информация, мы можем предположить, что на этом изображении изображен взрослый мужчина, которым, вероятно, является Гордон Рэмси. Он белый, мужественный, около 47 лет, носит часы. Еда, которую он держит, скорее всего, овощ (хотя в этом и не уверен).

Следующие шаги с API рабочего процесса

Функция Workflow API чрезвычайно полезна, если вы пытаетесь прогнозировать изображения на основе нескольких моделей, а не только одной. Это создает легкость доступа для пользователя! Это также не ограничивается публичными моделями. Вы можете тренировать свои собственные модели и также использовать их. Вы на пути к тому, чтобы стать мастером машинного обучения.