1. مقدمة

تاريخ آخر تعديل: 2022-04-11
في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية تدريب نموذج لتصنيف الصور باستخدام أداة تعليم الآلة، وتشغيله مع تسريع أداء أجهزة Coral باستخدام TensorFlow.js، وهي مكتبة قوية ومرنة لتعلُّم الآلة في JavaScript. يمكنك إنشاء تطبيق Electron يعرض صورًا من كاميرا ويب ويصنّفها باستخدام Coral edge TPU. يتوفّر إصدار يعمل بكامل وظائفه من هذا الدرس التطبيقي حول الترميز في مستودع sig-tfjs على GitHub.
هل أحتاج إلى جهاز Coral؟
لا، يمكنك تجربة هذا الدرس التطبيقي حول الترميز بدون جهاز Coral والاستفادة من أداء جيد على جهاز كمبيوتر مكتبي من خلال استخدام مسرّع WebNN بدلاً من ذلك.
ما ستنشئه
في هذا الدرس التطبيقي حول الترميز، ستنشئ تطبيق Electron يصنّف الصور. تطبيقك:
- تصنيف الصور من كاميرا الويب إلى الفئات المحدّدة في النموذج الذي درّبته
- يستخدم مسرّع Coral لزيادة الأداء، إذا كان متوفّرًا.
- يستخدم WebNN لزيادة الأداء، إذا كان متاحًا على منصتك.
ما ستتعلمه
- كيفية تثبيت حزمة NPM tfjs-tflite-node وإعدادها لتشغيل نماذج TFLite في Node.js
- كيفية تثبيت مكتبة وقت تشغيل Edge TPU لتشغيل النماذج على جهاز Coral
- كيفية تسريع استنتاج النماذج باستخدام وحدة معالجة الموتّرات (Edge TPU) من Coral
- كيفية تسريع استنتاج النماذج باستخدام WebNN
يركّز هذا الدرس التطبيقي حول الترميز على TFLite في Node.js. يتم تجاهل المفاهيم وكتل الرموز البرمجية غير ذات الصلة، ويتم توفيرها لك لنسخها ولصقها ببساطة.
المتطلبات
لإكمال هذا الدرس التطبيقي حول الترميز، يجب أن يتوفّر لديك ما يلي:
- جهاز كمبيوتر مزوّد بكاميرا ويب
- بالنسبة إلى Coral، ننصح باستخدام Raspberry Pi الذي يعمل بنظام التشغيل Raspberry Pi OS (بـ 64 بت) مع الكمبيوتر المكتبي.
- بالنسبة إلى WebNN، ننصح باستخدام جهاز Intel x86-64 يعمل بنظام التشغيل Ubuntu 20.04 أو Windows 10.
- إصدار Node.js أكبر من أو يساوي 12
- معرفة بلغة JavaScript
- (يُنصح به) Coral USB Accelerator لتسريع النموذج
2. طريقة الإعداد
الحصول على الرمز
لقد وضعنا كل الرموز البرمجية التي تحتاج إليها لهذا المشروع في مستودع Git. للبدء، احصل على الرمز وافتحه في بيئة التطوير المفضّلة لديك. بالنسبة إلى هذا الدرس التطبيقي حول الترميز، ننصح باستخدام جهاز Raspberry Pi يعمل بنظام التشغيل Raspberry Pi OS (بإصدار 64 بت) مع سطح المكتب. يسهّل ذلك ربط أداة تسريع Coral.
ننصح بشدة بما يلي: استخدام Git لاستنساخ المستودع على جهاز Raspberry Pi
للحصول على الرمز، افتح نافذة محطة طرفية جديدة واستنسِخ المستودع:
git clone https://github.com/tensorflow/sig-tfjs.git
تتوفّر جميع الملفات التي تحتاج إلى تعديلها في هذا الدرس التطبيقي حول الترميز في الدليل tfjs-tflite-node-codelab (داخل sig-tfjs). في هذا الدليل، ستجد أدلة فرعية باسم starter_code وcpu_inference_working وcoral_inference_working وwebnn_inference_working. هذه هي نقاط التحقّق من خطوات هذا الدرس العملي.
من بين الملفات الأخرى في المستودع حِزم NPM التي يعتمد عليها tfjs-tflite-node-codelab. لن تحتاج إلى تعديل أيّ من هذه الملفات، ولكن عليك إجراء بعض اختباراتها للتأكّد من إعداد بيئتك بشكلٍ صحيح.
تثبيت مكتبة وقت التشغيل Edge TPU
تتطلّب أجهزة Coral تثبيت مكتبة وقت تشغيل Edge TPU قبل الاستخدام. ثبِّت التطبيق باتّباع التعليمات الخاصة بمنصتك.
على أجهزة Linux أو Raspberry Pi
على نظام التشغيل Linux، تتوفّر المكتبة من خلال PPA من Google كـ حزمة Debian، libedgetpu1-std، لبنيتَي x86-64 وArmv8 (64 بت). إذا كان المعالج يستخدم بنية مختلفة، عليك تجميعه من المصدر.
نفِّذ هذا الأمر لإضافة Coral PPA من Google وتثبيت مكتبة Edge TPU Runtime.
# None of this is needed on Coral boards
# This repo is needed for almost all packages below
echo "deb https://packages.cloud.google.com/apt coral-edgetpu-stable main" | sudo tee /etc/apt/sources.list.d/coral-edgetpu.list
# This repo is needed for only python3-coral-cloudiot and python3-coral-enviro
echo "deb https://packages.cloud.google.com/apt coral-cloud-stable main" | sudo tee /etc/apt/sources.list.d/coral-cloud.list
curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -
sudo apt-get update
sudo apt-get install libedgetpu1-std
على أجهزة Windows / أنظمة التشغيل الأخرى
تتوفّر الملفات الثنائية المُجمَّعة مسبقًا لإصدارات x86-64 من نظامَي التشغيل MacOS وWindows ويمكن تثبيتها من خلال تشغيل النص البرمجي install.sh أو install.bat في الأرشيف بعد تنزيله.
إعادة تشغيل الجهاز
بعد تثبيت Edge TPU Runtime، أعِد تشغيل الجهاز لتفعيل قاعدة Coral Udev الجديدة التي أضافتها أداة التثبيت.
التأكّد من رصد جهاز Coral
للتأكّد من رصد جهاز Coral وعمله بشكل صحيح، نفِّذ اختبارات الدمج لحزمة coral-tflite-delegate. يمكن العثور على هذه الحزمة في الدليل الجذر للمستودع. لتشغيل اختبارات التكامل، وصِّل أداة تسريع Coral وشغِّل الأوامر التالية في دليل الحزمة:
npx yarn
npx yarn build-deps
npx yarn test-integration
من المفترض أن تظهر لك نتيجة مثل هذه:
yarn run v1.22.17
$ yarn build && yarn test-integration-dev
$ tsc
$ jasmine --config=jasmine-integration.json
Platform node has already been set. Overwriting the platform with node.
Randomized with seed 78904
Started
============================
Hi there 👋. Looks like you are running TensorFlow.js in Node.js. To speed things up dramatically, install our node backend, which binds to TensorFlow C++, by running npm i @tensorflow/tfjs-node, or npm i @tensorflow/tfjs-node-gpu if you have CUDA. Then call require('@tensorflow/tfjs-node'); (-gpu suffix for CUDA) at the start of your program. Visit https://github.com/tensorflow/tfjs-node for more details.
============================
WARNING: converting 'int32' to 'uint8'
.
1 spec, 0 failures
Finished in 2.777 seconds
Randomized with seed 78904 (jasmine --random=true --seed=78904)
Done in 6.36s.
لا داعي للقلق بشأن تثبيت @tensorflow/tfjs-node, كما هو مذكور في السجلات، لأنّك ستشغّل النموذج في TFLite.
إذا كان الناتج يحتوي على Encountered unresolved custom op: edgetpu-custom-op، يعني ذلك أنّه لم يتم رصد جهاز Coral. تأكَّد من تثبيت مكتبة وقت التشغيل الخاصة بـ Edge TPU وتوصيل جهاز Coral بجهاز الكمبيوتر. يمكنك أيضًا اتّباع دليل "بدء استخدام Coral" لاختبار إصدار Python من عمليات الربط في Coral. إذا كان إصدار Python يعمل ولكنّ هذه الاختبارات لا تزال غير ناجحة، يُرجى إعلامنا بذلك من خلال تقديم تقرير خطأ.
تشغيل الرمز الأوّلي
أنت الآن جاهز لتشغيل الرمز الأولي. اتّبِع الخطوات التالية للبدء.
- انتقِل إلى الدليل
starter_codeضمن الدليلtfjs-tflite-node-codelab. - نفِّذ الأمر
npm installلتثبيت التبعيات. - نفِّذ الأمر
npm startلتشغيل المشروع. سيتم فتح تطبيق يعرض خلاصة فيديو من كاميرا الويب على الكمبيوتر.
ما هي نقطة البداية؟
نقطة البداية هي تطبيق كاميرا أساسي Electron مصمَّم لهذا الدرس التطبيقي حول الترميز. تم تبسيط الرمز البرمجي لعرض المفاهيم في الدرس العملي، ولا يتضمّن سوى القليل من معالجة الأخطاء. إذا اخترت إعادة استخدام أي من الرموز في تطبيق متاح للجميع، تأكَّد من التعامل مع أي أخطاء واختبار جميع الرموز بالكامل.

