این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

ساخت یک وب کم هوشمند در جاوا اسکریپت با یک مدل آموزش ماشینی از پیش آموزش دیده TensorFlow.js

۱. قبل از شروع

یادگیری ماشین این روزها کاملاً بر سر زبان‌هاست. به نظر می‌رسد کاربردهای آن بدون محدودیت است و به نظر می‌رسد که در آینده نزدیک تقریباً در هر صنعتی کاربرد خواهد داشت. اگر به عنوان مهندس یا طراح، چه در بخش فرانت‌اند و چه در بخش بک‌اند کار می‌کنید و با جاوا اسکریپت آشنا هستید، این آزمایشگاه کد برای کمک به شما در شروع افزودن یادگیری ماشین به مجموعه مهارت‌هایتان نوشته شده است.

پیش‌نیازها

این آزمایشگاه کد برای مهندسان باتجربه‌ای که از قبل با جاوا اسکریپت آشنا هستند نوشته شده است.

آنچه خواهید ساخت

در این آزمایشگاه کد، شما

یک صفحه وب ایجاد کنید که از یادگیری ماشینی مستقیماً در مرورگر وب از طریق TensorFlow.js برای طبقه‌بندی و تشخیص اشیاء رایج (بله، شامل بیش از یک شیء به طور همزمان) از یک جریان وب‌کم زنده استفاده کند.
وب‌کم معمولی خود را برای شناسایی اشیاء و دریافت مختصات کادر محدوده هر شیء که پیدا می‌کند، تقویت کنید.
شیء یافت شده را در جریان ویدیو، همانطور که در زیر نشان داده شده است، هایلایت کنید:

تصور کنید که بتوانید تشخیص دهید که آیا شخصی در یک ویدیو حضور دارد یا خیر، بنابراین می‌توانید تعداد افراد حاضر در هر زمان معین را بشمارید تا تخمین بزنید که یک منطقه خاص در طول روز چقدر شلوغ بوده است، یا وقتی سگ شما در اتاقی از خانه‌تان که شاید نباید در آن باشد، شناسایی شد، برای خودتان هشدار ارسال کنید. اگر بتوانید این کار را انجام دهید، در مسیر ساخت نسخه خودتان از دوربین Google Nest قرار خواهید گرفت که می‌تواند با استفاده از سخت‌افزار سفارشی شما، هنگام مشاهده یک مزاحم (از هر نوع) به شما هشدار دهد! خیلی جالب است. انجامش سخت است؟ نه. بیایید هک کنیم...

آنچه یاد خواهید گرفت

نحوه بارگذاری یک مدل از پیش آموزش دیده TensorFlow.js.
چگونه داده‌ها را از یک پخش زنده وب‌کم دریافت کنیم و آنها را روی بوم نقاشی بکشیم.
چگونه یک فریم تصویر را برای یافتن کادر(های) مرزی هر شیء(هایی) که مدل برای تشخیص آنها آموزش دیده است، طبقه‌بندی کنیم.
نحوه استفاده از داده‌های ارسالی از مدل برای برجسته کردن اشیاء یافت شده.

این آزمایشگاه کد بر نحوه شروع به کار با مدل‌های از پیش آموزش‌دیده TensorFlow.js تمرکز دارد. مفاهیم و بلوک‌های کدی که به TensorFlow.js و یادگیری ماشین مربوط نیستند، توضیح داده نشده‌اند و برای کپی و پیست ساده در اختیار شما قرار گرفته‌اند.

۲. TensorFlow.js چیست؟

TensorFlow.js یک کتابخانه یادگیری ماشین متن‌باز است که می‌تواند در هر جایی که جاوااسکریپت می‌تواند اجرا شود، اجرا شود. این کتابخانه بر اساس کتابخانه اصلی TensorFlow نوشته شده در پایتون است و هدف آن ایجاد مجدد این تجربه توسعه‌دهنده و مجموعه APIها برای اکوسیستم جاوااسکریپت است.

کجاها میشه ازش استفاده کرد؟

