ปรับใช้ TensorFlow.js ในส่วนขยาย Chrome

ในบทช่วยสอนนี้ คุณจะสร้างและติดตั้งส่วนขยาย Chrome ที่ให้คุณคลิกขวาที่รูปภาพในหน้าเว็บและดำเนินการตรวจจับวัตถุแบบหลายคลาสบนรูปภาพ ส่วนขยายใช้ตัวแยกประเภท MobileNetV2 กับรูปภาพ จากนั้นติดป้ายกำกับรูปภาพด้วยคลาสที่คาดการณ์ไว้

โค้ดตัวอย่างมีอยู่ใน GitHub

ข้อกำหนดเบื้องต้น

เพื่อให้บทช่วยสอนนี้เสร็จสมบูรณ์ คุณต้องติดตั้งสิ่งต่อไปนี้ในสภาพแวดล้อมการพัฒนาของคุณ:

สร้างส่วนขยาย

รับซอร์สโค้ดและสร้างส่วนขยาย:

  1. โคลนหรือดาวน์โหลดพื้นที่เก็บ ข้อมูลตัวอย่าง tfjs
  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

ติดตั้งส่วนขยาย

ติดตั้งส่วนขยายใน 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 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);

เมื่อผู้ใช้เลือกรายการเมนู โทรกลับจะส่งข้อความที่มี ID แท็บปัจจุบันและ 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 ซึ่งจะโหลดโมเดลและรับการคาดการณ์ สคริปต์พนักงานบริการจะส่งผลลัพธ์กลับไปยังสคริปต์เนื้อหาเพื่อแสดง หลังจากที่สคริปต์เนื้อหาได้รับผลลัพธ์แล้ว สคริปต์จะซ้อนทับผลลัพธ์ไว้ที่ด้านบนของรูปภาพต้นฉบับ

เธรดของพนักงานบริการไม่ได้ใช้งานเมื่อไม่มีกิจกรรมเกิดขึ้นเป็นเวลาประมาณ 30 วินาที สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการจัดการเหตุการณ์ของพนักงานบริการ โปรดดู เอกสารประกอบของ Chrome

อะไรต่อไป

บทช่วยสอนนี้แสดงวิธีปรับใช้ส่วนขยาย Chrome ที่ใช้ TensorFlow.js และโมเดล MobileNet ที่ได้รับการฝึกอบรมล่วงหน้าเพื่อจัดประเภทรูปภาพ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับโมเดลที่ได้รับการฝึกล่วงหน้าสำหรับ TensorFlow.js โปรดดู ที่เก็บโมเดลที่ได้รับการฝึกล่วงหน้า