Я всегда хотел разработать законченное приложение для машинного обучения, в котором у меня был бы пользовательский интерфейс для ввода некоторых входных данных и модель машинного обучения для прогнозирования этих значений. На прошлой неделе я так и сделал. В процессе я создал простой в использовании шаблон в React и Flask, который каждый может изменить, чтобы создать собственное приложение за считанные минуты.

Основные моменты проекта:

1. Внешний интерфейс разработан в React и будет содержать одну страницу с формой для ввода входных значений.
2. Бэкэнд разработан во Flask, который предоставляет конечные точки прогнозирования для прогнозирования с использованием обученного классификатора и отправки результата обратно во внешний интерфейс для легкого потребления.

Репозиторий GitHub находится ниже. Форк проект и создайте свое собственное приложение сегодня!

шаблон

реагировать

React - это библиотека JavaScript, созданная Facebook, чтобы упростить разработку и использование пользовательских интерфейсов. Это один из ведущих языков для фронт-энда. Вы можете прочитать об этомВот, Лучший ресурс, который можно узнать о React, - это его документация, которая очень обширна и проста для понимания.

Колба и Колба-RESTPlus

Flask и Flask-RESTPlus позволяют нам определить сервис на Python, который будет иметь конечные точки, которые мы можем вызывать из пользовательского интерфейса. Вы можете узнать больше о разработке приложения Flask из моей статьи ниже.

Описание

я использовалcreate-react-appсоздать базовое приложение React для начала. Далее я загрузилbootstrapчто позволяет нам создавать адаптивные сайты для каждого размера экрана. Я обновилApp.jsфайл для добавления формы с выпадающими списками иPredictа такжеReset Predictionкнопок. Я добавил каждое свойство формы в состояние и после нажатияPredictКнопка, я отправляю данные в бэкэнд Flask. Я также обновилApp.cssфайл для добавления стиля на страницу.

Приложение Flask имеет конечную точку POST/prediction, Он принимает входные значения как json, преобразует их в массив и возвращает в пользовательский интерфейс. В реальном приложении мы будем использовать те же данные для прогнозирования с использованием классификатора, хранящегося вclassifier.joblibи вернуть прогноз.

Reset Predictionудалит прогноз из пользовательского интерфейса.

Запуск шаблона

Клонируйте репозиторий на свой компьютер, зайдите в него и откройте здесь два терминала.

Подготовка пользовательского интерфейса

В первом терминале зайдите внутрьuiиспользование папкиcd ui, Убедитесь, что вы используете версию узла10.4.1, Оказавшись внутри папки, запустите командуyarn installустановить все зависимости.

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

npm install -g serve
npm run build
serve -s build -l 3000

Теперь вы можете перейти кlocalhost:3000чтобы увидеть, что пользовательский интерфейс запущен и работает. Но он не будет взаимодействовать с сервисом Flask, который все еще не работает. Итак, давайте сделаем это.

Подготовка сервиса

На втором терминале переместитесь внутрьserviceиспользование папкиcd service, Мы начинаем с создания виртуальной среды, используяvirtualenvи Python 3. Вы можете прочитать о virtualenvВот, Затем мы установим все необходимые зависимости с помощью pip после активации среды. Наконец, мы запустим приложение Flask.

virtualenv -p Python3 .
source bin/activate
pip install -r requirements.txt
FLASK_APP=app.py flask run

Это запустит сервис на127.0.0.1:5000,

Вуаля! Полное приложение теперь будет работать правильно. Yaay !!

Использование шаблона для собственного использования

Чтобы понять процесс использования шаблона для любой модели, я буду использоватьirisнабор данных и создать модель для того же. Этот пример также доступен вexampleпапка в проекте.

Создать модель

Я тренировалDecisionTreeClassifierна наборе данных радужной оболочки, для которого требуется 4 функции - длина Sepal, ширина Sepal, длина лепестка и ширина лепестка. Затем я сохранил модель вclassifier.joblibс помощьюjoblib.dump(), Классификатор теперь можно использовать для прогнозирования новых данных.

Обновить сервис

Далее я открыл файлapp.pyв текстовом редакторе (Sublime Text - один). Я раскомментировал строкуclassifier = joblib.load(‘classifier.joblib’)так что переменнаяclassifierсейчас держит обученную модель.

В методе post я сделал следующие обновления:

Во-первых, я использовалclassifier.predict()чтобы получить прогноз. Затем я создал карту для классов так, что 0 означаетIris Setosa, 1 означаетIris Versicolourи 2 означаетIris Virginica, Я наконец вернул прогноз вresultключ.

Обновить:Как указаноМартинс УнталсЯ забыл упомянуть, что нам также необходимо обновить модель, чтобы она работала правильно и имела обновленную модель в интерфейсе Swagger.

Как видно из сути, я обновил имена полей, их типFloat, описание и текст справки. То же самое теперь будет отражено и в Swagger

Обновите интерфейс

Форма состоит из столбцов внутри строк. Таким образом, поскольку у меня есть 4 функции, я добавил 2 столбца в 2 строки. В первом ряду будут выпадающие значения для Sepal Length и Sepal Width. Во втором ряду будут раскрывающиеся списки для длины лепестка и ширины лепестка.

Я начал с создания списка опций для каждого из этих выпадающих списков.

Затем я определил две строки с двумя столбцами в каждой. Каждый выпадающий список будет выглядеть как код ниже:

Для каждого выпадающего списка нам нужно будет обновить текст внутри<Form.Label></Form.Label>, Мы также назовем каждую группу выбора. Скажем имя будетpetalLengthпоэтому мы устанавливаем значение как{formData.petalLength}и назвать как“petalLength”, Опции добавляются с использованием названий, которые мы определили выше<Form.Control></Form.Control>как мы можем видеть{petalLengths}над. Две такие группы внутри<Form.Row></Form.Row>сделает наш пользовательский интерфейс.

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

Добавить новое фоновое изображение и заголовок

Внутри app.css измените ссылку фонового изображения на свою. Я добавил изображение цветов изUnsplash, Я также обновил названиеIris Plant Classifierи заголовок страницы тоже внутриindex.htmlфайл вpublicпапки.

Результат

Приложение теперь готово к использованию модели. Перезапустите обе службы после создания пользовательского интерфейса.npm run build, Приложение выглядит так:

С некоторыми значениями функций, при нажатииPredictкнопка, модель классифицирует его какIris Setosa,

С новыми значениями признаков модель предсказывает, что завод будетIris Versicolour,

Вывод

Как вы можете видеть, в этой статье я рассмотрел шаблон приложения ML React, который сделает создание полных приложений ML простым и быстрым.