Dalam codelab ini, Anda akan mempelajari cara mem-build "teachable machine" sederhana, yaitu suatu pengklasifikasi gambar kustom yang akan Anda latih dengan cepat di browser menggunakan TensorFlow.js, sebuah library machine learning yang andal dan fleksibel untuk JavaScript. Pertama-tama, Anda akan memuat dan menjalankan model terlatih populer yang disebut MobileNet untuk klasifikasi gambar di browser. Kemudian Anda akan menggunakan teknik yang disebut "pemelajaran transfer", yang akan memanfaatkan pelatihan kita dengan model terlatih MobileNet dan menyesuaikannya untuk melakukan pelatihan bagi aplikasi Anda.
Codelab ini tidak akan membahas teori di balik aplikasi teachable machine. Jika Anda penasaran tentang hal tersebut, lihat tutorial ini.
Yang akan Anda pelajari
- Cara memuat model MobileNet terlatih dan membuat prediksi pada data baru
- Cara membuat prediksi melalui webcam
- Cara menggunakan aktivasi menengah MobileNet untuk melakukan pemelajaran transfer di serangkaian kelas baru yang Anda tentukan dengan cepat menggunakan webcam
Mari kita mulai.
Untuk menyelesaikan codelab ini, Anda memerlukan:
- Chrome versi terbaru atau browser modern lainnya.
- Editor teks, yang dijalankan secara lokal di komputer Anda atau di web melalui sesuatu seperti Codepen atau Glitch.
- Pengetahuan tentang HTML, CSS, JavaScript, dan Chrome DevTools (atau devtool browser pilihan Anda).
- Pemahaman konseptual tingkat tinggi tentang Jaringan Neural. Jika Anda memerlukan pengantar atau penyegaran terkait materi yang akan dibahas, pertimbangkan untuk menonton video oleh 3blue1brown atau video tentang Deep Learning di JavaScript oleh Ashi Krisnan ini.
Buka index.html di editor dan tambahkan konten ini:
<html>
<head>
<!-- Load the latest version of TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
</head>
<body>
<div id="console"></div>
<!-- Add an image that we will use to test -->
<img id="img" crossorigin src="https://i.imgur.com/JlUvsxa.jpg" width="227" height="227"/>
<!-- Load index.js after the content of the page -->
<script src="index.js"></script>
</body>
</html>
Selanjutnya, Buka/Buat file index.js di editor kode, dan sertakan kode berikut:
let net;
async function app() {
console.log('Loading mobilenet..');
// Load the model.
net = await mobilenet.load();
console.log('Successfully loaded model');
// Make a prediction through the model on our image.
const imgEl = document.getElementById('img');
const result = await net.classify(imgEl);
console.log(result);
}
app();
Untuk menjalankan halaman web, cukup buka index.html di Browser Web. Jika Anda menggunakan Cloud Console, cukup muat ulang halaman pratinjau.
Anda akan melihat gambar anjing dan prediksi teratas dari MobileNet pada konsol JavaScript di Developer Tools. Perhatikan bahwa mungkin perlu waktu beberapa saat untuk mendownload model. Harap bersabar.
Apakah gambar diklasifikasikan dengan benar?
Perlu diingat bahwa cara ini juga akan berfungsi di ponsel.
Sekarang, mari kita membuatnya lebih interaktif dan real time. Mari kita siapkan webcam untuk membuat prediksi tentang gambar yang muncul melalui webcam.
Pertama-tama, siapkan elemen video webcam. Buka file index.html, dan tambahkan baris berikut ke dalam bagian <body>, lalu hapus tag <img> yang sebelumnya kita pakai untuk memuat gambar anjing:
<video autoplay playsinline muted id="webcam" width="224" height="224"></video>
Buka file index.js dan tambahkan webcamElement ke bagian paling atas file
const webcamElement = document.getElementById('webcam');
Sekarang, dalam fungsi app() yang ditambahkan sebelumnya, Anda dapat menghapus prediksi melalui gambar. Sebagai gantinya, Anda membuat loop tanpa batas yang menghasilkan prediksi melalui elemen webcam.
async function app() {
console.log('Loading mobilenet..');
// Load the model.
net = await mobilenet.load();
console.log('Successfully loaded model');
// Create an object from Tensorflow.js data API which could capture image
// from the web camera as Tensor.
const webcam = await tf.data.webcam(webcamElement);
while (true) {
const img = await webcam.capture();
const result = await net.classify(img);
document.getElementById('console').innerText = `
prediction: ${result[0].className}\n
probability: ${result[0].probability}
`;
// Dispose the tensor to release the memory.
img.dispose();
// Give some breathing room by waiting for the next animation frame to
// fire.
await tf.nextFrame();
}
}
Jika membuka konsol di halaman web, Anda akan melihat prediksi MobileNet dengan probabilitas untuk setiap frame yang dikumpulkan di webcam.
Prediksi tersebut mungkin akan tidak masuk akal karena set data ImageNet tidak mirip dengan gambar yang biasanya muncul di webcam. Salah satu cara untuk mengujinya adalah dengan memegang gambar anjing di ponsel di depan kamera laptop Anda.
Sekarang, mari membuatnya lebih berguna. Kita akan membuat pengklasifikasi objek 3-kelas kustom menggunakan webcam dengan cepat. Kita akan membuat klasifikasi melalui MobileNet, tetapi kali ini kita akan memilih representasi internal (aktivasi) dari model untuk gambar webcam tertentu dan menggunakannya untuk klasifikasi.
Kita akan menggunakan modul yang disebut "Pengklasifikasi K Tetangga Terdekat", yang secara efektif memungkinkan kita untuk membagi-bagi gambar webcam (sebenarnya aktivasi MobileNet-nya) ke dalam berbagai kategori (atau "kelas"), dan saat pengguna meminta untuk membuat prediksi kita cukup pilih kelas yang memiliki aktivasi paling mirip dengan yang akan kita buat prediksinya.
Tambahkan hasil impor Pengklasifikasi KNN ke bagian akhir impor dalam tag <head> dari index.html (Anda masih memerlukan MobileNet, jadi jangan hapus impor tersebut):
...
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/knn-classifier"></script>
...
Tambahkan 3 tombol untuk setiap tombol di index.html di bawah elemen video. Tombol-tombol tersebut akan digunakan untuk menambahkan gambar pelatihan ke model.
...
<button id="class-a">Add A</button>
<button id="class-b">Add B</button>
<button id="class-c">Add C</button>
...
Di bagian atas index.js, buat pengklasifikasi:
const classifier = knnClassifier.create();
Perbarui fungsi aplikasi:
async function app() {
console.log('Loading mobilenet..');
// Load the model.
net = await mobilenet.load();
console.log('Successfully loaded model');
// Create an object from Tensorflow.js data API which could capture image
// from the web camera as Tensor.
const webcam = await tf.data.webcam(webcamElement);
// Reads an image from the webcam and associates it with a specific class
// index.
const addExample = async classId => {
// Capture an image from the web camera.
const img = await webcam.capture();
// Get the intermediate activation of MobileNet 'conv_preds' and pass that
// to the KNN classifier.
const activation = net.infer(img, true);
// Pass the intermediate activation to the classifier.
classifier.addExample(activation, classId);
// Dispose the tensor to release the memory.
img.dispose();
};
// When clicking a button, add an example for that class.
document.getElementById('class-a').addEventListener('click', () => addExample(0));
document.getElementById('class-b').addEventListener('click', () => addExample(1));
document.getElementById('class-c').addEventListener('click', () => addExample(2));
while (true) {
if (classifier.getNumClasses() > 0) {
const img = await webcam.capture();
// Get the activation from mobilenet from the webcam.
const activation = net.infer(img, 'conv_preds');
// Get the most likely class and confidence from the classifier module.
const result = await classifier.predictClass(activation);
const classes = ['A', 'B', 'C'];
document.getElementById('console').innerText = `
prediction: ${classes[result.label]}\n
probability: ${result.confidences[result.label]}
`;
// Dispose the tensor to release the memory.
img.dispose();
}
await tf.nextFrame();
}
}
Sekarang saat memuat halaman index.html, Anda dapat menggunakan objek umum atau gestur wajah/tubuh guna mengambil gambar untuk masing-masing dari tiga kelas. Setiap kali Anda mengklik salah satu tombol "Tambahkan", satu gambar ditambahkan ke kelas tersebut sebagai contoh pelatihan. Selagi Anda melakukan hal ini, model tersebut terus membuat prediksi tentang gambar webcam yang masuk dan menampilkan hasilnya secara real time.
Sekarang, coba tambahkan kelas lain yang menunjukkan tidak adanya tindakan.
Dalam codelab ini, Anda mengimplementasikan aplikasi web machine learning sederhana menggunakan TensorFlow.js. Anda memuat dan menggunakan model MobileNet terlatih untuk mengklasifikasikan gambar dari webcam. Kemudian Anda menyesuaikan model untuk mengklasifikasikan gambar ke dalam tiga kategori khusus.
Pastikan mengunjungi js.tensorflow.org untuk mempelajari contoh dan demo lainnya beserta kode untuk mengetahui cara menggunakan TensorFlow.js di aplikasi Anda.