TensorFlow.js के पहले से ट्रेन किए गए मशीन लर्निंग मॉडल की मदद से, JavaScript में एक स्मार्ट वेबकैम बनाएं

1. शुरू करने से पहले

इन दिनों मशीन लर्निंग काफ़ी चर्चा में है. इसके ऐप्लिकेशन की कोई सीमा नहीं है. ऐसा लगता है कि आने वाले समय में यह लगभग हर इंडस्ट्री में इस्तेमाल किया जाएगा. अगर आप इंजीनियर या डिज़ाइनर हैं, चाहे फ़्रंट एंड या बैक एंड, और आपको JavaScript के बारे में जानकारी है, तो यह कोडलैब आपके लिए है. इससे आपको अपनी स्किलसेट में मशीन लर्निंग को शामिल करने में मदद मिलेगी.

ज़रूरी शर्तें

यह कोडलैब, अनुभवी इंजीनियरों के लिए लिखा गया है. ये इंजीनियर, JavaScript के बारे में पहले से जानते हैं.

आपको क्या बनाने को मिलेगा

इस कोडलैब में, आपको

एक ऐसा वेबपेज बनाएं जो लाइव वेबकैम स्ट्रीम से सामान्य ऑब्जेक्ट का पता लगाने और उन्हें कैटगरी में बांटने के लिए, सीधे वेब ब्राउज़र में TensorFlow.js के ज़रिए मशीन लर्निंग का इस्तेमाल करता हो. हां, एक साथ एक से ज़्यादा ऑब्जेक्ट का पता लगाया जा सकता है.
अपने वेबकैम को बेहतर बनाएं, ताकि वह ऑब्जेक्ट की पहचान कर सके. साथ ही, उसे हर ऑब्जेक्ट के लिए बाउंडिंग बॉक्स के कोऑर्डिनेट मिल सकें
वीडियो स्ट्रीम में मिले ऑब्जेक्ट को हाइलाइट करें. जैसा कि यहां दिखाया गया है:

मान लें कि आपके पास यह पता लगाने की सुविधा है कि कोई व्यक्ति वीडियो में है या नहीं. इससे यह पता लगाया जा सकता है कि किसी भी समय कितने लोग मौजूद थे. साथ ही, यह अनुमान लगाया जा सकता है कि दिन भर में किसी जगह पर कितने लोग मौजूद थे. इसके अलावा, अगर आपका कुत्ता घर के किसी ऐसे कमरे में दिखता है जहां उसे नहीं होना चाहिए, तो आपको सूचना मिल सकती है. ऐसा करने पर, आपके पास Google Nest Cam का अपना वर्शन बनाने का विकल्प होगा. यह वर्शन, आपके कस्टम हार्डवेयर का इस्तेमाल करके, किसी भी तरह के घुसपैठिए को देखने पर आपको सूचना दे सकता है! यह काफ़ी अच्छा है. क्या ऐसा करना मुश्किल है? नहीं. चलिए, हैकिंग शुरू करते हैं...

आपको क्या सीखने को मिलेगा

पहले से ट्रेन किए गए TensorFlow.js मॉडल को लोड करने का तरीका.
लाइव वेबकैम स्ट्रीम से डेटा पाने और उसे कैनवस पर दिखाने का तरीका.
किसी इमेज फ़्रेम को क्लासिफ़ाई करने का तरीका, ताकि मॉडल को जिस ऑब्जेक्ट की पहचान करने की ट्रेनिंग दी गई है उसके बाउंडिंग बॉक्स ढूंढे जा सकें.
मॉडल से वापस भेजे गए डेटा का इस्तेमाल करके, पहचाने गए ऑब्जेक्ट को हाइलाइट करने का तरीका.

इस कोडलैब में, TensorFlow.js के पहले से ट्रेन किए गए मॉडल का इस्तेमाल शुरू करने के तरीके के बारे में बताया गया है. TensorFlow.js और मशीन लर्निंग से जुड़े नहीं होने वाले कॉन्सेप्ट और कोड ब्लॉक के बारे में नहीं बताया गया है. इन्हें सिर्फ़ कॉपी और पेस्ट करने के लिए उपलब्ध कराया गया है.

2. TensorFlow.js क्या है?

TensorFlow.js एक ओपन सोर्स मशीन लर्निंग लाइब्रेरी है. यह JavaScript की मदद से कहीं भी रन की जा सकती है. यह Python में लिखी गई ओरिजनल TensorFlow लाइब्रेरी पर आधारित है. इसका मकसद, डेवलपर के अनुभव को फिर से तैयार करना और JavaScript के इकोसिस्टम के लिए एपीआई का सेट तैयार करना है.

इसका इस्तेमाल कहां किया जा सकता है?

JavaScript को आसानी से एक प्लैटफ़ॉर्म से दूसरे प्लैटफ़ॉर्म पर ले जाया जा सकता है. इसलिए, अब एक ही भाषा में कोड लिखा जा सकता है. साथ ही, मशीन लर्निंग को इन सभी प्लैटफ़ॉर्म पर आसानी से लागू किया जा सकता है:

वैनिला JavaScript का इस्तेमाल करके, वेब ब्राउज़र में क्लाइंट साइड
Node.js का इस्तेमाल करके, सर्वर साइड और Raspberry Pi जैसे IoT डिवाइसों पर
Electron का इस्तेमाल करने वाले डेस्कटॉप ऐप्लिकेशन
React Native का इस्तेमाल करके बनाए गए नेटिव मोबाइल ऐप्लिकेशन

