এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

একটি TensorFlow.js প্রি-প্রশিক্ষিত মেশিন লার্নিং মডেল দিয়ে জাভাস্ক্রিপ্টে একটি স্মার্ট ওয়েবক্যাম তৈরি করুন

১. শুরু করার আগে

আজকাল মেশিন লার্নিং বেশ জনপ্রিয় শব্দ। এর অ্যাপ্লিকেশনগুলির কোনও সীমা নেই বলে মনে হচ্ছে এবং এটি অদূর ভবিষ্যতে প্রায় প্রতিটি শিল্পকে স্পর্শ করবে বলে মনে হচ্ছে। আপনি যদি একজন ইঞ্জিনিয়ার বা ডিজাইনার, ফ্রন্ট এন্ড বা ব্যাক এন্ড হিসাবে কাজ করেন এবং আপনি জাভাস্ক্রিপ্টের সাথে পরিচিত হন, তাহলে এই কোডল্যাবটি আপনার দক্ষতার সাথে মেশিন লার্নিং যুক্ত করতে সাহায্য করার জন্য লেখা হয়েছে।

পূর্বশর্ত

এই কোডল্যাবটি জাভাস্ক্রিপ্টের সাথে পরিচিত অভিজ্ঞ ইঞ্জিনিয়ারদের জন্য লেখা হয়েছে।

তুমি কী তৈরি করবে

এই কোডল্যাবে, আপনি

এমন একটি ওয়েবপেজ তৈরি করুন যা TensorFlow.js এর মাধ্যমে সরাসরি ওয়েব ব্রাউজারে মেশিন লার্নিং ব্যবহার করে একটি লাইভ ওয়েবক্যাম স্ট্রিম থেকে সাধারণ বস্তুগুলিকে (হ্যাঁ, একাধিক সহ) শ্রেণীবদ্ধ এবং সনাক্ত করতে পারে।
আপনার নিয়মিত ওয়েবক্যামকে সুপারচার্জ করুন যাতে আপনি বস্তুগুলি সনাক্ত করতে পারেন এবং প্রতিটি বস্তুর জন্য বাউন্ডিং বক্সের স্থানাঙ্ক পেতে পারেন।
ভিডিও স্ট্রীমে পাওয়া বস্তুটি হাইলাইট করুন, যেমনটি নীচে দেখানো হয়েছে:

8f9bad6e49e646b.png সম্পর্কে

কল্পনা করুন যে আপনি কোনও ভিডিওতে কোনও ব্যক্তি আছেন কিনা তা সনাক্ত করতে সক্ষম হবেন, যাতে আপনি কোনও নির্দিষ্ট সময়ে কতজন লোক উপস্থিত ছিলেন তা গণনা করতে পারেন যাতে দিনের বেলায় কোনও নির্দিষ্ট এলাকা কতটা ব্যস্ত ছিল তা অনুমান করতে পারেন, অথবা যখন আপনার কুকুরটি আপনার বাড়ির এমন একটি ঘরে ধরা পড়ে যেখানে আপনি দূরে থাকা উচিত নয় তখন নিজেকে একটি সতর্কতা পাঠাতে পারেন। আপনি যদি এটি করতে পারেন তবে আপনি একটি নিজস্ব Google Nest ক্যাম তৈরি করার পথে এগিয়ে যাবেন যা আপনার নিজস্ব কাস্টম হার্ডওয়্যার ব্যবহার করে কোনও অনুপ্রবেশকারী (যে কোনও ধরণের) দেখলে আপনাকে সতর্ক করতে পারে! বেশ সুন্দর। এটা করা কি কঠিন? না। আসুন হ্যাকিং শুরু করি...

তুমি কি শিখবে

কিভাবে একটি প্রাক-প্রশিক্ষিত TensorFlow.js মডেল লোড করবেন।
কিভাবে একটি লাইভ ওয়েবক্যাম স্ট্রিম থেকে ডেটা সংগ্রহ করবেন এবং ক্যানভাসে আঁকবেন।
মডেলটিকে যে বস্তু (গুলি) চিনতে প্রশিক্ষণ দেওয়া হয়েছে তার বাউন্ডিং বাক্স (গুলি) খুঁজে বের করার জন্য একটি ছবির ফ্রেমকে কীভাবে শ্রেণীবদ্ধ করা যায়।
মডেল থেকে প্রেরিত তথ্য কীভাবে ব্যবহার করে পাওয়া বস্তুগুলিকে হাইলাইট করবেন।

এই কোডল্যাবটি TensorFlow.js-এর পূর্ব-প্রশিক্ষিত মডেলগুলি ব্যবহার করে কীভাবে শুরু করবেন তার উপর দৃষ্টি নিবদ্ধ করে। TensorFlow.js এবং মেশিন লার্নিংয়ের সাথে প্রাসঙ্গিক নয় এমন ধারণা এবং কোড ব্লকগুলি ব্যাখ্যা করা হয়নি এবং আপনাকে কেবল কপি এবং পেস্ট করার জন্য সরবরাহ করা হয়েছে।

২. TensorFlow.js কি?

1aee0ede85885520.png সম্পর্কে

TensorFlow.js হল একটি ওপেন সোর্স মেশিন লার্নিং লাইব্রেরি যা জাভাস্ক্রিপ্টের যেকোনো জায়াস্ক্রিপ্ট ব্যবহার করতে পারে। এটি পাইথনে লেখা মূল TensorFlow লাইব্রেরির উপর ভিত্তি করে তৈরি এবং জাভাস্ক্রিপ্ট ইকোসিস্টেমের জন্য এই ডেভেলপার অভিজ্ঞতা এবং API-এর সেট পুনরায় তৈরি করার লক্ষ্যে কাজ করে।

এটা কোথায় ব্যবহার করা যেতে পারে?

জাভাস্ক্রিপ্টের পোর্টেবিলিটির কারণে, আপনি এখন একটি ভাষায় লিখতে পারেন এবং নিম্নলিখিত সমস্ত প্ল্যাটফর্মে সহজেই মেশিন লার্নিং সম্পাদন করতে পারেন:

ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে ওয়েব ব্রাউজারে ক্লায়েন্ট সাইড
সার্ভার সাইড এবং এমনকি রাস্পবেরি পাই এর মতো IoT ডিভাইসগুলি Node.js ব্যবহার করে
ইলেক্ট্রন ব্যবহার করে ডেস্কটপ অ্যাপ
রিঅ্যাক্ট নেটিভ ব্যবহার করে নেটিভ মোবাইল অ্যাপস

TensorFlow.js এই পরিবেশগুলির প্রতিটির মধ্যে একাধিক ব্যাকএন্ড সমর্থন করে (প্রকৃত হার্ডওয়্যার ভিত্তিক পরিবেশ যেখানে এটি কার্যকর করতে পারে যেমন CPU বা WebGL। এই প্রসঙ্গে "ব্যাকএন্ড" মানে সার্ভার সাইড পরিবেশ নয় - কার্যকর করার জন্য ব্যাকএন্ডটি উদাহরণস্বরূপ WebGL-এ ক্লায়েন্ট সাইড হতে পারে) যাতে সামঞ্জস্যতা নিশ্চিত করা যায় এবং জিনিসগুলি দ্রুত চলমান থাকে। বর্তমানে TensorFlow.js সমর্থন করে:

ডিভাইসের গ্রাফিক্স কার্ডে (GPU)-তে WebGL এক্সিকিউশন - এটি GPU অ্যাক্সিলারেশন সহ বৃহত্তর মডেলগুলি (3MB-এর বেশি আকারের) এক্সিকিউশন করার দ্রুততম উপায়।
CPU-তে ওয়েব অ্যাসেম্বলি (WASM) কার্যকর করা - উদাহরণস্বরূপ, পুরোনো প্রজন্মের মোবাইল ফোন সহ সমস্ত ডিভাইসে CPU কর্মক্ষমতা উন্নত করার জন্য। এটি ছোট মডেলগুলির (3MB এর কম আকারের) জন্য আরও উপযুক্ত, যা আসলে WebGL-এর তুলনায় WASM-এর মাধ্যমে CPU-তে দ্রুত কার্যকর হতে পারে কারণ গ্রাফিক্স প্রসেসরে সামগ্রী আপলোড করার জন্য অতিরিক্ত খরচ হয়।
CPU এক্সিকিউশন - অন্য কোনও পরিবেশ উপলব্ধ না থাকলে ফলব্যাক। এটি তিনটির মধ্যে সবচেয়ে ধীর কিন্তু সর্বদা আপনার জন্য রয়েছে।

দ্রষ্টব্য: আপনি যদি জানেন যে আপনি কোন ডিভাইসে কাজ করবেন, তাহলে আপনি এই ব্যাকএন্ডগুলির মধ্যে একটিকে জোর করে ব্যবহার করতে পারেন, অথবা যদি আপনি এটি নির্দিষ্ট না করেন তবে TensorFlow.js কে আপনার জন্য সিদ্ধান্ত নিতে দিতে পারেন।

ক্লায়েন্ট সাইড সুপার পাওয়ার

ক্লায়েন্ট মেশিনে ওয়েব ব্রাউজারে TensorFlow.js চালানোর ফলে বেশ কিছু সুবিধা পাওয়া যেতে পারে যা বিবেচনা করার মতো।

গোপনীয়তা

আপনি তৃতীয় পক্ষের ওয়েব সার্ভারে ডেটা না পাঠিয়ে ক্লায়েন্ট মেশিনে ডেটা প্রশিক্ষণ এবং শ্রেণীবদ্ধ করতে পারেন। এমন সময় আসতে পারে যখন স্থানীয় আইন মেনে চলার প্রয়োজন হতে পারে, যেমন GDPR, অথবা এমন কোনও ডেটা প্রক্রিয়াকরণের সময় যা ব্যবহারকারী তাদের মেশিনে রাখতে চান এবং তৃতীয় পক্ষের কাছে না পাঠান।

গতি

যেহেতু আপনাকে কোনও রিমোট সার্ভারে ডেটা পাঠাতে হবে না, তাই অনুমান (ডেটা শ্রেণীবদ্ধ করার কাজ) দ্রুততর হতে পারে। আরও ভালো, ব্যবহারকারী যদি আপনাকে অ্যাক্সেস দেয় তবে আপনি ডিভাইসের সেন্সর যেমন ক্যামেরা, মাইক্রোফোন, জিপিএস, অ্যাক্সিলোমিটার এবং আরও অনেক কিছুতে সরাসরি অ্যাক্সেস পাবেন।

নাগাল এবং স্কেল

এক ক্লিকেই বিশ্বের যে কেউ আপনার পাঠানো লিঙ্কে ক্লিক করতে পারবে, তাদের ব্রাউজারে ওয়েব পৃষ্ঠা খুলতে পারবে এবং আপনার তৈরি জিনিস ব্যবহার করতে পারবে। CUDA ড্রাইভার সহ জটিল সার্ভার সাইড লিনাক্স সেটআপের প্রয়োজন নেই এবং আরও অনেক কিছুর প্রয়োজন নেই শুধুমাত্র মেশিন লার্নিং সিস্টেম ব্যবহার করার জন্য।

খরচ

কোনও সার্ভার না থাকার অর্থ হল আপনার HTML, CSS, JS এবং মডেল ফাইলগুলি হোস্ট করার জন্য আপনাকে কেবলমাত্র একটি CDN এর জন্য অর্থ প্রদান করতে হবে। একটি CDN এর খরচ একটি সার্ভার (সম্ভবত গ্রাফিক্স কার্ড সংযুক্ত) 24/7 চালু রাখার চেয়ে অনেক সস্তা।

সার্ভার সাইড বৈশিষ্ট্য

TensorFlow.js এর Node.js বাস্তবায়নের সুবিধা গ্রহণ করলে নিম্নলিখিত বৈশিষ্ট্যগুলি সক্ষম হয়।

সম্পূর্ণ CUDA সমর্থন

সার্ভারের দিকে, গ্রাফিক্স কার্ড ত্বরণের জন্য, আপনাকে অবশ্যই NVIDIA CUDA ড্রাইভার ইনস্টল করতে হবে যাতে TensorFlow গ্রাফিক্স কার্ডের সাথে কাজ করতে পারে (WebGL ব্যবহার করে এমন ব্রাউজারে - কোনও ইনস্টলেশনের প্রয়োজন হয় না)। তবে সম্পূর্ণ CUDA সাপোর্টের মাধ্যমে আপনি গ্রাফিক্স কার্ডের নিম্ন স্তরের ক্ষমতাগুলি সম্পূর্ণরূপে কাজে লাগাতে পারেন, যার ফলে দ্রুত প্রশিক্ষণ এবং অনুমানের সময় আসে। পারফরম্যান্স Python TensorFlow বাস্তবায়নের সাথে সমান কারণ উভয়ই একই C++ ব্যাকএন্ড ভাগ করে।

মডেলের আকার

গবেষণা থেকে প্রাপ্ত অত্যাধুনিক মডেলগুলির জন্য, আপনি হয়তো খুব বড় মডেলগুলির সাথে কাজ করছেন, সম্ভবত গিগাবাইট আকারের। প্রতিটি ব্রাউজার ট্যাবে মেমরি ব্যবহারের সীমাবদ্ধতার কারণে এই মডেলগুলি বর্তমানে ওয়েব ব্রাউজারে চালানো যাবে না। এই বৃহত্তর মডেলগুলি চালানোর জন্য আপনি আপনার নিজস্ব সার্ভারে Node.js ব্যবহার করতে পারেন যাতে এই ধরণের মডেলটি দক্ষতার সাথে চালানোর জন্য প্রয়োজনীয় হার্ডওয়্যার স্পেসিফিকেশন থাকে।

আইওটি

Node.js রাস্পবেরি পাই এর মতো জনপ্রিয় সিঙ্গেল বোর্ড কম্পিউটারগুলিতে সমর্থিত, যার অর্থ আপনি এই জাতীয় ডিভাইসগুলিতেও TensorFlow.js মডেলগুলি কার্যকর করতে পারেন।

গতি

Node.js জাভাস্ক্রিপ্টে লেখা, যার অর্থ এটি ঠিক সময়ে সংকলন করলে উপকৃত হয়। এর অর্থ হল Node.js ব্যবহার করার সময় আপনি প্রায়শই কর্মক্ষমতা বৃদ্ধি দেখতে পাবেন কারণ এটি রানটাইমে অপ্টিমাইজ করা হবে, বিশেষ করে আপনার করা যেকোনো প্রিপ্রসেসিংয়ের ক্ষেত্রে। এর একটি দুর্দান্ত উদাহরণ এই কেস স্টাডিতে দেখা যাবে যেখানে দেখানো হয়েছে যে Hugging Face কীভাবে Node.js ব্যবহার করে তাদের প্রাকৃতিক ভাষা প্রক্রিয়াকরণ মডেলের জন্য 2x কর্মক্ষমতা বৃদ্ধি করেছে।

এখন আপনি TensorFlow.js এর মূল বিষয়গুলি, এটি কোথায় চালানো যেতে পারে এবং কিছু সুবিধা সম্পর্কে বুঝতে পেরেছেন, আসুন এটি দিয়ে দরকারী জিনিসগুলি করা শুরু করি!

৩. প্রাক-প্রশিক্ষিত মডেল

TensorFlow.js বিভিন্ন ধরণের প্রি-ট্রেনড মেশিন লার্নিং (ML) মডেল সরবরাহ করে। এই মডেলগুলি TensorFlow.js টিম দ্বারা প্রশিক্ষিত এবং একটি সহজে ব্যবহারযোগ্য ক্লাসে অন্তর্ভুক্ত করা হয়েছে, এবং মেশিন লার্নিংয়ে আপনার প্রথম পদক্ষেপ নেওয়ার জন্য এটি একটি দুর্দান্ত উপায়। আপনার সমস্যা সমাধানের জন্য একটি মডেল তৈরি এবং প্রশিক্ষণ দেওয়ার পরিবর্তে, আপনি আপনার সূচনা বিন্দু হিসাবে একটি প্রি-ট্রেনড মডেল আমদানি করতে পারেন।

Tensorflow.js মডেলস ফর জাভাস্ক্রিপ্ট পৃষ্ঠায় আপনি সহজেই ব্যবহারযোগ্য প্রাক-প্রশিক্ষিত মডেলগুলির একটি ক্রমবর্ধমান তালিকা খুঁজে পেতে পারেন। TensorFlow.js-এ কাজ করে এমন রূপান্তরিত TensorFlow মডেলগুলি পেতে পারেন এমন আরও কিছু জায়গা রয়েছে, যার মধ্যে TensorFlow Hub ও রয়েছে।

আমি কেন একটি পূর্ব-প্রশিক্ষিত মডেল ব্যবহার করতে চাইব?

একটি জনপ্রিয় প্রাক-প্রশিক্ষিত মডেল দিয়ে শুরু করার অনেক সুবিধা রয়েছে যদি এটি আপনার পছন্দসই ব্যবহারের ক্ষেত্রে উপযুক্ত হয়, যেমন:

প্রশিক্ষণের তথ্য নিজে সংগ্রহ করার প্রয়োজন নেই। সঠিক ফরম্যাটে তথ্য প্রস্তুত করা এবং লেবেল করা যাতে মেশিন লার্নিং সিস্টেম তা ব্যবহার করে শিখতে পারে, তা খুবই সময়সাপেক্ষ এবং ব্যয়বহুল হতে পারে।
কম খরচ এবং সময় নিয়ে দ্রুত একটি ধারণা প্রোটোটাইপ করার ক্ষমতা।
যখন একটি পূর্ব-প্রশিক্ষিত মডেল আপনার প্রয়োজন অনুযায়ী যথেষ্ট ভালো হতে পারে, তখন "চাকা পুনরায় উদ্ভাবন" করার কোন মানে হয় না, যা আপনাকে আপনার সৃজনশীল ধারণা বাস্তবায়নের জন্য মডেলের প্রদত্ত জ্ঞান ব্যবহারে মনোনিবেশ করার সুযোগ দেয়।
অত্যাধুনিক গবেষণার ব্যবহার। প্রাক-প্রশিক্ষিত মডেলগুলি প্রায়শই জনপ্রিয় গবেষণার উপর ভিত্তি করে তৈরি হয়, যা আপনাকে এই ধরণের মডেলগুলির সাথে পরিচিত হওয়ার সুযোগ দেয়, একই সাথে বাস্তব জগতে তাদের কর্মক্ষমতাও বুঝতে সাহায্য করে।
ব্যবহারের সহজতা এবং বিস্তৃত ডকুমেন্টেশন। এই ধরনের মডেলের জনপ্রিয়তার কারণে।
ট্রান্সফার লার্নিং ক্যাপাসিটিজ । কিছু প্রাক-প্রশিক্ষিত মডেল ট্রান্সফার লার্নিং ক্যাপাসিটিজ অফার করে, যা মূলত একটি মেশিন লার্নিং টাস্ক থেকে শেখা তথ্য অন্য একটি অনুরূপ উদাহরণে স্থানান্তর করার অনুশীলন। উদাহরণস্বরূপ, যে মডেলটিকে মূলত বিড়াল চিনতে প্রশিক্ষণ দেওয়া হয়েছিল, তাকে কুকুর চিনতে পুনরায় প্রশিক্ষণ দেওয়া যেতে পারে, যদি আপনি তাকে নতুন প্রশিক্ষণ ডেটা দেন। এটি দ্রুত হবে কারণ আপনি একটি ফাঁকা ক্যানভাস দিয়ে শুরু করবেন না। মডেলটি বিড়াল চিনতে ইতিমধ্যে যা শিখেছে তা ব্যবহার করে নতুন জিনিসটি চিনতে পারে - সর্বোপরি কুকুরেরও চোখ এবং কান আছে, তাই যদি এটি ইতিমধ্যেই এই বৈশিষ্ট্যগুলি কীভাবে খুঁজে বের করতে হয় তা জানে, তাহলে আমরা অর্ধেক পথ পাড়ি দিয়েছি। আপনার নিজস্ব ডেটাতে মডেলটিকে আরও দ্রুততর উপায়ে পুনরায় প্রশিক্ষণ দিন।

COCO-SSD কী?

COCO-SSD হল একটি পূর্ব-প্রশিক্ষিত অবজেক্ট ডিটেকশন ML মডেলের নাম যা আপনি এই কোডল্যাবের সময় ব্যবহার করবেন, যার লক্ষ্য হল একটি ছবিতে একাধিক অবজেক্টকে স্থানীয়করণ এবং সনাক্ত করা। অন্য কথায়, এটি আপনাকে প্রশিক্ষিত অবজেক্টের বাউন্ডিং বক্স জানাতে পারে যা আপনাকে আপনার উপস্থাপন করা যেকোনো ছবিতে সেই অবজেক্টের অবস্থান জানাতে পারে। নীচের ছবিতে একটি উদাহরণ দেখানো হয়েছে:

760e5f87c335dd9e.png সম্পর্কে

উপরের ছবিতে যদি ১টির বেশি কুকুর থাকে, তাহলে আপনাকে ২টি বাউন্ডিং বাক্সের স্থানাঙ্ক দেওয়া হবে, যেখানে প্রতিটির অবস্থান বর্ণনা করা হবে। COCO-SSD-কে ৯০টি সাধারণ দৈনন্দিন জিনিস , যেমন একজন ব্যক্তি, একটি গাড়ি, একটি বিড়াল ইত্যাদি চিনতে প্রশিক্ষিত করা হয়েছে।

নামটি কোথা থেকে এসেছে?

নামটি অদ্ভুত শোনাতে পারে কিন্তু এটি দুটি সংক্ষিপ্ত রূপ থেকে এসেছে:

COCO: এটি COCO (Common Objects in Context) ডেটাসেটে প্রশিক্ষিত হওয়ার বিষয়টি বোঝায় যা যে কেউ তাদের নিজস্ব মডেলগুলিকে প্রশিক্ষণ দেওয়ার সময় ডাউনলোড এবং ব্যবহার করতে বিনামূল্যে উপলব্ধ। ডেটাসেটে 200,000 এরও বেশি লেবেলযুক্ত ছবি রয়েছে যা থেকে শেখার জন্য ব্যবহার করা যেতে পারে।
SSD (সিঙ্গেল শট মাল্টিবক্স ডিটেকশন): মডেলের বাস্তবায়নে ব্যবহৃত মডেল আর্কিটেকচারের অংশকে বোঝায়। কোডল্যাবের জন্য আপনাকে এটি বুঝতে হবে না, তবে আপনি যদি আগ্রহী হন তবে আপনি এখানে SSD সম্পর্কে আরও জানতে পারেন।

৪. সেট আপ করুন

তোমার যা লাগবে

একটি আধুনিক ওয়েব ব্রাউজার।
HTML, CSS, JavaScript, এবং Chrome DevTools (কনসোল আউটপুট দেখা) সম্পর্কে প্রাথমিক জ্ঞান।

চলো কোডিং শুরু করি

Glitch.com অথবা Codepen.io এর জন্য শুরু করার জন্য Boilerplate টেমপ্লেট তৈরি করা হয়েছে। আপনি কেবল এক ক্লিকে এই কোড ল্যাবের জন্য আপনার বেস স্টেট হিসাবে যেকোনো টেমপ্লেট ক্লোন করতে পারেন।

গ্লিচে, রিমিক্স দিস বোতামে ক্লিক করে এটিকে ফোর্ক করুন এবং সম্পাদনা করার জন্য নতুন ফাইল তৈরি করুন।

অথবা, কোডপেনে, স্ক্রিনের নীচের ডানদিকে অবস্থিত ফর্ক- এ ক্লিক করুন।

এই খুব সহজ কঙ্কালটি আপনাকে নিম্নলিখিত ফাইলগুলি সরবরাহ করে:

HTML পৃষ্ঠা (index.html)
স্টাইলশিট (style.css)
আমাদের জাভাস্ক্রিপ্ট কোড লেখার জন্য ফাইল (script.js)

আপনার সুবিধার জন্য, TensorFlow.js লাইব্রেরির জন্য HTML ফাইলে একটি অতিরিক্ত আমদানি করা হয়েছে। এটি দেখতে এরকম:

সূচক.html

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

বিকল্প: আপনার পছন্দের ওয়েবএডিটর ব্যবহার করুন অথবা স্থানীয়ভাবে কাজ করুন

যদি আপনি কোডটি ডাউনলোড করে স্থানীয়ভাবে কাজ করতে চান, অথবা অন্য কোনও অনলাইন এডিটরে কাজ করতে চান, তাহলে একই ডিরেক্টরিতে উপরে উল্লেখিত 3টি ফাইল তৈরি করুন এবং আমাদের গ্লিচ বয়লারপ্লেট থেকে কোডটি কপি করে প্রতিটিতে পেস্ট করুন।

৫. HTML কঙ্কাল পূরণ করুন

সকল প্রোটোটাইপের জন্য কিছু মৌলিক HTML স্ক্যাফোল্ডিং প্রয়োজন। আপনি পরে মেশিন লার্নিং মডেলের আউটপুট রেন্ডার করার জন্য এটি ব্যবহার করবেন। এখন এটি সেট আপ করা যাক:

পৃষ্ঠার জন্য একটি শিরোনাম
কিছু বর্ণনামূলক লেখা
ওয়েবক্যাম সক্রিয় করার জন্য একটি বোতাম
ওয়েবক্যাম স্ট্রিম রেন্ডার করার জন্য একটি ভিডিও ট্যাগ

এই বৈশিষ্ট্যগুলি সেট আপ করতে, index.html খুলুন এবং বিদ্যমান কোডের উপর নিম্নলিখিতগুলি পেস্ট করুন:

সূচক.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> ট্যাগ এবং পৃষ্ঠাটি কীভাবে ব্যবহার করবেন সে সম্পর্কে কিছু তথ্য যোগ করেছেন। এখানে বিশেষ কিছু নেই।

আপনি আপনার ডেমো স্পেসের প্রতিনিধিত্বকারী একটি বিভাগ ট্যাগও যোগ করেছেন:

সূচক.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 "অদৃশ্য" এর একটি শ্রেণী দেবেন। এটি যাতে মডেলটি প্রস্তুত হলে ব্যবহারকারীকে দৃশ্যত চিত্রিত করতে পারেন এবং ওয়েবক্যাম সক্ষম করুন বোতামটি ক্লিক করা নিরাপদ।
আপনি ওয়েবক্যাম সক্ষম করুন বোতামটি যোগ করেছেন, যা আপনি আপনার CSS-এ স্টাইল করবেন।
আপনি একটি ভিডিও ট্যাগও যোগ করেছেন, যেখানে আপনি আপনার ওয়েবক্যাম ইনপুট স্ট্রিম করবেন। আপনি শীঘ্রই এটি আপনার জাভাস্ক্রিপ্ট কোডে সেট আপ করবেন।

যদি আপনি এখনই আউটপুটটির প্রিভিউ দেখেন, তাহলে এটি এরকম কিছু দেখাবে:

b1bfb8c3de68845c.png সম্পর্কে

৬. স্টাইল যোগ করুন

এলিমেন্ট ডিফল্ট

প্রথমে, আমরা যে 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;
}

দারুন! আপনার যা দরকার তা হল। যদি আপনি উপরের দুটি কোড দিয়ে আপনার স্টাইল সফলভাবে ওভাররাইট করে থাকেন, তাহলে আপনার লাইভ প্রিভিউ এখন এইরকম দেখাবে:

336899a78cf80fcb.png সম্পর্কে

লক্ষ্য করুন কিভাবে ডেমো এরিয়া টেক্সট এবং বোতামটি অনুপলব্ধ, কারণ HTML-এ ডিফল্টভাবে "ইনভিজিবল" ক্লাস প্রয়োগ করা থাকে। মডেলটি ব্যবহারের জন্য প্রস্তুত হয়ে গেলে আপনি জাভাস্ক্রিপ্ট ব্যবহার করে এই ক্লাসটি সরিয়ে ফেলবেন।

৭. জাভাস্ক্রিপ্ট স্কেলেটন তৈরি করুন

মূল 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');

চেষ্টা করে দেখুন! এই মুহুর্তে, যদি আপনি বর্তমান কোডটি যেমন আছে তেমনভাবে চালান এবং এটি উপলব্ধ হওয়ার পরে বোতামটি ক্লিক করেন, তাহলে আপনার ওয়েব ব্রাউজারে আপনার ওয়েবক্যামে অ্যাক্সেস গ্রহণ করার পরে (যা সাধারণত ব্রাউজারের উপরের বাম দিকে একটি পপআপ হিসাবে প্রদর্শিত হবে) আপনি এখন একটি লাইভ ওয়েবক্যাম ভিউ খোলা দেখতে পাবেন।

দারুন! যদি আপনি কোডটি রান করে বর্তমান অবস্থায় থাকা বোতামটিতে ক্লিক করেন, তাহলে আপনি এরকম কিছু দেখতে পাবেন:

95442d7227216528.jpeg সম্পর্কে

৮. মেশিন লার্নিং মডেলের ব্যবহার

মডেল লোড হচ্ছে

আপনি এখন 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 ডকুমেন্টেশনে এখানে পাবেন। । এই ফাংশনটি পর্দার আড়ালে অনেক কাজ করে: এটি যেকোনো "image like" বস্তুকে তার প্যারামিটার হিসেবে গ্রহণ করতে পারে, যেমন একটি ছবি, একটি ভিডিও, একটি ক্যানভাস, ইত্যাদি। আগে থেকে তৈরি মডেল ব্যবহার করলে আপনার অনেক সময় এবং শ্রম সাশ্রয় হতে পারে, কারণ আপনাকে এই কোডটি নিজে লিখতে হবে না এবং এটি "আউট অফ দ্য বক্স" ব্যবহার করতে পারবেন।

এই কোডটি রান করলে এখন আপনার এমন একটি ছবি আসবে যা দেখতে এরকম কিছু হবে:

8f9bad6e49e646b.png সম্পর্কে

অবশেষে, এখানে একই সময়ে একাধিক বস্তু সনাক্ত করার কোডের একটি উদাহরণ দেওয়া হল:

a2c73a72cf976b22.jpeg সম্পর্কে

ওহ! এখন আপনি কল্পনা করতে পারেন যে, সোফায় কুকুর বা সোফায় বিড়াল দেখলেই আপনাকে সতর্ক করার জন্য একটি পুরনো ফোন ব্যবহার করে নেস্ট ক্যামের মতো একটি ডিভাইস তৈরি করা কতটা সহজ হবে। যদি আপনার কোড নিয়ে সমস্যা হয়, তাহলে আমার শেষ কার্যকরী সংস্করণটি এখানে দেখুন যে আপনি কিছু ভুলভাবে কপি করেছেন কিনা।

৯. অভিনন্দন

অভিনন্দন, আপনি ওয়েব ব্রাউজারে TensorFlow.js এবং মেশিন লার্নিং ব্যবহারের ক্ষেত্রে প্রথম পদক্ষেপ নিয়েছেন! এখন আপনার দায়িত্ব এই নম্র সূচনাটি গ্রহণ করা এবং এটিকে সৃজনশীল কিছুতে পরিণত করা। আপনি কী তৈরি করবেন?

সংক্ষিপ্তসার

এই কোডল্যাবে আমরা:

TensorFlow.js-এর অন্যান্য রূপের তুলনায় ব্যবহারের সুবিধাগুলি শিখেছি।
কোন পরিস্থিতিতে আপনি একটি পূর্ব-প্রশিক্ষিত মেশিন লার্নিং মডেল দিয়ে শুরু করতে চাইতে পারেন তা শিখেছি।
একটি সম্পূর্ণরূপে কার্যকরী ওয়েব পৃষ্ঠা তৈরি করা হয়েছে যা আপনার ওয়েবক্যাম ব্যবহার করে রিয়েল টাইমে বস্তুগুলিকে শ্রেণীবদ্ধ করতে পারে, যার মধ্যে রয়েছে:
কন্টেন্টের জন্য একটি HTML স্কেলিটন তৈরি করা
HTML উপাদান এবং ক্লাসের জন্য শৈলী নির্ধারণ করা
HTML এর সাথে ইন্টারঅ্যাক্ট করার জন্য এবং ওয়েবক্যামের উপস্থিতি সনাক্ত করার জন্য জাভাস্ক্রিপ্ট স্ক্যাফোল্ডিং সেট আপ করা
একটি পূর্ব-প্রশিক্ষিত TensorFlow.js মডেল লোড করা হচ্ছে
লোড করা মডেল ব্যবহার করে ওয়েবক্যাম স্ট্রিমের ক্রমাগত শ্রেণীবিভাগ করা এবং ছবিতে থাকা বস্তুর চারপাশে একটি বাউন্ডিং বক্স আঁকা।

