इस ट्यूटोरियल में, आप एक क्रोम एक्सटेंशन बनाएंगे और इंस्टॉल करेंगे जो आपको वेब पेज में एक छवि पर राइट-क्लिक करने और छवि पर मल्टीक्लास ऑब्जेक्ट डिटेक्शन करने की सुविधा देता है। एक्सटेंशन छवि पर MobileNetV2 क्लासिफायर लागू करता है और फिर छवि को अनुमानित वर्ग के साथ लेबल करता है।
उदाहरण कोड GitHub पर उपलब्ध है।
आवश्यक शर्तें
इस ट्यूटोरियल को पूरा करने के लिए, आपको अपने विकास परिवेश में निम्नलिखित को स्थापित करना होगा:
- नोड.जेएस ( डाउनलोड )
- सूत ( स्थापित करें )
- क्रोम ( डाउनलोड )
एक्सटेंशन बनाएं
स्रोत कोड प्राप्त करें और एक्सटेंशन बनाएं:
- tfjs-उदाहरण भंडार को क्लोन करें या डाउनलोड करें।
-
chrome-extensionनिर्देशिका में बदलें:cd tfjs-examples/chrome-extension। - निर्भरताएँ स्थापित करें:
yarn। - बिल्ड स्क्रिप्ट चलाएँ:
yarn build।
बिल्ड स्क्रिप्ट चलाने के बाद, आपको निम्नलिखित नई फ़ाइलें देखनी चाहिए:
-
dist/src/content.js -
dist/src/service_worker.js -
dist/src/service_worker.js.map
एक्सटेंशन इंस्टॉल करें
Chrome में एक्सटेंशन इंस्टॉल करें:
- क्रोम ब्राउज़र में,
chrome://extensionsपर नेविगेट करें। - ब्राउज़र के दाईं ओर टॉगल का उपयोग करके डेवलपर मोड चालू करें।
- लोड अनपैक्ड का चयन करें और
tfjs-examples/chrome-extension/distनिर्देशिका का चयन करें। इस निर्देशिका मेंmanifest.jsonफ़ाइल और बिल्ड द्वारा पैक की गईsrc/*.jsफ़ाइलें शामिल हैं।
आपको Chrome एक्सटेंशन में TF.js मोबाइलनेट के लिए एक नया कार्ड देखना चाहिए।
एक्सटेंशन का उपयोग करें
एक्सटेंशन इंस्टॉल करके, आप ब्राउज़र में छवियों को वर्गीकृत कर सकते हैं:
- छवियों वाली किसी साइट पर नेविगेट करें. उदाहरण के लिए,
google.comपर जाएँ, "बाघ" खोजें, और परिणाम पृष्ठ में छवियाँ चुनें। आपको बाघ के चित्रों का एक पृष्ठ देखना चाहिए। - किसी छवि पर राइट-क्लिक करें और TensorFlow.js के साथ छवि वर्गीकृत करें चुनें। वार्म अप अवधि है, इसलिए जब आप पहली बार ऐप चलाएंगे, तो अनुमान धीमा हो जाएगा। (अपने स्वयं के अनुप्रयोगों में, आप मॉडल को डमी डेटा खिलाकर प्राइम कर सकते हैं।)
एक्सटेंशन छवि पर मॉडल चलाता है और फिर भविष्यवाणी को इंगित करने वाले टेक्स्ट को सुपरइम्पोज़ करता है।
एक्सटेंशन हटाएं
जब आप एक्सटेंशन के साथ प्रयोग पूरा कर लें, तो आप इसे हटा सकते हैं:
- क्रोम में,
chrome://extensionsपर नेविगेट करें। - Chrome एक्सटेंशन कार्ड में TF.js मोबाइलनेट में, निकालें का चयन करें और पुष्टि करें कि आप एक्सटेंशन को हटाना चाहते हैं।
एक्सटेंशन कैसे काम करता है
यह अनुभाग बताता है कि एक्सटेंशन उच्च स्तर पर कैसे काम करता है।
मेनिफेस्ट फ़ाइल, manifest.json , एक सेवा कार्यकर्ता को निर्दिष्ट करती है कि क्रोम पृष्ठभूमि में चलेगा:
"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 में बिल्ड स्क्रिप्ट सब कुछ एक साथ बंडल करने के लिए एक बंडलर, पार्सल का उपयोग करती है ताकि रनटाइम पर कोई बाहरी स्क्रिप्ट लोड न हो।
"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);
जब उपयोगकर्ता मेनू आइटम का चयन करता है, तो कॉलबैक एक संदेश भेजता है जिसमें वर्तमान टैब आईडी और राइट-क्लिक की गई छवि का यूआरएल होता है। (ध्यान दें कि सेवा कार्यकर्ता में, 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 कार्रवाई को संभालती है। स्क्रिप्ट छवि यूआरएल प्राप्त करती है, छवि लोड करती है, छवि को OffscreenCanvas पर प्रस्तुत करती है, कैनवास से छवि डेटा प्राप्त करती है, और डेटा को सेवा कार्यकर्ता को वापस भेजती है।
सेवा कार्यकर्ता को छवि डेटा प्राप्त होने के बाद, वह डेटा के साथ मोबाइलनेट मॉडल चलाता है और भविष्यवाणी परिणाम प्राप्त करता है। उपरोक्त clickMenuCallback फ़ंक्शन में, imageClassifier ImageClassifier वर्ग का एक उदाहरण है, जो मॉडल को लोड करता है और पूर्वानुमान प्राप्त करता है। सेवा कार्यकर्ता स्क्रिप्ट फिर परिणामों को प्रदर्शन के लिए सामग्री स्क्रिप्ट पर वापस भेजती है। सामग्री स्क्रिप्ट को परिणाम प्राप्त होने के बाद, यह मूल छवि के शीर्ष पर परिणामों को ओवरले करता है।
जब लगभग 30 सेकंड तक कोई गतिविधि नहीं होती है तो सर्विस वर्कर थ्रेड निष्क्रिय हो जाता है। सेवा कार्यकर्ता ईवेंट प्रबंधित करने के बारे में अधिक जानकारी के लिए, Chrome दस्तावेज़ देखें।
आगे क्या होगा
इस ट्यूटोरियल में दिखाया गया है कि क्रोम एक्सटेंशन को कैसे तैनात किया जाए जो छवियों को वर्गीकृत करने के लिए TensorFlow.js और एक पूर्व-प्रशिक्षित मोबाइलनेट मॉडल का उपयोग करता है। TensorFlow.js के लिए पूर्व-प्रशिक्षित मॉडल के बारे में अधिक जानने के लिए, पूर्व-प्रशिक्षित मॉडल रिपॉजिटरी देखें।