TensorFlow.js, इन सभी एनवायरमेंट में एक से ज़्यादा बैकएंड के साथ काम करता है. जैसे, सीपीयू या WebGL. इस संदर्भ में "बैकएंड" का मतलब सर्वर साइड एनवायरमेंट नहीं है. उदाहरण के लिए, WebGL में एक्ज़ीक्यूशन के लिए बैकएंड, क्लाइंट साइड हो सकता है. ऐसा इसलिए, ताकि यह पक्का किया जा सके कि यह सुविधा काम करती है और तेज़ी से काम करती रहे. फ़िलहाल, TensorFlow.js इन पर काम करता है:

डिवाइस के ग्राफ़िक्स कार्ड (जीपीयू) पर WebGL एक्ज़ीक्यूशन - यह जीपीयू ऐक्सेलरेटर की मदद से, बड़े मॉडल (साइज़ में 3 एमबी से ज़्यादा) को एक्ज़ीक्यूट करने का सबसे तेज़ तरीका है.
सीपीयू पर Web Assembly (WASM) को लागू करना - इससे सीपीयू की परफ़ॉर्मेंस को बेहतर बनाया जा सकता है. जैसे, पुरानी जनरेशन के मोबाइल फ़ोन पर. यह छोटे मॉडल (साइज़ में 3 एमबी से कम) के लिए ज़्यादा सही है. ऐसा इसलिए, क्योंकि ग्राफ़िक्स प्रोसेसर पर कॉन्टेंट अपलोड करने में लगने वाले समय की वजह से, WASM के साथ सीपीयू पर WebGL की तुलना में ज़्यादा तेज़ी से काम किया जा सकता है.
सीपीयू एक्ज़ीक्यूशन - अगर कोई दूसरा एनवायरमेंट उपलब्ध नहीं है, तो फ़ॉलबैक होना चाहिए. यह तीनों में सबसे धीमी है, लेकिन यह हमेशा आपके लिए उपलब्ध रहती है.

ध्यान दें: अगर आपको पता है कि आपको किस डिवाइस पर कोड चलाना है, तो इनमें से किसी एक बैकएंड को फ़ोर्स किया जा सकता है. इसके अलावा, अगर आपने यह जानकारी नहीं दी है, तो TensorFlow.js को आपके लिए फ़ैसला लेने दें.

क्लाइंट साइड की बेहतरीन सुविधाएं

क्लाइंट मशीन पर वेब ब्राउज़र में TensorFlow.js चलाने से कई फ़ायदे मिल सकते हैं.

निजता

डेटा को तीसरे पक्ष के वेब सर्वर पर भेजे बिना, क्लाइंट मशीन पर डेटा को ट्रेन और क्लासिफ़ाई किया जा सकता है. ऐसा हो सकता है कि स्थानीय कानूनों का पालन करने के लिए, इस सुविधा का इस्तेमाल करना ज़रूरी हो. उदाहरण के लिए, जीडीपीआर. इसके अलावा, ऐसा तब भी हो सकता है, जब उपयोगकर्ता को किसी ऐसे डेटा को प्रोसेस करना हो जिसे वह अपने डिवाइस पर रखना चाहता है और तीसरे पक्ष को नहीं भेजना चाहता.

स्पीड

आपको किसी रिमोट सर्वर को डेटा नहीं भेजना होता है. इसलिए, अनुमान लगाने (डेटा को कैटगरी में बांटने की प्रोसेस) की प्रोसेस तेज़ी से हो सकती है. इससे भी अच्छी बात यह है कि अगर उपयोगकर्ता आपको ऐक्सेस देता है, तो आपके पास डिवाइस के सेंसर का सीधा ऐक्सेस होता है. जैसे, कैमरा, माइक्रोफ़ोन, जीपीएस, एक्सलरोमीटर वगैरह.

पहुंच और बड़े पैमाने पर इंटिग्रेशन

आपके भेजे गए लिंक पर दुनिया भर में कोई भी व्यक्ति एक क्लिक में पहुंच सकता है. साथ ही, वह अपने ब्राउज़र में वेब पेज खोलकर, आपके बनाए गए कॉन्टेंट का इस्तेमाल कर सकता है. मशीन लर्निंग सिस्टम का इस्तेमाल करने के लिए, CUDA ड्राइवर और अन्य सुविधाओं के साथ सर्वर साइड Linux को सेटअप करने की ज़रूरत नहीं है.

लागत

सर्वर न होने का मतलब है कि आपको सिर्फ़ सीडीएन के लिए पेमेंट करना होगा. इससे एचटीएमएल, सीएसएस, JS, और मॉडल फ़ाइलों को होस्ट किया जा सकेगा. किसी सर्वर को 24 घंटे चालू रखने (इसमें ग्राफ़िक्स कार्ड भी शामिल हो सकता है) की लागत के मुकाबले, सीडीएन की लागत काफ़ी कम होती है.

सर्वर साइड की सुविधाएं

TensorFlow.js के Node.js वर्शन का इस्तेमाल करने से, ये सुविधाएं मिलती हैं.

CUDA की पूरी सुविधा

