Hello guys, my name is Nitish, welcome to my YouTube channel. इस वीडियो में हम लोग आज एक और project बनाने वाले हैं और बहुत दिनों के बाद मैं आज एक deep learning project के उपर काम करूँगा हम लोग एक pose detector बनाने वाले हैं pose detector as in position detector, posture detector तो अगर आप camera के सामने खड़े होगे तो वो आपका skeleton kind of identify कर पाएगा कि आपका body किस तरीके से move कर रहा है अब खुद में यह बहुत interesting project है प्रोजेक्ट टीजर वीडियो भी शेयर किया था जहां पर मैंने डेमो दिखाया था मैं डेमो थोड़ी देर आगे फिर से दिखाऊंगा तो आपको कैमरा के सामने खड़ा होना है और कैमरा इडेंटिफाई करेगा आपका करेंट पॉजिट ठीक है पूरी चीज कैसे काम करती के वह मोस्कि पाइट में बनाए और वह आपके मशीन पर चलते थे अ पर यह जो प्रोजेक्ट है यह ब्राउजर के अंदर चलेगा और आप इसको डिप्लॉइ करके किसी के साथ भी शेयर कर सकते हो मैं आपको सबसे पहले इसका एक दिखाता हूं तो आपको यह प्रोजेक्ट क्यों करना चाहिए बिकॉज इट इज स्टेट ऑफ पार्ट और बहुत पॉपलर है बहुत सारे और अगर ये आपके portfolio में है तो ये बताता है कि आप नई चीज़े ट्राइ करते हो अल्थो हम इस project में इस model को train नहीं कर रहे हैं pose-led जो हमारा model है हम एक pre-drained model यूज़ करेंगे हम उसको खुद से train नहीं करेंगे but still खुद में ये application बनाना और उसको यूज़ करके देखना एक अलग ही मसा है ठीक है इसके बाद मैं एक दो follow up videos बनाओंगा जहाँ पे हम model को train भी करेंगे but मेरे को लगता है अगर आप deep learning में खुस रहे हो तो this is a very good point जहां पे आपको ये वीडियो इंस्पायर करेगा डीप लर्निंग पढ़ने के लिए, right, क्योंकि डीप लर्निंग खुद में थोड़ा difficult है, ये सबको पता है, अगर आप directly maths में घुस जाते हो, या फिर theoretical topics पढ़ने लग जाते हो, तो थोड़ा boring लगने लगता है, और आपको तो अगर आप beginner हो deep learning में, machine learning में काम कर चुके हो, तो मेरे लगता है आप ideal candidate हो, but अगर आप पहले कभी machine learning में काम नहीं भी कियोगे हो, तो यहाँ पर उतने machine learning के concepts हम directly deal नहीं करेंगे, क्योंकि हम model को train नहीं कर रहे, it's more application level kind of project, so I hope आपका यह doubt clear हो गया, so now let's discuss about posnet, जो model हम लोग इस पूरे project में use करेंगे, गूगल की टीम ने बनाया है और ऑल्थो बहुत टेक्निकल है और बहुत डिफिकल्ट टू अंडेस्टेंड है बट मैं आपको कोर आइडिया समझा सकता हूँ और मैं आपके साथ एक ब्लॉग पोस्ट शेयर करता हूँ जो मैं पढ़ रहा था वाइल इंप्लीमेंटिंग इस एक इमेज या फिर वीडियो के अंदर human beings का posture identify कर सकते हो ठीक है जैसे कि यहाँ पर देखो दो modes में काम करता है पहला mode है single mode, second is multiple mode, so पहले single mode में obviously आप एक single skeleton ही detect कर सकते हो जैसा कि पहले image में दिखाई दे रहा है और अगर आप multiple mode में काम कर रहे हो तो in that case आप कितने भी skeleton हो कितने भी human beings हो आप सबका posture detect कर पाओगे ठीक है so it depends और विस्सी से किन वाले में थोड़ा ज्यादा प्रोसेसिंग लगेगा अब पोज एस्टिमेशन एक्जाक्ट्री होता क्या है कि आपके बॉडी के दिरा सब्सक्राइब आपके आखे आपका नोज आपके शोल्डर्स आपके एलबोस एंकल्स नीज उनको डिटेक्ट करना है तो आप यह ब्लॉग को थोड़ा सा पढ़ना आप थोड़ा और डिटेल में समझ में आएगा कि इसकी क्या है और अब आप दिमाग में व्यक्ति आ सकता है कि ठीक है मैंने प्रोजेक्ट बनाया यह कहां पर यूजफुल है दांसर इस बहुत जगहों पर ठीक है मतलब मैं आपको तीन-चार तो बहुत सिंपल एग्जांपल्स दे सकता हूं जैसे कि स्नैपचैट वगैरह में जो पर कुछ राबिट यह साजाते तो वह आपका पॉजिट करके ही होता है ठीक है वहां पर थोड़ा फ्रेस डिटेक्शन होता सेकेंड आजकल ये बहुत सारे फिटनेस आप्स आ रहे हैं जैसे कि कल्ट डॉट फिट बोल के एक आप आता है मैंने उनका एक दो सेशन्स किये थे वहाँ पे वो लोग लाइव योगा सेशन्स लेते हैं सिमिलरली आप बहुत सारे जो वर्चुल गेम्स होते हैं जहाँ पे आप जैसे टेनिस खेल रहो एक कैमरा के सामने कर दो नाओ होता क्या एक्साइटली स्टेप बाय स्टेप बहुत सिंपल है कि सबसे पहले आप एक इमेज फीड करते हो इस निरोल नेटवर्क में जो कि पहले से ट्रेंड है और वह आपको दो चीजें प्रोवाइड करता है फर्स्ट की स्केलेटन है उस पर्टिकुलर फोटो और हर की पॉइंट को वे कॉन्फिडेंस को असाइन करता है ठीक है सो इस तरीके से कुछ आपको आउपुट दिखाई देता है हम भी जब आज प्रोजेक्ट करेंगे तो वो कुछ ऐसा ही दिखाई देगा मैंने आपको अलड़ी डेमो में दिखा दिया है अगर आपको इसके पीछे की technicalities जाननी है कि यह पूरा जो neural network है यह कैसे train हुआ और neural network का architecture क्या है कौन से data set पर train हुआ तो आप इसको थोड़ा सा और detail में इस blog में पढ़ सकते हो यहां पर अगर आप नीचे जाओ इस जगह पर आप टेक्निकल डीप टाइप यहां पर लोगों थोड़ा सा आर्टिटेक्चर लेवल पर जाकर डिस्कस किया है कि यह नूरल एक पर कैसे काम करता है अगर आप स्टार्ट कर रहे हो डीप लर्निंग में अपना जर्नी पर ना अगर आप ऑलरी काफी काम कर चुके हो डीप लर्निंग में देन तो आपको बिल्कुल यह चीज पढ़नी चाहिए और यह बढ़िया लिखा हुआ है मतलब ऑलरी देर लिखेट के अपने आप सॉन दस ब्लॉग अ तो बढ़िया है मतलब जितना मैंने पढ़ा मुझे बहुत सही लगा और I felt कि हाँ चीजे समझ में आ रहे हैं ठीक है तो that's it यही है अब अगर हम discuss करें कि हम इस project को कैसे बनाने वाले हैं तो हम python वाला रस्ता यूज़ नहीं कर रहे हैं इस project में we are taking a separate path हम इस project में javascript के थू� और ब्राउजर में पाइटिन को इंप्लीमेंट करना इस ऑलमोस्ट इंपॉसिबल आप सर्वर पर पाइटिन चला सकते हो बट क्लाइन की कंप्यूटर पर आपको जावास्क्रिप्ट ही मिलेगा लेगो पाट इस कि टेंसर फ्लो की एक लाइब्रेडी है जो आपको क्लाइन के कंप्यूटर पर मॉडल्स रन करने का फीचर देती है यूजिंग वेब जीएल पार्ट ऑफ ब्राउजर आपके एंड रस नेट इंपोर्टेंट अगर आप एक मशीन लर्निंग इंजीनियर हो या बनना चाहते हो तो आपको यू नो हर चीज का आइडिया होना चाहिए अलग-अलग प्रैटफॉर्म से मशीन लर्निंग कैसे चलता है काम करता है उसका यह होना चाहिए एंड आप इस वाइट विडियो इस प्रॉजेक्ट इन जावास्क्रिप्ट यू जो कि उस लाइब्रेडी को यूज करके हम बहुत ज्यादा ऐसा फील नहीं होगा कि ये कोई ऐसा language है जो मुझे नहीं आता although I would recommend कि आप JavaScript भी सीखो आज के रेट में दो सबसे ज़ादा popular languages में से एक है JavaScript दूसरा बिंग Python तो JavaScript सीखने में कोई बुराई नहीं है मेरे चैनल पे playlist है JavaScript को ले करके आप देख सकते हो ठीक है तो that's it that's the introductory part now let's start our project so guys now the first thing that we will do is we will create our project उसके लिए मैं क्या कर रहा हूँ, सबसे पहले मैं अपने desktop पे एक folder बना रहा हूँ, और मैं इसका नाम रख रहा हूँ, posenet, और इसके लिए आपको VS Code चाहिए, actually आप कोई भी code editor यूज़ कर सकते हो, I'm going to use VS Code, बहुत ही famous है, और काफी लोग इसको use करते हैं, companies में भी, तो it's a good idea कि आप VS Code ही use करो, और जो options है आपके पास, वो है sublime text, webstorm, या फिर जो भी आपके पसंद का editor है, अब ये रहा visual studio code का, मेन इंटरफेस यहां से मैं क्लिक कर रहा हूं ओपन फोल्डर के ऊपर डेक्स्टॉप पोजनेट और यह मैंने ओपन कर लिया फोल्डर अब यहां पर मैं सबसे पहले दो फाइल्स बनाऊंगा सो मेरा पहला जो फाइल होगा इसका नाम होगा इंडेक्स डॉट एचटीमल यह एचटीमल फाइल होगा मैं यहां पर एक और फाइल बना रहा हूं यह जावास्क्रिप्ट फाइल होगा मैं एक फोल्डर बना रहा हूं इमेजेस बोलकर जिसमें मैं इमेजेस ऐड करूंगा जो भी मेरे प्रोजेक्ट में रिक्वाइड होगा ठीक है अब यहां पर एक चीज आपको और करनी पड़ेगी अगर आप यह इस कोड यूज कर दो तो आपको एक लाइफ सर्वर की फंक्शनालिटी चाहिए कैसे मिलेगा इस आइकन पर क्लिक करना है और यहां पर just click on install और वो install हो जाएगा इसको चलाना कैसे है मैं आपको थोड़ी दिर में दिखाता हूँ अब सबसे बहले हम क्या करेंगे यहाँ पे boilerplate code आड़ करेंगे इस अगर आपने कभी भी HTML में थोड़ा भी code किया होगा, तो I guess आपको idea होगा मैं क्या कर रहा हूँ, this is posenet demo, यहाँ पे हमारा body tag होगा, और body tag में फिलहाल बस लिखा हुआ है, H1 के अंदर, posenet demo, ठीक है, और यहाँ पर what I will do is, कि टाइटल के अंदर मैं एक स्क्रिप्ट आड कर रहा हूं और इसका src है sketch.js ठीक है और यहां पर मैं बस एक लाइन लिख रहा हूं alert hello world जावास्क्रिप्ट में यह कोड लिखने से एक पॉप अप निकल कर आता है है और अब मैं इसको रन करूंगा इसको इस बेसिक सेटअप अब इस कोड को रन करेंगे अ तो रन करने के लिए बहुत सिंपल है आपको बस राइट क्लिक करना है और यहां पर लिखा हुआ है ओपन विद लाइट सर्वर ऑल्ट एल या ऑल्ट ओ तो यह सेम काम हो जाएगा क्लिक किया और यह देखो पॉप अप निकल किया और यह हमारा वेब पेज सो हमें जो सेट अप चाहिए था वह रेडी है है तो गाइस जैसा कि मैंने आपको थोड़ी देर पहले बताया कि हमें इस पर्टिकुलर प्रोजेक्ट को करने के लिए दो जावा पहली जो लाइब्रेरी है, वो machine learning के domain में है, और उसका नाम है ml5.js, जिसके बारे में थोड़े बाद में बात करूँगा, जो second library है, उसका नाम है p5.js, और वो आपके screen पर है, और ये library बहुत important है, honestly आप इसके बिना भी ये project बना सकते हो, but आप notice करोगे कि इस library को use करने से आ� पी 5 जेस क्या है तो इट्स अ लाइब्रेडी फर्स्ट अब ऑल ठीक है लाइब्रेडी मतलब जिसके अंदर बहुत सारे फंक्शंस पहले से हैं अब क्या है यह लाइब्रेडी यहां पर एक लाइन में इंटरडक्शन दिखा हुआ है पी 5 वर्ड आर्टिस्ट डिजाइनर्स एडुकेटर्स पिगनर्स एन एनीवन एल्स अब मैं आपको एक शॉट हिस्सी बताता हूं पी 5.ज इसका सो एक सॉफ्टवेयर है जिसका नाम है प्रोसेसिंग अगर आप लोगों में से किसी ने भी Arduino Board के ऊपर काम किया होगा तो शायद आपको Processing के बारे में पता होगा So Processing actually original project है जिसके उपर P5.js based है So Processing 2001 में आया था और Processing का भी काम same था ये एक language था जिसको use करके creative coding हो सकता है Creative coding क्या होता है? Designs वगेरा create करना अगर आपने कुछ बहुत बढ़िया animations वगेरा देखे होंगे कुछ YouTube channels पे तो आप उनको create कर सकते हो using this particular language Processing अब जो processing बना हुआ था यह java में बना हुआ था java में क्यों बना था क्योंकि 2001 में apps वगैरा publish करने का जो तरीका था वो java में सबसे easy था तो they thought कि java को base बना करके हम इस language को create करते हैं but 2015 में लोगों ने realize कि websites बहुत जादा use होने लग गई है and then they thought कि हमें processing को किसी तरीके से java script में convert करना चाहिए so that हम इसको website में डाल करके use कर पाएं and then came p5.js, so in short कहानी यह है, कि processing जो language था, उसका javascript counterpart is p5.js, ठीक है जो काम आप processing से कर सकते थे desktop app में, वो same काम आप कर सकते हो, p5.js से web browser के अंदर, ठीक है I hope इतना introduction आपके लिए काफी है अब इस library से क्या कर सकते हो मैं आपको हलका सा hint इस वीडियो में दूँगा, बाकि आप लोग खुद से explore कर सकते हो कि इस library को हमें import करना है import करने के multiple तरीके है सबसे easy तरीका है CDN तो मैं क्या कर रहा हूँ मैं ये CDN path copy कर रहा हूँ और अपने code में वापस जा रहा हूँ और अपनी जो javascript file है उसके उपर paste कर रहा हूँ क्योंकि मेरी file जो है वो इसको use करेगी ठीक है इसलिए important है कि ये file उपर है अब मैं आपको बताता हूँ एक basic p5.js code में क्या होता है तो एक पीफाई जेस कोड में दो चीजें होती हैं दो फंक्शंस होते हैं ठीक है जो पहला फंक्शन होता है उसका नाम होता है सेट अप यहां पर आप वह लिखते हो जो सेट अप रिलेटेड एंड फिगरेशन रिलेटेड ठीक है जन्मी आप जो पूर्ण यहां पर लिखते हो वह होता है क्रिएट कैनवस और आप कैनवस का साइज बताते हो ठीक है लो आपने बोला चार सुबह चार सुपिक्सल का मुझे कैनवस चाहिए ठीक है अब आपका सारा काम इसी canvas के ऊपर आप करोगे उसके बाद जो second function होता है वो होता है draw और इसी के अंदर आप चीजों को draw करते हो, जो भी आपको draw करना है, अगर आपको shapes draw करने हैं, तो आप यहीं पर draw करोगे, अगर आपको images लानी हैं, या videos play करवाने हैं, कुछ भी इस तरह का काम आप draw function के अंदर करोगे, ठीक है, तो अब हम लोग एक-एक करके, कुछ basic examples के थ� यूजिंग पीफाइड जेस तो हमें सबसे पहले क्या करना है कि हमें अपने जो कैनवस बनाएं अभी तो इस पॉइंट पर कुछ दिख नहीं रहा है हम इस कैनवस को एक बैकग्राउंड कलर देंगे यूजिंग बैकग्राउंड और कलर देते 200 यह जाएगा काइंड ऑफ एक ग्रेश शेड स्वगं मैं वापस जाऊं यह इन सीधे से माइक एनवेस इसका साइज आप बड़ा लाइक दिस थोड़ा ज्यादा ही बड़ा हो गया 800 बाइफ 500 पिक्सेल्स कर लेता है या दिस आर कैनवस अब मैं आपको सबसे पहले एक पॉइंट बनाकर दिखाता हूं ठीक है देखो पार्ट इसकी एक लाइब्रेरी है जिसका मतलब है कि हर चीज के पर मेरा जो पॉइंट है वह 200 कम 200 पर है बेसिकली यह पिक्सल एक वाइट वन रेट पर अ यह हमें पॉइंट बनाकर देगा, and you can see, यह रहा हमारा point, I hope आपको दिखाई देना है, बहुत ही चोटा सा है, but this is the point, ठीक है, अब मैं आपको एक line बनाकर दिखाता हूँ, line बनाने के लिए हमें क्या करना है, कि line function को call करना है, और आपको दो set of coordinates देना है, ठीक है, so मेरा पहल वापस गए, run किया, और ये रही हमारी line, ठीक है, that's it, next, हमें triangle बनाना है, triangle बनाना भी बहुत आसान है, हम triangle function को call करेंगे, इस बार आपको 3 coordinates देने है, ठीक है, तो हम दे रहे हैं, 100, 200, ये 1 point हो गया, और हम दे रहे हैं, 300, 400, है और हम दे रहे हैं 150 कम आफ फॉर फिटी लेट्स इस ट्राइंगल बनता है एन यू कि इस ट्राइंगल ठीक है जिसके तीन अलग-अलग और नेट्स करवा दिया राइट सिंपल है अभी तक नेक्स्ट हमें रेक्टांगल बनाना है रेक्टांगल बनाना बहुत सिंपल है आपको इनिशियल पॉइंट देना होता है लेट्स हमारे गेस में जो इनिशियल पॉइंट है वह है आफ 500 कि कॉमा 200 और फिर मुझे विड और हाइट बताना रेक्टांगल का अगर विड और हाइट बराबर है तो स्क्वेयर बनेगा अगर अलग-अलग है तो रेक्टांगल बनेगा मालों कि मुझे अभी 100 बाई 100 का ही रेक्टांगल चाहिए सेव किया वापस है एन यू कि यह मेरा स्क्वेयर है रेक्टांगल दोनों साइड बराबर है स्क्वेयर अगर मैं इसको थ्री अंदर कर देता थी अंदर नहीं कर देता तो यह ऐसा दिखाई देता ठीक है अब मैं आपको जल्दी से दिखाता हूँ, सर्कल बनाना, सर्कल बनाना भी बहुत सिंपल है, आपको एक center point बताना होता है, यहाँ पे जो function होता है, वो होता है ellipse, यहाँ पे x, y coordinate बताना है, let's say मैंने बोला 600, 300, width है 10 का, और height भी है 10 का, तो basically width और height बराबर है, तो सर्कल बने बहुत ही चोटा हो गया actually 10, इसको 100 कर लेते हैं, इसको भी 100 कर लेते हैं, ये रहा हमारा rectangle, देखें, and that is how you can easily create shapes using p5.js, so guys next हम लोग focus करेंगे दो चीजों के उपर, stroke and color, so मैंने अभी इस point पे 5 circles बनाए हैं, मेरे canvas के उपर, और मेरा जो code है, वो कुछ ऐसा दिखाई दे रहा है आउटलाइन ठीक है इस आउटलाइन को आप बदल सकते हो एग्नीश विवेश्व आपको सिंपली यह करना है फॉर फंक्शन को कॉल करना है फॉर कॉल करके आप यह कर सकते हो आप कलर डिसाइड कर सकते हो कि आप कौन से कलर का आउटलाइन यह उपासिटी के लिए होता है, इसको मैं अभी यूज़ नहीं कर र इसके नीचे, इस statement के नीचे जितने भी आप circles बनाओगे या shapes बनाओगे, उनका जो stroke color है, वो red हो जाएगा, see, like this, ठीक है, but अगर आपको अलग-अलग color चाहिए है, तो आप copy कर सकते हो, और फिर यहाँ पर paste कर सकते हो, और यहाँ पर let's say मैंने कर दिया इसको 0, और इसको मैं अगर मैं चाहूँ तो फिर मैं लास्ट में यहाँ पर आ करके I can write stroke के अंदर 0,0,255 and now लास्ट में जितने भी statements इस stroke के बाद आ रहे हैं वो सब blue color के हो गए ठीक है similarly आप opacity value भी दे सकते हैं जिरो से लेके 255 के बीच में ठीक है जितना 255 की तरफ जाएगा उतना जादा opaque होगा और जितना 0 की तरफ जाएगा उतना transparent होगा यू केंसी रेड है लेकिन एकदम भी दिख नहीं रहा है 100 करने पर थोड़ा सा ज्यादा दिखाई देगा और यू केंसी रेड है लेकिन एकदम भी दिख नहीं रहा है लेकिन एकदम भी दिख तो आपने सबसे ऊपर लगाया stroke weight, नीचे के सारे shapes के ऊपर वो apply हो गया, और सारा का stroke weight बढ़ गया, ठीक है, I hope आपको यह भी चीज समझ में आ रहा है, next होता है fill color, fill color में आप क्या करते हो, under color fill करते हो, और उसके लिए हमारे पास एक function है, fill, so fill में भी आप 4 values देते हो, RGB plus opacity value, so अब मुझे खुद नहीं पता कि कौन सा कलर है, तो या ये brown color है और brown color यहाँ पे fill हो गया, ठीक है, तो one more thing that you can do is, यहाँ पे आप opacity set कर सकते हैं, लेट से आपने 100 set किया, और ये थोड़ा सा lighter shade में चला गया, अगर मैं यहाँ पे 10 करता, बहुत जादा light हो जाएगा, और ऐसा है तो नाओ गाइस आईट एल वेरी इंपॉर्टेंट फीचर ऑफ पी 5 जेस तो यहां पर मैंने आपको बताया दो फंक्शंस होते हैं सेट अप और ड्रॉप जिसके अंदर हम अभी तक काम कर रहे थे अब इन दो लोग का बहुत स्पेसिफिक काम है सेट अप का कोड को रन करते हो तो सेट अप फंक्शन का अंदर का जो कोड है वह सिर्फ एक बार रन करता है वेराज ड्रॉ फंक्शन के अंदर का कोड इनफानाइट लूप के अंदर रन करता है हमेशा सो अगर आपने कभी Arduino प्रोग्रामिंग लैंग्विज में काम किया होगा Arduino एक Micro Controller Board होता है शायद आपने काम किया हो वहाँ पे भी एक्साक्टली ऐसा ही सेट अप होता है सो प्रोसेसिंग और Arduino बहुत सिमिलर हैं सो मैं console लॉग कर रहा हूँ JavaScript में आप console लॉग कर सकते हो एडिट फंक्शन और ड्रॉक इंदर मैं लिख रहा हूं ड्रॉक फंक्शन ठीक है सेव किया वापस गए और इंस्पेक्ट पर गए और कॉनसोल पर गए और मैंने फिर से रिलोड किया इस पेज को यह देखो फेट फंक्शन सिर्फ एक बार प्रिंट कर रहा है लेकिन प्रॉब्लम इसलिए लूप में चलते जा रहे हम इस प्रॉपर्टी का यूज करके ब तो मैं क्या कर रहा हूं मैं यहां पर एक कोड लिख रहा हूं और वह कोड यह है कि मुझे फिल करना है 255 से मतलब वाइट कलर से और मैं एलिप्स बना रहा हूं और यह लूप में एलिप्स बनता जाएगा और मैं कहां पे लूप कहां पे एलिप्स बना रहा हूं करंटली मा� और अब देखो गाइस यह कोट क्या करेगा यह देखो जब तक हम यहां पर घूमते रहेंगे यह स्ट्रक्चर बनता जाएगा यह देखो जितना धीरे-धीरे घूमों के उतना इस तरह का स्ट्रक्चर जितना तेजी से घूमों के उतना इस तरह का स्ट्रक्चर एंड इतना इजली आप डिजाइंस क्रिएट कर सकते हो इन फैक्ट अगर आप चाहो तो कलर एंड कोट कर सकते हो यह फंक्शन है जावास्क्रिप्प में जो रैंडम नंबर जनरेट करता है वह ट्विक एंड विश्व अ कि हम R value गेट रैंडम आर्बिटरी में इस तरीके से मंगा सकते हैं जी वैल्यू और बी वैल्यू और अब मैं फिल कर रहा हूं यूजिंग आर जी बी वापस गए और ये देखो गाइस कितना इजली आप डिजाइन्स प्रियेट कर सकते हो चीज पीफाइट जेस से इमेजेस और वीडियोस को कैसे आप अपने वेब पेज पर ला सकते हो, सो मैंने क्या किया है, मैंने अपने इमेजेस फोल्डर में तीन इमेजेस आड किये हैं, सिगार, शारुक और spectacles.png, ये तीन इमेजेस हैं, इनको मैं यूज़ करूँगा आगे वीडियो में, कि जब भी आपको variables बनाते हो, आपको दोनों functions के बाहर बनाना होता है, global variable, और JavaScript में variables बनाने के लिए आप let keyword का यूज़ करते हो, तो मैंने let's say, शाहरुक underscore img बोलकर एक variable बनाया, ठीक है, सबसे पहले आप क्या करोगे, setup में image को load करोगे, using load image function, ठीक है, यहाँ पर आपको path बताना होता है, path मेरे case में है images flash शाहरुक dot png, बाकि यह successful callback और failure callback है, इसकी बहुत ज़रूरत नहीं है इस point पर, और यह जो image हमने load किया, इसको हम लोग शाहरुक underscore img में store कर लेंगे, ठीक है, और अब बस मुझे क्या करना है, draw में इस image को load करना है, बहुत ही simple है, कैसे करेंगे हम, हम image function को call करेंगे, यहाँ पे हमें बताना है कौन सा image हमें load करना है, शाहरुक underscore img, किस pixel position पे load एंड आप सेट सेव किया एंड इस द इमेज लोड हो गया ठीक है अब आपने काफी सारे मैनिपुलेशन किया है शारुख खान का सांप बनाते हैं सांप कैसे बनाते हैं बहुत सिंपल है आप यहां पर लिख दो माउस एक्स माउस वाइड सेव किया वापस गए और यह शारुख खान का सांप है अतलाब जो भी कर सकते हो आप तो वाइन और इस ओके सुधार टिजाओ यू लोड इमेजेस नेक्स्ट हम लोग सीखेंगे कि कैसे आप वेबकैम का फीड अपने ब्राउजर में ओपन कर सकते हो अब ऑनिस्टी थोड़ा डिफिकल्ट काम होता है अगर आप स्क्रैट से करने का ट्राइक करो बट पी 5 जेस यह काम बहुत इजी कर देता है आपको बस क्या करना है एक वेरिबल बनाना है जिसका कि उस भी नाम रख सकते हो यहां पर आपको क्रिएट कैप्चर फंक्शन को पॉल करना है और आपको टाइप बताना है टाइप है वीडियो कॉलबैक देनी के अभी हमें कोई जरूरत नहीं है और यह जो वीडियो कैप्चर हो रहा है इसको कैप्चर वेरिबल में स्टोर कर रहे हैं और अब बस हम यह करना है कि हमें इमेज को कॉल करना है सेम फंक्शन जो डिस्प्ले होने लगेगा कमा जी रो और यहां पर हाई दे सकते हैं बिट दे सकते हैं 800 और 600 टेज किया और अब हम वापस जा रहे हैं यह देखो गई इस दिस दौर तो यह जो दिखाई दे रहा है यह हमारा दो अलग-अलग फील्ट तो आप यहां पर एक कोड लिख सकते हो, capture.hide, और यह hide हो जाएगा, यह देखो, अब बस एक ही आ रहा है, which is this, right, so that's it, हम लोग आज जो भी project में करने वाले थे, उसमें हमें इतना ही P5.js की जरूरत है, मैंने आपको एक हलका से introduction दे दिया, अब अगर आपको और ज़ादा स 100-150 pages की getting started with p5.js इनकी official website पे इस book का नाम लिखा हुआ था और बढ़िया book है starting के लिए अच्छी book है आप ये पढ़ सकते हो ठीक है so अब p5.js हमें आ गया है अब हम लोग move कर रहे हैं towards एमिल फाइड जेस तो गाइस अब हमने पीफाइड जेस के ऊपर थोड़ा काम कर लिया है अब हम लोग अपनी मेन लाइब्रेरी के ऊपर मूफ करते हैं डाट इस एमिल फाइड टॉट जेस ठीक है यही वह मेन लाइब्रेरी है जिसके अंदर हमें वह सारे और इसके home page में बहुत बढ़िया उन्होंने लिखा है friendly machine learning for the web a neighborly approach to creating and exploring artificial intelligence in the browser so अभी तक आपने machine learning में पढ़ाई किया होगा तो आपको पता होगा कि mostly आप जो models बनाते हो उनको train करते हो उनका evaluation करते हो ये सब कुछ offline होता है data scientist के machine पे और most likely जो language आप use करोगे वो या तो python होगा या तो r होगा सबसे पॉपुलर प्लैटफॉर्म, पुरी दुनिया में, सौफ़वेर में जो है, वो है web, as in browser, क्योंकि यहाँ पे sharing बहुत easy हो जाता है, एक URL share करके, आप किसी और के machine पे रखे हुए चीज़ को, अपने machine पे देख सकते हो, right, तो लोगों ने सोचा कि यह same approach अगर हम machine learning में भी लेते हैं, तो फिर बहुत easily चीज़े share हो सकती है, and that is why Google, जो leading AI research company है दिनिया की, according to me, उन लोगों ने अपने सबसे पॉपिलर डीप लर्निंग फ्रेमवर्क टेंसर फ्लो का एक जावास्क्रिप्ट वर्जन बनाया टेंसर फ्लो डॉट जेस के नाम से शायद आपने नाम भी सुना होगा इस द वेब पेज ऑफ डाट लाइब्रेरी अब इस लाइब्रेरी में प् तो थोड़ी सी problem होती है इस library को implement करने में तो ML5 ने क्या किया कि उसने tensorflow.js को उठाया और उसके उपर कुछ और functions लिख दिये मतलब अब आपको deep level पे चीजों को जानने की जरूरत नहीं है आप ML5 के models और functions को use करके tensorflow.js को use करोगे काम tensorflow.js की करेगा बट आप बातचीट जो करोगे tensorflow.js से वो आप ML5 के थूँ करोगे ठीक है why ML5 ML5 aims to make machine learning approachable for a broad audience of artists, creative coders and students.
The library provides access to machine learning algorithms and models in the browsers, building on top of, this is an important line, building on top of TensorFlow.js with no other external dependencies. So काम exactly TensorFlow.js ही कर रहा है machine learning वाला, यह बस उपर से एक wrapper लगा हुआ है जिससे चीज़े थोड़ी आसान हो गई. So अगर आपने deep learning में काम किया होगा तो Keras बोलके भी एक library है.
वह एक्साइट से गांव करता है कि इंटरनली वह टेंसर फ्रॉट और जैसे बात करता है और टेंसर फ्रॉट और जैसे नहीं टेंसर फ्रॉट से बात करता है और आप के राज से बात करते हो ठीक है तो आईएस इतना इंफॉर्मेशन इस पॉइंट आपके लिए काफी है अगर आप जाते हो इस लाइब्री में तो यहां पर आपको बहुत सारे अलग-अलग मॉडल्स मिलेंगे इसी इमेज या फिर किसी वीडियो के अंदर या लाइव वीडियो के अंदर जो यूमन बींस खड़े हैं उनका पोस्चर डिटेक्ट कर सकते हो ठीक है बहुत ही पॉपलर हो गया है और बहुत काम की चीज है हमें सबसे पहले क्या करना होगा हमें इस लिंक पर जाना पड़ेगा गेटिंग सार्टिड और आपको यह कोड कॉपी करना पड़ेगा सुविधि और आप अपने उसके ऊपर आप इसको paste कर दोगे, like this, हो गया, अब हम लोग start कर रहे हैं हमारा post net वाला काम, अब मैं थोड़ा सा documentation का help लोगा, so यहाँ पे देखा हुआ है quick start के लिए, आपके पास इन्होंने एक basic code बना के दे रखा है, आपको सबसे पहले ml5.postnet पे video भेजना होता है, जो video आप record कर रहे हो, या फिर आपके बास जो भी video है, और आपको यह भेजना होता है, model loaded बोलके, keyword भेजना होता है, model loaded actually keyword नहीं है, it is actually a callback function इसके अंदर जो भी लिखा होगा वो एक्सेक्यूट हो जाते हैं ठीक है तो देखो हम क्या कर रहे हैं हम वापस जा रहे हैं और हम यहां पर const posnet बोलके एक variable बना रहे हैं const का मतलब एक ऐसी चीज जो थ्रूआउट दा पोग्राम कॉंस्टेंट रहने वाली है उसको आप const डि और यहाँ पे आप प्रोवाइड कर रहे हो अपना वीडियो जिसका नाम है capture और model loaded बोलके आपने एक callback function का नाम दे गया यहां पर आप उसको और यहां पर आप लिखोगे और यहां पर कुछ भी नहीं है यहां पर आप कंसोल में लिख सकते हो मॉडल आज लोडेड ठीक है सेव कि इसको और लाइट पर दोबारा अब दिजा स्पाइड प्रॉब्लम हमें कि पोजनेट के आगे वैल्यू देना पड़ेगा यह जावास्क्रिप्ट जो नया आया है उसमें इनिशियल आपको कुछ वैल्यू बढ़ता है वाइट क्रिएटिंग कॉन्स वेरिबल्स और अब देखते हैं या इच्छी इस मॉडल है लो इशूज हो रहे हैं उसके लिए हम क्या करते हैं इसको लेट ही बनाकर रखते हैं इस ओके फाइड नहीं बनाने से पॉब्लम नहीं है कौन बनाने से बस कभी भी चेंजेस नहीं होंगे अ नाव ले यहां पर बता रहे हैं, model has loaded, यहां तक ठीक है, I will also switch my camera, मैं यह camera use नहीं कर रहा, पता नहीं, इसमें कुछ problem है, मैं integrated camera use कर रहा हूँ, and I will reload this, yeah, so somehow there is a lag in my feed, देखना पड़ेगा क्यों ऐसा हो रहा है, और अब हम लोग आगे move करते हैं, है ओके गाइस तो इन्हें रिस्टार्ट लेना पड़ा बदल पता नहीं मेरा मशीन विशेष कर रहा था और लाग आ रहा था वीडियो फील्म जो अभी नहीं है आपको दिखाई दे रहा होगा तो हमें क्या करना है इतना बुट लिखने के बाद अब आपको लिखना होता है आपको एक अच्छी इवेंट लिस्टर बनाना जावास्कृत में आप इवेंट लिस्टर बना सकते हो और आप इवेंट लिस्टर बनाने के टाइम में एक कॉलबैक फंक्शन देते हो इस पॉलिट फॉर्ट नाम है रिसीव पोजेस बेसिकली फॉर्ट ठीक है कि अगर यह चीज सही से काम करती है यह चीज जब होगी तो इस फंक्शन के अंदर टॉप एक्सीव होगा ठीक है और यहां पर मैं यह फंक्शन मना रहा हूं फंक्शन रिसीव पोजेस और यहां पर आपको पोजेस मिलेगा ठीक है और वह पोजेस में आपको दिखाता हूं कैसा है तो बेसिकली जा रहा है कि अगर कैमरा पर कोई भी यूमन बिंग आता है या मल्टिपल यूमन बिंग्स आते हैं तो उनके पोजिशन एजिन पोजिशनिंग का पोस्चर का डाइटर मेरे पास आएगा ठीक है तो आईएस आपको थोड़ा मैंने ऑलरी बताया भी था यहां पर जो मॉडल है आपके पास यह आपके बॉडी के सेवनटीन पॉइंट्स डिटेक्ट करते हैं ठीक है सेवनटीन तो आप जब इन पुट में एक स्केलेटन इमेज देते हो तो इन पुट में एक स्केलेटन देख रहा है तो वह आउटपुट में 17 पॉइंट्स आपको निकाल करेगा और वह सेवेंटी पॉइंट्स क्या होंगे दो आखें कान नाक शोल्डर नेक और बाकी चीजें जो भी होती है और वह पिक्चर में किस पिक्सल पर है वह इनफॉर्मेशन होगा वह कॉर्डिनेट का इनफॉर्म और उस एरे में information है इस posture का ठीक है देखो अगर मैं एक particular में घुसूं तो you can see ये इस एरे में सिर्फ अभी एक human being का posture आ रहा है ठीक है अगर कोई और अगर आता इस camera के सामने तो उस एरे के अंदर दो items होते हैं अभी जैसे यहाँ के सिर्फ zero का item है one भी हो जाता two भी हो जाता अब इस एक skeleton में आपको दो चीजें मिलेगी, यह जो एक skeleton है, यह actually एक javascript object है, या python वाले अगर आपको हो, तो इसको आप dictionary की तरह समझ सकते हो, जो poses मिल रहा है आपको, यह जो poses है, यह python list की तरह है, array बोल सकते हो, और इसके अंदर हर item एक dictionary है, ठीक है, python की dictionary की तरह आप समझ पहले मैं आपको pose बताता हूँ so pose में आपको pose फिर से एक object है ठीक है फोस्ट फिर से ऑब्जेक्ट है और उस ऑब्जेक्ट में मल्टिपल की वैल्यू पेस ठीक है जैसे कि की पॉइंट्स एक की है और उसका वैल्यू कुछ है की पॉइंट्स को भी थोड़ा बात में डिस्कस करेंगे उसके बाद देखो हर आइटम अलग से डिस्प्ले� ठीक है अब मुझे क्या करना है मुझे नोज डिटेक्ट करवाना है कैसे डिटेक्ट होगा बहुत सिंपल है देखो हम क्या करेंगे हम यहां पर एक वेरियल बनाएंगे लेट नोज एक्स कॉमा नोज वाइड सो हम नोज का जो एक वाइड और उनको हम यहां पर स्टोर करेंगे अब यहां पर हम एक ओर लिखेंगे कि इस पोसिद अ दॉट लेंथ इस ग्रेटर देन सीरो मतलब एट लीस्ट एक स्केलेटन अगर पिछल के अंदर है तो ही यह कोड एक्सएक्यूट करना है और पोर्ट में क्या इसकी करना है अब हमें सिंगल पोस बोलकर वेरिपल बनाना है अब यह फिलहाल एक सिंगल स्केलेटन का इंफॉर्मेशन अब हमने एक्सट्रैक्ट कर लिया और उस सिंगल पोस के अंदर उस single pose के अंदर, हम zero में आ चुके हैं, हमें जाना है nose के पास, नहीं, हमें पहले जाना है pose के पास, तो हम लिखेंगे dot pose, फिर हम लिखेंगे dot nose, अब हम nose के अंदर आ गए, और nose के अंदर हमें लिखना है dot x, और यह हो जाएगा हमारा nose x, basically हम traverse कर रहे हैं, पूरा का पूरा, json जो structure है, उसको हम traverse कर रहे हैं, copy paste, यहाँ पे आ जाएगा y, और यहां पर आ जाएगा नोज वाइट ठीक है और इतना करके मैं प्रिंट कर रहा हूं नोज एक्स पर मां नोज एक्स प्लस नोज वाइट सिंगल पोस्ट स्पेलिंग गलत है यहां पर आएगा सेसाई एन एसाई एन और सब्सक्राइब कर सकते हैं और ड्रॉम इन प्लेट एलिप्स का एक्स होगा नोट का एक्स और वाइड होगा नोट का वाइड होगा थर्टी आइट भी होगा थर्टी और इसको हम फिल कर रहे हैं लेट से दूसरी फाइड 0 कमा जी रेड सेव किया वापस गए, nose मेरे left eye में क्यों आ रहा है, अजीब है, you will have to see, maybe image थोड़ा darker है, एक बार मैं video pause करके check परतों क्या issue है, so yeah, yeah guys, बहुत stupid error था, जिसकी वज़े से problem आ रहा था, हमने ये single pose variable use किया, बस इसको declare नहीं किया, तो मैंने क्या किया, मैंने उपर single pose declare कर दिया, ठीक है, this is single और यहां पर आप एक काम कर सकते हो, poses.pose में single pose डाल सकते हो, ठीक है, और फिर आपको यहां पर pose लिखने की जरूरत नहीं पड़ेगी, आपको बस एक बार यह JSON structure सही से समझना है, उसके बाद आप आराम से इसको use कर पाओगे, going back, यह रहा है हमारा clear cut, nose के उपर आ रहा है, अ� और यहां भी लिख सकते हो लेफ्ट आई और अगर वापस जाओ तो यह पूरा टाइम आपको ट्रैक करके आपके लेफ्ट आई के जासको अच्छी देगा ठीक है यू के लोग से आफ टू मोर वेरियल्स फिर वांट यहां पर हम क्रिएट कर सकते हैं लेट आप आर आई एक् और यहां पर आप क्या कर सकते हो इसको वापस नोज ही रहने देते हैं और इसको भी वापस नोज ही रहने देते हैं और इन कोड्स को कॉपी करते हैं दो बार और इसका नाम रखते हैं आराई एक्स और इधर आ जाएगा राइट आई और इस पूरे कोड को पॉपी करें यहां पर अगर हम पेस्ट कर दें यहां पर आ जाएगा एल यहां पर आ जाएगा लेफ्ट और यहां पर वो इस प्रस्ट फॉर इस एलाइव एक्स आराइव एलाइव वापस गए और ये रहा है guys हमारा, दोनों iSquare पर track कर रहे हैं अपने टाइम, ठीक है? तो I hope आपको यहाँ तक सब कुछ समझ में आ रहा है, clearly, यहाँ तक कोई problem नहीं है, and this is looking pretty cool, sort of चश्मा अब मैं आपको दिखाता हूँ कि आप सारे points को कैसे display करना सकते हो, so अगर आप फिर से देखो, तो pose के अंदर ये सारे keys हैं, और एक key, key points भी है, और key points में देखो 17 items हैं इसमें इटेंस है और हर आइटम एक बॉडी पार्ट तो पार्ट इस नोए उसका पॉइंट और कॉन्फिडेंस फॉर सो बेसिकली यह इनफॉर्मेशन नीचे था अगर आपको एक साथ चाहिए तो वह की पॉइंट के अंदर आपको मिलेगा ठीक है तो यहां पर ऊपर जाकर एक और वेरीबल बनाना पड़ेगा अ इन फैक्ट अब ये पूरा चीज रेडेंडेंट हो गया तो मैं एक काम करता हूँ ये पूरा कोड में हटा रहा हूँ ये भी कोड में हटा रहा हूँ और यहाँ पे मैं लिख रहा हूँ key points is equal to poses 0 dot हमें जाना है pose और फिर pose के अंदर already key points है तो हमें actually कुछ करने की जरूरत नहीं है यहाँ पर single pose के अंदर ही key point आ रहा है यह देखो यह जो pose है यह हमारा single pose है वहीं पर हमारा key points मिल जाएगा तो हमें एक बास नीचे जाना है और यहाँ पर हमें loop चलाना है for let i equal to 0 i less than single pose dot key points dot लेंथ ठीक है 17 बार यह लुट चलेगा और यहां पर आ जाएगा आई प्लस और हर बार हम लूप के अंदर क्या करना है हमें लूप के अंदर इलिप्स के अंदर एक्स में देना है सिंगल पोस की पॉइंट्स इस एरे में घुसना है इस एरे में घुसना और फिर उसके आगे square bracket में i, तो हम अब ये 0, 1, 2, 3 के अंगर गुश गए, उसके बाद position में गुशना है, dot position, और position से मुझे निकालना है, dot x, ये पुरा code है, और इसी को मैं, कॉपी करके यहां पर डाल रहा हूं और विडिट और हाइट हमारा बराबर है इस दिस इस दो लेट्स यह काम कर रहा है यह फट गया और यहां पर एरर है बोल रहा है कैनोट रीड प्रॉपर्टी पॉइंट्स ऑफ अंडिफाइड उसका रीजन यह है तो हमें यहाँ एक code लिखना पड़ेगा कि if single pose is available then only do this, cut, paste, save और यह सारे points थोड़े बड़े हो गए, इसको 20 करते हैं और आप देख सकते हैं कि य आपको एक बार दूसरे कैमरा के सामने खड़े लिखाता हूं कि सब्सक्राइब करना होगा मैंने इसमें यह नाम है और रिलोड कर दिया यह रहा है यह सारे ठीक है तो यह बार फाइड पॉइंट्स ऑन व्यक्ति पॉइंट्स यह चाहिए यह अब इसको टैटल को टच नहीं किया एक बार देखिए स्केलेटन में क्या है स्केलेटन इज एन एरेओफ यहां पर दो चीजें हैं और वह दो चीजें क्या है यह जीरों टाइटम में एक ही चीज है क्योंकि अभी मैं पूरा दिखाई नहीं दे रहा हूं अगर मैं यहां से सेलेक्ट करूं और रिलोड करूं अ तो मैं सामने वाला camera यूज़ कर रहा हूँ, यह वाला camera, अब अगर मैं किसी एक पो पकड़ो, और यहाँ से मैं skeleton में जाओं, तो यहाँ पे 8 different items दिखाई दे रहे हैं, और हर item क्या है, हर item खुद एक array है, so basically skeleton is a 2D array, जहाँ पे हर item is an array, so अगर आप इसको open करो, तो 0 से लेके 8 ठीक है और 0 है left hip, 1 है left shoulder so basically इन दोनों points को connect करने का तरीका है ठीक है फिर similarly आप 1 पर जाओ तो left elbow और left shoulder को basically I guess इन दोनों points को connect नहीं sorry इन दोनों points को connect करने का ये line है ठीक है line नहीं है basically coordinates है so अगर आप किसी एक में घुसो तो फिर से same चीज है part का नाम position और confidence को हमें क्या करना है ध्यान से देखना है, बहुत simple है, हमें अपने code में जाना है, और सबसे पहले यहाँ पर हमें लिखना है, skeleton is equal to poses का 0.skeleton, और पिछली वाली गलती नहीं करेंगे हम, यहाँ पर हम skeleton बोलके variable भी बना लेंगे, अब देखो skeleton में, हमारे पास यह 2D array है, skeleton में हमारे पास यह 2D array है, ठीक है, अब इस 2D array में हम घुसेंगे, loop चलाएंगे, so हम यहाँ पे जा रहे हैं, और हम एक loop चला रहे है, for let j equal to 0, j less than skeleton dot length, प्लस अब हम हर बार क्या कर रहे हैं हम यहां पर मुझे क्या करना है मुझे लाइन ड्रॉव करना है लाइन ड्रॉव करने के लिए मुझे चार चीज़े चाहिए लाइन ड्रॉव करने के लिए मुझे एक्स वाइट ऑर्डिनेट चाहिए फर्स्ट पॉइंट का और एक skeleton के jth item में घुसूँगा, जो की पहली बार 0th item होगा, तो अब मैं यहाँ घुस चुका हूँ, 0 में घुस चुका हूँ, अब 0 खुद एक array है, तो मैं फिर से उससे 0 में घुसूँगा, 0 में घुसा मैं, और अब 0 में घुस करके मुझे क्या करना है, position में घुसना है, तो मैं पहला x coordinate, यह हो गया उसका y coordinate, और फिर मैं इस पूरे code को copy कर लूँगा, और यहाँ पर paste मार दूँगा, so यहाँ पर आ जाएगा 0 के बदले 1, और यहाँ पर भी आ जाएगा 0 के बदले 1, and that's the code guys, save किया, पापस गए, कि आधी दे कि स्केलेटन कनेक्टेड ठीक है कलर चेंज करना है आपको तो यहां पर आप लिख सकते हो इस लाइन के जस्ट ऊपर आप लिख सकते हो फिल 255 कमा जी रोग रेड कलर का ही हम लाइन ले रहे हैं कोड में कुछ प्रॉब्लम हुआ फिल 255 अगर हम ले तो आप इस प्रॉब्लम थी फिर नहीं कर सकते आप लाइन रॉकर सब्सक्राइब करेंगे शोट में डाल रहे हैं और वापस उसके लिए हम एक बार रिंडूस गो लाइफ एंड यह ठीक है अगर आपको वाइट चाहिए है तो आप यहां पर तीनों को प्रोफीट पाइट कर दो सेव वाइट है ठीक है अगर आपको थोड़ा सा तो बड़ा करना है अजय को प्रोटा करना लाइंस पर आपको बता है आप स्ट्रोक वेट यूज करोगे स्ट्रोक वेट मालों ने 5 पिक्सन का यूज कर लिया यहाँ थोड़ा सा funny है बट यहाँ इस विज़ ठीक है अब मैं आपको images impose करना सिखाता हूँ जैसे चेहरे पे अगर मुझे एक image लाना है शारुख खान का वो मैं कैसे कर सकता हूँ यहाँ गाइस बहुत easy है आपको सबसे पहले एक variable बनाना है जिसका नाम है actor underscore img शारुख नालिक के actor लिख रहे हैं, so that आप और actors भी try करो, तो नाम change करने की ज़रूरत ना पड़े, यहाँ पर आपको सबसे पहले load image function को call करना है, यहाँ पर आपको बात बताना है, images slash shahrukh.png, इस file का नाम है, और मैं सबसे पहले क्या कर रहूं, मैं इसको store कर रहूं in actor underscore image, अब मुझे क्या करना है, बहुत simple है, इस for loop के बाहर आकर के मुझे image function को call करना है, और यहाँ पे मुझे सबसे पहले बताना है कौन सा image मुझे display करना है, किस pixel पे मुझे display करना है, let's say मैं nose के उपर display कर रहा हूँ, तो मैं लिखूँगा single pose dot nose dot x coordinate, single pose dot nose dot y coordinate, विट कितना होगा इस एमेज का लेट से हंड्रेड बाइ हंड्रेड लेकर देखते हैं अब देखना यह ऑफिसली सही पोजीशन पर डिस्प्लेइन होगा सो इट वूट लुक लाइक दिस सी ऐसा दिखा रहे हैं सही जगह डिस्प्लेइन हो रहा तो उसको प्रोजेक्ट माइनस फिटी ऊपर की तरफ लेकर जाना है तो उपर आ गया प्रोबेबली सिस्टी रहेगा अब मैं यह आपको कर रहा हूं पर कुछ और लॉजिक लगाते इसको और परफेक्ट कर सकते हो और अब मुझे यह राइट साइड में भी let's say 40 कर देता हूँ मैं minus 40 या this is almost fine थोड़ा सा आप इसको और fine tune कर सकते हो या something like this so या अगर मैं आपकी तरह पाऊँ तो दिखना है या ठीक है आप चाहो तो इस तरह का कोट लिख सकते हो कि अगर आप कैमरा के पास आ रहे हो तो इमेज थोड़ा बड़ा होने लग जाए आप ये विट्थ और हाइट को बड़ा कर सकते हो और कैमरे से पीछे जा रहे हो तो चेहरा छोटा होने लग जाए तो इससे क्या होगा अभी जैसे ये constant size image है तो वो थोड़ा सा और realistic लगेगा जैसे Instagram पे filters होते हैं I'm sorry, Snapchat पे जैसे filters होते हैं आप एक last काम करते हैं वो है thug life वाला जैसा मैंने आपको demo video में दिखाया था उसके लिए भी कुछ खास करना है आपको पहले मैं आपको चश्मा पहना के दिखाता हूँ so यहाँ पे let specs, smoke और यहाँ पे हम लिख रहे हैं specs is equal to इस function को copy करते हैं copy और इस फाइल का नाम है specs.png specs.png मैं एकदम नीचे जा रहो और मैं यहां पर लिख रहा हूं स्पेक्स मैंने शारुक्ष वाला इमेज अटा दिया और थोड़ा सा बड़ा है यह तो इसको हम लोग थोड़ा सा छोटा कर सकते हैं लाइक 80 बाई 80 सेव या बिस फाइन बस थोड़ा सा मैं नीचे लेकर आना पड़ेगा तो हम माइनस 40 कर र फिफटी या और थोड़ा सा हमें इस साइड से भी कम ही चाहिए है तो थर्टी पाइप बट है या से यह चश्पा सही से लग जाओ और हमें वह नेक्स्ट चीज चाहिए इन और स्पीक इट ऑन कैमरा बट कैसे करना है बहुत ही सिंपल है हम लिखेंगे स्मोक इज इक्वल टू लोड इमेज यहां पर हम लिखेंगे इमेज इस सिगार टॉट पीएंज सिगार के नाम से सेव किया है नाइस और इसको कॉपी करेंगे और पेस्ट कर देंगे और देखते हैं यह कैसा दिखाई दे रहा है अच्छा ने चेंज तो किया नहीं यहां पर आएगा स्मोक सेव थोड़ा ज्यादा ही बड़ा है इसको प्रोब्ली हमें चाहिए ही नहीं, nose plus 20 चाहिए, क्योंकि nose के नीचे आएगा ये, 20 थोड़ा जादा हो गया, actually size भी थोड़ा बड़ा हो गया, 40 करते हैं, इसको half कर रहो हूँ size में, yeah, this is fine, I guess, थोड़ा सा इसको, कम height देते हैं, 10 का, yeah, इकदम perfect है अभी, that's it, I guess, yeah. इस प्रोजेक्ट आप थोड़ा बात करते हैं कि इस प्रोजेक्ट पर और कैसे इंप्रूव कर सकते हैं तो अब हम लोग एक काम करते हैं इस प्रोजेक्ट को डिप्लॉय करते हैं यह प्रोजेक्ट फ्रंट एंड बेस्ट बैक इंड जरूरत नहीं है इसमें तो आप इसको गिट हफ्ट पर डिप्लॉय कर सकते हैं ठीक है देखो मैं कैसे करके दिखाता हूं आपको सबसे पहले एक नई रिकॉजिटरी बनानी है लेट से इस रेपोजिटरी का नाम है posnet demo ml5.js तो यहाँ पर मैं लिख सकता हूँ a posnet demo built using ml5.js एक readme file आड़ कर लिया मैंने और यहाँ पर मैं एक नया folder बना रहूँ images बूल के रिप्लॉट एंडी यहां पर नियुक्ति देखने में अच्छी डिरेक्टी कर सकता था बट मतलब जिसके बट इस ओके यहां पर फाइल्स अपलोड कर रहे हैं हम लोग सो सबसे पहले मुझे इमेजेस अपलोड करनी है सो इमेजेस फोल्डर में सॉरी सबसे पहले फाइल्स लेकर ओपन यह तीनों फाइल्स अपलोड होगी कमेंट चेंजेस सो इमेजेस के अंदर फाइल्स आ गई और कुछ फाइल्स हमें चाहिए हैं वह यह दोनों है इंडेक्स और एक्सटीमल स्केच रॉट जेस और कोई फाइल्स अपलोड नहीं करने उसके रहे थे तो यह मेरा प्रोजेक्ट इस प्रोजेक्ट अब हम क्या कर सकते हैं सेटिंग्स पर जा सकते हैं और सेटिं� हमें जाना होगा गिठफ पेजेस के ऊपर क्लिक किया और यहाँ पर आपको सोर्स में नन के बदले में ब्रांड सेलेक्ट करना है और सेव कर लेना है देख सकते हैं और यह आपको एक यू आरल देगा जो कि थोड़ा टाइम लेता है लाइव होने में मैं इसको यहाँ पर खो इसको ही मैं यहाँ पर रीड मी में भी डाल सकता हूँ लाइफ डेमो बोल के कमेंट इस पर क्लिक करके आप देख सकते हूँ एक दो प्रॉब्लम्स हैं यहाँ पर जैसे कि हमने बहुत जगाड़ो तरीके से जो इमेजेस को फिट किया है चारे बे चारे बे चारे च अगर आपको यह प्रोजेक्ट बसंद आया तो इसको थोड़ा इंप्रूव करो वह आपकी रिस्पॉंसिबिलिटी है और आपको रस्ता दिखाना और आगे की जर्मी आपको क सबसे पहला आपको इन images को इस तरीके से adjust करना है screen पे कि किसी भी camera के हिसाब से ये सही दिखाई दे जैसे चश्मा उस camera angle के लिए सही था इस camera angle में अच्छा काम नहीं कर रहा तो you have to think ये कैसे कर सकते हो आप आप width और height property को manipulate कर सकते हो based on आपके पास जो information आ रहा है posture पा next आप इस code में change कर सकते हो कि अभी ये webcam के इमेज के ऊपर काम कर रहा है आप इस code को change करके ऐसा कर सकते हो कि अगर कोई image upload होती है जैसे किसी athlete की image upload हो रही है तो उस athlete का posture या skeleton दिखने लग जाए आप इसको moving video के ऊपर भी apply कर सकते हो ठर्ड आप बहुत बढ़िया एक काम कर सकते हो कि इसको adapt कर सकते हो multiple people के लिए तो तलको इस video में अगर दो लोग और होते हो बट अगर आप चाहो तो since आपके बाद सारे skeletons का information आ रहा है आप सब का information दिखा सकते हो ठीक है तो आपको इतनी वो चालेंज समझ में आ रहे हैं प्लीज ट्राइंड इंप्लेमेंट बीस और करने के बाद शेयर कर सकते हैं ठीक है सो या गाइस दाट वो प्रोजेक्ट कमेंट में बताना कैसा लगा और फीडबैक देना कि और क्या इंप्रूवमेंट हो सकता है और प्लीज लाइक कर देना या लाइक सब्सक्राइब कर देना आई पुटिंग इन सो मच एफर्ट थोड़ा लाइक