TensorFlow.js ile tahmine dayalı ön getirme

Bu öğreticide, kaynakların tahmine dayalı olarak önceden getirilmesini sağlamak için TensorFlow.js'yi kullanan örnek bir web uygulamasını çalıştıracaksınız. Angular ile oluşturulan örnek, Google Merchandise Store'dan ilham almıştır ancak onunla herhangi bir veri veya uygulama ayrıntısını paylaşmaz.

Örnek, tahminlerde bulunmak için önceden eğitilmiş bir model kullanıyor. Gerçek dünya senaryosunda, web sitenizdeki analizleri kullanarak bir model eğitmeniz gerekir. Bu tür eğitimleri yapmak için TFX'i kullanabilirsiniz. Tahmine dayalı önceden getirme için özel bir model eğitme hakkında daha fazla bilgi edinmek için bu blog gönderisine bakın.

Örnek kod GitHub'da mevcuttur.

Önkoşullar

Bu öğreticiyi tamamlamak için geliştirme ortamınızda aşağıdakilerin yüklü olması gerekir:

Örneği yükleyin

Kaynak kodunu alın ve bağımlılıkları yükleyin:

  1. tfjs-examples deposunu klonlayın veya indirin.

  2. angular-predictive-prefetching/client dizinine geçin ve bağımlılıkları yükleyin:

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

  3. angular-predictive-prefetching/server dizinine geçin ve bağımlılıkları yükleyin:

    cd ../server && yarn

Örneği çalıştırın

Hem sunucuyu hem de istemciyi başlatın:

  1. Sunucuyu başlatın: server dizininde, yarn start çalıştırın.

  2. İstemciyi başlatın:

    1. Başka bir terminal penceresi açın.
    2. tfjs-examples/angular-predictive-prefetching/client olarak değiştirin.

    3. Aşağıdaki komutları çalıştırın:

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

      Hizmet paketini yüklemeniz istenebilir. Öyleyse paketi yüklemek için y girin.

  3. Tarayıcınızda http://localhost:3000 adresine gidin. Sahte bir Google ürün mağazası görmelisiniz.

DevTools ile keşfedin

Önceden getirmeyi çalışırken görmek için Chrome DevTools'u kullanın:

  1. DevTools'u açın ve Konsol'u seçin.

  2. Uygulamayı hazırlamak için uygulamadaki birkaç farklı sayfaya gidin. Ardından sol gezinme bölmesinde Satış'ı seçin. Günlük çıktısını şu şekilde görmelisiniz:

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

    Bu çıktı sizin (kullanıcının) daha sonra ziyaret edeceği sayfaya ilişkin tahminleri gösterir. Uygulama, kaynakları bu tahminlere göre getirir.

  3. Getirme isteklerini görmek için Ağ'ı seçin. Çıktı biraz gürültülü ancak tahmin edilen sayfalar için kaynak isteklerini bulabilmelisiniz. Örneğin, quickview tahmininden sonra uygulama http://localhost:8000/api/merch/quickview adresine bir istekte bulunur.

Tahmine dayalı ön getirme nasıl çalışır?

Örnek uygulama, kullanıcının bir sonraki ziyaret edeceği sayfayı tahmin etmek için önceden eğitilmiş bir model kullanıyor. Kullanıcı yeni bir sayfaya gittiğinde uygulama, modeli sorgular ve ardından tahmin edilen sayfalarla ilişkili görselleri önceden getirir.

Uygulama, ana iş parçacığını engellemeden modeli sorgulayabilmesi için bir hizmet çalışanında tahmine dayalı ön getirme işlemini gerçekleştirir. Hizmet çalışanı, kullanıcının gezinme geçmişine dayanarak gelecekteki gezinme için tahminlerde bulunur ve ilgili ürün resimlerini önceden getirir.

Service Worker, Angular uygulamasının ana dosyası olan main.ts'e yüklenir:

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

Yukarıdaki kod parçası prefetch.service-worker.js betiğini indirir ve arka planda çalıştırır.

merch-display.component.ts dosyasında uygulama, navigasyon olaylarını hizmet çalışanına iletir:

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

Yukarıdaki kod parçasında uygulama, URL'nin parametrelerinde yapılan değişiklikleri izliyor. Değişiklik üzerine komut dosyası, sayfanın kategorisini hizmet çalışanına iletir.

Service Worker komut dosyası prefetch.service-worker.js , ana iş parçacığından gelen iletileri işler, bunlara dayalı tahminler yapar ve ilgili kaynakları önceden getirir.

Service Worker , önceden eğitilmiş modeli yüklemek için loadGraphModel kullanır:

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

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

Tahmin aşağıdaki fonksiyon ifadesinde gerçekleşir:

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;
};

predict işlevi daha sonra ön getirme işlevi tarafından çağrılır:

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));
      });
    }
  });
};

İlk olarak, prefetch kullanıcının bir sonraki ziyaret edebileceği sayfaları tahmin eder. Daha sonra tahminler üzerinde yinelenir. Her tahmin için, bağlantı hızına bağlı olarak olasılık belirli bir eşiği aşarsa işlev, tahmin edilen sayfanın kaynaklarını getirir. Uygulama, bu kaynakları bir sonraki sayfa isteğinden önce getirerek içeriği daha hızlı sunabilir ve daha iyi bir kullanıcı deneyimi sağlayabilir.

Sırada ne var

Bu öğreticide örnek uygulama, tahminlerde bulunmak için önceden eğitilmiş bir model kullanır. Tahmine dayalı önceden getirme için bir modeli eğitmek amacıyla TFX'i kullanabilirsiniz. Daha fazla bilgi edinmek için Makine Öğrenimi'ni kullanarak web sayfasını önceden getirmeyle sitelerinizi hızlandırma konusuna bakın.