Machine Learning (ML) là một lĩnh vực công nghệ ngày càng phát triển, và công cụ phát triển ML trên web cũng không ngừng mở rộng. Trong bài viết này, chúng ta sẽ khám phá cách sử dụng thư viện p5.js và ml5.js để vọc vạch trong việc phát triển ML trên web.
p5.js - Công cụ sáng tạo đồ họa trên web
p5.js là một thư viện Javascript với mục đích sử dụng chủ yếu trong việc tạo ra các hiệu ứng đồ họa trên web bằng cách sử dụng canvas. Bạn có thể sử dụng p5.js thông qua p5 Web Editor, một công cụ trực tuyến dễ sử dụng.
Sơ qua về p5.js
p5.js bao gồm hai hàm quan trọng: setup() và draw().
Hàm setup() được thực thi ngay khi chạy ứng dụng và thường được sử dụng để thiết lập trước khi chạy tính năng chính.
Hàm draw() được thực thi ngay sau setup(). Đây là hàm chính của p5.js và được gọi mỗi lần cập nhật giao diện.
ml5.js - Thư viện ML trên web đơn giản
ml5.js là một thư viện bao gồm các thuật toán và các mô hình được huấn luyện trước cho trình duyệt web. ml5.js được xây dựng dựa trên tensorflow.js, cho phép bạn xây dựng các ứng dụng với những mô hình đã được huấn luyện trước.
Một ưu điểm của ml5.js là tích hợp tốt với p5.js, giúp việc sử dụng trở nên dễ dàng hơn.
Ví dụ áp dụng ml5.js với p5.js
Bây giờ, chúng ta sẽ xem một ví dụ để hiểu rõ hơn về cách sử dụng ml5.js và p5.js. Trong ví dụ này, chúng ta sẽ tạo một ứng dụng sử dụng pre-trained model poseNet.
Pre-trained model poseNet
poseNet là một pre-trained model được sử dụng để nhận diện vị trí của tay, chân, mắt, mũi, miệng và nhiều hơn nữa trên cơ thể con người.
Cấu trúc dự án
Cấu trúc dự án đơn giản như sau:
- Trong tệp index.html, chúng ta import p5.js và ml5.js.
Tải video bằng hàm createVideo của p5.js
Để tải video, chúng ta sử dụng hàm createVideo() trong p5.js. Hàm này được gọi trong hàm setup(), sau khi video được tải, chúng ta hiển thị nó trong hàm draw().
Kết quả sẽ như sau:
Tải pre-trained model poseNet
Tiếp theo, chúng ta tải pre-trained model vào dự án. Đoạn mã sau được thêm vào hàm setup():
Vẽ skeleton lên video
Sau khi nghe sự kiện pose, poseNet sẽ trả về một mảng các pose, bao gồm các thuộc tính vị trí của từng khung hình pose.
Chúng ta sẽ lặp qua mảng pose và vẽ skeleton lên video.
Kết quả cuối cùng sẽ như sau:
Kết luận
Trên đây là một ví dụ cơ bản về việc sử dụng ml5.js. Ngoài pre-trained model poseNet, ml5.js còn cung cấp nhiều pre-trained model khác như Image Classifier sử dụng MobileNet, FaceApi và YOLO. Hãy truy cập trang chủ của ml5.js để tìm hiểu thêm.
Chúng tôi xin chân thành cảm ơn tác giả Trần Khôi Nguyên Hoàng đã cho phép sử dụng bài viết.
Có thể bạn quan tâm:
- Một số mẹo để bắt đầu với Machine Learning
- Giải thích Machine Learning cho con nít 5 tuổi
- Hướng triển khai cho các dự án Machine Learning
Xem thêm Việc làm machine learning job in vietnam hấp dẫn trên TopDev
