Predykcyjne pobieranie wstępne za pomocą TensorFlow.js

W tym samouczku uruchomisz przykładową aplikację internetową, która używa TensorFlow.js do predykcyjnego pobierania zasobów. Przykład, zbudowany w Angular , jest inspirowany sklepem Google Merchandise Store, ale nie udostępnia żadnych danych ani szczegółów implementacji.

W przykładzie zastosowano wstępnie wyszkolony model do przewidywania. W scenariuszu ze świata rzeczywistego konieczne byłoby wytrenowanie modelu przy użyciu analiz z Twojej witryny internetowej. Możesz użyć TFX do przeprowadzenia takiego szkolenia. Aby dowiedzieć się więcej na temat uczenia niestandardowego modelu na potrzeby pobierania predykcyjnego, zobacz ten wpis na blogu .

Przykładowy kod jest dostępny na GitHubie .

Warunki wstępne

Aby ukończyć ten samouczek, w środowisku programistycznym musisz zainstalować:

Zainstaluj przykład

Pobierz kod źródłowy i zainstaluj zależności:

  1. Sklonuj lub pobierz repozytorium tfjs-examples .

  2. Przejdź do katalogu angular-predictive-prefetching/client i zainstaluj zależności:

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

  3. Przejdź do katalogu angular-predictive-prefetching/server i zainstaluj zależności:

    cd ../server && yarn

Uruchom przykład

Uruchom serwer i klienta:

  1. Uruchom serwer: W katalogu server uruchom yarn start .

  2. Uruchom klienta:

    1. Otwórz kolejne okno terminala.
    2. Zmień na tfjs-examples/angular-predictive-prefetching/client .

    3. Uruchom następujące polecenia:

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

      Może zostać wyświetlony monit o zainstalowanie pakietu obsługi . Jeśli tak, wpisz y , aby zainstalować pakiet.

  3. Przejdź do http://localhost:3000 w swojej przeglądarce. Powinieneś zobaczyć fałszywy sklep z gadżetami Google.

Eksploruj z DevTools

Użyj narzędzi Chrome DevTools, aby zobaczyć pobieranie wstępne w akcji:

  1. Otwórz DevTools i wybierz opcję Konsola .

  2. Przejdź do kilku różnych stron aplikacji, aby ją uruchomić. Następnie wybierz opcję Sprzedaż w lewym panelu nawigacyjnym. Powinieneś zobaczyć dane wyjściowe dziennika w następujący sposób:

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

    Te dane wyjściowe pokazują prognozy dotyczące strony, którą Ty (użytkownik) odwiedzisz jako następną. Aplikacja pobiera zasoby na podstawie tych przewidywań.

  3. Aby zobaczyć żądania pobrania, wybierz Sieć . Dane wyjściowe są nieco zaszumione, ale powinno być możliwe znalezienie żądań zasobów dla przewidywanych stron. Na przykład, po przewidzeniu quickview , aplikacja wysyła żądanie do http://localhost:8000/api/merch/quickview .

Jak działa predykcyjne pobieranie wstępne

Przykładowa aplikacja używa wstępnie wytrenowanego modelu do przewidywania strony, którą użytkownik odwiedzi w następnej kolejności. Gdy użytkownik przejdzie na nową stronę, aplikacja wysyła zapytanie do modelu, a następnie wstępnie pobiera obrazy powiązane z przewidywanymi stronami.

Aplikacja wykonuje predykcyjne pobieranie wstępne w procesie roboczym usługi , dzięki czemu może wysyłać zapytania do modelu bez blokowania głównego wątku. Na podstawie historii nawigacji użytkownika pracownik serwisu prognozuje przyszłą nawigację i wstępnie pobiera odpowiednie zdjęcia produktów.

Service worker ładowany jest do głównego pliku aplikacji Angular, main.ts :

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

Powyższy fragment pobiera skrypt prefetch.service-worker.js i uruchamia go w tle.

W merch-display.component.ts aplikacja przekazuje zdarzenia nawigacyjne pracownikowi serwisu:

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

W powyższym fragmencie aplikacja obserwuje zmiany parametrów adresu URL. W przypadku zmiany skrypt przekazuje kategorię strony pracownikowi serwisu.

Skrypt Service Workera prefetch.service-worker.js obsługuje komunikaty z głównego wątku, dokonuje na ich podstawie przewidywań i wstępnie pobiera odpowiednie zasoby.

Pracownik serwisu używa loadGraphModel do załadowania wstępnie wytrenowanego modelu :

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

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

Przewidywanie odbywa się w następującym wyrażeniu funkcyjnym :

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

Funkcja predict jest następnie wywoływana przez funkcję pobierania wstępnego :

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

Po pierwsze, prefetch przewiduje strony, które użytkownik może odwiedzić w następnej kolejności. Następnie iteruje po przewidywaniach. W przypadku każdej prognozy, jeśli prawdopodobieństwo przekracza określony próg na podstawie szybkości połączenia, funkcja pobiera zasoby dla przewidywanej strony. Pobierając te zasoby przed żądaniem następnej strony, aplikacja może potencjalnie szybciej wyświetlać treści i zapewniać użytkownikom lepszą wygodę.

Co dalej

W tym samouczku przykładowa aplikacja używa wstępnie wytrenowanego modelu do tworzenia prognoz. Możesz użyć TFX do uczenia modelu predykcyjnego pobierania wstępnego. Aby dowiedzieć się więcej, zobacz Przyspieszanie witryn dzięki wstępnemu pobieraniu stron internetowych za pomocą uczenia maszynowego .