सर्वर साइड पर, ग्राफ़िक्स कार्ड की मदद से तेज़ी से काम करने के लिए, आपको NVIDIA CUDA ड्राइवर इंस्टॉल करने होंगे. इससे TensorFlow, ग्राफ़िक्स कार्ड के साथ काम कर पाएगा. ब्राउज़र में ऐसा नहीं होता, क्योंकि यह WebGL का इस्तेमाल करता है. इसलिए, इसे इंस्टॉल करने की ज़रूरत नहीं होती. हालांकि, CUDA के साथ काम करने वाले ग्राफ़िक्स कार्ड की मदद से, ट्रेनिंग और अनुमान लगाने की प्रोसेस को कम समय में पूरा किया जा सकता है. परफ़ॉर्मेंस, Python TensorFlow के साथ काम करने वाले वर्शन के बराबर है, क्योंकि दोनों एक ही C++ बैकएंड का इस्तेमाल करते हैं.

मॉडल का साइज़

रिसर्च के लिए, आपको बहुत बड़े मॉडल के साथ काम करना पड़ सकता है. इनका साइज़ गीगाबाइट में हो सकता है. फ़िलहाल, इन मॉडल को वेब ब्राउज़र में नहीं चलाया जा सकता. इसकी वजह यह है कि हर ब्राउज़र टैब में मेमोरी के इस्तेमाल की सीमाएं होती हैं. इन बड़े मॉडल को चलाने के लिए, अपने सर्वर पर Node.js का इस्तेमाल किया जा सकता है. इसके लिए, आपको ऐसे हार्डवेयर स्पेसिफ़िकेशन की ज़रूरत होगी जो इस तरह के मॉडल को बेहतर तरीके से चला सके.

आईओटी

Node.js, Raspberry Pi जैसे लोकप्रिय सिंगल बोर्ड कंप्यूटर पर काम करता है. इसका मतलब है कि इन डिवाइसों पर TensorFlow.js मॉडल भी इस्तेमाल किए जा सकते हैं.

स्पीड

Node.js को JavaScript में लिखा गया है. इसका मतलब है कि इसे जस्ट इन टाइम कंपाइलेशन का फ़ायदा मिलता है. इसका मतलब है कि Node.js का इस्तेमाल करने पर, आपको अक्सर परफ़ॉर्मेंस में सुधार दिखेगा. ऐसा इसलिए, क्योंकि इसे रनटाइम पर ऑप्टिमाइज़ किया जाएगा. खास तौर पर, किसी भी तरह की प्रीप्रोसेसिंग के लिए. इसका एक बेहतरीन उदाहरण इस केस स्टडी में देखा जा सकता है. इसमें दिखाया गया है कि Hugging Face ने Node.js का इस्तेमाल करके, अपने नैचुरल लैंग्वेज प्रोसेसिंग मॉडल की परफ़ॉर्मेंस को दो गुना कैसे किया.

अब आपको TensorFlow.js के बारे में बुनियादी जानकारी मिल गई है. साथ ही, यह भी पता चल गया है कि इसे कहां इस्तेमाल किया जा सकता है और इसके क्या फ़ायदे हैं. तो चलिए, अब इसका इस्तेमाल शुरू करते हैं!

3. पहले से ट्रेन किए गए मॉडल

TensorFlow.js, पहले से ट्रेन किए गए कई मशीन लर्निंग (एमएल) मॉडल उपलब्ध कराता है. इन मॉडल को TensorFlow.js टीम ने ट्रेन किया है. साथ ही, इन्हें इस्तेमाल में आसान क्लास में रैप किया गया है. ये मशीन लर्निंग के साथ शुरुआत करने का एक शानदार तरीका है. अपनी समस्या को हल करने के लिए, मॉडल बनाने और उसे ट्रेन करने के बजाय, पहले से ट्रेन किए गए मॉडल को शुरुआती बिंदु के तौर पर इंपोर्ट किया जा सकता है.

Tensorflow.js के Models for JavaScript पेज पर, पहले से ट्रेन किए गए ऐसे मॉडल की सूची देखी जा सकती है जिनका इस्तेमाल करना आसान है. इस सूची में लगातार नए मॉडल जोड़े जा रहे हैं. TensorFlow.js में काम करने वाले, बदले गए TensorFlow मॉडल पाने के लिए, अन्य जगहें भी हैं. इनमें TensorFlow Hub भी शामिल है.

मुझे पहले से ट्रेन किए गए मॉडल का इस्तेमाल क्यों करना चाहिए?

अगर पहले से ट्रेन किए गए किसी लोकप्रिय मॉडल का इस्तेमाल किया जाता है, तो इसके कई फ़ायदे होते हैं. जैसे:

