1. Pengantar
Terakhir Diperbarui: 11-04-2022
Dalam Codelab ini, Anda akan mempelajari cara melatih model klasifikasi gambar menggunakan Teachable Machine, dan menjalankannya dengan akselerasi hardware Coral menggunakan TensorFlow.js, library machine learning yang canggih dan fleksibel untuk JavaScript. Anda akan membangun aplikasi Electron yang menampilkan gambar dari webcam dan mengklasifikasikannya menggunakan TPU tepi Coral. Versi yang berfungsi sepenuhnya dari Codelab ini tersedia di repo GitHub sig-tfjs.
Apakah saya memerlukan Perangkat Coral?
Tidak. Anda dapat mencoba codelab ini tanpa perangkat Coral dan tetap mendapatkan performa yang bagus di mesin desktop dengan menggunakan akselerator WebNN sebagai gantinya.
Yang akan Anda bangun
Dalam codelab ini, Anda akan membangun aplikasi Electron yang mengklasifikasikan gambar. Aplikasi Anda:
- Mengklasifikasikan gambar dari webcam ke dalam kategori yang ditentukan dalam model yang telah Anda latih.
- Menggunakan akselerator Coral untuk meningkatkan performa, jika tersedia.
- Menggunakan WebNN untuk meningkatkan performa, jika didukung di platform Anda.
Yang akan Anda pelajari
- Cara menginstal dan menyiapkan paket NPM tfjs-tflite-node untuk menjalankan model TFLite di Node.js.
- Cara menginstal library runtime Edge TPU untuk menjalankan model di perangkat Coral.
- Cara mempercepat inferensi model menggunakan Coral edge TPU.
- Cara mempercepat inferensi model dengan WebNN.
Codelab ini berfokus pada TFLite di Node.js. Konsep dan blok kode yang tidak-relevan akan dibahas sekilas dan disediakan sehingga Anda cukup menyalin dan menempelkannya.
Yang Anda butuhkan
Untuk menyelesaikan Codelab ini, Anda memerlukan:
- Komputer dengan webcam.
- Untuk Coral, sebaiknya gunakan Raspberry Pi yang menjalankan Raspberry Pi OS (64-bit) dengan desktop.
- Untuk WebNN, kami merekomendasikan mesin Intel x86-64 yang menjalankan Ubuntu 20.04 atau Windows 10.
- Node.js versi >= 12.
- Pengetahuan tentang JavaScript.
- (Direkomendasikan) Akselerator USB Coral untuk mempercepat model.
2. Memulai persiapan
Mendapatkan kode
Kita telah memasukkan semua kode yang Anda perlukan untuk project ini ke dalam repositori Git. Untuk memulai, ambil kode dan buka di lingkungan pengembangan favorit Anda. Untuk codelab ini, sebaiknya gunakan Raspberry Pi yang menjalankan Raspberry Pi OS (64-bit) dengan desktop. Dengan begitu, Anda dapat dengan mudah menghubungkan akselerator Coral.
Sangat Direkomendasikan: Gunakan Git untuk meng-clone repo di Raspberry Pi
Untuk mendapatkan kode, buka jendela terminal baru dan clone repo:
git clone https://github.com/tensorflow/sig-tfjs.git
Semua file yang perlu Anda edit untuk codelab berada di direktori tfjs-tflite-node-codelab (di dalam sig-tfjs). Dalam direktori ini, Anda akan menemukan subdirektori bernama starter_code, cpu_inference_working, coral_inference_working, dan webnn_inference_working. Ini adalah checkpoint untuk langkah-langkah codelab ini.
Di antara file lain dalam repositori ini adalah paket NPM yang diandalkan tfjs-tflite-node-codelab. Anda tidak perlu mengedit file ini, tetapi Anda harus menjalankan beberapa pengujiannya untuk memastikan bahwa lingkungan Anda disiapkan dengan benar.
Menginstal library runtime Edge TPU
Perangkat Coral mengharuskan Anda menginstal library runtime Edge TPU sebelum digunakan. Instal dengan mengikuti petunjuk untuk platform Anda.
Di Linux / Raspberry Pi
Di Linux, library ini tersedia dari PPA Google sebagai paket Debian, libedgetpu1-std, untuk arsitektur x86-64 dan Armv8 (64-bit). Jika prosesor Anda menggunakan arsitektur yang berbeda, Anda harus mengompilasinya dari sumber.
Jalankan perintah ini untuk menambahkan Google Coral PPA dan menginstal library Runtime TPU Edge.
# None of this is needed on Coral boards
# This repo is needed for almost all packages below
echo "deb https://packages.cloud.google.com/apt coral-edgetpu-stable main" | sudo tee /etc/apt/sources.list.d/coral-edgetpu.list
# This repo is needed for only python3-coral-cloudiot and python3-coral-enviro
echo "deb https://packages.cloud.google.com/apt coral-cloud-stable main" | sudo tee /etc/apt/sources.list.d/coral-cloud.list
curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -
sudo apt-get update
sudo apt-get install libedgetpu1-std
Di Windows / OS Lainnya
Biner yang telah dikompilasi sebelumnya tersedia untuk MacOS dan Windows versi x86-64 dan dapat diinstal dengan menjalankan skrip install.sh atau install.bat dalam arsip setelah didownload.
Memulai Ulang Perangkat
Setelah Edge TPU Runtime diinstal, mulai ulang perangkat untuk mengaktifkan aturan Coral Udev baru yang ditambahkan penginstal.
Memverifikasi bahwa perangkat Coral terdeteksi
Untuk memverifikasi bahwa perangkat Coral Anda terdeteksi dan berfungsi, jalankan pengujian integrasi untuk paket coral-tflite-delegate. Paket ini ditemukan di direktori root repositori. Untuk menjalankan pengujian integrasi, masukkan akselerator Coral Anda dan jalankan perintah berikut di direktori paket:
npx yarn
npx yarn build-deps
npx yarn test-integration
Anda akan melihat output seperti ini:
yarn run v1.22.17
$ yarn build && yarn test-integration-dev
$ tsc
$ jasmine --config=jasmine-integration.json
Platform node has already been set. Overwriting the platform with node.
Randomized with seed 78904
Started
============================
Hi there 👋. Looks like you are running TensorFlow.js in Node.js. To speed things up dramatically, install our node backend, which binds to TensorFlow C++, by running npm i @tensorflow/tfjs-node, or npm i @tensorflow/tfjs-node-gpu if you have CUDA. Then call require('@tensorflow/tfjs-node'); (-gpu suffix for CUDA) at the start of your program. Visit https://github.com/tensorflow/tfjs-node for more details.
============================
WARNING: converting 'int32' to 'uint8'
.
1 spec, 0 failures
Finished in 2.777 seconds
Randomized with seed 78904 (jasmine --random=true --seed=78904)
Done in 6.36s.
Jangan khawatir untuk menginstal @tensorflow/tfjs-node, seperti yang disebutkan dalam log, karena Anda akan menjalankan model di TFLite.
Jika outputnya berisi Encountered unresolved custom op: edgetpu-custom-op, berarti perangkat Coral Anda tidak terdeteksi. Pastikan Anda telah menginstal library runtime TPU edge dan mencolokkan perangkat Coral ke komputer. Anda juga dapat mengikuti Panduan Memulai Coral untuk menguji binding Coral versi Python. Jika versi Python berfungsi, tetapi pengujian ini masih gagal, beri tahu kami dengan mengajukan laporan bug.
Menjalankan kode awal
Sekarang Anda siap menjalankan kode awal. Ikuti langkah-langkah berikut untuk memulai.
- Pindah ke direktori
starter_codepada direktoritfjs-tflite-node-codelab. - jalankan
npm installuntuk menginstal dependensi. - Jalankan
npm startuntuk meluncurkan project. Aplikasi yang menampilkan feed video dari webcam komputer akan terbuka.
Apa yang menjadi titik awal?
Titik awal kita adalah aplikasi kamera Electron dasar yang dirancang untuk codelab ini. Kode telah disederhanakan untuk menampilkan konsep dalam codelab, dan memiliki sedikit penanganan error. Jika Anda memilih untuk menggunakan kembali kode apa pun dalam aplikasi produksi, pastikan Anda menangani error dan menguji semua kode sepenuhnya.
Mempelajari kode awal
Ada banyak file dalam kode awal ini, tetapi satu-satunya yang perlu Anda edit adalah renderer.js. Halaman ini mengontrol apa yang muncul di halaman, termasuk feed video dan elemen HTML, serta di sinilah Anda menambahkan model machine learning ke aplikasi. Di antara file lainnya adalah file index.html, tetapi yang dilakukan hanyalah memuat file renderer.js. Ada juga file main.js, yang merupakan titik entri untuk Electron. Class ini mengontrol siklus proses aplikasi, termasuk apa yang akan ditampilkan saat aplikasi dibuka dan tindakan yang harus dilakukan saat aplikasi ditutup, tetapi Anda tidak perlu membuat perubahan apa pun pada aplikasi tersebut.
Membuka debugger
Anda mungkin perlu men-debug aplikasi saat mengikuti codelab ini. Karena aplikasi ini didasarkan pada Electron, aplikasi ini dilengkapi debugger Chrome. Di sebagian besar platform, Anda dapat membukanya dengan Ctrl + Shift + i. Klik tab Konsol untuk melihat log dan pesan error dari aplikasi.
Tidak banyak yang dapat dijelajahi di sini, jadi mari kita langsung pelatihan pengklasifikasi gambar.
3. Melatih Pengklasifikasi Gambar
Di bagian ini, Anda akan melatih model klasifikasi gambar kustom TFLite dan Coral.
Melatih Pengklasifikasi
Pengklasifikasi Gambar mengambil gambar input dan menetapkan label untuk gambar tersebut. Untuk codelab ini, Anda menggunakan Teachable Machine untuk melatih model di browser. Untuk mempercepat pelatihan pada bagian ini, Anda dapat menggunakan komputer desktop atau laptop sebagai ganti Raspberry Pi, tetapi Anda harus menyalin file yang dihasilkan ke Pi.
Sekarang Anda siap untuk melatih model. Jika Anda tidak yakin jenis model yang akan dilatih, model yang mudah dilatih adalah detektor orang, yang hanya mendeteksi apakah seseorang berada dalam bingkai.
- Buka halaman Teachable Machine training di tab baru.
- Pilih Image Project, lalu Model gambar standar.
- Tambahkan contoh gambar untuk setiap kelas. Menggunakan input webcam adalah cara termudah untuk melakukannya. Anda juga dapat mengganti nama kelas.
- Jika Anda telah mengumpulkan data yang cukup untuk setiap kelas (biasanya cukup 50 sampel), tekan Train Model.
Saat model selesai dilatih, Anda akan melihat pratinjau output model.
Coba berikan input yang berbeda ke model. Jika Anda menemukan input yang salah diklasifikasikan, tambahkan ke data pelatihan dan latih ulang model.
- Jika Anda sudah puas dengan akurasi model, klik Ekspor Model. Anda harus mendownload dua versi terpisah dari model tersebut.
- Ekspor model Anda sebagai model Floating point Tensorflow Lite. Tindakan ini akan mendownload file bernama
converted_tflite.zip. yang beroperasi pada CPU. - Ekspor model Anda sebagai model EdgeTPU Tensorflow Lite. Langkah ini akan mendownload file bernama
converted_edgetpu.zipyang berjalan di Coral Edge TPU.
4. Menjalankan model CPU di aplikasi
Setelah melatih model, saatnya untuk menambahkannya ke aplikasi Anda. Pada akhir bagian ini, aplikasi akan dapat menjalankan model Anda menggunakan CPU perangkat.
Menambahkan file model ke aplikasi
Ekstrak file model converted_tflite.zip yang Anda download saat melatih pengklasifikasi. Ada dua file dalam arsip. model_uquant.tflite adalah model TFLite yang disimpan, termasuk bobot dan grafik model. labels.txt berisi label yang dapat dibaca manusia untuk class yang diprediksi oleh model. Tempatkan kedua file di modeldirectory.
Menginstal dependensi
Pemuatan model dan input pra-pemrosesan memerlukan beberapa dependensi dari TensorFlow.js:
tfjs-tflite-node: Paket TensorFlow.js untuk menjalankan model TFLite di Node.js.@tensorflow/tfjs: Paket utama TensorFlow.js.
@tensorflow/tfjs sudah diinstal, tetapi Anda perlu menginstal tfjs-tflite-node dengan perintah ini:
npm install --save tfjs-tflite-node
Setelah terinstal, tambahkan ke aplikasi di bagian atas renderer.js:
CODELAB bagian 1: Mengimpor tfjs-tflite-node.
const {loadTFLiteModel} = require('tfjs-tflite-node');
Memuat model
Sekarang Anda siap memuat model. tfjs-tflite-node menyediakan fungsi loadTFLiteModel untuk melakukannya. Fungsi ini dapat memuat model dari jalur file, ArrayBuffer, atau URL TFHub. Untuk memuat model dan bobotnya, tambahkan kode ini ke fungsi main:
CODELAB bagian 1: Muat model di sini.
const modelPath = './model/model_unquant.tflite';
const model = await loadTFLiteModel(modelPath);
const labels = fs.readFileSync('./model/labels.txt', 'utf8')
.split('\n');
Menjalankan model
Menjalankan model memerlukan tiga langkah. Pertama, Anda menarik dan melakukan pra-pemrosesan frame input dari webcam. Kemudian, Anda menjalankan model pada frame tersebut dan mendapatkan prediksi. Setelah itu, Anda akan menampilkan prediksi di halaman.
Melakukan prapemrosesan input webcam
Saat ini, webcam hanyalah elemen HTML, dan bingkai yang ditampilkannya tidak tersedia untuk file perender.js JavaScript. Untuk menarik frame dari webcam, TensorFlow.js menyediakan tf.data.webcam, yang menyediakan metode capture() yang mudah digunakan untuk mengambil frame dari kamera.
Untuk menggunakannya, tambahkan kode penyiapan ini ke main():
CODELAB bagian 1: Siapkan tf.data.webcam di sini.
const tensorCam = await tf.data.webcam(webcam);
Kemudian, untuk mengambil gambar setiap bingkai, tambahkan kode berikut ke run():
CODELAB bagian 1: Ambil foto frame webcam di sini.
const image = await tensorCam.capture();
Anda juga perlu melakukan prapemrosesan setiap frame agar kompatibel dengan model. Model yang digunakan codelab ini memiliki bentuk input [1, 224, 224, 3], sehingga mengharapkan gambar RGB berukuran 224 x 224 piksel. tensorCam.capture() memberikan bentuk [224, 224, 3], sehingga Anda perlu menambahkan dimensi ekstra di bagian depan tensor dengan tf.expandDims. Selain itu, model CPU mengharapkan input Float32 antara -1 dan 1, tetapi webcam menangkap nilai dari 0 hingga 255. Anda dapat membagi tensor input dengan 127 untuk mengubah rentangnya dari [0, 255] menjadi [0, ~2] dan kemudian mengurangi 1 untuk mendapatkan kisaran yang diinginkan [-1, ~ 1]. Tambahkan baris berikut ke tf.tidy() dalam fungsi run() untuk melakukannya:
CODELAB bagian 1: Lakukan prapemrosesan frame webcam di sini.
const expanded = tf.expandDims(image, 0);
const divided = tf.div(expanded, tf.scalar(127));
const normalized = tf.sub(divided, tf.scalar(1));
Penting untuk membuang tensor setelah menggunakannya. tf.tidy() melakukan ini secara otomatis untuk kode yang terdapat dalam callback-nya, tetapi tidak mendukung fungsi asinkron. Anda harus membuang tensor gambar yang dibuat sebelumnya secara manual dengan memanggil metode dispose().
CODELAB bagian 1: Buang frame webcam di sini.
image.dispose();
Menjalankan model dan menampilkan hasilnya
Untuk menjalankan model pada input yang sudah diproses sebelumnya, panggil model.predict() pada tensor yang dinormalisasi. Ini akan menampilkan tensor satu dimensi yang berisi probabilitas yang diprediksi dari setiap label. Kalikan probabilitas ini dengan 100 untuk mendapatkan peluang persentase setiap label dan gunakan fungsi showPrediction yang disertakan dengan kode awal untuk menampilkan prediksi model di layar.
Kode ini juga menggunakan stats.js untuk mengukur waktu yang diperlukan prediksi dengan melakukan panggilan ke stats.begin dan stats.end di sekitar model.predict.
CODELAB bagian 1: Jalankan model dan tampilkan hasilnya di sini.
stats.begin();
const prediction = model.predict(normalized);
stats.end();
const percentage = tf.mul(prediction, tf.scalar(100));
showPrediction(percentage.dataSync(), labels);
Jalankan aplikasi lagi dengan yarn start, dan Anda akan melihat klasifikasi dari model Anda.
Performa
Seperti yang sedang disiapkan, model berjalan pada CPU. Ini tidak masalah untuk komputer desktop dan sebagian besar laptop, tetapi mungkin tidak diinginkan jika Anda menjalankannya di Raspberry Pi atau perangkat berdaya rendah lainnya. Pada Raspberry Pi 4, Anda mungkin akan melihat sekitar 10 FPS, yang mungkin tidak cukup cepat untuk beberapa aplikasi. Untuk mendapatkan performa yang lebih baik tanpa menggunakan mesin yang lebih cepat, Anda dapat menggunakan silikon khusus aplikasi dalam bentuk Coral Edge TPU.
5. Menjalankan model Coral di aplikasi Anda
Jika tidak memiliki perangkat Coral, Anda dapat melewati bagian ini.
Langkah codelab ini dibuat berdasarkan kode yang Anda tulis di bagian terakhir, tetapi Anda dapat menggunakan checkpoint cpu_inference_working jika ingin memulai dari awal.
Langkah-langkah untuk menjalankan model Coral hampir sama dengan langkah-langkah untuk menjalankan model CPU. Perbedaan utamanya adalah format model. Karena Coral hanya mendukung tensor uint8, model ini akan dikuantisasi. Ini memengaruhi tensor input yang diteruskan ke model dan tensor output yang dihasilkannya. Perbedaan lainnya adalah model harus dikompilasi menggunakan compiler Edge TPU agar berjalan di Coral TPU. TeachableMachine telah melakukan langkah ini, tetapi Anda dapat mempelajari cara melakukannya untuk model lain dengan membuka dokumentasi Coral.
Menambahkan file model Coral ke aplikasi
Ekstrak file model converted_edgetpu.zip yang Anda download saat melatih pengklasifikasi. Ada dua file yang disertakan dalam arsip. model_edgetpu.tflite adalah model TFLite yang disimpan, termasuk bobot dan grafik model. labels.txt berisi label yang dapat dibaca manusia untuk class yang diprediksi oleh model. Tempatkan file model di direktori coral_model.
Menginstal dependensi
Menjalankan model Coral memerlukan library runtime Edge TPU. Pastikan Anda telah menginstalnya dengan mengikuti petunjuk penyiapan sebelum melanjutkan.
Perangkat Coral diakses sebagai delegasi TFLite. Untuk mengaksesnya dari JavaScript, instal paket coral-tflite-delegate:
npm install --save coral-tflite-delegate
Kemudian, impor delegasi dengan menambahkan baris ini ke bagian atas file renderer.js:
CODELAB bagian 2: Impor delegasi di sini.
const {CoralDelegate} = require('coral-tflite-delegate');
Memuat model
Sekarang Anda siap untuk memuat model Coral. Anda melakukan ini dengan cara yang sama seperti untuk model CPU, tetapi sekarang Anda meneruskan opsi ke fungsi loadTFLiteModel untuk memuat delegasi Coral.
CODELAB bagian 2: Muat model delegasi di sini.
const coralModelPath = './coral_model/model_edgetpu.tflite';
const options = {delegates: [new CoralDelegate()]};
const coralModel = await loadTFLiteModel(coralModelPath, options);
Anda tidak perlu memuat label karena sama dengan yang ada di model CPU.
Menambahkan tombol untuk beralih antara CPU dan Coral
Anda menambahkan model Coral bersama model CPU yang telah Anda tambahkan di bagian terakhir. Menjalankan keduanya secara bersamaan akan menyulitkan untuk melihat perbedaan performa, sehingga tombol beralih antara eksekusi Coral dan CPU.
Tambahkan tombol dengan kode ini:
CODELAB bagian 2: Buat tombol delegasi di sini.
let useCoralDelegate = false;
const toggleCoralButton = document.createElement('button');
function toggleCoral() {
useCoralDelegate = !useCoralDelegate;
toggleCoralButton.innerText = useCoralDelegate
? 'Using Coral. Press to switch to CPU.'
: 'Using CPU. Press to switch to Coral.';
}
toggleCoralButton.addEventListener('click', toggleCoral);
toggleCoral();
document.body.appendChild(toggleCoralButton);
Mari kita kaitkan kondisi ini di fungsi run(). Jika useCoralDelegate bernilai salah, versi CPU akan dijalankan. Jika tidak, ia akan menjalankan versi Coral (tetapi untuk saat ini, ia tidak akan melakukan apa pun). Gabungkan kode dari pengoperasian model CPU dalam pernyataan if. Perhatikan bahwa tensor expanded tidak disertakan dalam pernyataan if karena model Coral menggunakannya.
CODELAB bagian 2: Periksa apakah akan menggunakan delegasi di sini.
// NOTE: Don't just copy-paste this code into the app.
// You'll need to edit the code from the CPU section.
const expanded = tf.expandDims(image, 0);
if (useCoralDelegate) {
// CODELAB part 2: Run Coral prediction here.
} else {
const divided = tf.div(expanded, tf.scalar(127));
const normalized = tf.sub(divided, tf.scalar(1));
stats.begin();
const prediction = model.predict(normalized);
stats.end();
const percentage = tf.mul(prediction, tf.scalar(100));
showPrediction(percentage.dataSync(), labels);
}
Menjalankan model
Versi Coral dari model ini mengharapkan tensor uint8 dari 0 hingga 255, sehingga inputnya tidak perlu dinormalisasi. Namun, output-nya juga merupakan tensor uint8 dalam rentang 0 hingga 255. Nilai ini perlu dikonversi ke float dari 0 hingga 100 sebelum ditampilkan.
CODELAB bagian 2: Jalankan prediksi Coral di sini. (Ini adalah bagian dari cuplikan kode di atas)
stats.begin();
const prediction = coralModel.predict(expanded);
stats.end();
const percentage = tf.div(tf.mul(prediction, tf.scalar(100)), tf.scalar(255));
showPrediction(percentage.dataSync(), labels);
Jalankan lagi aplikasi dengan yarn start, dan aplikasi akan menampilkan klasifikasi dari akselerator Coral.
Anda dapat beralih antara inferensi Coral dan CPU dengan menekan tombol tersebut. Anda mungkin memperhatikan bahwa peringkat keyakinan model Coral kurang akurat dibandingkan model CPU, dan biasanya diakhiri dengan angka desimal genap. Kehilangan presisi ini adalah imbal balik dari menjalankan model terkuantisasi pada Coral. Ini biasanya tidak masalah dalam praktiknya, tetapi ini adalah sesuatu yang perlu diingat.
Catatan tentang performa
Kecepatan frame yang Anda lihat mencakup pra-pemrosesan dan pascapemrosesan, sehingga tidak mewakili kemampuan perangkat keras Coral. Anda bisa mendapatkan gambaran yang lebih baik tentang performa dengan mengklik pengukur FPS hingga latensi muncul (dalam milidetik), yang hanya mengukur panggilan ke model.predict. Namun, hal itu masih mencakup waktu yang diperlukan untuk memindahkan Tensor ke binding C native TFLite lalu ke perangkat Coral, jadi pengukuran ini tidak sempurna. Untuk mengetahui tolok ukur performa yang lebih akurat yang ditulis dalam C++, lihat halaman tolok ukur EdgeTPU.
Selain itu, perlu diperhatikan bahwa video ini direkam di laptop, bukan di Raspberry Pi, sehingga Anda mungkin melihat FPS yang berbeda.
Mempercepat prapemrosesan Coral
Dalam beberapa kasus, Anda dapat mempercepat pra-pemrosesan dengan mengganti backend TFJS. Backend default adalah WebGL, yang bagus untuk operasi besar yang dapat diparalelkan, tetapi aplikasi ini tidak melakukan banyak hal tersebut dalam fase prapemrosesan (satu-satunya op yang digunakan adalah expandDims, yang tidak paralel). Anda dapat beralih ke backend CPU untuk menghindari latensi tambahan saat memindahkan tensor ke dan dari GPU dengan menambahkan baris ini setelah impor di bagian atas file.
tf.setBackend(‘cpu');
Hal ini juga memengaruhi pra-pemrosesan untuk model CPU TFLite, yang diparalelkan, sehingga model tersebut berjalan jauh lebih lambat dengan perubahan ini.
6. Mempercepat model CPU dengan WebNN
Jika tidak memiliki akselerator Coral, atau jika Anda hanya ingin mencoba cara lain untuk mempercepat model, Anda dapat menggunakan delegasi WebNN TFLite. Delegasi ini menggunakan hardware machine learning yang terintegrasi dalam prosesor Intel untuk mempercepat inferensi model dengan toolkit OpenVINO. Akibatnya, terdapat persyaratan tambahan yang tidak dibahas di bagian penyiapan codelab ini, dan Anda harus menginstal toolkit OpenVINO. Pastikan untuk memeriksa penyiapan Anda terhadap Platform Sistem Target yang didukung sebelum melanjutkan, tetapi perlu diperhatikan bahwa delegasi WebNN belum mendukung macOS.
Menginstal toolkit OpenVINO
Toolkit OpenVINO menggunakan hardware machine learning yang terintegrasi dalam prosesor Intel untuk mempercepat model. Anda dapat mendownload versi yang telah dikompilasi sebelumnya dari Intel atau mem-build-nya dari sumber. Ada beberapa cara untuk menginstal OpenVINO, tetapi untuk tujuan Codelab ini, sebaiknya gunakan skrip penginstal untuk Windows atau Linux. Pastikan untuk menginstal versi runtime LTS 2021.4.2, karena versi lain mungkin tidak kompatibel. Setelah menjalankan penginstal, pastikan Anda telah mengonfigurasi variabel lingkungan shell seperti yang dijelaskan dalam petunjuk penginstalan untuk Linux atau Windows ( solusi permanen), atau dengan menjalankan perintah setupvars.sh (Linux) atau setupvars.bat (Windows) yang berada di direktori webnn-tflite-delegate.
Memastikan Delegasi WebNN berfungsi
Untuk memastikan bahwa delegasi WebNN berfungsi dengan benar, jalankan pengujian integrasi untuk paket webnn-tflite-delegate yang ditemukan di direktori utama repositori. Untuk menjalankan pengujian integrasi, jalankan perintah berikut di direktori paket:
# In webnn-tflite-delegate/
npx yarn
npx yarn test-integration
Anda akan melihat output seperti ini:
WebNN delegate: WebNN device set to 0.
INFO: Created TensorFlow Lite WebNN delegate for device Default and power Default.
============================
Hi there 👋. Looks like you are running TensorFlow.js in Node.js. To speed things up dramatically, install our node backend, which binds to TensorFlow C++, by running npm i @tensorflow/tfjs-node, or npm i @tensorflow/tfjs-node-gpu if you have CUDA. Then call require('@tensorflow/tfjs-node'); (-gpu suffix for CUDA) at the start of your program. Visit https://github.com/tensorflow/tfjs-node for more details.
============================
label: wine bottle
score: 0.934505045413971
.
1 spec, 0 failures
Finished in 0.446 seconds
Randomized with seed 58441 (jasmine --random=true --seed=58441)
Done in 8.07s.
Jika Anda melihat output seperti ini, output tersebut menunjukkan error konfigurasi:
Platform node has already been set. Overwriting the platform with node.
Randomized with seed 05938
Started
error Command failed with exit code 3221225477.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Output ini kemungkinan besar berarti Anda belum menetapkan variabel lingkungan OpenVINO. Untuk saat ini, Anda dapat menetapkannya dengan menjalankan perintah setupvars.sh (Linux) atau setupvars.bat (Windows), tetapi Anda mungkin ingin menyetelnya secara permanen dengan mengikuti petunjuk Linux atau Windows ( solusi permanen). Jika Anda menggunakan Windows,
setupvars.bat
perintah ini tidak mendukung Git bash, jadi pastikan Anda menjalankannya dan perintah lainnya dari codelab ini dari command prompt Windows.
Menginstal Delegasi WebNN
Setelah OpenVINO terinstal, Anda kini siap untuk mempercepat model CPU dengan WebNN. Bagian codelab ini dibangun berdasarkan kode yang Anda tulis di "Menjalankan Model CPU di Aplikasi Anda" bagian. Anda dapat menggunakan kode yang ditulis pada langkah ini, tetapi jika Anda sudah menyelesaikan bagian Coral, gunakan pos pemeriksaan cpu_inference_working sehingga Anda memulai dari awal.
Bagian Node.js dari delegasi WebNN didistribusikan di npmjs. Untuk menginstalnya, jalankan perintah ini:
npm install --save webnn-tflite-delegate
Kemudian, impor delegasi dengan menambahkan baris ini ke bagian atas file renderer.js:
CODELAB bagian 2: Impor delegasi di sini.
const {WebNNDelegate, WebNNDevice} = require('webnn-tflite-delegate');
Delegasi WebNN mendukung pengoperasian CPU atau GPU; WebNNDevice memungkinkan Anda memilih mana yang akan digunakan.
Memuat model
Sekarang Anda siap memuat model dengan delegasi WebNN diaktifkan. Untuk Coral, Anda harus memuat file model yang berbeda, tetapi WebNN mendukung format model yang sama seperti TFLite. Tambahkan WebNNDelegate ke daftar delegasi yang diteruskan ke model untuk mengaktifkannya:
CODELAB bagian 2: Muat model delegasi di sini.
let webnnModel = await loadTFLiteModel(modelPath, {
delegates: [new WebNNDelegate({webnnDevice: WebNNDevice.DEFAULT})],
});
Anda tidak perlu memuat label lagi karena ini adalah model yang sama.
Menambahkan tombol untuk beralih antara CPU TfLite dan WebNN
Setelah model versi WebNN sudah siap, tambahkan tombol untuk beralih antara inferensi CPU WebNN dan TfLite. Menjalankan keduanya secara bersamaan akan menyulitkan untuk melihat perbedaan performa.
Tambahkan tombol dengan kode ini (perhatikan bahwa ini belum benar-benar beralih model):
CODELAB bagian 2: Buat tombol delegasi di sini.
let useWebNNDelegate = false;
const divElem = document.createElement('div');
const toggleWebNNButton = document.createElement('button');
function toggleWebNN() {
useWebNNDelegate = !useWebNNDelegate;
toggleWebNNButton.innerHTML = useWebNNDelegate
? 'Using WebNN. Press to switch to TFLite CPU.'
: 'Using TFLite CPU. Press to switch to WebNN.';
divElem.hidden = useWebNNDelegate ? false : true;
}
toggleWebNNButton.addEventListener('click', toggleWebNN);
toggleWebNN();
document.body.appendChild(toggleWebNNButton);
document.body.appendChild(divElem);
Kode ini juga menambahkan elemen div yang Anda gunakan untuk mengonfigurasi setelan WebNN di bagian berikutnya.
Menambahkan dropdown untuk beralih antar-perangkat WebNN
WebNN mendukung pengoperasian pada CPU dan GPU, jadi tambahkan dropdown untuk beralih di antara keduanya. Tambahkan kode ini setelah kode yang membuat tombol:
// Create elements for WebNN device selection
divElem.innerHTML = '<br/>WebNN Device: ';
const selectElem = document.createElement('select');
divElem.appendChild(selectElem);
const webnnDevices = ['Default', 'GPU', 'CPU'];
// append the options
for (let i = 0; i < webnnDevices.length; i++) {
var optionElem = document.createElement('option');
optionElem.value = i;
optionElem.text = webnnDevices[i];
selectElem.appendChild(optionElem);
}
Sekarang, jika menjalankan aplikasi, Anda akan melihat menu dropdown yang mencantumkan Default, GPU, dan CPU. Memilih salah satunya tidak akan melakukan apa pun untuk saat ini karena dropdown belum terhubung. 
Membuat dropdown mengubah perangkat
Untuk menghubungkan dropdown sehingga mengubah perangkat WebNN yang digunakan, tambahkan pemroses ke peristiwa change di elemen pemilih dropdown. Saat nilai yang dipilih berubah, buat ulang model WebNN dengan perangkat WebNN terkait yang dipilih di opsi delegasi.
Tambahkan kode berikut setelah kode yang menambahkan dropdown:
selectElem.addEventListener('change', async () => {
let webnnDevice;
switch(selectElem.value) {
case '1':
webnnDevice = WebNNDevice.GPU;
break;
case '2':
webnnDevice = WebNNDevice.CPU;
break;
default:
webnnDevice = WebNNDevice.DEFAULT;
break;
}
webnnModel = await loadTFLiteModel(modelPath, {
delegates: [new WebNNDelegate({webnnDevice})],
});
});
Dengan perubahan ini, menu dropdown membuat model baru dengan setelan yang benar setiap kali model tersebut diubah. Sekarang saatnya menghubungkan model WebNN dan menggunakannya untuk inferensi.
Menjalankan model WebNN
Model WebNN siap digunakan, tetapi tombol untuk beralih antara CPU WebNN dan TfLite belum benar-benar mengalihkan model. Untuk mengganti model, pertama-tama Anda harus mengganti nama variabel model sejak memuat model CPU TfLite di bagian pertama codelab.
Ubah baris berikut...
const model = await loadTFLiteModel(modelPath);
...agar cocok dengan baris ini.
const cpuModel = await loadTFLiteModel(modelPath);
Setelah variabel model diganti namanya menjadi cpuModel, tambahkan variabel ini ke fungsi run untuk memilih model yang benar berdasarkan status tombol:
CODELAB bagian 2: Periksa apakah akan menggunakan delegasi di sini.
let model;
if (useWebNNDelegate) {
model = webnnModel;
} else {
model = cpuModel;
}
Sekarang, saat Anda menjalankan aplikasi, tombol akan beralih antara TfLite CPU dan WebNN. 
Anda juga dapat beralih antara inferensi CPU dan GPU WebNN jika memiliki GPU Intel terintegrasi.
Catatan tentang performa
Kecepatan frame yang Anda lihat mencakup pra-pemrosesan dan pascapemrosesan, sehingga tidak mewakili kemampuan WebNN. Anda bisa mendapatkan gambaran yang lebih baik tentang performa dengan mengklik pengukur FPS hingga latensi muncul (dalam milidetik), yang hanya mengukur panggilan ke model.predict. Namun, hal tersebut masih mencakup waktu yang diperlukan untuk memindahkan Tensor ke binding C native TFLite, sehingga pengukuran ini tidak sempurna.
7. Selamat
Selamat! Anda baru saja menyelesaikan project Coral / WebNN pertama Anda menggunakan tfjs-tflite-node di Electron.
Cobalah dan lakukan pengujian pada berbagai gambar. Anda juga dapat melatih model baru di TeachableMachine untuk mengklasifikasikan sesuatu yang benar-benar berbeda.
Rangkuman
Dalam codelab ini, Anda telah mempelajari:
- Cara menginstal dan menyiapkan paket npm tfjs-tflite-node untuk menjalankan model TFLite di Node.js.
- Cara menginstal library runtime Edge TPU untuk menjalankan model di perangkat Coral.
- Cara mempercepat inferensi model menggunakan Coral edge TPU.
- Cara mempercepat inferensi model dengan WebNN.
Apa selanjutnya?
Setelah memiliki dasar untuk memulai, ide kreatif apa yang dapat Anda kembangkan untuk mengembangkan model machine learning ini ke kasus penggunaan dunia nyata yang mungkin sedang Anda kerjakan? Mungkin Anda dapat merevolusi industri tempat Anda bekerja dengan inferensi yang cepat dan terjangkau, atau mungkin Anda dapat memodifikasi pemanggang roti agar berhenti memanggang saat roti terlihat benar. Kemungkinannya tak terbatas.
Untuk melangkah lebih jauh dan mempelajari lebih lanjut cara TeachableMachine melatih model yang Anda gunakan, lihat codelab kami tentang Pembelajaran Transfer. Jika Anda mencari model lain yang dapat digunakan dengan Coral, seperti pengenalan ucapan dan estimasi pose, lihat coral.ai/models. Anda juga dapat menemukan versi CPU dari model tersebut dan banyak model lainnya di TensorFlow Hub.
Bagikan hal yang Anda buat dengan kami
Anda juga dapat dengan mudah memperluas apa yang Anda buat hari ini untuk kasus penggunaan kreatif lainnya dan kami mendorong Anda untuk berpikir kreatif dan terus meretas.
Jangan lupa untuk memberi tag pada kami di media sosial menggunakan hashtag #MadeWithTFJS agar project Anda berpeluang ditampilkan di blog TensorFlow atau bahkan acara mendatang. Kami ingin melihat apa yang Anda buat.