أنشِئ كاميرا ويب ذكية باستخدام JavaScript باستخدام نموذج تعلُّم الآلة المدرب مسبقًا على TensorFlow.js.

1. قبل البدء

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

المتطلبات الأساسية

تمت كتابة هذا الدرس التطبيقي حول الترميز للمهندسين ذوي الخبرة الذين يعرفون JavaScript.

ما ستنشئه

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على ما يلي:

أنشئ صفحة ويب تستخدم تعلُّم الآلة مباشرةً في متصفّح الويب من خلال TensorFlow.js لتصنيف الكائنات الشائعة ورصدها (نعم، بما في ذلك أكثر من كائن واحد في المرة الواحدة) من بث مباشر عبر كاميرا الويب.
يمكنك تحويل كاميرا الويب العادية إلى كاميرا ذكية للتعرّف على الكائنات والحصول على إحداثيات المربّع المحيط بكل كائن يتم العثور عليه
تمييز العنصر الذي تم العثور عليه في بث الفيديو، كما هو موضّح أدناه:

تخيّل أنّه بإمكانك رصد ما إذا كان هناك شخص في فيديو، وبالتالي يمكنك احتساب عدد الأشخاص المتواجدين في أي وقت معيّن لتقدير مدى ازدحام منطقة معيّنة خلال اليوم، أو إرسال تنبيه إلى نفسك عند رصد كلبك في غرفة من منزلك أثناء غيابك، ربما في مكان لا يُفترض أن يكون فيه. إذا تمكّنت من إجراء ذلك، ستكون على وشك إنشاء إصدارك الخاص من Google Nest Cam التي يمكنها تنبيهك عند رصد دخيل (من أي نوع) باستخدام أجهزتك المخصّصة. أنيق جدًا. هل يصعب تنفيذها؟ كلا. لنبدأ عملية الاختراق...

ما ستتعلمه

كيفية تحميل نموذج TensorFlow.js مدرَّب مسبقًا
كيفية الحصول على البيانات من بث مباشر باستخدام كاميرا ويب ورسمها على لوحة العرض
كيفية تصنيف إطار صورة للعثور على المربّعات المحيطة بأي كائنات تم تدريب النموذج على التعرّف عليها
كيفية استخدام البيانات التي تم إرجاعها من النموذج لتسليط الضوء على العناصر التي تم العثور عليها

يركّز هذا الدرس التطبيقي حول الترميز على كيفية البدء في استخدام النماذج المدرَّبة مسبقًا في TensorFlow.js. لا يتم شرح المفاهيم وكتل الرموز البرمجية غير ذات الصلة بـ TensorFlow.js وتعلُّم الآلة، ويتم توفيرها لتتمكّن من نسخها ولصقها ببساطة.

2. ما هي مكتبة TensorFlow.js؟

‫TensorFlow.js هي مكتبة مفتوحة المصدر لتعلُّم الآلة يمكن تشغيلها في أي مكان يمكن فيه تشغيل JavaScript. وهي تستند إلى مكتبة TensorFlow الأصلية المكتوبة بلغة Python وتهدف إلى إعادة إنشاء تجربة المطوّرين هذه ومجموعة واجهات برمجة التطبيقات لنظام JavaScript المتكامل.

أين يمكن استخدامها؟

بفضل إمكانية نقل JavaScript، يمكنك الآن كتابة التعليمات البرمجية بلغة واحدة وتنفيذ تعلُّم الآلة على جميع المنصات التالية بسهولة:

من جهة العميل في متصفّح الويب باستخدام JavaScript العادية
الخادم وحتى أجهزة إنترنت الأشياء، مثل Raspberry Pi باستخدام Node.js
تطبيقات الكمبيوتر التي تستخدم Electron
تطبيقات الأجهزة الجوّالة المتوافقة مع نظام التشغيل باستخدام React Native

