# Створення веб-додатку для використання ML моделі
У цьому уроці ви навчитеся тренувати ML модель на наборі даних, який просто космічний: _спостереження НЛО за останнє століття_, отримані з бази даних NUFORC.
Ви дізнаєтеся:
- Як "запакувати" треновану модель
- Як використовувати цю модель у додатку Flask
Ми продовжимо використовувати ноутбуки для очищення даних і тренування моделі, але ви можете зробити ще один крок вперед, досліджуючи використання моделі "в реальному світі", так би мовити: у веб-додатку.
Для цього вам потрібно створити веб-додаток за допомогою Flask.
## [Тест перед лекцією](https://ff-quizzes.netlify.app/en/ml/)
## Створення додатку
Існує кілька способів створення веб-додатків для використання моделей машинного навчання. Ваша веб-архітектура може впливати на спосіб тренування моделі. Уявіть, що ви працюєте в компанії, де група з аналізу даних тренувала модель, яку вони хочуть, щоб ви використали у додатку.
### Міркування
Є багато питань, які потрібно поставити:
- **Це веб-додаток чи мобільний додаток?** Якщо ви створюєте мобільний додаток або вам потрібно використовувати модель у контексті IoT, ви можете скористатися [TensorFlow Lite](https://www.tensorflow.org/lite/) і використовувати модель у додатку для Android або iOS.
- **Де буде розташована модель?** У хмарі чи локально?
- **Підтримка офлайн-режиму.** Чи має додаток працювати офлайн?
- **Яка технологія була використана для тренування моделі?** Обрана технологія може впливати на інструменти, які вам потрібно використовувати.
- **Використання TensorFlow.** Якщо ви тренуєте модель за допомогою TensorFlow, наприклад, ця екосистема дозволяє конвертувати модель TensorFlow для використання у веб-додатку за допомогою [TensorFlow.js](https://www.tensorflow.org/js/).
- **Використання PyTorch.** Якщо ви створюєте модель за допомогою бібліотеки, такої як [PyTorch](https://pytorch.org/), у вас є можливість експортувати її у формат [ONNX](https://onnx.ai/) (Open Neural Network Exchange) для використання у веб-додатках на JavaScript, які можуть використовувати [Onnx Runtime](https://www.onnxruntime.ai/). Цей варіант буде розглянуто в майбутньому уроці для моделі, тренованої за допомогою Scikit-learn.
- **Використання Lobe.ai або Azure Custom Vision.** Якщо ви використовуєте ML SaaS (Software as a Service) систему, таку як [Lobe.ai](https://lobe.ai/) або [Azure Custom Vision](https://azure.microsoft.com/services/cognitive-services/custom-vision-service/?WT.mc_id=academic-77952-leestott) для тренування моделі, цей тип програмного забезпечення надає способи експорту моделі для багатьох платформ, включаючи створення спеціального API для запитів у хмарі вашим онлайн-додатком.
У вас також є можливість створити повноцінний веб-додаток Flask, який зможе тренувати модель прямо у веб-браузері. Це також можна зробити за допомогою TensorFlow.js у контексті JavaScript.
Для наших цілей, оскільки ми працювали з ноутбуками на основі Python, давайте розглянемо кроки, які потрібно виконати, щоб експортувати треновану модель з такого ноутбука у формат, який може бути прочитаний веб-додатком, створеним на Python.
## Інструменти
Для цього завдання вам потрібні два інструменти: Flask і Pickle, обидва працюють на Python.
✅ Що таке [Flask](https://palletsprojects.com/p/flask/)? Визначений як "мікро-фреймворк" його творцями, Flask надає базові функції веб-фреймворків, використовуючи Python і механізм шаблонів для створення веб-сторінок. Ознайомтеся з [цим модулем навчання](https://docs.microsoft.com/learn/modules/python-flask-build-ai-web-app?WT.mc_id=academic-77952-leestott), щоб попрактикуватися у створенні додатків за допомогою Flask.
✅ Що таке [Pickle](https://docs.python.org/3/library/pickle.html)? Pickle 🥒 — це модуль Python, який серіалізує та десеріалізує структуру об'єктів Python. Коли ви "запаковуєте" модель, ви серіалізуєте або спрощуєте її структуру для використання у вебі. Будьте обережні: Pickle не є внутрішньо безпечним, тому будьте уважні, якщо вам запропонують "розпакувати" файл. Файл Pickle має суфікс `.pkl`.
## Вправа - очищення даних
У цьому уроці ви будете використовувати дані про 80,000 спостережень НЛО, зібрані [NUFORC](https://nuforc.org) (Національний центр повідомлень про НЛО). Ці дані містять цікаві описи спостережень НЛО, наприклад:
- **Довгий приклад опису.** "Чоловік виходить з променя світла, який освітлює трав'яне поле вночі, і біжить до парковки Texas Instruments".
- **Короткий приклад опису.** "вогні переслідували нас".
Електронна таблиця [ufos.csv](../../../../3-Web-App/1-Web-App/data/ufos.csv) містить стовпці про `місто`, `штат` і `країну`, де відбулося спостереження, `форму` об'єкта, а також його `широту` і `довготу`.
У порожньому [ноутбуці](../../../../3-Web-App/1-Web-App/notebook.ipynb), включеному в цей урок:
1. імпортуйте `pandas`, `matplotlib` і `numpy`, як ви робили в попередніх уроках, і імпортуйте електронну таблицю ufos. Ви можете переглянути зразок набору даних:
```python
import pandas as pd
import numpy as np
ufos = pd.read_csv('./data/ufos.csv')
ufos.head()
```
1. Перетворіть дані ufos у невеликий датафрейм із новими заголовками. Перевірте унікальні значення в полі `Country`.
```python
ufos = pd.DataFrame({'Seconds': ufos['duration (seconds)'], 'Country': ufos['country'],'Latitude': ufos['latitude'],'Longitude': ufos['longitude']})
ufos.Country.unique()
```
1. Тепер ви можете зменшити кількість даних, з якими потрібно працювати, видаливши будь-які значення null і імпортувавши лише спостереження тривалістю від 1 до 60 секунд:
```python
ufos.dropna(inplace=True)
ufos = ufos[(ufos['Seconds'] >= 1) & (ufos['Seconds'] <= 60)]
ufos.info()
```
1. Імпортуйте бібліотеку `LabelEncoder` з Scikit-learn для перетворення текстових значень країн у числа:
✅ LabelEncoder кодує дані в алфавітному порядку
```python
from sklearn.preprocessing import LabelEncoder
ufos['Country'] = LabelEncoder().fit_transform(ufos['Country'])
ufos.head()
```
Ваші дані повинні виглядати так:
```output
Seconds Country Latitude Longitude
2 20.0 3 53.200000 -2.916667
3 20.0 4 28.978333 -96.645833
14 30.0 4 35.823889 -80.253611
23 60.0 4 45.582778 -122.352222
24 3.0 3 51.783333 -0.783333
```
## Вправа - створення моделі
Тепер ви можете підготуватися до тренування моделі, розділивши дані на групи для тренування та тестування.
1. Виберіть три характеристики, на яких ви хочете тренуватися, як ваш X-вектор, а y-вектор буде `Country`. Ви хочете мати можливість вводити `Seconds`, `Latitude` і `Longitude` і отримувати ідентифікатор країни для повернення.
```python
from sklearn.model_selection import train_test_split
Selected_features = ['Seconds','Latitude','Longitude']
X = ufos[Selected_features]
y = ufos['Country']
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=0)
```
1. Тренуйте вашу модель, використовуючи логістичну регресію:
```python
from sklearn.metrics import accuracy_score, classification_report
from sklearn.linear_model import LogisticRegression
model = LogisticRegression()
model.fit(X_train, y_train)
predictions = model.predict(X_test)
print(classification_report(y_test, predictions))
print('Predicted labels: ', predictions)
print('Accuracy: ', accuracy_score(y_test, predictions))
```
Точність непогана **(близько 95%)**, що не дивно, оскільки `Country` і `Latitude/Longitude` корелюють.
Модель, яку ви створили, не дуже революційна, оскільки ви повинні бути здатні визначити `Country` за її `Latitude` і `Longitude`, але це гарна вправа для тренування на сирих даних, які ви очистили, експортували, а потім використали цю модель у веб-додатку.
## Вправа - "запакування" моделі
Тепер настав час _запакувати_ вашу модель! Ви можете зробити це за кілька рядків коду. Після того, як модель буде _запакована_, завантажте її і протестуйте на зразковому масиві даних, що містить значення для секунд, широти і довготи.
```python
import pickle
model_filename = 'ufo-model.pkl'
pickle.dump(model, open(model_filename,'wb'))
model = pickle.load(open('ufo-model.pkl','rb'))
print(model.predict([[50,44,-12]]))
```
Модель повертає **'3'**, що є кодом країни для Великобританії. Дивовижно! 👽
## Вправа - створення додатку Flask
Тепер ви можете створити додаток Flask, щоб викликати вашу модель і повертати схожі результати, але у більш візуально приємний спосіб.
1. Почніть зі створення папки **web-app** поруч із файлом _notebook.ipynb_, де знаходиться ваш файл _ufo-model.pkl_.
1. У цій папці створіть ще три папки: **static**, з папкою **css** всередині, і **templates**. Тепер у вас повинні бути наступні файли та каталоги:
```output
web-app/
static/
css/
templates/
notebook.ipynb
ufo-model.pkl
```
✅ Зверніться до папки рішення, щоб побачити готовий додаток
1. Перший файл, який потрібно створити в папці _web-app_, це файл **requirements.txt**. Як _package.json_ у додатку на JavaScript, цей файл містить залежності, необхідні для додатку. У **requirements.txt** додайте рядки:
```text
scikit-learn
pandas
numpy
flask
```
1. Тепер запустіть цей файл, перейшовши до _web-app_:
```bash
cd web-app
```
1. У вашому терміналі введіть `pip install`, щоб встановити бібліотеки, зазначені в _requirements.txt_:
```bash
pip install -r requirements.txt
```
1. Тепер ви готові створити ще три файли, щоб завершити додаток:
1. Створіть **app.py** у кореневій папці.
2. Створіть **index.html** у папці _templates_.
3. Створіть **styles.css** у папці _static/css_.
1. Заповніть файл _styles.css_ кількома стилями:
```css
body {
width: 100%;
height: 100%;
font-family: 'Helvetica';
background: black;
color: #fff;
text-align: center;
letter-spacing: 1.4px;
font-size: 30px;
}
input {
min-width: 150px;
}
.grid {
width: 300px;
border: 1px solid #2d2d2d;
display: grid;
justify-content: center;
margin: 20px auto;
}
.box {
color: #fff;
background: #2d2d2d;
padding: 12px;
display: inline-block;
}
```
1. Далі, заповніть файл _index.html_:
```html
🛸 UFO Appearance Prediction! 👽
According to the number of seconds, latitude and longitude, which country is likely to have reported seeing a UFO?
{{ prediction_text }}
```
Зверніть увагу на шаблонізацію в цьому файлі. Зверніть увагу на синтаксис "вусів" навколо змінних, які будуть надані додатком, наприклад текст прогнозу: `{{}}`. Тут також є форма, яка надсилає прогноз на маршрут `/predict`.
Нарешті, ви готові створити файл Python, який керує використанням моделі та відображенням прогнозів:
1. У `app.py` додайте:
```python
import numpy as np
from flask import Flask, request, render_template
import pickle
app = Flask(__name__)
model = pickle.load(open("./ufo-model.pkl", "rb"))
@app.route("/")
def home():
return render_template("index.html")
@app.route("/predict", methods=["POST"])
def predict():
int_features = [int(x) for x in request.form.values()]
final_features = [np.array(int_features)]
prediction = model.predict(final_features)
output = prediction[0]
countries = ["Australia", "Canada", "Germany", "UK", "US"]
return render_template(
"index.html", prediction_text="Likely country: {}".format(countries[output])
)
if __name__ == "__main__":
app.run(debug=True)
```
> 💡 Порада: коли ви додаєте [`debug=True`](https://www.askpython.com/python-modules/flask/flask-debug-mode) під час запуску веб-додатку за допомогою Flask, будь-які зміни, які ви вносите у ваш додаток, будуть відображатися негайно без необхідності перезапуску сервера. Будьте обережні! Не вмикайте цей режим у продуктивному додатку.
Якщо ви запустите `python app.py` або `python3 app.py`, ваш веб-сервер запуститься локально, і ви зможете заповнити коротку форму, щоб отримати відповідь на ваше запитання про те, де були помічені НЛО!
Перед тим, як це зробити, погляньте на частини `app.py`:
1. Спочатку завантажуються залежності і запускається додаток.
1. Потім імпортується модель.
1. Потім на домашньому маршруті відображається index.html.
На маршруті `/predict` відбувається кілька речей, коли форма надсилається:
1. Змінні форми збираються і перетворюються у масив numpy. Потім вони надсилаються до моделі, і повертається прогноз.
2. Країни, які ми хочемо відобразити, перетворюються у читабельний текст із їхнього передбаченого коду країни, і це значення повертається до index.html для відображення у шаблоні.
Використовувати модель таким чином, за допомогою Flask і запакованої моделі, досить просто. Найскладніше — зрозуміти, яку форму дані повинні мати, щоб їх можна було надіслати до моделі для отримання прогнозу. Це залежить від того, як модель була тренована. У цьому випадку потрібно ввести три точки даних, щоб отримати прогноз.
У професійному середовищі ви можете побачити, наскільки важливим є гарна комунікація між людьми, які тренують модель, і тими, хто використовує її у веб- або мобільному додатку. У нашому випадку це лише одна людина — ви!
---
## 🚀 Виклик
Замість того, щоб працювати у ноутбуці та імпортувати модель у додаток Flask, ви могли б тренувати модель прямо у додатку Flask! Спробуйте перетворити ваш код Python у ноутбуці, можливо, після очищення даних, щоб тренувати модель прямо у додатку на маршруті `train`. Які плюси і мінуси цього методу?
## [Тест після лекції](https://ff-quizzes.netlify.app/en/ml/)
## Огляд і самостійне навчання
Існує багато способів створення веб-додатку для використання ML моделей. Складіть список способів, якими ви могли б використовувати JavaScript або Python для створення веб-додатку, що використовує машинне навчання. Розгляньте архітектуру: чи повинна модель залишатися у додатку або жити у хмарі? Якщо останнє, як ви б її отримували? Намалюйте архітектурну модель для прикладного ML веб-рішення.
## Завдання
[Спробуйте іншу модель](assignment.md)
---
**Відмова від відповідальності**:
Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ мовою оригіналу слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.