একটি Chrome এক্সটেনশনে 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. ব্রাউজারের ডানদিকে টগল ব্যবহার করে বিকাশকারী মোড চালু করুন।
  3. লোড আনপ্যাক নির্বাচন করুন এবং tfjs-examples/chrome-extension/dist ডিরেক্টরি নির্বাচন করুন। এই ডিরেক্টরিতে manifest.json ফাইল এবং বিল্ড দ্বারা প্যাকেজ করা src/*.js ফাইল রয়েছে।

আপনি একটি Chrome এক্সটেনশনে TF.js মোবাইলনেটের জন্য একটি নতুন কার্ড দেখতে পাবেন।

এক্সটেনশন ব্যবহার করুন

এক্সটেনশন ইনস্টল করার সাথে, আপনি ব্রাউজারে চিত্রগুলিকে শ্রেণিবদ্ধ করতে পারেন:

  1. এটিতে ছবি সহ একটি সাইটে নেভিগেট করুন৷ উদাহরণস্বরূপ, google.com এ নেভিগেট করুন, "বাঘ" অনুসন্ধান করুন এবং ফলাফল পৃষ্ঠায় চিত্র নির্বাচন করুন৷ আপনি বাঘের ছবি একটি পৃষ্ঠা দেখতে হবে.
  2. একটি ছবিতে রাইট-ক্লিক করুন এবং TensorFlow.js এর সাথে শ্রেণীবদ্ধ চিত্র নির্বাচন করুন। একটি ওয়ার্ম আপ পিরিয়ড আছে, তাই আপনি যখন প্রথমবার অ্যাপটি চালাবেন, অনুমান ধীর হবে। (আপনার নিজস্ব অ্যাপ্লিকেশনে, আপনি মডেলটিকে ডামি ডেটা খাওয়ানোর মাধ্যমে প্রাইম করতে পারেন।)

এক্সটেনশনটি চিত্রটিতে মডেলটি চালায় এবং তারপরে ভবিষ্যদ্বাণী নির্দেশ করে পাঠ্যকে সুপারইম্পোজ করে।

এক্সটেনশন সরান

যখন আপনি এক্সটেনশনের সাথে পরীক্ষা করা শেষ করেন, তখন আপনি এটিকে সরাতে পারেন:

  1. Chrome-এ, chrome://extensions এ নেভিগেট করুন।
  2. একটি Chrome এক্সটেনশন কার্ডে TF.js মোবাইলনেটে , সরান নির্বাচন করুন এবং নিশ্চিত করুন যে আপনি এক্সটেনশনটি সরাতে চান৷

কিভাবে এক্সটেনশন কাজ করে

এই বিভাগটি বর্ণনা করে যে কীভাবে এক্সটেনশন কাজ করে, উচ্চ স্তরে।

ম্যানিফেস্ট ফাইল, manifest.json , একটি পরিষেবা কর্মীকে নির্দিষ্ট করে যে Chrome ব্যাকগ্রাউন্ডে চলবে:

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

সার্ভিস ওয়ার্কার স্ক্রিপ্ট, service_worker.js , TensorFlow.js প্যাকেজ এবং মোবাইলনেট মডেল আমদানি করে।

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 ম্যানিফেস্ট 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 চিত্রটি রেন্ডার করে, ক্যানভাস থেকে চিত্রের ডেটা পায় এবং পরিষেবা কর্মীর কাছে ডেটা ফেরত পাঠায়৷

পরিষেবা কর্মী ইমেজ ডেটা পাওয়ার পরে, এটি ডেটা সহ মোবাইলনেট মডেল চালায় এবং পূর্বাভাস ফলাফল পায়। উপরের clickMenuCallback ফাংশনে, imageClassifier হল ImageClassifier ক্লাসের একটি উদাহরণ, যা মডেল লোড করে এবং ভবিষ্যদ্বাণী পায়। পরিষেবা কর্মী স্ক্রিপ্ট তারপর প্রদর্শনের জন্য বিষয়বস্তু স্ক্রিপ্টে ফলাফল ফেরত পাঠায়। বিষয়বস্তু স্ক্রিপ্ট ফলাফল পাওয়ার পরে, এটি মূল চিত্রের উপরে ফলাফলগুলিকে ওভারলে করে।

আনুমানিক 30 সেকেন্ডের জন্য কোনো কার্যকলাপ না ঘটলে পরিষেবা কর্মী থ্রেড নিষ্ক্রিয় হয়ে যায়। পরিষেবা কর্মী ইভেন্টগুলি পরিচালনার বিষয়ে আরও তথ্যের জন্য, Chrome ডকুমেন্টেশন দেখুন৷

এরপর কি

এই টিউটোরিয়ালটি দেখানো হয়েছে কিভাবে একটি Chrome এক্সটেনশন স্থাপন করা যায় যা TensorFlow.js ব্যবহার করে এবং একটি প্রাক-প্রশিক্ষিত MobileNet মডেল ব্যবহার করে ছবি শ্রেণীবদ্ধ করতে। TensorFlow.js এর জন্য প্রাক-প্রশিক্ষিত মডেল সম্পর্কে আরও জানতে, প্রাক-প্রশিক্ষিত মডেল সংগ্রহস্থল দেখুন।