با توجه به قابلیت حمل جاوا اسکریپت، اکنون می‌توانید با یک زبان برنامه‌نویسی بنویسید و یادگیری ماشین را در تمام پلتفرم‌های زیر به راحتی انجام دهید:

سمت کلاینت در مرورگر وب با استفاده از جاوا اسکریپت معمولی
سمت سرور و حتی دستگاه‌های اینترنت اشیا مانند رزبری پای با استفاده از Node.js
برنامه‌های دسکتاپ با استفاده از الکترون
اپلیکیشن‌های موبایل نیتیو با استفاده از React Native

TensorFlow.js همچنین از چندین backend در هر یک از این محیط‌ها پشتیبانی می‌کند (محیط‌های مبتنی بر سخت‌افزار واقعی که می‌تواند در آنها اجرا شود، مانند CPU یا WebGL. به عنوان مثال، "backend" در این زمینه به معنای محیط سمت سرور نیست - backend برای اجرا می‌تواند به عنوان مثال سمت کلاینت در WebGL باشد) تا سازگاری را تضمین کند و همچنین سرعت اجرا را حفظ کند. در حال حاضر TensorFlow.js از موارد زیر پشتیبانی می‌کند:

اجرای WebGL روی کارت گرافیک دستگاه (GPU) - این سریع‌ترین راه برای اجرای مدل‌های بزرگتر (با حجم بیش از ۳ مگابایت) با شتاب‌دهی GPU است.
اجرای Web Assembly (WASM) روی CPU - برای بهبود عملکرد CPU در دستگاه‌ها، از جمله تلفن‌های همراه نسل قدیمی‌تر، به عنوان مثال. این برای مدل‌های کوچکتر (با اندازه کمتر از ۳ مگابایت) مناسب‌تر است که در واقع می‌توانند به دلیل سربار آپلود محتوا به پردازنده گرافیکی، با WASM سریع‌تر از WebGL روی CPU اجرا شوند.
اجرای CPU - در صورتی که هیچ یک از محیط‌های دیگر در دسترس نباشند، پشتیبان خواهد بود. این کندترین از بین این سه است، اما همیشه برای شما وجود دارد.

توجه: اگر می‌دانید روی چه دستگاهی اجرا خواهید کرد، می‌توانید یکی از این backendها را به صورت اجباری انتخاب کنید، یا اگر این مورد را مشخص نکنید، می‌توانید به سادگی اجازه دهید TensorFlow.js برای شما تصمیم بگیرد.

قدرت‌های فوق‌العاده سمت کلاینت

اجرای TensorFlow.js در مرورگر وب روی دستگاه کلاینت می‌تواند مزایای متعددی داشته باشد که ارزش بررسی دارند.

حریم خصوصی

شما می‌توانید داده‌ها را روی دستگاه کلاینت، بدون ارسال داده‌ها به یک وب سرور شخص ثالث، هم آموزش دهید و هم طبقه‌بندی کنید. ممکن است مواقعی وجود داشته باشد که این امر مستلزم رعایت قوانین محلی، مانند GDPR، یا هنگام پردازش هرگونه داده‌ای باشد که کاربر ممکن است بخواهد روی دستگاه خود نگه دارد و به شخص ثالث ارسال نکند.

سرعت

از آنجایی که نیازی به ارسال داده‌ها به یک سرور از راه دور ندارید، استنتاج (عمل طبقه‌بندی داده‌ها) می‌تواند سریع‌تر انجام شود. حتی بهتر از آن، در صورت اجازه کاربر، به حسگرهای دستگاه مانند دوربین، میکروفون، GPS، شتاب‌سنج و موارد دیگر دسترسی مستقیم خواهید داشت.

دسترسی و مقیاس

با یک کلیک، هر کسی در جهان می‌تواند روی لینکی که برایش ارسال می‌کنید کلیک کند، صفحه وب را در مرورگر خود باز کند و از آنچه ساخته‌اید استفاده کند. برای استفاده از سیستم یادگیری ماشین، نیازی به تنظیمات پیچیده سمت سرور لینوکس با درایورهای CUDA و موارد دیگر نیست.

