Pengambilan prediktif dengan TensorFlow.js

Dalam tutorial ini, Anda akan menjalankan contoh aplikasi web yang menggunakan TensorFlow.js untuk melakukan prefetching prediktif pada resource. Dibuat dengan Angular , contoh ini terinspirasi oleh Google Merchandise Store tetapi tidak membagikan data atau detail penerapan apa pun ke dalamnya.

Contoh ini menggunakan model terlatih untuk membuat prediksi. Dalam skenario dunia nyata, Anda perlu melatih model menggunakan analitik dari situs web Anda. Anda dapat menggunakan TFX untuk melakukan pelatihan tersebut. Untuk mempelajari lebih lanjut tentang melatih model kustom untuk pengambilan prediktif, lihat postingan blog ini .

Kode contoh tersedia di GitHub .

Prasyarat

Untuk menyelesaikan tutorial ini, Anda perlu menginstal yang berikut ini di lingkungan pengembangan Anda:

Instal contohnya

Dapatkan kode sumber dan instal dependensi:

  1. Kloning atau unduh repositori tfjs-examples .

  2. Ubah ke direktori angular-predictive-prefetching/client dan instal dependensi:

    cd tfjs-examples/angular-predictive-prefetching/client && yarn

  3. Ubah ke direktori angular-predictive-prefetching/server dan instal dependensi:

    cd ../server && yarn

Jalankan contohnya

Mulai server dan klien:

  1. Mulai server: Di direktori server , jalankan yarn start .

  2. Mulai klien:

    1. Buka jendela terminal lain.
    2. Ubah menjadi tfjs-examples/angular-predictive-prefetching/client .

    3. Jalankan perintah berikut:

      yarn build
cd dist/merch-store
npx serve -s .

      Anda mungkin diminta untuk menginstal paket serve . Jika ya, masukkan y untuk menginstal paket.

  3. Navigasikan ke http://localhost:3000 di browser Anda. Anda akan melihat tiruan toko barang dagangan Google.

Jelajahi dengan DevTools

Gunakan Chrome DevTools untuk melihat tindakan pengambilan awal:

  1. Buka DevTools dan pilih Konsol .

  2. Navigasikan ke beberapa halaman berbeda dalam aplikasi, untuk melakukan prime aplikasi. Kemudian pilih Penjualan di navigasi kiri. Anda akan melihat keluaran log seperti ini:

    Navigating from: 'sale'
'quickview' -> 0.381757915019989
'apparel-unisex' -> 0.3150934875011444
'store.html' -> 0.1957530975341797
'' -> 0.052346792072057724
'signin.html' -> 0.0007763378671370447

    Output ini menunjukkan prediksi halaman yang akan Anda (pengguna) kunjungi selanjutnya. Aplikasi mengambil sumber daya berdasarkan prediksi ini.

  3. Untuk melihat permintaan pengambilan, pilih Jaringan . Outputnya sedikit berisik, tetapi Anda seharusnya dapat menemukan permintaan sumber daya untuk halaman yang diprediksi. Misalnya, setelah memprediksi quickview , aplikasi membuat permintaan ke http://localhost:8000/api/merch/quickview .

Cara kerja pengambilan prediktif

Aplikasi contoh menggunakan model terlatih untuk memprediksi halaman yang akan dikunjungi pengguna berikutnya. Saat pengguna membuka halaman baru, aplikasi menanyakan model dan kemudian mengambil gambar yang terkait dengan halaman yang diprediksi.

Aplikasi melakukan pengambilan awal prediktif pada pekerja layanan , sehingga dapat melakukan kueri model tanpa memblokir thread utama. Berdasarkan riwayat navigasi pengguna, pekerja layanan membuat prediksi untuk navigasi di masa mendatang dan mengambil gambar produk yang relevan terlebih dahulu.

Pekerja layanan dimuat di file utama aplikasi Angular, main.ts :

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/prefetch.service-worker.js', { scope: '/' });
}

Cuplikan di atas mengunduh skrip prefetch.service-worker.js dan menjalankannya di latar belakang.

Di merch-display.component.ts , aplikasi meneruskan peristiwa navigasi ke pekerja layanan:

this.route.params.subscribe((routeParams) => {
  this.getMerch(routeParams.category);
  if (this._serviceWorker) {
    this._serviceWorker.postMessage({ page: routeParams.category });
  }
});

Dalam cuplikan di atas, aplikasi mengamati perubahan pada parameter URL. Saat diubah, skrip meneruskan kategori halaman ke pekerja layanan.

Skrip pekerja layanan, prefetch.service-worker.js , menangani pesan dari thread utama, membuat prediksi berdasarkan pesan tersebut, dan mengambil sumber daya yang relevan terlebih dahulu.

Pekerja layanan menggunakan loadGraphModel untuk memuat model terlatih :

const MODEL_URL = "/assets/model.json";

let model = null;
tf.loadGraphModel(MODEL_URL).then((m) => (model = m));

Prediksi terjadi dalam ekspresi fungsi berikut:

const predict = async (path, userId) => {
  if (!model) {
    return;
  }
  const page = pages.indexOf(path);
  const pageId = tf.tensor1d([parseInt(page)], "int32");

  const sessionIndex = tf.tensor1d([parseInt(userId)], "int32");

  const result = model.predict({
    cur_page: pageId,
    session_index: sessionIndex,
  });
  const values = result.dataSync();
  const orders = sortWithIndices(values).slice(0, 5);
  return orders;
};

Fungsi predict kemudian dipanggil oleh fungsi prefetch :

const prefetch = async (path, sessionId) => {
  const predictions = await predict(path, sessionId);
  const formattedPredictions = predictions
    .map(([a, b]) => `'${b}' -> ${a}`)
    .join("\n");
  console.log(`Navigating from: '${path}'`);
  console.log(formattedPredictions);
  const connectionSpeed = navigator.connection.effectiveType;
  const threshold = connectionSpeeds[connectionSpeed];
  const cache = await caches.open(ImageCache);
  predictions.forEach(async ([probability, category]) => {
    if (probability >= threshold) {
      const merchs = (await getMerchList(category)).map(getUrl);
      [...new Set(merchs)].forEach((url) => {
        const request = new Request(url, {
          mode: "no-cors",
        });
        fetch(request).then((response) => cache.put(request, response));
      });
    }
  });
};

Pertama, prefetch memprediksi halaman yang mungkin dikunjungi pengguna berikutnya. Kemudian ia mengulangi prediksinya. Untuk setiap prediksi, jika probabilitas melebihi ambang batas tertentu berdasarkan kecepatan koneksi, fungsi akan mengambil sumber daya untuk halaman prediksi. Dengan mengambil sumber daya ini sebelum permintaan halaman berikutnya, aplikasi berpotensi menyajikan konten lebih cepat dan memberikan pengalaman pengguna yang lebih baik.

Apa selanjutnya

Dalam tutorial ini, aplikasi contoh menggunakan model terlatih untuk membuat prediksi. Anda dapat menggunakan TFX untuk melatih model untuk pengambilan awal prediktif. Untuk mempelajari lebih lanjut, lihat Mempercepat situs Anda dengan pengambilan halaman web terlebih dahulu menggunakan Machine Learning .