Tạo webcam thông minh trong JavaScript bằng mô hình học máy được huấn luyện trước TensorFlow.js

1. Trước khi bắt đầu

Học máy là một từ khoá khá phổ biến hiện nay. Các ứng dụng của AI dường như không có giới hạn và có vẻ như AI sẽ tác động đến hầu hết mọi ngành trong tương lai gần. Nếu bạn là kỹ sư hoặc nhà thiết kế, chuyên về giao diện người dùng hoặc phần phụ trợ và bạn quen thuộc với JavaScript, thì lớp học lập trình này được viết để giúp bạn bắt đầu thêm Học máy vào bộ kỹ năng của mình.

Điều kiện tiên quyết

Lớp học lập trình này được viết cho những kỹ sư có kinh nghiệm và đã quen thuộc với JavaScript.

Sản phẩm bạn sẽ tạo ra

Trong lớp học lập trình này, bạn sẽ

  • Tạo một trang web sử dụng công nghệ học máy ngay trong trình duyệt web thông qua TensorFlow.js để phân loại và phát hiện các đối tượng phổ biến (có thể phát hiện nhiều đối tượng cùng một lúc) từ một luồng phát trực tiếp của webcam.
  • Tăng cường sức mạnh cho webcam thông thường để nhận dạng các đối tượng và lấy toạ độ của khung hình chữ nhật cho từng đối tượng mà webcam tìm thấy
  • Làm nổi bật đối tượng được tìm thấy trong luồng video, như minh hoạ dưới đây:

8f9bad6e49e646b.png

Hãy tưởng tượng bạn có thể phát hiện xem một người có xuất hiện trong video hay không, nhờ đó bạn có thể đếm số người xuất hiện tại một thời điểm bất kỳ để ước tính mức độ bận rộn của một khu vực nhất định trong ngày, hoặc gửi cho chính mình một cảnh báo khi phát hiện thấy chú cún của bạn đang ở trong một căn phòng trong nhà mà có lẽ chú không nên ở đó. Nếu làm được như vậy, bạn sẽ có thể tạo phiên bản riêng của Google Nest Cam có thể cảnh báo cho bạn khi phát hiện thấy kẻ đột nhập (thuộc bất kỳ loại nào) bằng phần cứng tuỳ chỉnh của riêng bạn! Khá gọn gàng. Việc này có khó không? Thôi. Hãy bắt đầu tấn công...

Kiến thức bạn sẽ học được

  • Cách tải một mô hình TensorFlow.js được huấn luyện trước.
  • Cách lấy dữ liệu từ một sự kiện phát trực tiếp qua webcam và vẽ dữ liệu đó lên canvas.
  • Cách phân loại một khung hình để tìm(các) khung hình chữ nhật của(các) đối tượng mà mô hình đã được huấn luyện để nhận dạng.
  • Cách sử dụng dữ liệu được truyền lại từ mô hình để làm nổi bật các đối tượng được tìm thấy.

Lớp học lập trình này tập trung vào cách bắt đầu sử dụng các mô hình được huấn luyện trước của TensorFlow.js. Các khái niệm và khối mã không liên quan đến TensorFlow.js và học máy sẽ không được giải thích và chỉ được cung cấp cho bạn để sao chép và dán.

2. TensorFlow.js là gì?

1aee0ede85885520.png

TensorFlow.js là một thư viện học máy nguồn mở có thể chạy ở bất cứ nơi nào có JavaScript. TensorFlow.js dựa trên thư viện TensorFlow ban đầu được viết bằng Python và nhằm mục đích tạo lại trải nghiệm của nhà phát triển cũng như bộ API này cho hệ sinh thái JavaScript.

Có thể sử dụng chế độ này ở đâu?

Nhờ tính di động của JavaScript, giờ đây, bạn có thể viết bằng 1 ngôn ngữ và thực hiện học máy trên tất cả các nền tảng sau đây một cách dễ dàng:

  • Phía máy khách trong trình duyệt web bằng JavaScript thuần
  • Phía máy chủ và thậm chí cả các thiết bị IoT như Raspberry Pi bằng Node.js
  • Ứng dụng dành cho máy tính sử dụng Electron
  • Ứng dụng di động gốc sử dụng React Native

