🤹🏻 💄 🖇️ TensorFlow.js और clmtrackr.js: ब्राउज़र में उपयोगकर्ता के टकटकी की दिशा पर नज़र रखना 🍁 ❄️ 🕺🏼

लेख का लेखक, जिसका अनुवाद हम प्रकाशित कर रहे हैं, विशेष रूप से वेब ब्राउज़र के माध्यम से कंप्यूटर दृष्टि के क्षेत्र से समस्याओं को हल करने के बारे में बात करने की पेशकश करता है। इस तरह की समस्या का समाधान करना टेन्सरफ्लो जावास्क्रिप्ट लाइब्रेरी के लिए बहुत मुश्किल नहीं है। अपने स्वयं के मॉडल को प्रशिक्षित करने और तैयार उत्पाद के हिस्से के रूप में उपयोगकर्ताओं को पेश करने के बजाय, हम उन्हें स्वतंत्र रूप से डेटा एकत्र करने और अपने ब्राउज़र पर सीधे एक ब्राउज़र में मॉडल को प्रशिक्षित करने का अवसर देंगे। इस दृष्टिकोण के साथ, सर्वर-साइड डेटा प्रोसेसिंग पूरी तरह से अनावश्यक है।

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

विचार

आइए मशीन सीखने की तकनीक का उपयोग करें ताकि यह पता लगाया जा सके कि उपयोगकर्ता किसी वेब पेज को देखता है या नहीं। हम एक वेबकैम का उपयोग करके उसकी आँखों को देखकर ऐसा करते हैं।

ब्राउज़र में वेबकैम को एक्सेस करना बहुत आसान है। यदि हम मानते हैं कि कैमरे से पूरी छवि तंत्रिका नेटवर्क के इनपुट के रूप में उपयोग की जाएगी, तो हम कह सकते हैं कि यह इन उद्देश्यों के लिए बहुत बड़ी है। सिस्टम को छवि पर जगह निर्धारित करने के लिए बहुत काम करना होगा जहां आँखें हैं। यह दृष्टिकोण खुद को अच्छी तरह से दिखा सकता है अगर हम एक मॉडल के बारे में बात कर रहे हैं जो डेवलपर अपने आप से ट्रेन करता है और सर्वर पर तैनात करता है, लेकिन अगर हम किसी ब्राउज़र में प्रशिक्षण और मॉडल का उपयोग करने के बारे में बात कर रहे हैं, तो यह बहुत अधिक है।

नेटवर्क के कार्य को सुविधाजनक बनाने के लिए, हम इसे केवल छवि के एक हिस्से के साथ प्रदान कर सकते हैं - एक जिसमें उपयोगकर्ता की आंखें और उनके चारों ओर एक छोटा क्षेत्र होता है। यह क्षेत्र, जो आंखों के चारों ओर एक आयत है, को तीसरे पक्ष के पुस्तकालय का उपयोग करके पहचाना जा सकता है। इसलिए, हमारे काम का पहला हिस्सा इस तरह दिखता है:

वेब कैमरा इनपुट, फेस रिकग्निशन, आई डिटेक्शन, क्रॉप्ड इमेज

छवि में चेहरे का पता लगाने के लिए, मैंने एक लाइब्रेरी का उपयोग किया जिसे क्लैमट्रक कहा जाता है। यह सही नहीं है, लेकिन छोटे आकार, अच्छे प्रदर्शन और, सामान्य रूप से, गरिमा के साथ अपने कार्य के साथ अलग है।

यदि एक छोटी लेकिन समझदारी से चुनी गई छवि का उपयोग एक सरल दृढ़ तंत्रिका नेटवर्क के लिए एक इनपुट के रूप में किया जाता है, तो नेटवर्क बिना किसी समस्या के सीख सकता है। यह प्रक्रिया इस प्रकार दिखती है:

इनपुट छवि, मॉडल एक दृढ़ तंत्रिका नेटवर्क है, निर्देशांक, उस स्थान पर नेटवर्क द्वारा भविष्यवाणी की गई जगह जहां उपयोगकर्ता देख रहा है।

इस खंड में चर्चा किए गए विचारों का पूरी तरह से काम करने वाला न्यूनतम कार्यान्वयन यहां वर्णित किया जाएगा। परियोजना, जिसका कोड इस भंडार में है, में कई अतिरिक्त विशेषताएं हैं।

ट्रेनिंग

