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 hardware menggunakan TensorFlow.js, sebuah library machine learning yang andal dan fleksibel untuk JavaScript. Anda akan membuat aplikasi Electron yang menampilkan gambar dari webcam dan mengklasifikasikannya menggunakan TPU Coral edge. Versi yang berfungsi penuh dari Codelab ini tersedia di repo GitHub sig-tfjs.
Apakah saya memerlukan Coral Device?
Tidak. Anda dapat mencoba codelab ini tanpa perangkat Coral dan tetap mendapatkan performa yang baik di mesin desktop dengan menggunakan akselerator WebNN.
Yang akan Anda buat
Dalam codelab ini, Anda akan membuat aplikasi Electron yang mengklasifikasikan gambar. Aplikasi Anda:
- Mengklasifikasikan gambar dari webcam ke kategori yang ditentukan dalam model yang telah Anda latih.
- Menggunakan akselerator Koral 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 TPU tepi Coral.
- 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 menempelkan.
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
Kami telah menempatkan semua kode yang dibutuhkan 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 untuk menghubungkan akselerator Koral.
Sangat Direkomendasikan: Gunakan Git untuk membuat clone repo pada 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 ada 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 digunakan oleh tfjs-tflite-node-codelab. Anda tidak perlu mengedit salah satu file ini, namun Anda harus menjalankan beberapa pengujiannya untuk memastikan bahwa lingkungan Anda disiapkan dengan benar.
Menginstal library runtime Edge TPU
Perangkat Coral mewajibkan 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 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 pra-kompilasi tersedia untuk MacOS dan Windows versi x86-64 serta dapat diinstal dengan menjalankan install.sh atau install.bat skrip dalam arsip setelah didownload.
Mulai Ulang Perangkat
Setelah Edge TPU Runtime diinstal, mulai ulang perangkat untuk mengaktifkan aturan Coral Udev baru yang ditambahkan oleh penginstal.
Memverifikasi bahwa perangkat Coral Anda terdeteksi
Untuk memastikan 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 berikut:
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 menginstal @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 TPU tepi dan mencolokkan perangkat Coral ke komputer. Anda juga dapat mengikuti panduan Memulai Coral untuk menguji versi Python binding Coral. Jika versi Python berfungsi, tetapi pengujian ini masih gagal, beri tahu kami dengan mengajukan laporan bug.
Menjalankan kode awal
Sekarang Anda siap untuk menjalankan kode awal. Ikuti langkah berikut untuk memulai.
- Pindah ke direktori
starter_codedi bawah direktoritfjs-tflite-node-codelab. - menjalankan
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 untuk menggunakan kembali setiap kode dalam aplikasi produksi, pastikan Anda menangani setiap 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. Kode ini mengontrol apa yang ditampilkan di halaman, termasuk feed video dan elemen HTML, dan merupakan tempat 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. Kode ini mengontrol siklus proses aplikasi, termasuk apa yang akan ditampilkan saat aplikasi dibuka dan apa yang harus dilakukan saat aplikasi ditutup, tetapi Anda tidak perlu melakukan perubahan apa pun.
Membuka debugger
Anda mungkin perlu men-debug aplikasi saat mengikuti codelab ini. Karena didasarkan pada 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 lagi yang dapat dipelajari di sini, jadi mari kita mulai melatih pengklasifikasi gambar.
3 Melatih Pengklasifikasi Gambar
Di bagian ini, Anda akan melatih versi TFLite dan Koral dari model klasifikasi gambar kustom.
Melatih Pengklasifikasi
Pengklasifikasi Gambar mengambil gambar input dan menetapkan label pada gambar tersebut. Untuk codelab ini, Anda menggunakan Teachable Machine untuk melatih model di browser Anda. Untuk mempercepat pelatihan bagian ini, Anda dapat menggunakan komputer desktop atau laptop sebagai ganti Raspberry Pi, tetapi Anda harus menyalin file yang dihasilkan ke Pi.
Kini Anda siap melatih model. Jika Anda tidak yakin model apa yang akan dilatih, model yang mudah untuk dilatih adalah pendeteksi orang, yang hanya mendeteksi apakah seseorang berada dalam bingkai.
- Buka halaman pelatihan Teachable Machine di tab baru.
- Pilih Image Project lalu Model gambar standar.
- Tambahkan contoh gambar untuk tiap class. Menggunakan input webcam adalah cara termudah untuk melakukan ini. Anda juga dapat mengganti nama class.
- Jika Anda telah mengumpulkan cukup data untuk setiap class (50 sampel biasanya cukup), tekan Train Model.
Setelah model selesai dilatih, Anda akan melihat pratinjau output model.
Coba berikan input yang berbeda kepada model. Jika Anda menemukan input yang salah diklasifikasikan, tambahkan ke data pelatihan dan latih ulang model.
- Jika Anda puas dengan akurasi model, klik Ekspor Model. Anda harus mendownload dua versi model yang terpisah.
- Ekspor model Anda sebagai model Floatflow Lite Floating point. Tindakan ini akan mendownload file bernama
converted_tflite.zip. yang berjalan di CPU. - Mengekspor 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, saatnya untuk menambahkannya ke aplikasi Anda. Pada akhir bagian ini, aplikasi akan dapat menjalankan model menggunakan CPU perangkat.
Menambahkan file model ke aplikasi
Ekstrak file model conversioned_tflite.zip yang Anda download saat melatih pengklasifikasi. Ada dua file di arsip. model_uquant.tflite adalah model TFLite yang tersimpan, termasuk grafik dan bobot model. labels.txt berisi label yang dapat dibaca manusia untuk class yang diprediksi oleh model. Tempatkan kedua file di modeldirectory.
Menginstal dependensi
Memuat input model dan 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 terinstal, tetapi Anda perlu menginstal tfjs-tflite-node dengan perintah berikut:
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 untuk memuat model. tfjs-tflite-node menyediakan fungsi loadTFLiteModel untuk melakukannya. Ini dapat memuat model dari jalur file, ArrayBuffer, atau URL TFHub. Untuk memuat model dan bobotnya, tambahkan ini ke fungsi main:
CODELAB bagian 1: Memuat 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 membutuhkan tiga langkah. Pertama, Anda mengambil dan memproses frame input dari webcam. Kemudian, Anda menjalankan model pada frame tersebut dan mendapatkan prediksi. Setelah itu, Anda akan menampilkan prediksi di halaman.
Memproses input webcam
Saat ini webcam hanya merupakan elemen HTML dan frame yang ditampilkan tidak tersedia untuk file perender.js JavaScript. 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 hal berikut ke run():
CODELAB bagian 1: Merekam frame webcam di sini.
const image = await tensorCam.capture();
Anda juga harus melakukan praproses setiap frame agar kompatibel dengan model tersebut. Model yang digunakan codelab ini memiliki bentuk input [1, 224, 224, 3], sehingga diharapkan gambar RGB 224 x 224 piksel. tensorCam.capture()memberikan bentuk [224, 224, 3], sehingga Anda perlu menambahkan dimensi ekstra di depan tensor dengan tf.expandDims. Selain itu, model CPU mengharapkan input Float32 antara -1 dan 1, tetapi webcam mengambil nilai 0 hingga 255. Anda dapat membagi tensor input dengan 127 untuk mengubah rentangnya dari [0, 255] menjadi [0, ~2] lalu dikurangi 1 untuk mendapatkan rentang yang diinginkan [-1, ~1]. Tambahkan baris ini ke tf.tidy() di fungsi run() untuk melakukan ini:
CODELAB bagian 1: 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() melakukan ini secara otomatis untuk kode yang terdapat dalam callback-nya, tetapi tidak mendukung fungsi asinkron. Anda harus membuang tensor gambar yang Anda buat sebelumnya secara manual dengan memanggil metode dispose().
CODELAB bagian 1: Buang frame webcam di sini.
image.dispose();
Menjalankan model dan menampilkan hasil
Untuk menjalankan model pada input yang telah diproses sebelumnya, panggil model.predict() pada tensor yang dinormalkan. Ini akan menampilkan tensor satu dimensi yang berisi probabilitas yang diprediksi dari setiap label. Kalikan peluang ini dengan 100 untuk mendapatkan peluang persentase setiap label, lalu gunakan fungsi showPrediction yang disertakan dengan kode awal untuk menampilkan prediksi model di layar.
Kode ini juga menggunakan stats.js untuk menentukan waktu yang diperlukan prediksi dengan melakukan panggilan ke stats.begin dan stats.end di sekitar model.predict.
CODELAB bagian 1: Menjalankan model dan menampilkan 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.
Performa
Karena saat ini sudah disiapkan, model akan berjalan di CPU. Ini tidak masalah untuk komputer desktop dan 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 dari kode yang Anda tulis di bagian terakhir, tetapi Anda dapat menggunakan checkpoint cpu_inference_working jika Anda ingin memulai dari awal.
Langkah-langkah untuk menjalankan model Coral hampir sama dengan langkah-langkah untuk menjalankan model CPU. Perbedaan utamanya adalah pada format model. Karena Coral hanya mendukung tensor uint8, model ini akan dikuantisasi. Ini memengaruhi tensor input yang diteruskan ke model dan tensor output yang ditampilkannya. Perbedaan lainnya adalah model perlu dikompilasi menggunakan compiler Edge TPU untuk berjalan pada Coral TPU. TeachableMachine telah melakukan langkah ini, tetapi Anda dapat mempelajari cara melakukannya untuk model lain dengan mengunjungi Dokumentasi karang.
Menambahkan file model Coral ke aplikasi
Ekstrak file model conversioned_edgetpu.zip yang Anda download saat melatih pengklasifikasi. Ada dua file yang disertakan dalam arsip. model_edgetpu.tflite adalah model TFLite yang tersimpan, termasuk grafik dan bobot model. labels.txt berisi label yang dapat dibaca manusia untuk class yang diprediksi oleh model. Tempatkan file model di direktori coral_model.
Menginstal dependensi
Untuk menjalankan model Coral, diperlukan library runtime Edge TPU. Pastikan Anda telah menginstalnya dengan mengikuti petunjuk penyiapan sebelum melanjutkan.
Perangkat karang diakses sebagai delegasi TFLite. Untuk mengaksesnya dari JavaScript, instal paket coral-tflite-delegasi:
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. Lakukan 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 sama dengan model CPU.
Menambahkan tombol untuk beralih antara CPU dan Coral
Anda menambahkan model Coral bersama model CPU yang Anda tambahkan di bagian terakhir. Menjalankan keduanya secara bersamaan akan menyulitkan untuk melihat perbedaan performa, sehingga tombol beralih 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 hubungkan kondisi ini dalam fungsi run(). Jika salah, useCoralDelegate seharusnya menjalankan versi CPU. Jika tidak, aplikasi ini akan menjalankan versi Coral (tetapi untuk saat ini, perintah tidak akan melakukan apa pun). Gabungkan kode agar tidak menjalankan model CPU di pernyataan if. Perlu diketahui 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 model mengharapkan tensor uint8 dari 0 hingga 255, sehingga inputnya tidak perlu dinormalkan. Namun, outputnya juga berupa tensor uint8 dalam rentang 0 hingga 255. Ini harus dikonversi ke float dari 0 hingga 100 sebelum ditampilkan.
CODELAB bagian 2: Jalankan prediksi Karang 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, yang 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 tepat dibandingkan model CPU, dan biasanya berakhir dengan angka desimal yang merata. Kehilangan presisi ini merupakan kompromi dari menjalankan model terkuantisasi di Coral. Dalam praktiknya, hal ini biasanya tidak penting, tetapi perlu diingat.
Catatan tentang performa
Kecepatan frame yang Anda lihat mencakup prapemrosesan dan pascapemrosesan, sehingga tidak mewakili kemampuan Coral hardware. Anda dapat memperoleh gambaran yang lebih baik tentang performa dengan mengklik pengukur FPS hingga menunjukkan latensi (dalam milidetik), yang hanya mengukur panggilan ke model.predict. Namun, hal itu masih termasuk waktu yang diperlukan untuk memindahkan Tensor ke binding C native TFLite, lalu ke perangkat Coral, jadi ini bukan pengukuran yang sempurna. Untuk tolok ukur performa yang lebih akurat dan ditulis dalam C++, lihat halaman benchmark EdgeTPU.
Perhatikan juga bahwa video direkam di laptop, bukan di Raspberry Pi. Jadi, Anda mungkin melihat FPS yang berbeda.
Mempercepat prapemrosesan Coral
Dalam beberapa kasus, Anda dapat mempercepat pra-pemrosesan dengan mengalihkan backend TFJS. Backend default adalah WebGL, yang bagus untuk operasi besar yang dapat diparalelkan, tetapi aplikasi ini tidak melakukan banyak hal dalam fase prapemrosesan (satu-satunya operasi yang digunakan adalah expandDims, yang tidak paralel). Anda dapat beralih ke backend CPU untuk menghindari latensi ekstra memindahkan tensor ke dan dari GPU dengan menambahkan baris ini setelah impor di bagian atas file.
tf.setBackend(‘cpu');
Hal ini juga memengaruhi prapemrosesan untuk model CPU TFLite, yang diparalelkan, sehingga model berjalan jauh lebih lambat dengan perubahan ini.
6. Mempercepat model CPU dengan WebNN
Jika tidak memiliki akselerator Coral, atau jika 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 beberapa persyaratan tambahan yang tidak dibahas di bagian penyiapan codelab ini, dan Anda harus menginstal toolkit OpenVINO. Pastikan Anda memeriksa penyiapan dengan Platform Sistem Target yang didukung sebelum melanjutkan, namun perhatikan bahwa delegasi WebNN belum mendukung macOS.
Menginstal toolkit OpenVINO
Toolkit OpenVINO menggunakan hardware machine learning yang dibangun ke dalam prosesor Intel untuk mempercepat model. Anda dapat mendownload versi prakompilasi dari Intel atau membuatnya 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 2021.4.2 LTS, karena versi lain mungkin tidak kompatibel. Setelah menjalankan installer, 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.
Memastikan bahwa Delegasi WebNN berfungsi
Untuk memastikan bahwa delegasi WebNN berfungsi dengan benar, jalankan pengujian integrasi untuk paket webnn-tflite-delegate yang ada dalam direktori utama repositori. Untuk menjalankan pengujian integrasi, jalankan perintah ini di direktori paket:
# In webnn-tflite-delegate/
npx yarn
npx yarn test-integration
Anda akan melihat output seperti berikut:
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, hal ini 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 menyetelnya dengan menjalankan perintah setupvars.sh (Linux) atau setupvars.bat (Windows), tetapi Anda dapat menyetelnya secara permanen dengan mengikuti perintah Linux atau Petunjuk Windows ( solusi permanen). Jika Anda menggunakan Windows, lihat
setupvars.bat
perintah tidak mendukung Git bash, jadi pastikan Anda menjalankannya dan perintah lain dari codelab ini dari command prompt Windows.
Menginstal Delegasi WebNN
Dengan OpenVINO terinstal, sekarang Anda siap untuk mempercepat model CPU dengan WebNN. Bagian codelab ini dibuat dari kode yang Anda tulis di bagian "Menjalankan Model CPU di Aplikasi Anda". Anda dapat menggunakan kode yang ditulis dalam langkah ini, tetapi jika Anda telah menyelesaikan bagian Koral, gunakan checkpoint cpu_inference_working sehingga Anda memulai dengan lembaran yang bersih.
Bagian Node.js 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 berjalan pada CPU atau GPU; WebNNDevice memungkinkan Anda memilih mana yang akan digunakan.
Memuat model
Sekarang Anda siap untuk memuat model dengan delegasi WebNN yang 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 versi WebNN dari model sudah siap, tambahkan tombol untuk beralih antara inferensi CPU WebNN dan TfLite. Menjalankan keduanya secara bersamaan akan membuat Anda sulit 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 drop-down untuk beralih antarperangkat WebNN
WebNN mendukung operasi di CPU dan GPU, jadi tambahkan drop-down untuk beralih antara CPU dan GPU. 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 drop-down yang mencantumkan Default, GPU, dan CPU. Memilih salah satu tidak akan melakukan apa pun saat ini karena menu drop-down belum terhubung. 
Mengubah menu dropdown di perangkat
Untuk menghubungkan menu drop-down agar mengubah perangkat WebNN yang digunakan, tambahkan pemroses ke peristiwa change dari elemen pemilih drop-down. 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 drop-down:
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 drop-down akan 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 sepenuhnya mengalihkan model. Untuk mengganti model, Anda harus mengganti nama variabel model terlebih dahulu saat memuat model CPU TfLite di bagian pertama codelab.
Ubah baris berikut...
const model = await loadTFLiteModel(modelPath);
...sehingga cocok dengan baris ini.
const cpuModel = await loadTFLiteModel(modelPath);
Dengan mengganti nama variabel model menjadi cpuModel, tambahkan ini ke fungsi run untuk memilih model yang tepat 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 beralih antara CPU TfLite dan WebNN. 
Anda juga dapat beralih antara CPU WebNN dan inferensi GPU jika memiliki GPU Intel terintegrasi.
Catatan tentang performa
Kecepatan frame yang Anda lihat mencakup prapemrosesan dan pascapemrosesan, sehingga tidak mewakili kemampuan WebNN. Anda dapat memperoleh gambaran yang lebih baik tentang performa dengan mengklik pengukur FPS hingga menunjukkan latensi (dalam milidetik), yang hanya mengukur panggilan ke model.predict. Namun, hal itu masih termasuk waktu yang diperlukan untuk memindahkan Tensor ke binding C native TFLite, sehingga bukan merupakan pengukuran yang sempurna.
7. Selamat
Selamat! Anda baru saja menyelesaikan project Coral / WebNN pertama Anda menggunakan tfjs-tflite-node di Electron.
Cobalah dan uji pada berbagai gambar. Anda juga dapat melatih model baru di TeachableMachine untuk mengklasifikasikan model 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 TPU tepi Coral.
- Cara mempercepat inferensi model dengan WebNN.
Apa selanjutnya?
Setelah Anda memiliki dasar untuk memulai, apa ide kreatif yang dapat Anda pikirkan untuk memperluas model runner machine learning ini ke kasus penggunaan di dunia nyata yang mungkin sedang Anda kerjakan? Anda mungkin dapat merevolusi industri yang Anda kerjakan dengan inferensi yang cepat dan terjangkau, atau Anda dapat mengubah pemanggang roti agar dapat berhenti memanggang ketika roti terlihat pas. Kemungkinannya tak terbatas.
Untuk mempelajari lebih lanjut cara TeachableMachine melatih model yang Anda gunakan, lihat codelab kami tentang Transfer Learning. Jika Anda mencari model lain yang dapat digunakan dengan Coral, seperti pengenalan ucapan dan perkiraan pose, lihat coral.ai/models. Anda juga dapat menemukan versi CPU model tersebut dan banyak versi lainnya di TensorFlow Hub.
Bagikan hal yang Anda buat dengan kami
Anda juga dapat dengan mudah memperluas hasil yang Anda buat hari ini untuk kasus penggunaan materi iklan lainnya, dan sebaiknya Anda berpikir secara kreatif dan tetap meretas.
Jangan lupa untuk memberi tag di media sosial menggunakan hashtag #MadeWithTFJS agar project Anda mendapat peluang untuk ditampilkan di blog TensorFlow atau bahkan acara mendatang. Kami ingin sekali melihat hasil kreasi Anda.