В этой статье я поделюсь своим опытом создания интерактивного веб-приложения из модели машинного обучения с использованием фреймворка Flask. В демонстрационных целях я использую собственную модель, которая прогнозирует цены на подержанные автомобили в крупных городах Индии. Используемый здесь набор данных взят с хакатона, организованного MachineHack. Перейдите на домашнюю страницу хакатона, чтобы узнать больше о наборе данных. Набор данных содержит такие функции, как местоположение, сведения об изготовлении, характеристики автомобиля, такие как тип топлива, двигатель и параметры использования. Для понимания кода некоторые базовые знания HTML и JQuery полезны, но не обязательны. Я постараюсь объяснить по ходу дела.

Я рекомендую вам просматривать файлы, пока я объясняю вещи. Перейдите в этот репозиторий git и загрузите папку webApp на свой локальный компьютер. Пожалуйста, обратитесь к PricePredictions_UsedCars.ipynb, если вы хотите понять, как идет процесс изменения характеристик и выбора модели. Взгляните на работающее приложение.

Это приложение разработано с использованием среды веб-разработки Flask. Настройка веб-приложения содержит два файла

1. Application.py - скрипт python, который обрабатывает вычисление маршрутизации и преформ в бэкэнде.

2. index.html - HTML-файл, который действует как графический интерфейс между клиентом и сервером. Он позволяет пользователям отправлять входные данные и передавать их в application.py для вычислений и отображать выходные данные в интерфейсе.

Другие объекты Python, используемые в приложении Flask:

  1. GBM_Regressor_pipeline.pkl - объект Pickle, который кодирует все параметры предварительной обработки, преобразования функций и модели обученной модели. Конвейер Sklearn - отличный способ сохранить рабочий процесс для воспроизводимости, как в этом случае. Исходные данные от пользователей передаются в конвейер, который применяет преобразования и затем прогнозирует цену.
  2. Encoded_dicts.pkl - в функциях есть категориальные переменные. нам нужно передать их вместе с закодированными числовыми значениями. Этот объект pickle хранит хеш-таблицу сопоставления.
  3. model2brand.pkl - функция Model частично зависит от функции Brand. Зависимые в том смысле, что набор моделей уникален для определенного бренда. Когда пользователь выбирает бренд, в раскрывающемся объекте выбора модели (choose a model) должны отображаться только модели, принадлежащие выбранному бренду. Чтобы сделать это возможным, нам нужно сохранить словарь сопоставлений брендов и наборов моделей, то есть бренд как ключ, а набор моделей автомобилей, принадлежащих этому бренду, как value. Это используется для фильтрации моделей по выбранному пользователем бренду.
{'Fiat': ['Siena', 'Punto', 'Avventura', 'Grande', 'Petra', 'Linea']}

Изучите содержимое в Application.py

Импорт необходимых библиотек

Загрузка входов

@application.before_first_request - декоратор, который вызывает функцию startup при запуске сервера. Функция загружает все объекты Python.

@application.routedecorator вызывает background_processAPI всякий раз, когда запрашивается этот маршрут. Эта функция использует входные данные по умолчанию (метод «GET») при загрузке страницы и также извлекает входные данные из объектов запроса (метод «POST»). Эта функция вычисляет цену на основе предоставленных прогнозов входов и выходов в формате JSON.

наконец-то,

Отображает index.html и передает другие аргументы, которые будут использоваться внутри шаблона (в данном случае словари).

Изучите содержание в Index.html

Основная цель index.html - получить аргументы пользователя со стороны клиента и передать их скрипту application.py для обработки и получения прогнозов. Нам нужно создать интерактивные элементы, которые упростят пользователю отправку входных данных.

Как мы заметили, у нас есть как числовые, так и категориальные особенности. Для сбора числовых входных данных я буду использовать объекты слайдер, а для категориальных входных данных целесообразно использовать объекты раскрывающийся список.

Объект слайдера

Давайте возьмем фрагмент HTML слайдера и разберемся, что происходит.

  • Тег div отделяет объекты внутри него от других элементов. Всегда предпочтительнее отделять предметы друг от друга.
  • Тег label, показывающий пользователю, для какого поля он вводит данные (в данном случае переменная - Год).
  • Тег span позволяет выделить часть текста, заключенного в labeltag. Выделить можно только текст внутри этого тега (сейчас он пуст).
  • input - это тег, который получает ввод от пользователя. Атрибуты min и max определяют диапазон ползунка, атрибут value содержит выбранное пользователем значение, класс указывает тип объекта (в данном случае слайдер), а step определяет размер шага перемещения слайдера.

