Precaricamento predittivo con TensorFlow.js

In questo tutorial eseguirai un'applicazione web di esempio che utilizza TensorFlow.js per eseguire il precaricamento predittivo delle risorse. Realizzato con Angular , l'esempio si ispira a Google Merchandise Store ma non condivide con esso alcun dato o dettaglio di implementazione.

L'esempio utilizza un modello pre-addestrato per effettuare previsioni. In uno scenario reale, dovresti addestrare un modello utilizzando l'analisi del tuo sito web. Puoi utilizzare TFX per eseguire tale formazione. Per ulteriori informazioni sull'addestramento di un modello personalizzato per il precaricamento predittivo, consulta questo post del blog .

Il codice di esempio è disponibile su GitHub .

Prerequisiti

Per completare questo tutorial, è necessario che quanto segue sia installato nel tuo ambiente di sviluppo:

Installa l'esempio

Ottieni il codice sorgente e installa le dipendenze:

  1. Clona o scarica il repository tfjs-examples .

  2. Passare alla directory angular-predictive-prefetching/client e installare le dipendenze:

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

  3. Passare alla directory angular-predictive-prefetching/server e installare le dipendenze:

    cd ../server && yarn

Esegui l'esempio

Avvia sia il server che il client:

  1. Avvia il server: nella directory del server , esegui yarn start .

  2. Avviare il cliente:

    1. Apri un'altra finestra del terminale.
    2. Passare a tfjs-examples/angular-predictive-prefetching/client .

    3. Esegui i seguenti comandi:

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

      Potrebbe essere richiesto di installare il pacchetto serve . In tal caso, immettere y per installare il pacchetto.

  3. Passare a http://localhost:3000 nel browser. Dovresti vedere un finto negozio di articoli di Google.

Esplora con DevTools

Utilizza Chrome DevTools per vedere il precaricamento in azione:

  1. Apri DevTools e seleziona Console .

  2. Passare ad alcune pagine diverse nell'applicazione per avviare l'app. Quindi seleziona Vendita nella navigazione a sinistra. Dovresti vedere l'output del log come questo:

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

    Questo output mostra le previsioni per la pagina che tu (l'utente) visiterai successivamente. L'applicazione recupera le risorse in base a queste previsioni.

  3. Per visualizzare le richieste di recupero, seleziona Rete . L'output è un po' rumoroso, ma dovresti riuscire a trovare richieste di risorse per le pagine previste. Ad esempio, dopo aver previsto quickview , l'applicazione effettua una richiesta a http://localhost:8000/api/merch/quickview .

Come funziona il precaricamento predittivo

L'app di esempio usa un modello preaddestrato per prevedere la pagina che un utente visiterà successivamente. Quando l'utente accede a una nuova pagina, l'app interroga il modello e quindi precarica le immagini associate alle pagine previste.

L'app esegue il precaricamento predittivo su un service lavoratore , in modo che possa interrogare il modello senza bloccare il thread principale. In base alla cronologia di navigazione dell'utente, l'addetto al servizio effettua previsioni per la navigazione futura e precarica le immagini dei prodotti pertinenti.

Il service lavoratore viene caricato nel file principale dell'app Angular, main.ts :

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

Lo snippet sopra scarica lo script prefetch.service-worker.js e lo esegue in background.

In merch-display.component.ts , l'app inoltra gli eventi di navigazione all'operatore del servizio:

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

Nello snippet sopra, l'app controlla le modifiche ai parametri dell'URL. In caso di modifica, lo script inoltra la categoria della pagina all'operatore del servizio.

Lo script del service work, prefetch.service-worker.js , gestisce i messaggi dal thread principale, effettua previsioni basate su di essi e precarica le risorse rilevanti.

L'operatore del servizio utilizza loadGraphModel per caricare il modello pre-addestrato :

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

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

La previsione avviene nella seguente espressione di funzione :

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

La funzione predict viene quindi richiamata dalla funzione di 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));
      });
    }
  });
};

Innanzitutto, prefetch prevede le pagine che l'utente potrebbe visitare successivamente. Quindi ripete le previsioni. Per ogni previsione, se la probabilità supera una determinata soglia basata sulla velocità di connessione, la funzione recupera le risorse per la pagina prevista. Recuperando queste risorse prima della richiesta della pagina successiva, l'app può potenzialmente servire i contenuti più velocemente e fornire un'esperienza utente migliore.

Qual è il prossimo passo?

In questo tutorial, l'app di esempio utilizza un modello preaddestrato per effettuare previsioni. Puoi utilizzare TFX per addestrare un modello per il precaricamento predittivo. Per ulteriori informazioni, consulta Velocizzare i tuoi siti con il precaricamento delle pagine Web utilizzando il machine learning .