تتيح مكتبة TensorFlow.js أيضًا استخدام عدة أنظمة خلفية في كل من هذه البيئات (البيئات المستندة إلى الأجهزة الفعلية التي يمكن تنفيذها فيها، مثل وحدة المعالجة المركزية أو WebGL على سبيل المثال). لا يعني "الخادم الخلفي" في هذا السياق بيئة من جهة الخادم، بل يمكن أن يكون الخادم الخلفي للتنفيذ من جهة العميل في WebGL مثلاً، وذلك لضمان التوافق والحفاظ على سرعة الأداء. يتوافق TensorFlow.js حاليًا مع ما يلي:

تنفيذ WebGL على بطاقة الرسومات في الجهاز (وحدة معالجة الرسومات): هذه هي أسرع طريقة لتنفيذ نماذج أكبر (أكثر من 3 ميغابايت) مع تسريع وحدة معالجة الرسومات.
تنفيذ Web Assembly (WASM) على وحدة المعالجة المركزية (CPU): لتحسين أداء وحدة المعالجة المركزية على جميع الأجهزة، بما في ذلك الهواتف الجوّالة القديمة مثلاً. هذا الخيار أنسب للنماذج الأصغر حجمًا (أقل من 3 ميغابايت) التي يمكن تنفيذها بشكل أسرع على وحدة المعالجة المركزية باستخدام WASM مقارنةً بـ WebGL بسبب تكلفة تحميل المحتوى إلى معالج الرسومات.
تنفيذ وحدة المعالجة المركزية: يجب أن يكون الخيار الاحتياطي متاحًا في حال عدم توفّر أي من البيئات الأخرى. هذه الطريقة هي الأبطأ من بين الطرق الثلاث، ولكنّها متاحة لك دائمًا.

ملاحظة: يمكنك اختيار فرض إحدى الخلفيات إذا كنت تعرف الجهاز الذي سيتم التنفيذ عليه، أو يمكنك ببساطة السماح لـ TensorFlow.js بتحديد ذلك نيابةً عنك إذا لم تحدّد ذلك.

ميزات خارقة من جهة العميل

يمكن أن يؤدي تشغيل TensorFlow.js في متصفّح الويب على جهاز العميل إلى تحقيق العديد من المزايا التي تستحق أخذها في الاعتبار.

الخصوصية

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

السرعة

بما أنّك لست مضطرًا إلى إرسال البيانات إلى خادم بعيد، يمكن أن يكون الاستنتاج (تصنيف البيانات) أسرع. والأفضل من ذلك، يمكنك الوصول مباشرةً إلى أدوات الاستشعار في الجهاز، مثل الكاميرا والميكروفون ونظام تحديد المواقع العالمي (GPS) ومقياس التسارع وغيرها، إذا منحك المستخدم إذن الوصول.

الوصول إلى الجمهور على نطاق واسع

بنقرة واحدة، يمكن لأي شخص في العالم النقر على رابط ترسله إليه، وفتح صفحة الويب في المتصفّح، والاستفادة من المحتوى الذي أنشأته. لا حاجة إلى إعداد معقّد لخادم Linux مع برامج تشغيل CUDA وغير ذلك الكثير لمجرّد استخدام نظام تعلُّم الآلة.

التكلفة

عدم الحاجة إلى خوادم يعني أنّ الشيء الوحيد الذي عليك الدفع مقابله هو شبكة توصيل المحتوى (CDN) لاستضافة ملفات HTML وCSS وJS والنماذج. إنّ تكلفة شبكة توصيل المحتوى أقل بكثير من تكلفة تشغيل خادم (ربما مع بطاقة رسومات مرفقة) على مدار الساعة طوال أيام الأسبوع.

الميزات من جهة الخادم

يتيح استخدام Node.js في TensorFlow.js الميزات التالية.

التوافق الكامل مع CUDA

على مستوى الخادم، لتسريع بطاقة الرسومات، يجب تثبيت برامج تشغيل NVIDIA CUDA لتمكين TensorFlow من العمل مع بطاقة الرسومات (على عكس المتصفّح الذي يستخدم WebGL، فلا حاجة إلى التثبيت). ومع ذلك، يمكنك الاستفادة بشكل كامل من إمكانات بطاقة الرسومات ذات المستوى الأدنى من خلال توفُّر توافق كامل مع CUDA، ما يؤدي إلى تقليل وقت التدريب والاستنتاج. ويكون الأداء مماثلاً لتنفيذ TensorFlow في Python لأنّهما يشتركان في الخلفية نفسها المكتوبة بلغة C++.

حجم النموذج

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

IOT

يتوافق Node.js مع أجهزة الكمبيوتر الشائعة ذات اللوحة الواحدة، مثل Raspberry Pi، ما يعني بدوره أنّه يمكنك تنفيذ نماذج TensorFlow.js على هذه الأجهزة أيضًا.

السرعة

تمت كتابة Node.js بلغة JavaScript، ما يعني أنّها تستفيد من التجميع أثناء التشغيل. وهذا يعني أنّه قد تلاحظ غالبًا تحسّنًا في الأداء عند استخدام Node.js لأنّه سيتم تحسينه في وقت التشغيل، خاصةً لأي معالجة مسبقة قد تجريها. يمكن الاطّلاع على مثال رائع لذلك في دراسة الحالة هذه التي توضّح كيف استخدمت شركة Hugging Face منصة Node.js لتحسين أداء نموذج معالجة اللغة الطبيعية بمقدار الضعف.

بعد أن تعرّفت على أساسيات TensorFlow.js، والمكان الذي يمكن تشغيلها فيه، وبعض المزايا، لنبدأ الآن في تنفيذ مهام مفيدة باستخدامها.

3- نماذج مدرَّبة مسبقًا

توفّر TensorFlow.js مجموعة متنوّعة من نماذج تعلُّم الآلة المدرَّبة مسبقًا. وقد درّب فريق TensorFlow.js هذه النماذج وضمّنها في فئة سهلة الاستخدام، وهي طريقة رائعة لاتخاذ خطواتك الأولى في مجال تعلُّم الآلة. بدلاً من إنشاء نموذج وتدريبه لحلّ مشكلتك، يمكنك استيراد نموذج مدرَّب مسبقًا كنقطة بداية.

يمكنك العثور على قائمة متزايدة من النماذج المدرَّبة مسبقًا وسهلة الاستخدام على صفحة نماذج JavaScript في Tensorflow.js. هناك أيضًا أماكن أخرى يمكنك الحصول منها على نماذج TensorFlow محوَّلة تعمل في TensorFlow.js، بما في ذلك TensorFlow Hub.

لماذا يجب استخدام نموذج مدرَّب مسبقًا؟

هناك عدد من المزايا لبدء استخدام نموذج شائع مُدرَّب مسبقًا إذا كان مناسبًا لحالة الاستخدام المطلوبة، مثل:

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

ما هو COCO-SSD؟

‫COCO-SSD هو اسم نموذج تعلُّم الآلة لرصد العناصر المدرَّب مسبقًا والذي ستستخدمه خلال هذا الدرس التطبيقي حول الترميز، وهو يهدف إلى تحديد موقع عناصر متعددة والتعرّف عليها في صورة واحدة. بعبارة أخرى، يمكن أن يتيح لك معرفة المربع المحيط بالعناصر التي تم تدريبه على العثور عليها ليقدّم لك الموقع الجغرافي لهذا العنصر في أي صورة تقدّمها إليه. يظهر مثال في الصورة أدناه:

إذا كان هناك أكثر من كلب واحد في الصورة أعلاه، سيتم تزويدك بإحداثيات مربّعَي حدود، يصفان موقع كل كلب. تم تدريب COCO-SSD مسبقًا للتعرّف على 90 عنصرًا شائعًا من الحياة اليومية، مثل شخص أو سيارة أو قطة وما إلى ذلك.

