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

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

1. আপনি শুরু করার আগে

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

পূর্বশর্ত

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

আপনি কি নির্মাণ করবেন

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

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

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

আপনি কি শিখবেন

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

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

2. TensorFlow.js কি?

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

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

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

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

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

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

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

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

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

গোপনীয়তা

আপনি 3য় পক্ষের ওয়েব সার্ভারে কখনও ডেটা না পাঠিয়ে ক্লায়েন্ট মেশিনে ডেটা প্রশিক্ষণ এবং শ্রেণিবদ্ধ করতে পারেন। এমন কিছু সময় থাকতে পারে যেখানে স্থানীয় আইন মেনে চলার জন্য এটির প্রয়োজন হতে পারে, যেমন 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 Raspberry Pi এর মত জনপ্রিয় একক বোর্ড কম্পিউটারে সমর্থিত, যার মানে হল আপনি এই ধরনের ডিভাইসেও TensorFlow.js মডেলগুলি চালাতে পারেন।

গতি

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

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

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

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

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

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

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

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

COCO-SSD কি?

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

উপরের ছবিতে 1টির বেশি কুকুর থাকলে, আপনাকে প্রতিটির অবস্থান বর্ণনা করে 2টি বাউন্ডিং বাক্সের স্থানাঙ্ক দেওয়া হবে৷ COCO-SSD 90টি সাধারণ দৈনন্দিন বস্তু , যেমন একজন ব্যক্তি, একটি গাড়ি, একটি বিড়াল ইত্যাদি চিনতে পূর্ব-প্রশিক্ষিত হয়েছে।

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

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

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

4. সেট আপ করুন

আপনি কি প্রয়োজন হবে

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

কোডিং করা যাক

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

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

বিকল্পভাবে, কোডপেনে, স্ক্রিনের নীচের নীচে ডানদিকে ফর্ক ক্লিক করুন।

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

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

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

index.html

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

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

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

5. HTML কঙ্কাল পপুলেট করুন

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

আপনি যদি এখনই আউটপুটটির পূর্বরূপ দেখেন তবে এটি দেখতে এরকম কিছু হওয়া উচিত:

6. শৈলী যোগ করুন

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

প্রথমে, আসুন সঠিকভাবে রেন্ডার নিশ্চিত করার জন্য আমরা এইমাত্র যোগ করা HTML উপাদানগুলির জন্য শৈলী যোগ করি:

style.css

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

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

video {
  display: block;
}

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

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

style.css

.removed {
  display: none;
}

.invisible {
  opacity: 0.2;
}

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

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

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

দারুণ! যে সব আপনার প্রয়োজন. আপনি যদি উপরের কোডের 2 টুকরো দিয়ে আপনার শৈলীগুলি সফলভাবে ওভাররাইট করেন, তাহলে আপনার লাইভ প্রিভিউ এখন এইরকম হওয়া উচিত:

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

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

মূল DOM উপাদান উল্লেখ করা

প্রথমে, নিশ্চিত করুন যে আপনি পৃষ্ঠার মূল অংশগুলি অ্যাক্সেস করতে পারেন যা আপনাকে ম্যানিপুলেট করতে বা পরে আমাদের কোডে অ্যাক্সেস করতে হবে:

script.js

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

ওয়েবক্যাম সমর্থন জন্য পরীক্ষা করুন

আপনি যে ব্রাউজারটি ব্যবহার করছেন সেটি getUserMedia এর মাধ্যমে ওয়েবক্যাম স্ট্রিম অ্যাক্সেস করা সমর্থন করে কিনা তা পরীক্ষা করতে আপনি এখন কিছু সহায়ক ফাংশন যোগ করতে পারেন:

script.js

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

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

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

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

এর পরে, নীচের কোডটি অনুলিপি এবং পেস্ট করে আমরা উপরে সংজ্ঞায়িত পূর্বে খালি enableCam ফাংশনের জন্য কোডটি পূরণ করুন:

script.js

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

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

অবশেষে, কিছু অস্থায়ী কোড যোগ করুন যাতে আপনি ওয়েবক্যাম কাজ করছে কিনা তা পরীক্ষা করতে পারেন।

নীচের কোডটি আপনার মডেল লোড হওয়ার ভান করবে এবং ক্যামেরা বোতামটি সক্ষম করবে, যাতে আপনি এটিতে ক্লিক করতে পারেন। আপনি পরবর্তী ধাপে এই সমস্ত কোড প্রতিস্থাপন করবেন, তাই কিছুক্ষণের মধ্যে এটি আবার মুছে ফেলার জন্য প্রস্তুত থাকুন:

script.js

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

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

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

দারুণ! আপনি যদি কোডটি চালান এবং বোতামটি ক্লিক করেন যেমন এটি বর্তমানে দাঁড়িয়ে আছে আপনার এরকম কিছু দেখতে হবে:

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

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

আপনি এখন COCO-SSD মডেল লোড করার জন্য প্রস্তুত৷

এটি আরম্ভ করা শেষ হলে, আপনার ওয়েব পৃষ্ঠায় ডেমো এলাকা এবং বোতাম সক্ষম করুন (শেষ ধাপের শেষে আপনি যে অস্থায়ী কোডটি যোগ করেছেন তার উপরে এই কোডটি আটকান):

script.js

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

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

একবার আপনি উপরের কোডটি যোগ করলে এবং লাইভ ভিউ রিফ্রেশ করলে, আপনি লক্ষ্য করবেন যে পৃষ্ঠাটি লোড হওয়ার কয়েক সেকেন্ড পরে (আপনার নেটওয়ার্ক গতির উপর নির্ভর করে) সক্ষম ওয়েবক্যাম বোতামটি স্বয়ংক্রিয়ভাবে প্রদর্শিত হবে যখন মডেলটি ব্যবহারের জন্য প্রস্তুত হবে৷ যাইহোক, আপনি predictWebcam ফাংশন উপর আটকান. সুতরাং এখন এটি সম্পূর্ণরূপে সংজ্ঞায়িত করার সময়, কারণ আমাদের কোড বর্তমানে কিছুই করবে না।

পরবর্তী ধাপে!

ওয়েবক্যাম থেকে একটি ফ্রেম শ্রেণীবদ্ধ করা

ব্রাউজার প্রস্তুত হলে অ্যাপটিকে ওয়েবক্যাম স্ট্রীম থেকে ক্রমাগত একটি ফ্রেম দখল করার অনুমতি দিতে নীচের কোডটি চালান এবং এটিকে শ্রেণীবদ্ধ করার জন্য মডেলে পাঠান৷

মডেলটি তারপর ফলাফলগুলিকে পার্স করবে এবং ফিরে আসা স্থানাঙ্কগুলিতে একটি <p> ট্যাগ আঁকবে এবং টেক্সটটিকে বস্তুর লেবেলে সেট করবে, যদি এটি একটি নির্দিষ্ট স্তরের আত্মবিশ্বাসের উপরে হয়।

script.js

var children = [];

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

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

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

এই নতুন কোডে সত্যিই গুরুত্বপূর্ণ কল হল model.detect() ।

TensorFlow.js-এর জন্য সমস্ত পূর্ব-তৈরি মডেলের এইরকম একটি ফাংশন থাকে (যার নাম মডেল থেকে মডেলে পরিবর্তিত হতে পারে, তাই বিস্তারিত জানার জন্য ডক্স দেখুন) যা আসলে মেশিন লার্নিং ইনফারেন্স সম্পাদন করে।

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

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

এই কোডটি চালানোর ফলে এখন আপনাকে এমন একটি চিত্র দেওয়া উচিত যা এইরকম কিছু দেখায়:

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

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

9. অভিনন্দন

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

রিক্যাপ

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

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

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

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

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

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

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

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

1. আপনি শুরু করার আগে

পূর্বশর্ত

আপনি কি নির্মাণ করবেন

আপনি কি শিখবেন

2. TensorFlow.js কি?

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

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

গোপনীয়তা

গতি

পৌঁছান এবং স্কেল করুন

খরচ

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

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

মডেলের আকার

আইওটি

গতি

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

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

COCO-SSD কি?

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

4. সেট আপ করুন

আপনি কি প্রয়োজন হবে

কোডিং করা যাক

index.html

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

5. HTML কঙ্কাল পপুলেট করুন

index.html

কোড বুঝুন

index.html

6. শৈলী যোগ করুন

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

style.css

style.css

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

মূল DOM উপাদান উল্লেখ করা

script.js

ওয়েবক্যাম সমর্থন জন্য পরীক্ষা করুন

script.js

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

script.js

script.js

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

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

script.js

9. অভিনন্দন

রিক্যাপ

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

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

চেক আউট ওয়েবসাইট