आपको ट्रेनिंग डेटा इकट्ठा करने की ज़रूरत नहीं होती. डेटा को सही फ़ॉर्मैट में तैयार करना और उसे लेबल करना, काफ़ी समय और लागत वाला काम हो सकता है. ऐसा इसलिए, ताकि मशीन लर्निंग सिस्टम उसका इस्तेमाल करके सीख सके.
कम लागत और समय में, किसी आइडिया का प्रोटोटाइप तेज़ी से बनाया जा सकता है.
जब पहले से ट्रेन किया गया कोई मॉडल, आपकी ज़रूरत के हिसाब से काम कर सकता है, तो "पहिए को फिर से बनाने" का कोई मतलब नहीं है. इससे आपको मॉडल से मिली जानकारी का इस्तेमाल करके, अपने क्रिएटिव आइडिया लागू करने पर ध्यान देने का मौका मिलता है.
रिसर्च के लिए सबसे नई टेक्नोलॉजी का इस्तेमाल. प्री-ट्रेन किए गए मॉडल, अक्सर लोकप्रिय रिसर्च पर आधारित होते हैं. इससे आपको ऐसे मॉडल के बारे में जानने का मौका मिलता है. साथ ही, आपको यह भी पता चलता है कि ये मॉडल असल दुनिया में कैसा परफ़ॉर्म करते हैं.
इस्तेमाल में आसान और ज़्यादा जानकारी वाले दस्तावेज़. इस तरह के मॉडल के लोकप्रिय होने की वजह से.
ट्रांसफ़र लर्निंग की सुविधाएं. कुछ प्री-ट्रेन किए गए मॉडल, ट्रांसफ़र लर्निंग की सुविधाएं देते हैं. इसका मतलब है कि एक मशीन लर्निंग टास्क से सीखी गई जानकारी को, उसी तरह के दूसरे उदाहरण में ट्रांसफ़र करना. उदाहरण के लिए, अगर आपने किसी ऐसे मॉडल को नया ट्रेनिंग डेटा दिया है जिसे बिल्लियों की पहचान करने के लिए ट्रेन किया गया था, तो उसे कुत्तों की पहचान करने के लिए फिर से ट्रेन किया जा सकता है. इससे आपको जल्दी मदद मिलेगी, क्योंकि आपको खाली कैनवस से शुरुआत नहीं करनी होगी. मॉडल, बिल्लियों की पहचान करने के लिए पहले से सीखी गई जानकारी का इस्तेमाल कर सकता है. इससे उसे नई चीज़ों की पहचान करने में मदद मिलती है. जैसे, कुत्तों की भी आंखें और कान होते हैं. इसलिए, अगर मॉडल को पहले से ही इन सुविधाओं को ढूंढने का तरीका पता है, तो हम आधी समस्या हल कर चुके हैं. अपने डेटा के हिसाब से मॉडल को बहुत कम समय में फिर से ट्रेन करें.

COCO-SSD क्या है?

COCO-SSD, पहले से ट्रेन किया गया एक ऑब्जेक्ट डिटेक्शन एमएल मॉडल है. इस कोडलैब के दौरान इसका इस्तेमाल किया जाएगा. इसका मकसद, किसी एक इमेज में मौजूद कई ऑब्जेक्ट की पहचान करना और उन्हें ढूंढना है. दूसरे शब्दों में, यह उन ऑब्जेक्ट के बाउंडिंग बॉक्स के बारे में बता सकता है जिन्हें ढूंढने के लिए इसे ट्रेन किया गया है. इससे आपको किसी भी इमेज में उस ऑब्जेक्ट की जगह की जानकारी मिलती है. नीचे दी गई इमेज में एक उदाहरण दिखाया गया है:

अगर ऊपर दी गई इमेज में एक से ज़्यादा कुत्ते होते, तो आपको दो बाउंडिंग बॉक्स के कोऑर्डिनेट दिए जाते. इनमें हर कुत्ते की जगह के बारे में बताया जाता. COCO-SSD को रोज़मर्रा की 90 सामान्य चीज़ों की पहचान करने के लिए पहले से ही ट्रेन किया गया है. जैसे, कोई व्यक्ति, कार, बिल्ली वगैरह.

यह नाम कहां से आया?

यह नाम सुनने में अजीब लग सकता है, लेकिन यह दो शब्दों के पहले अक्षर से बना है:

COCO: इसका मतलब है कि इसे COCO (कॉमन ऑब्जेक्ट इन कॉन्टेक्स्ट) डेटासेट पर ट्रेन किया गया है. यह डेटासेट, सभी के लिए मुफ़्त में उपलब्ध है. कोई भी इसे डाउनलोड करके, अपने मॉडल को ट्रेन करने के लिए इस्तेमाल कर सकता है. इस डेटासेट में लेबल की गई 2,00,000 से ज़्यादा इमेज हैं. इनका इस्तेमाल, मॉडल को ट्रेनिंग देने के लिए किया जा सकता है.
एसएसडी (सिंगल शॉट मल्टीबॉक्स डिटेक्शन): यह मॉडल आर्किटेक्चर का वह हिस्सा है जिसका इस्तेमाल मॉडल को लागू करने के लिए किया गया था. कोडलैब के लिए, आपको इसे समझने की ज़रूरत नहीं है. हालांकि, अगर आपको इसके बारे में ज़्यादा जानना है, तो एसएसडी के बारे में यहां ज़्यादा जानें.

4. सेट अप करें

आपको इन चीज़ों की ज़रूरत होगी

मॉडर्न वेब ब्राउज़र.
एचटीएमएल, सीएसएस, JavaScript, और Chrome DevTools की बुनियादी जानकारी (कंसोल आउटपुट देखना).

चलिए कोडिंग शुरू करते हैं

Glitch.com या Codepen.io के लिए, बॉयलरप्लेट टेंप्लेट बनाए गए हैं. इस कोड लैब के लिए, सिर्फ़ एक क्लिक में किसी भी टेंप्लेट को अपनी बुनियादी स्थिति के तौर पर क्लोन किया जा सकता है.

Glitch पर, remix this बटन पर क्लिक करके इसे फ़ोर्क करें. इसके बाद, फ़ाइलों का एक नया सेट बनाएं, जिसमें बदलाव किया जा सकता है.

इसके अलावा, Codepen पर स्क्रीन के सबसे नीचे दाएं कोने में मौजूद, fork पर क्लिक करें.

इस बहुत ही आसान स्ट्रक्चर में, आपको ये फ़ाइलें मिलती हैं:

एचटीएमएल पेज (index.html)
स्टाइलशीट (style.css)
JavaScript कोड लिखने के लिए फ़ाइल (script.js)

