23 KiB

Raw Permalink Blame History

สร้างเว็บแอปแนะนำเมนูอาหาร

ในบทเรียนนี้ คุณจะสร้างโมเดลการจำแนกประเภทโดยใช้เทคนิคที่คุณได้เรียนรู้ในบทเรียนก่อนหน้า พร้อมกับชุดข้อมูลเมนูอาหารที่น่ารับประทานซึ่งใช้ตลอดซีรีส์นี้ นอกจากนี้ คุณจะสร้างเว็บแอปเล็กๆ เพื่อใช้งานโมเดลที่บันทึกไว้ โดยใช้ Onnx Web Runtime

หนึ่งในประโยชน์ที่สำคัญของการเรียนรู้ด้วยเครื่องคือการสร้างระบบแนะนำ และวันนี้คุณสามารถเริ่มต้นในเส้นทางนั้นได้!

🎥 คลิกที่ภาพด้านบนเพื่อดูวิดีโอ: Jen Looper สร้างเว็บแอปโดยใช้ข้อมูลเมนูอาหารที่จำแนกไว้

แบบทดสอบก่อนเรียน

ในบทเรียนนี้คุณจะได้เรียนรู้:

วิธีสร้างโมเดลและบันทึกเป็นโมเดล Onnx
วิธีใช้ Netron เพื่อตรวจสอบโมเดล
วิธีใช้โมเดลในเว็บแอปเพื่อการคาดการณ์

สร้างโมเดลของคุณ

การสร้างระบบ ML ที่ใช้งานได้จริงเป็นส่วนสำคัญในการนำเทคโนโลยีเหล่านี้มาใช้ในระบบธุรกิจของคุณ คุณสามารถใช้โมเดลในแอปพลิเคชันเว็บของคุณ (และใช้งานในบริบทออฟไลน์หากจำเป็น) โดยใช้ Onnx

ใน บทเรียนก่อนหน้า คุณได้สร้างโมเดล Regression เกี่ยวกับการพบเห็น UFO และ "pickled" โมเดลนั้นเพื่อใช้งานในแอป Flask แม้ว่าโครงสร้างนี้จะมีประโยชน์มาก แต่เป็นแอป Python แบบเต็มรูปแบบ และความต้องการของคุณอาจรวมถึงการใช้แอปพลิเคชัน JavaScript

ในบทเรียนนี้ คุณสามารถสร้างระบบพื้นฐานที่ใช้ JavaScript สำหรับการคาดการณ์ได้ แต่ก่อนอื่น คุณต้องฝึกโมเดลและแปลงมันเพื่อใช้งานกับ Onnx

แบบฝึกหัด - ฝึกโมเดลการจำแนกประเภท

เริ่มต้นด้วยการฝึกโมเดลการจำแนกประเภทโดยใช้ชุดข้อมูลเมนูอาหารที่ทำความสะอาดแล้วที่เราใช้ก่อนหน้านี้

เริ่มต้นด้วยการนำเข้าห้องสมุดที่มีประโยชน์:
```
!pip install skl2onnx
import pandas as pd 
```
คุณต้องใช้ 'skl2onnx' เพื่อช่วยแปลงโมเดล Scikit-learn ของคุณเป็นรูปแบบ Onnx
จากนั้นทำงานกับข้อมูลในลักษณะเดียวกับที่คุณทำในบทเรียนก่อนหน้า โดยการอ่านไฟล์ CSV ด้วย read_csv():
```
data = pd.read_csv('../data/cleaned_cuisines.csv')
data.head()
```
ลบสองคอลัมน์แรกที่ไม่จำเป็นออก และบันทึกข้อมูลที่เหลือเป็น 'X':
```
X = data.iloc[:,2:]
X.head()
```
บันทึกป้ายกำกับเป็น 'y':
```
y = data[['cuisine']]
y.head()
```

เริ่มต้นกระบวนการฝึกโมเดล

เราจะใช้ห้องสมุด 'SVC' ซึ่งมีความแม่นยำดี

นำเข้าห้องสมุดที่เหมาะสมจาก 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

แยกชุดข้อมูลการฝึกและการทดสอบ:
```
X_train, X_test, y_train, y_test = train_test_split(X,y,test_size=0.3)
```
สร้างโมเดลการจำแนกประเภท SVC เหมือนที่คุณทำในบทเรียนก่อนหน้า:
```
model = SVC(kernel='linear', C=10, probability=True,random_state=0)
model.fit(X_train,y_train.values.ravel())
```
ทดสอบโมเดลของคุณโดยเรียกใช้ predict():
```
y_pred = model.predict(X_test)
```