هزینه

نبود سرور به این معنی است که تنها چیزی که باید برای آن هزینه کنید، یک CDN برای میزبانی فایل‌های HTML، CSS، JS و مدل شماست. هزینه CDN بسیار ارزان‌تر از روشن نگه داشتن یک سرور (احتمالاً با کارت گرافیک متصل) به صورت 24 ساعته و 7 روز هفته است.

ویژگی‌های سمت سرور

استفاده از پیاده‌سازی TensorFlow.js در Node.js، ویژگی‌های زیر را فعال می‌کند.

پشتیبانی کامل از CUDA

در سمت سرور، برای شتاب‌دهی کارت گرافیک، باید درایورهای NVIDIA CUDA را نصب کنید تا TensorFlow بتواند با کارت گرافیک کار کند (برخلاف مرورگر که از WebGL استفاده می‌کند - نیازی به نصب نیست). با این حال، با پشتیبانی کامل CUDA می‌توانید از توانایی‌های سطح پایین‌تر کارت گرافیک به طور کامل استفاده کنید که منجر به زمان آموزش و استنتاج سریع‌تر می‌شود. عملکرد با پیاده‌سازی TensorFlow پایتون برابری می‌کند زیرا هر دو از یک backend ++C مشترک استفاده می‌کنند.

اندازه مدل

برای مدل‌های پیشرفته حاصل از تحقیقات، ممکن است با مدل‌های بسیار بزرگی، شاید در حد چند گیگابایت، کار کنید. این مدل‌ها در حال حاضر به دلیل محدودیت‌های استفاده از حافظه در هر تب مرورگر، در مرورگر وب قابل اجرا نیستند. برای اجرای این مدل‌های بزرگتر، می‌توانید از Node.js روی سرور خود با مشخصات سخت‌افزاری مورد نیاز برای اجرای کارآمد چنین مدلی استفاده کنید.

اینترنت اشیا

Node.js روی کامپیوترهای تک برد محبوبی مانند Raspberry Pi پشتیبانی می‌شود، که به نوبه خود به این معنی است که می‌توانید مدل‌های TensorFlow.js را روی چنین دستگاه‌هایی نیز اجرا کنید.

سرعت

Node.js با جاوا اسکریپت نوشته شده است، به این معنی که از کامپایل درجا (just in time compilation) بهره می‌برد. این بدان معناست که هنگام استفاده از Node.js اغلب شاهد افزایش عملکرد خواهید بود، زیرا در زمان اجرا بهینه می‌شود، به خصوص برای هرگونه پیش‌پردازشی که ممکن است انجام دهید. یک مثال عالی از این مورد را می‌توان در این مطالعه موردی مشاهده کرد که نشان می‌دهد چگونه Hugging Face از Node.js برای افزایش دو برابری عملکرد مدل پردازش زبان طبیعی خود استفاده کرده است.

حالا که اصول اولیه TensorFlow.js، محل اجرا و برخی از مزایای آن را فهمیدید، بیایید شروع به انجام کارهای مفید با آن کنیم!

۳. مدل‌های از پیش آموزش‌دیده

TensorFlow.js انواع مدل‌های یادگیری ماشین (ML) از پیش آموزش‌دیده را ارائه می‌دهد. این مدل‌ها توسط تیم TensorFlow.js آموزش داده شده و در یک کلاس آسان برای استفاده قرار گرفته‌اند و راهی عالی برای برداشتن اولین گام‌های شما با یادگیری ماشین هستند. به جای ساخت و آموزش یک مدل برای حل مسئله، می‌توانید یک مدل از پیش آموزش‌دیده را به عنوان نقطه شروع خود وارد کنید.