आपकी सुविधा के लिए, TensorFlow.js लाइब्रेरी के लिए एचटीएमएल फ़ाइल में एक इंपोर्ट जोड़ा गया है. यह इस तरह दिखता है:

index.html

<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>

अन्य विकल्प: अपनी पसंद के वेब एडिटर का इस्तेमाल करें या स्थानीय तौर पर काम करें

अगर आपको कोड डाउनलोड करके, स्थानीय तौर पर या किसी दूसरे ऑनलाइन एडिटर पर काम करना है, तो ऊपर बताई गई तीन फ़ाइलें एक ही डायरेक्ट्री में बनाएं. इसके बाद, हमारे Glitch बॉयलरप्लेट से कोड कॉपी करके, हर फ़ाइल में चिपकाएं.

5. एचटीएमएल स्ट्रक्चर में डेटा जोड़ना

सभी प्रोटोटाइप के लिए, कुछ बुनियादी एचटीएमएल स्केफ़ोल्डिंग की ज़रूरत होती है. इसका इस्तेमाल, बाद में मशीन लर्निंग मॉडल का आउटपुट रेंडर करने के लिए किया जाएगा. आइए, अब इसे सेट अप करते हैं:

पेज का टाइटल
जानकारी देने वाला कुछ टेक्स्ट
वेबकैम चालू करने के लिए बटन
वेबकैम स्ट्रीम को रेंडर करने के लिए वीडियो टैग

इन सुविधाओं को सेट अप करने के लिए, index.html खोलें और मौजूदा कोड को यहां दिए गए कोड से बदलें:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Multiple object detection using pre trained model in TensorFlow.js</title>
    <meta charset="utf-8">
    <!-- Import the webpage's stylesheet -->
    <link rel="stylesheet" href="style.css">
  </head>  
  <body>
    <h1>Multiple object detection using pre trained model in TensorFlow.js</h1>

    <p>Wait for the model to load before clicking the button to enable the webcam - at which point it will become visible to use.</p>
    
    <section id="demos" class="invisible">

      <p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
      
      <div id="liveView" class="camView">
        <button id="webcamButton">Enable Webcam</button>
        <video id="webcam" autoplay muted width="640" height="480"></video>
      </div>
    </section>

    <!-- Import TensorFlow.js library -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
    <!-- Load the coco-ssd model to use to recognize things in images -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
    
    <!-- Import the page's JavaScript to do some stuff -->
    <script src="script.js" defer></script>
  </body>
</html>

कोड को समझना

आपने जो मुख्य चीज़ें जोड़ी हैं उन पर ध्यान दें:

आपने हेडर के लिए <h1> टैग और कुछ <p> टैग जोड़े हैं. साथ ही, पेज को इस्तेमाल करने के तरीके के बारे में कुछ जानकारी दी है. यहां कुछ भी खास नहीं है.

आपने डेमो स्पेस को दिखाने वाला एक सेक्शन टैग भी जोड़ा है:

index.html

    <section id="demos" class="invisible">

      <p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
      
      <div id="liveView" class="webcam">
        <button id="webcamButton">Enable Webcam</button>
        <video id="webcam" autoplay width="640" height="480"></video>
      </div>
    </section>

शुरुआत में, इस section को "invisible" क्लास दी जाएगी. इससे आपको उपयोगकर्ता को यह दिखाने में मदद मिलती है कि मॉडल कब तैयार है. साथ ही, वेबकैम चालू करें बटन पर क्लिक करना सुरक्षित है.
आपने वेबकैम चालू करें बटन जोड़ा है. इसे सीएसएस में स्टाइल किया जाएगा.
आपने एक वीडियो टैग भी जोड़ा है, जिसमें आपको अपने वेबकैम का इनपुट स्ट्रीम करना है. इसे जल्द ही अपने JavaScript कोड में सेट अप करें.

अगर अभी आउटपुट की झलक देखी जाती है, तो यह कुछ इस तरह दिखनी चाहिए:

6. शैली जोड़ें

तत्वों की डिफ़ॉल्ट सेटिंग

सबसे पहले, हम अभी जोड़े गए एचटीएमएल एलिमेंट के लिए स्टाइल जोड़ते हैं, ताकि यह पक्का किया जा सके कि वे सही तरीके से रेंडर हों:

style.css

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
  color: #3D3D3D;
}

h1 {
  font-style: italic;
  color: #FF6F00;
}

video {
  display: block;
}

section {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}

इसके बाद, कुछ काम के सीएसएस क्लास जोड़ें. इससे हमें अपने यूज़र इंटरफ़ेस की अलग-अलग स्थितियों में मदद मिलेगी. जैसे, जब हमें बटन को छिपाना हो या मॉडल के तैयार न होने पर डेमो एरिया को अनुपलब्ध दिखाना हो.

style.css

.removed {
  display: none;
}

.invisible {
  opacity: 0.2;
}

.camView {
  position: relative;
  float: left;
  width: calc(100% - 20px);
  margin: 10px;
  cursor: pointer;
}

.camView p {
  position: absolute;
  padding: 5px;
  background-color: rgba(255, 111, 0, 0.85);
  color: #FFF;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  z-index: 2;
  font-size: 12px;
}

.highlighter {
  background: rgba(0, 255, 0, 0.25);
  border: 1px dashed #fff;
  z-index: 1;
  position: absolute;
}

