Прогнозирующая предварительная выборка с помощью TensorFlow.js

В этом руководстве вы запустите пример веб-приложения, которое использует TensorFlow.js для прогнозирующей предварительной выборки ресурсов. Этот пример, созданный с помощью Angular , вдохновлен Google Merchandise Store, но не передает ему никаких данных или деталей реализации.

В примере используется предварительно обученная модель для прогнозирования. В реальном сценарии вам потребуется обучить модель, используя аналитику с вашего веб-сайта. Вы можете использовать TFX для такого обучения. Дополнительные сведения об обучении пользовательской модели для прогнозирующей предварительной выборки см. в этой записи блога .

Код примера доступен на GitHub .

Предварительные условия

Для работы с этим руководством в вашей среде разработки необходимо установить следующее:

Установите пример

Получите исходный код и установите зависимости:

  1. Клонируйте или загрузите репозиторий tfjs-examples .

  2. Перейдите в каталог angular-predictive-prefetching/client и установите зависимости:

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

  3. Перейдите в каталог angular-predictive-prefetching/server и установите зависимости:

    cd ../server && yarn

Запустите пример

Запустите сервер и клиент:

  1. Запустите сервер: в каталоге server запустите команду yarn start .

  2. Запустите клиент:

    1. Откройте другое окно терминала.
    2. Перейдите в tfjs-examples/angular-predictive-prefetching/client .

    3. Выполните следующие команды:

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

      Вам может быть предложено установить пакет Serve . Если да, введите y, чтобы установить пакет.

  3. Перейдите по адресу http://localhost:3000 в своем браузере. Вы должны увидеть макет магазина товаров Google.

Исследуйте с помощью DevTools

Используйте Chrome DevTools, чтобы увидеть предварительную выборку в действии:

  1. Откройте DevTools и выберите Консоль .

  2. Перейдите на несколько разных страниц приложения, чтобы запустить приложение. Затем выберите «Продажа» на левой панели навигации. Вы должны увидеть вывод журнала следующим образом:

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

    Эти выходные данные показывают прогнозы для страницы, которую вы (пользователь) посетите в следующий раз. Приложение извлекает ресурсы на основе этих прогнозов.

  3. Чтобы просмотреть запросы на выборку, выберите «Сеть» . Вывод немного зашумлен, но вы сможете найти запросы на ресурсы для прогнозируемых страниц. Например, после прогнозирования quickview приложение отправляет запрос на http://localhost:8000/api/merch/quickview .

Как работает прогнозирующая предварительная выборка

В примере приложения используется предварительно обученная модель для прогнозирования страницы, которую пользователь посетит следующей. Когда пользователь переходит на новую страницу, приложение запрашивает модель, а затем предварительно выбирает изображения, связанные с прогнозируемыми страницами.

Приложение выполняет прогнозирующую предварительную выборку для сервисного работника , чтобы оно могло запросить модель, не блокируя основной поток. На основе истории навигации пользователя сервисный работник делает прогнозы для будущей навигации и предварительно выбирает соответствующие изображения продуктов.

Сервис-воркер загружается в главный файл приложения Angular, main.ts :

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

Приведенный выше фрагмент загружает скрипт prefetch.service-worker.js и запускает его в фоновом режиме.

В merch-display.comComponent.ts приложение пересылает события навигации сервис-воркеру:

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

В приведенном выше фрагменте приложение отслеживает изменения параметров URL-адреса. При изменении сценарий пересылает категорию страницы сервисному работнику.

Сценарий сервисного работника prefetch.service-worker.js обрабатывает сообщения из основного потока, делает на их основе прогнозы и предварительно выбирает соответствующие ресурсы.

Сервис-воркер использует loadGraphModel для загрузки предварительно обученной модели :

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

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

Прогнозирование происходит в следующем функциональном выражении :

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 затем вызывается функцией предварительной выборки :

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

Во-первых, prefetch прогнозирует страницы, которые пользователь может посетить в следующий раз. Затем он перебирает прогнозы. Если для каждого прогноза вероятность превышает определенный порог, основанный на скорости соединения, функция извлекает ресурсы для прогнозируемой страницы. Получая эти ресурсы до запроса следующей страницы, приложение потенциально может быстрее обслуживать контент и обеспечивать лучший пользовательский опыт.

Что дальше

В этом руководстве пример приложения использует предварительно обученную модель для прогнозирования. Вы можете использовать TFX для обучения модели прогнозирующей предварительной выборке. Дополнительные сведения см. в разделе Ускорение работы сайтов с помощью предварительной загрузки веб-страниц с помощью машинного обучения .