Разверните алгоритм машинного обучения в виде приложения в Интернете с дополнительной защитой аутентификации Google.
Этот проект является второй частью полного проекта, первую часть можно найти на
https://siddharth1.medium.com/loading-and-extraction-83fedad258f0
Код этой статьи можно найти по адресу
kshirsagarsiddharth/plotly_dash_dashboard_for_car_prediction (github.com)
Нам нужно создать основные компоненты для всех 8 входных столбцов.
Начнем с km_travelled. Я создам базовый компонент для каждого столбца и покажу поэтапно выполняемые шаги. Затем, наконец, я разверну это приложение как скрипт Python.
Как приложение будет работать окончательно
Как приложение будет выглядеть окончательно
1. Основной компонент для km_travelled
2. Основной компонент для года выпуска модели
3. Основной компонент для размера двигателя и налога
Добавление оставшихся столбцов в качестве компонентов
Теперь, когда все основные компоненты подготовлены, перед добавлением модели для выполнения прогнозирования у нас есть проблема в этом подходе.
- В приведенном выше коде функция обратного вызова запускается всякий раз, когда изменяется любой из атрибутов, описанных входом.
- Попробуйте сами, введя данные в поля выше. Чтобы исправить это, мы будем использовать состояние, которое позволяет вам передавать дополнительные значения без запуска обратных вызовов.
- Вот тот же пример, что и выше, но с компонентами dcc.Input в качестве состояния и новым компонентом кнопки в качестве ввода. Другими словами, мы хотим вызывать алгоритм машинного обучения только тогда, когда нажимаем кнопку отправки.
Посмотрите Close на гифку, компоненты обновляются только когда мы нажимаем клавишу отправки
Теперь, когда мы принимаем все входные данные, давайте загрузим модель и предскажем цены в режиме реального времени.
Наконец, приложение работает, давайте сделаем его действительно красивым, используя компоненты начальной загрузки тире.
Примечание. Это означает конец скелета приборной панели, с этого момента мы будем улучшать только внешний вид приборной панели.
Минимальный пример компонентов Dash Bootstrap
Теперь мы запускаем тот же код, что и выше, разница в том, что мы сохраняем входные данные в переменную. Давайте заменим элементы div на переменные.
Позвольте мне проиллюстрировать это, используя изображение ниже
Давайте преобразуем вышеуказанное приложение в строки и столбцы компонентов начальной загрузки и заменим строки с помощью переменных,
- По этой причине я создал 2 файла: один — utils.py, а другой — app.py. В utils я определяю row1, а в app.py я импортирую строку.
- В приведенном ниже коде только один компонент преобразуется в строку dbc.
Примечание. Запустите код с этого момента через скрипт Python, создав 2 файла, и раскомментируйте код из utils import row1,row2.
``` # utils.py import pandas as pd from dash import dcc, html import dash_bootstrap_components as dbc import numpy as np df = pd.read_csv('car_price_data.csv').drop('Unnamed: 0', axis=1) row1 = dbc.Row([ dbc.Col(html.H5('KM Travelled')), dbc.Col(dcc.Slider( min=df['km_traveled'].min(), max=df['km_traveled'].max(), value=100.0, id='km-travelled-slider', tooltip={"placement": "bottom"} )), dbc.Col(html.H5('Pick Car Year')), dbc.Col(dcc.Dropdown( id='year-picker', options=np.sort(df['year'].unique()), value=2017 )) ])# app.py from datetime import date import joblib from jupyter_dash import JupyterDash from utils import row1 loaded_model = joblib.load('final_car_prediction_model.pkl') app = JupyterDash(__name__, external_stylesheets = [dbc.themes.BOOTSTRAP]) app.layout = html.Div([ row1, html.H2('tax-picker'), dcc.Slider( min=df['tax'].min(), max=df['tax'].max(), value=df['tax'].min(), id='tax-slider', tooltip={"placement": "bottom"} ), html.H2('engine-size'), dcc.Slider( min=df['engineSize'].min(), max=df['engineSize'].max(), value=df['engineSize'].min(), id='engine-size-slider', marks={i: str(i) for i in np.sort(df['engineSize'].unique())}, tooltip={"placement": "bottom"} ), html.H2('km-per-liter'), dcc.Slider( min=df['km_per_liters'].min(), max=df['km_per_liters'].max(), value=df['km_per_liters'].min(), id='km-per-liters-slider', tooltip={"placement": "bottom"} ), html.H2('model-dropdown'), dcc.Dropdown( id='model-dropdown', options=np.sort(df['model'].unique()), value=df['model'][0] ), html.H2('transmission-dropdown'), dcc.Dropdown( id='transmission-dropdown', options=np.sort(df['transmission'].unique()), value=df['transmission'][0] ), html.H2('fuel-type-dropdown'), dcc.Dropdown( id='fuel-type-dropdown', options=np.sort(df['fuel_type'].unique()), value=df['fuel_type'][0] ), html.Button(id='submit-button-state', n_clicks=0, children='Submit'), html.Div([ html.Div(id='km-travelled-slider-output', children=[html.P('km-travelled-slider-output'), ]), html.Div(id='year-picker-output'), html.Div(id='engine-size-slider-output'), html.Div(id='tax-slider-output'), html.Div(id='km-per-liters-slider-output'), html.Div(id='model-dropdown-output'), html.Div(id='transmission-dropdown-output'), html.Div(id='fuel-type-dropdown-output'), html.Div(id='prediction', style={'font-size':'60px'}) ], style={'font-size': '20px'}) ]) @app.callback( Output('km-travelled-slider-output', 'children'), Output('year-picker-output', 'children'), Output('engine-size-slider-output', 'children'), Output('tax-slider-output', 'children'), Output('km-per-liters-slider-output', 'children'), Output('model-dropdown-output', 'children'), Output('transmission-dropdown-output', 'children'), Output('fuel-type-dropdown-output', 'children'), Output('prediction', 'children'), Input('submit-button-state', 'n_clicks'), State('km-travelled-slider', 'value'), State('year-picker', 'value'), State('engine-size-slider', 'value'), State('tax-slider', 'value'), State('km-per-liters-slider', 'value'), State('model-dropdown', 'value'), State('transmission-dropdown', 'value'), State('fuel-type-dropdown', 'value') ) def update_output(n_clicks, km_travelled, date_value, engine_size, tax_value, km_per_liters, model_name, transmission, fuel_type): prediction = loaded_model.predict(pd.DataFrame( data=[[str(date_value), km_travelled, tax_value, engine_size, km_per_liters, model_name, transmission, fuel_type]], columns=joblib.load('column_names.pkl'))) return (f"km_travelled: {km_travelled}", f"date_value: {date_value}", f"engine_size: {engine_size}", f"Tax: {tax_value}", f"Km Per Liters: {km_per_liters}", f"model name: {model_name}", f"transmission: {transmission}", f"fuel_type: {fuel_type}", f"prediction: {prediction}" ) # app.run_server(mode="inline") app.run_server()Dash app running on http://127.0.0.1:8050/
Далее я хочу визуальную обратную связь о том, какие значения вводит пользователь в режиме реального времени, поэтому я использую разные функции для разных входных данных. И визуальная обратная связь каждого ввода фиксируется через компонент вывода.
- Я использовал dash daq в качестве визуального вывода входных компонентов.
- Dash DAQ включает в себя надежный набор элементов управления, которые упрощают интеграцию сбора данных и элементов управления в ваши приложения Dash.
В следующем коде я определил компоненты, которые будут напрямую считываться из основных компонентов ввода и отображать вывод в реальном времени, поэтому мне нужно было создать отдельные обратные вызовы для каждого компонента.
Соответствующий обратный вызов для каждого выхода компонента
Окончательная структура приложения
Найдите код на GitHub для окончательной реализации Вот как будет выглядеть приложение
Добавление Google и github Oauth
(статья идет, но код находится на)
kshirsagarsiddharth/prediction_with_security (github.com)
Развертывание Heroku
продолжение следует……