পরবর্তী পদক্ষেপ

আপনার তৈরি জিনিস আমাদের সাথে শেয়ার করুন! এই কোডল্যাবের জন্য আপনি যা তৈরি করেছেন তা সহজেই অন্যান্য সৃজনশীল ব্যবহারের ক্ষেত্রেও প্রসারিত করতে পারেন। আমরা আপনাকে বাক্সের বাইরে চিন্তা করতে এবং কাজ শেষ করার পরেও হ্যাকিং চালিয়ে যেতে উৎসাহিত করি।

এই মডেলটি কোন কোন বস্তু চিনতে পারে তা পরীক্ষা করে দেখুন এবং ভাবুন কিভাবে আপনি সেই জ্ঞান ব্যবহার করে কোনও কাজ সম্পাদন করতে পারেন। আজ আপনি যা তৈরি করেছেন তা প্রসারিত করে এখন কোন সৃজনশীল ধারণাগুলি বাস্তবায়ন করা যেতে পারে?

(হয়তো আপনি একটি সাধারণ সার্ভার সাইড লেয়ার যোগ করতে পারেন যাতে অন্য ডিভাইসটি যখন আপনার পছন্দের কোনও নির্দিষ্ট বস্তু দেখে তখন ওয়েবসকেট ব্যবহার করে একটি বিজ্ঞপ্তি প্রদান করতে পারে। এটি একটি পুরানো স্মার্টফোনকে আপসাইকেল করার এবং এটিকে একটি নতুন উদ্দেশ্য দেওয়ার একটি দুর্দান্ত উপায় হবে। সম্ভাবনা সীমাহীন!)

আপনার প্রকল্পটি আমাদের TensorFlow ব্লগে প্রদর্শিত হওয়ার সুযোগ পেতে অথবা ভবিষ্যতে TensorFlow ইভেন্টগুলিতে প্রদর্শিত হওয়ার জন্য #MadeWithTFJS হ্যাশট্যাগ ব্যবহার করে সোশ্যাল মিডিয়ায় আমাদের ট্যাগ করুন।

১. শুরু করার আগে

পূর্বশর্ত

তুমি কী তৈরি করবে

তুমি কি শিখবে

২. TensorFlow.js কি?

এটা কোথায় ব্যবহার করা যেতে পারে?

ক্লায়েন্ট সাইড সুপার পাওয়ার

গোপনীয়তা

গতি

নাগাল এবং স্কেল

খরচ

সার্ভার সাইড বৈশিষ্ট্য

সম্পূর্ণ CUDA সমর্থন

মডেলের আকার

আইওটি

গতি

৩. প্রাক-প্রশিক্ষিত মডেল

আমি কেন একটি পূর্ব-প্রশিক্ষিত মডেল ব্যবহার করতে চাইব?

COCO-SSD কী?

নামটি কোথা থেকে এসেছে?

৪. সেট আপ করুন

তোমার যা লাগবে

চলো কোডিং শুরু করি

সূচক.html

বিকল্প: আপনার পছন্দের ওয়েবএডিটর ব্যবহার করুন অথবা স্থানীয়ভাবে কাজ করুন

৫. HTML কঙ্কাল পূরণ করুন

সূচক.html

কোডটি বুঝুন

সূচক.html

৬. স্টাইল যোগ করুন

এলিমেন্ট ডিফল্ট

স্টাইল.সিএসএস

স্টাইল.সিএসএস

৭. জাভাস্ক্রিপ্ট স্কেলেটন তৈরি করুন

মূল DOM উপাদানগুলি উল্লেখ করা হচ্ছে

স্ক্রিপ্ট.জেএস

ওয়েবক্যাম সাপোর্ট আছে কিনা তা পরীক্ষা করুন

স্ক্রিপ্ট.জেএস

ওয়েবক্যাম স্ট্রিম আনা হচ্ছে

স্ক্রিপ্ট.জেএস

স্ক্রিপ্ট.জেএস

৮. মেশিন লার্নিং মডেলের ব্যবহার

মডেল লোড হচ্ছে

স্ক্রিপ্ট.জেএস

৯. অভিনন্দন

সংক্ষিপ্তসার

পরবর্তী পদক্ষেপ

আরও গভীরে যেতে আরও TensorFlow.js কোডল্যাব

দেখার জন্য ওয়েবসাইটগুলি