Hal yang akan Anda buat
Dalam tutorial ini, Anda akan mendownload model Deteksi Objek TensorFlow.js yang dilatih dan diekspor menggunakan AutoML Vision Edge. Kemudian, Anda akan membangun halaman web yang memuat model dan membuat prediksi pada gambar.
Tujuan
Anda akan menulis kode JavaScript ke:
- Jalankan model Deteksi Objek AutoML Vision Edge terlatih di halaman web menggunakan library TensorFlow.js.
Sebelum memulai
Melatih model dari AutoML Vision Edge
Sebelum dapat men-deploy model ke perangkat Edge, Anda harus melatih dan mengekspor model TensorFlow.js dari AutoML Vision Edge terlebih dahulu dengan mengikuti panduan memulai model perangkat Edge.
Pada langkah terakhir, ekspor model ke TensorFlow.js:
Setelah menyelesaikan panduan memulai, Anda akan memiliki file yang diekspor berikut ini di Google Cloud Storage:
- file
dict.txt
dengan label - file
model.json
*.bin
file bobot
Mendownload file model
Salin file yang diekspor dari Google Cloud Storage ke direktori lokal:
gsutil cp gs://${cloud-storage-bucket}/model-export/iod/${model-name}/* ${local-folder}
Menulis aplikasi web kecil
Setelah menyimpan file model TensorFlow.js secara lokal, Anda siap untuk menulis aplikasi web:
Buka direktori lokal tempat file model Anda disimpan jika Anda belum melakukannya.
Buat file
index.html
di direktori lokal yang sama dengan konten berikut:index.html
Contoh kode
(opsional): Ganti atribut jalur
src
dari tag<img>
agar mengarah ke gambar Anda sendiri.
Menjalankan aplikasi web
Mulai server HTTP sederhana pada port 8000 dari direktori dengan
file index.html
:
Python
python -m http.server 8000
Node.js
Jika Anda memiliki Node.js, instal paket http-server secara global dan jalankan:
http-server -p 8000
Buka http://localhost:8000 di browser dan Anda akan melihat hasil prediksi di konsol (Tampilan > Developer > konsol JavaScript), serta di halaman.
Hasilnya adalah daftar objek prediksi yang diurutkan:
[ { "box": { "left": 105.1, "top": 22.2, "width": 70.6, "height": 55.7 }, "label": "Tomato", "score": 0.972 }, ... ]
Untuk informasi selengkapnya terkait API, lihat Dokumentasi paket AutoML NPM.
Bagaimana cara kerjanya?
Setelah aplikasi berjalan, Anda dapat mempelajari fungsi kode tersebut.
Dua tag skrip pertama memuat library TensorFlow.js dan library AutoML, yang tersedia di pengelola paket NPM.
Paket AutoML NPM menyediakan kumpulan API untuk memuat dan menjalankan model yang dihasilkan oleh AutoML Vision Edge. Paket ini menangani semua pra-pemrosesan atau pascapemrosesan yang diperlukan untuk menjalankan model, seperti kemampuan untuk memasukkan elemen gambar atau video, menormalkan nilai piksel, dan menampilkan objek yang diurutkan dengan label dan skor.
Tag gambar memuat gambar uji dari jalur publikasi Google Cloud Storage:
Anda harus mengganti src
gambar dengan jalur ke gambar Anda sendiri saat menguji
model Anda.
Selanjutnya, Anda memuat model dan membuat prediksi dengan gambar:
Anda menentukan model dengan tf.automl.loadObjectDetection(url)
.
Fungsi ini menggunakan URL absolut atau relatif ke file model.json
yang diekspor,
yang dalam hal ini merupakan jalur relatif karena file index.html
dan
file model berada di direktori yang sama.
Anda mendapatkan prediksi dengan memanggil model.detect(img, options)
. Fungsi ini
menjalankan satu gambar melalui model
dan menampilkan objek yang diprediksi. Input untuk fungsi ini adalah elemen gambar
html, elemen video, atau
tensor 3D.
Fungsi model.detect(img, options)
juga menggunakan argumen options
opsional dengan kemungkinan spesifikasi:
score
- Skor probabilitas antara 0 dan 1. Defaults to 0.5. Kotak dengan skor yang lebih rendah dari nilai minimum ini akan diabaikan.topk
- Hanya objek topk yang paling mungkin yang ditampilkan. Jumlah objek sebenarnya mungkin kurang dari jumlah ini.iou
- Batas Intersection over union. IoU adalah metrik antara 0 dan 1 yang digunakan untuk mengukur tumpang tindih dua kotak. Kotak yang diprediksi tidak akan tumpang-tindih melebihi batas yang ditentukan.Baca halaman Mengevaluasi model untuk informasi selengkapnya tentang evaluasi model menggunakan Intersection over union (IoU).
Untuk informasi selengkapnya terkait API, lihat Dokumentasi paket AutoML NPM.
Apa langkah selanjutnya?
Anda telah menyelesaikan tutorial aplikasi web Deteksi Objek TensorFlow.js menggunakan model Edge. Anda telah menjalankan aplikasi web di browser web dan membuat prediksi deteksi objek menggunakan model Edge khusus dan gambar yang dimuat dari web. Anda kemudian memeriksa bagian-bagian dari kode contoh untuk memahami fungsi yang mendasarinya.
Langkah berikutnya:
- Lihat demo yang menggunakan SVG untuk menempatkan kotak yang diprediksi dengan probabilitas ke gambar.
- Pelajari TensorFlow.js lebih lanjut.
- Pelajari library AutoML NPM lebih lanjut melalui dokumentasi resmi.
- Pelajari TensorFlow lebih lanjut secara umum melalui tutorial-nya.