# Építs egy konyhai ajánló webalkalmazást
Ebben a leckében egy osztályozási modellt fogsz építeni, felhasználva az előző leckékben tanult technikákat, valamint a sorozat során használt ízletes konyhai adatbázist. Ezen kívül egy kis webalkalmazást is készítesz, amely egy mentett modellt használ, az Onnx webes futtatókörnyezetét kihasználva.
A gépi tanulás egyik legpraktikusabb alkalmazása az ajánlórendszerek építése, és ma te is megteheted az első lépést ebbe az irányba!
[](https://youtu.be/17wdM9AHMfg "Alkalmazott ML")
> 🎥 Kattints a fenti képre a videóért: Jen Looper egy webalkalmazást épít osztályozott konyhai adatokkal
## [Előzetes kvíz](https://ff-quizzes.netlify.app/en/ml/)
Ebben a leckében megtanulod:
- Hogyan építs modellt és mentsd el Onnx formátumban
- Hogyan használd a Netron-t a modell vizsgálatához
- Hogyan használd a modelledet egy webalkalmazásban következtetéshez
## Építsd meg a modelledet
Az alkalmazott gépi tanulási rendszerek építése fontos része annak, hogy ezeket a technológiákat üzleti rendszereidben hasznosítsd. A modelleket webalkalmazásokban is használhatod (így offline környezetben is, ha szükséges), az Onnx segítségével.
Egy [korábbi leckében](../../3-Web-App/1-Web-App/README.md) egy regressziós modellt építettél UFO észlelésekről, "pickle"-be mentetted, és egy Flask alkalmazásban használtad. Bár ez az architektúra nagyon hasznos, egy teljes Python alapú alkalmazás, és az igényeid között szerepelhet egy JavaScript alkalmazás használata.
Ebben a leckében egy alapvető JavaScript-alapú rendszert építhetsz következtetéshez. Először azonban egy modellt kell betanítanod, és átalakítanod Onnx formátumra.
## Gyakorlat - osztályozási modell betanítása
Először is, taníts be egy osztályozási modellt a korábban használt tisztított konyhai adatbázis segítségével.
1. Kezdd azzal, hogy importálod a szükséges könyvtárakat:
```python
!pip install skl2onnx
import pandas as pd
```
Szükséged lesz a '[skl2onnx](https://onnx.ai/sklearn-onnx/)' könyvtárra, hogy a Scikit-learn modelledet Onnx formátumra konvertáld.
1. Ezután dolgozz az adataiddal ugyanúgy, ahogy az előző leckékben, olvasd be a CSV fájlt a `read_csv()` segítségével:
```python
data = pd.read_csv('../data/cleaned_cuisines.csv')
data.head()
```
1. Távolítsd el az első két felesleges oszlopot, és mentsd el a fennmaradó adatokat 'X' néven:
```python
X = data.iloc[:,2:]
X.head()
```
1. Mentsd el a címkéket 'y' néven:
```python
y = data[['cuisine']]
y.head()
```
### Kezdd el a betanítási folyamatot
Az 'SVC' könyvtárat fogjuk használni, amely jó pontosságot biztosít.
1. Importáld a megfelelő könyvtárakat a Scikit-learn-ből:
```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. Válaszd szét a betanítási és tesztkészleteket:
```python
X_train, X_test, y_train, y_test = train_test_split(X,y,test_size=0.3)
```
1. Építs egy SVC osztályozási modellt, ahogy az előző leckében:
```python
model = SVC(kernel='linear', C=10, probability=True,random_state=0)
model.fit(X_train,y_train.values.ravel())
```
1. Most teszteld a modelledet a `predict()` hívásával:
```python
y_pred = model.predict(X_test)
```
1. Nyomtass ki egy osztályozási jelentést, hogy ellenőrizd a modell minőségét:
```python
print(classification_report(y_test,y_pred))
```
Ahogy korábban láttuk, a pontosság jó:
```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
```
### Konvertáld a modelledet Onnx formátumra
Győződj meg róla, hogy a konverziót a megfelelő Tensor számmal végzed. Ez az adatbázis 380 összetevőt tartalmaz, így ezt a számot meg kell adnod a `FloatTensorType`-ban:
1. Konvertáld 380-as tensor számmal.
```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. Hozd létre az onx fájlt, és mentsd el **model.onnx** néven:
```python
onx = convert_sklearn(model, initial_types=initial_type, options=options)
with open("./model.onnx", "wb") as f:
f.write(onx.SerializeToString())
```
> Fontos, hogy [opciókat](https://onnx.ai/sklearn-onnx/parameterized.html) adhatsz meg a konverziós szkriptben. Ebben az esetben a 'nocl' értéket True-ra, a 'zipmap' értéket False-ra állítottuk. Mivel ez egy osztályozási modell, lehetőséged van eltávolítani a ZipMap-et, amely egy listát készít szótárakból (nem szükséges). A `nocl` arra utal, hogy az osztályinformációk szerepelnek-e a modellben. Csökkentsd a modell méretét a `nocl` True-ra állításával.
A teljes notebook futtatása most létrehozza az Onnx modellt, és elmenti ebbe a mappába.
## Tekintsd meg a modelledet
Az Onnx modellek nem láthatók jól a Visual Studio Code-ban, de van egy nagyon jó ingyenes szoftver, amelyet sok kutató használ a modellek vizualizálására, hogy megbizonyosodjon arról, hogy megfelelően épültek. Töltsd le a [Netron](https://github.com/lutzroeder/Netron) programot, és nyisd meg a model.onnx fájlt. Láthatod az egyszerű modelledet vizualizálva, a 380 bemenettel és az osztályozóval:
A Netron egy hasznos eszköz a modellek megtekintéséhez.
Most készen állsz arra, hogy ezt az ügyes modellt egy webalkalmazásban használd. Építsünk egy alkalmazást, amely hasznos lehet, amikor a hűtőszekrényedbe nézel, és megpróbálod kitalálni, hogy a maradék összetevők kombinációjával milyen konyhát készíthetsz, ahogy azt a modelled meghatározza.
## Építs egy ajánló webalkalmazást
A modelledet közvetlenül egy webalkalmazásban használhatod. Ez az architektúra lehetővé teszi, hogy helyben és akár offline is futtasd. Kezdd azzal, hogy létrehozol egy `index.html` fájlt abban a mappában, ahol a `model.onnx` fájl található.
1. Ebben a fájlban _index.html_, add hozzá a következő jelölést:
```html
Cuisine Matcher
...
```
1. Most, a `body` címkék között adj hozzá egy kis jelölést, amely néhány összetevőt tükröző jelölőnégyzeteket mutat:
```html
Check your refrigerator. What can you create?
```
Figyeld meg, hogy minden jelölőnégyzethez érték van rendelve. Ez tükrözi az összetevő helyét az adatbázis szerint. Az alma például ebben az ábécé szerinti listában az ötödik oszlopot foglalja el, így az értéke '4', mivel 0-tól kezdünk számolni. Az összetevők indexét a [összetevők táblázatában](../../../../4-Classification/data/ingredient_indexes.csv) találhatod meg.
Folytatva a munkát az index.html fájlban, adj hozzá egy szkript blokkot, ahol a modell hívása történik a végső záró `` után.
1. Először importáld az [Onnx Runtime](https://www.onnxruntime.ai/) könyvtárat:
```html
```
> Az Onnx Runtime lehetővé teszi, hogy az Onnx modelleket különböző hardverplatformokon futtasd, optimalizálásokkal és egy API-val.
1. Miután a Runtime helyén van, hívd meg:
```html
```
Ebben a kódban több dolog történik:
1. Létrehoztál egy 380 lehetséges értéket (1 vagy 0) tartalmazó tömböt, amelyet beállítasz és elküldesz a modellnek következtetéshez, attól függően, hogy egy összetevő jelölőnégyzet be van-e jelölve.
2. Létrehoztál egy jelölőnégyzetek tömbjét és egy módot annak meghatározására, hogy be vannak-e jelölve egy `init` függvényben, amelyet az alkalmazás indításakor hívsz meg. Amikor egy jelölőnégyzet be van jelölve, az `ingredients` tömb módosul, hogy tükrözze a kiválasztott összetevőt.
3. Létrehoztál egy `testCheckboxes` függvényt, amely ellenőrzi, hogy van-e bejelölt jelölőnégyzet.
4. A `startInference` függvényt használod, amikor a gombot megnyomják, és ha van bejelölt jelölőnégyzet, elindítod a következtetést.
5. A következtetési rutin tartalmazza:
1. A modell aszinkron betöltésének beállítását
2. Egy Tensor struktúra létrehozását, amelyet elküldesz a modellnek
3. 'Feeds' létrehozását, amely tükrözi a `float_input` bemenetet, amelyet a modelled betanításakor hoztál létre (a Netron segítségével ellenőrizheted ezt a nevet)
4. Ezeknek a 'feeds'-eknek a modellhez való elküldését és a válasz megvárását
## Teszteld az alkalmazásodat
Nyiss egy terminálablakot a Visual Studio Code-ban abban a mappában, ahol az index.html fájl található. Győződj meg róla, hogy a [http-server](https://www.npmjs.com/package/http-server) globálisan telepítve van, és írd be a `http-server` parancsot. Egy localhost megnyílik, és megtekintheted a webalkalmazásodat. Ellenőrizd, hogy milyen konyhát ajánl a különböző összetevők alapján:
Gratulálok, létrehoztál egy 'ajánló' webalkalmazást néhány mezővel. Szánj időt arra, hogy továbbfejleszd ezt a rendszert!
## 🚀Kihívás
A webalkalmazásod nagyon minimális, így folytasd a fejlesztését az összetevők és azok indexei alapján a [összetevők indexei](../../../../4-Classification/data/ingredient_indexes.csv) adatból. Milyen ízkombinációk működnek egy adott nemzeti étel elkészítéséhez?
## [Utólagos kvíz](https://ff-quizzes.netlify.app/en/ml/)
## Áttekintés és önálló tanulás
Bár ez a lecke csak érintette az ételösszetevők ajánlórendszerének létrehozásának hasznosságát, ez a gépi tanulási alkalmazások területe nagyon gazdag példákban. Olvass többet arról, hogyan épülnek ezek a rendszerek:
- 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/
## Feladat
[Építs egy új ajánlót](assignment.md)
---
**Felelősség kizárása**:
Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.