استكشاف الرمز الأوّلي
يتضمّن رمز التفعيل هذا الكثير من الملفات، ولكن الملف الوحيد الذي عليك تعديله هو renderer.js. يتحكّم هذا الملف في المحتوى الذي يظهر على الصفحة، بما في ذلك خلاصة الفيديو وعناصر HTML، وهو المكان الذي تضيف فيه نموذج تعلُّم الآلة إلى التطبيق. من بين الملفات الأخرى ملف index.html، ولكن كل ما يفعله هو تحميل ملف renderer.js. هناك أيضًا ملف main.js، وهو نقطة الدخول إلى Electron. وهي تتحكّم في مراحل النشاط للتطبيق، بما في ذلك المحتوى الذي يتم عرضه عند فتحه والإجراءات التي يتم اتخاذها عند إغلاقه، ولكن لن تحتاج إلى إجراء أي تغييرات عليها.
فتح أداة تصحيح الأخطاء
قد تحتاج إلى تصحيح أخطاء تطبيقك أثناء اتّباع هذا الدرس التطبيقي حول الترميز. بما أنّ هذا التطبيق يستند إلى Electron، يتضمّن أداة تصحيح الأخطاء في Chrome. في معظم الأنظمة الأساسية، يمكنك فتحها باستخدام Ctrl + Shift + i. انقر على علامة التبويب وحدة التحكّم للاطّلاع على السجلّات ورسائل الخطأ من التطبيق.
ليس هناك الكثير لاستكشافه هنا، لذا لننتقل مباشرةً إلى تدريب مصنّف الصور.
3- تدريب أداة تصنيف الصور
في هذا القسم، ستدرّب إصدارَي TFLite وCoral من نموذج مخصّص لتصنيف الصور.
تدريب المصنّف
يأخذ مصنّف الصور الصور المدخلة ويضيف إليها تصنيفات. في هذا الدرس التطبيقي حول الترميز، ستستخدم أداة تعليم الآلة لتدريب نموذج في المتصفّح. لتسريع عملية التدريب في هذا القسم، يمكنك استخدام كمبيوتر مكتبي أو كمبيوتر محمول بدلاً من Raspberry Pi، ولكن عليك نسخ الملفات الناتجة إلى Raspberry Pi.
أنت الآن جاهز لتدريب نموذج. إذا لم تكن متأكدًا من نوع النموذج الذي تريد تدريبه، يمكنك تدريب نموذج بسيط للتعرّف على الأشخاص، وهو نموذج يرصد ما إذا كان هناك شخص في إطار الصورة.
- افتح صفحة التدريب في أداة تعليم الآلة في علامة تبويب جديدة.
- اختَر مشروع الصور ثم نموذج الصور العادي.
- أضِف نماذج صور لكل فئة. استخدام كاميرا الويب هو أسهل طريقة لإجراء ذلك. يمكنك أيضًا إعادة تسمية الصفوف.
- عند جمع بيانات كافية لكل فئة (عادةً ما تكون 50 عينة كافية)، انقر على تدريب النموذج.
عند انتهاء تدريب النموذج، من المفترض أن تظهر لك معاينة لنتائج النموذج.

