القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة.

التعلم الآلي هو تقنية أساسية في العالم الحديث. يمكن لأجهزة الكمبيوتر أن تتعلم التعرف على الصور ، وإنشاء الأعمال الفنية ، وحتى كتابة التعليمات البرمجية الخاصة بها ، كل ذلك بأقل تدخل بشري.

ولكن كيف يعمل التعلم الآلي وكيف يمكنك استخدامه بنفسك؟

ما هو التعلم الآلي؟

التعلم الآلي هو مفهوم بسيط نسبيًا. يمكن أن تتعلم أنظمة الكمبيوتر وتتكيف من خلال تحليل أنماط البيانات الموجودة من مجموعات المعلومات. يتم ذلك عادة بدون تعليمات صريحة من البشر.

مثال جيد يأتي في شكل أدوات المساعد الافتراضي. يستفيد كل من Siri و Cortana و Google Assistant بشكل مكثف من التعلم الآلي لفهم الكلام البشري. يبدأ هذا بمجموعة من التسجيلات الصوتية الموجودة ، ولكن يمكن لهذه الأدوات أيضًا التعلم من التفاعلات التي تجريها معك. هذا يمكنهم من تحسين أنفسهم.

ما هو ml5.js؟

تستخدم معظم خوارزميات وأدوات التعلم الآلي R أو Python لكودها ، لكن ml5.js مختلف. يعد ml5.js بمثابة واجهة لمكتبة Tensorflow.js من Google ، وهو مشروع مفتوح المصدر يضع التعلم الآلي في أيدي مطوري JavaScript.

instagram viewer

يمكنك البدء في استخدام ml5.js لتطبيق الويب الخاص بك عن طريق تضمين برنامج نصي خارجي واحد في HTML الخاص بك.

البدء في التعلم الآلي: عملية التعلم

يستغرق تدريب خوارزمية التعلم الآلي وقتًا. تتعلم أجهزة الكمبيوتر أسرع بكثير من البشر ، لكنها تتعلم أيضًا بطرق مختلفة. لحسن الحظ ، يأتي ml5.js مع مجموعة مختارة من النماذج المدربة مسبقًا حتى تتمكن من تخطي هذه الخطوة.

تعلُّم كيف يتم تدريب خوارزميات التعلم الآلي طريقة رائعة لفهم أدوات مثل هذه بشكل أفضل.

يجعل ml5.js من السهل إنشاء أداة لتصنيف الصور لتشغيلها على موقع الويب الخاص بك. تحتوي صفحة HTML في هذا المثال على حقل إدخال ملف لتحديد صورة. يتم عرض الصور التي تم تحميلها داخل عنصر HTML مُجهز لتمكين ml5.js من مسحها ضوئيًا والتعرف عليها.

الخطوة 1: قم بتضمين مكتبة ml5.js

يتطلب هذا المشروع عمل مكتبتين: ml5.js و p5.js. ml5.js هي مكتبة التعلم الآلي ، بينما تتيح p5.js العمل مع الصور بشكل صحيح. أنت بحاجة إلى سطرين من HTML لإضافة هذه المكتبات:

<النصي src ="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<النصي src ="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>

الخطوة الثانية: إنشاء بعض عناصر HTML

بعد ذلك ، حان الوقت لإنشاء بعض عناصر HTML. الأهم هو div بمعرّف وصورة مسماة فئة imageResult التي ستخزن النتيجة النهائية:

<h1>MakeUseOf Image Classifier</h1>
<h2>انقر "اختر ملف" لإضافة صورة</h2>
<فئة div ="imageResult" معرف ="imageResult"></div>

بعد ذلك ، أضف عنصر إدخال ملف لتجميع الصورة ليقوم البرنامج بتصنيفها.

<فئة div ="إدخال الصورة">
<نوع الإدخال ="ملف"
 oninput ="uploadedImage.src = نافذة. URL.createObjectURL (this.files [0]) ، startImageScan ()">
</div>

يستمع الإدخال إلى حدث oninput وينفذ جملتين استجابةً لذلك ، مفصولة بفاصلة منقوطة. يقوم الأول بإنشاء عنوان URL لكائن للصورة ، مما يتيح لك العمل مع البيانات دون الحاجة إلى تحميلها على الخادم. الثاني يستدعي وظيفة startImageScan () التي ستنشئها في الخطوة التالية.

أخيرًا ، أضف عنصر img لعرض الصورة التي قام المستخدم بتحميلها:

<img فئة ="تحميل الصورة" معرف ="تحميل الصورة" />

الخطوة 3: إنشاء وظيفة JS لمسح الصور

الآن بعد أن أصبح لديك بعض HTML ، حان الوقت لإضافة بعض JS إلى المزيج. ابدأ بإضافة متغير ثابت لتخزين عنصر imageResult الذي أنشأته في الخطوة الأخيرة.

مقدار ثابت عنصر = وثيقة.getElementById ("imageResult") ؛

بعد ذلك ، أضف وظيفة تسمى startImageScan () وداخلها ، قم بتهيئة مصنف الصور ml5.js باستخدام MobileNet.

اتبع هذا الأمر باستخدام الأمر classifier.classify. مرره مرجعًا إلى عنصر uploadedImage الذي أضفته سابقًا ، جنبًا إلى جنب مع وظيفة رد الاتصال لمعالجة النتيجة.

وظيفةstartImageScan() {
 // يخلق أ عاملل تهيئة مصنف الصور ml5.js مع موبايل نت
 مصنف const = ml5.imageClassifier ('موبايل نت');
 classifier.classify (document.getElementById ("تحميل الصورة") ، imageScanResult) ؛
 element.innerHTML = "...";
}

الخطوة 4: إنشاء وظيفة عرض النتائج

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

وظيفةimageScanResult(خطأ ، نتائج) {
 إذا (خطأ) {
 element.innerHTML = خطأ ؛
 } آخر {
يترك الأسطوانات = النتائج [0].ثقة * 100;
 element.innerHTML = النتائج [0] .label + "<ر>ثقة: " + عدد إلى ثابت (0) + "%";
 }
}

الخطوة 5: ضعها معًا

أخيرًا ، حان الوقت لتجميع كل هذه التعليمات البرمجية معًا. من المهم أن تكون على دراية بـ

,