# Bygg en webapp för matrekommendationer
I den här lektionen kommer du att bygga en klassificeringsmodell med hjälp av några av de tekniker du har lärt dig i tidigare lektioner och med det läckra datasetet om mat som används genom hela denna serie. Dessutom kommer du att bygga en liten webapp för att använda en sparad modell, med hjälp av Onnx:s web runtime.
En av de mest praktiska användningarna av maskininlärning är att bygga rekommendationssystem, och idag kan du ta det första steget i den riktningen!
[](https://youtu.be/17wdM9AHMfg "Applied ML")
> 🎥 Klicka på bilden ovan för en video: Jen Looper bygger en webapp med klassificerad matdata
## [Quiz före lektionen](https://ff-quizzes.netlify.app/en/ml/)
I den här lektionen kommer du att lära dig:
- Hur man bygger en modell och sparar den som en Onnx-modell
- Hur man använder Netron för att inspektera modellen
- Hur man använder din modell i en webapp för inferens
## Bygg din modell
Att bygga tillämpade ML-system är en viktig del av att utnyttja dessa teknologier för dina affärssystem. Du kan använda modeller inom dina webbapplikationer (och därmed använda dem offline om det behövs) genom att använda Onnx.
I en [tidigare lektion](../../3-Web-App/1-Web-App/README.md) byggde du en regressionsmodell om UFO-observationer, "picklade" den och använde den i en Flask-app. Även om denna arkitektur är mycket användbar att känna till, är det en fullstack Python-app, och dina krav kan inkludera användning av en JavaScript-applikation.
I den här lektionen kan du bygga ett grundläggande JavaScript-baserat system för inferens. Först måste du dock träna en modell och konvertera den för användning med Onnx.
## Övning - träna klassificeringsmodell
Först, träna en klassificeringsmodell med det rensade datasetet om mat som vi använde.
1. Börja med att importera användbara bibliotek:
```python
!pip install skl2onnx
import pandas as pd
```
Du behöver '[skl2onnx](https://onnx.ai/sklearn-onnx/)' för att hjälpa till att konvertera din Scikit-learn-modell till Onnx-format.
1. Arbeta sedan med din data på samma sätt som du gjorde i tidigare lektioner, genom att läsa en CSV-fil med `read_csv()`:
```python
data = pd.read_csv('../data/cleaned_cuisines.csv')
data.head()
```
1. Ta bort de två första onödiga kolumnerna och spara den återstående datan som 'X':
```python
X = data.iloc[:,2:]
X.head()
```
1. Spara etiketterna som 'y':
```python
y = data[['cuisine']]
y.head()
```
### Starta träningsrutinen
Vi kommer att använda biblioteket 'SVC' som har bra noggrannhet.
1. Importera lämpliga bibliotek från 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. Separera tränings- och testuppsättningar:
```python
X_train, X_test, y_train, y_test = train_test_split(X,y,test_size=0.3)
```
1. Bygg en SVC-klassificeringsmodell som du gjorde i den tidigare lektionen:
```python
model = SVC(kernel='linear', C=10, probability=True,random_state=0)
model.fit(X_train,y_train.values.ravel())
```
1. Testa nu din modell genom att kalla på `predict()`:
```python
y_pred = model.predict(X_test)
```
1. Skriv ut en klassificeringsrapport för att kontrollera modellens kvalitet:
```python
print(classification_report(y_test,y_pred))
```
Som vi såg tidigare är noggrannheten bra:
```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
```
### Konvertera din modell till Onnx
Se till att göra konverteringen med rätt Tensor-nummer. Detta dataset har 380 ingredienser listade, så du behöver ange det numret i `FloatTensorType`:
1. Konvertera med ett tensornummer 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. Skapa onx och spara som en fil **model.onnx**:
```python
onx = convert_sklearn(model, initial_types=initial_type, options=options)
with open("./model.onnx", "wb") as f:
f.write(onx.SerializeToString())
```
> Observera att du kan skicka in [alternativ](https://onnx.ai/sklearn-onnx/parameterized.html) i ditt konverteringsskript. I detta fall skickade vi in 'nocl' som True och 'zipmap' som False. Eftersom detta är en klassificeringsmodell har du möjlighet att ta bort ZipMap som producerar en lista med ordböcker (inte nödvändigt). `nocl` hänvisar till att klassinformation inkluderas i modellen. Minska modellens storlek genom att ställa in `nocl` till 'True'.
Om du kör hela notebooken kommer du nu att bygga en Onnx-modell och spara den i den här mappen.
## Visa din modell
Onnx-modeller är inte särskilt synliga i Visual Studio Code, men det finns en mycket bra gratis programvara som många forskare använder för att visualisera modellen och säkerställa att den är korrekt byggd. Ladda ner [Netron](https://github.com/lutzroeder/Netron) och öppna din model.onnx-fil. Du kan se din enkla modell visualiserad, med dess 380 ingångar och klassificerare listade:
Netron är ett användbart verktyg för att visa dina modeller.
Nu är du redo att använda denna smarta modell i en webapp. Låt oss bygga en app som kommer till nytta när du tittar i ditt kylskåp och försöker lista ut vilken kombination av dina kvarvarande ingredienser du kan använda för att laga en viss maträtt, som bestäms av din modell.
## Bygg en webapplikation för rekommendationer
Du kan använda din modell direkt i en webapp. Denna arkitektur gör det också möjligt att köra den lokalt och till och med offline om det behövs. Börja med att skapa en `index.html`-fil i samma mapp där du sparade din `model.onnx`-fil.
1. I denna fil _index.html_, lägg till följande markup:
```html
Cuisine Matcher
...
```
1. Nu, inom `body`-taggarna, lägg till lite markup för att visa en lista med kryssrutor som representerar några ingredienser:
```html
Check your refrigerator. What can you create?
```
Observera att varje kryssruta har ett värde. Detta representerar indexet där ingrediensen finns enligt datasetet. Äpple, till exempel, i denna alfabetiska lista, upptar den femte kolumnen, så dess värde är '4' eftersom vi börjar räkna från 0. Du kan konsultera [ingredients spreadsheet](../../../../4-Classification/data/ingredient_indexes.csv) för att upptäcka en viss ingrediens index.
Fortsätt ditt arbete i index.html-filen och lägg till ett skriptblock där modellen anropas efter den sista stängande ``.
1. Först, importera [Onnx Runtime](https://www.onnxruntime.ai/):
```html
```
> Onnx Runtime används för att möjliggöra körning av dina Onnx-modeller över ett brett spektrum av hårdvaruplattformar, inklusive optimeringar och ett API att använda.
1. När Runtime är på plats kan du kalla på den:
```html
```
I denna kod händer flera saker:
1. Du skapade en array med 380 möjliga värden (1 eller 0) som ska ställas in och skickas till modellen för inferens, beroende på om en ingrediens kryssruta är markerad.
2. Du skapade en array med kryssrutor och ett sätt att avgöra om de var markerade i en `init`-funktion som anropas när applikationen startar. När en kryssruta är markerad ändras `ingredients`-arrayen för att återspegla den valda ingrediensen.
3. Du skapade en `testCheckboxes`-funktion som kontrollerar om någon kryssruta var markerad.
4. Du använder `startInference`-funktionen när knappen trycks och, om någon kryssruta är markerad, startar du inferens.
5. Inferensrutinen inkluderar:
1. Att sätta upp en asynkron laddning av modellen
2. Skapa en Tensor-struktur att skicka till modellen
3. Skapa 'feeds' som återspeglar `float_input`-ingången som du skapade när du tränade din modell (du kan använda Netron för att verifiera det namnet)
4. Skicka dessa 'feeds' till modellen och vänta på ett svar
## Testa din applikation
Öppna en terminalsession i Visual Studio Code i mappen där din index.html-fil finns. Se till att du har [http-server](https://www.npmjs.com/package/http-server) installerat globalt och skriv `http-server` vid prompten. En localhost bör öppnas och du kan visa din webapp. Kontrollera vilken maträtt som rekommenderas baserat på olika ingredienser:
Grattis, du har skapat en webapp för 'rekommendationer' med några fält. Ta lite tid att bygga ut detta system!
## 🚀Utmaning
Din webapp är väldigt minimal, så fortsätt att bygga ut den med ingredienser och deras index från [ingredient_indexes](../../../../4-Classification/data/ingredient_indexes.csv)-datan. Vilka smakkombinationer fungerar för att skapa en viss nationalrätt?
## [Quiz efter lektionen](https://ff-quizzes.netlify.app/en/ml/)
## Granskning & Självstudier
Även om denna lektion bara berörde nyttan av att skapa ett rekommendationssystem för matingredienser, är detta område av ML-applikationer mycket rikt på exempel. Läs mer om hur dessa system byggs:
- 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/
## Uppgift
[Bygg en ny rekommendationsmotor](assignment.md)
---
**Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, bör du vara medveten om att automatiserade översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.