جرِّب تقديم مدخلات مختلفة للنموذج. إذا عثرت على إدخال تم تصنيفه بشكل غير صحيح، أضِفه إلى بيانات التدريب وأعِد تدريب النموذج.
- عندما تصبح راضيًا عن دقة النموذج، انقر على تصدير النموذج. عليك تنزيل إصدارَين منفصلَين من النموذج.
- صدِّر النموذج كنموذج نقطة عائمة في Tensorflow Lite. سيتم تنزيل ملف باسم
converted_tflite.zip. التي يتم تشغيلها على وحدة المعالجة المركزية. - صدِّر النموذج كنموذج Tensorflow Lite EdgeTPU. يؤدي ذلك إلى تنزيل ملف باسم
converted_edgetpu.zipيعمل على Coral Edge TPU.
4. تشغيل نموذج وحدة المعالجة المركزية في تطبيقك
بعد تدريب النموذج، حان الوقت لإضافته إلى تطبيقك. وبنهاية هذا القسم، سيتمكّن التطبيق من تشغيل النموذج باستخدام وحدة المعالجة المركزية (CPU) للجهاز.
إضافة ملف النموذج إلى التطبيق
فك ضغط ملف النموذج converted_tflite.zip الذي نزّلته عند تدريب المصنّف. يحتوي الأرشيف على ملفَين. model_uquant.tflite هو نموذج TFLite المحفوظ، بما في ذلك الرسم البياني للنموذج والأوزان. يحتوي labels.txt على التصنيفات التي يمكن للمستخدم قراءتها للفئات التي يتوقّعها النموذج. ضَع كلا الملفَين في modeldirectory.
تثبيت التبعيات
يتطلّب تحميل نموذج ومعالجة المدخلات مسبقًا بعض التبعيات من TensorFlow.js:
-
tfjs-tflite-node: حزمة TensorFlow.js لتشغيل نماذج TFLite في Node.js -
@tensorflow/tfjs: الحزمة الرئيسية في TensorFlow.js
تم تثبيت @tensorflow/tfjs من قبل، ولكن عليك تثبيت tfjs-tflite-node باستخدام الأمر التالي:
npm install --save tfjs-tflite-node
بعد تثبيته، أضِفه إلى التطبيق في أعلى renderer.js:
الجزء 1 من CODELAB: استيراد tfjs-tflite-node
const {loadTFLiteModel} = require('tfjs-tflite-node');
تحميل النموذج
أنت الآن جاهز لتحميل النموذج. توفّر tfjs-tflite-node الدالة loadTFLiteModel لإجراء ذلك. يمكنه تحميل النماذج من مسار ملف أو ArrayBuffer أو عنوان URL على TFHub. لتحميل النموذج والأوزان، أضِف ما يلي إلى الدالة main:
الجزء 1 من CODELAB: حمِّل النموذج هنا.
const modelPath = './model/model_unquant.tflite';
const model = await loadTFLiteModel(modelPath);
const labels = fs.readFileSync('./model/labels.txt', 'utf8')
.split('\n');
تشغيل النموذج
يتطلّب تشغيل النموذج ثلاث خطوات. أولاً، عليك سحب إطار إدخال ومعالجته مسبقًا من كاميرا الويب. بعد ذلك، يمكنك تشغيل النموذج على هذا الإطار والحصول على نتيجة توقّعية. بعد ذلك، اعرض التوقّع على الصفحة.
المعالجة المُسبَقة لبيانات الإدخال من كاميرا الويب
في الوقت الحالي، كاميرا الويب هي مجرد عنصر HTML، ولا تتوفّر الإطارات التي تعرضها لملف JavaScript renderer.js. لسحب اللقطات من كاميرا الويب، يوفّر TensorFlow.js tf.data.webcam، الذي يوفّر طريقة capture() سهلة الاستخدام لالتقاط اللقطات من الكاميرا.
لاستخدامها، أضِف رمز الإعداد هذا إلى main():
الدرس التطبيقي 1: إعداد tf.data.webcam هنا
const tensorCam = await tf.data.webcam(webcam);
بعد ذلك، لالتقاط صورة لكل إطار، أضِف ما يلي إلى run():
الجزء 1 من CODELAB: التقاط إطارات كاميرا الويب هنا.
const image = await tensorCam.capture();
عليك أيضًا إجراء معالجة مسبقة لكل إطار ليكون متوافقًا مع النموذج. يحتوي النموذج المستخدَم في هذا الدرس التطبيقي حول الترميز على شكل إدخال [1, 224, 224, 3]، لذا يتوقّع صورة RGB بحجم 224 × 224 بكسل. يعطي tensorCam.capture() شكلاً [224, 224, 3]، لذا عليك إضافة بُعد إضافي في مقدّمة المتّجه متعدّد الأبعاد باستخدام tf.expandDims. بالإضافة إلى ذلك، يتوقّع نموذج وحدة المعالجة المركزية إدخال Float32 بين -1 و1، ولكن كاميرا الويب تسجّل قيمًا من 0 إلى 255. يمكنك تقسيم موتر الإدخال على 127 لتغيير نطاقه من [0, 255] إلى [0, ~2] ثم طرح 1 للحصول على النطاق المطلوب [-1, ~1]. أضِف الأسطر التالية إلى tf.tidy() في الدالة run() لتنفيذ ذلك:
الجزء 1 من CODELAB: معالجة لقطات كاميرا الويب مسبقًا هنا
const expanded = tf.expandDims(image, 0);
const divided = tf.div(expanded, tf.scalar(127));
const normalized = tf.sub(divided, tf.scalar(1));
من المهم التخلص من الموترات بعد استخدامها. تنفّذ tf.tidy() ذلك تلقائيًا للرمز البرمجي المتضمّن في دالة رد الاتصال، ولكنّها لا تتيح استخدام الدوال غير المتزامنة. عليك التخلّص يدويًا من موتر الصورة الذي أنشأته سابقًا من خلال استدعاء الطريقة dispose() الخاصة به.
الجزء 1 من CODELAB: تخلَّص من إطارات كاميرا الويب هنا.
image.dispose();
تشغيل النموذج وعرض النتائج
لتشغيل النموذج على الإدخال الذي تمت معالجته مسبقًا، استدعِ الدالة model.predict() على الموتر العادي. تعرض هذه الدالة متّجهًا متعدّد الأبعاد أحادي البُعد يحتوي على الاحتمالية المتوقّعة لكل وسم. اضرب هذا الاحتمال في 100 للحصول على النسبة المئوية لاحتمال كل تصنيف، واستخدِم الدالة showPrediction المضمّنة في رمز البداية لعرض توقّع النموذج على الشاشة.
يستخدم هذا الرمز أيضًا stats.js لتحديد المدة التي تستغرقها عملية التوقّع من خلال إجراء طلبات إلى stats.begin وstats.end حول model.predict.
الجزء 1 من CODELAB: شغِّل النموذج واعرض النتائج هنا.
stats.begin();
const prediction = model.predict(normalized);
stats.end();
const percentage = tf.mul(prediction, tf.scalar(100));
showPrediction(percentage.dataSync(), labels);
أعِد تشغيل التطبيق باستخدام yarn start، وستظهر لك التصنيفات من النموذج.

