Captación previa predictiva con TensorFlow.js

En este tutorial, ejecutará una aplicación web de ejemplo que utiliza TensorFlow.js para realizar una captación previa predictiva de recursos. Construido con Angular , el ejemplo está inspirado en Google Merchandise Store pero no comparte ningún dato ni detalles de implementación con ella.

El ejemplo utiliza un modelo previamente entrenado para hacer predicciones. En un escenario del mundo real, necesitaría entrenar un modelo utilizando análisis de su sitio web. Puede utilizar TFX para realizar dicho entrenamiento. Para obtener más información sobre cómo entrenar un modelo personalizado para la captación previa predictiva, consulte esta publicación de blog .

El código de ejemplo está disponible en GitHub .

Requisitos previos

Para completar este tutorial, necesita lo siguiente instalado en su entorno de desarrollo:

Instalar el ejemplo

Obtenga el código fuente e instale las dependencias:

  1. Clona o descarga el repositorio tfjs-examples .

  2. Cambie al directorio angular-predictive-prefetching/client e instale las dependencias:

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

  3. Cambie al directorio angular-predictive-prefetching/server e instale las dependencias:

    cd ../server && yarn

Ejecute el ejemplo

Inicie tanto el servidor como el cliente:

  1. Inicie el servidor: en el directorio server , ejecute yarn start .

  2. Inicie el cliente:

    1. Abra otra ventana de terminal.
    2. Cambie a tfjs-examples/angular-predictive-prefetching/client .

    3. Ejecute los siguientes comandos:

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

      Es posible que se le solicite que instale el paquete de servicio . Si es así, ingrese y para instalar el paquete.

  3. Navegue hasta http://localhost:3000 en su navegador. Deberías ver una tienda simulada de productos de Google.

Explora con DevTools

Utilice Chrome DevTools para ver la captación previa en acción:

  1. Abra DevTools y seleccione Consola .

  2. Navegue a algunas páginas diferentes de la aplicación para preparar la aplicación. Luego seleccione Venta en la navegación izquierda. Deberías ver un resultado de registro como este:

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

    Este resultado muestra predicciones para la página que usted (el usuario) visitará a continuación. La aplicación recupera recursos basándose en estas predicciones.

  3. Para ver las solicitudes de recuperación, seleccione Red . La salida es un poco ruidosa, pero debería poder encontrar solicitudes de recursos para las páginas previstas. Por ejemplo, después de predecir quickview , la aplicación realiza una solicitud a http://localhost:8000/api/merch/quickview .

Cómo funciona la captación previa predictiva

La aplicación de ejemplo utiliza un modelo previamente entrenado para predecir la página que visitará un usuario a continuación. Cuando el usuario navega a una nueva página, la aplicación consulta el modelo y luego busca previamente imágenes asociadas con las páginas previstas.

La aplicación realiza la captación previa predictiva en un trabajador del servicio , para que pueda consultar el modelo sin bloquear el hilo principal. Según el historial de navegación del usuario, el trabajador del servicio hace predicciones para la navegación futura y busca previamente imágenes de productos relevantes.

El trabajador del servicio se carga en el archivo principal de la aplicación Angular, main.ts :

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

El fragmento anterior descarga el script prefetch.service-worker.js y lo ejecuta en segundo plano.

En merch-display.component.ts , la aplicación reenvía eventos de navegación al trabajador del servicio:

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

En el fragmento anterior, la aplicación busca cambios en los parámetros de la URL. Al cambiar, el script reenvía la categoría de la página al trabajador del servicio.

El script del trabajador del servicio, prefetch.service-worker.js , maneja mensajes del hilo principal, hace predicciones basadas en ellos y busca previamente los recursos relevantes.

El trabajador del servicio usa loadGraphModel para cargar el modelo previamente entrenado :

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

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

La predicción ocurre en la siguiente expresión de función :

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

Luego, la función predict previa invoca la función de predicción :

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

En primer lugar, prefetch predice las páginas que el usuario podría visitar a continuación. Luego itera sobre las predicciones. Para cada predicción, si la probabilidad excede un cierto umbral basado en la velocidad de conexión, la función recupera recursos para la página predicha. Al obtener estos recursos antes de la solicitud de la siguiente página, la aplicación puede potencialmente ofrecer contenido más rápido y brindar una mejor experiencia de usuario.

Que sigue

En este tutorial, la aplicación de ejemplo utiliza un modelo previamente entrenado para hacer predicciones. Puede utilizar TFX para entrenar un modelo para la captación previa predictiva. Para obtener más información, consulte Acelere sus sitios con la captación previa de páginas web mediante aprendizaje automático .