# Zgradite spletno aplikacijo za priporočanje kulinarike
V tej lekciji boste zgradili model za klasifikacijo z uporabo nekaterih tehnik, ki ste se jih naučili v prejšnjih lekcijah, ter z okusnim kulinaričnim naborom podatkov, ki smo ga uporabljali skozi celotno serijo. Poleg tega boste zgradili majhno spletno aplikacijo, ki bo uporabljala shranjen model, pri čemer boste izkoristili Onnx-ov spletni runtime.
Ena najbolj uporabnih praktičnih aplikacij strojnega učenja je gradnja sistemov za priporočanje, in danes lahko naredite prvi korak v tej smeri!
[](https://youtu.be/17wdM9AHMfg "Applied ML")
> 🎥 Kliknite zgornjo sliko za video: Jen Looper gradi spletno aplikacijo z uporabo klasificiranih kulinaričnih podatkov
## [Predlekcijski kviz](https://ff-quizzes.netlify.app/en/ml/)
V tej lekciji se boste naučili:
- Kako zgraditi model in ga shraniti kot Onnx model
- Kako uporabiti Netron za pregled modela
- Kako uporabiti vaš model v spletni aplikaciji za sklepanje
## Zgradite svoj model
Gradnja aplikativnih sistemov strojnega učenja je pomemben del uporabe teh tehnologij v poslovnih sistemih. Modele lahko uporabite znotraj svojih spletnih aplikacij (in jih tako po potrebi uporabite v offline kontekstu) z uporabo Onnx-a.
V [prejšnji lekciji](../../3-Web-App/1-Web-App/README.md) ste zgradili regresijski model o opažanjih NLP-jev, ga "pickle-ali" in uporabili v Flask aplikaciji. Čeprav je ta arhitektura zelo uporabna, gre za polno Python aplikacijo, vaše zahteve pa lahko vključujejo uporabo JavaScript aplikacije.
V tej lekciji lahko zgradite osnovni sistem za sklepanje, ki temelji na JavaScript-u. Najprej pa morate trenirati model in ga pretvoriti za uporabo z Onnx-om.
## Naloga - trenirajte klasifikacijski model
Najprej trenirajte klasifikacijski model z uporabo očiščenega nabora podatkov o kulinariki, ki smo ga uporabljali.
1. Začnite z uvozom uporabnih knjižnic:
```python
!pip install skl2onnx
import pandas as pd
```
Potrebujete '[skl2onnx](https://onnx.ai/sklearn-onnx/)', da pomagate pretvoriti vaš Scikit-learn model v Onnx format.
1. Nato obdelajte podatke na enak način kot v prejšnjih lekcijah, tako da preberete CSV datoteko z uporabo `read_csv()`:
```python
data = pd.read_csv('../data/cleaned_cuisines.csv')
data.head()
```
1. Odstranite prvi dve nepotrebni stolpci in shranite preostale podatke kot 'X':
```python
X = data.iloc[:,2:]
X.head()
```
1. Shranite oznake kot 'y':
```python
y = data[['cuisine']]
y.head()
```
### Začnite rutino treniranja
Uporabili bomo knjižnico 'SVC', ki ima dobro natančnost.
1. Uvozite ustrezne knjižnice iz Scikit-learn:
```python
from sklearn.model_selection import train_test_split
from sklearn.svm import SVC
from sklearn.model_selection import cross_val_score
from sklearn.metrics import accuracy_score,precision_score,confusion_matrix,classification_report
```
1. Ločite podatke na učne in testne sklope:
```python
X_train, X_test, y_train, y_test = train_test_split(X,y,test_size=0.3)
```
1. Zgradite klasifikacijski model SVC, kot ste to storili v prejšnji lekciji:
```python
model = SVC(kernel='linear', C=10, probability=True,random_state=0)
model.fit(X_train,y_train.values.ravel())
```
1. Zdaj preizkusite svoj model z uporabo `predict()`:
```python
y_pred = model.predict(X_test)
```
1. Izpišite poročilo o klasifikaciji, da preverite kakovost modela:
```python
print(classification_report(y_test,y_pred))
```
Kot smo videli prej, je natančnost dobra:
```output
precision recall f1-score support
chinese 0.72 0.69 0.70 257
indian 0.91 0.87 0.89 243
japanese 0.79 0.77 0.78 239
korean 0.83 0.79 0.81 236
thai 0.72 0.84 0.78 224
accuracy 0.79 1199
macro avg 0.79 0.79 0.79 1199
weighted avg 0.79 0.79 0.79 1199
```
### Pretvorite svoj model v Onnx
Poskrbite, da bo pretvorba izvedena z ustreznim številom tenzorjev. Ta nabor podatkov ima 380 sestavin, zato morate to število označiti v `FloatTensorType`:
1. Pretvorite z uporabo števila tenzorjev 380.
```python
from skl2onnx import convert_sklearn
from skl2onnx.common.data_types import FloatTensorType
initial_type = [('float_input', FloatTensorType([None, 380]))]
options = {id(model): {'nocl': True, 'zipmap': False}}
```
1. Ustvarite onx in shranite kot datoteko **model.onnx**:
```python
onx = convert_sklearn(model, initial_types=initial_type, options=options)
with open("./model.onnx", "wb") as f:
f.write(onx.SerializeToString())
```
> Opomba: V vašem skriptu za pretvorbo lahko podate [možnosti](https://onnx.ai/sklearn-onnx/parameterized.html). V tem primeru smo nastavili 'nocl' na True in 'zipmap' na False. Ker gre za klasifikacijski model, imate možnost odstraniti ZipMap, ki ustvari seznam slovarjev (ni potrebno). `nocl` se nanaša na vključitev informacij o razredih v model. Zmanjšajte velikost modela tako, da nastavite `nocl` na 'True'.
Zagon celotnega zvezka bo zdaj zgradil Onnx model in ga shranil v to mapo.
## Preglejte svoj model
Onnx modeli niso zelo vidni v Visual Studio Code, vendar obstaja zelo dobra brezplačna programska oprema, ki jo mnogi raziskovalci uporabljajo za vizualizacijo modela, da se prepričajo, da je pravilno zgrajen. Prenesite [Netron](https://github.com/lutzroeder/Netron) in odprite datoteko model.onnx. Videli boste vizualizacijo vašega preprostega modela, z njegovimi 380 vhodi in klasifikatorjem:
Netron je uporabno orodje za pregled vaših modelov.
Zdaj ste pripravljeni uporabiti ta zanimiv model v spletni aplikaciji. Zgradimo aplikacijo, ki bo uporabna, ko boste pogledali v svoj hladilnik in poskušali ugotoviti, katero kombinacijo preostalih sestavin lahko uporabite za pripravo določene kulinarike, kot jo določi vaš model.
## Zgradite spletno aplikacijo za priporočanje
Svoj model lahko uporabite neposredno v spletni aplikaciji. Ta arhitektura omogoča tudi lokalno delovanje in celo offline uporabo, če je potrebno. Začnite z ustvarjanjem datoteke `index.html` v isti mapi, kjer ste shranili svojo datoteko `model.onnx`.
1. V tej datoteki _index.html_ dodajte naslednjo oznako:
```html
Cuisine Matcher
...
```
1. Zdaj, znotraj oznak `body`, dodajte nekaj oznak za prikaz seznama potrditvenih polj, ki odražajo nekatere sestavine:
```html
Check your refrigerator. What can you create?
```
Opazite, da je vsakemu potrditvenemu polju dodeljena vrednost. To odraža indeks, kjer je sestavina najdena glede na nabor podatkov. Jabolko, na primer, v tem abecednem seznamu zaseda peti stolpec, zato je njegova vrednost '4', saj začnemo šteti pri 0. Posvetujte se s [preglednico sestavin](../../../../4-Classification/data/ingredient_indexes.csv), da odkrijete indeks določene sestavine.
Nadaljujte delo v datoteki index.html in dodajte blok skripta, kjer je model poklican po zadnjem zapiralnem ``.
1. Najprej uvozite [Onnx Runtime](https://www.onnxruntime.ai/):
```html
```
> Onnx Runtime omogoča izvajanje vaših Onnx modelov na širokem spektru strojne opreme, vključno z optimizacijami in API-jem za uporabo.
1. Ko je Runtime na mestu, ga lahko pokličete:
```html
```
V tej kodi se dogaja več stvari:
1. Ustvarili ste polje 380 možnih vrednosti (1 ali 0), ki se nastavijo in pošljejo modelu za sklepanje, odvisno od tega, ali je potrditveno polje označeno.
2. Ustvarili ste polje potrditvenih polj in način za določanje, ali so označena, v funkciji `init`, ki se pokliče ob zagonu aplikacije. Ko je potrditveno polje označeno, se polje `ingredients` spremeni, da odraža izbrano sestavino.
3. Ustvarili ste funkcijo `testCheckboxes`, ki preverja, ali je bilo katero potrditveno polje označeno.
4. Uporabite funkcijo `startInference`, ko je gumb pritisnjen, in če je katero potrditveno polje označeno, začnete sklepanje.
5. Rutina sklepanja vključuje:
1. Nastavitev asinhronega nalaganja modela
2. Ustvarjanje strukture Tensor za pošiljanje modelu
3. Ustvarjanje 'feeds', ki odražajo vhod `float_input`, ki ste ga ustvarili med treniranjem modela (lahko uporabite Netron za preverjanje tega imena)
4. Pošiljanje teh 'feeds' modelu in čakanje na odgovor
## Preizkusite svojo aplikacijo
Odprite terminal v Visual Studio Code v mapi, kjer se nahaja vaša datoteka index.html. Poskrbite, da imate [http-server](https://www.npmjs.com/package/http-server) globalno nameščen, in vnesite `http-server` v ukazni vrstici. Odpre se localhost, kjer lahko vidite svojo spletno aplikacijo. Preverite, katera kulinarika je priporočena glede na različne sestavine:
Čestitamo, ustvarili ste spletno aplikacijo za 'priporočanje' z nekaj polji. Vzemite si čas za nadgradnjo tega sistema!
## 🚀Izziv
Vaša spletna aplikacija je zelo osnovna, zato jo nadaljujte z nadgradnjo z uporabo sestavin in njihovih indeksov iz podatkov [ingredient_indexes](../../../../4-Classification/data/ingredient_indexes.csv). Katere kombinacije okusov delujejo za pripravo določene nacionalne jedi?
## [Po-lekcijski kviz](https://ff-quizzes.netlify.app/en/ml/)
## Pregled in samostojno učenje
Čeprav je ta lekcija le na kratko obravnavala uporabnost ustvarjanja sistema za priporočanje sestavin, je to področje aplikacij strojnega učenja zelo bogato z zgledi. Preberite več o tem, kako so ti sistemi zgrajeni:
- https://www.sciencedirect.com/topics/computer-science/recommendation-engine
- https://www.technologyreview.com/2014/08/25/171547/the-ultimate-challenge-for-recommendation-engines/
- https://www.technologyreview.com/2015/03/23/168831/everything-is-a-recommendation/
## Naloga
[Zgradite nov sistem za priporočanje](assignment.md)
---
**Omejitev odgovornosti**:
Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da se zavedate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo strokovno človeško prevajanje. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki izhajajo iz uporabe tega prevoda.