יצירת מצלמת אינטרנט חכמה ב-JavaScript באמצעות מודל למידת מכונה מאומן מראש של TensorFlow.js

1. לפני שמתחילים

למידת מכונה היא מילת באז בימים אלה. נראה שהשימושים האפשריים שלו הם בלתי מוגבלים, והוא צפוי להשפיע על כמעט כל תחום בעתיד הקרוב. אם אתם עובדים כמהנדסים או כמעצבים, בחלק הקדמי או האחורי של האתר, ואתם מכירים את JavaScript, ה-codelab הזה נכתב כדי לעזור לכם להתחיל להוסיף למידת מכונה לסט הכישורים שלכם.

דרישות מוקדמות

ה-codelab הזה נכתב עבור מהנדסים מנוסים שכבר מכירים את JavaScript.

מה תפַתחו

ב-Codelab הזה תלמדו

ליצור דף אינטרנט שמשתמש בלמידת מכונה ישירות בדפדפן האינטרנט באמצעות TensorFlow.js כדי לסווג ולזהות אובייקטים נפוצים (כן, כולל יותר מאחד בכל פעם) משידור חי ממצלמת אינטרנט.
משפרים את מצלמת האינטרנט הרגילה כדי לזהות אובייקטים ולקבל את הקואורדינטות של תיבת התוחמת לכל אובייקט שהיא מוצאת
האובייקט שנמצא יודגש בשידור החי של הסרטון, כמו שמוצג בהמשך:

תארו לעצמכם שאתם יכולים לזהות אם אדם מסוים מופיע בסרטון, ואז לספור כמה אנשים נכחו בכל רגע נתון כדי להעריך את רמת העומס באזור מסוים במהלך היום, או לשלוח לעצמכם התראה אם הכלב שלכם זוהה בחדר בבית בזמן שאתם לא נמצאים בו. אם היית יכול לעשות את זה, היית בדרך הנכונה ליצירת גרסה משלך של מצלמת Google Nest שיכולה להתריע כשמזוהה פורץ (מכל סוג) באמצעות חומרה מותאמת אישית משלך. ממש מגניב. קשה לעשות את זה? לא. בואו נתחיל לפרוץ…

מה תלמדו

איך טוענים מודל TensorFlow.js שעבר אימון מראש.
איך לשלוף נתונים משידור חי ממצלמת אינטרנט ולצייר אותם בקנבס.
איך לסווג פריים של תמונה כדי למצוא את תיבות התוחמות של אובייקטים שהמודל אומן לזהות.
איך משתמשים בנתונים שמוחזרים מהמודל כדי להדגיש את האובייקטים שנמצאו.

ב-codelab הזה נסביר איך להתחיל להשתמש במודלים שאומנו מראש ב-TensorFlow.js. מושגים ובלוקים של קוד שלא רלוונטיים ל-TensorFlow.js וללמידת מכונה לא מוסברים, ואתם יכולים פשוט להעתיק ולהדביק אותם.

2. מה זה TensorFlow.js?

‫TensorFlow.js היא ספרייה של למידת מכונה בקוד פתוח שאפשר להריץ בכל מקום שבו אפשר להריץ JavaScript. הוא מבוסס על ספריית TensorFlow המקורית שנכתבה ב-Python ומטרתו לשחזר את חוויית המפתחים הזו ואת קבוצת ממשקי ה-API הזו עבור המערכת האקולוגית של JavaScript.

איפה אפשר להשתמש בו?

בגלל הניידות של JavaScript, עכשיו אפשר לכתוב בשפה אחת ולבצע למידת מכונה בקלות בכל הפלטפורמות הבאות:

בצד הלקוח בדפדפן האינטרנט באמצעות JavaScript רגיל
בצד השרת ואפילו במכשירי IoT כמו Raspberry Pi באמצעות Node.js
אפליקציות למחשב שמשתמשות ב-Electron
אפליקציות שמותאמות לניידים באמצעות React Native

‫TensorFlow.js תומכת גם במספר קצוות עורפיים בכל אחת מהסביבות האלה (הסביבות שמבוססות על חומרה בפועל, שבהן היא יכולה לפעול, כמו CPU או WebGL). המונח 'בק-אנד' בהקשר הזה לא מתייחס לסביבת צד שרת – הבק-אנד להרצה יכול להיות צד לקוח ב-WebGL, למשל) כדי להבטיח תאימות וגם כדי שהפעולה תתבצע במהירות. כרגע יש תמיכה ב-TensorFlow.js ב:

הפעלת WebGL בכרטיס המסך (GPU) של המכשיר – זו הדרך המהירה ביותר להפעיל מודלים גדולים יותר (בגודל של יותר מ-3MB) עם האצת GPU.
הרצת Web Assembly‏ (WASM) במעבד (CPU) – כדי לשפר את ביצועי המעבד במכשירים, כולל טלפונים ניידים מדורות קודמים. האפשרות הזו מתאימה יותר למודלים קטנים (בגודל של פחות מ-3MB) שיכולים לפעול מהר יותר במעבד עם WASM מאשר עם WebGL, בגלל התקורה של העלאת תוכן למעבד גרפי.
ביצוע CPU – הגיבוי צריך להיות זמין אם אף אחת מהסביבות האחרות לא זמינה. היא הכי איטית מבין השלוש, אבל היא תמיד זמינה.

הערה: אם אתם יודעים באיזה מכשיר תבצעו את ההפעלה, אתם יכולים לכפות שימוש באחד מהקצוות העורפיים האלה. אם לא תציינו זאת, TensorFlow.js יבחר בשבילכם.

יכולות מתקדמות בצד הלקוח

הפעלת TensorFlow.js בדפדפן האינטרנט במחשב הלקוח יכולה להניב כמה יתרונות שכדאי לקחת בחשבון.

פרטיות

אתם יכולים לאמן את המודל ולסווג את הנתונים במחשב הלקוח בלי לשלוח את הנתונים לשרת אינטרנט של צד שלישי. יכול להיות שיהיו מקרים שבהם תהיה דרישה כזו כדי לעמוד בדרישות של חוקים מקומיים, כמו GDPR למשל, או כשמעבדים נתונים שהמשתמש רוצה לשמור במחשב שלו ולא לשלוח לצד שלישי.

מהירות

מכיוון שלא צריך לשלוח נתונים לשרת מרוחק, ההסקה (הפעולה של סיווג הנתונים) יכולה להיות מהירה יותר. יתרון נוסף הוא שיש לכם גישה ישירה לחיישנים של המכשיר, כמו מצלמה, מיקרופון, GPS, מד תאוצה ועוד, אם המשתמש מעניק לכם גישה.

היקף החשיפה והתאמה לעומס

בלחיצה אחת, כל אחד בעולם יכול ללחוץ על קישור ששלחתם לו, לפתוח את דף האינטרנט בדפדפן ולהשתמש במה שיצרתם. אין צורך בהגדרה מורכבת של Linux בצד השרת עם מנהלי התקנים של CUDA ועוד הרבה דברים אחרים רק כדי להשתמש במערכת למידת המכונה.

עלות

בלי שרתים, הדבר היחיד שצריך לשלם עליו הוא CDN לאירוח קובצי ה-HTML, ה-CSS, ה-JS והמודל. העלות של CDN נמוכה בהרבה מהעלות של הפעלת שרת (יכול להיות עם כרטיס גרפי מצורף) מסביב לשעון.

תכונות בצד השרת

השימוש בהטמעה של TensorFlow.js ב-Node.js מאפשר את התכונות הבאות.

תמיכה מלאה ב-CUDA

בצד השרת, כדי להאיץ את כרטיס המסך, צריך להתקין את הדרייברים של NVIDIA CUDA כדי לאפשר ל-TensorFlow לעבוד עם כרטיס המסך (בניגוד לדפדפן שמשתמש ב-WebGL – לא נדרשת התקנה). עם זאת, תמיכה מלאה ב-CUDA מאפשרת לכם לנצל באופן מלא את היכולות של הכרטיס הגרפי ברמה נמוכה יותר, וכך לקצר את זמני האימון וההסקה. הביצועים זהים לאלה של הטמעת Python TensorFlow, כי שתיהן משתמשות באותו קצה עורפי של C++.

גודל המודל

כדי לעבוד עם מודלים מתקדמים ממחקר, יכול להיות שתצטרכו לעבוד עם מודלים גדולים מאוד, אולי בגודל של גיגה-בייט. בשל מגבלות השימוש בזיכרון לכל כרטיסייה בדפדפן, אי אפשר להריץ את המודלים האלה בדפדפן אינטרנט. כדי להריץ את המודלים הגדולים האלה, אפשר להשתמש ב-Node.js בשרת שלכם עם מפרטי החומרה שנדרשים להרצה יעילה של מודל כזה.

IOT

‫Node.js נתמך במחשבים פופולריים עם לוח יחיד כמו Raspberry Pi, מה שאומר שאפשר להריץ מודלים של TensorFlow.js גם במכשירים כאלה.

מהירות

‫Node.js כתוב ב-JavaScript, ולכן הוא נהנה מקומפילציה בזמן אמת (JIT). המשמעות היא שלעתים קרובות תראו שיפורים בביצועים כשמשתמשים ב-Node.js, כי הוא יעבור אופטימיזציה בזמן הריצה, במיוחד אם אתם מבצעים עיבוד מקדים. דוגמה מצוינת לכך אפשר לראות במקרה לדוגמה הזה, שבו מוסבר איך Hugging Face השתמשו ב-Node.js כדי לשפר פי 2 את הביצועים של המודל לעיבוד שפה טבעית שלהם.

עכשיו, אחרי שהבנתם את היסודות של TensorFlow.js, איפה אפשר להריץ אותו ומה היתרונות שלו, אפשר להתחיל לעשות איתו דברים שימושיים.

3. מודלים שעברו אימון

‫TensorFlow.js מספק מגוון של מודלים מאומנים מראש של למידת מכונה (ML). המודלים האלה אומנו על ידי צוות TensorFlow.js ועברו אריזה במחלקה קלה לשימוש. הם דרך מצוינת להתחיל את הצעדים הראשונים בלמידת מכונה. במקום לבנות ולאמן מודל כדי לפתור את הבעיה, אתם יכולים לייבא מודל שעבר אימון מראש כנקודת התחלה.

בדף Models for JavaScript (מודלים ל-JavaScript) ב-Tensorflow.js אפשר למצוא רשימה של מודלים שעברו אימון מראש וקל להשתמש בהם. הרשימה הזו מתעדכנת כל הזמן. יש גם מקומות אחרים שבהם אפשר להשיג מודלים שעברו המרה ל-TensorFlow ופועלים ב-TensorFlow.js, כולל TensorFlow Hub.

למה כדאי להשתמש במודל שעבר אימון מקדים?

יש כמה יתרונות להתחלה עם מודל פופולרי שאומן מראש, אם הוא מתאים לתרחיש השימוש הרצוי, למשל:

לא צריך לאסוף נתוני אימון בעצמכם. הכנת נתונים בפורמט הנכון ותיוגם כדי שמערכת למידת מכונה תוכל ללמוד מהם יכולה להיות תהליך ארוך ויקר.
היכולת ליצור אב טיפוס של רעיון במהירות, בעלות נמוכה ובזמן קצר.
אין טעם להמציא את הגלגל מחדש אם מודל שאומן מראש יכול לעשות את מה שאתם צריכים, וכך תוכלו להתרכז בשימוש בידע שהמודל מספק כדי ליישם את הרעיונות היצירתיים שלכם.
שימוש במחקר מתקדם. מודלים שעברו אימון מראש מבוססים לרוב על מחקר פופולרי, וכך אתם יכולים להכיר את המודלים האלה וגם להבין את הביצועים שלהם בעולם האמיתי.
קלות השימוש ותיעוד מקיף. בגלל הפופולריות של מודלים כאלה.
יכולות שללמידת העברה. חלק מהמודלים שעברו אימון מראש מציעים יכולות של למידה בהעברה, שהיא למעשה שיטה להעברת מידע שנלמד ממשימה אחת של למידת מכונה לדוגמה דומה אחרת. לדוגמה, אפשר לאמן מחדש מודל שאומן במקור לזיהוי חתולים, כדי שיזהה כלבים, אם מספקים לו נתוני אימון חדשים. התהליך יהיה מהיר יותר כי לא תתחילו עם דף ריק. המודל יכול להשתמש במה שהוא כבר למד כדי לזהות חתולים, ואז לזהות את הדבר החדש – לכלבים יש גם עיניים ואוזניים, אז אם הוא כבר יודע איך למצוא את התכונות האלה, אנחנו כבר בחצי הדרך. לאמן מחדש את המודל על הנתונים שלכם בצורה מהירה הרבה יותר.

מה זה COCO-SSD?

‫COCO-SSD הוא השם של מודל ML לאיתור אובייקטים שעבר אימון מראש, ותשתמשו בו במהלך ה-codelab הזה. המודל הזה נועד לאתר ולזהות כמה אובייקטים בתמונה אחת. במילים אחרות, הוא יכול לציין את תיבת התוחמת של אובייקטים שהוא אומן לזהות, כדי לספק את המיקום של האובייקט הזה בכל תמונה שתציגו לו. דוגמה מוצגת בתמונה הבאה:

אם היו יותר מכלב אחד בתמונה שלמעלה, הייתם מקבלים את הקואורדינטות של 2 תיבות תוחמות, שמתארות את המיקום של כל כלב. מודל COCO-SSD עבר אימון מראש לזיהוי של 90 אובייקטים נפוצים מחיי היום-יום, כמו אדם, מכונית, חתול וכו'.

מאיפה השם הגיע?

השם הזה אולי נשמע מוזר, אבל הוא מורכב מ-2 ראשי תיבות:

‫COCO: מציין שהמודל אומן על מערך הנתונים COCO (Common Objects in Context), שזמין להורדה ולשימוש לכל מי שרוצה לאמן מודלים משלו. מערך הנתונים מכיל יותר מ-200,000 תמונות עם תוויות שאפשר ללמוד מהן.
SSD (Single Shot MultiBox Detection): מתייחס לחלק מארכיטקטורת המודל ששימש בהטמעה של המודל. לא צריך להבין את זה בשביל ה-codelab, אבל אם אתם סקרנים, כאן אפשר לקרוא מידע נוסף על SSD.

4. להגדרה

מה תצטרכו

דפדפן אינטרנט מודרני.
ידע בסיסי ב-HTML, ב-CSS, ב-JavaScript ובכלי הפיתוח ל-Chrome (צפייה בפלט של המסוף).

נתחיל לתכנת

יצרנו תבניות מוכנות מראש שאפשר להתחיל איתן ב-Glitch.com או ב-Codepen.io. אתם יכולים פשוט לשכפל את אחת התבניות כבסיס למעבדת הקוד הזו, בלחיצה אחת בלבד.

ב-Glitch, לוחצים על הלחצן remix this כדי ליצור העתק שלו ולערוך את קבוצת הקבצים החדשה.

אפשרות נוספת היא ללחוץ על fork בפינה השמאלית התחתונה של המסך ב-Codepen.

השלד הפשוט הזה מספק לכם את הקבצים הבאים:

דף HTML‏ (index.html)
גיליון סגנונות (style.css)
קובץ לכתיבת קוד ה-JavaScript (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>

אפשרות חלופית: שימוש בכלי עריכה באינטרנט או עבודה מקומית

אם רוצים להוריד את הקוד ולעבוד באופן מקומי או בכלי עריכה אונליין אחר, פשוט יוצרים את 3 הקבצים שצוינו למעלה באותה תיקייה, ומעתיקים את הקוד מה-boilerplate של Glitch ומדביקים אותו בכל אחד מהם.

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 את המחלקה invisible. כך תוכלו להמחיש למשתמשים מתי המודל מוכן וניתן ללחוץ בבטחה על הלחצן הפעלת מצלמת האינטרנט.
הוספתם את הלחצן enable webcam (הפעלת מצלמת אינטרנט), שתעצבו אותו ב-CSS.
הוספתם גם תג של סרטון, שאליו תזרים ההזנה ממצלמת האינטרנט. תגדירו את זה בקוד ה-JavaScript שלכם בקרוב.

אם תציגו עכשיו תצוגה מקדימה של הפלט, הוא אמור להיראות כך:

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;
}

מצוין! זה כל מה שצריך. אם הצלחתם להחליף את הסגנונות באמצעות שני קטעי הקוד שלמעלה, התצוגה המקדימה הפעילה אמורה להיראות כך:

שימו לב שהטקסט והלחצן באזור ההדגמה לא זמינים, כי ה-HTML כולל כברירת מחדל את המחלקה 'invisible'. תשתמשו ב-JavaScript כדי להסיר את המחלקה הזו כשהמודל יהיה מוכן לשימוש.

7. יצירת שלד JavaScript

הפניה לרכיבי 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, כך שקל להשתמש בהם.

פרטים מלאים על פונקציית החיזוי הזו זמינים במסמכי התיעוד שלנו ב-GitHub לגבי מודל COCO-SSD. הפונקציה הזו מבצעת הרבה פעולות מאחורי הקלעים: היא יכולה לקבל כל אובייקט שהוא כמו תמונה כפרמטר, כמו תמונה, סרטון, בד ציור וכן הלאה. שימוש במודלים מוכנים מראש יכול לחסוך לכם הרבה זמן ומאמץ, כי לא תצטרכו לכתוב את הקוד הזה בעצמכם ותוכלו להשתמש בו 'כמו שהוא'.

אחרי שמריצים את הקוד הזה, אמורה להתקבל תמונה שנראית בערך כך:

לבסוף, הנה דוגמה לקוד שמזהה כמה אובייקטים בו-זמנית:

יש! אפשר לדמיין עכשיו כמה פשוט יהיה לקחת משהו כזה כדי ליצור מכשיר כמו Nest Cam באמצעות טלפון ישן, כדי לקבל התראה כשהמכשיר מזהה את הכלב על הספה או את החתול על הספה. אם נתקלתם בבעיות בקוד, כאן אפשר לראות את הגרסה הסופית שעובדת כדי לבדוק אם העתקתם משהו בצורה שגויה.

9. מזל טוב

מזל טוב, עשית את הצעדים הראשונים בשימוש ב-TensorFlow.js ובלמידת מכונה בדפדפן האינטרנט! עכשיו תורך לקחת את ההתחלה הצנועה הזו ולהפוך אותה למשהו יצירתי. מה בא לך ליצור?

סיכום

ב-Codelab הזה:

הסבר על היתרונות של שימוש ב-TensorFlow.js לעומת סוגים אחרים של TensorFlow.
למדתם באילו מצבים כדאי להתחיל עם מודל למידת מכונה שאומן מראש.
יצרת דף אינטרנט שפועל באופן מלא ויכול לסווג אובייקטים בזמן אמת באמצעות מצלמת האינטרנט, כולל:
יצירת שלד HTML לתוכן
הגדרת סגנונות לרכיבים ולמחלקות של HTML
הגדרה של פיגום JavaScript כדי ליצור אינטראקציה עם ה-HTML ולזהות את הנוכחות של מצלמת אינטרנט
טעינת מודל TensorFlow.js שעבר אימון מראש
שימוש במודל שנטען כדי לבצע סיווגים רציפים של הזרם ממצלמת האינטרנט, ושרטוט של תיבת תוחמת סביב אובייקטים בתמונה.

השלבים הבאים

נשמח לראות מה יצא לך! אתם יכולים להרחיב בקלות את מה שיצרתם ב-codelab הזה גם לתרחישי שימוש יצירתיים אחרים. אנחנו ממליצים לכם לחשוב מחוץ לקופסה ולהמשיך לפרוץ גם אחרי שתסיימו.

כאן אפשר לראות את כל האובייקטים שהמודל הזה יכול לזהות ולחשוב איך אפשר להשתמש בידע הזה כדי לבצע פעולה. אילו רעיונות יצירתיים אפשר ליישם עכשיו על ידי הרחבת מה שיצרת היום?

(אולי תוכל להוסיף שכבה פשוטה בצד השרת כדי להציג התראה במכשיר אחר כשהוא מזהה אובייקט מסוים לפי בחירתך באמצעות websockets. זו דרך מצוינת לעשות שימוש חוזר בסמארטפון ישן ולתת לו ייעוד חדש. האפשרויות הן בלתי מוגבלות!)

תייגו אותנו ברשתות החברתיות באמצעות ההאשטאג #MadeWithTFJS כדי לקבל הזדמנות שהפרויקט שלכם יוצג בבלוג של TensorFlow או אפילו באירועי TensorFlow עתידיים.

יצירת מצלמת אינטרנט חכמה ב-JavaScript באמצעות מודל למידת מכונה מאומן מראש של TensorFlow.js

1. לפני שמתחילים

דרישות מוקדמות

מה תפַתחו

מה תלמדו

2. מה זה TensorFlow.js?

איפה אפשר להשתמש בו?

יכולות מתקדמות בצד הלקוח

פרטיות

מהירות

היקף החשיפה והתאמה לעומס

עלות

תכונות בצד השרת

תמיכה מלאה ב-CUDA

גודל המודל

IOT

מהירות

3. מודלים שעברו אימון

למה כדאי להשתמש במודל שעבר אימון מקדים?

מה זה COCO-SSD?

מאיפה השם הגיע?

4. להגדרה

מה תצטרכו

נתחיל לתכנת

index.html

אפשרות חלופית: שימוש בכלי עריכה באינטרנט או עבודה מקומית

5. מילוי של מבנה ה-HTML

index.html

הסבר על הקוד

index.html

6. הוספת סגנון

ברירות מחדל של אלמנטים

style.css

style.css

7. יצירת שלד JavaScript

הפניה לרכיבי DOM מרכזיים

script.js

בדיקה אם יש תמיכה במצלמת אינטרנט

script.js

אחזור הסטרימינג ממצלמת האינטרנט

script.js

script.js

8. שימוש במודלים של למידת מכונה

טעינת המודל

script.js

9. מזל טוב

סיכום

השלבים הבאים

עוד Codelabs של TensorFlow.js ללימוד מעמיק

אתרים שכדאי לבדוק