พิมพ์รายงานการจำแนกประเภทเพื่อตรวจสอบคุณภาพของโมเดล:

print(classification_report(y_test,y_pred))

ดังที่เราเห็นก่อนหน้านี้ ความแม่นยำดี:

                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

ตรวจสอบให้แน่ใจว่าการแปลงใช้จำนวน Tensor ที่เหมาะสม ชุดข้อมูลนี้มีส่วนผสม 380 รายการ ดังนั้นคุณต้องระบุจำนวนดังกล่าวใน FloatTensorType:

แปลงโดยใช้จำนวน 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}}

สร้างไฟล์ onx และบันทึกเป็น model.onnx:
```
onx = convert_sklearn(model, initial_types=initial_type, options=options)
with open("./model.onnx", "wb") as f:
    f.write(onx.SerializeToString())
```
หมายเหตุ คุณสามารถส่ง options ในสคริปต์การแปลงของคุณได้ ในกรณีนี้ เราได้ตั้งค่า 'nocl' เป็น True และ 'zipmap' เป็น False เนื่องจากนี่เป็นโมเดลการจำแนกประเภท คุณมีตัวเลือกในการลบ ZipMap ซึ่งสร้างรายการของ dictionary (ไม่จำเป็น) nocl หมายถึงข้อมูลคลาสที่รวมอยู่ในโมเดล ลดขนาดโมเดลของคุณโดยตั้งค่า nocl เป็น 'True'

การรันโน้ตบุ๊กทั้งหมดจะสร้างโมเดล Onnx และบันทึกไว้ในโฟลเดอร์นี้

ดูโมเดลของคุณ

โมเดล Onnx ไม่สามารถมองเห็นได้ชัดเจนใน Visual Studio Code แต่มีซอฟต์แวร์ฟรีที่ดีมากที่นักวิจัยหลายคนใช้เพื่อดูโมเดลเพื่อให้แน่ใจว่าสร้างขึ้นอย่างถูกต้อง ดาวน์โหลด Netron และเปิดไฟล์ model.onnx ของคุณ คุณจะเห็นโมเดลง่ายๆ ของคุณที่มี 380 อินพุตและตัวจำแนกประเภท:

Netron เป็นเครื่องมือที่มีประโยชน์ในการดูโมเดลของคุณ

ตอนนี้คุณพร้อมที่จะใช้โมเดลที่น่าสนใจนี้ในเว็บแอปแล้ว มาสร้างแอปที่มีประโยชน์เมื่อคุณมองเข้าไปในตู้เย็นและพยายามหาว่าส่วนผสมที่เหลืออยู่สามารถใช้ทำอาหารประเภทใดได้บ้างตามที่โมเดลของคุณกำหนด

สร้างเว็บแอปแนะนำเมนูอาหาร

คุณสามารถใช้โมเดลของคุณโดยตรงในเว็บแอป โครงสร้างนี้ยังช่วยให้คุณรันมันในเครื่องและแม้กระทั่งออฟไลน์หากจำเป็น เริ่มต้นด้วยการสร้างไฟล์ index.html ในโฟลเดอร์เดียวกับที่คุณบันทึกไฟล์ model.onnx

ในไฟล์นี้ index.html เพิ่มมาร์กอัปต่อไปนี้:

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

ตอนนี้ ทำงานภายในแท็ก body เพิ่มมาร์กอัปเล็กน้อยเพื่อแสดงรายการของกล่องเลือกที่สะท้อนถึงส่วนผสมบางอย่าง:

<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 คุณสามารถดู สเปรดชีตส่วนผสม เพื่อค้นหาดัชนีของส่วนผสมที่กำหนด

ดำเนินการต่อในไฟล์ index.html เพิ่มบล็อกสคริปต์ที่เรียกโมเดลหลังจากปิดแท็ก </div> สุดท้าย

ก่อนอื่น นำเข้า Onnx Runtime:
```
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.9.0/dist/ort.min.js"></script> 
```
Onnx Runtime ใช้เพื่อช่วยให้สามารถรันโมเดล Onnx ของคุณบนแพลตฟอร์มฮาร์ดแวร์ที่หลากหลาย รวมถึงการปรับแต่งและ API เพื่อใช้งาน

