פרוס את TensorFlow.js בתוסף Chrome

במדריך זה, תבנה ותתקין תוסף Chrome המאפשר לך ללחוץ לחיצה ימנית על תמונה בדף אינטרנט ולבצע זיהוי אובייקטים מרובי מחלקות בתמונה. התוסף מחיל סיווג MobileNetV2 על התמונה ולאחר מכן מסמן את התמונה עם המחלקה החזויה.

הקוד לדוגמה זמין ב- GitHub .

דרישות מוקדמות

כדי להשלים מדריך זה, עליך להתקין את הדברים הבאים בסביבת הפיתוח שלך:

בנה את ההרחבה

קבל את קוד המקור ובנה את התוסף:

  1. שכפל או הורד את מאגר tfjs-examples .
  2. עבור לספריית chrome-extension : cd tfjs-examples/chrome-extension .
  3. התקנת תלות: yarn .
  4. הפעל את סקריפט ה-build: yarn build .

לאחר הפעלת סקריפט ה-build, אתה אמור לראות את הקבצים החדשים הבאים:

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

התקן את ההרחבה

התקן את התוסף בכרום:

  1. בדפדפן Chrome, נווט אל chrome://extensions .
  2. הפעל את מצב מפתחים באמצעות המתג בצד ימין של הדפדפן.
  3. בחרו Load unpacked ובחרו בספריית tfjs-examples/chrome-extension/dist . ספרייה זו מכילה את קובץ manifest.json ואת קבצי src/*.js שנארזו על ידי ה-build.

אתה אמור לראות כרטיס חדש עבור 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, service_worker.js , מייבא את חבילת TensorFlow.js ואת מודל ה-mobilenet .

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

סקריפט ה-build ב- package.json משתמש ב-bundler, Parcel , כדי לאגד הכל יחד כך שלא נטענים סקריפטים חיצוניים בזמן ריצה.

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

זאת כדי לעמוד ב-Chrome Manifest V3, האוסר על קוד מתארח מרחוק . שים לב ש-Service Worker עדיין יכול לטעון משאבים חיצוניים, כגון דגמי 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 של התמונה שנלחצה באמצעות לחצן העכבר הימני. (שים לב שב-Service Worker, אובייקטי 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 , מקבל את נתוני התמונה מהקנבס ושולח את הנתונים בחזרה ל-Service Worker.

לאחר שעובד השירות מקבל את נתוני התמונה, הוא מריץ את מודל ה-mobilnet עם הנתונים ומקבל את תוצאות החיזוי. בפונקציה clickMenuCallback למעלה, imageClassifier הוא מופע של המחלקה ImageClassifier , אשר טוענת את המודל ומקבלת תחזיות. הסקריפט של Service Worker שולח תוצאות בחזרה לסקריפט התוכן להצגה. לאחר שסקריפט התוכן מקבל את התוצאות, הוא מכסה את התוצאות על גבי התמונה המקורית.

שרשור ה-Service Worker עובר ללא פעילות כאשר לא מתרחשת פעילות במשך כ-30 שניות. למידע נוסף על ניהול אירועי Service Worker, עיין בתיעוד של Chrome .

מה הלאה

מדריך זה הראה כיצד לפרוס תוסף Chrome המשתמש ב-TensorFlow.js ובמודל MobileNet מאומן מראש כדי לסווג תמונות. למידע נוסף על מודלים שהוכשרו מראש עבור TensorFlow.js, עיין במאגר המודלים שהוכשרו מראש .