ما هو مصدر الاسم؟

قد يبدو الاسم غريبًا، ولكنّه مشتق من اختصارَين:

COCO: يشير إلى أنّه تم تدريبه على مجموعة بيانات COCO (الكائنات الشائعة في السياق) المتاحة مجانًا لأي شخص لتنزيلها واستخدامها عند تدريب النماذج الخاصة به. تحتوي مجموعة البيانات على أكثر من 200,000 صورة مصنّفة يمكن استخدامها للتعلم منها.
‫SSD (Single Shot MultiBox Detection): يشير إلى جزء من بنية النموذج الذي تم استخدامه في تنفيذ النموذج. لست بحاجة إلى فهم ذلك في هذا الدرس العملي، ولكن إذا كنت مهتمًا، يمكنك الاطّلاع على مزيد من المعلومات حول محركات الأقراص ذات الحالة الصلبة هنا.

4. طريقة الإعداد

المتطلبات

متصفّح ويب حديث
معرفة أساسية بلغات HTML وCSS وJavaScript وأدوات مطوّري البرامج في Chrome (عرض مخرجات وحدة التحكّم)

لنتعلّم الترميز

تم إنشاء نماذج رموز نموذجية للبدء منها على Glitch.com أو Codepen.io. يمكنك ببساطة استنساخ أيّ من النموذجين كحالة أساسية لهذا الدرس العملي، وذلك بنقرة واحدة فقط.

في Glitch، انقر على الزر remix this لإنشاء نسخة معدّلة منه ومجموعة جديدة من الملفات يمكنك تعديلها.

بدلاً من ذلك، انقر على fork في أسفل يسار الشاشة على Codepen.

يوفّر لك هذا الهيكل البسيط جدًا الملفات التالية:

صفحة HTML (index.html)
ورقة الأنماط (style.css)
ملف لكتابة رمز JavaScript البرمجي (script.js)

لتسهيل الأمر عليك، تمت إضافة عملية استيراد في ملف HTML لمكتبة TensorFlow.js. يبدو على النحو التالي:

index.html

<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>

حلّ بديل: استخدام محرّر الويب المفضّل أو العمل على جهازك

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

5- ملء بنية HTML

تتطلّب جميع النماذج الأولية بعض عمليات إنشاء بنية HTML الأساسية. ستستخدم هذا المتغير لعرض نتائج نموذج تعلُّم الآلة لاحقًا. لنضبط هذا الإعداد الآن:

عنوان للصفحة
بعض النصوص الوصفية
زر لتفعيل كاميرا الويب
علامة فيديو لعرض بث كاميرا الويب

لإعداد هذه الميزات، افتح ملف index.html والصِق الرمز التالي بدلاً من الرمز الحالي:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Multiple object detection using pre trained model in TensorFlow.js</title>
    <meta charset="utf-8">
    <!-- Import the webpage's stylesheet -->
    <link rel="stylesheet" href="style.css">
  </head>  
  <body>
    <h1>Multiple object detection using pre trained model in TensorFlow.js</h1>

    <p>Wait for the model to load before clicking the button to enable the webcam - at which point it will become visible to use.</p>
    
    <section id="demos" class="invisible">

      <p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
      
      <div id="liveView" class="camView">
        <button id="webcamButton">Enable Webcam</button>
        <video id="webcam" autoplay muted width="640" height="480"></video>
      </div>
    </section>

    <!-- Import TensorFlow.js library -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
    <!-- Load the coco-ssd model to use to recognize things in images -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
    
    <!-- Import the page's JavaScript to do some stuff -->
    <script src="script.js" defer></script>
  </body>
</html>

فهم الرمز

لاحظ بعض العناصر الأساسية التي أضفتها:

لقد أضفت علامة <h1> وبعض علامات <p> للعنوان وبعض المعلومات حول كيفية استخدام الصفحة. لا يوجد شيء مميز هنا.