الأداء
وبما أنّ النموذج مُعدّ حاليًا، فهو يعمل على وحدة المعالجة المركزية. هذا الإعداد مناسب لأجهزة الكمبيوتر المكتبي ومعظم أجهزة الكمبيوتر المحمول، ولكن قد لا يكون مرغوبًا فيه إذا كنت تستخدمه على Raspberry Pi أو جهاز آخر منخفض الطاقة. على جهاز Raspberry Pi 4، من المحتمل أن ترى حوالي 10 لقطات في الثانية، وهو ما قد لا يكون سريعًا بما يكفي لبعض التطبيقات. للحصول على أداء أفضل بدون استخدام جهاز أسرع، يمكنك استخدام شرائح سيليكون خاصة بالتطبيقات في شكل Coral Edge TPU.
5- تشغيل نموذج Coral في تطبيقك
إذا لم يكن لديك جهاز Coral، يمكنك تخطّي هذا القسم.
تستند هذه الخطوة من الدرس التطبيقي حول الترميز إلى الرمز الذي كتبته في القسم الأخير، ولكن يمكنك استخدام نقطة مرجعية cpu_inference_working بدلاً من ذلك إذا أردت البدء من جديد.
إنّ خطوات تشغيل نموذج Coral مطابقة تقريبًا لخطوات تشغيل نموذج وحدة المعالجة المركزية. ويكمن الاختلاف الرئيسي في تنسيق النموذج. بما أنّ Coral لا تتوافق إلا مع موترات uint8، يتم تحديد كمية النموذج. يؤثّر ذلك في موترات الإدخال التي يتم تمريرها إلى النموذج وموترات الإخراج التي يعرضها. يتمثل الاختلاف الآخر في ضرورة تجميع النماذج باستخدام برنامج تجميع Edge TPU لتشغيلها على Coral TPU. لقد نفّذت أداة TeachableMachine هذه الخطوة، ولكن يمكنك التعرّف على كيفية تنفيذها لنماذج أخرى من خلال الانتقال إلى مستندات Coral.
إضافة ملف طراز Coral إلى التطبيق
فكّ ضغط ملف النموذج converted_edgetpu.zip الذي نزّلته عند تدريب المصنّف. يتضمّن الأرشيف ملفَين. model_edgetpu.tflite هو نموذج TFLite المحفوظ، بما في ذلك الرسم البياني للنموذج والأوزان. يحتوي labels.txt على التصنيفات التي يمكن للمستخدم قراءتها للفئات التي يتوقّعها النموذج. ضَع ملف النموذج في الدليل coral_model.
تثبيت التبعيات
يتطلّب تشغيل نماذج Coral مكتبة وقت التشغيل لوحدة معالجة الموتّرات (Edge TPU). يُرجى التأكّد من تثبيته باتّباع تعليمات الإعداد قبل المتابعة.
يمكن الوصول إلى أجهزة Coral باعتبارها مفوّضين في TFLite. للوصول إليها من JavaScript، ثبِّت حزمة coral-tflite-delegate:
npm install --save coral-tflite-delegate
بعد ذلك، استورِد المفوَّض من خلال إضافة هذا السطر إلى أعلى ملف renderer.js:
الجزء 2 من CODELAB: استيراد مفوّض هنا
const {CoralDelegate} = require('coral-tflite-delegate');
تحميل النموذج
أنت الآن جاهز لتحميل نموذج Coral. يمكنك إجراء ذلك بالطريقة نفسها التي تستخدمها مع طراز وحدة المعالجة المركزية، ولكن عليك الآن تمرير الخيارات إلى الدالة loadTFLiteModel لتحميل Coral Delegate.
الجزء 2 من CODELAB: حمِّل نموذج التفويض هنا.
const coralModelPath = './coral_model/model_edgetpu.tflite';
const options = {delegates: [new CoralDelegate()]};
const coralModel = await loadTFLiteModel(coralModelPath, options);
لست بحاجة إلى تحميل التصنيفات لأنّها مماثلة لتصنيفات طراز وحدة المعالجة المركزية.
إضافة زر للتبديل بين وحدة المعالجة المركزية (CPU) وCoral
يمكنك إضافة طراز Coral إلى جانب طراز وحدة المعالجة المركزية الذي أضفته في القسم الأخير. ويصعب رصد الاختلافات في الأداء عند تشغيلهما في الوقت نفسه، لذا يتم استخدام زر تبديل للتبديل بين تنفيذ Coral وتنفيذ وحدة المعالجة المركزية.
أضِف الزر باستخدام الرمز التالي:
CODELAB الجزء 2: أنشئ زرّ التفويض هنا.
let useCoralDelegate = false;
const toggleCoralButton = document.createElement('button');
function toggleCoral() {
useCoralDelegate = !useCoralDelegate;
toggleCoralButton.innerText = useCoralDelegate
? 'Using Coral. Press to switch to CPU.'
: 'Using CPU. Press to switch to Coral.';
}
toggleCoralButton.addEventListener('click', toggleCoral);
toggleCoral();
document.body.appendChild(toggleCoralButton);
لنربط هذا الشرط بالدالة run(). عندما تكون قيمة useCoralDelegate هي "خطأ"، يجب تشغيل إصدار وحدة المعالجة المركزية. وفي الحالات الأخرى، سيتم تشغيل إصدار Coral (ولكن لن يحدث أي شيء في الوقت الحالي). تضمين الرمز من تشغيل طراز وحدة المعالجة المركزية في عبارة if يُرجى العِلم أنّه تم استبعاد موتر expanded من عبارة if لأنّ نموذج Coral يستخدمه.
الجزء 2 من CODELAB: التحقّق مما إذا كان سيتم استخدام مفوّض هنا.
// NOTE: Don't just copy-paste this code into the app.
// You'll need to edit the code from the CPU section.
const expanded = tf.expandDims(image, 0);
if (useCoralDelegate) {
// CODELAB part 2: Run Coral prediction here.
} else {
const divided = tf.div(expanded, tf.scalar(127));
const normalized = tf.sub(divided, tf.scalar(1));
stats.begin();
const prediction = model.predict(normalized);
stats.end();
const percentage = tf.mul(prediction, tf.scalar(100));
showPrediction(percentage.dataSync(), labels);
}
تشغيل النموذج
يتوقّع إصدار Coral من النموذج موترات uint8 من 0 إلى 255، لذا لا يحتاج إدخاله إلى تسوية. ومع ذلك، يكون الناتج أيضًا متّجه متعدّد الأبعاد uint8 في النطاق من 0 إلى 255. يجب تحويله إلى قيمة عائمة من 0 إلى 100 قبل عرضه.
الجزء 2 من ورشة العمل: تنفيذ توقّعات Coral هنا. (هذا جزء من مقتطف الرمز البرمجي أعلاه)
stats.begin();
const prediction = coralModel.predict(expanded);
stats.end();
const percentage = tf.div(tf.mul(prediction, tf.scalar(100)), tf.scalar(255));
showPrediction(percentage.dataSync(), labels);
أعِد تشغيل التطبيق باستخدام yarn start، ومن المفترض أن يعرض تصنيفات من أداة تسريع Coral.