می‌توانید فهرست رو به رشدی از مدل‌های از پیش آموزش‌دیده‌ی آسان برای استفاده را در صفحه‌ی «مدل‌های Tensorflow.js برای جاوا اسکریپت» پیدا کنید. همچنین مکان‌های دیگری نیز وجود دارند که می‌توانید مدل‌های تبدیل‌شده‌ی TensorFlow را که در TensorFlow.js کار می‌کنند، از جمله TensorFlow Hub ، تهیه کنید.

چرا باید از یک مدل از پیش آموزش‌دیده استفاده کنم؟

اگر یک مدل از پیش آموزش‌دیده‌ی محبوب با مورد استفاده‌ی مورد نظر شما مطابقت داشته باشد، شروع کار با آن مزایای زیادی دارد، مانند:

نیازی به جمع‌آوری داده‌های آموزشی توسط خودتان نیست. آماده‌سازی داده‌ها در قالب صحیح و برچسب‌گذاری آن‌ها به گونه‌ای که یک سیستم یادگیری ماشین بتواند از آن‌ها برای یادگیری استفاده کند، می‌تواند بسیار زمان‌بر و پرهزینه باشد.
توانایی نمونه‌سازی سریع یک ایده با هزینه و زمان کمتر.
وقتی یک مدل از پیش آموزش‌دیده ممکن است به اندازه کافی خوب باشد تا کاری را که نیاز دارید انجام دهد و به شما امکان دهد تا روی استفاده از دانش ارائه شده توسط مدل برای پیاده‌سازی ایده‌های خلاقانه خود تمرکز کنید، دیگر نیازی به «اختراع دوباره چرخ» نیست.
استفاده از تحقیقات پیشرفته. مدل‌های از پیش آموزش‌دیده اغلب مبتنی بر تحقیقات رایج هستند و به شما امکان می‌دهند تا در معرض چنین مدل‌هایی قرار بگیرید و در عین حال عملکرد آنها را در دنیای واقعی درک کنید.
سهولت استفاده و مستندات گسترده. به دلیل محبوبیت چنین مدل‌هایی.
قابلیت‌های یادگیری انتقالی . برخی از مدل‌های از پیش آموزش‌دیده، قابلیت‌های یادگیری انتقالی را ارائه می‌دهند که اساساً عمل انتقال اطلاعات آموخته‌شده از یک وظیفه یادگیری ماشین به نمونه مشابه دیگر است. به عنوان مثال، مدلی که در ابتدا برای تشخیص گربه‌ها آموزش دیده بود، می‌تواند در صورت ارائه داده‌های آموزشی جدید، برای تشخیص سگ‌ها دوباره آموزش ببیند. این کار سریع‌تر خواهد بود زیرا شما با یک بوم خالی شروع نمی‌کنید. مدل می‌تواند از آنچه قبلاً برای تشخیص گربه‌ها آموخته است، برای تشخیص چیز جدید استفاده کند - سگ‌ها هم چشم و گوش دارند، بنابراین اگر از قبل می‌داند چگونه این ویژگی‌ها را پیدا کند، ما در نیمه راه هستیم. مدل را با داده‌های خود به روشی بسیار سریع‌تر دوباره آموزش دهید.

COCO-SSD چیست؟

COCO-SSD نام یک مدل یادگیری ماشینی از پیش آموزش‌دیده برای تشخیص اشیا است که در طول این آزمایشگاه کد از آن استفاده خواهید کرد. هدف این مدل مکان‌یابی و شناسایی چندین شیء در یک تصویر واحد است. به عبارت دیگر، این مدل می‌تواند کادر محصورکننده اشیایی را که برای یافتن آنها آموزش دیده است، به شما اطلاع دهد تا مکان آن شیء را در هر تصویری که به آن ارائه می‌دهید، به شما نشان دهد. مثالی در تصویر زیر نشان داده شده است:

اگر بیش از یک سگ در تصویر بالا وجود داشته باشد، مختصات ۲ کادر مرزی به شما داده می‌شود که مکان هر کدام را توصیف می‌کند. COCO-SSD از قبل آموزش دیده است تا ۹۰ شیء رایج روزمره مانند یک شخص، یک ماشین، یک گربه و غیره را تشخیص دهد.