आरंभ करने के लिए, उपयुक्त रिपॉजिटरी से clmtrackr.js । हम एक खाली HTML फ़ाइल के साथ काम शुरू करेंगे, जो हमारे कोड के साथ jQuery, TensorFlow.js, clmtrackr.js और main.js फ़ाइल को आयात करता है, जिसे हम थोड़ी देर बाद काम करेंगे:

 <!doctype html> <html> <body>   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.12.0"></script>   <script src="clmtrackr.js"></script>   <script src="main.js"></script> </body> </html>

एक वेब कैमरा से वीडियो स्ट्रीम प्राप्त करें

वेबकैम को सक्रिय करने और पृष्ठ पर वीडियो स्ट्रीम प्रदर्शित करने के लिए, हमें उपयोगकर्ता की अनुमति लेनी होगी। यहां मैं कोड प्रदान नहीं करता हूं जो विभिन्न ब्राउज़रों के साथ प्रोजेक्ट की संगतता समस्याओं को हल करता है। हम इस धारणा से आगे बढ़ेंगे कि हमारे उपयोगकर्ता Google Chrome के नवीनतम संस्करण का उपयोग करके इंटरनेट पर काम करते हैं।

HTML फ़ाइल में निम्न कोड जोड़ें। इसे <body> भीतर स्थित होना चाहिए, लेकिन <script> टैग के ऊपर:

 <video id="webcam" width="400" height="300" autoplay></video>

अब main.js फ़ाइल के साथ काम करते हैं:

 $(document).ready(function() { const video = $('#webcam')[0]; function onStreaming(stream) {   video.srcObject = stream; } navigator.mediaDevices.getUserMedia({ video: true }).then(onStreaming); });

इस कोड को अपने दम पर आज़माएं। जब आप पृष्ठ खोलते हैं, तो ब्राउज़र को अनुमति के लिए पूछना चाहिए, और फिर वेब कैमरा से एक तस्वीर स्क्रीन पर दिखाई देगी।

बाद में हम onStreaming() फ़ंक्शन के कोड का विस्तार करेंगे।

चेहरे की खोज

अब वीडियो में चेहरे खोजने के लिए clmtrackr.js लाइब्रेरी का उपयोग करें। सबसे पहले, const video = ... के बाद निम्नलिखित कोड जोड़कर फेस ट्रैकिंग सिस्टम को इनिशियलाइज़ करें const video = ... :

 const ctrack = new clm.tracker(); ctrack.init();

अब, onStreaming() फ़ंक्शन में, हम निम्नलिखित कमांड को जोड़कर चेहरे की खोज प्रणाली को जोड़ते हैं:

 ctrack.start(video);

हमें बस इतना ही चाहिए। अब सिस्टम वीडियो स्ट्रीम में चेहरे को पहचानने में सक्षम होगा।

विश्वास नहीं होता? यह सच है यह सुनिश्चित करने के लिए अपने चेहरे के चारों ओर एक "मुखौटा" बनाएं।
ऐसा करने के लिए, हमें वीडियो दिखाने के लिए जिम्मेदार तत्व के शीर्ष पर छवि प्रदर्शित करनी होगी। आप <canvas> का उपयोग करके HTML पृष्ठों पर कुछ आकर्षित कर सकते हैं। इसलिए, हम वीडियो को प्रदर्शित करने वाले तत्व पर सुपरइम्पोज़ करके एक ऐसा तत्व बनाएंगे। निम्न कोड हमें इसमें मदद करेगा, जिसे <video> तत्व के तहत HTML फ़ाइल में जोड़ा जाना चाहिए जो पहले से ही है:

 <canvas id="overlay" width="400" height="300"></canvas> <style>   #webcam, #overlay {       position: absolute;       top: 0;       left: 0;   } </style>

यदि आप चाहें, तो आप इनलाइन शैली को एक अलग सीएसएस फ़ाइल में स्थानांतरित कर सकते हैं।

यहां हमने <video> तत्व के समान पृष्ठ में <canvas> जोड़ा है। तथ्य यह है कि तत्वों को उसी स्थिति में स्थित किया जाएगा जो यहां इस्तेमाल की गई शैलियों द्वारा सुनिश्चित किया गया है।

