انشر TensorFlow.js في ملحق Chrome

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

رمز المثال متاح على GitHub .

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

لإكمال هذا البرنامج التعليمي، تحتاج إلى تثبيت ما يلي في بيئة التطوير الخاصة بك:

قم ببناء الامتداد

احصل على الكود المصدري وقم ببناء الامتداد:

  1. قم باستنساخ أو تنزيل مستودع أمثلة tfjs .
  2. قم بالتغيير إلى دليل chrome-extension : cd tfjs-examples/chrome-extension .
  3. تثبيت التبعيات: yarn .
  4. قم بتشغيل البرنامج النصي للبناء: yarn build .

بعد تشغيل البرنامج النصي للبناء، يجب أن تشاهد الملفات الجديدة التالية:

  • dist/src/content.js
  • dist/src/service_worker.js
  • dist/src/service_worker.js.map

قم بتثبيت الامتداد

قم بتثبيت الامتداد في Chrome:

  1. في متصفح Chrome، انتقل إلى chrome://extensions .
  2. قم بتشغيل وضع المطور باستخدام زر التبديل الموجود على الجانب الأيمن من المتصفح.
  3. حدد تحميل غير مضغوط وحدد دليل tfjs-examples/chrome-extension/dist . يحتوي هذا الدليل على ملف manifest.json وملفات src/*.js المجمعة بواسطة الإصدار.

من المفترض أن تشاهد بطاقة جديدة لـ TF.js mobilenet في ملحق Chrome .

استخدم الامتداد

مع تثبيت الامتداد، يمكنك تصنيف الصور في المتصفح:

  1. انتقل إلى موقع به صور. على سبيل المثال، انتقل إلى google.com ، وابحث عن "النمور"، ثم حدد الصور في صفحة النتائج. يجب أن تشاهد صفحة صور النمر.
  2. انقر بزر الماوس الأيمن على الصورة وحدد تصنيف الصورة باستخدام TensorFlow.js . هناك فترة إحماء، لذا في المرة الأولى التي تقوم فيها بتشغيل التطبيق، سيكون الاستدلال أبطأ. (في تطبيقاتك الخاصة، يمكنك تجهيز النموذج عن طريق تغذيته ببيانات وهمية.)

يقوم الامتداد بتشغيل النموذج على الصورة ثم يقوم بتركيب نص يشير إلى التنبؤ.

قم بإزالة الامتداد

عند الانتهاء من تجربة الإضافة، يمكنك إزالتها:

  1. في Chrome، انتقل إلى chrome://extensions .
  2. في TF.js mobilenet في بطاقة امتداد Chrome ، حدد إزالة وأكد رغبتك في إزالة الامتداد.

كيف يعمل التمديد

يصف هذا القسم كيفية عمل الامتداد على مستوى عالٍ.

يحدد ملف البيان ، manifest.json ، عامل الخدمة الذي سيشغله Chrome في الخلفية:

"background": {
   "service_worker": "src/service_worker.js"
},

يقوم البرنامج النصي لعامل الخدمة، service_worker.js ، باستيراد حزمة TensorFlow.js ونموذج mobilenet .

import * as mobilenet from '@tensorflow-models/mobilenet';
import * as tf from '@tensorflow/tfjs';

يستخدم البرنامج النصي للإنشاء في package.json مُحزمًا، Parcel ، لتجميع كل شيء معًا حتى لا يتم تحميل أي برامج نصية خارجية في وقت التشغيل.

"build": "parcel build src/service_worker.js --dist-dir dist/src/ && npm run copy",

ويهدف هذا إلى الامتثال لـ Chrome Manifest V3، الذي يحظر التعليمات البرمجية المستضافة عن بُعد . لاحظ أنه لا يزال بإمكان عامل الخدمة تحميل الموارد الخارجية، مثل نماذج TensorFlow.js.

يقوم البرنامج النصي لعامل الخدمة بإنشاء عنصر قائمة السياق الذي يعمل على الصور. ثم يستمع البرنامج النصي للنقرات.

/**
 * Adds a right-click menu option to trigger classifying the image.
 * The menu option should only appear when right-clicking an image.
 */
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'contextMenu0',
    title: 'Classify image with TensorFlow.js ',
    contexts: ['image'],
  });
});

chrome.contextMenus.onClicked.addListener(clickMenuCallback);

عندما يحدد المستخدم عنصر القائمة، يرسل رد الاتصال رسالة تحتوي على معرف علامة التبويب الحالية وعنوان URL للصورة التي تم النقر عليها بزر الماوس الأيمن. (لاحظ أنه في عامل الخدمة، لا تتوفر كائنات DOM.)

function clickMenuCallback(info, tab) {
  const message = { action: 'IMAGE_CLICKED', url: info.srcUrl };
  chrome.tabs.sendMessage(tab.id, message, (resp) => {
    if (!resp.rawImageData) {
      console.error(
        'Failed to get image data. ' +
        'The image might be too small or failed to load. ' +
        'See console logs for errors.');
      return;
    }
    const imageData = new ImageData(
      Uint8ClampedArray.from(resp.rawImageData), resp.width, resp.height);
    imageClassifier.analyzeImage(imageData, info.srcUrl, tab.id);
  });
}

يستمع البرنامج النصي للمحتوى، content.js ، إلى الرسائل ويتعامل مع الإجراء IMAGE_CLICKED . يتلقى البرنامج النصي عنوان URL للصورة، ويقوم بتحميل الصورة، ويعرض الصورة على OffscreenCanvas ، ويحصل على بيانات الصورة من اللوحة القماشية، ويرسل البيانات مرة أخرى إلى عامل الخدمة.

بعد أن يتلقى عامل الخدمة بيانات الصورة، يقوم بتشغيل نموذج mobilenet مع البيانات ويحصل على نتائج التنبؤ. في وظيفة clickMenuCallback أعلاه، يعد imageClassifier مثيلًا لفئة ImageClassifier ، التي تقوم بتحميل النموذج والحصول على التنبؤات. يقوم البرنامج النصي لعامل الخدمة بعد ذلك بإرسال النتائج مرة أخرى إلى البرنامج النصي للمحتوى لعرضها. بعد أن يتلقى البرنامج النصي للمحتوى النتائج، فإنه يقوم بتراكب النتائج أعلى الصورة الأصلية.

يصبح مؤشر ترابط عامل الخدمة خاملاً عند حدوث أي نشاط لمدة 30 ثانية تقريبًا. لمزيد من المعلومات حول إدارة أحداث عمال الخدمة، راجع وثائق Chrome .

ماذا بعد

يوضح هذا البرنامج التعليمي كيفية نشر ملحق Chrome الذي يستخدم TensorFlow.js ونموذج MobileNet المُدرب مسبقًا لتصنيف الصور. لمعرفة المزيد حول النماذج المدربة مسبقًا لـ TensorFlow.js، راجع مستودع النماذج المدربة مسبقًا .