TensorFlow.js cũng hỗ trợ nhiều chương trình phụ trợ trong mỗi môi trường này (môi trường dựa trên phần cứng thực tế mà chương trình có thể thực thi, chẳng hạn như CPU hoặc WebGL. "Phần phụ trợ" trong ngữ cảnh này không có nghĩa là môi trường phía máy chủ – phần phụ trợ để thực thi có thể là phía máy khách trong WebGL chẳng hạn) để đảm bảo khả năng tương thích và cũng giúp mọi thứ chạy nhanh. TensorFlow.js hiện hỗ trợ:

  • Thực thi WebGL trên thẻ đồ hoạ (GPU) của thiết bị – đây là cách nhanh nhất để thực thi các mô hình lớn hơn (có kích thước trên 3 MB) bằng tính năng tăng tốc GPU.
  • Thực thi Web Assembly (WASM) trên CPU – để cải thiện hiệu suất CPU trên các thiết bị, chẳng hạn như điện thoại di động thế hệ cũ. Điều này phù hợp hơn với các mô hình nhỏ hơn (kích thước dưới 3 MB) có thể thực sự thực thi nhanh hơn trên CPU bằng WASM so với WebGL do chi phí tải nội dung lên bộ xử lý đồ hoạ.
  • Thực thi CPU – dự phòng nếu không có môi trường nào khác. Đây là cách chậm nhất trong 3 cách nhưng luôn sẵn sàng hỗ trợ bạn.

Lưu ý: Bạn có thể chọn buộc một trong các chương trình phụ trợ này nếu biết thiết bị mà bạn sẽ thực thi hoặc bạn có thể chỉ cần để TensorFlow.js quyết định cho bạn nếu bạn không chỉ định chương trình phụ trợ.

Sức mạnh siêu phàm của phía máy khách

Việc chạy TensorFlow.js trong trình duyệt web trên máy khách có thể mang lại một số lợi ích đáng cân nhắc.

Quyền riêng tư

Bạn có thể huấn luyện và phân loại dữ liệu trên máy khách mà không cần gửi dữ liệu đến máy chủ web của bên thứ ba. Đôi khi, đây có thể là một yêu cầu để tuân thủ luật pháp địa phương, chẳng hạn như GDPR, hoặc khi xử lý bất kỳ dữ liệu nào mà người dùng có thể muốn lưu giữ trên máy của họ và không gửi cho bên thứ ba.

Speed

Vì bạn không phải gửi dữ liệu đến một máy chủ từ xa, nên quá trình suy luận (hành động phân loại dữ liệu) có thể diễn ra nhanh hơn. Thậm chí, bạn có thể truy cập trực tiếp vào các cảm biến của thiết bị như camera, micrô, GPS, gia tốc kế và nhiều cảm biến khác nếu người dùng cấp cho bạn quyền truy cập.

Phạm vi tiếp cận và quy mô

Chỉ bằng một cú nhấp chuột, bất kỳ ai trên thế giới đều có thể nhấp vào đường liên kết bạn gửi cho họ, mở trang web trong trình duyệt và sử dụng những gì bạn đã tạo. Bạn không cần thiết lập Linux phức tạp phía máy chủ bằng trình điều khiển CUDA và nhiều thứ khác chỉ để sử dụng hệ thống học máy.

Chi phí

Không có máy chủ nghĩa là bạn chỉ cần trả tiền cho một CDN để lưu trữ các tệp HTML, CSS, JS và mô hình. Chi phí của CDN rẻ hơn nhiều so với việc duy trì một máy chủ (có thể có gắn thẻ đồ hoạ) hoạt động 24/7.

Các tính năng phía máy chủ

Việc tận dụng việc triển khai Node.js của TensorFlow.js sẽ cho phép các tính năng sau.