این اسم از کجا آمده است؟

این نام ممکن است عجیب به نظر برسد، اما از دو کلمه اختصاری تشکیل شده است:

COCO: به این واقعیت اشاره دارد که این الگوریتم بر روی مجموعه داده COCO (اشیاء مشترک در متن) آموزش دیده است که به صورت رایگان برای دانلود و استفاده در آموزش مدل‌های شخصی در دسترس است. این مجموعه داده شامل بیش از ۲۰۰۰۰۰ تصویر برچسب‌گذاری شده است که می‌توان از آنها برای یادگیری استفاده کرد.
SSD (تشخیص تک‌شات چندجعبه‌ای): به بخشی از معماری مدل اشاره دارد که در پیاده‌سازی مدل استفاده شده است. برای آزمایشگاه کد نیازی به درک این موضوع ندارید، اما اگر کنجکاو هستید می‌توانید در اینجا درباره SSD اطلاعات بیشتری کسب کنید .

۴. آماده شوید

آنچه نیاز دارید

یک مرورگر وب مدرن.
آشنایی اولیه با HTML، CSS، جاوا اسکریپت و ابزارهای توسعه کروم (مشاهده خروجی کنسول).

بریم سراغ کدنویسی

قالب‌های آماده برای شروع کار برای Glitch.com یا Codepen.io ایجاد شده‌اند. می‌توانید به سادگی و تنها با یک کلیک، هر یک از این قالب‌ها را به عنوان حالت پایه خود برای این آزمایشگاه کد کپی کنید.

در Glitch، روی دکمه remix this کلیک کنید تا آن را منشعب کنید و مجموعه‌ای جدید از فایل‌هایی که می‌توانید ویرایش کنید، ایجاد شود.

روش دیگر، در Codepen، روی fork در پایین سمت راست صفحه کلیک کنید.

این اسکلت بسیار ساده فایل‌های زیر را در اختیار شما قرار می‌دهد:

صفحه HTML (index.html)
فایل استایل (style.css)
فایلی برای نوشتن کد جاوا اسکریپت ما (script.js)

برای راحتی شما، یک فایل ایمپورت (import) برای کتابخانه 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>

جایگزین: از ویرایشگر وب دلخواه خود استفاده کنید یا به صورت محلی کار کنید

اگر می‌خواهید کد را دانلود کنید و به صورت محلی یا در یک ویرایشگر آنلاین دیگر کار کنید، کافیست ۳ فایل ذکر شده در بالا را در یک دایرکتوری ایجاد کنید و کد را از الگوی Glitch ما در هر یک از آنها کپی و جایگذاری کنید.

۵. اسکلت 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> برای سربرگ و اطلاعاتی در مورد نحوه استفاده از صفحه اضافه کرده‌اید. چیز خاصی اینجا نیست.

شما همچنین یک تگ section اضافه کرده‌اید که نشان‌دهنده‌ی فضای نمایشی شماست:

فهرست.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 خود به آن استایل خواهید داد.
همچنین یک تگ ویدیو اضافه کردید که ورودی وب‌کم خود را به آن منتقل خواهید کرد. به زودی این را در کد جاوا اسکریپت خود تنظیم خواهید کرد.

اگر همین الان خروجی را پیش‌نمایش کنید، باید چیزی شبیه به این باشد:

۶. سبک اضافه کنید

پیش‌فرض‌های عنصر

ابتدا، بیایید برای عناصر HTML که اضافه کردیم، استایل‌هایی اضافه کنیم تا مطمئن شویم که به درستی رندر می‌شوند:

استایل.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 مفید اضافه کنید تا به حالت‌های مختلف رابط کاربری ما کمک کنند، مانند زمانی که می‌خواهیم دکمه را پنهان کنیم، یا اگر مدل هنوز آماده نیست، قسمت نمایشی را غیرقابل دسترس نشان دهیم.

استایل.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