เมื่อ Runtime อยู่ในที่แล้ว คุณสามารถเรียกใช้งานได้:

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

ในโค้ดนี้ มีหลายสิ่งที่เกิดขึ้น:

คุณสร้างอาร์เรย์ที่มีค่า 380 ค่า (1 หรือ 0) เพื่อกำหนดและส่งไปยังโมเดลเพื่อการคาดการณ์ ขึ้นอยู่กับว่ากล่องเลือกส่วนผสมถูกเลือกหรือไม่
คุณสร้างอาร์เรย์ของกล่องเลือกและวิธีการตรวจสอบว่ากล่องเลือกถูกเลือกในฟังก์ชัน init ที่ถูกเรียกเมื่อแอปพลิเคชันเริ่มต้น เมื่อกล่องเลือกถูกเลือก อาร์เรย์ ingredients จะถูกเปลี่ยนแปลงเพื่อสะท้อนส่วนผสมที่เลือก
คุณสร้างฟังก์ชัน testCheckboxes ที่ตรวจสอบว่ามีกล่องเลือกใดถูกเลือกหรือไม่
คุณใช้ฟังก์ชัน startInference เมื่อปุ่มถูกกด และหากมีกล่องเลือกใดถูกเลือก คุณจะเริ่มการคาดการณ์
รูทีนการคาดการณ์รวมถึง:
1. การตั้งค่าการโหลดแบบอะซิงโครนัสของโมเดล
2. การสร้างโครงสร้าง Tensor เพื่อส่งไปยังโมเดล
3. การสร้าง 'feeds' ที่สะท้อนถึงอินพุต float_input ที่คุณสร้างเมื่อฝึกโมเดลของคุณ (คุณสามารถใช้ Netron เพื่อตรวจสอบชื่อนั้น)
4. การส่ง 'feeds' เหล่านี้ไปยังโมเดลและรอการตอบกลับ

ทดสอบแอปพลิเคชันของคุณ

เปิดเซสชันเทอร์มินัลใน Visual Studio Code ในโฟลเดอร์ที่ไฟล์ index.html ของคุณอยู่ ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง http-server ไว้ทั่วโลก และพิมพ์ http-server ที่พรอมต์ localhost จะเปิดขึ้นและคุณสามารถดูเว็บแอปของคุณได้ ตรวจสอบว่าเมนูอาหารใดที่แนะนำตามส่วนผสมต่างๆ:

ยินดีด้วย คุณได้สร้างเว็บแอป 'แนะนำ' พร้อมฟิลด์ไม่กี่ฟิลด์ ใช้เวลาสร้างระบบนี้เพิ่มเติม!

🚀ความท้าทาย

เว็บแอปของคุณยังค่อนข้างเรียบง่าย ดังนั้นให้สร้างมันต่อโดยใช้ส่วนผสมและดัชนีของมันจากข้อมูล ingredient_indexes รสชาติแบบไหนที่เหมาะสมในการสร้างอาหารประจำชาติ?

แบบทดสอบหลังเรียน

ทบทวนและศึกษาด้วยตนเอง

แม้ว่าบทเรียนนี้จะกล่าวถึงประโยชน์ของการสร้างระบบแนะนำสำหรับส่วนผสมอาหารเพียงเล็กน้อย แต่พื้นที่ของแอปพลิเคชัน ML นี้มีตัวอย่างที่หลากหลาย อ่านเพิ่มเติมเกี่ยวกับวิธีการสร้างระบบเหล่านี้:

งานที่ได้รับมอบหมาย

สร้างระบบแนะนำใหม่

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้องมากที่สุด แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษาจากผู้เชี่ยวชาญ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดซึ่งเกิดจากการใช้การแปลนี้

23 KiB Raw Permalink Blame History

สร้างเว็บแอปแนะนำเมนูอาหาร

แบบทดสอบก่อนเรียน

สร้างโมเดลของคุณ

แบบฝึกหัด - ฝึกโมเดลการจำแนกประเภท

เริ่มต้นกระบวนการฝึกโมเดล

แปลงโมเดลของคุณเป็น Onnx

ดูโมเดลของคุณ

สร้างเว็บแอปแนะนำเมนูอาหาร

ทดสอบแอปพลิเคชันของคุณ

🚀ความท้าทาย

แบบทดสอบหลังเรียน

ทบทวนและศึกษาด้วยตนเอง

งานที่ได้รับมอบหมาย

23 KiB

Raw Permalink Blame History