# వంటక సిఫార్సు వెబ్ యాప్ నిర్మించండి

ఈ పాఠంలో, మీరు గత పాఠాలలో నేర్చుకున్న కొన్ని సాంకేతికతలను ఉపయోగించి మరియు ఈ సిరీస్ అంతటా ఉపయోగించిన రుచికరమైన వంటక డేటాసెట్‌తో ఒక వర్గీకరణ మోడల్‌ను నిర్మిస్తారు. అదనంగా, మీరు ఒక చిన్న వెబ్ యాప్‌ను నిర్మించి, సేవ్ చేసిన మోడల్‌ను ఉపయోగించడానికి Onnx యొక్క వెబ్ రన్‌టైమ్‌ను ఉపయోగిస్తారు.

యంత్ర అభ్యాసం యొక్క అత్యంత ఉపయోగకరమైన ప్రాయోగిక ఉపయోగాలలో ఒకటి సిఫార్సు వ్యవస్థలను నిర్మించడం, మరియు మీరు ఈ దిశలో మొదటి అడుగు వేయవచ్చు!

[![ఈ వెబ్ యాప్‌ను ప్రదర్శించడం](https://img.youtube.com/vi/17wdM9AHMfg/0.jpg)](https://youtu.be/17wdM9AHMfg "Applied ML")

> 🎥 వీడియో కోసం పై చిత్రాన్ని క్లిక్ చేయండి: జెన్ లూపర్ వర్గీకరించిన వంటక డేటాను ఉపయోగించి వెబ్ యాప్‌ను నిర్మిస్తున్నారు

## [పాఠం ముందు క్విజ్](https://ff-quizzes.netlify.app/en/ml/)

ఈ పాఠంలో మీరు నేర్చుకుంటారు:

- మోడల్‌ను ఎలా నిర్మించి Onnx మోడల్‌గా సేవ్ చేయాలి
- మోడల్‌ను పరిశీలించడానికి Netron ను ఎలా ఉపయోగించాలి
- మీ మోడల్‌ను వెబ్ యాప్‌లో ఇన్ఫరెన్స్ కోసం ఎలా ఉపయోగించాలి

## మీ మోడల్‌ను నిర్మించండి

అప్లైడ్ ML వ్యవస్థలను నిర్మించడం మీ వ్యాపార వ్యవస్థల కోసం ఈ సాంకేతికతలను ఉపయోగించుకోవడంలో ముఖ్యమైన భాగం. మీరు మీ వెబ్ అప్లికేషన్లలో మోడల్స్‌ను ఉపయోగించవచ్చు (అవసరమైతే ఆఫ్‌లైన్ సందర్భంలో కూడా ఉపయోగించవచ్చు) Onnx ఉపయోగించి.

[మునుపటి పాఠంలో](../../3-Web-App/1-Web-App/README.md), మీరు UFO సైట్‌ల గురించి రిగ్రెషన్ మోడల్‌ను నిర్మించి, దాన్ని "పికిల్" చేసి, Flask యాప్‌లో ఉపయోగించారు. ఈ ఆర్కిటెక్చర్ తెలుసుకోవడం చాలా ఉపయోగకరం అయినప్పటికీ, ఇది పూర్తి-స్టాక్ Python యాప్, మరియు మీ అవసరాలు JavaScript అప్లికేషన్ ఉపయోగించడాన్ని కూడా కలిగి ఉండవచ్చు.

ఈ పాఠంలో, మీరు ఇన్ఫరెన్స్ కోసం ఒక ప్రాథమిక JavaScript ఆధారిత వ్యవస్థను నిర్మించవచ్చు. అయితే, ముందుగా మీరు ఒక మోడల్‌ను శిక్షణ ఇచ్చి, దాన్ని Onnx కోసం మార్చాలి.

## వ్యాయామం - వర్గీకరణ మోడల్ శిక్షణ

ముందుగా, మనం ఉపయోగించిన శుభ్రపరిచిన వంటక డేటాసెట్‌ను ఉపయోగించి వర్గీకరణ మోడల్‌ను శిక్షణ ఇవ్వండి.

1. ఉపయోగకరమైన లైబ్రరీలను దిగుమతి చేసుకోవడం ప్రారంభించండి:

    ```python
    !pip install skl2onnx
    import pandas as pd 
    ```

    మీ Scikit-learn మోడల్‌ను Onnx ఫార్మాట్‌కు మార్చడానికి '[skl2onnx](https://onnx.ai/sklearn-onnx/)' అవసరం.

1. తరువాత, మీరు గత పాఠాలలో చేసినట్లుగా, `read_csv()` ఉపయోగించి CSV ఫైల్‌ను చదవడం ద్వారా మీ డేటాతో పని చేయండి:

    ```python
    data = pd.read_csv('../data/cleaned_cuisines.csv')
    data.head()
    ```

1. మొదటి రెండు అవసరం లేని కాలమ్స్‌ను తీసివేసి మిగిలిన డేటాను 'X'గా సేవ్ చేయండి:

    ```python
    X = data.iloc[:,2:]
    X.head()
    ```

1. లేబుల్స్‌ను 'y'గా సేవ్ చేయండి:

    ```python
    y = data[['cuisine']]
    y.head()
    
    ```

### శిక్షణ రొటీన్ ప్రారంభించండి

మనం మంచి ఖచ్చితత్వం కలిగిన 'SVC' లైబ్రరీని ఉపయోగిస్తాము.

1. 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. శిక్షణ మరియు పరీక్ష సెట్లను వేరు చేయండి:

    ```python
    X_train, X_test, y_train, y_test = train_test_split(X,y,test_size=0.3)
    ```

1. మీరు గత పాఠంలో చేసినట్లుగా SVC వర్గీకరణ మోడల్‌ను నిర్మించండి:

    ```python
    model = SVC(kernel='linear', C=10, probability=True,random_state=0)
    model.fit(X_train,y_train.values.ravel())
    ```

1. ఇప్పుడు, మీ మోడల్‌ను పరీక్షించండి, `predict()` ను పిలవండి:

    ```python
    y_pred = model.predict(X_test)
    ```

1. మోడల్ నాణ్యతను తనిఖీ చేయడానికి వర్గీకరణ నివేదికను ముద్రించండి:

    ```python
    print(classification_report(y_test,y_pred))
    ```

    మునుపటి విధంగా, ఖచ్చితత్వం మంచి ఉంది:

    ```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
    ```

### మీ మోడల్‌ను Onnx కు మార్చండి

సరైన టెన్సర్ సంఖ్యతో మార్చడం నిర్ధారించండి. ఈ డేటాసెట్‌లో 380 పదార్థాలు ఉన్నాయి, కాబట్టి మీరు `FloatTensorType` లో ఆ సంఖ్యను సూచించాలి:

1. 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. onx సృష్టించి **model.onnx** ఫైల్‌గా సేవ్ చేయండి:

    ```python
    onx = convert_sklearn(model, initial_types=initial_type, options=options)
    with open("./model.onnx", "wb") as f:
        f.write(onx.SerializeToString())
    ```

    > గమనిక, మీరు మీ మార్చే స్క్రిప్ట్‌లో [ఆప్షన్లు](https://onnx.ai/sklearn-onnx/parameterized.html) ఇవ్వవచ్చు. ఈ సందర్భంలో, 'nocl' ను True గా మరియు 'zipmap' ను False గా ఇచ్చాము. ఇది వర్గీకరణ మోడల్ కావడంతో, ZipMap ను తీసివేయవచ్చు, ఇది డిక్షనరీల జాబితాను ఉత్పత్తి చేస్తుంది (అవసరం లేదు). `nocl` అనేది మోడల్‌లో తరగతి సమాచారాన్ని సూచిస్తుంది. `nocl` ను 'True' గా సెట్ చేసి మీ మోడల్ పరిమాణాన్ని తగ్గించండి.

పూర్తి నోట్‌బుక్‌ను నడిపితే ఇప్పుడు Onnx మోడల్ నిర్మించి ఈ ఫోల్డర్‌లో సేవ్ చేస్తుంది.

## మీ మోడల్‌ను వీక్షించండి

Onnx మోడల్స్ Visual Studio కోడ్‌లో చాలా స్పష్టంగా కనిపించవు, కానీ చాలా పరిశోధకులు ఉపయోగించే ఒక మంచి ఉచిత సాఫ్ట్‌వేర్ ఉంది, ఇది మోడల్ సరిగ్గా నిర్మించబడిందో లేదో చూడటానికి ఉపయోగపడుతుంది. [Netron](https://github.com/lutzroeder/Netron) డౌన్లోడ్ చేసి మీ model.onnx ఫైల్‌ను తెరవండి. మీరు మీ సాదారణ మోడల్‌ను దాని 380 ఇన్‌పుట్లు మరియు వర్గీకరణతో చూడవచ్చు:

![Netron visual](../../../../translated_images/te/netron.a05f39410211915e.webp)

Netron మీ మోడల్స్‌ను వీక్షించడానికి సహాయక సాధనం.

ఇప్పుడు మీరు ఈ చక్కని మోడల్‌ను వెబ్ యాప్‌లో ఉపయోగించడానికి సిద్ధంగా ఉన్నారు. మీరు మీ ఫ్రిజ్‌లో ఉన్న మిగిలిన పదార్థాల కలయికను చూసి, మీ మోడల్ నిర్ణయించిన వంటకం ఏదో తెలుసుకోవడానికి ఉపయోగపడే యాప్‌ను నిర్మిద్దాం.

## సిఫార్సు వెబ్ అప్లికేషన్ నిర్మించండి

మీ మోడల్‌ను నేరుగా వెబ్ యాప్‌లో ఉపయోగించవచ్చు. ఈ ఆర్కిటెక్చర్ స్థానికంగా మరియు అవసరమైతే ఆఫ్‌లైన్‌లో కూడా నడపడానికి అనుమతిస్తుంది. మీరు `model.onnx` ఫైల్‌ను సేవ్ చేసిన అదే ఫోల్డర్‌లో `index.html` ఫైల్‌ను సృష్టించడం ప్రారంభించండి.

1. ఈ _index.html_ ఫైల్‌లో క్రింది మార్కప్‌ను జోడించండి:

    ```html
    <!DOCTYPE html>
    <html>
        <header>
            <title>Cuisine Matcher</title>
        </header>
        <body>
            ...
        </body>
    </html>
    ```

1. ఇప్పుడు, `body` ట్యాగ్‌లలో, కొన్ని పదార్థాలను ప్రతిబింబించే చెక్‌బాక్స్‌ల జాబితాను చూపించడానికి కొంత మార్కప్ జోడించండి:

    ```html
    <h1>Check your refrigerator. What can you create?</h1>
            <div id="wrapper">
                <div class="boxCont">
                    <input type="checkbox" value="4" class="checkbox">
                    <label>apple</label>
                </div>
            
                <div class="boxCont">
                    <input type="checkbox" value="247" class="checkbox">
                    <label>pear</label>
                </div>
            
                <div class="boxCont">
                    <input type="checkbox" value="77" class="checkbox">
                    <label>cherry</label>
                </div>
    
                <div class="boxCont">
                    <input type="checkbox" value="126" class="checkbox">
                    <label>fenugreek</label>
                </div>
    
                <div class="boxCont">
                    <input type="checkbox" value="302" class="checkbox">
                    <label>sake</label>
                </div>
    
                <div class="boxCont">
                    <input type="checkbox" value="327" class="checkbox">
                    <label>soy sauce</label>
                </div>
    
                <div class="boxCont">
                    <input type="checkbox" value="112" class="checkbox">
                    <label>cumin</label>
                </div>
            </div>
            <div style="padding-top:10px">
                <button onClick="startInference()">What kind of cuisine can you make?</button>
            </div> 
    ```

    ప్రతి చెక్‌బాక్స్‌కు ఒక విలువ ఇవ్వబడింది గమనించండి. ఇది డేటాసెట్ ప్రకారం పదార్థం కనుగొనబడిన సూచికను సూచిస్తుంది. ఉదాహరణకు, ఆపిల్ ఈ అక్షరాల క్రమంలో ఐదవ కాలమ్‌లో ఉంది, కాబట్టి దాని విలువ '4' (0 నుండి లెక్కించడం ప్రారంభిస్తాం). మీరు [పదార్థాల స్ప్రెడ్షీట్](../../../../4-Classification/data/ingredient_indexes.csv) ను చూడవచ్చు ఒక పదార్థం సూచిక తెలుసుకోవడానికి.

    index.html ఫైల్‌లో మీ పని కొనసాగిస్తూ, చివరి మూసివేత `</div>` తర్వాత మోడల్ పిలవబడే స్క్రిప్ట్ బ్లాక్‌ను జోడించండి.

1. మొదట, [Onnx Runtime](https://www.onnxruntime.ai/) ను దిగుమతి చేసుకోండి:

    ```html
    <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.9.0/dist/ort.min.js"></script> 
    ```

    > Onnx Runtime అనేది విస్తృత హార్డ్‌వేర్ ప్లాట్‌ఫారమ్‌లపై మీ Onnx మోడల్స్‌ను నడపడానికి ఉపయోగిస్తారు, ఆప్టిమైజేషన్లు మరియు APIతో సహా.

1. Runtime సిద్ధంగా ఉన్న తర్వాత, మీరు దాన్ని పిలవవచ్చు:

    ```html
    <script>
        const ingredients = Array(380).fill(0);
        
        const checks = [...document.querySelectorAll('.checkbox')];
        
        checks.forEach(check => {
            check.addEventListener('change', function() {
                // toggle the state of the ingredient
                // based on the checkbox's value (1 or 0)
                ingredients[check.value] = check.checked ? 1 : 0;
            });
        });

        function testCheckboxes() {
            // validate if at least one checkbox is checked
            return checks.some(check => check.checked);
        }

        async function startInference() {

            let atLeastOneChecked = testCheckboxes()

            if (!atLeastOneChecked) {
                alert('Please select at least one ingredient.');
                return;
            }
            try {
                // create a new session and load the model.
                
                const session = await ort.InferenceSession.create('./model.onnx');

                const input = new ort.Tensor(new Float32Array(ingredients), [1, 380]);
                const feeds = { float_input: input };

                // feed inputs and run
                const results = await session.run(feeds);

                // read from results
                alert('You can enjoy ' + results.label.data[0] + ' cuisine today!')

            } catch (e) {
                console.log(`failed to inference ONNX model`);
                console.error(e);
            }
        }
               
    </script>
    ```

ఈ కోడ్‌లో కొన్ని విషయాలు జరుగుతున్నాయి:

1. మీరు 380 సాధ్యమైన విలువల (1 లేదా 0) అrrayని సృష్టించారు, ఇది మోడల్‌కు ఇన్ఫరెన్స్ కోసం పంపబడుతుంది, చెక్‌బాక్స్ ఎంచుకున్నదో లేదో ఆధారంగా.
2. మీరు చెక్‌బాక్స్‌ల అrray మరియు వాటిని ఎంచుకున్నదో లేదో తెలుసుకునే `init` ఫంక్షన్‌ను సృష్టించారు, ఇది యాప్ ప్రారంభంలో పిలవబడుతుంది. చెక్‌బాక్స్ ఎంచుకున్నప్పుడు, `ingredients` అrray ఎంచుకున్న పదార్థాన్ని ప్రతిబింబించడానికి మార్చబడుతుంది.
3. మీరు `testCheckboxes` ఫంక్షన్‌ను సృష్టించారు, ఇది ఏదైనా చెక్‌బాక్స్ ఎంచుకున్నదో లేదో తనిఖీ చేస్తుంది.
4. మీరు బటన్ నొక్కినప్పుడు `startInference` ఫంక్షన్‌ను ఉపయోగించి, ఏదైనా చెక్‌బాక్స్ ఎంచుకున్నట్లయితే ఇన్ఫరెన్స్ ప్రారంభిస్తారు.
5. ఇన్ఫరెన్స్ రొటీన్‌లో:
   1. మోడల్‌ను అసింక్రనస్‌గా లోడ్ చేయడం
   2. మోడల్‌కు పంపడానికి టెన్సర్ నిర్మాణం సృష్టించడం
   3. మీరు శిక్షణ సమయంలో సృష్టించిన `float_input` ఇన్‌పుట్‌ను ప్రతిబింబించే 'feeds' సృష్టించడం (ఆ పేరు Netron ద్వారా ధృవీకరించవచ్చు)
   4. ఈ 'feeds' ను మోడల్‌కు పంపించి ప్రతిస్పందన కోసం వేచివుండడం

## మీ అప్లికేషన్‌ను పరీక్షించండి

Visual Studio Codeలో మీ index.html ఫైల్ ఉన్న ఫోల్డర్‌లో టెర్మినల్ సెషన్‌ను తెరవండి. మీరు [http-server](https://www.npmjs.com/package/http-server) ను గ్లోబల్‌గా ఇన్‌స్టాల్ చేసుకున్నారని నిర్ధారించుకుని, ప్రాంప్ట్ వద్ద `http-server` టైప్ చేయండి. ఒక localhost తెరుచుకుంటుంది మరియు మీరు మీ వెబ్ యాప్‌ను వీక్షించవచ్చు. వివిధ పదార్థాల ఆధారంగా ఏ వంటకం సిఫార్సు అవుతుందో తనిఖీ చేయండి:

![ingredient web app](../../../../translated_images/te/web-app.4c76450cabe20036.webp)

అభినందనలు, మీరు కొన్ని ఫీల్డ్స్‌తో 'సిఫార్సు' వెబ్ యాప్‌ను సృష్టించారు. ఈ వ్యవస్థను మరింత అభివృద్ధి చేసేందుకు కొంత సమయం కేటాయించండి!

## 🚀సవాలు

మీ వెబ్ యాప్ చాలా సాదారణంగా ఉంది, కాబట్టి [ingredient_indexes](../../../../4-Classification/data/ingredient_indexes.csv) డేటా నుండి పదార్థాలు మరియు వాటి సూచికలను ఉపయోగించి దీన్ని మరింత అభివృద్ధి చేయండి. ఏ రుచుల కలయికలు ఒక నిర్దిష్ట జాతీయ వంటకం తయారుచేస్తాయో తెలుసుకోండి?

## [పాఠం తర్వాత క్విజ్](https://ff-quizzes.netlify.app/en/ml/)

## సమీక్ష & స్వీయ అధ్యయనం

ఈ పాఠం ఆహార పదార్థాల కోసం సిఫార్సు వ్యవస్థను సృష్టించే ఉపయోగకరతను తాకింది, కానీ ML అప్లికేషన్ల ఈ విభాగం ఉదాహరణలతో చాలా సంపన్నంగా ఉంది. ఈ వ్యవస్థలు ఎలా నిర్మించబడతాయో మరింత చదవండి:

- 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/

## అసైన్‌మెంట్

[కొత్త సిఫార్సు యాప్ నిర్మించండి](assignment.md)

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పష్టత**:  
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో పొరపాట్లు లేదా తప్పిదాలు ఉండవచ్చు. మూల పత్రం దాని స్వదేశీ భాషలోనే అధికారిక మూలంగా పరిగణించాలి. ముఖ్యమైన సమాచారానికి, ప్రొఫెషనల్ మానవ అనువాదం సిఫార్సు చేయబడుతుంది. ఈ అనువాదం వాడకంలో ఏర్పడిన ఏవైనా అపార్థాలు లేదా తప్పుదారుల కోసం మేము బాధ్యత వహించము.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->