बढ़िया! आपको बस इतना ही करना है. अगर आपने ऊपर दिए गए दो कोड की मदद से, अपने स्टाइल को बदल दिया है, तो अब आपकी लाइव झलक ऐसी दिखनी चाहिए:

ध्यान दें कि डेमो एरिया का टेक्स्ट और बटन उपलब्ध नहीं हैं, क्योंकि एचटीएमएल में डिफ़ॉल्ट रूप से "invisible" क्लास लागू होती है. मॉडल के इस्तेमाल के लिए तैयार होने के बाद, इस क्लास को हटाने के लिए JavaScript का इस्तेमाल किया जाएगा.

7. JavaScript स्केलेटन बनाना

अहम जानकारी: यहां दिया गया कोड क्रम से दिखाया गया है. हालांकि, इसे बेहतर तरीके से समझाने के लिए छोटे-छोटे हिस्सों में बांटा गया है. अगर हर बार हर सेगमेंट को JavaScript फ़ाइल के आखिर में कॉपी करके चिपकाया जाता है या पिछले चरण में बताए गए तरीके के मुताबिक, तय किए गए खाली फ़ंक्शन को बदला जाता है, तो सब कुछ ठीक से काम करेगा :-)

मुख्य डीओएम एलिमेंट को रेफ़रंस करना

सबसे पहले, पक्का करें कि आपके पास पेज के उन मुख्य हिस्सों का ऐक्सेस हो जिन्हें आपको हमारे कोड में बाद में बदलना या ऐक्सेस करना होगा:

script.js

const video = document.getElementById('webcam');
const liveView = document.getElementById('liveView');
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');

वेबकैम इस्तेमाल करने की सुविधा की उपलब्धता देखना

अब कुछ सहायक फ़ंक्शन जोड़े जा सकते हैं. इससे यह पता चलेगा कि आपके ब्राउज़र में, getUserMedia के ज़रिए वेबकैम स्ट्रीम को ऐक्सेस करने की सुविधा काम करती है या नहीं:

script.js

// Check if webcam access is supported.
function getUserMediaSupported() {
  return !!(navigator.mediaDevices &&
    navigator.mediaDevices.getUserMedia);
}

// If webcam supported, add event listener to button for when user
// wants to activate it to call enableCam function which we will 
// define in the next step.
if (getUserMediaSupported()) {
  enableWebcamButton.addEventListener('click', enableCam);
} else {
  console.warn('getUserMedia() is not supported by your browser');
}

// Placeholder function for next step. Paste over this in the next step.
function enableCam(event) {
}

वेबकैम से स्ट्रीम की जा रही जानकारी पाना

इसके बाद, ऊपर बताए गए enableCam फ़ंक्शन के लिए कोड भरें. इसके लिए, नीचे दिए गए कोड को कॉपी करके चिपकाएं:

script.js

// Enable the live webcam view and start classification.
function enableCam(event) {
  // Only continue if the COCO-SSD has finished loading.
  if (!model) {
    return;
  }
  
  // Hide the button once clicked.
  event.target.classList.add('removed');  
  
  // getUsermedia parameters to force video but not audio.
  const constraints = {
    video: true
  };

  // Activate the webcam stream.
  navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
    video.srcObject = stream;
    video.addEventListener('loadeddata', predictWebcam);
  });
}

आखिर में, कुछ समय के लिए कोड जोड़ें, ताकि यह जांच की जा सके कि वेबकैम काम कर रहा है या नहीं.

नीचे दिया गया कोड, आपके मॉडल को लोड होने का दिखावा करेगा और कैमरा बटन को चालू करेगा, ताकि आप उस पर क्लिक कर सकें. अगले चरण में, आपको इस पूरे कोड को बदलना होगा. इसलिए, इसे कुछ समय बाद फिर से मिटाने के लिए तैयार रहें:

script.js

// Placeholder function for next step.
function predictWebcam() {
}

// Pretend model has loaded so we can try out the webcam code.
var model = true;
demosSection.classList.remove('invisible');

बढ़िया! अगर आपने कोड चलाया और बटन पर क्लिक किया, तो आपको कुछ ऐसा दिखेगा:

8. मशीन लर्निंग मॉडल का इस्तेमाल

मॉडल लोड हो रहा है

अब COCO-SSD मॉडल लोड किया जा सकता है.

जब यह कोड शुरू हो जाए, तब अपने वेब पेज पर डेमो एरिया और बटन चालू करें. इसके लिए, इस कोड को उस अस्थायी कोड पर चिपकाएं जिसे आपने पिछले चरण के आखिर में जोड़ा था:

script.js

// Store the resulting model in the global scope of our app.
var model = undefined;

// Before we can use COCO-SSD class we must wait for it to finish
// loading. Machine Learning models can be large and take a moment 
// to get everything needed to run.
// Note: cocoSsd is an external object loaded from our index.html
// script tag import so ignore any warning in Glitch.
cocoSsd.load().then(function (loadedModel) {
  model = loadedModel;
  // Show demo section now model is ready to use.
  demosSection.classList.remove('invisible');
});

ऊपर दिया गया कोड जोड़ने और लाइव व्यू को रीफ़्रेश करने के बाद, आपको दिखेगा कि पेज लोड होने के कुछ सेकंड बाद (यह आपकी नेटवर्क स्पीड पर निर्भर करता है), मॉडल के इस्तेमाल के लिए तैयार होने पर वेबकैम चालू करें बटन अपने-आप दिखने लगता है. हालांकि, आपने predictWebcam फ़ंक्शन को भी चिपका दिया है. इसलिए, अब इस फ़ंक्शन को पूरी तरह से तय करने का समय आ गया है, क्योंकि फ़िलहाल हमारा कोड कुछ भी नहीं करेगा.