Примечание. Атрибут id в каждом теге важен, так как он служит уникальным идентификатором объектов или тегов, поэтому два тега не должны иметь одинаковый id.

Делаем слайдер интерактивным

Теперь, когда мы создали объект слайдер, который позволяет пользователю выбирать значение в определенном диапазоне. Чтобы пользователь знал, какое значение он выбрал, мы можем передать выбранное значение внутри тега span. Посмотрим, как это делается.

приведенный выше фрагмент - это сценарий Jquery (прокси-сервер javascript, упрощающий код).

Что делает этот фрагмент:

  • Он создает переменную slider3, которая помечает элемент атрибутом attributeid=year_range. Это позволяет нам получать или изменять значения атрибутов.
  • Поскольку нас интересует выбранное пользователем значение, хранящееся в атрибуте value. slider3.val() извлекает это значение и передает его внутри html () в $("#Year").html() в виде текста, заставляя его отображаться внутри тега с id=Year (тег span внутри тега Year label).

Теперь все, что мы сделали, это прочитали атрибут value из входного тега и передали его внутри тега label. Но прямо сейчас объект не может записывать, кроме значения по умолчанию (предоставленного нами). Нам нужно сделать так, чтобы он обнаруживал движение ползунка и считывал соответствующее значение, выбранное пользователем.

slider3.change() обнаруживает движение ползунка объекта slider3, а затем вызывает function(), который делает то же самое, что и предыдущий, за исключением и обновляет текст внутри тега label, заставляя его взаимодействовать с объектом ползунка.

Выпадающий объект

Как я уже упоминал, раскрывающийся объект используется для категориальных переменных, где пользователь выбирает параметр, и этот параметр должен быть сопоставлен с числовым значением, в отличие от объектов ползунка, где значение, вводимое пользователем, напрямую передается для прогнозирования модели. Для этого нам нужны словари сопоставления Python.

ниже представлена ​​хеш-таблица сопоставления для переменной brand.

Давайте разберемся, как создать раскрывающийся список, позволяющий пользователям передавать ввод.

Тег select в приведенном выше фрагменте HTML создает пустой раскрывающийся список. Чтобы заполнить раскрывающийся список возможных вариантов, мы используем тег option внутри тега select для хранения ключей. Но что, если у нас есть много ключей, которые нужно заполнить, что делает эту работу громоздкой. В таком случае мы можем перебрать ключи словаря.

Приведенный выше код создает переменную brands, в которой хранится словарь le_brands_Encdict, переданный функцией index() из application.py. при итерации ключей словаря он выбирает значение, хранящееся в переменной value, а затем передает его в тег option, созданный вместе с ключом.

Теги option добавляются внутри тега select с id=brandзаполнением раскрывающегося списка опциями.

ниже фрагмент JQuery извлекает бренд, выбранный пользователем из раскрывающегося списка.

$('#brand option:selected').html()

Я объяснил использование двух объектов в качестве эталона (год для числовых значений и бренд для категорий). у нас есть похожие объекты для остальных переменных.

Передача пользовательского ввода в функцию

До сих пор мы обсуждали, как получить пользовательский ввод в фоновом режиме. Теперь мы должны передать их background_process()функции, вычисляющей цену.

Давайте рассмотрим приведенный выше фрагмент кода. $(document).mouseup() и $(document).on - это прослушиватели событий, которые фиксируют щелчки мыши и изменения раскрывающегося списка соответственно, а затем вызывают fetchdata() функцию, которая направляет url_for('background_process')calling background_process API (см. Файл application.py). Аргумент data внутри функции собирает вводимые пользователем данные со всех объектов и передает их background_processfunction в качестве аргументов, которые вычисляют цену, а затем выводят объект JSON. Выходной объект JSON имеет ключ price_prediction, а вычисленная цена - значение.

В случае успеха success: function(data) принимает объект JSON, а затем передает прогнозируемое значение функцииupdate_dashboard, которая, в свою очередь, передает его тегу с id = estimated_price (тег цена label), отображающему прогнозируемую цену на веб-странице.

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

Если вас также интересуют приложения, развертываемые на платформе AWS. Пожалуйста, ознакомьтесь с другой моей статьей, в которой я шаг за шагом обсуждал развертывание приложения с помощью службы Elastic Beanstalk.



Развертывание приложения машинного обучения с помощью сервиса ElasticBeanStalk на AWS
Беспрепятственное развертывание приложения ML в облачном сервисе AWS с помощью инструмента интерфейса командной строки эластичного бобового стебля medium.com



Спасибо за чтение. Любые мысли будут оценены. пожалуйста, ПОЖАЛУЙСТА, если вам это понравилось.