ابتدا، مطمئن شوید که به بخش‌های کلیدی صفحه که بعداً باید در کد ما دستکاری یا به آنها دسترسی پیدا کنید، دسترسی دارید:

اسکریپت.js

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

پشتیبانی از وب کم را بررسی کنید

اکنون می‌توانید چند تابع کمکی اضافه کنید تا بررسی کنید که آیا مرورگری که استفاده می‌کنید از دسترسی به جریان وب‌کم از طریق getUserMedia پشتیبانی می‌کند یا خیر:

اسکریپت.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 که قبلاً خالی بود و در بالا تعریف کردیم را با کپی کردن و جایگذاری کد زیر پر کنید:

اسکریپت.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);
  });
}

در نهایت، یک کد موقت اضافه کنید تا بتوانید بررسی کنید که آیا وب‌کم کار می‌کند یا خیر.

کد زیر وانمود می‌کند که مدل شما بارگذاری شده و دکمه دوربین را فعال می‌کند، بنابراین می‌توانید روی آن کلیک کنید. تمام این کد را در مرحله بعدی جایگزین خواهید کرد، بنابراین آماده باشید که دوباره آن را در یک لحظه حذف کنید:

اسکریپت.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');

عالی! اگر کد را اجرا کرده و روی دکمه به همین شکل فعلی کلیک کرده باشید، باید چیزی شبیه به این را ببینید:

‎95442d7227216528.jpeg‎

۸. استفاده از مدل یادگیری ماشین

بارگذاری مدل

اکنون آماده بارگذاری مدل COCO-SSD هستید.

پس از اتمام راه‌اندازی اولیه، قسمت نمایشی و دکمه را در صفحه وب خود فعال کنید (این کد را روی کد موقتی که در انتهای مرحله قبل اضافه کردید، قرار دهید):

اسکریپت.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> در مختصاتی که برمی‌گردند رسم می‌کند و اگر برچسب شیء از سطح اطمینان خاصی بالاتر باشد، متن را روی آن تنظیم می‌کند.

اسکریپت.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 در اینجا بیابید. . این تابع کارهای سنگین زیادی را در پشت صحنه انجام می‌دهد: می‌تواند هر شیء «تصویر مانند» را به عنوان پارامتر خود بپذیرد، مانند تصویر، ویدیو، بوم نقاشی و غیره. استفاده از مدل‌های از پیش ساخته شده می‌تواند در زمان و تلاش شما صرفه‌جویی زیادی کند، زیرا نیازی به نوشتن این کد توسط خودتان نخواهید داشت و می‌توانید آن را «به صورت آماده» اجرا کنید.

اجرای این کد اکنون باید تصویری شبیه به این به شما بدهد:

در نهایت، در اینجا مثالی از کدی که چندین شیء را به طور همزمان تشخیص می‌دهد، آورده شده است:

وای! حالا می‌توانید تصور کنید که چقدر ساده می‌شود با استفاده از چنین چیزی، دستگاهی مثل Nest Cam با استفاده از یک تلفن قدیمی ساخت تا وقتی سگ یا گربه‌تان را روی مبل می‌بیند به شما هشدار دهد. اگر با کدتان مشکلی دارید، نسخه نهایی و کاربردی من را اینجا بررسی کنید تا ببینید چیزی را اشتباه کپی کرده‌اید یا نه.

۹. تبریک

تبریک می‌گویم، شما اولین قدم‌های خود را در استفاده از TensorFlow.js و یادگیری ماشین در مرورگر وب برداشته‌اید! اکنون نوبت شماست که این شروع‌های ساده را به چیزی خلاقانه تبدیل کنید. چه چیزی خواهید ساخت؟

خلاصه

در این آزمایشگاه کد ما:

مزایای استفاده از TensorFlow.js نسبت به سایر اشکال TensorFlow را آموختم.
موقعیت‌هایی را که ممکن است بخواهید با یک مدل یادگیری ماشین از پیش آموزش‌دیده شروع کنید، آموختید.
یک صفحه وب کاملاً کاربردی ایجاد کردم که می‌تواند اشیاء را به صورت بلادرنگ با استفاده از وب‌کم شما طبقه‌بندی کند، از جمله:
ایجاد اسکلت HTML برای محتوا
تعریف استایل برای عناصر و کلاس‌های HTML
راه‌اندازی چارچوب جاوا اسکریپت برای تعامل با HTML و تشخیص وجود وب‌کم
بارگذاری یک مدل از پیش آموزش‌دیده TensorFlow.js
استفاده از مدل بارگذاری شده برای طبقه‌بندی مداوم جریان وب‌کم و رسم یک کادر محصورکننده دور اشیاء موجود در تصویر.

مراحل بعدی

آنچه را که می‌سازید با ما به اشتراک بگذارید! شما به راحتی می‌توانید آنچه را که برای این آزمایشگاه کد ایجاد کرده‌اید، به موارد استفاده خلاقانه دیگر نیز تعمیم دهید. ما شما را تشویق می‌کنیم که خارج از چارچوب فکر کنید و پس از اتمام کار، به هک کردن ادامه دهید.

تمام اشیایی را که این مدل می‌تواند تشخیص دهد بررسی کنید و به این فکر کنید که چگونه می‌توانید از آن دانش برای انجام یک عمل استفاده کنید. با گسترش آنچه امروز ساخته‌اید، چه ایده‌های خلاقانه‌ای را می‌توان پیاده‌سازی کرد؟

(شاید بتوانید یک لایه سمت سرور ساده اضافه کنید تا وقتی دستگاه دیگری شیء خاصی را که شما انتخاب کرده‌اید می‌بیند، با استفاده از وب‌سوکت‌ها به آن اعلان ارسال کند. این یک روش عالی برای بازیابی یک گوشی هوشمند قدیمی و دادن یک هدف جدید به آن است. امکانات نامحدود هستند!)

با استفاده از هشتگ #MadeWithTFJS در شبکه‌های اجتماعی ما را تگ کنید تا پروژه شما در وبلاگ TensorFlow ما نمایش داده شود یا حتی در رویدادهای آینده TensorFlow به نمایش گذاشته شود.

ساخت یک وب کم هوشمند در جاوا اسکریپت با یک مدل آموزش ماشینی از پیش آموزش دیده TensorFlow.js

۱. قبل از شروع

پیش‌نیازها

آنچه خواهید ساخت

آنچه یاد خواهید گرفت

۲. TensorFlow.js چیست؟

کجاها میشه ازش استفاده کرد؟

قدرت‌های فوق‌العاده سمت کلاینت

حریم خصوصی

سرعت

دسترسی و مقیاس

هزینه

ویژگی‌های سمت سرور

پشتیبانی کامل از CUDA

اندازه مدل

اینترنت اشیا

سرعت

۳. مدل‌های از پیش آموزش‌دیده

چرا باید از یک مدل از پیش آموزش‌دیده استفاده کنم؟

COCO-SSD چیست؟

این اسم از کجا آمده است؟

۴. آماده شوید

آنچه نیاز دارید

بریم سراغ کدنویسی

فهرست.html

جایگزین: از ویرایشگر وب دلخواه خود استفاده کنید یا به صورت محلی کار کنید

۵. اسکلت HTML را پر کنید

فهرست.html

کد را بفهمید

فهرست.html

۶. سبک اضافه کنید

پیش‌فرض‌های عنصر

استایل.css

استایل.css

۷. ایجاد اسکلت جاوا اسکریپت

ارجاع به عناصر کلیدی DOM

اسکریپت.js

پشتیبانی از وب کم را بررسی کنید

اسکریپت.js

دریافت جریان وب‌کم

اسکریپت.js

اسکریپت.js

۸. استفاده از مدل یادگیری ماشین

بارگذاری مدل

اسکریپت.js

۹. تبریک

خلاصه

مراحل بعدی

آزمایشگاه‌های کد TensorFlow.js بیشتر برای بررسی عمیق‌تر

وب‌سایت‌هایی برای بررسی