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, sebuah library machine learning yang andal dan fleksibel untuk JavaScript. Anda membangun aplikasi Electron yang menampilkan gambar dari webcam dan mengklasifikasikannya menggunakan TPU edge Coral. Versi yang berfungsi penuh 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 baik di komputer desktop dengan menggunakan akselerator WebNN.
Yang akan Anda bangun
Dalam codelab ini, Anda akan membuat 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, jadi 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, sebaiknya gunakan mesin Intel x86-64 yang menjalankan Ubuntu 20.04 atau Windows 10.
- Versi Node.js >= 12.
- Pengetahuan tentang JavaScript.
- (Direkomendasikan) Coral USB Accelerator untuk mempercepat model.
2. Memulai persiapan
Mendapatkan kode
Kami telah memasukkan semua kode yang Anda perlukan untuk project ini ke dalam repo 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. Hal ini memudahkan koneksi 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 ini ada di direktori tfjs-tflite-node-codelab (di dalam sig-tfjs). Di direktori ini, Anda akan menemukan subdirektori bernama starter_code, cpu_inference_working, coral_inference_working, dan webnn_inference_working. Ini adalah titik pemeriksaan untuk langkah-langkah codelab ini.
Di antara file lain dalam repositori adalah paket NPM yang menjadi dependensi tfjs-tflite-node-codelab. Anda tidak perlu mengedit file ini, tetapi Anda harus menjalankan beberapa pengujiannya untuk memastikan lingkungan Anda disiapkan dengan benar.
Instal 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 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 PPA Coral Google dan menginstal library Edge TPU Runtime.
# 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 tersedia untuk MacOS dan Windows versi x86-64 dan dapat diinstal dengan menjalankan skrip install.sh atau install.bat dalam arsip setelah didownload.
Mulai Ulang Perangkat Anda
Setelah Edge TPU Runtime diinstal, mulai ulang perangkat untuk mengaktifkan aturan Udev Coral baru yang ditambahkan oleh penginstal.
Verifikasi bahwa perangkat Coral Anda 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, colokkan akselerator Coral Anda dan jalankan perintah ini 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 tentang penginstalan @tensorflow/tfjs-node, seperti yang disebutkan dalam log, karena Anda akan menjalankan model di TFLite.
Jika output berisi Encountered unresolved custom op: edgetpu-custom-op, berarti perangkat Coral Anda tidak terdeteksi. Pastikan Anda telah menginstal library runtime Edge TPU dan mencolokkan perangkat Coral ke komputer Anda. 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_codedi direktoritfjs-tflite-node-codelab. - Jalankan
npm installuntuk menginstal dependensi. - Jalankan
npm startuntuk meluncurkan project. Aplikasi yang menampilkan feed video dari webcam komputer Anda akan terbuka.
Apa yang menjadi titik awal?
Titik awal kita adalah aplikasi kamera Electron dasar yang dirancang untuk codelab ini. Kode telah disederhanakan untuk menunjukkan konsep dalam codelab, dan memiliki sedikit penanganan error. Jika Anda memilih menggunakan kembali salah satu kode di aplikasi produksi, pastikan Anda menangani error dan menguji semua kode sepenuhnya.
Mempelajari kode awal
Ada banyak file dalam kode awal ini, tetapi satu-satunya file yang perlu Anda edit adalah renderer.js. File ini mengontrol apa yang muncul di halaman, termasuk feed video dan elemen HTML, dan di sinilah Anda menambahkan model machine learning ke aplikasi. Di antara file lainnya terdapat file index.html, tetapi file ini hanya memuat file renderer.js. Ada juga file main.js, yang merupakan titik entri untuk Electron. File ini mengontrol siklus proses aplikasi, termasuk apa yang ditampilkan saat aplikasi dibuka dan apa yang dilakukan saat aplikasi ditutup, tetapi Anda tidak perlu melakukan perubahan apa pun pada file ini.
Buka debugger
Anda mungkin perlu men-debug aplikasi saat mengikuti codelab ini. Karena aplikasi ini berbasis Electron, aplikasi ini memiliki debugger Chrome bawaan. Di sebagian besar platform, Anda dapat membukanya dengan Ctrl + Shift + i. Klik tab Konsol untuk melihat log dan pesan error dari aplikasi.
Tidak banyak hal lain yang bisa dijelajahi di sini, jadi mari kita langsung melatih pengklasifikasi gambar.
3. Melatih Pengklasifikasi Gambar
Di bagian ini, Anda akan melatih model klasifikasi gambar kustom versi TFLite dan Coral.
Melatih Pengklasifikasi
Pengklasifikasi Gambar mengambil gambar input dan menetapkan label padanya. Untuk codelab ini, Anda menggunakan Teachable Machine untuk melatih model di browser. Untuk mempercepat pelatihan bagian ini, Anda dapat menggunakan komputer desktop atau laptop, bukan Raspberry Pi, tetapi Anda harus menyalin file yang dihasilkan ke Pi.
Sekarang Anda siap melatih model. Jika Anda tidak yakin jenis model apa yang harus dilatih, model yang mudah dilatih adalah detektor orang, yang hanya mendeteksi apakah ada orang dalam frame.
- Buka halaman pelatihan Teachable Machine di tab baru.
- Pilih Project Gambar, lalu Model gambar standar.
- Tambahkan sampel gambar untuk setiap class. Cara termudah untuk melakukannya adalah dengan menggunakan input webcam. Anda juga dapat mengganti nama kelas.
- Setelah Anda mengumpulkan cukup data untuk setiap class (biasanya 50 sampel sudah cukup), tekan Train Model.
Setelah model selesai dilatih, Anda akan melihat pratinjau output model.
Coba berikan input yang berbeda ke model. Jika Anda menemukan input yang diklasifikasikan secara salah, tambahkan input tersebut ke data pelatihan dan latih ulang model.
- Jika Anda puas dengan akurasi model, klik Export Model. Anda harus mendownload dua versi model yang terpisah.
- Ekspor model Anda sebagai model Floating point Tensorflow Lite. Tindakan ini akan mendownload file bernama
converted_tflite.zip. yang berjalan di CPU. - Ekspor model Anda sebagai model Tensorflow Lite EdgeTPU. Tindakan ini akan mendownload file bernama
converted_edgetpu.zipyang berjalan di Coral Edge TPU.
4. Menjalankan model CPU di aplikasi Anda
Setelah melatih model, sekarang saatnya 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 tersimpan, termasuk grafik dan bobot model. labels.txt berisi label yang mudah dibaca untuk kelas yang diprediksi model. Tempatkan kedua file di modeldirectory.
Menginstal dependensi
Memuat model dan memproses input 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 diinstal, tambahkan ke aplikasi di bagian atas renderer.js:
CODELAB bagian 1: Impor tfjs-tflite-node.
const {loadTFLiteModel} = require('tfjs-tflite-node');
Memuat model
Sekarang Anda siap memuat model. tfjs-tflite-node menyediakan fungsi loadTFLiteModel untuk melakukannya. Model 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 Anda memerlukan tiga langkah. Pertama, Anda menarik dan memproses awal frame input dari webcam. Kemudian, Anda menjalankan model pada frame tersebut dan mendapatkan prediksi. Setelah itu, Anda menampilkan prediksi di halaman.
Memproses input webcam
Saat ini, webcam hanyalah elemen HTML, dan frame yang ditampilkan tidak tersedia untuk file JavaScript renderer.js. Untuk mengambil 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 frame, tambahkan kode berikut ke run():
CODELAB bagian 1: Ambil frame webcam di sini.
const image = await tensorCam.capture();
Anda juga perlu memproses setiap frame terlebih dahulu agar kompatibel dengan model. Model yang digunakan codelab ini memiliki bentuk input [1, 224, 224, 3], sehingga mengharapkan gambar RGB 224 x 224 piksel. tensorCam.capture()memberikan bentuk [224, 224, 3], jadi 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 mengambil nilai dari 0 hingga 255. Anda dapat membagi tensor input dengan 127 untuk mengubah rentangnya dari [0, 255] menjadi [0, ~2], lalu mengurangi 1 untuk mendapatkan rentang yang diinginkan [-1, ~1]. Tambahkan baris berikut ke tf.tidy() dalam fungsi run() untuk melakukannya:
CODELAB bagian 1: Lakukan praproses 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() melakukannya secara otomatis untuk kode yang ada dalam callback-nya, tetapi tidak mendukung fungsi asinkron. Anda harus membuang tensor gambar yang Anda buat sebelumnya secara manual dengan memanggil metode dispose()-nya.
CODELAB bagian 1: Buang frame webcam di sini.
image.dispose();
Jalankan model dan tampilkan hasilnya
Untuk menjalankan model pada input yang telah diproses sebelumnya, panggil model.predict() pada tensor yang dinormalisasi. Tindakan ini akan menampilkan tensor satu dimensi yang berisi probabilitas prediksi 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 untuk prediksi dengan menempatkan 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
Saat ini, model berjalan di CPU. Hal 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. Di 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 dikuantisasi. Hal ini memengaruhi tensor input yang diteruskan ke model dan tensor output yang ditampilkan. Perbedaan lainnya adalah model harus dikompilasi menggunakan compiler Edge TPU agar dapat 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 tersimpan, termasuk grafik dan bobot model. labels.txt berisi label yang mudah dibaca untuk kelas yang diprediksi 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 part 2: Import the delegate here.
const {CoralDelegate} = require('coral-tflite-delegate');
Memuat model
Sekarang Anda siap memuat model Coral. Anda melakukannya dengan cara yang sama seperti untuk model CPU, kecuali 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 labelnya sama dengan model CPU.
Menambahkan tombol untuk beralih antara CPU dan Coral
Anda akan menambahkan model Coral bersama dengan model CPU yang ditambahkan di bagian terakhir. Menjalankan keduanya secara bersamaan akan menyulitkan Anda melihat perbedaan performa, sehingga tombol pengalih 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 dalam fungsi run(). Jika useCoralDelegate salah (false), maka akan menjalankan versi CPU. Jika tidak, aplikasi akan menjalankan versi Coral (tetapi untuk saat ini, aplikasi tidak akan melakukan apa pun). Gabungkan kode dari model CPU yang sedang berjalan dalam pernyataan if. Perhatikan bahwa tensor expanded tidak disertakan dalam pernyataan if karena digunakan oleh model Coral.
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
Model versi Coral mengharapkan tensor uint8 dari 0 hingga 255, sehingga inputnya tidak perlu dinormalisasi. Namun, outputnya juga merupakan tensor uint8 dalam rentang 0 hingga 255. Nilai ini harus dikonversi menjadi 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 aplikasi lagi dengan yarn start, dan aplikasi akan menampilkan klasifikasi dari akselerator Coral.
Anda dapat beralih antara inferensi Coral dan CPU dengan menekan tombol. Anda mungkin melihat bahwa peringkat keyakinan model Coral kurang presisi dibandingkan model CPU, dan biasanya berakhir dengan tempat desimal genap. Hilangnya presisi ini adalah imbas dari menjalankan model yang dikuantisasi di Coral. Biasanya tidak menjadi masalah dalam praktiknya, tetapi hal ini perlu diingat.
Catatan tentang performa
Frame rate yang Anda lihat mencakup pra-pemrosesan dan pasca-pemrosesan, sehingga tidak mewakili kemampuan hardware Coral. Anda bisa mendapatkan gambaran yang lebih baik tentang performa dengan mengklik pengukur FPS hingga menampilkan latensi (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, sehingga bukan merupakan pengukuran yang sempurna. Untuk tolok ukur performa yang lebih akurat yang ditulis dalam C++, lihat halaman tolok ukur EdgeTPU.
Perlu diperhatikan juga bahwa video direkam di laptop, bukan Raspberry Pi, sehingga Anda mungkin melihat FPS yang berbeda.
Mempercepat pra-pemrosesan Coral
Dalam beberapa kasus, Anda dapat mempercepat praproses dengan mengganti backend TFJS. Backend default adalah WebGL, yang bagus untuk operasi paralel yang besar, tetapi aplikasi ini tidak melakukan banyak hal tersebut dalam fase pra-pemrosesan (satu-satunya operasi 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 praproses untuk model CPU TFLite, yang bersifat paralel, sehingga model berjalan jauh lebih lambat dengan perubahan ini.
6. Mempercepat model CPU dengan WebNN
Jika Anda tidak memiliki akselerator Coral, atau jika hanya ingin mencoba cara lain untuk mempercepat model, Anda dapat menggunakan delegasi TFLite WebNN. Delegasi ini menggunakan hardware machine learning yang ada di dalam prosesor Intel untuk mempercepat inferensi model dengan OpenVINO toolkit. Oleh karena itu, ada 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 perhatikan bahwa delegasi WebNN belum mendukung macOS.
Menginstal toolkit OpenVINO
Toolkit OpenVINO menggunakan hardware machine learning yang ada di dalam prosesor Intel untuk mempercepat model. Anda dapat mendownload versi yang telah dikompilasi sebelumnya dari Intel atau membangunnya 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 Anda menjalankan penginstal, pastikan Anda 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 ada di direktori webnn-tflite-delegate.
Memverifikasi bahwa Delegasi WebNN berfungsi
Untuk memverifikasi bahwa delegasi WebNN berfungsi dengan benar, jalankan pengujian integrasi untuk paket webnn-tflite-delegate yang ada di direktori root repositori. Untuk menjalankan uji 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, berarti ada 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 menyetel variabel lingkungan OpenVINO. Untuk saat ini, Anda dapat menyetelnya 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 tidak mendukung Git bash, jadi pastikan Anda menjalankan perintah ini dan perintah lainnya dari codelab ini dari command prompt Windows.
Menginstal Delegasi WebNN
Setelah OpenVINO diinstal, Anda siap mempercepat model CPU dengan WebNN. Bagian codelab ini dibuat berdasarkan kode yang Anda tulis di bagian "Jalankan Model CPU di Aplikasi Anda". Anda dapat menggunakan kode yang Anda tulis di langkah ini, tetapi jika Anda telah menyelesaikan bagian Coral, gunakan checkpoint cpu_inference_working agar Anda memulai dengan kondisi yang bersih.
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 part 2: Import the delegate here.
const {WebNNDelegate, WebNNDevice} = require('webnn-tflite-delegate');
Delegasi WebNN mendukung operasi di CPU atau GPU; WebNNDevice memungkinkan Anda memilih mana yang akan digunakan.
Memuat model
Sekarang Anda siap memuat model dengan delegasi WebNN yang diaktifkan. Untuk Coral, Anda harus memuat file model yang berbeda, tetapi WebNN mendukung format model yang sama dengan 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 ulang label karena ini adalah model yang sama.
Menambahkan tombol untuk beralih antara CPU TfLite dan WebNN
Setelah model versi WebNN siap, tambahkan tombol untuk beralih antara inferensi CPU TfLite dan WebNN. Menjalankan keduanya secara bersamaan akan menyulitkan untuk melihat perbedaan performa.
Tambahkan tombol dengan kode ini (perhatikan bahwa tombol ini belum dapat mengganti 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 berjalan di 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 Anda menjalankan aplikasi, Anda akan melihat dropdown yang mencantumkan Default, GPU, dan CPU. Memilih salah satu opsi saat ini tidak akan melakukan apa pun karena dropdown belum dihubungkan. 
Membuat dropdown mengubah perangkat
Untuk menghubungkan dropdown agar mengubah perangkat WebNN yang digunakan, tambahkan pemroses ke peristiwa change dari elemen pemilih dropdown. Saat nilai yang dipilih berubah, buat ulang model WebNN dengan perangkat WebNN yang sesuai 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, dropdown akan membuat model baru dengan setelan yang benar setiap kali diubah. Sekarang saatnya menghubungkan model WebNN dan menggunakannya untuk inferensi.
Menjalankan model WebNN
Model WebNN siap digunakan, tetapi tombol untuk beralih antara WebNN dan CPU TfLite belum benar-benar mengganti model. Untuk mengganti model, Anda harus mengganti nama variabel model terlebih dahulu dari saat Anda 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);
Dengan variabel model yang diganti namanya menjadi cpuModel, tambahkan 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 CPU TfLite 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 pasca-pemrosesan, sehingga tidak mewakili kemampuan WebNN. Anda bisa mendapatkan gambaran yang lebih baik tentang performa dengan mengklik meteran FPS hingga menampilkan latensi (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, jadi ini bukan pengukuran yang sempurna.
7. Selamat
Selamat! Anda baru saja menyelesaikan project Coral / WebNN pertama menggunakan tfjs-tflite-node di Electron.
Cobalah, dan uji pada berbagai gambar. Anda juga dapat melatih model baru di TeachableMachine untuk mengklasifikasikan sesuatu yang sama sekali 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 Anda memiliki dasar untuk memulai, apa ide kreatif yang dapat Anda pikirkan untuk memperluas runner 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 sudah matang. Kemungkinannya tak terbatas.
Untuk melangkah lebih jauh dan mempelajari lebih lanjut cara Teachable Machine melatih model yang Anda gunakan, lihat codelab kami tentang Transfer Learning. Jika Anda mencari model lain yang kompatibel 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 dapat dengan mudah memperluas kreasi Anda hari ini untuk kasus penggunaan kreatif lainnya juga dan kami mendorong Anda untuk berpikir di luar kebiasaan dan terus berkreasi.
Jangan lupa untuk men-tag kami di media sosial menggunakan hashtag #MadeWithTFJS agar project Anda berpeluang ditampilkan di blog TensorFlow atau bahkan di acara mendatang. Kami ingin sekali melihat hasil kreasi Anda.