Hỗ trợ đầy đủ CUDA

Về phía máy chủ, để tăng tốc bằng card đồ hoạ, bạn phải cài đặt trình điều khiển NVIDIA CUDA để cho phép TensorFlow hoạt động với card đồ hoạ (không giống như trong trình duyệt sử dụng WebGL – không cần cài đặt). Tuy nhiên, với khả năng hỗ trợ đầy đủ CUDA, bạn có thể tận dụng tối đa các khả năng ở cấp thấp của card đồ hoạ, giúp giảm thời gian huấn luyện và suy luận. Hiệu suất tương đương với việc triển khai TensorFlow bằng Python vì cả hai đều dùng chung một phần phụ trợ C++.

Kích thước mô hình

Đối với các mô hình tiên tiến từ nghiên cứu, bạn có thể làm việc với các mô hình rất lớn, có thể có kích thước lên đến hàng gigabyte. Hiện tại, bạn không thể chạy các mô hình này trong trình duyệt web do giới hạn về mức sử dụng bộ nhớ cho mỗi thẻ trình duyệt. Để chạy các mô hình lớn hơn này, bạn có thể sử dụng Node.js trên máy chủ của riêng mình với các thông số kỹ thuật phần cứng mà bạn cần để chạy mô hình đó một cách hiệu quả.

IOT

Node.js được hỗ trợ trên các máy tính bảng đơn phổ biến như Raspberry Pi. Điều này có nghĩa là bạn cũng có thể thực thi các mô hình TensorFlow.js trên những thiết bị như vậy.

Speed

Node.js được viết bằng JavaScript, tức là Node.js hưởng lợi từ quá trình biên dịch tức thì. Điều này có nghĩa là bạn có thể thường thấy hiệu suất tăng lên khi sử dụng Node.js vì nó sẽ được tối ưu hoá trong thời gian chạy, đặc biệt là đối với mọi hoạt động tiền xử lý mà bạn có thể đang thực hiện. Bạn có thể xem một ví dụ điển hình về điều này trong nghiên cứu điển hình này. Nghiên cứu này cho thấy cách Hugging Face sử dụng Node.js để tăng hiệu suất gấp 2 lần cho mô hình xử lý ngôn ngữ tự nhiên của họ.

Giờ đây, bạn đã hiểu những kiến thức cơ bản về TensorFlow.js, nơi có thể chạy và một số lợi ích, hãy bắt đầu làm những việc hữu ích với TensorFlow.js!

3. Mô hình được huấn luyện trước

TensorFlow.js cung cấp nhiều mô hình học máy (ML) được huấn luyện trước. Các mô hình này đã được nhóm TensorFlow.js huấn luyện và gói trong một lớp dễ sử dụng, đồng thời là một cách tuyệt vời để bạn thực hiện những bước đầu tiên với công nghệ học máy. Thay vì xây dựng và huấn luyện một mô hình để giải quyết vấn đề của mình, bạn có thể nhập một mô hình được huấn luyện tiền kỳ làm điểm xuất phát.

Bạn có thể tìm thấy danh sách ngày càng tăng gồm các mô hình được huấn luyện trước và dễ sử dụng trên trang Các mô hình cho JavaScript của Tensorflow.js. Bạn cũng có thể lấy các mô hình TensorFlow đã chuyển đổi hoạt động trong TensorFlow.js ở những nơi khác, bao gồm cả TensorFlow Hub.

Tại sao tôi nên sử dụng một mô hình được huấn luyện tiền kỳ?

Việc bắt đầu bằng một mô hình được huấn luyện tiền kỳ phổ biến sẽ mang lại nhiều lợi ích nếu mô hình đó phù hợp với trường hợp sử dụng mà bạn mong muốn, chẳng hạn như:

  1. Không cần tự thu thập dữ liệu huấn luyện. Việc chuẩn bị dữ liệu ở đúng định dạng và gắn nhãn để hệ thống học máy có thể sử dụng dữ liệu đó để học hỏi có thể tốn rất nhiều thời gian và chi phí.
  2. Khả năng tạo mẫu nhanh cho một ý tưởng với chi phí và thời gian ít hơn.
     Không cần thiết phải "phát minh lại bánh xe" khi một mô hình được huấn luyện tiền kỳ có thể đủ tốt để thực hiện những gì bạn cần, cho phép bạn tập trung vào việc sử dụng kiến thức do mô hình cung cấp để triển khai các ý tưởng sáng tạo của mình.
  3. Sử dụng nghiên cứu tiên tiến. Các mô hình được huấn luyện trước thường dựa trên nghiên cứu phổ biến, giúp bạn tiếp xúc với những mô hình như vậy, đồng thời hiểu được hiệu suất của chúng trong thế giới thực.
  4. Dễ sử dụng và có tài liệu đầy đủ. Do mức độ phổ biến của các mô hình này.
  5. Khả năng học chuyển giao . Một số mô hình được huấn luyện trước có khả năng học chuyển giao. Đây là hoạt động chuyển thông tin đã học được từ một nhiệm vụ học máy sang một ví dụ tương tự khác. Ví dụ: một mô hình ban đầu được huấn luyện để nhận dạng mèo có thể được huấn luyện lại để nhận dạng chó, nếu bạn cung cấp cho mô hình đó dữ liệu huấn luyện mới. Việc này sẽ diễn ra nhanh hơn vì bạn sẽ không bắt đầu với một bức tranh trống. Mô hình này có thể sử dụng những gì đã học được để nhận dạng mèo, sau đó nhận dạng vật thể mới. Rốt cuộc, chó cũng có mắt và tai, vì vậy nếu mô hình đã biết cách tìm những đặc điểm đó, thì chúng ta đã đi được nửa đường. Huấn luyện lại mô hình trên dữ liệu của riêng bạn theo cách nhanh hơn nhiều.

COCO-SSD là gì?

COCO-SSD là tên của một mô hình ML phát hiện đối tượng được huấn luyện trước mà bạn sẽ sử dụng trong lớp học lập trình này. Mô hình này nhằm mục đích bản địa hoá và xác định nhiều đối tượng trong một hình ảnh duy nhất. Nói cách khác, mô hình này có thể cho bạn biết khung hình chữ nhật của các đối tượng mà mô hình đã được huấn luyện để tìm, nhằm cung cấp cho bạn vị trí của đối tượng đó trong bất kỳ hình ảnh nào bạn đưa cho mô hình. Bạn có thể xem ví dụ trong hình bên dưới:

760e5f87c335dd9e.png

Nếu có nhiều hơn 1 chú cún trong hình ảnh ở trên, bạn sẽ được cung cấp toạ độ của 2 khung hình chữ nhật, mô tả vị trí của từng chú cún. COCO-SSD đã được huấn luyện trước để nhận dạng 90 vật thể phổ biến hằng ngày, chẳng hạn như người, ô tô, mèo, v.v.

Tên này bắt nguồn từ đâu?

Tên này nghe có vẻ lạ nhưng bắt nguồn từ 2 từ viết tắt:

  • COCO: Đề cập đến việc mô hình này được huấn luyện trên tập dữ liệu COCO (Các đối tượng phổ biến trong bối cảnh). Tập dữ liệu này được cung cấp miễn phí để mọi người có thể tải xuống và sử dụng khi huấn luyện các mô hình của riêng mình. Tập dữ liệu này chứa hơn 200.000 hình ảnh được gắn nhãn mà bạn có thể dùng để học hỏi.
  • SSD (Single Shot MultiBox Detection): Đề cập đến một phần của cấu trúc mô hình được dùng trong quá trình triển khai mô hình. Bạn không cần hiểu rõ điều này để tham gia lớp học lập trình, nhưng nếu tò mò, bạn có thể tìm hiểu thêm về SSD tại đây.

4. Bắt đầu thiết lập

