Tutorial TensorFlow.js Edge

Hal yang akan Anda buat

Dalam tutorial ini, Anda akan mendownload model Klasifikasi Gambar 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 Klasifikasi Gambar AutoML Vision Edge yang telah dilatih sebelumnya 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:

screenshot model TensorFlow.js ekspor yang diperbarui

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
Contoh folder Tensorflow.js

Mendownload file model

Salin file yang diekspor dari Google Cloud Storage ke direktori lokal:

gsutil cp gs://${cloud-storage-bucket}/model-export/icn/${model-name}/* ${local-folder}

Menulis aplikasi web kecil

Setelah menyimpan file model TensorFlow.js secara lokal, Anda siap untuk menulis aplikasi web:

  1. Buka direktori lokal tempat file model Anda disimpan jika Anda belum melakukannya.

  2. Buat file index.html di direktori lokal yang sama dengan konten berikut:

    index.html

    Contoh kode

    <script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>
<img id="daisy" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/img_classification/daisy.jpg">
<script>
async function run() {
  const model = await tf.automl.loadImageClassification('model.json');
  const image = document.getElementById('daisy');
  const predictions = await model.classify(image);
  console.log(predictions);
  // Show the resulting object on the page.
  const pre = document.createElement('pre');
  pre.textContent = JSON.stringify(predictions, null, 2);
  document.body.append(pre);
}
run();
</script>

Menjalankan aplikasi web

Mulai server HTTP sederhana pada port 8000 dari direktori dengan file index.html:

Python

python3 -m SimpleHTTPServer 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.

Prediksi TensorFlow.js di browser

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.

<script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>

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:

<img id="daisy" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/img_classification/daisy.jpg">

Anda harus mengganti src gambar dengan jalur ke gambar Anda sendiri saat menguji model Anda.

Selanjutnya, Anda memuat model dan membuat prediksi dengan gambar:

const model = await tf.automl.loadImageClassification('model.json');
const image = document.getElementById('daisy');
const predictions = await model.classify(image);

Anda menentukan model dengan tf.automl.loadImageClassification(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.classify(image). Fungsi ini menjalankan satu gambar melalui model dan menampilkan prediksi. Input untuk fungsi ini adalah elemen gambar html, elemen video, atau tensor 3D.

Apa langkah selanjutnya?

Anda telah menyelesaikan tutorial aplikasi web Klasifikasi Gambar TensorFlow.js menggunakan model Edge. Anda telah menjalankan aplikasi web di browser web serta membuat prediksi klasifikasi menggunakan model Edge kustom dan gambar yang Anda muat dari web. Anda kemudian memeriksa bagian-bagian dari kode contoh untuk memahami fungsi yang mendasarinya.

Langkah berikutnya: