TensorFlow.js را در یک برنامه افزودنی کروم مستقر کنید

در این آموزش، یک افزونه کروم را ایجاد و نصب می‌کنید که به شما امکان می‌دهد روی یک تصویر در یک صفحه وب کلیک راست کرده و تشخیص شی چند کلاسه را روی تصویر انجام دهید. برنامه افزودنی یک طبقه‌بندی‌کننده MobileNetV2 را روی تصویر اعمال می‌کند و سپس تصویر را با کلاس پیش‌بینی‌شده برچسب‌گذاری می‌کند.

کد نمونه در GitHub موجود است.

پیش نیازها

برای تکمیل این آموزش، باید موارد زیر را در محیط توسعه خود نصب کنید:

پسوند را بسازید

کد منبع را دریافت کنید و پسوند را بسازید:

  1. مخزن tfjs-examples را کلون یا دانلود کنید.
  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

افزونه را نصب کنید

افزونه را در کروم نصب کنید:

  1. در مرورگر Chrome، به chrome://extensions بروید.
  2. با استفاده از کلید سمت راست مرورگر حالت Developer را روشن کنید.
  3. Load unpacked را انتخاب کنید و فهرست راهنمای tfjs-examples/chrome-extension/dist را انتخاب کنید. این دایرکتوری حاوی فایل manifest.json و فایل های src/*.js بسته بندی شده توسط بیلد است.

باید یک کارت جدید برای TF.js mobilenet در افزونه Chrome ببینید.

از پسوند استفاده کنید

با نصب افزونه، می توانید تصاویر را در مرورگر طبقه بندی کنید:

  1. به سایتی با تصاویر روی آن بروید. به عنوان مثال، به google.com بروید، "Tigers" را جستجو کنید و Images را در صفحه نتایج انتخاب کنید. شما باید صفحه ای از تصاویر ببر را ببینید.
  2. روی یک تصویر کلیک راست کرده و Classify image with TensorFlow.js را انتخاب کنید. یک دوره گرم کردن وجود دارد، بنابراین اولین باری که برنامه را اجرا می کنید، استنتاج کندتر خواهد بود. (در برنامه های کاربردی خود، می توانید مدل را با تغذیه داده های ساختگی آن را پرایم کنید.)

برنامه افزودنی مدل را روی تصویر اجرا می کند و سپس متنی را که پیش بینی را نشان می دهد روی هم قرار می دهد.

پسوند را حذف کنید

وقتی آزمایش با افزونه تمام شد، می‌توانید آن را حذف کنید:

  1. در Chrome، به chrome://extensions بروید.
  2. در Mobilenet TF.js در کارت برنامه افزودنی Chrome ، Remove را انتخاب کنید و تأیید کنید که می‌خواهید برنامه افزودنی را حذف کنید.

پسوند چگونه کار می کند

این بخش نحوه عملکرد برنامه افزودنی را در سطح بالا شرح می دهد.

فایل مانیفست ، manifest.json ، یک سرویس‌کار را مشخص می‌کند که Chrome در پس‌زمینه اجرا می‌کند:

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

اسکریپت service worker، 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 را بارگیری کند.

اسکریپت service worker یک آیتم منوی زمینه ایجاد می کند که روی تصاویر عمل می کند. سپس اسکریپت برای کلیک ها گوش می دهد.

/**
 * 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 رندر می‌کند، داده‌های تصویر را از بوم دریافت می‌کند، و داده‌ها را به سرویس‌کار باز می‌فرستد.

پس از اینکه کارگر سرویس داده های تصویر را دریافت کرد، مدل موبایل نت را با داده ها اجرا می کند و نتایج پیش بینی را دریافت می کند. در تابع clickMenuCallback در بالا، imageClassifier نمونه ای از کلاس ImageClassifier است که مدل را بارگذاری می کند و پیش بینی ها را دریافت می کند. سپس اسکریپت Service Worker نتایج را برای نمایش به اسکریپت محتوا ارسال می کند. پس از اینکه اسکریپت محتوا نتایج را دریافت کرد، نتایج را در بالای تصویر اصلی قرار می‌دهد.

وقتی تقریباً 30 ثانیه هیچ فعالیتی رخ نمی دهد، نخ سرویس کارگر بیکار می ماند. برای کسب اطلاعات بیشتر در مورد مدیریت رویدادهای کارگر خدمات، به اسناد Chrome مراجعه کنید.

بعدش چی

این آموزش نحوه استقرار یک افزونه کروم را نشان می‌دهد که از TensorFlow.js و یک مدل از پیش آموزش‌دیده MobileNet برای طبقه‌بندی تصاویر استفاده می‌کند. برای کسب اطلاعات بیشتر در مورد مدل های از پیش آموزش دیده برای TensorFlow.js، به مخزن مدل از پیش آموزش دیده مراجعه کنید.