يمكنك التبديل بين استنتاج Coral واستنتاج وحدة المعالجة المركزية (CPU) من خلال الضغط على الزر. قد تلاحظ أنّ ترتيبات الثقة في نموذج Coral أقل دقة من ترتيبات الثقة في نموذج وحدة المعالجة المركزية، وعادةً ما تنتهي برقم عشري زوجي. ويُعدّ هذا الانخفاض في الدقة نتيجة لتشغيل نموذج كمّي على Coral. لا يهم ذلك عادةً من الناحية العملية، ولكن يجب أخذ ذلك في الاعتبار.
ملاحظة حول الأداء
يتضمّن معدّل عرض اللقطات الذي تراه المعالجة المسبقة واللاحقة، لذا فهو لا يمثّل إمكانات أجهزة Coral. يمكنك الحصول على فكرة أفضل عن الأداء من خلال النقر على مقياس عدد اللقطات في الثانية إلى أن يعرض وقت الاستجابة (بالملّي ثانية)، والذي يقيس فقط طلب model.predict. ومع ذلك، لا يزال ذلك يشمل الوقت المستغرَق لنقل Tensor إلى روابط C الأصلية في TFLite ثم إلى جهاز Coral، لذا فهو ليس مقياسًا مثاليًا. للحصول على مقاييس أداء أكثر دقة مكتوبة بلغة C++، يُرجى الاطّلاع على صفحة مقاييس EdgeTPU.
يُرجى العِلم أيضًا أنّه تم تسجيل الفيديو على كمبيوتر محمول بدلاً من Raspberry Pi، لذا قد يظهر لك معدّل لقطات مختلف في الثانية.
تسريع عملية المعالجة المسبقة في Coral
في بعض الحالات، يمكنك تسريع عملية المعالجة المسبقة من خلال تبديل الخلفيات في TFJS. الخادم الخلفي التلقائي هو WebGL، وهو مناسب للعمليات الكبيرة والقابلة للتوازي، ولكن هذا التطبيق لا ينفّذ الكثير من هذه العمليات في مرحلة المعالجة المسبقة (العملية الوحيدة التي يستخدمها هي expandDims، وهي ليست متوازية). يمكنك التبديل إلى وحدة المعالجة المركزية لتجنُّب وقت الاستجابة الإضافي لنقل الموترات من وإلى وحدة معالجة الرسومات عن طريق إضافة هذا السطر بعد عمليات الاستيراد في أعلى الملف.
tf.setBackend(‘cpu');
يؤثر ذلك أيضًا في المعالجة المُسبقة لنموذج TFLite لوحدة المعالجة المركزية (CPU)، والذي يتم تنفيذه بالتوازي، وبالتالي يعمل النموذج بشكل أبطأ بكثير مع هذا التغيير.
6. تسريع نموذج وحدة المعالجة المركزية (CPU) باستخدام WebNN
إذا لم يكن لديك أداة تسريع Coral، أو إذا كنت تريد تجربة طريقة أخرى لتسريع النموذج، يمكنك استخدام WebNN TFLite delegate. يستخدم هذا المفوّض أجهزة تعلُّم الآلة المضمّنة في معالِجات Intel لتسريع استنتاج النماذج باستخدام حزمة أدوات OpenVINO. وبالتالي، يتضمّن متطلبات إضافية لم يتم تناولها في قسم الإعداد في هذا الدرس التطبيقي حول الترميز، وعليك تثبيت حزمة أدوات OpenVINO. يُرجى التأكّد من أنّ عملية الإعداد تتوافق مع منصات النظام المستهدَفة المتوافقة قبل المتابعة، ولكن يُرجى العِلم أنّ WebNN delegate لا يتوافق بعد مع نظام التشغيل macOS.
تثبيت حزمة أدوات OpenVINO
تستخدم حزمة أدوات OpenVINO أجهزة تعلُّم الآلة المضمّنة في معالجات Intel لتسريع النماذج. يمكنك تنزيل نسخة مجمّعة مسبقًا من Intel أو إنشاء نسخة من المصدر. تتوفّر عدة طرق لتثبيت OpenVINO، ولكن لأغراض هذا الدرس التطبيقي حول الترميز، ننصحك باستخدام نص برمجي خاص بأداة التثبيت على Windows أو Linux. احرص على تثبيت الإصدار 2021.4.2 من وقت التشغيل المتوافق مع الدعم الطويل الأمد، لأنّ الإصدارات الأخرى قد لا تكون متوافقة. بعد تشغيل برنامج التثبيت، تأكَّد من ضبط متغيرات البيئة الخاصة بالصدفة كما هو موضّح في تعليمات التثبيت لنظام التشغيل Linux أو Windows ( حل دائم)، أو من خلال تشغيل الأمر setupvars.sh (Linux) أو setupvars.bat (Windows) الموجود في الدليل webnn-tflite-delegate.
التأكّد من عمل WebNN Delegate
للتحقّق من أنّ WebNN delegate يعمل بشكل صحيح، شغِّل اختبارات الدمج لحزمة webnn-tflite-delegate المتوفّرة في الدليل الجذر للمستودع. لتشغيل اختبارات الدمج، شغِّل الأوامر التالية في دليل الحزمة:
# In webnn-tflite-delegate/
npx yarn
npx yarn test-integration
من المفترض أن تظهر لك نتيجة مثل هذه:
WebNN delegate: WebNN device set to 0.
INFO: Created TensorFlow Lite WebNN delegate for device Default and power Default.
============================
Hi there 👋. Looks like you are running TensorFlow.js in Node.js. To speed things up dramatically, install our node backend, which binds to TensorFlow C++, by running npm i @tensorflow/tfjs-node, or npm i @tensorflow/tfjs-node-gpu if you have CUDA. Then call require('@tensorflow/tfjs-node'); (-gpu suffix for CUDA) at the start of your program. Visit https://github.com/tensorflow/tfjs-node for more details.
============================
label: wine bottle
score: 0.934505045413971
.
1 spec, 0 failures
Finished in 0.446 seconds
Randomized with seed 58441 (jasmine --random=true --seed=58441)
Done in 8.07s.
إذا ظهرت لك نتيجة مشابهة لما يلي، يشير ذلك إلى حدوث خطأ في الإعداد:
Platform node has already been set. Overwriting the platform with node.
Randomized with seed 05938
Started
error Command failed with exit code 3221225477.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
من المرجّح أنّ هذا الناتج يعني أنّك لم تضبط متغيّرات بيئة OpenVINO. في الوقت الحالي، يمكنك ضبطها عن طريق تنفيذ الأمر setupvars.sh (Linux) أو setupvars.bat (Windows)، ولكن قد تحتاج إلى ضبطها بشكل دائم باتّباع تعليمات Linux أو Windows ( حلّ دائم). إذا كنت تستخدم نظام التشغيل Windows، اتّبِع الخطوات التالية:
setupvars.bat
لا يتوافق الأمر مع Git bash، لذا احرص على تشغيله وتشغيل الأوامر الأخرى من هذا الدرس التطبيقي حول الترميز من موجه أوامر Windows.
تثبيت WebNN Delegate
بعد تثبيت OpenVINO، يمكنك الآن تسريع نموذج وحدة المعالجة المركزية باستخدام WebNN. يستند هذا القسم من الدرس العملي إلى الرمز الذي كتبته في قسم "تشغيل نموذج وحدة المعالجة المركزية في تطبيقك". يمكنك استخدام الرمز الذي كتبته في هذه الخطوة، ولكن إذا كنت قد أكملت قسم Coral، استخدِم نقطة التحقّق cpu_inference_working بدلاً من ذلك حتى تبدأ من جديد.
يتم توزيع جزء Node.js من وحدة WebNN النيابية على npmjs. لتثبيته، شغِّل الأمر التالي:
npm install --save webnn-tflite-delegate
بعد ذلك، استورِد المفوَّض من خلال إضافة هذا السطر إلى أعلى ملف renderer.js:
الجزء 2 من CODELAB: استيراد مفوّض هنا
const {WebNNDelegate, WebNNDevice} = require('webnn-tflite-delegate');
يتيح WebNN delegate التشغيل على وحدة المعالجة المركزية أو وحدة معالجة الرسومات، ويتيح لك WebNNDevice اختيار الوحدة التي تريد استخدامها.
تحميل النموذج
أنت الآن جاهز لتحميل النموذج مع تفعيل أداة WebNN المفوَّضة. في Coral، كان عليك تحميل ملف نموذج مختلف، ولكن WebNN يتيح استخدام تنسيق النموذج نفسه المستخدَم في TFLite. أضِف WebNNDelegate إلى قائمة المفوَّضين الذين تم تمريرهم إلى النموذج لتفعيله:
الجزء 2 من CODELAB: حمِّل نموذج التفويض هنا.
let webnnModel = await loadTFLiteModel(modelPath, {
delegates: [new WebNNDelegate({webnnDevice: WebNNDevice.DEFAULT})],
});
لست بحاجة إلى تحميل التصنيفات مرة أخرى لأنّ هذا هو النموذج نفسه.
إضافة زر للتبديل بين وحدة المعالجة المركزية (CPU) في TfLite وWebNN
بعد أن أصبح إصدار WebNN من النموذج جاهزًا، أضِف زرًا للتبديل بين WebNN وTfLite CPU inference. يصعُب رصد الاختلافات في الأداء عند تشغيلهما معًا في الوقت نفسه.
أضِف الزر باستخدام هذا الرمز (يُرجى العِلم أنّه لن يتم التبديل بين النماذج بعد):
CODELAB الجزء 2: أنشئ زرّ التفويض هنا.
let useWebNNDelegate = false;
const divElem = document.createElement('div');
const toggleWebNNButton = document.createElement('button');
function toggleWebNN() {
useWebNNDelegate = !useWebNNDelegate;
toggleWebNNButton.innerHTML = useWebNNDelegate
? 'Using WebNN. Press to switch to TFLite CPU.'
: 'Using TFLite CPU. Press to switch to WebNN.';
divElem.hidden = useWebNNDelegate ? false : true;
}
toggleWebNNButton.addEventListener('click', toggleWebNN);
toggleWebNN();
document.body.appendChild(toggleWebNNButton);
document.body.appendChild(divElem);
يضيف هذا الرمز أيضًا عنصر div الذي تستخدمه لضبط إعدادات WebNN في القسم التالي.
إضافة قائمة منسدلة للتبديل بين أجهزة WebNN
تتيح WebNN التشغيل على وحدة المعالجة المركزية (CPU) ووحدة معالجة الرسومات (GPU)، لذا أضِف قائمة منسدلة للتبديل بينهما. أضِف هذا الرمز بعد الرمز الذي ينشئ الزر:
// Create elements for WebNN device selection
divElem.innerHTML = '<br/>WebNN Device: ';
const selectElem = document.createElement('select');
divElem.appendChild(selectElem);
const webnnDevices = ['Default', 'GPU', 'CPU'];
// append the options
for (let i = 0; i < webnnDevices.length; i++) {
var optionElem = document.createElement('option');
optionElem.value = i;
optionElem.text = webnnDevices[i];
selectElem.appendChild(optionElem);
}
الآن، إذا شغّلت التطبيق، ستظهر لك قائمة منسدلة تتضمّن "تلقائي" و"وحدة معالجة الرسومات" و"وحدة المعالجة المركزية". لن يؤدي اختيار أحدها إلى أي إجراء في الوقت الحالي لأنّ القائمة المنسدلة لم يتم ربطها بعد. 
جعل القائمة المنسدلة تغيّر الجهاز
لربط القائمة المنسدلة حتى تغيّر جهاز WebNN المستخدَم، أضِف متتبِّعًا إلى حدث change لعنصر أداة اختيار القائمة المنسدلة. عندما تتغيّر القيمة المحدّدة، أعِد إنشاء نموذج WebNN مع تحديد جهاز WebNN المقابل في خيارات المفوّض.
أضِف الرمز التالي بعد الرمز الذي أضاف القائمة المنسدلة:
selectElem.addEventListener('change', async () => {
let webnnDevice;
switch(selectElem.value) {
case '1':
webnnDevice = WebNNDevice.GPU;
break;
case '2':
webnnDevice = WebNNDevice.CPU;
break;
default:
webnnDevice = WebNNDevice.DEFAULT;
break;
}
webnnModel = await loadTFLiteModel(modelPath, {
delegates: [new WebNNDelegate({webnnDevice})],
});
});
من خلال هذا التغيير، تنشئ القائمة المنسدلة نموذجًا جديدًا يتضمّن الإعدادات الصحيحة في كل مرة يتم فيها تغييرها. حان الوقت الآن لربط نموذج WebNN واستخدامه للاستنتاج.
تشغيل نموذج WebNN
نموذج WebNN جاهز للاستخدام، ولكن الزر المخصّص للتبديل بين WebNN وTfLite CPU لا يتيح التبديل بين النموذجين بعد. لتبديل النموذج، عليك أولاً إعادة تسمية المتغيّر model من وقت تحميل نموذج TfLite لوحدة المعالجة المركزية في القسم الأول من الدرس التطبيقي حول الترميز.
غيِّر السطر التالي...
const model = await loadTFLiteModel(modelPath);
...ليتطابق مع هذا السطر.
const cpuModel = await loadTFLiteModel(modelPath);
بعد إعادة تسمية المتغيّر model إلى cpuModel، أضِف هذا المتغيّر إلى الدالة run لاختيار النموذج الصحيح استنادًا إلى حالة الزر:
الجزء 2 من CODELAB: التحقّق مما إذا كان سيتم استخدام مفوّض هنا.
let model;
if (useWebNNDelegate) {
model = webnnModel;
} else {
model = cpuModel;
}
الآن، عند تشغيل التطبيق، سيتم التبديل بين وحدة المعالجة المركزية (CPU) في TfLite وWebNN. 
يمكنك أيضًا التبديل بين استنتاج وحدة المعالجة المركزية ووحدة معالجة الرسومات في WebNN إذا كانت لديك وحدة معالجة رسومات مدمَجة من Intel.
ملاحظة حول الأداء
يتضمّن معدّل عرض اللقطات الذي تراه المعالجة المسبقة والمعالجة اللاحقة، لذا فهو لا يمثّل إمكانات WebNN. يمكنك الحصول على فكرة أفضل عن الأداء من خلال النقر على مقياس عدد اللقطات في الثانية إلى أن يعرض وقت الاستجابة (بالملّي ثانية)، والذي يقيس فقط طلب model.predict. ومع ذلك، لا يزال ذلك يشمل الوقت المستغرَق لنقل "الموترات" إلى روابط C الأصلية في TFLite، لذا فهو ليس مقياسًا مثاليًا.
7. تهانينا
تهانينا! لقد أكملت للتو مشروعك الأول باستخدام Coral / WebNN باستخدام tfjs-tflite-node في Electron.
جرِّب هذه الميزة واختبِرها على مجموعة متنوعة من الصور. يمكنك أيضًا تدريب نموذج جديد على TeachableMachine لتصنيف شيء مختلف تمامًا.
ملخّص
في هذا الدرس العملي، تعلّمت ما يلي:
- كيفية تثبيت حزمة tfjs-tflite-node npm وإعدادها لتشغيل نماذج TFLite في Node.js
- كيفية تثبيت مكتبة وقت تشغيل Edge TPU لتشغيل النماذج على جهاز Coral
- كيفية تسريع استنتاج النماذج باستخدام وحدة معالجة الموتّرات (Edge TPU) من Coral
- كيفية تسريع استنتاج النماذج باستخدام WebNN
ما هي الخطوات التالية؟
بعد أن أصبح لديك أساس يمكنك البدء منه، ما هي الأفكار الإبداعية التي يمكنك التوصّل إليها لتوسيع نطاق أداة تنفيذ نموذج التعلّم الآلي هذه ليشمل حالة استخدام واقعية قد تعمل عليها؟ قد تتمكّن من إحداث ثورة في المجال الذي تعمل فيه من خلال الاستدلال السريع والميسور التكلفة، أو قد تتمكّن من تعديل محمصة خبز لتتوقف عن التحميص عندما يبدو الخبز مناسبًا تمامًا. بإمكانك الحصول على خيارات لا تُعدّ ولا تُحصى.
لمزيد من المعلومات حول كيفية تدريب TeachableMachine للنموذج الذي استخدمته، يمكنك الاطّلاع على الدرس التطبيقي حول الترميز الخاص بنا عن التعلّم القائم على نقل المهام. إذا كنت تبحث عن نماذج أخرى تعمل مع Coral، مثل التعرّف على الكلام وتقدير الوضع، يمكنك الاطّلاع على coral.ai/models. يمكنك أيضًا العثور على إصدارات متوافقة مع وحدة المعالجة المركزية من هذه النماذج وغيرها الكثير على TensorFlow Hub.
مشاركة المحتوى الذي تصنعه معنا
يمكنك بسهولة توسيع نطاق استخدام ما صنعته اليوم ليشمل حالات إبداعية أخرى أيضًا، ونشجّعك على التفكير بأسلوب جديد ومواصلة الابتكار.
لا تنسَ الإشارة إلينا على وسائل التواصل الاجتماعي باستخدام الهاشتاغ #MadeWithTFJS للحصول على فرصة عرض مشروعك على مدونة TensorFlow أو حتى في الفعاليات المستقبلية. نتشوّق لرؤية ابتكاراتك.