अब, हर बार जब ब्राउज़र वीडियो के अगले फ्रेम को प्रदर्शित करता है, तो हम <canvas> पर कुछ आकर्षित करने जा रहे हैं। प्रत्येक फ्रेम के आउटपुट के दौरान किसी भी कोड का निष्पादन requestAnimationLoop() तंत्र का उपयोग करके किया जाता है। इससे पहले कि हम <canvas> लिए कुछ भी आउटपुट करें, हमें इसे हटाने से पहले इसे हटाने की जरूरत है। फिर हम ग्राफिक को सीधे <canvas> पर आउटपुट करने के लिए clmtrackr का सुझाव दे सकते हैं।

यहाँ वह कोड है जो लागू होता है, जिसके बारे में हमने अभी बात की है। इसे ctrack.init() कमांड के नीचे जोड़ें:

 const overlay = $('#overlay')[0]; const overlayCC = overlay.getContext('2d'); function trackingLoop() { // ,     , //     -   . requestAnimationFrame(trackingLoop); let currentPosition = ctrack.getCurrentPosition(); overlayCC.clearRect(0, 0, 400, 300); if (currentPosition) {   ctrack.draw(overlay); } }

अब trackingLoop() फंक्शन को onStreaming() फंक्शन में onStreaming() तुरंत बाद ctrack.start() । यह फ़ंक्शन प्रत्येक फ्रेम में स्वयं के पुनरारंभ की योजना बनाएगा।

पेज को रिफ्रेश करें और वेबकैम पर देखें। आपको वीडियो विंडो में अपने चेहरे के चारों ओर एक हरे रंग का "मास्क" देखना चाहिए। कभी-कभी, चेहरे को सही ढंग से पहचानने के लिए सिस्टम के लिए, आपको फ्रेम में अपने सिर को थोड़ा स्थानांतरित करने की आवश्यकता होती है।

चेहरे की पहचान के परिणाम

आंखों से युक्त छवि के क्षेत्र को पहचानें

अब हमें उस छवि के आयताकार क्षेत्र को खोजने की आवश्यकता है जिसमें आँखें स्थित हैं और इसे एक अलग <canvas> ।

सौभाग्य से, cmltracker हमें न केवल चेहरे के स्थान के बारे में जानकारी देता है, बल्कि 70 नियंत्रण बिंदु भी देता है। यदि आप cmltracker के प्रलेखन को देखते हैं, तो आप वास्तव में नियंत्रण बिंदुओं का चयन कर सकते हैं जिनकी हमें आवश्यकता है।

नियंत्रण अंक

हम तय करते हैं कि आंखें छवि का आयताकार हिस्सा हैं, जिनमें से सीमाएं 23, 28, 24 और 26 को छूती हैं, प्रत्येक दिशा में 5 पिक्सेल तक विस्तारित होती हैं। इस आयत में वह सब कुछ शामिल होना चाहिए जो हमारे लिए महत्वपूर्ण है, जब तक कि उपयोगकर्ता अपने सिर को बहुत अधिक न झुका ले।

अब, इससे पहले कि हम छवि के इस टुकड़े का उपयोग कर सकें, हमें इसके उत्पादन के लिए एक और <canvas> आवश्यकता है। इसका डाइमेंशन 50x25 पिक्सल होगा। आँखों के साथ एक आयत इस तत्व में फिट होगा। थोड़ा छवि विरूपण एक समस्या नहीं है।

इस कोड को HTML फ़ाइल में जोड़ें जो <canvas> वर्णन करता है, जिसमें उस छवि का हिस्सा शामिल होगा जिसमें आँखें हैं:

 <canvas id="eyes" width="50" height="25"></canvas> <style>   #eyes {       position: absolute;       top: 0;       right: 0;   } </style>

निम्नलिखित फ़ंक्शन x और y निर्देशांक लौटाएगा, साथ ही आंखों के आसपास के आयत की चौड़ाई और ऊंचाई भी। यह, इनपुट के रूप में, clmtrackr से प्राप्त positions की एक सरणी लेता है। ध्यान दें कि clmtrackr से प्राप्त प्रत्येक समन्वय में घटक x और y । इस फ़ंक्शन को main.js जोड़ा जाना चाहिए:

 function getEyesRectangle(positions) { const minX = positions[23][0] - 5; const maxX = positions[28][0] + 5; const minY = positions[24][1] - 5; const maxY = positions[26][1] + 5; const width = maxX - minX; const height = maxY - minY; return [minX, minY, width, height]; }

अब, प्रत्येक फ्रेम में, हम वीडियो स्ट्रीम से आंखों के साथ एक आयत निकालने जा रहे हैं, इसे <canvas> पर एक लाल रेखा के साथ सर्कल करें, जो <video> तत्व पर सुपरिंपोज किया गया है, और फिर इसे नए <canvas> कॉपी करें। कृपया ध्यान दें कि हमें उस क्षेत्र की सही पहचान करने के लिए, हम संकेतक resizeFactorX और resizeFactorY गणना करेंगे।

trackingLoop() कोड में if ब्लॉक को बदलें trackingLoop() निम्न कोड के साथ कार्य करें:

 if (currentPosition) { //  ,     //   <canvas>,    <video> ctrack.draw(overlay); //  ,  ,    //   const eyesRect = getEyesRectangle(currentPosition); overlayCC.strokeStyle = 'red'; overlayCC.strokeRect(eyesRect[0], eyesRect[1], eyesRect[2], eyesRect[3]); //      , //        //      const resizeFactorX = video.videoWidth / video.width; const resizeFactorY = video.videoHeight / video.height; //          //    <canvas> const eyesCanvas = $('#eyes')[0]; const eyesCC = eyesCanvas.getContext('2d'); eyesCC.drawImage(   video,   eyesRect[0] * resizeFactorX, eyesRect[1] * resizeFactorY,   eyesRect[2] * resizeFactorX, eyesRect[3] * resizeFactorY,   0, 0, eyesCanvas.width, eyesCanvas.height ); }

अब पृष्ठ को फिर से लोड करने के बाद, आपको आंखों के चारों ओर एक लाल आयत देखना चाहिए, और इस आयत में जो संगत है वह है <canvas> । यदि आपकी आंखें मेरी तुलना में बड़ी हैं, तो getEyeRectangle फ़ंक्शन के साथ प्रयोग करें।

<कैनवास> तत्व जो उपयोगकर्ता की आंखों की छवि वाले एक आयत को खींचता है

डेटा संग्रह

डेटा एकत्र करने के कई तरीके हैं। मैंने उस जानकारी का उपयोग करने का निर्णय लिया जो माउस और कीबोर्ड से प्राप्त की जा सकती है। हमारी परियोजना में, डेटा संग्रह इस तरह दिखता है।

उपयोगकर्ता पृष्ठ के चारों ओर कर्सर ले जाता है और उसे अपनी आंखों से देखता है, हर बार कीबोर्ड पर दबाते हुए कार्यक्रम को एक और नमूना रिकॉर्ड करने की आवश्यकता होती है। इस दृष्टिकोण के साथ, मॉडल के प्रशिक्षण के लिए एक बड़े डेटा सेट को जल्दी से इकट्ठा करना आसान है।

▍Mouse ट्रैकिंग

यह पता लगाने के लिए कि वेब पेज पर माउस पॉइंटर कहां स्थित है, हमें एक document.onmousemove जरूरत है। इसके अलावा, हमारा कार्य निर्देशांक को सामान्य करता है ताकि वे सीमा में फिट हो जाएं [-1, 1]:

 //   : const mouse = { x: 0, y: 0, handleMouseMove: function(event) {   //      ,    [-1, 1]   mouse.x = (event.clientX / $(window).width()) * 2 - 1;   mouse.y = (event.clientY / $(window).height()) * 2 - 1; }, } document.onmousemove = mouse.handleMouseMove;

▍ छवि पर कब्जा

<canvas> द्वारा प्रदर्शित छवि को कैप्चर करने के लिए और इसे टेंसर के रूप में सहेजने के लिए, TensorFlow.js हेल्पर फ़ंक्शन tf.fromPixels() प्रदान करता है। हम इसे बचाने के लिए उपयोग करते हैं और फिर छवि को <canvas> से सामान्य करते हैं जो उपयोगकर्ता की आंखों से युक्त आयत प्रदर्शित करता है:

 function getImage() { //       return tf.tidy(function() {   const image = tf.fromPixels($('#eyes')[0]);   //  <i><font color="#999999"></font></i>:   const batchedImage = image.expandDims(0);   //    :   return batchedImage.toFloat().div(tf.scalar(127)).sub(tf.scalar(1)); }); }

ध्यान दें कि tf.tidy() फ़ंक्शन का उपयोग पूरा होने के बाद सफाई करने के लिए किया जाता है।

हम सिर्फ एक बड़े प्रशिक्षण सेट में सभी नमूनों को बचा सकते हैं, हालांकि मशीन सीखने में मॉडल प्रशिक्षण की गुणवत्ता की जांच करना महत्वपूर्ण है। इसलिए हमें कुछ नमूनों को एक अलग नियंत्रण नमूने में सहेजने की आवश्यकता है। उसके बाद, हम इसके लिए नए डेटा पर मॉडल के व्यवहार की जांच कर सकते हैं और यह पता लगा सकते हैं कि मॉडल को ओवर-प्रशिक्षित किया गया है या नहीं। इस उद्देश्य के लिए, नियंत्रण नमूने में कुल नमूनों में से 20% शामिल हैं।

यहां डेटा और नमूना एकत्र करने के लिए उपयोग किया जाने वाला कोड है:

 const dataset = { train: {   n: 0,   x: null,   y: null, }, val: {   n: 0,   x: null,   y: null, }, } function captureExample() { //            tf.tidy(function() {   const image = getImage();   const mousePos = tf.tensor1d([mouse.x, mouse.y]).expandDims(0);   // ,    (  )     const subset = dataset[Math.random() > 0.2 ? 'train' : 'val'];   if (subset.x == null) {     //        subset.x = tf.keep(image);     subset.y = tf.keep(mousePos);   } else {     //          const oldX = subset.x;     const oldY = subset.y;     subset.x = tf.keep(oldX.concat(image, 0));     subset.y = tf.keep(oldY.concat(mousePos, 0));   }   //     subset.n += 1; }); }

और अंत में, हमें इस फ़ंक्शन को से बाँधने की आवश्यकता है:

 $('body').keyup(function(event) { //         if (event.keyCode == 32) {   captureExample();   event.preventDefault();   return false; } });

अब हर बार जब आप दबाते हैं, तो आंख की छवि और माउस पॉइंटर के निर्देशांक डेटा सेट में से एक में जुड़ जाते हैं।

मॉडल प्रशिक्षण

एक सरल दृढ़ तंत्रिका नेटवर्क बनाएँ। TensorFlow.js इस उद्देश्य के लिए केरस की एक याद ताजा करती है। नेटवर्क में एक conv2d परत, एक maxPooling2d परत और अंत में दो आउटपुट मानों के साथ एक dense परत होनी चाहिए (वे स्क्रीन निर्देशांक का प्रतिनिधित्व करते हैं)। रास्ते के साथ, मैंने दो-आयामी डेटा को एक-आयामी में बदलने के लिए, एक नियमित रूप से नेटवर्क के लिए एक dropout परत और एक flatten परत को जोड़ा। एडम ऑप्टिमाइज़र का उपयोग करके नेटवर्क प्रशिक्षण किया जाता है।

कृपया ध्यान दें कि मैं अपने मैकबुक एयर के साथ प्रयोग करने के बाद यहां उपयोग की जाने वाली नेटवर्क सेटिंग्स पर बस गया। आप मॉडल का अपना कॉन्फ़िगरेशन अच्छी तरह से चुन सकते हैं।

यहाँ मॉडल कोड है:

 let currentModel; function createModel() { const model = tf.sequential(); model.add(tf.layers.conv2d({   kernelSize: 5,   filters: 20,   strides: 1,   activation: 'relu',   inputShape: [$('#eyes').height(), $('#eyes').width(), 3], })); model.add(tf.layers.maxPooling2d({   poolSize: [2, 2],   strides: [2, 2], })); model.add(tf.layers.flatten()); model.add(tf.layers.dropout(0.2)); //    x  y model.add(tf.layers.dense({   units: 2,   activation: 'tanh', })); //   Adam     0.0005     MSE model.compile({   optimizer: tf.train.adam(0.0005),   loss: 'meanSquaredError', }); return model; }

नेटवर्क का प्रशिक्षण शुरू करने से पहले, हम एक निश्चित संख्या में युग और एक चर पैकेट आकार निर्धारित करते हैं (क्योंकि हम शायद बहुत छोटे डेटा सेट के साथ काम करेंगे)।

 function fitModel() { let batchSize = Math.floor(dataset.train.n * 0.1); if (batchSize < 4) {   batchSize = 4; } else if (batchSize > 64) {   batchSize = 64; } if (currentModel == null) {   currentModel = createModel(); } currentModel.fit(dataset.train.x, dataset.train.y, {   batchSize: batchSize,   epochs: 20,   shuffle: true,   validationData: [dataset.val.x, dataset.val.y], }); }

अब सीखना शुरू करने के लिए पेज पर एक बटन जोड़ें। यह कोड HTML फ़ाइल में जाता है:

 <button id="train">Train!</button> <style>   #train {       position: absolute;       top: 50%;       left: 50%;       transform: translate(-50%, -50%);       font-size: 24pt;   } </style>

इस कोड को JS फ़ाइल में जोड़ा जाना चाहिए:

 $('#train').click(function() { fitModel(); });

उपयोगकर्ता कहाँ देख रहा है?

अब जब हम डेटा एकत्र कर सकते हैं और मॉडल तैयार कर सकते हैं, तो हम उस पृष्ठ पर जगह की भविष्यवाणी करना शुरू कर सकते हैं जहां उपयोगकर्ता देख रहा है। हम इस स्थान की ओर एक हरे वृत्त की सहायता से इंगित करते हैं, जो स्क्रीन के चारों ओर घूमता है।

सबसे पहले, पेज में एक सर्कल जोड़ें:

 <div id="target"></div> <style>   #target {       background-color: lightgreen;       position: absolute;       border-radius: 50%;       height: 40px;       width: 40px;       transition: all 0.1s ease;       box-shadow: 0 0 20px 10px white;       border: 4px solid rgba(0,0,0,0.5);   } </style>

पृष्ठ के चारों ओर इसे स्थानांतरित करने के लिए, हम समय-समय पर तंत्रिका नेटवर्क की आंखों की वर्तमान छवि को प्रसारित करते हैं और उससे एक सवाल पूछते हैं कि उपयोगकर्ता कहां देख रहा है। प्रतिक्रिया में मॉडल दो निर्देशांक पैदा करता है जिसके साथ सर्कल को स्थानांतरित किया जाना चाहिए:

 function moveTarget() { if (currentModel == null) {   return; } tf.tidy(function() {   const image = getImage();   const prediction = currentModel.predict(image);   //          const targetWidth = $('#target').outerWidth();   const targetHeight = $('#target').outerHeight();   const x = (prediction.get(0, 0) + 1) / 2 * ($(window).width() - targetWidth);   const y = (prediction.get(0, 1) + 1) / 2 * ($(window).height() - targetHeight);   //     :   const $target = $('#target');   $target.css('left', x + 'px');   $target.css('top', y + 'px'); }); } setInterval(moveTarget, 100);

मैंने अंतराल को 100 मिलीसेकंड पर सेट किया। यदि आपका कंप्यूटर मेरा जितना शक्तिशाली नहीं है, तो आप इसे बड़ा करने का निर्णय ले सकते हैं।

परिणाम

अब हमारे पास इस सामग्री की शुरुआत में प्रस्तुत विचार को लागू करने की आवश्यकता है। हमने जो किया है उसका अनुभव करें। उसकी आँखों के पीछे माउस कर्सर ले जाएँ, और स्पेसबार दबाएँ। इसके बाद स्टार्ट ट्रेनिंग बटन पर क्लिक करें।

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

हालाँकि जो हमने पहले ही किया था वह काफी दिलचस्प लग रहा है, फिर भी कई सुधार हैं जो किए जा सकते हैं। क्या होगा अगर उपयोगकर्ता अपना सिर घुमाता है या कैमरे के सामने अपनी स्थिति बदलता है? हमारी परियोजना उस आयत के आकार, स्थिति और कोण के चयन के बारे में संभावनाओं को चोट नहीं पहुंचाएगी जो उस छवि क्षेत्र को बांधती है जिसमें आँखें हैं। वास्तव में, यहां चर्चा की गई उदाहरण के पूर्ण संस्करण में कुछ अतिरिक्त विशेषताएं लागू की गई हैं। यहाँ उनमें से कुछ हैं:

ऊपर वर्णित आंख-बाउंडिंग आयत को अनुकूलित करने के लिए विकल्प।
एक छवि को ग्रेस्केल में बदलें।
CoordConv का उपयोग करना।
यह जांचने के लिए कि कौन सा मॉडल अच्छा प्रदर्शन करता है और यह कहाँ नहीं हुआ है।
डेटासेट को सहेजने और लोड करने की क्षमता।
मॉडल को बचाने और लोड करने की क्षमता।
वजन का संरक्षण जिसने प्रशिक्षण के बाद न्यूनतम प्रशिक्षण हानि दिखाई।
सिस्टम के साथ काम करने के लिए संक्षिप्त निर्देशों के साथ बेहतर यूजर इंटरफेस।

प्रिय पाठकों! क्या आप TensorFlow का उपयोग करते हैं?

TensorFlow.js और clmtrackr.js: ब्राउज़र में उपयोगकर्ता के टकटकी की दिशा पर नज़र रखना