Bạn cần có

  • Một trình duyệt web hiện đại.
  • Kiến thức cơ bản về HTML, CSS, JavaScript và Chrome DevTools (xem đầu ra của bảng điều khiển).

Hãy bắt đầu lập trình

Các mẫu mã nguồn đã được tạo cho Glitch.com hoặc Codepen.io. Bạn chỉ cần sao chép một trong hai mẫu làm trạng thái cơ sở cho lớp học lập trình này chỉ bằng một cú nhấp chuột.

Trên Glitch, hãy nhấp vào nút remix this (trộn lại) để phân nhánh và tạo một bộ tệp mới mà bạn có thể chỉnh sửa.

Hoặc trên Codepen, hãy nhấp vào fork (phân nhánh) ở dưới cùng bên phải màn hình.

Khung rất đơn giản này cung cấp cho bạn các tệp sau:

  • Trang HTML (index.html)
  • Biểu định kiểu (style.css)
  • Tệp để ghi mã JavaScript (script.js)

Để thuận tiện cho bạn, có một câu lệnh nhập được thêm vào tệp HTML cho thư viện TensorFlow.js. Thông báo sẽ có dạng như sau:

index.html

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

Cách khác: Sử dụng trình chỉnh sửa web mà bạn muốn hoặc làm việc trên máy

Nếu bạn muốn tải mã xuống và làm việc cục bộ hoặc trên một trình chỉnh sửa trực tuyến khác, chỉ cần tạo 3 tệp có tên như trên trong cùng một thư mục, sau đó sao chép và dán mã từ mẫu Glitch của chúng tôi vào từng tệp.

5. Điền vào cấu trúc HTML

Tất cả các nguyên mẫu đều yêu cầu một số cấu trúc HTML cơ bản. Sau này, bạn sẽ dùng dữ liệu này để hiển thị đầu ra của mô hình học máy. Hãy thiết lập ngay bây giờ:

  • Tiêu đề của trang
  • Một số văn bản mô tả
  • Nút bật webcam
  • Một thẻ video để kết xuất luồng webcam

Để thiết lập các tính năng này, hãy mở index.html và dán nội dung sau lên mã hiện có:

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>

Tìm hiểu mã

Lưu ý một số điểm chính mà bạn đã thêm:

  • Bạn đã thêm thẻ <h1> và một số thẻ <p> cho tiêu đề và một số thông tin về cách sử dụng trang. Không có gì đặc biệt ở đây.

Bạn cũng đã thêm một thẻ phần đại diện cho không gian minh hoạ:

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>
  • Ban đầu, bạn sẽ đặt cho section này một lớp "invisible" (vô hình). Điều này là để bạn có thể minh hoạ bằng hình ảnh cho người dùng khi mô hình đã sẵn sàng và người dùng có thể nhấp vào nút bật webcam một cách an toàn.
  • Bạn đã thêm nút enable webcam (bật webcam) mà bạn sẽ tạo kiểu trong CSS.
  • Bạn cũng đã thêm một thẻ video mà bạn sẽ truyền dữ liệu đầu vào từ webcam đến. Bạn sẽ thiết lập mã này trong mã JavaScript của mình trong giây lát.

Nếu bạn xem trước kết quả ngay bây giờ, kết quả sẽ có dạng như sau:

b1bfb8c3de68845c.png

6. Thêm kiểu

Giá trị mặc định của phần tử

Trước tiên, hãy thêm kiểu cho các phần tử HTML mà chúng ta vừa thêm để đảm bảo các phần tử đó hiển thị chính xác:

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

Tiếp theo, hãy thêm một số lớp CSS hữu ích để hỗ trợ nhiều trạng thái khác nhau của giao diện người dùng, chẳng hạn như khi chúng ta muốn ẩn nút hoặc làm cho khu vực minh hoạ xuất hiện ở trạng thái không hoạt động nếu mô hình chưa sẵn sàng.

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

Tuyệt vời! Đó là tất cả những gì bạn cần. Nếu bạn ghi đè thành công các kiểu bằng 2 đoạn mã ở trên, thì bản xem trước trực tiếp của bạn sẽ có dạng như sau:

336899a78cf80fcb.png

Lưu ý cách văn bản và nút trong khu vực minh hoạ không có sẵn, vì theo mặc định, HTML đã áp dụng lớp "invisible". Bạn sẽ dùng JavaScript để xoá lớp này sau khi mô hình sẵn sàng được sử dụng.

7. Tạo cấu trúc JavaScript

Tham chiếu các phần tử DOM chính

Trước tiên, hãy đảm bảo bạn có thể truy cập vào các phần chính của trang mà bạn sẽ cần thao tác hoặc truy cập sau này trong mã của chúng tôi:

script.js

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

Kiểm tra xem webcam có được hỗ trợ hay không

Giờ đây, bạn có thể thêm một số hàm hỗ trợ để kiểm tra xem trình duyệt bạn đang dùng có hỗ trợ truy cập vào luồng webcam thông qua getUserMedia hay không:

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) {
}

Tìm nạp luồng phát từ webcam

Tiếp theo, hãy điền mã cho hàm enableCam trống mà chúng ta đã xác định ở trên bằng cách sao chép và dán mã bên dưới:

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

Cuối cùng, hãy thêm một số mã tạm thời để bạn có thể kiểm thử xem webcam có hoạt động hay không.

Đoạn mã dưới đây sẽ giả vờ mô hình của bạn đã được tải và bật nút camera để bạn có thể nhấp vào nút đó. Bạn sẽ thay thế toàn bộ mã này trong bước tiếp theo, vì vậy, hãy chuẩn bị xoá mã này một lần nữa trong giây lát:

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');

Tuyệt vời! Nếu chạy mã và nhấp vào nút như hiện tại, bạn sẽ thấy nội dung như sau:

95442d7227216528.jpeg

8. Sử dụng mô hình học máy

Đang tải mô hình

Giờ đây, bạn đã sẵn sàng tải mô hình COCO-SSD.

Khi quá trình khởi tạo hoàn tất, hãy bật vùng và nút minh hoạ trên trang web của bạn (dán mã này lên mã tạm thời mà bạn đã thêm ở cuối bước trước):

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

Sau khi bạn thêm đoạn mã ở trên và làm mới chế độ xem trực tiếp, bạn sẽ nhận thấy rằng vài giây sau khi trang tải xong (tuỳ thuộc vào tốc độ mạng), nút bật webcam sẽ tự động xuất hiện khi mô hình sẵn sàng sử dụng. Tuy nhiên, bạn cũng đã dán đè hàm predictWebcam. Bây giờ là lúc xác định đầy đủ điều này, vì mã của chúng ta hiện tại sẽ không làm gì cả.

Chuyển sang bước tiếp theo!

Phân loại khung hình từ webcam

Chạy mã bên dưới để cho phép ứng dụng liên tục lấy một khung hình từ luồng webcam khi trình duyệt đã sẵn sàng và truyền khung hình đó đến mô hình để phân loại.

Sau đó, mô hình sẽ phân tích cú pháp kết quả và vẽ thẻ <p> tại các toạ độ trả về, đồng thời đặt văn bản thành nhãn của đối tượng nếu văn bản đó có độ tin cậy cao hơn một mức nhất định.

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

Lệnh gọi thực sự quan trọng trong mã mới này là model.detect().

Tất cả các mô hình được tạo sẵn cho TensorFlow.js đều có một hàm như thế này (tên của hàm có thể thay đổi tuỳ theo từng mô hình, vì vậy hãy xem tài liệu để biết thông tin chi tiết) thực sự thực hiện suy luận học máy.

Suy luận chỉ đơn giản là hành động lấy một số dữ liệu đầu vào và chạy dữ liệu đó thông qua mô hình học máy (về cơ bản là rất nhiều phép toán), sau đó cung cấp một số kết quả. Với các mô hình được tạo sẵn của TensorFlow.js, chúng tôi trả về các dự đoán dưới dạng đối tượng JSON, nên rất dễ sử dụng.

