History

leestott c5aa7afabb 🌐 Update translations via Co-op Translator		8 months ago
..
solution	🌐 Update translations via Co-op Translator	8 months ago
README.md	🌐 Update translations via Co-op Translator	8 months ago
assignment.md	🌐 Update translations via Co-op Translator	8 months ago
notebook.ipynb	🌐 Update translations via Co-op Translator	8 months ago

README.md

بناء تطبيق ويب لتوصية المأكولات

في هذا الدرس، ستقوم ببناء نموذج تصنيف باستخدام بعض التقنيات التي تعلمتها في الدروس السابقة ومع مجموعة بيانات المأكولات الشهية التي تم استخدامها طوال هذه السلسلة. بالإضافة إلى ذلك، ستقوم ببناء تطبيق ويب صغير لاستخدام النموذج المحفوظ، مستفيدًا من بيئة تشغيل Onnx للويب.

إحدى أكثر الاستخدامات العملية فائدة لتعلم الآلة هي بناء أنظمة التوصية، ويمكنك اتخاذ الخطوة الأولى في هذا الاتجاه اليوم!

🎥 انقر على الصورة أعلاه لمشاهدة الفيديو: جين لوبر تبني تطبيق ويب باستخدام بيانات تصنيف المأكولات

اختبار ما قبل المحاضرة

في هذا الدرس ستتعلم:

كيفية بناء نموذج وحفظه كملف Onnx
كيفية استخدام Netron لفحص النموذج
كيفية استخدام النموذج الخاص بك في تطبيق ويب للاستدلال

بناء النموذج الخاص بك

بناء أنظمة تعلم الآلة التطبيقية هو جزء مهم من الاستفادة من هذه التقنيات في أنظمة عملك. يمكنك استخدام النماذج داخل تطبيقات الويب الخاصة بك (وبالتالي استخدامها في وضع عدم الاتصال إذا لزم الأمر) باستخدام Onnx.

في درس سابق، قمت ببناء نموذج انحدار حول مشاهدات الأجسام الطائرة المجهولة، وقمت بحفظه باستخدام "pickle"، واستخدمته في تطبيق 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

تأكد من إجراء التحويل باستخدام العدد الصحيح من التنسورات. تحتوي مجموعة البيانات هذه على 380 مكونًا مدرجًا، لذا تحتاج إلى تدوين هذا الرقم في FloatTensorType:

قم بالتحويل باستخدام عدد التنسورات 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())
```
ملاحظة، يمكنك تمرير خيارات في نص التحويل الخاص بك. في هذه الحالة، قمنا بتمرير 'nocl' ليكون True و'zipmap' ليكون False. نظرًا لأن هذا نموذج تصنيف، لديك خيار إزالة ZipMap الذي ينتج قائمة من القواميس (غير ضروري). يشير 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 الخاصة بك عبر مجموعة واسعة من منصات الأجهزة، بما في ذلك التحسينات وواجهة برمجة التطبيقات للاستخدام.

بمجرد أن تكون بيئة التشغيل في مكانها، يمكنك استدعاؤها:

<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. ما هي تركيبات النكهات التي تعمل على إنشاء طبق وطني معين؟

اختبار ما بعد المحاضرة

المراجعة والدراسة الذاتية

بينما تناول هذا الدرس فقط فائدة إنشاء نظام توصية لمكونات الطعام، فإن هذا المجال من تطبيقات تعلم الآلة غني جدًا بالأمثلة. اقرأ المزيد حول كيفية بناء هذه الأنظمة:

الواجب

بناء نظام توصية جديد

إخلاء المسؤولية:
تمت ترجمة هذا المستند باستخدام خدمة الترجمة الآلية Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية هو المصدر الموثوق. للحصول على معلومات حساسة أو هامة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.