أضفت أيضًا علامة قسم تمثّل مساحة العرض التوضيحي:

index.html

    <section id="demos" class="invisible">

      <p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
      
      <div id="liveView" class="webcam">
        <button id="webcamButton">Enable Webcam</button>
        <video id="webcam" autoplay width="640" height="480"></video>
      </div>
    </section>

في البداية، ستمنح هذا section فئة "غير مرئي". يساعدك ذلك في توضيح الوقت الذي يصبح فيه النموذج جاهزًا للمستخدم بشكل مرئي، ومتى يمكنه النقر على الزر تفعيل كاميرا الويب بأمان.
أضفت الزر تفعيل كاميرا الويب، والذي ستحدّد نمطه في CSS.
أضفت أيضًا علامة فيديو سيتم بثّ محتوى كاميرا الويب إليها. ستُعدّ هذه السمة في رمز JavaScript بعد قليل.

إذا عاينت الناتج الآن، من المفترض أن يظهر على النحو التالي:

6. إضافة نمط

الإعدادات التلقائية للعناصر

أولاً، لنضِف أنماطًا لعناصر HTML التي أضفناها للتو لضمان عرضها بشكلٍ صحيح:

style.css

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
  color: #3D3D3D;
}

h1 {
  font-style: italic;
  color: #FF6F00;
}

video {
  display: block;
}

section {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}

بعد ذلك، أضِف بعض فئات CSS المفيدة للمساعدة في الحالات المختلفة لواجهة المستخدم، مثل عندما نريد إخفاء الزر أو جعل منطقة العرض التوضيحي تبدو غير متاحة إذا لم يكن النموذج جاهزًا بعد.

style.css

.removed {
  display: none;
}

.invisible {
  opacity: 0.2;
}

.camView {
  position: relative;
  float: left;
  width: calc(100% - 20px);
  margin: 10px;
  cursor: pointer;
}

.camView p {
  position: absolute;
  padding: 5px;
  background-color: rgba(255, 111, 0, 0.85);
  color: #FFF;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  z-index: 2;
  font-size: 12px;
}

.highlighter {
  background: rgba(0, 255, 0, 0.25);
  border: 1px dashed #fff;
  z-index: 1;
  position: absolute;
}

رائع! هذا كل ما تحتاجه. إذا تمكّنت من استبدال الأنماط بنجاح باستخدام جزأَي الرمز أعلاه، من المفترض أن تبدو المعاينة المباشرة الآن على النحو التالي:

لاحظ كيف أنّ نص منطقة العرض التوضيحي والزر غير متاحَين، لأنّ HTML تلقائيًا يتضمّن الفئة "invisible". ستستخدم JavaScript لإزالة هذه الفئة عندما يصبح النموذج جاهزًا للاستخدام.

7. إنشاء بنية JavaScript

الإشارة إلى عناصر DOM الرئيسية

أولاً، تأكَّد من إمكانية الوصول إلى الأجزاء الرئيسية من الصفحة التي ستحتاج إلى تعديلها أو الوصول إليها لاحقًا في الرمز البرمجي:

script.js

const video = document.getElementById('webcam');
const liveView = document.getElementById('liveView');
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');

التحقّق من توفّر كاميرا الويب

يمكنك الآن إضافة بعض وظائف تسهيل الاستخدام للتحقّق مما إذا كان المتصفّح الذي تستخدمه يتيح الوصول إلى بث كاميرا الويب من خلال getUserMedia:

script.js

// Check if webcam access is supported.
function getUserMediaSupported() {
  return !!(navigator.mediaDevices &&
    navigator.mediaDevices.getUserMedia);
}

// If webcam supported, add event listener to button for when user
// wants to activate it to call enableCam function which we will 
// define in the next step.
if (getUserMediaSupported()) {
  enableWebcamButton.addEventListener('click', enableCam);
} else {
  console.warn('getUserMedia() is not supported by your browser');
}