Bạn có thể xem toàn bộ thông tin chi tiết về hàm dự đoán này trong tài liệu của chúng tôi trên GitHub cho mô hình COCO-SSD tại đây. Hàm này thực hiện nhiều thao tác phức tạp ở chế độ nền: Hàm này có thể chấp nhận mọi đối tượng "tương tự như hình ảnh" làm tham số, chẳng hạn như hình ảnh, video, canvas, v.v. Việc sử dụng các mô hình được tạo sẵn có thể giúp bạn tiết kiệm nhiều thời gian và công sức, vì bạn sẽ không cần tự viết mã này và có thể sử dụng "ngay lập tức".

Khi chạy mã này, bạn sẽ thấy một hình ảnh có dạng như sau:

8f9bad6e49e646b.png

Cuối cùng, sau đây là ví dụ về mã phát hiện nhiều đối tượng cùng một lúc:

a2c73a72cf976b22.jpeg

Thật tuyệt vời! Giờ đây, bạn có thể hình dung được việc tạo ra một thiết bị như Nest Cam sẽ đơn giản như thế nào khi dùng một chiếc điện thoại cũ để cảnh báo bạn khi thiết bị phát hiện thấy chú cún trên ghế sofa hoặc chú mèo trên ghế dài. Nếu bạn gặp vấn đề với mã, hãy kiểm tra phiên bản hoạt động cuối cùng của tôi tại đây để xem bạn có sao chép sai nội dung nào không.

9. Xin chúc mừng

Chúc mừng bạn đã thực hiện những bước đầu tiên trong việc sử dụng TensorFlow.js và công nghệ học máy trong trình duyệt web! Giờ đây, bạn có thể bắt đầu từ những bước đi khiêm tốn này và biến nó thành một tác phẩm sáng tạo. Bạn sẽ tạo ra nội dung gì?

Tóm tắt

Trong lớp học lập trình này, chúng ta:

  • Tìm hiểu những lợi ích khi sử dụng TensorFlow.js so với các dạng TensorFlow khác.
  • Tìm hiểu những trường hợp mà bạn có thể muốn bắt đầu bằng một mô hình học máy được huấn luyện trước.
  • Tạo một trang web hoạt động đầy đủ có thể phân loại các đối tượng theo thời gian thực bằng webcam, bao gồm:
  • Tạo khung HTML cho nội dung
  • Xác định kiểu cho các phần tử và lớp HTML
  • Thiết lập giàn giáo JavaScript để tương tác với HTML và phát hiện sự hiện diện của webcam
  • Tải một mô hình TensorFlow.js được huấn luyện trước
  • Sử dụng mô hình đã tải để phân loại liên tục luồng video từ webcam và vẽ một khung hình chữ nhật xung quanh các đối tượng trong hình ảnh.

Các bước tiếp theo

Hãy chia sẻ những tác phẩm của bạn với chúng tôi! Bạn cũng có thể dễ dàng mở rộng những gì mình đã tạo cho lớp học lập trình này sang các trường hợp sử dụng sáng tạo khác. Hãy tư duy sáng tạo và tiếp tục khám phá sau khi bạn hoàn thành.

(Có thể bạn có thể thêm một lớp phía máy chủ đơn giản để gửi thông báo đến một thiết bị khác khi thiết bị đó nhìn thấy một đối tượng nhất định mà bạn chọn bằng cách sử dụng websocket. Đây là một cách hay để tái chế một chiếc điện thoại thông minh cũ và mang lại cho nó một mục đích mới. Có vô số khả năng!)

  • Hãy gắn thẻ chúng tôi trên mạng xã hội bằng hashtag #MadeWithTFJS để có cơ hội xuất hiện trên blog TensorFlow hoặc thậm chí được giới thiệu tại các sự kiện TensorFlow trong tương lai.

Các lớp học lập trình khác về TensorFlow.js để tìm hiểu sâu hơn

Các trang web cần xem