14 KiB

Raw Permalink Blame History

Membangun Aplikasi Web Rekomendasi Masakan

Dalam pelajaran ini, Anda akan membangun model klasifikasi menggunakan beberapa teknik yang telah Anda pelajari di pelajaran sebelumnya dan dengan dataset masakan lezat yang digunakan sepanjang seri ini. Selain itu, Anda akan membuat aplikasi web kecil untuk menggunakan model yang telah disimpan, memanfaatkan runtime web Onnx.

Salah satu penggunaan praktis yang paling berguna dari pembelajaran mesin adalah membangun sistem rekomendasi, dan Anda dapat mengambil langkah pertama ke arah itu hari ini!

🎥 Klik gambar di atas untuk video: Jen Looper membangun aplikasi web menggunakan data masakan yang telah diklasifikasi

Kuis sebelum pelajaran

Dalam pelajaran ini Anda akan belajar:

Cara membangun model dan menyimpannya sebagai model Onnx
Cara menggunakan Netron untuk memeriksa model
Cara menggunakan model Anda dalam aplikasi web untuk inferensi

Bangun model Anda

Membangun sistem pembelajaran mesin terapan adalah bagian penting dari memanfaatkan teknologi ini untuk sistem bisnis Anda. Anda dapat menggunakan model dalam aplikasi web Anda (dan dengan demikian menggunakannya dalam konteks offline jika diperlukan) dengan menggunakan Onnx.

Dalam pelajaran sebelumnya, Anda membangun model Regresi tentang penampakan UFO, "pickled" model tersebut, dan menggunakannya dalam aplikasi Flask. Meskipun arsitektur ini sangat berguna untuk diketahui, ini adalah aplikasi Python full-stack, dan kebutuhan Anda mungkin mencakup penggunaan aplikasi JavaScript.

Dalam pelajaran ini, Anda dapat membangun sistem berbasis JavaScript sederhana untuk inferensi. Namun, pertama-tama Anda perlu melatih model dan mengonversinya untuk digunakan dengan Onnx.

Latihan - latih model klasifikasi

Pertama, latih model klasifikasi menggunakan dataset masakan yang telah dibersihkan yang kita gunakan sebelumnya.

Mulailah dengan mengimpor pustaka yang berguna:
```
!pip install skl2onnx
import pandas as pd 
```
Anda memerlukan 'skl2onnx' untuk membantu mengonversi model Scikit-learn Anda ke format Onnx.
Kemudian, olah data Anda dengan cara yang sama seperti yang Anda lakukan di pelajaran sebelumnya, dengan membaca file CSV menggunakan read_csv():
```
data = pd.read_csv('../data/cleaned_cuisines.csv')
data.head()
```
Hapus dua kolom pertama yang tidak diperlukan dan simpan data yang tersisa sebagai 'X':
```
X = data.iloc[:,2:]
X.head()
```
Simpan label sebagai 'y':
```
y = data[['cuisine']]
y.head()
```

Mulai rutinitas pelatihan

Kami akan menggunakan pustaka 'SVC' yang memiliki akurasi yang baik.

Impor pustaka yang sesuai dari Scikit-learn:

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

Pisahkan set pelatihan dan pengujian:

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

Bangun model Klasifikasi SVC seperti yang Anda lakukan di pelajaran sebelumnya:

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

Sekarang, uji model Anda dengan memanggil predict():
```
y_pred = model.predict(X_test)
```

Cetak laporan klasifikasi untuk memeriksa kualitas model:

print(classification_report(y_test,y_pred))

Seperti yang kita lihat sebelumnya, akurasinya baik:

                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

Konversi model Anda ke Onnx

Pastikan untuk melakukan konversi dengan jumlah Tensor yang tepat. Dataset ini memiliki 380 bahan yang terdaftar, jadi Anda perlu mencatat jumlah tersebut dalam FloatTensorType:

Konversi menggunakan jumlah tensor 380.

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

Buat file onx dan simpan sebagai model.onnx:
```
onx = convert_sklearn(model, initial_types=initial_type, options=options)
with open("./model.onnx", "wb") as f:
    f.write(onx.SerializeToString())
```
Catatan, Anda dapat memasukkan opsi dalam skrip konversi Anda. Dalam kasus ini, kami memasukkan 'nocl' sebagai True dan 'zipmap' sebagai False. Karena ini adalah model klasifikasi, Anda memiliki opsi untuk menghapus ZipMap yang menghasilkan daftar kamus (tidak diperlukan). nocl mengacu pada informasi kelas yang disertakan dalam model. Kurangi ukuran model Anda dengan mengatur nocl ke 'True'.

Menjalankan seluruh notebook sekarang akan membangun model Onnx dan menyimpannya ke folder ini.

Lihat model Anda

