# Bygg en webapp for matanbefalinger
I denne leksjonen skal du bygge en klassifiseringsmodell ved hjelp av noen av teknikkene du har lært i tidligere leksjoner, samt det deilige matdatasettet som har blitt brukt gjennom denne serien. I tillegg skal du lage en liten webapp for å bruke en lagret modell, ved hjelp av Onnx sin web-runtime.
En av de mest nyttige praktiske bruksområdene for maskinlæring er å lage anbefalingssystemer, og du kan ta det første steget i den retningen i dag!
[](https://youtu.be/17wdM9AHMfg "Applied ML")
> 🎥 Klikk på bildet over for en video: Jen Looper lager en webapp ved hjelp av klassifisert matdata
## [Quiz før leksjonen](https://ff-quizzes.netlify.app/en/ml/)
I denne leksjonen vil du lære:
- Hvordan bygge en modell og lagre den som en Onnx-modell
- Hvordan bruke Netron for å inspisere modellen
- Hvordan bruke modellen din i en webapp for inferens
## Bygg modellen din
Å bygge anvendte ML-systemer er en viktig del av å utnytte disse teknologiene for dine forretningssystemer. Du kan bruke modeller i webapplikasjonene dine (og dermed bruke dem i en offline-kontekst om nødvendig) ved hjelp av Onnx.
I en [tidligere leksjon](../../3-Web-App/1-Web-App/README.md) bygde du en regresjonsmodell om UFO-observasjoner, "picklet" den, og brukte den i en Flask-app. Selv om denne arkitekturen er veldig nyttig å kjenne til, er det en full-stack Python-app, og kravene dine kan inkludere bruk av en JavaScript-applikasjon.
I denne leksjonen kan du bygge et grunnleggende JavaScript-basert system for inferens. Først må du imidlertid trene en modell og konvertere den for bruk med Onnx.
## Øvelse - tren klassifiseringsmodell
Først, tren en klassifiseringsmodell ved hjelp av det rensede matdatasettet vi brukte.
1. Start med å importere nyttige biblioteker:
```python
!pip install skl2onnx
import pandas as pd
```
Du trenger '[skl2onnx](https://onnx.ai/sklearn-onnx/)' for å hjelpe med å konvertere Scikit-learn-modellen din til Onnx-format.
1. Deretter, arbeid med dataene dine på samme måte som du gjorde i tidligere leksjoner, ved å lese en CSV-fil med `read_csv()`:
```python
data = pd.read_csv('../data/cleaned_cuisines.csv')
data.head()
```
1. Fjern de to første unødvendige kolonnene og lagre de gjenværende dataene som 'X':
```python
X = data.iloc[:,2:]
X.head()
```
1. Lagre etikettene som 'y':
```python
y = data[['cuisine']]
y.head()
```
### Start treningsrutinen
Vi skal bruke 'SVC'-biblioteket som har god nøyaktighet.
1. Importer de relevante bibliotekene fra 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. Del opp trenings- og testsett:
```python
X_train, X_test, y_train, y_test = train_test_split(X,y,test_size=0.3)
```
1. Bygg en SVC-klassifiseringsmodell slik du gjorde i den forrige leksjonen:
```python
model = SVC(kernel='linear', C=10, probability=True,random_state=0)
model.fit(X_train,y_train.values.ravel())
```
1. Test modellen din ved å kalle `predict()`:
```python
y_pred = model.predict(X_test)
```
1. Skriv ut en klassifiseringsrapport for å sjekke modellens kvalitet:
```python
print(classification_report(y_test,y_pred))
```
Som vi så tidligere, er nøyaktigheten god:
```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
```
### Konverter modellen din til Onnx
Sørg for å gjøre konverteringen med riktig Tensor-nummer. Dette datasettet har 380 ingredienser oppført, så du må notere det nummeret i `FloatTensorType`:
1. Konverter med et tensor-nummer på 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. Lag onx-filen og lagre den som **model.onnx**:
```python
onx = convert_sklearn(model, initial_types=initial_type, options=options)
with open("./model.onnx", "wb") as f:
f.write(onx.SerializeToString())
```
> Merk, du kan sende inn [alternativer](https://onnx.ai/sklearn-onnx/parameterized.html) i konverteringsskriptet ditt. I dette tilfellet sendte vi inn 'nocl' som True og 'zipmap' som False. Siden dette er en klassifiseringsmodell, har du muligheten til å fjerne ZipMap som produserer en liste med ordbøker (ikke nødvendig). `nocl` refererer til klasseinformasjon som inkluderes i modellen. Reduser modellens størrelse ved å sette `nocl` til 'True'.
Hvis du kjører hele notebooken, vil du nå bygge en Onnx-modell og lagre den i denne mappen.
## Vis modellen din
Onnx-modeller er ikke veldig synlige i Visual Studio Code, men det finnes en veldig god gratis programvare som mange forskere bruker for å visualisere modellen og sikre at den er riktig bygget. Last ned [Netron](https://github.com/lutzroeder/Netron) og åpne model.onnx-filen din. Du kan se den enkle modellen visualisert, med sine 380 input og klassifiserer listet opp:
Netron er et nyttig verktøy for å se modellene dine.
Nå er du klar til å bruke denne flotte modellen i en webapp. La oss bygge en app som vil være nyttig når du ser i kjøleskapet ditt og prøver å finne ut hvilken kombinasjon av ingredienser du kan bruke for å lage en bestemt matrett, som bestemt av modellen din.
## Bygg en anbefalingswebapplikasjon
Du kan bruke modellen din direkte i en webapp. Denne arkitekturen lar deg også kjøre den lokalt og til og med offline om nødvendig. Start med å lage en `index.html`-fil i samme mappe der du lagret `model.onnx`-filen.
1. I denne filen _index.html_, legg til følgende markup:
```html
Cuisine Matcher
...
```
1. Nå, arbeid innenfor `body`-taggene, og legg til litt markup for å vise en liste med avkrysningsbokser som reflekterer noen ingredienser:
```html
Check your refrigerator. What can you create?
```
Legg merke til at hver avkrysningsboks har en verdi. Dette reflekterer indeksen der ingrediensen finnes i henhold til datasettet. Eple, for eksempel, i denne alfabetiske listen, opptar den femte kolonnen, så verdien er '4' siden vi begynner å telle fra 0. Du kan konsultere [ingredients spreadsheet](../../../../4-Classification/data/ingredient_indexes.csv) for å finne en gitt ingrediens sin indeks.
Fortsett arbeidet ditt i index.html-filen, og legg til en script-blokk der modellen kalles etter den siste lukkende ``.
1. Først, importer [Onnx Runtime](https://www.onnxruntime.ai/):
```html
```
> Onnx Runtime brukes for å muliggjøre kjøring av Onnx-modeller på tvers av et bredt spekter av maskinvareplattformer, inkludert optimaliseringer og en API for bruk.
1. Når Runtime er på plass, kan du kalle den:
```html
```
I denne koden skjer det flere ting:
1. Du opprettet et array med 380 mulige verdier (1 eller 0) som skal settes og sendes til modellen for inferens, avhengig av om en ingrediens avkrysningsboks er krysset av.
2. Du opprettet et array med avkrysningsbokser og en måte å avgjøre om de var krysset av i en `init`-funksjon som kalles når applikasjonen starter. Når en avkrysningsboks er krysset av, endres `ingredients`-arrayet for å reflektere den valgte ingrediensen.
3. Du opprettet en `testCheckboxes`-funksjon som sjekker om noen avkrysningsboks er krysset av.
4. Du bruker `startInference`-funksjonen når knappen trykkes, og hvis noen avkrysningsboks er krysset av, starter du inferens.
5. Inferensrutinen inkluderer:
1. Oppsett av en asynkron last av modellen
2. Opprettelse av en Tensor-struktur som skal sendes til modellen
3. Opprettelse av 'feeds' som reflekterer `float_input`-input som du opprettet da du trente modellen din (du kan bruke Netron for å verifisere det navnet)
4. Sending av disse 'feeds' til modellen og venter på et svar
## Test applikasjonen din
Åpne en terminalsesjon i Visual Studio Code i mappen der index.html-filen din ligger. Sørg for at du har [http-server](https://www.npmjs.com/package/http-server) installert globalt, og skriv `http-server` ved ledeteksten. En localhost skal åpne seg, og du kan se webappen din. Sjekk hvilken matrett som anbefales basert på ulike ingredienser:
Gratulerer, du har laget en 'anbefalings'-webapp med noen få felt. Ta deg tid til å bygge ut dette systemet!
## 🚀Utfordring
Webappen din er veldig enkel, så fortsett å bygge den ut ved hjelp av ingredienser og deres indekser fra [ingredient_indexes](../../../../4-Classification/data/ingredient_indexes.csv)-data. Hvilke smakskombinasjoner fungerer for å lage en gitt nasjonalrett?
## [Quiz etter leksjonen](https://ff-quizzes.netlify.app/en/ml/)
## Gjennomgang og selvstudium
Selv om denne leksjonen bare berørte nytten av å lage et anbefalingssystem for matingredienser, er dette området innen ML-applikasjoner veldig rikt på eksempler. Les mer om hvordan disse systemene bygges:
- 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/
## Oppgave
[Bygg en ny anbefaler](assignment.md)
---
**Ansvarsfraskrivelse**:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.