// Placeholder function for next step. Paste over this in the next step.
function enableCam(event) {
}

استرداد بث كاميرا الويب

بعد ذلك، املأ الرمز الخاص بالدالة enableCam الفارغة التي حدّدناها أعلاه من خلال نسخ الرمز أدناه ولصقه:

script.js

// Enable the live webcam view and start classification.
function enableCam(event) {
  // Only continue if the COCO-SSD has finished loading.
  if (!model) {
    return;
  }
  
  // Hide the button once clicked.
  event.target.classList.add('removed');  
  
  // getUsermedia parameters to force video but not audio.
  const constraints = {
    video: true
  };

  // Activate the webcam stream.
  navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
    video.srcObject = stream;
    video.addEventListener('loadeddata', predictWebcam);
  });
}

أخيرًا، أضِف بعض الرموز المؤقتة لتتمكّن من اختبار ما إذا كانت كاميرا الويب تعمل.

سيتظاهر الرمز البرمجي أدناه بأنّ النموذج تم تحميله وسيفعّل زر الكاميرا، ما يتيح لك النقر عليه. ستستبدل كل هذا الرمز في الخطوة التالية، لذا استعد لحذفه مرة أخرى بعد قليل:

script.js

// Placeholder function for next step.
function predictWebcam() {
}

// Pretend model has loaded so we can try out the webcam code.
var model = true;
demosSection.classList.remove('invisible');

رائع! إذا شغّلت الرمز البرمجي ونقرت على الزر كما هو حاليًا، من المفترض أن يظهر لك ما يلي:

8. استخدام نموذج تعلُّم الآلة

تحميل النموذج

أنت الآن جاهز لتحميل نموذج COCO-SSD.

عند انتهاء عملية الإعداد الأوّلي، فعِّل المساحة التجريبية والزر على صفحة الويب (ألصِق هذا الرمز فوق الرمز المؤقت الذي أضفته في نهاية الخطوة الأخيرة):

script.js

// Store the resulting model in the global scope of our app.
var model = undefined;

// Before we can use COCO-SSD class we must wait for it to finish
// loading. Machine Learning models can be large and take a moment 
// to get everything needed to run.
// Note: cocoSsd is an external object loaded from our index.html
// script tag import so ignore any warning in Glitch.
cocoSsd.load().then(function (loadedModel) {
  model = loadedModel;
  // Show demo section now model is ready to use.
  demosSection.classList.remove('invisible');
});

بعد إضافة الرمز أعلاه وإعادة تحميل العرض المباشر، ستلاحظ أنّه بعد بضع ثوانٍ من تحميل الصفحة (حسب سرعة الشبكة)، يظهر زر تفعيل كاميرا الويب تلقائيًا عندما يصبح النموذج جاهزًا للاستخدام. ومع ذلك، نسخت أيضًا الدالة predictWebcam. حان الوقت الآن لتحديد ذلك بالكامل، لأنّ الرمز لن يفعل أي شيء في الوقت الحالي.

لننتقل إلى الخطوة التالية.

تصنيف إطار من كاميرا الويب

شغِّل الرمز أدناه للسماح للتطبيق بالتقاط إطار بشكل مستمر من بث كاميرا الويب عندما يكون المتصفح جاهزًا وتمريره إلى النموذج لتصنيفه.

بعد ذلك، سيحلّل النموذج النتائج ويرسم علامة <p> في الإحداثيات التي تم إرجاعها، ويضبط النص على تصنيف العنصر، إذا كان مستوى الثقة أعلى من مستوى معيّن.

script.js

var children = [];