Model Onnx tidak terlalu terlihat di Visual Studio Code, tetapi ada perangkat lunak gratis yang sangat baik yang banyak digunakan oleh peneliti untuk memvisualisasikan model guna memastikan bahwa model tersebut dibangun dengan benar. Unduh Netron dan buka file model.onnx Anda. Anda dapat melihat model sederhana Anda yang divisualisasikan, dengan 380 input dan classifier yang terdaftar:

Netron adalah alat yang berguna untuk melihat model Anda.

Sekarang Anda siap menggunakan model keren ini dalam aplikasi web. Mari kita bangun aplikasi yang akan berguna ketika Anda melihat ke dalam lemari es Anda dan mencoba mencari tahu kombinasi bahan sisa mana yang dapat Anda gunakan untuk memasak masakan tertentu, seperti yang ditentukan oleh model Anda.

Bangun aplikasi web rekomendasi

Anda dapat menggunakan model Anda langsung dalam aplikasi web. Arsitektur ini juga memungkinkan Anda menjalankannya secara lokal dan bahkan offline jika diperlukan. Mulailah dengan membuat file index.html di folder yang sama tempat Anda menyimpan file model.onnx.

Dalam file ini index.html, tambahkan markup berikut:

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

Sekarang, bekerja di dalam tag body, tambahkan sedikit markup untuk menampilkan daftar kotak centang yang mencerminkan beberapa bahan:

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

Perhatikan bahwa setiap kotak centang diberi nilai. Ini mencerminkan indeks tempat bahan ditemukan sesuai dengan dataset. Apel, misalnya, dalam daftar alfabet ini, menempati kolom kelima, jadi nilainya adalah '4' karena kita mulai menghitung dari 0. Anda dapat berkonsultasi dengan lembar kerja bahan untuk menemukan indeks bahan tertentu.

Melanjutkan pekerjaan Anda di file index.html, tambahkan blok skrip tempat model dipanggil setelah penutupan akhir </div>.

Pertama, impor Onnx Runtime:
```
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.9.0/dist/ort.min.js"></script> 
```
Onnx Runtime digunakan untuk memungkinkan menjalankan model Onnx Anda di berbagai platform perangkat keras, termasuk optimasi dan API untuk digunakan.

Setelah Runtime tersedia, Anda dapat memanggilnya:

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

Dalam kode ini, ada beberapa hal yang terjadi:

Anda membuat array dari 380 nilai yang mungkin (1 atau 0) untuk diatur dan dikirim ke model untuk inferensi, tergantung pada apakah kotak centang bahan dicentang.
Anda membuat array kotak centang dan cara untuk menentukan apakah mereka dicentang dalam fungsi init yang dipanggil saat aplikasi dimulai. Ketika kotak centang dicentang, array ingredients diubah untuk mencerminkan bahan yang dipilih.
Anda membuat fungsi testCheckboxes yang memeriksa apakah ada kotak centang yang dicentang.
Anda menggunakan fungsi startInference saat tombol ditekan dan, jika ada kotak centang yang dicentang, Anda memulai inferensi.
Rutinitas inferensi mencakup:
1. Menyiapkan pemuatan asinkron model
2. Membuat struktur Tensor untuk dikirim ke model
3. Membuat 'feeds' yang mencerminkan input float_input yang Anda buat saat melatih model Anda (Anda dapat menggunakan Netron untuk memverifikasi nama tersebut)
4. Mengirimkan 'feeds' ini ke model dan menunggu respons

Uji aplikasi Anda

Buka sesi terminal di Visual Studio Code di folder tempat file index.html Anda berada. Pastikan Anda memiliki http-server yang diinstal secara global, dan ketik http-server di prompt. Sebuah localhost akan terbuka dan Anda dapat melihat aplikasi web Anda. Periksa masakan apa yang direkomendasikan berdasarkan berbagai bahan:

Selamat, Anda telah membuat aplikasi web 'rekomendasi' dengan beberapa bidang. Luangkan waktu untuk mengembangkan sistem ini!

🚀Tantangan

Aplikasi web Anda sangat minimal, jadi teruslah mengembangkannya menggunakan bahan dan indeksnya dari data ingredient_indexes. Kombinasi rasa apa yang cocok untuk menciptakan hidangan nasional tertentu?

Kuis setelah pelajaran

Tinjauan & Studi Mandiri

Meskipun pelajaran ini hanya menyentuh kegunaan membuat sistem rekomendasi untuk bahan makanan, area aplikasi pembelajaran mesin ini sangat kaya dengan contoh. Bacalah lebih lanjut tentang bagaimana sistem ini dibangun:

Tugas

Bangun rekomendasi baru

Penafian:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI Co-op Translator. Meskipun kami berusaha untuk memberikan hasil yang akurat, harap diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.

14 KiB Raw Permalink Blame History