1. Sebelum memulai
Machine Learning menjadi kata yang cukup populer saat ini. Penerapannya tampaknya tidak terbatas, dan teknologi ini tampaknya siap menyentuh hampir setiap industri dalam waktu dekat. Jika Anda bekerja sebagai engineer atau desainer, front end atau back end, dan Anda sudah familiar dengan JavaScript, codelab ini ditulis untuk membantu Anda mulai menambahkan Machine Learning ke keahlian Anda.
Prasyarat
Codelab ini ditulis untuk engineer berpengalaman yang sudah memahami JavaScript.
Yang akan Anda bangun
Dalam codelab ini, Anda akan
- Buat halaman web yang menggunakan machine learning langsung di browser web melalui TensorFlow.js untuk mengklasifikasikan dan mendeteksi objek umum, (ya, termasuk lebih dari satu objek sekaligus), dari streaming webcam live.
- Tingkatkan kualitas webcam biasa Anda untuk mengidentifikasi objek dan mendapatkan koordinat kotak pembatas untuk setiap objek yang ditemukan
- Menyoroti objek yang ditemukan dalam aliran video, seperti yang ditunjukkan di bawah:
Bayangkan Anda dapat mendeteksi apakah seseorang ada dalam video, sehingga Anda dapat menghitung jumlah orang yang hadir pada waktu tertentu untuk memperkirakan seberapa ramai suatu area sepanjang hari, atau mengirimkan pemberitahuan kepada diri Anda sendiri saat Anda terdeteksi berada di ruangan di rumah Anda saat Anda sedang tidak ada di rumah, padahal seharusnya tidak berada di sana. Jika Anda dapat melakukannya, Anda akan selangkah lebih maju dalam membuat versi kamera Google Nest sendiri yang dapat memberi tahu Anda saat melihat penyusup (dari jenis apa pun) menggunakan hardware kustom Anda sendiri. Cukup rapi. Apakah sulit dilakukan? Bukan. Mari kita mulai peretasan...
Yang akan Anda pelajari
- Cara memuat model TensorFlow.js terlatih.
- Cara mengambil data dari streaming webcam langsung dan menggambarnya ke kanvas.
- Cara mengklasifikasikan frame gambar untuk menemukan kotak pembatas objek yang telah dilatih untuk dikenali oleh model.
- Cara menggunakan data yang dikirim kembali dari model untuk menandai objek yang ditemukan.
Codelab ini berfokus pada cara mulai menggunakan model terlatih TensorFlow.js. Konsep dan blok kode yang tidak relevan dengan TensorFlow.js dan machine learning tidak dijelaskan, dan disediakan agar Anda cukup menyalin dan menempelkannya.
2. Apa itu TensorFlow.js?
TensorFlow.js adalah library machine learning open source yang dapat berjalan di mana pun JavaScript dapat berjalan. TensorFlow.js didasarkan pada library TensorFlow asli yang ditulis dalam Python dan bertujuan untuk menciptakan kembali pengalaman developer dan serangkaian API ini untuk ekosistem JavaScript.
Di mana visibilitas dapat digunakan?
Mengingat portabilitas JavaScript, kini Anda dapat menulis dalam 1 bahasa dan melakukan machine learning di semua platform berikut dengan mudah:
- Sisi klien di browser web menggunakan JavaScript vanilla
- Sisi server dan bahkan perangkat IoT seperti Raspberry Pi yang menggunakan Node.js
- Aplikasi desktop yang menggunakan Electron
- Aplikasi seluler native menggunakan React Native
TensorFlow.js juga mendukung beberapa backend dalam setiap lingkungan ini (lingkungan berbasis hardware aktual yang dapat dijalankannya seperti CPU atau WebGL). "Backend" dalam konteks ini tidak berarti lingkungan sisi server - backend untuk eksekusi bisa berupa sisi klien di WebGL misalnya) untuk memastikan kompatibilitas dan juga menjaga agar semuanya berjalan cepat. Saat ini, TensorFlow.js mendukung:
- Eksekusi WebGL di kartu grafis perangkat (GPU) - ini adalah cara tercepat untuk mengeksekusi model yang lebih besar (berukuran lebih dari 3 MB) dengan akselerasi GPU.
- Eksekusi Web Assembly (WASM) di CPU - untuk meningkatkan performa CPU di seluruh perangkat, termasuk ponsel generasi lama. Hal ini lebih cocok untuk model yang lebih kecil (berukuran kurang dari 3 MB) yang sebenarnya dapat dieksekusi lebih cepat di CPU dengan WASM daripada dengan WebGL karena overhead mengupload konten ke prosesor grafis.
- Eksekusi CPU - penggantian jika tidak ada lingkungan lain yang tersedia. Ini adalah yang paling lambat dari ketiganya, tetapi selalu tersedia untuk Anda.
Catatan: Anda dapat memilih untuk memaksa salah satu backend ini jika Anda mengetahui perangkat yang akan Anda gunakan untuk menjalankan kode, atau Anda cukup membiarkan TensorFlow.js memutuskan untuk Anda jika Anda tidak menentukannya.
Kemampuan super sisi klien
Menjalankan TensorFlow.js di browser web pada perangkat klien dapat memberikan beberapa manfaat yang patut dipertimbangkan.
Privasi
Anda dapat melatih dan mengklasifikasikan data di mesin klien tanpa pernah mengirim data ke server web pihak ketiga. Terkadang, hal ini mungkin menjadi persyaratan untuk mematuhi hukum setempat, seperti GDPR misalnya, atau saat memproses data apa pun yang mungkin ingin disimpan pengguna di perangkatnya dan tidak dikirim ke pihak ketiga.
Kecepatan
Karena Anda tidak perlu mengirim data ke server jarak jauh, inferensi (tindakan mengklasifikasikan data) dapat dilakukan lebih cepat. Lebih baik lagi, Anda memiliki akses langsung ke sensor perangkat seperti kamera, mikrofon, GPS, akselerometer, dan lainnya jika pengguna memberi Anda akses.
Jangkauan dan skala
Dengan sekali klik, siapa pun di dunia dapat mengklik link yang Anda kirimkan, membuka halaman web di browser mereka, dan memanfaatkan apa yang telah Anda buat. Anda tidak memerlukan penyiapan Linux sisi server yang rumit dengan driver CUDA dan banyak lagi hanya untuk menggunakan sistem machine learning.
Biaya
Tanpa server berarti satu-satunya yang perlu Anda bayar adalah CDN untuk menghosting file HTML, CSS, JS, dan model Anda. Biaya CDN jauh lebih murah daripada menjalankan server (yang berpotensi memiliki kartu grafis terpasang) 24/7.
Fitur sisi server
Memanfaatkan implementasi Node.js dari TensorFlow.js memungkinkan fitur berikut.
Dukungan CUDA penuh
Di sisi server, untuk akselerasi kartu grafis, Anda harus menginstal driver NVIDIA CUDA agar TensorFlow dapat berfungsi dengan kartu grafis (tidak seperti di browser yang menggunakan WebGL - tidak perlu penginstalan). Namun, dengan dukungan CUDA penuh, Anda dapat memanfaatkan kemampuan tingkat bawah kartu grafis sepenuhnya, sehingga menghasilkan waktu pelatihan dan inferensi yang lebih cepat. Performa setara dengan implementasi Python TensorFlow karena keduanya menggunakan backend C++ yang sama.
Ukuran Model
Untuk model canggih dari penelitian, Anda mungkin bekerja dengan model yang sangat besar, mungkin berukuran gigabyte. Model ini saat ini tidak dapat dijalankan di browser web karena batasan penggunaan memori per tab browser. Untuk menjalankan model yang lebih besar ini, Anda dapat menggunakan Node.js di server Anda sendiri dengan spesifikasi hardware yang diperlukan untuk menjalankan model tersebut secara efisien.
IOT
Node.js didukung di komputer papan tunggal populer seperti Raspberry Pi, yang berarti Anda juga dapat menjalankan model TensorFlow.js di perangkat tersebut.
Kecepatan
Node.js ditulis dalam JavaScript yang berarti Node.js diuntungkan dari kompilasi tepat waktu. Artinya, Anda mungkin sering melihat peningkatan performa saat menggunakan Node.js karena akan dioptimalkan saat runtime, terutama untuk pra-pemrosesan yang mungkin Anda lakukan. Contoh yang bagus tentang hal ini dapat dilihat dalam studi kasus ini yang menunjukkan cara Hugging Face menggunakan Node.js untuk mendapatkan peningkatan performa 2x untuk model pemrosesan bahasa alami mereka.
Sekarang Anda telah memahami dasar-dasar TensorFlow.js, tempat TensorFlow.js dapat berjalan, dan beberapa manfaatnya. Mari kita mulai melakukan hal-hal yang berguna dengannya.
3. Menggunakan model terlatih
TensorFlow.js menyediakan berbagai model machine learning (ML) terlatih. Model ini telah dilatih oleh tim TensorFlow.js dan di-wrap dalam class yang mudah digunakan, serta merupakan cara yang tepat untuk mengambil langkah pertama Anda dalam machine learning. Daripada membuat dan melatih model untuk memecahkan masalah, Anda dapat mengimpor model terlatih sebagai titik awal.
Anda dapat menemukan daftar model terlatih yang mudah digunakan dan terus bertambah di halaman Models for JavaScript TensorFlow.js. Ada juga tempat lain untuk mendapatkan model TensorFlow yang dikonversi dan berfungsi di TensorFlow.js, termasuk TensorFlow Hub.
Mengapa saya ingin menggunakan model terlatih?
Ada sejumlah manfaat untuk memulai dengan model pra-latih populer jika sesuai dengan kasus penggunaan yang Anda inginkan, seperti:
- Tidak perlu mengumpulkan data pelatihan sendiri. Mempersiapkan data dalam format yang benar, dan melabelinya agar sistem machine learning dapat menggunakannya untuk belajar, dapat sangat memakan waktu dan mahal.
- Kemampuan untuk membuat prototipe ide dengan cepat serta biaya dan waktu yang lebih sedikit.
Tidak ada gunanya "menciptakan sesuatu yang sudah ada" jika model yang telah dilatih sebelumnya mungkin cukup baik untuk melakukan apa yang Anda butuhkan, sehingga Anda dapat berkonsentrasi menggunakan pengetahuan yang diberikan oleh model untuk menerapkan ide kreatif Anda. - Penggunaan riset canggih. Model terlatih sering kali didasarkan pada riset populer, sehingga Anda dapat mengakses model tersebut, sekaligus memahami performanya di dunia nyata.
- Kemudahan penggunaan dan dokumentasi yang lengkap. Karena popularitas model tersebut.
- Kemampuan transfer learning. Beberapa model terlatih menawarkan kemampuan transfer learning, yang pada dasarnya adalah praktik mentransfer informasi yang dipelajari dari satu tugas machine learning, ke contoh serupa lainnya. Misalnya, model yang awalnya dilatih untuk mengenali kucing dapat dilatih ulang untuk mengenali, jika Anda memberinya data pelatihan baru. Proses ini akan lebih cepat karena Anda tidak akan memulai dengan kanvas kosong. Model dapat menggunakan apa yang telah dipelajarinya untuk mengenali kucing, lalu mengenali hal baru - juga memiliki mata dan telinga, jadi jika model sudah tahu cara menemukan fitur tersebut, kita sudah setengah jalan. Latih ulang model dengan data Anda sendiri secara lebih cepat.
Apa itu COCO-SSD?
COCO-SSD adalah nama model ML deteksi objek terlatih yang akan Anda gunakan selama codelab ini, yang bertujuan untuk melokalkan dan mengidentifikasi beberapa objek dalam satu gambar. Dengan kata lain, model ini dapat memberi tahu Anda kotak pembatas objek yang telah dilatih untuk ditemukan guna memberi Anda lokasi objek tersebut dalam gambar apa pun yang Anda berikan. Contohnya ditampilkan dalam gambar di bawah:
Jika ada lebih dari 1 dalam gambar di atas, Anda akan diberi koordinat 2 kotak pembatas, yang menjelaskan lokasi masing-masing. COCO-SSD telah dilatih sebelumnya untuk mengenali 90 objek umum sehari-hari, seperti orang, mobil, kucing, dll.
Dari mana nama tersebut berasal?
Namanya mungkin terdengar aneh, tetapi berasal dari 2 akronim:
- COCO: Merujuk pada fakta bahwa model ini dilatih dengan set data COCO (Common Objects in Context) yang tersedia secara bebas untuk didownload dan digunakan oleh siapa pun saat melatih model mereka sendiri. Set data berisi lebih dari 200.000 gambar berlabel yang dapat digunakan untuk dipelajari.
- SSD (Single Shot MultiBox Detection): Merujuk pada bagian arsitektur model yang digunakan dalam penerapan model. Anda tidak perlu memahami hal ini untuk codelab, tetapi jika ingin tahu, Anda dapat mempelajari SSD lebih lanjut di sini.
4. Memulai persiapan
Yang Anda butuhkan
- Browser web modern.
- Pengetahuan dasar tentang HTML, CSS, JavaScript, dan Chrome DevTools (melihat output konsol).
Mari kita mulai coding
Template boilerplate untuk memulai telah dibuat untuk Glitch.com atau Codepen.io. Anda cukup meng-clone salah satu template sebagai status dasar untuk codelab ini, hanya dengan sekali klik.
Di Glitch, klik tombol remix this untuk membuat fork dan membuat kumpulan file baru yang dapat Anda edit.
Atau, di Codepen, klik fork di kanan bawah layar.
Kerangka yang sangat sederhana ini menyediakan file berikut:
- Halaman HTML (index.html)
- Stylesheet (style.css)
- File untuk menulis kode JavaScript (script.js)
Untuk memudahkan Anda, ada impor tambahan di file HTML untuk library TensorFlow.js. Tampilannya terlihat seperti ini:
index.html
<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
Alternatif: Gunakan editor web pilihan Anda atau kerjakan secara lokal
Jika Anda ingin mendownload kode dan mengerjakannya secara lokal, atau di editor online yang berbeda, cukup buat 3 file yang disebutkan di atas dalam direktori yang sama, lalu salin dan tempel kode dari boilerplate Glitch kami ke setiap file tersebut.
5. Mengisi kerangka HTML
Semua prototipe memerlukan beberapa struktur HTML dasar. Anda akan menggunakannya untuk merender output model machine learning nanti. Mari kita siapkan sekarang:
- Judul untuk halaman
- Beberapa teks deskriptif
- Tombol untuk mengaktifkan webcam
- Tag video untuk merender streaming webcam
Untuk menyiapkan fitur ini, buka index.html dan tempelkan kode berikut untuk menggantikan kode yang ada:
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>
Memahami kode
Perhatikan beberapa hal penting yang Anda tambahkan:
- Anda telah menambahkan tag
<h1>dan beberapa tag<p>untuk header dan beberapa informasi tentang cara menggunakan halaman. Tidak ada yang istimewa di sini.
Anda juga menambahkan tag bagian yang merepresentasikan ruang demo:
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>
- Awalnya, Anda akan memberikan class "invisible" pada
sectionini. Hal ini dilakukan agar Anda dapat mengilustrasikan secara visual kepada pengguna saat model siap, dan aman untuk mengklik tombol aktifkan webcam. - Anda menambahkan tombol aktifkan webcam, yang akan Anda beri gaya di CSS.
- Anda juga menambahkan tag video, yang akan digunakan untuk melakukan streaming input webcam. Anda akan segera menyiapkannya di kode JavaScript.
Jika Anda melihat pratinjau output sekarang, output tersebut akan terlihat seperti ini:
6. Tambah gaya
Default elemen
Pertama, mari kita tambahkan gaya untuk elemen HTML yang baru saja kita tambahkan untuk memastikan elemen tersebut dirender dengan benar:
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;
}
Selanjutnya, tambahkan beberapa class CSS yang berguna untuk membantu berbagai status antarmuka pengguna kita, seperti saat kita ingin menyembunyikan tombol, atau membuat area demo tampak tidak tersedia jika model belum siap.
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;
}
Bagus! Itu saja yang Anda perlukan. Jika Anda berhasil mengganti gaya dengan 2 bagian kode di atas, pratinjau langsung Anda akan terlihat seperti ini:
Perhatikan bagaimana teks area demo dan tombol tidak tersedia, karena HTML secara default menerapkan class "invisible". Anda akan menggunakan JavaScript untuk menghapus class ini setelah model siap digunakan.
7. Buat kerangka JavaScript
Mereferensikan elemen DOM utama
Pertama, pastikan Anda dapat mengakses bagian penting halaman yang akan Anda manipulasi atau akses nanti dalam kode kami:
script.js
const video = document.getElementById('webcam');
const liveView = document.getElementById('liveView');
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');
Memeriksa dukungan webcam
Anda kini dapat menambahkan beberapa fungsi pendukung untuk memeriksa apakah browser yang Anda gunakan mendukung akses ke streaming webcam melalui 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) {
}
Mengambil streaming webcam
Selanjutnya, isi kode untuk fungsi enableCam yang sebelumnya kosong yang kita tentukan di atas dengan menyalin dan menempelkan kode di bawah:
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);
});
}
Terakhir, tambahkan beberapa kode sementara agar Anda dapat menguji apakah webcam berfungsi.
Kode di bawah akan berpura-pura memuat model Anda dan mengaktifkan tombol kamera, sehingga Anda dapat mengkliknya. Anda akan mengganti semua kode ini di langkah berikutnya, jadi bersiaplah untuk menghapusnya lagi sebentar lagi:
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');
Bagus! Jika menjalankan kode dan mengklik tombol seperti saat ini, Anda akan melihat tampilan seperti ini:
8. Penggunaan model Machine Learning
Memuat model
Sekarang Anda siap memuat model COCO-SSD.
Setelah selesai diinisialisasi, aktifkan area dan tombol demo di halaman web Anda (tempelkan kode ini di atas kode sementara yang Anda tambahkan di akhir langkah terakhir):
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');
});
Setelah menambahkan kode di atas dan memuat ulang tampilan live, Anda akan melihat bahwa beberapa detik setelah halaman dimuat (bergantung pada kecepatan jaringan), tombol aktifkan webcam akan otomatis muncul saat model siap digunakan. Namun, Anda juga menempelkan fungsi predictWebcam. Jadi, sekarang saatnya menentukan sepenuhnya hal ini, karena kode kita tidak akan melakukan apa pun saat ini.
Lanjutkan ke langkah berikutnya.
Mengklasifikasikan frame dari webcam
Jalankan kode di bawah untuk mengizinkan aplikasi terus mengambil frame dari streaming webcam saat browser siap dan meneruskannya ke model untuk diklasifikasikan.
Kemudian, model akan mengurai hasil dan menggambar tag <p> pada koordinat yang ditampilkan, serta menyetel teks ke label objek, jika tingkat keyakinannya melebihi tingkat tertentu.
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);
});
}
Panggilan yang sangat penting dalam kode baru ini adalah model.detect().
Semua model siap pakai untuk TensorFlow.js memiliki fungsi seperti ini (yang namanya dapat berubah dari model ke model, jadi periksa dokumentasinya untuk mengetahui detailnya) yang benar-benar melakukan inferensi machine learning.
Inferensi hanyalah tindakan mengambil beberapa input dan menjalankannya melalui model machine learning (pada dasarnya banyak operasi matematika), lalu memberikan beberapa hasil. Dengan model siap pakai TensorFlow.js, kita menampilkan prediksi dalam bentuk objek JSON, sehingga mudah digunakan.
Anda dapat menemukan detail lengkap fungsi prediksi ini di dokumentasi GitHub untuk model COCO-SSD di sini.. Fungsi ini melakukan banyak tugas berat di balik layar: Fungsi ini dapat menerima objek "seperti gambar" apa pun sebagai parameternya, seperti gambar, video, kanvas, dan sebagainya. Menggunakan model siap pakai dapat menghemat banyak waktu dan tenaga Anda, karena Anda tidak perlu menulis kode ini sendiri dan dapat menggunakannya "langsung".
Menjalankan kode ini sekarang akan memberi Anda gambar yang terlihat seperti ini:
Terakhir, berikut contoh kode yang mendeteksi beberapa objek secara bersamaan:
Hore! Sekarang Anda bisa membayangkan betapa mudahnya membuat perangkat seperti Nest Cam menggunakan ponsel lama untuk memberi tahu Anda saat melihat Anda di sofa, atau kucing Anda di kursi. Jika Anda mengalami masalah dengan kode, periksa versi kerja akhir saya di sini untuk melihat apakah ada yang salah saat Anda menyalin.
9. Selamat
Selamat! Anda telah melakukan langkah pertama dalam menggunakan TensorFlow.js dan machine learning di browser web. Sekarang giliran Anda untuk mengambil awal yang sederhana ini dan mengubahnya menjadi sesuatu yang kreatif. Apa yang akan Anda buat?
Rangkuman
Dalam codelab ini, kita telah:
- Mempelajari manfaat penggunaan TensorFlow.js dibandingkan bentuk TensorFlow lainnya.
- Mempelajari situasi saat Anda mungkin ingin memulai dengan model machine learning terlatih.
- Membuat halaman web yang berfungsi penuh yang dapat mengklasifikasikan objek secara real time menggunakan webcam Anda, termasuk:
- Membuat kerangka HTML untuk konten
- Menentukan gaya untuk elemen dan class HTML
- Menyiapkan scaffolding JavaScript untuk berinteraksi dengan HTML dan mendeteksi keberadaan webcam
- Memuat model TensorFlow.js terlatih
- Menggunakan model yang dimuat untuk membuat klasifikasi berkelanjutan dari streaming webcam dan menggambar kotak pembatas di sekitar objek dalam gambar.
Langkah berikutnya
Bagikan hal yang Anda buat dengan kami. Anda dapat dengan mudah memperluas apa yang Anda buat untuk codelab ini ke kasus penggunaan kreatif lainnya juga. Kami mendorong Anda untuk berpikir kreatif dan terus melakukan peretasan setelah Anda selesai.
- Lihat semua objek yang dapat dikenali oleh model ini dan pikirkan cara Anda dapat menggunakan pengetahuan tersebut untuk melakukan tindakan. Ide kreatif apa yang kini dapat diterapkan dengan memperluas apa yang Anda buat hari ini?
(Mungkin Anda dapat menambahkan lapisan sisi server sederhana untuk mengirimkan notifikasi ke perangkat lain saat perangkat tersebut melihat objek tertentu pilihan Anda menggunakan websocket. Cara ini akan menjadi cara yang bagus untuk mendaur ulang smartphone lama dan memberinya tujuan baru. Kemungkinannya tidak terbatas.)
- Tag kami di media sosial menggunakan hashtag #MadeWithTFJS agar project Anda mendapat peluang untuk ditampilkan di blog TensorFlow atau bahkan dipamerkan di acara TensorFlow mendatang.
Codelab TensorFlow.js lainnya untuk memperdalam pemahaman
- Menulis jaringan neural dari awal di TensorFlow.js
- Pengenalan audio menggunakan pemelajaran transfer di TensorFlow.js
- Klasifikasi gambar kustom menggunakan pemelajaran transfer di TensorFlow.js