अगले चरण पर जाएं!

वेबकैम से लिए गए फ़्रेम को कैटगरी में बांटना

नीचे दिया गया कोड चलाएं, ताकि ब्राउज़र के तैयार होने पर ऐप्लिकेशन, वेबकैम स्ट्रीम से लगातार फ़्रेम ले सके. साथ ही, उसे मॉडल को पास कर सके, ताकि उसे क्लासिफ़ाई किया जा सके.

इसके बाद, मॉडल नतीजों को पार्स करेगा और मिले हुए कोऑर्डिनेट पर <p> टैग बनाएगा. साथ ही, अगर मॉडल को ऑब्जेक्ट के लेबल पर भरोसा है, तो वह टेक्स्ट को ऑब्जेक्ट के लेबल पर सेट कर देगा.

script.js

var children = [];

function predictWebcam() {
  // Now let's start classifying a frame in the stream.
  model.detect(video).then(function (predictions) {
    // Remove any highlighting we did previous frame.
    for (let i = 0; i < children.length; i++) {
      liveView.removeChild(children[i]);
    }
    children.splice(0);
    
    // Now lets loop through predictions and draw them to the live view if
    // they have a high confidence score.
    for (let n = 0; n < predictions.length; n++) {
      // If we are over 66% sure we are sure we classified it right, draw it!
      if (predictions[n].score > 0.66) {
        const p = document.createElement('p');
        p.innerText = predictions[n].class  + ' - with ' 
            + Math.round(parseFloat(predictions[n].score) * 100) 
            + '% confidence.';
        p.style = 'margin-left: ' + predictions[n].bbox[0] + 'px; margin-top: '
            + (predictions[n].bbox[1] - 10) + 'px; width: ' 
            + (predictions[n].bbox[2] - 10) + 'px; top: 0; left: 0;';

        const highlighter = document.createElement('div');
        highlighter.setAttribute('class', 'highlighter');
        highlighter.style = 'left: ' + predictions[n].bbox[0] + 'px; top: '
            + predictions[n].bbox[1] + 'px; width: ' 
            + predictions[n].bbox[2] + 'px; height: '
            + predictions[n].bbox[3] + 'px;';

        liveView.appendChild(highlighter);
        liveView.appendChild(p);
        children.push(highlighter);
        children.push(p);
      }
    }
    
    // Call this function again to keep predicting when the browser is ready.
    window.requestAnimationFrame(predictWebcam);
  });
}

इस नए कोड में सबसे अहम कॉल model.detect() है.

TensorFlow.js के लिए पहले से बनाए गए सभी मॉडल में इस तरह का फ़ंक्शन होता है. इसका नाम मॉडल के हिसाब से बदल सकता है. इसलिए, ज़्यादा जानकारी के लिए दस्तावेज़ देखें. यह फ़ंक्शन, मशीन लर्निंग इन्फ़्रेंस को लागू करता है.

इनफ़रेंस का मतलब है कि किसी इनपुट को मशीन लर्निंग मॉडल (असल में, कई गणितीय ऑपरेशनों) के ज़रिए प्रोसेस करना और फिर कुछ नतीजे देना. TensorFlow.js के पहले से बने मॉडल की मदद से, हम अपने अनुमानों को JSON ऑब्जेक्ट के तौर पर दिखाते हैं, ताकि इनका इस्तेमाल करना आसान हो.

आपको इस predict फ़ंक्शन के बारे में पूरी जानकारी, COCO-SSD मॉडल के लिए GitHub पर उपलब्ध हमारे दस्तावेज़ में यहां मिल सकती है.. यह फ़ंक्शन, पर्दे के पीछे कई काम करता है: यह किसी भी "इमेज जैसा" ऑब्जेक्ट को पैरामीटर के तौर पर स्वीकार कर सकता है. जैसे, इमेज, वीडियो, कैनवस वगैरह. पहले से बने मॉडल का इस्तेमाल करने से, आपका काफ़ी समय और मेहनत बच सकती है. ऐसा इसलिए, क्योंकि आपको यह कोड खुद नहीं लिखना होगा और इसका इस्तेमाल "आउट ऑफ़ द बॉक्स" किया जा सकता है.

इस कोड को चलाने पर, आपको कुछ ऐसी इमेज दिखेगी:

आखिर में, यहां एक ऐसे कोड का उदाहरण दिया गया है जो एक साथ कई ऑब्जेक्ट का पता लगाता है:

बहुत बढ़िया! अब आप समझ सकते हैं कि इस तरह की सुविधा को इस्तेमाल करना कितना आसान है. जैसे, किसी पुराने फ़ोन का इस्तेमाल करके Nest Cam जैसा डिवाइस बनाना. इससे आपको तब सूचना मिलेगी, जब आपका कुत्ता सोफ़े पर या आपकी बिल्ली काउच पर दिखेगी. अगर आपको अपने कोड में कोई समस्या आ रही है, तो यहां मेरे फ़ाइनल वर्किंग वर्शन की जांच करें. इससे आपको पता चलेगा कि आपने कोई जानकारी गलत तरीके से कॉपी तो नहीं की है.

9. बधाई हो

