১. শুরু করার আগে
আজকাল মেশিন লার্নিং বেশ বহুল প্রচলিত একটি বিষয়। এর প্রয়োগের ক্ষেত্র সীমাহীন বলে মনে হচ্ছে এবং অদূর ভবিষ্যতে এটি প্রায় প্রতিটি শিল্পকে স্পর্শ করতে প্রস্তুত। আপনি যদি একজন ইঞ্জিনিয়ার বা ডিজাইনার হিসেবে ফ্রন্ট-এন্ড বা ব্যাক-এন্ডে কাজ করেন এবং জাভাস্ক্রিপ্টে পারদর্শী হন, তবে আপনার দক্ষতার তালিকায় মেশিন লার্নিং যুক্ত করার কাজ শুরু করতে সাহায্য করার জন্যই এই কোডল্যাবটি লেখা হয়েছে।
পূর্বশর্ত
এই কোডল্যাবটি জাভাস্ক্রিপ্টের সাথে পূর্বপরিচিত অভিজ্ঞ ইঞ্জিনিয়ারদের জন্য লেখা হয়েছে।
আপনি যা তৈরি করবেন
এই কোডল্যাবে, আপনি যা শিখবেন
- এমন একটি ওয়েবপেজ তৈরি করুন যা টেনসরফ্লো.জেএস (TensorFlow.js) ব্যবহার করে সরাসরি ওয়েব ব্রাউজারে মেশিন লার্নিংয়ের মাধ্যমে একটি লাইভ ওয়েবক্যাম স্ট্রিম থেকে সাধারণ বস্তুসমূহকে (হ্যাঁ, এমনকি একবারে একাধিক বস্তুও) শ্রেণিবদ্ধ ও শনাক্ত করতে পারে।
- আপনার সাধারণ ওয়েবক্যামকে আরও শক্তিশালী করে বস্তু শনাক্ত করুন এবং খুঁজে পাওয়া প্রতিটি বস্তুর বাউন্ডিং বক্সের স্থানাঙ্ক বের করুন।
- ভিডিও স্ট্রিমে প্রাপ্ত বস্তুটি হাইলাইট করুন, যেমনটি নিচে দেখানো হয়েছে:
ভাবুন তো, যদি আপনি কোনো ভিডিওতে কোনো ব্যক্তি আছে কিনা তা শনাক্ত করতে পারতেন, তাহলে আপনি যেকোনো নির্দিষ্ট সময়ে সেখানে উপস্থিত মানুষের সংখ্যা গণনা করে দিনের বেলায় কোনো একটি নির্দিষ্ট এলাকা কতটা ব্যস্ত ছিল তার একটি ধারণা পেতেন। অথবা, আপনি যখন বাড়ির বাইরে থাকবেন, তখন আপনার কুকুরটিকে এমন কোনো ঘরে শনাক্ত করা হলে নিজেকেই একটি অ্যালার্ট পাঠাতে পারতেন, যেখানে হয়তো তার থাকা উচিত নয়। আপনি যদি এমনটা করতে পারতেন, তাহলে আপনি আপনার নিজস্ব কাস্টম হার্ডওয়্যার ব্যবহার করে গুগল নেস্ট ক্যামেরার মতো একটি সংস্করণ তৈরি করার পথে অনেকটাই এগিয়ে যেতেন, যা যেকোনো ধরনের অনুপ্রবেশকারীকে দেখলেই আপনাকে সতর্ক করতে পারবে! বেশ চমৎকার। এটা করা কি কঠিন? না। চলুন হ্যাকিং শুরু করা যাক...
আপনি যা শিখবেন
- কীভাবে একটি প্রি-ট্রেইনড TensorFlow.js মডেল লোড করতে হয়।
- লাইভ ওয়েবক্যাম স্ট্রিম থেকে ডেটা সংগ্রহ করে কীভাবে ক্যানভাসে আঁকবেন।
- মডেলটি যেসব বস্তু শনাক্ত করতে প্রশিক্ষিত, সেগুলোর বাউন্ডিং বক্স খুঁজে বের করার জন্য একটি ইমেজ ফ্রেমকে কীভাবে শ্রেণিবদ্ধ করা যায়।
- মডেল থেকে ফেরত আসা ডেটা ব্যবহার করে কীভাবে খুঁজে পাওয়া বস্তুগুলোকে হাইলাইট করা যায়।
এই কোডল্যাবটি TensorFlow.js প্রি-ট্রেইনড মডেল ব্যবহার করে কীভাবে কাজ শুরু করা যায়, তার উপর আলোকপাত করে। যেসব ধারণা এবং কোড ব্লক TensorFlow.js ও মেশিন লার্নিংয়ের সাথে প্রাসঙ্গিক নয়, সেগুলো ব্যাখ্যা করা হয়নি এবং আপনার কেবল কপি-পেস্ট করার জন্য সরবরাহ করা হয়েছে।
২. TensorFlow.js বলতে কী বোঝায়?
TensorFlow.js হলো একটি ওপেন সোর্স মেশিন লার্নিং লাইব্রেরি যা জাভাস্ক্রিপ্ট যেখানে চলে, সেখানেই চালানো যায়। এটি পাইথনে লেখা মূল TensorFlow লাইব্রেরির উপর ভিত্তি করে তৈরি এবং এর লক্ষ্য হলো জাভাস্ক্রিপ্ট ইকোসিস্টেমের জন্য সেই ডেভেলপার অভিজ্ঞতা ও এপিআই-এর সেটটি পুনরায় তৈরি করা।
এটি কোথায় ব্যবহার করা যেতে পারে?
জাভাস্ক্রিপ্টের বহনযোগ্যতার কারণে, আপনি এখন একটিমাত্র ভাষায় কোড লিখে নিম্নলিখিত সমস্ত প্ল্যাটফর্মে সহজেই মেশিন লার্নিং করতে পারবেন:
- ওয়েব ব্রাউজারে ক্লায়েন্ট সাইডে ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে
- সার্ভার সাইডে এবং এমনকি রাস্পবেরি পাই-এর মতো IoT ডিভাইসেও Node.js ব্যবহার করা হয়।
- ইলেকট্রন ব্যবহার করে ডেস্কটপ অ্যাপ
- React Native ব্যবহার করে নেটিভ মোবাইল অ্যাপ
সামঞ্জস্যতা নিশ্চিত করতে এবং সবকিছু দ্রুত চালু রাখতে, TensorFlow.js এই প্রতিটি পরিবেশের (যেমন সিপিইউ বা ওয়েবজিএল-এর মতো প্রকৃত হার্ডওয়্যার-ভিত্তিক পরিবেশ, যেখানে এটি চলতে পারে। এই প্রসঙ্গে "ব্যাকএন্ড" বলতে সার্ভার-সাইড পরিবেশ বোঝায় না - এক্সিকিউশনের জন্য ব্যাকএন্ডটি ক্লায়েন্ট-সাইডে ওয়েবজিএল-এও হতে পারে) মধ্যে একাধিক ব্যাকএন্ড সমর্থন করে। বর্তমানে TensorFlow.js যা সমর্থন করে:
- ডিভাইসের গ্রাফিক্স কার্ডে (GPU) WebGL এক্সিকিউশন – GPU অ্যাক্সিলারেশনের মাধ্যমে বড় মডেল (আকারে ৩ মেগাবাইটের বেশি) চালানোর এটিই দ্রুততম উপায়।
- সিপিইউ-তে ওয়েব অ্যাসেম্বলি (WASM) এক্সিকিউশন – উদাহরণস্বরূপ, পুরোনো প্রজন্মের মোবাইল ফোন সহ বিভিন্ন ডিভাইসে সিপিইউ-এর পারফরম্যান্স উন্নত করার জন্য। এটি ছোট মডেলগুলির (আকারে ৩ মেগাবাইটের কম) জন্য বেশি উপযোগী, যেগুলো গ্রাফিক্স প্রসেসরে কন্টেন্ট আপলোড করার ওভারহেডের কারণে WebGL-এর চেয়ে WASM ব্যবহার করে সিপিইউ-তে প্রকৃতপক্ষে আরও দ্রুত এক্সিকিউট হতে পারে।
- সিপিইউ এক্সিকিউশন - অন্য কোনো এনভায়রনমেন্ট উপলব্ধ না থাকলে এটিই বিকল্প ব্যবস্থা। এই তিনটির মধ্যে এটি সবচেয়ে ধীরগতির, কিন্তু এটি আপনার জন্য সর্বদা প্রস্তুত থাকে।
দ্রষ্টব্য: আপনি কোন ডিভাইসে এটি চালাবেন তা জানা থাকলে, এই ব্যাকএন্ডগুলির মধ্যে একটিকে বাধ্যতামূলকভাবে ব্যবহার করার বিকল্প বেছে নিতে পারেন, অথবা এটি নির্দিষ্ট না করলে TensorFlow.js-কেই আপনার জন্য সিদ্ধান্ত নিতে দিতে পারেন।
ক্লায়েন্ট সাইডের সুপার পাওয়ার
ক্লায়েন্ট মেশিনের ওয়েব ব্রাউজারে TensorFlow.js চালানোর ফলে বেশ কিছু সুবিধা পাওয়া যেতে পারে, যা বিবেচনা করার মতো।
গোপনীয়তা
আপনি কোনো তৃতীয় পক্ষের ওয়েব সার্ভারে ডেটা না পাঠিয়েই ক্লায়েন্ট মেশিনে ডেটা প্রশিক্ষণ এবং শ্রেণীবদ্ধকরণ উভয়ই করতে পারেন। এমন কিছু পরিস্থিতি আসতে পারে যেখানে স্থানীয় আইন, যেমন উদাহরণস্বরূপ GDPR, মেনে চলার জন্য এটি একটি আবশ্যিক শর্ত হতে পারে, অথবা যখন ব্যবহারকারী এমন কোনো ডেটা প্রসেস করতে চান যা তিনি নিজের মেশিনে রাখতে চান এবং কোনো তৃতীয় পক্ষের কাছে পাঠাতে চান না।
গতি
যেহেতু আপনাকে কোনো রিমোট সার্ভারে ডেটা পাঠাতে হচ্ছে না, তাই ইনফারেন্স (ডেটা শ্রেণীবদ্ধ করার প্রক্রিয়া) আরও দ্রুত হতে পারে। আরও ভালো ব্যাপার হলো, ব্যবহারকারী অনুমতি দিলে আপনি ডিভাইসটির ক্যামেরা, মাইক্রোফোন, জিপিএস, অ্যাক্সেলেরোমিটার এবং আরও অনেক সেন্সরে সরাসরি অ্যাক্সেস পাবেন।
প্রসার এবং পরিধি
বিশ্বের যে কেউ এক ক্লিকেই আপনার পাঠানো লিঙ্কে ক্লিক করে, তাদের ব্রাউজারে ওয়েব পেজটি খুলতে এবং আপনার তৈরি করা জিনিসটি ব্যবহার করতে পারে। মেশিন লার্নিং সিস্টেমটি ব্যবহার করার জন্য CUDA ড্রাইভার এবং আরও অনেক কিছু সহ একটি জটিল সার্ভার-সাইড লিনাক্স সেটআপের কোনো প্রয়োজন নেই।
খরচ
সার্ভার না থাকার অর্থ হলো, আপনাকে শুধুমাত্র আপনার HTML, CSS, JS, এবং মডেল ফাইলগুলো হোস্ট করার জন্য একটি CDN-এর খরচ করতে হবে। একটি সার্ভারকে (সম্ভবত একটি গ্রাফিক্স কার্ডসহ) ২৪/৭ চালু রাখার চেয়ে একটি CDN-এর খরচ অনেক কম।
সার্ভার সাইডের বৈশিষ্ট্য
TensorFlow.js-এর Node.js সংস্করণ ব্যবহার করলে নিম্নলিখিত বৈশিষ্ট্যগুলো সক্ষম হয়।
সম্পূর্ণ CUDA সমর্থন
সার্ভার সাইডে, গ্রাফিক্স কার্ড অ্যাক্সিলারেশনের জন্য, আপনাকে অবশ্যই NVIDIA CUDA ড্রাইভার ইনস্টল করতে হবে যাতে TensorFlow গ্রাফিক্স কার্ডের সাথে কাজ করতে পারে (ব্রাউজারের মতো নয়, যেখানে WebGL ব্যবহৃত হয় - কোনো ইনস্টলের প্রয়োজন নেই)। তবে, সম্পূর্ণ CUDA সাপোর্টের মাধ্যমে আপনি গ্রাফিক্স কার্ডের নিম্ন-স্তরের ক্ষমতাগুলোকে পুরোপুরি কাজে লাগাতে পারবেন, যার ফলে ট্রেনিং এবং ইনফারেন্সের সময় দ্রুততর হয়। এর পারফরম্যান্স পাইথন TensorFlow ইমপ্লিমেন্টেশনের সমতুল্য, কারণ উভয়েরই একই C++ ব্যাকএন্ড রয়েছে।
মডেলের আকার
গবেষণার অত্যাধুনিক মডেলগুলোর জন্য, আপনাকে খুব বড় মডেল নিয়ে কাজ করতে হতে পারে, যা আকারে গিগাবাইট পর্যন্ত হতে পারে। প্রতি ব্রাউজার ট্যাবে মেমরি ব্যবহারের সীমাবদ্ধতার কারণে এই মডেলগুলো বর্তমানে ওয়েব ব্রাউজারে চালানো যায় না। এই ধরনের বড় মডেলগুলো দক্ষতার সাথে চালানোর জন্য প্রয়োজনীয় হার্ডওয়্যার স্পেসিফিকেশনসহ আপনার নিজের সার্ভারে Node.js ব্যবহার করতে পারেন।
আইওটি
রাস্পবেরি পাই-এর মতো জনপ্রিয় সিঙ্গেল বোর্ড কম্পিউটারে নোড.জেএস সমর্থিত, যার ফলে আপনি এই ধরনের ডিভাইসেও টেনসরফ্লো.জেএস মডেল চালাতে পারবেন।
গতি
নোড.জেএস জাভাস্ক্রিপ্টে লেখা, যার ফলে এটি জাস্ট-ইন-টাইম কম্পাইলেশনের সুবিধা পায়। এর মানে হলো, নোড.জেএস ব্যবহার করার সময় আপনি প্রায়শই পারফরম্যান্সে উন্নতি দেখতে পাবেন, কারণ এটি রানটাইমে অপ্টিমাইজ করা হয়, বিশেষ করে আপনার করা যেকোনো প্রিপ্রসেসিংয়ের জন্য। এর একটি চমৎকার উদাহরণ এই কেস স্টাডিতে দেখা যায়, যেখানে দেখানো হয়েছে কীভাবে হাগিং ফেস তাদের ন্যাচারাল ল্যাঙ্গুয়েজ প্রসেসিং মডেলের পারফরম্যান্স দ্বিগুণ বাড়াতে নোড.জেএস ব্যবহার করেছে।
এখন যেহেতু আপনি TensorFlow.js-এর মূল বিষয়গুলো, এটি কোথায় চালানো যায় এবং এর কিছু সুবিধা সম্পর্কে জেনেছেন, চলুন এটি দিয়ে দরকারি কিছু কাজ করা শুরু করা যাক!
৩. পূর্ব-প্রশিক্ষিত মডেল
TensorFlow.js বিভিন্ন ধরনের প্রি-ট্রেইনড মেশিন লার্নিং (ML) মডেল সরবরাহ করে। এই মডেলগুলো TensorFlow.js টিম দ্বারা প্রশিক্ষিত এবং একটি সহজে ব্যবহারযোগ্য ক্লাসের মধ্যে অন্তর্ভুক্ত করা হয়েছে, এবং মেশিন লার্নিং-এ আপনার প্রথম পদক্ষেপ নেওয়ার জন্য এটি একটি চমৎকার উপায়। আপনার সমস্যা সমাধানের জন্য একটি মডেল তৈরি ও প্রশিক্ষণ দেওয়ার পরিবর্তে, আপনি আপনার সূচনা বিন্দু হিসেবে একটি প্রি-ট্রেইনড মডেল ইম্পোর্ট করতে পারেন।
আপনি Tensorflow.js Models for JavaScript পৃষ্ঠায় সহজে ব্যবহারযোগ্য প্রি-ট্রেইনড মডেলের একটি ক্রমবর্ধমান তালিকা খুঁজে পেতে পারেন। এছাড়াও, TensorFlow Hub- সহ আরও অন্যান্য জায়গা রয়েছে যেখান থেকে আপনি TensorFlow.js-এ কাজ করে এমন রূপান্তরিত TensorFlow মডেল পেতে পারেন।
আমি কেন একটি প্রি-ট্রেইনড মডেল ব্যবহার করতে চাইব?
আপনার কাঙ্ক্ষিত ব্যবহারের ক্ষেত্রে উপযুক্ত হলে, একটি জনপ্রিয় প্রি-ট্রেইনড মডেল দিয়ে শুরু করার বেশ কিছু সুবিধা রয়েছে, যেমন:
- নিজে থেকে ট্রেনিং ডেটা সংগ্রহ করার প্রয়োজন নেই। ডেটাকে সঠিক ফরম্যাটে প্রস্তুত করা এবং এমনভাবে লেবেল করা যাতে একটি মেশিন লার্নিং সিস্টেম তা থেকে শিখতে পারে, তা অত্যন্ত সময়সাপেক্ষ এবং ব্যয়বহুল হতে পারে।
- কম খরচ ও সময়ে দ্রুত কোনো ধারণার প্রোটোটাইপ তৈরি করার ক্ষমতা।
যখন একটি পূর্ব-প্রশিক্ষিত মডেল আপনার প্রয়োজনীয় কাজটি করার জন্য যথেষ্ট ভালো হতে পারে, তখন নতুন করে চাকা আবিষ্কার করার কোনো মানে হয় না। এর ফলে আপনি মডেল থেকে প্রাপ্ত জ্ঞান ব্যবহার করে আপনার সৃজনশীল ধারণাগুলো বাস্তবায়নের দিকে মনোযোগ দিতে পারেন। - সর্বাধুনিক গবেষণার ব্যবহার। প্রি-ট্রেইনড মডেলগুলো প্রায়শই জনপ্রিয় গবেষণার উপর ভিত্তি করে তৈরি করা হয়, যা আপনাকে এই ধরনের মডেলগুলোর সাথে পরিচিত হওয়ার সুযোগ দেয় এবং একই সাথে বাস্তব জগতে সেগুলোর কার্যকারিতা বুঝতে সাহায্য করে।
- ব্যবহারের সহজতা এবং বিস্তারিত নথিপত্র। এই ধরনের মডেলগুলোর জনপ্রিয়তার কারণে।
- ট্রান্সফার লার্নিং ক্ষমতা । কিছু প্রি-ট্রেইনড মডেলে ট্রান্সফার লার্নিং-এর সুবিধা থাকে, যা মূলত একটি মেশিন লার্নিং টাস্ক থেকে শেখা তথ্যকে অন্য একটি অনুরূপ উদাহরণে স্থানান্তর করার একটি পদ্ধতি। উদাহরণস্বরূপ, একটি মডেল যা মূলত বিড়াল শনাক্ত করার জন্য প্রশিক্ষিত ছিল, সেটিকে নতুন ট্রেনিং ডেটা দিলে কুকুর শনাক্ত করার জন্য পুনরায় প্রশিক্ষণ দেওয়া যেতে পারে। এটি আরও দ্রুত হবে কারণ আপনাকে একেবারে নতুন করে শুরু করতে হবে না। মডেলটি বিড়াল শনাক্ত করার জন্য যা শিখেছে, তা ব্যবহার করে নতুন প্রাণীটিকেও শনাক্ত করতে পারবে — সর্বোপরি, কুকুরেরও চোখ এবং কান আছে, তাই যদি এটি ইতিমধ্যেই সেই বৈশিষ্ট্যগুলো খুঁজে বের করতে জানে, তবে আমাদের কাজ অর্ধেক এগিয়ে গেছে। আপনার নিজের ডেটা ব্যবহার করে মডেলটিকে আরও দ্রুত উপায়ে পুনরায় প্রশিক্ষণ দিন।
COCO-SSD কী?
COCO-SSD হলো একটি প্রি-ট্রেইনড অবজেক্ট ডিটেকশন এমএল মডেলের নাম, যা আপনি এই কোডল্যাবে ব্যবহার করবেন। এর লক্ষ্য হলো একটিমাত্র ছবিতে একাধিক বস্তুকে শনাক্ত করা। অন্য কথায়, এটি যে বস্তুগুলো খুঁজে বের করার জন্য প্রশিক্ষিত, সেগুলোর বাউন্ডিং বক্স আপনাকে জানাতে পারে, যাতে আপনি এটিকে দেওয়া যেকোনো ছবিতে সেই বস্তুটির অবস্থান খুঁজে পেতে পারেন। নিচের ছবিতে একটি উদাহরণ দেখানো হলো:
উপরের ছবিতে যদি একাধিক কুকুর থাকত, তাহলে আপনাকে প্রতিটির অবস্থান বর্ণনা করে দুটি বাউন্ডিং বক্সের স্থানাঙ্ক দেওয়া হতো। COCO-SSD-কে ৯০টি সাধারণ দৈনন্দিন বস্তু , যেমন মানুষ, গাড়ি, বিড়াল ইত্যাদি শনাক্ত করার জন্য আগে থেকেই প্রশিক্ষণ দেওয়া হয়েছে।
নামটি কোথা থেকে এসেছে?
নামটি শুনতে অদ্ভুত লাগতে পারে, কিন্তু এটি দুটি সংক্ষিপ্ত রূপ থেকে এসেছে:
- COCO: এটি COCO (Common Objects in Context) ডেটাসেটের উপর প্রশিক্ষিত হয়েছে, যা যে কেউ বিনামূল্যে ডাউনলোড করে নিজের মডেল প্রশিক্ষণের জন্য ব্যবহার করতে পারে। এই ডেটাসেটে ২,০০,০০০-এরও বেশি লেবেলযুক্ত ছবি রয়েছে, যা থেকে শেখা যেতে পারে।
- SSD (সিঙ্গেল শট মাল্টিবক্স ডিটেকশন): মডেল আর্কিটেকচারের সেই অংশকে বোঝায় যা মডেলটির বাস্তবায়নে ব্যবহৃত হয়েছে। কোডল্যাবের জন্য এটি বোঝার প্রয়োজন নেই, তবে আপনি যদি আগ্রহী হন, তাহলে এখান থেকে SSD সম্পর্কে আরও জানতে পারেন।
৪. প্রস্তুত হয়ে নিন
আপনার যা যা লাগবে
- একটি আধুনিক ওয়েব ব্রাউজার।
- HTML, CSS, JavaScript এবং Chrome DevTools (কনসোল আউটপুট দেখার ক্ষমতা) সম্পর্কে প্রাথমিক জ্ঞান।
চলুন কোডিং শুরু করা যাক।
Glitch.com বা Codepen.io-এর জন্য কাজ শুরু করার উপযোগী বয়লারপ্লেট টেমপ্লেট তৈরি করা হয়েছে। আপনি মাত্র এক ক্লিকে এই কোড ল্যাবের জন্য যেকোনো একটি টেমপ্লেটকে আপনার ভিত্তি হিসেবে ক্লোন করতে পারেন।
Glitch-এ, এটিকে ফোর্ক করতে এবং সম্পাদনাযোগ্য নতুন ফাইল সেট তৈরি করতে 'remix this' বোতামে ক্লিক করুন।
বিকল্পভাবে, কোডপেনে স্ক্রিনের একেবারে নিচের ডানদিকে থাকা ফর্ক (fork) বোতামে ক্লিক করুন।
এই অত্যন্ত সরল কাঠামোটি আপনাকে নিম্নলিখিত ফাইলগুলি প্রদান করে:
- এইচটিএমএল পৃষ্ঠা (index.html)
- স্টাইলশিট (style.css)
- আমাদের জাভাস্ক্রিপ্ট কোড লেখার ফাইল (script.js)
আপনার সুবিধার জন্য, HTML ফাইলে 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>
বিকল্প: আপনার পছন্দের ওয়েব এডিটর ব্যবহার করুন অথবা স্থানীয়ভাবে কাজ করুন।
যদি আপনি কোডটি ডাউনলোড করে আপনার কম্পিউটারে বা অন্য কোনো অনলাইন এডিটরে কাজ করতে চান, তাহলে একই ডিরেক্টরিতে উপরে উল্লিখিত ৩টি ফাইল তৈরি করুন এবং আমাদের গ্লিচ বয়লারপ্লেট থেকে কোডটি কপি করে সেগুলোর প্রতিটিতে পেস্ট করুন।
৫. এইচটিএমএল কাঠামোটি পূরণ করুন।
সব প্রোটোটাইপের জন্য কিছু প্রাথমিক HTML কাঠামো প্রয়োজন। পরবর্তীতে মেশিন লার্নিং মডেলের আউটপুট রেন্ডার করার জন্য আপনি এটি ব্যবহার করবেন। চলুন, এখন সেটি তৈরি করে নেওয়া যাক:
- পৃষ্ঠাটির জন্য একটি শিরোনাম
- কিছু বর্ণনামূলক পাঠ্য
- ওয়েবক্যাম চালু করার জন্য একটি বাটন
- ওয়েবক্যাম স্ট্রিম রেন্ডার করার জন্য একটি ভিডিও ট্যাগ
এই বৈশিষ্ট্যগুলি সেট আপ করতে, 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' ক্লাস দেবেন। এর ফলে, মডেলটি কখন প্রস্তুত এবং 'enable webcam' বোতামটি ক্লিক করা নিরাপদ, তা ব্যবহারকারীকে চাক্ষুষভাবে দেখানো যাবে। - আপনি ওয়েবক্যাম চালু করার বাটনটি যোগ করেছেন, যেটি আপনি আপনার CSS-এ স্টাইল করবেন।
- আপনি একটি ভিডিও ট্যাগও যোগ করেছেন, যেখানে আপনি আপনার ওয়েবক্যামের ইনপুট স্ট্রিম করবেন। আপনি শীঘ্রই আপনার জাভাস্ক্রিপ্ট কোডে এটি সেট আপ করবেন।
আপনি যদি এখনই আউটপুটটি প্রিভিউ করেন, তাহলে এটি দেখতে অনেকটা এইরকম হবে:
৬. স্টাইল যোগ করুন
উপাদানের ডিফল্ট
প্রথমে, আমরা এইমাত্র যোগ করা HTML এলিমেন্টগুলোতে স্টাইল যুক্ত করি, যাতে সেগুলো সঠিকভাবে রেন্ডার হয়:
স্টাইল.সিএসএস
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;
}
এরপরে, আমাদের ইউজার ইন্টারফেসের বিভিন্ন অবস্থা সামলানোর জন্য কিছু দরকারি 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;
}
চমৎকার! আপনার শুধু এটুকুই প্রয়োজন। যদি আপনি উপরের দুটি কোড দিয়ে আপনার স্টাইলগুলো সফলভাবে ওভাররাইট করে থাকেন, তাহলে আপনার লাইভ প্রিভিউটি এখন এইরকম দেখাবে:
লক্ষ্য করুন, ডেমো এরিয়ার টেক্সট এবং বাটনটি অনুপলব্ধ, কারণ HTML-এ ডিফল্টভাবে "invisible" ক্লাসটি প্রয়োগ করা আছে। মডেলটি ব্যবহারের জন্য প্রস্তুত হয়ে গেলে আপনি জাভাস্ক্রিপ্ট ব্যবহার করে এই ক্লাসটি সরিয়ে ফেলবেন।
৭. জাভাস্ক্রিপ্ট কাঠামো তৈরি করুন
মূল DOM উপাদানগুলির উল্লেখ
প্রথমে, নিশ্চিত করুন যে আপনি পৃষ্ঠার সেই মূল অংশগুলিতে প্রবেশ করতে পারবেন যা আমাদের কোডে পরবর্তীতে পরিবর্তন বা অ্যাক্সেস করার প্রয়োজন হবে:
স্ক্রিপ্ট.জেএস
const video = document.getElementById('webcam');
const liveView = document.getElementById('liveView');
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');
ওয়েবক্যাম সমর্থনের জন্য পরীক্ষা করুন
আপনি এখন কিছু সহায়ক ফাংশন যোগ করতে পারেন, যা দিয়ে যাচাই করা যাবে যে আপনার ব্যবহৃত ব্রাউজারটি getUserMedia মাধ্যমে ওয়েবক্যাম স্ট্রিম অ্যাক্সেস করা সমর্থন করে কি না।
স্ক্রিপ্ট.জেএস
// 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 ফাংশনটির কোড পূরণ করতে নিচের কোডটি কপি ও পেস্ট করুন:
স্ক্রিপ্ট.জেএস
// 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);
});
}
সবশেষে, ওয়েবক্যামটি কাজ করছে কিনা তা পরীক্ষা করার জন্য কিছু অস্থায়ী কোড যোগ করুন।
নিচের কোডটি এমন ভান করবে যেন আপনার মডেলটি লোড হয়েছে এবং ক্যামেরা বাটনটি সক্রিয় করবে, যাতে আপনি এটিতে ক্লিক করতে পারেন। পরবর্তী ধাপে আপনাকে এই পুরো কোডটি প্রতিস্থাপন করতে হবে, তাই কিছুক্ষণ পরেই এটি আবার মুছে ফেলার জন্য প্রস্তুত থাকুন:
স্ক্রিপ্ট.জেএস
// 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');
চমৎকার! আপনি যদি কোডটি রান করে বর্তমান অবস্থায় বাটনটিতে ক্লিক করেন, তাহলে এইরকম কিছু দেখতে পাবেন:
৮. মেশিন লার্নিং মডেলের ব্যবহার
মডেল লোড করা হচ্ছে
আপনি এখন COCO-SSD মডেলটি লোড করার জন্য প্রস্তুত।
ইনিশিয়ালাইজেশন শেষ হলে, আপনার ওয়েব পেজে ডেমো এরিয়া এবং বাটনটি সক্রিয় করুন (গত ধাপের শেষে যোগ করা অস্থায়ী কোডের উপর এই কোডটি পেস্ট করুন):
স্ক্রিপ্ট.জেএস
// 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> ট্যাগ আঁকবে, এবং যদি কনফিডেন্স লেভেল একটি নির্দিষ্ট স্তরের বেশি হয়, তবে টেক্সটটি অবজেক্টের লেবেলে সেট করে দেবে।
স্ক্রিপ্ট.জেএস
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 ডকুমেন্টেশনে এখানে খুঁজে পেতে পারেন। এই ফাংশনটি নেপথ্যে অনেক গুরুত্বপূর্ণ কাজ করে থাকে: এটি প্যারামিটার হিসেবে যেকোনো "ছবির মতো" অবজেক্ট গ্রহণ করতে পারে, যেমন একটি ছবি, একটি ভিডিও, একটি ক্যানভাস, ইত্যাদি। আগে থেকে তৈরি মডেল ব্যবহার করলে আপনার অনেক সময় এবং শ্রম বাঁচবে, কারণ আপনাকে এই কোডটি নিজে লিখতে হবে না এবং আপনি এটি কোনো পরিবর্তন ছাড়াই ব্যবহার করতে পারবেন।
এই কোডটি চালালে আপনি এখন এইরকম দেখতে একটি ছবি পাবেন:
অবশেষে, একই সাথে একাধিক অবজেক্ট শনাক্ত করার কোডের একটি উদাহরণ এখানে দেওয়া হলো:
বাহ! আপনি এখন কল্পনা করতে পারেন যে, এরকম কিছু ব্যবহার করে একটি পুরোনো ফোন দিয়ে নেস্ট ক্যামের মতো একটি ডিভাইস তৈরি করা কতটা সহজ হবে, যা সোফায় আপনার কুকুর বা কাউচে আপনার বিড়ালকে দেখলে আপনাকে সতর্ক করবে। আপনার কোড নিয়ে কোনো সমস্যা হলে, আপনি কিছু ভুলভাবে কপি করেছেন কিনা তা দেখতে এখানে আমার চূড়ান্ত কার্যকরী সংস্করণটি দেখুন ।
৯. অভিনন্দন
অভিনন্দন, আপনি ওয়েব ব্রাউজারে TensorFlow.js এবং মেশিন লার্নিং ব্যবহারের প্রথম পদক্ষেপ নিয়েছেন! এখন এই সামান্য সূচনাকে সৃজনশীল কিছুতে পরিণত করার দায়িত্ব আপনার। আপনি কী তৈরি করবেন?
পুনরালোচনা
এই কোডল্যাবে আমরা:
- TensorFlow-এর অন্যান্য সংস্করণের তুলনায় TensorFlow.js ব্যবহারের সুবিধাগুলো সম্পর্কে জানতে পারলাম।
- সেই পরিস্থিতিগুলো সম্পর্কে জানুন যেখানে আপনি একটি প্রি-ট্রেইনড মেশিন লার্নিং মডেল দিয়ে শুরু করতে চাইতে পারেন।
- একটি সম্পূর্ণ কার্যকরী ওয়েব পেজ তৈরি করা হয়েছে যা আপনার ওয়েবক্যাম ব্যবহার করে রিয়েল টাইমে বস্তু শ্রেণীবদ্ধ করতে পারে, যার মধ্যে অন্তর্ভুক্ত রয়েছে:
- কন্টেন্টের জন্য একটি HTML কাঠামো তৈরি করা
- এইচটিএমএল এলিমেন্ট এবং ক্লাসের জন্য স্টাইল নির্ধারণ করা
- এইচটিএমএল-এর সাথে সংযোগ স্থাপন করতে এবং ওয়েবক্যামের উপস্থিতি শনাক্ত করতে জাভাস্ক্রিপ্ট স্কাফোল্ডিং তৈরি করা হচ্ছে।
- একটি পূর্ব-প্রশিক্ষিত TensorFlow.js মডেল লোড করা হচ্ছে
- লোড করা মডেলটি ব্যবহার করে ওয়েবক্যাম স্ট্রিমের ধারাবাহিক শ্রেণিবিন্যাস করা এবং ছবির বস্তুগুলোর চারপাশে একটি বাউন্ডিং বক্স আঁকা।
পরবর্তী পদক্ষেপ
আপনি যা তৈরি করেন তা আমাদের সাথে শেয়ার করুন! এই কোডল্যাবের জন্য যা তৈরি করেছেন, তা আপনি সহজেই অন্যান্য সৃজনশীল কাজেও ব্যবহার করতে পারেন। আমরা আপনাকে গতানুগতিক ধারার বাইরে ভাবতে এবং কাজ শেষ হওয়ার পরেও নতুন কিছু তৈরি করতে উৎসাহিত করি।
- এই মডেলটি যে সমস্ত বস্তু চিনতে পারে তা দেখুন এবং ভাবুন কীভাবে আপনি সেই জ্ঞান ব্যবহার করে একটি কাজ সম্পাদন করতে পারেন। আজ আপনি যা তৈরি করেছেন, তা প্রসারিত করে এখন কী কী সৃজনশীল ধারণা বাস্তবায়ন করা যেতে পারে?
হয়তো আপনি ওয়েবসকেট ব্যবহার করে একটি সাধারণ সার্ভার-সাইড লেয়ার যোগ করতে পারেন, যা আপনার পছন্দের কোনো নির্দিষ্ট বস্তু দেখতে পেলে অন্য ডিভাইসে একটি নোটিফিকেশন পাঠিয়ে দেবে। এটি একটি পুরোনো স্মার্টফোনকে নতুন রূপ দিয়ে সেটিকে একটি নতুন উদ্দেশ্য দেওয়ার দারুণ উপায় হবে। এর সম্ভাবনা সীমাহীন!
- আপনার প্রজেক্টটি আমাদের TensorFlow ব্লগে ফিচার হওয়ার অথবা ভবিষ্যতের TensorFlow ইভেন্টগুলিতে প্রদর্শিত হওয়ার সুযোগ পেতে, #MadeWithTFJS হ্যাশট্যাগ ব্যবহার করে সোশ্যাল মিডিয়ায় আমাদের ট্যাগ করুন।
আরও গভীরে যাওয়ার জন্য TensorFlow.js-এর আরও কোডল্যাব রয়েছে।
- TensorFlow.js ব্যবহার করে প্রথম থেকে একটি নিউরাল নেটওয়ার্ক লিখুন।
- TensorFlow.js-এ ট্রান্সফার লার্নিং ব্যবহার করে অডিও শনাক্তকরণ
- TensorFlow.js-এ ট্রান্সফার লার্নিং ব্যবহার করে কাস্টম ইমেজ ক্লাসিফিকেশন