function predictWebcam() {
  // Now let's start classifying a frame in the stream.
  model.detect(video).then(function (predictions) {
    // Remove any highlighting we did previous frame.
    for (let i = 0; i < children.length; i++) {
      liveView.removeChild(children[i]);
    }
    children.splice(0);
    
    // Now lets loop through predictions and draw them to the live view if
    // they have a high confidence score.
    for (let n = 0; n < predictions.length; n++) {
      // If we are over 66% sure we are sure we classified it right, draw it!
      if (predictions[n].score > 0.66) {
        const p = document.createElement('p');
        p.innerText = predictions[n].class  + ' - with ' 
            + Math.round(parseFloat(predictions[n].score) * 100) 
            + '% confidence.';
        p.style = 'margin-left: ' + predictions[n].bbox[0] + 'px; margin-top: '
            + (predictions[n].bbox[1] - 10) + 'px; width: ' 
            + (predictions[n].bbox[2] - 10) + 'px; top: 0; left: 0;';

        const highlighter = document.createElement('div');
        highlighter.setAttribute('class', 'highlighter');
        highlighter.style = 'left: ' + predictions[n].bbox[0] + 'px; top: '
            + predictions[n].bbox[1] + 'px; width: ' 
            + predictions[n].bbox[2] + 'px; height: '
            + predictions[n].bbox[3] + 'px;';

        liveView.appendChild(highlighter);
        liveView.appendChild(p);
        children.push(highlighter);
        children.push(p);
      }
    }
    
    // Call this function again to keep predicting when the browser is ready.
    window.requestAnimationFrame(predictWebcam);
  });
}

إنّ الدالة المهمة جدًا في هذا الرمز الجديد هي model.detect().

تحتوي جميع النماذج المُعدّة مسبقًا في TensorFlow.js على دالة مشابهة (قد يتغيّر اسمها من نموذج إلى آخر، لذا راجِع المستندات للحصول على التفاصيل) تنفّذ في الواقع استنتاج تعلُّم الآلة.

الاستدلال هو ببساطة عملية إدخال بعض البيانات وتشغيلها من خلال نموذج تعلُّم الآلة (الذي يتضمّن في الأساس الكثير من العمليات الرياضية)، ثم تقديم بعض النتائج. باستخدام النماذج الجاهزة في TensorFlow.js، نعرض التوقعات في شكل عناصر JSON، ما يسهّل استخدامها.

يمكنك الاطّلاع على التفاصيل الكاملة لدالة التوقّع هذه في مستندات GitHub الخاصة بنموذج COCO-SSD هنا. تتولّى هذه الدالة الكثير من العمل الشاق وراء الكواليس، إذ يمكنها قبول أي عنصر "يشبه الصورة" كمعلَمة، مثل صورة أو فيديو أو لوحة رسم وما إلى ذلك. يمكن أن يوفر لك استخدام النماذج الجاهزة الكثير من الوقت والجهد، لأنك لن تحتاج إلى كتابة هذا الرمز بنفسك ويمكنك استخدامه "فورًا".

من المفترض أن يؤدي تشغيل هذه التعليمات البرمجية الآن إلى عرض صورة مشابهة لما يلي:

أخيرًا، إليك مثال على الرمز الذي يرصد عدة عناصر في الوقت نفسه:

رائع! يمكنك الآن تخيّل مدى سهولة استخدام هذا التطبيق لإنشاء جهاز مثل Nest Cam باستخدام هاتف قديم لتلقّي تنبيهات عندما يرصد كلبك على الأريكة أو قطتك على الكرسي. إذا كنت تواجه مشاكل في الرمز، اطّلِع على النسخة النهائية التي تعمل هنا لمعرفة ما إذا كنت قد نسخت شيئًا بشكل غير صحيح.

9- تهانينا

تهانينا، لقد اتّخذت خطواتك الأولى في استخدام TensorFlow.js وتعلُّم الآلة في متصفّح الويب. حان الوقت الآن لتستفيد من هذه البدايات المتواضعة وتحوّلها إلى عمل إبداعي. ماذا ستصنع؟

ملخّص

في هذا الدرس التطبيقي حول الترميز، سننفّذ ما يلي:

تعرّفت على مزايا استخدام TensorFlow.js مقارنةً بأشكال TensorFlow الأخرى.
تعرّفت على الحالات التي قد تحتاج فيها إلى البدء بنموذج تعلُّم الآلة مدرَّب مسبقًا.
إنشاء صفحة ويب تعمل بشكل كامل ويمكنها تصنيف العناصر في الوقت الفعلي باستخدام كاميرا الويب، بما في ذلك:
إنشاء بنية HTML للمحتوى
تحديد أنماط لعناصر وفئات HTML
إعداد بنية JavaScript الأساسية للتفاعل مع HTML ورصد توفّر كاميرا ويب
تحميل نموذج TensorFlow.js مدرَّب مسبقًا
استخدام النموذج الذي تم تحميله لإجراء تصنيفات مستمرة لبيانات بث كاميرا الويب ورسم مربّع إحاطة حول العناصر في الصورة

الخطوات التالية

شارِكنا أعمالك! يمكنك بسهولة توسيع نطاق ما أنشأته في هذا الدرس التطبيقي حول الترميز ليشمل حالات استخدام إبداعية أخرى أيضًا. ننصحك بالتفكير بطريقة مبتكرة ومواصلة البحث عن الثغرات بعد الانتهاء من الاختبار.

اطّلِع على جميع العناصر التي يمكن لهذا النموذج التعرّف عليها وفكِّر في كيفية استخدام هذه المعلومات لتنفيذ إجراء. ما هي الأفكار الإبداعية التي يمكن تنفيذها الآن من خلال توسيع نطاق ما أنشأته اليوم؟

(يمكنك إضافة طبقة بسيطة من جهة الخادم لإرسال إشعار إلى جهاز آخر عندما يرصد عنصرًا معيّنًا من اختيارك باستخدام WebSockets. ستكون هذه طريقة رائعة لإعادة تدوير هاتف ذكي قديم وإعطائه غرضًا جديدًا. الإمكانيات لا حدود لها!)

يمكنك الإشارة إلينا على وسائل التواصل الاجتماعي باستخدام الهاشتاغ #MadeWithTFJS لنمنحك فرصة عرض مشروعك على مدونة TensorFlow أو حتى في فعاليات TensorFlow المستقبلية.

أنشِئ كاميرا ويب ذكية باستخدام JavaScript باستخدام نموذج تعلُّم الآلة المدرب مسبقًا على TensorFlow.js.

1. قبل البدء

المتطلبات الأساسية

ما ستنشئه

ما ستتعلمه

2. ما هي مكتبة TensorFlow.js؟

أين يمكن استخدامها؟

ميزات خارقة من جهة العميل

الخصوصية

السرعة

الوصول إلى الجمهور على نطاق واسع

التكلفة

الميزات من جهة الخادم

التوافق الكامل مع CUDA

حجم النموذج

IOT

السرعة

3- نماذج مدرَّبة مسبقًا

لماذا يجب استخدام نموذج مدرَّب مسبقًا؟

ما هو COCO-SSD؟

ما هو مصدر الاسم؟

4. طريقة الإعداد

المتطلبات

لنتعلّم الترميز

index.html

حلّ بديل: استخدام محرّر الويب المفضّل أو العمل على جهازك

5- ملء بنية HTML

index.html

فهم الرمز

index.html

6. إضافة نمط

الإعدادات التلقائية للعناصر

style.css

style.css

7. إنشاء بنية JavaScript

الإشارة إلى عناصر DOM الرئيسية

script.js

التحقّق من توفّر كاميرا الويب

script.js

استرداد بث كاميرا الويب

script.js

script.js

8. استخدام نموذج تعلُّم الآلة

تحميل النموذج

script.js

9- تهانينا

ملخّص

الخطوات التالية

المزيد من الدروس التطبيقية حول الترميز في TensorFlow.js للتعمّق أكثر

مواقع إلكترونية ننصحك بالاطّلاع عليها