बधाई हो, आपने वेब ब्राउज़र में TensorFlow.js और मशीन लर्निंग का इस्तेमाल करने की दिशा में पहला कदम बढ़ा लिया है! अब आपको इन शुरुआती चरणों को पूरा करके, कुछ क्रिएटिव बनाना है. आपको क्या बनाना है?

रीकैप

इस कोडलैब में हम:

TensorFlow के अन्य वर्शन के मुकाबले, TensorFlow.js के फ़ायदों के बारे में जानें.
उन स्थितियों के बारे में जानें जिनमें आपको पहले से ट्रेन किए गए मशीन लर्निंग मॉडल का इस्तेमाल करना चाहिए.
एक ऐसा वेब पेज बनाया गया है जो आपके वेबकैम का इस्तेमाल करके, रीयल टाइम में ऑब्जेक्ट को क्लासिफ़ाई कर सकता है. इसमें ये शामिल हैं:
कॉन्टेंट के लिए एचटीएमएल का स्ट्रक्चर बनाना
एचटीएमएल एलिमेंट और क्लास के लिए स्टाइल तय करना
एचटीएमएल के साथ इंटरैक्ट करने और वेबकैम की मौजूदगी का पता लगाने के लिए, JavaScript स्कैफ़ोल्डिंग सेट अप करना
पहले से ट्रेन किए गए TensorFlow.js मॉडल को लोड करना
लोड किए गए मॉडल का इस्तेमाल करके, वेबकैम स्ट्रीम को लगातार क्लासिफ़ाई किया जा रहा है. साथ ही, इमेज में मौजूद ऑब्जेक्ट के चारों ओर बाउंडिंग बॉक्स बनाया जा रहा है.

अगले चरण

आपने जो भी बनाया है उसे हमारे साथ शेयर करें! इस कोडलैब के लिए बनाए गए कॉन्टेंट को, क्रिएटिव इस्तेमाल के अन्य मामलों में भी आसानी से बढ़ाया जा सकता है. हमारा सुझाव है कि आप कुछ अलग सोचें और हैकथॉन खत्म होने के बाद भी हैकिंग जारी रखें.

देखें कि यह मॉडल किन-किन ऑब्जेक्ट की पहचान कर सकता है. साथ ही, सोचें कि इस जानकारी का इस्तेमाल करके कोई कार्रवाई कैसे की जा सकती है. आज बनाए गए कॉन्टेंट को और बेहतर बनाने के लिए, अब कौनसे क्रिएटिव आइडिया लागू किए जा सकते हैं?

(ऐसा हो सकता है कि आपको सर्वर साइड की एक सामान्य लेयर जोड़नी पड़े, ताकि जब कोई दूसरा डिवाइस आपकी पसंद का कोई ऑब्जेक्ट देखे, तो उसे सूचना मिल जाए. इसके लिए, वेबसॉकेट का इस्तेमाल किया जा सकता है. यह किसी पुराने स्मार्टफ़ोन को अपसाइकल करने और उसे नए मकसद के लिए इस्तेमाल करने का एक शानदार तरीका है. इसका इस्तेमाल कई तरह से किया जा सकता है!)

सोशल मीडिया पर हमें टैग करने के लिए, #MadeWithTFJS हैशटैग का इस्तेमाल करें. इससे आपके प्रोजेक्ट को हमारे TensorFlow ब्लॉग पर दिखाया जा सकता है. साथ ही, आने वाले समय में होने वाले TensorFlow इवेंट में भी इसे दिखाया जा सकता है.

TensorFlow.js के पहले से ट्रेन किए गए मशीन लर्निंग मॉडल की मदद से, JavaScript में एक स्मार्ट वेबकैम बनाएं

1. शुरू करने से पहले

ज़रूरी शर्तें

आपको क्या बनाने को मिलेगा

आपको क्या सीखने को मिलेगा

2. TensorFlow.js क्या है?

इसका इस्तेमाल कहां किया जा सकता है?

क्लाइंट साइड की बेहतरीन सुविधाएं

निजता

स्पीड

पहुंच और बड़े पैमाने पर इंटिग्रेशन

लागत

सर्वर साइड की सुविधाएं

CUDA की पूरी सुविधा

मॉडल का साइज़

आईओटी

स्पीड

3. पहले से ट्रेन किए गए मॉडल

मुझे पहले से ट्रेन किए गए मॉडल का इस्तेमाल क्यों करना चाहिए?

COCO-SSD क्या है?

यह नाम कहां से आया?

4. सेट अप करें

आपको इन चीज़ों की ज़रूरत होगी

चलिए कोडिंग शुरू करते हैं

index.html

अन्य विकल्प: अपनी पसंद के वेब एडिटर का इस्तेमाल करें या स्थानीय तौर पर काम करें

5. एचटीएमएल स्ट्रक्चर में डेटा जोड़ना

index.html

कोड को समझना

index.html

6. शैली जोड़ें

तत्वों की डिफ़ॉल्ट सेटिंग

style.css

style.css

7. JavaScript स्केलेटन बनाना

मुख्य डीओएम एलिमेंट को रेफ़रंस करना

script.js

वेबकैम इस्तेमाल करने की सुविधा की उपलब्धता देखना

script.js

वेबकैम से स्ट्रीम की जा रही जानकारी पाना

script.js

script.js

8. मशीन लर्निंग मॉडल का इस्तेमाल

मॉडल लोड हो रहा है

script.js

9. बधाई हो

रीकैप

अगले चरण

ज़्यादा जानकारी पाने के लिए, TensorFlow.js के अन्य कोडलैब

एक्सप्लोर करने के लिए वेबसाइटें