Captación previa predictiva con TensorFlow.js

En este tutorial, ejecutará una aplicación web de ejemplo que usa 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 él.

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 usar 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. Clone o descargue 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

Ejecuta 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. Abre 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 a http://localhost:3000 en su navegador. Deberías ver una tienda de productos de Google simulada.

Explorar con DevTools

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

  1. Abra DevTools y seleccione Consola .

  2. Navegue a algunas páginas diferentes en la aplicación, para preparar la aplicación. Luego seleccione Venta en la barra de navegación de la izquierda. Debería ver una salida de registro como esta:

    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 obtiene recursos en función de 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 un usuario visitará a continuación. Cuando el usuario navega a una nueva página, la aplicación consulta el modelo y luego obtiene previamente las imágenes asociadas con las páginas previstas.

La aplicación realiza la captación previa predictiva en un trabajador de servicio , de modo 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 obtiene 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 los 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 observa los 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.

La secuencia de comandos del trabajador del servicio, prefetch.service-worker.js , maneja los mensajes del hilo principal, hace predicciones basadas en ellos y obtiene 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 es invocada por la función de captación previa :

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 supera un cierto umbral basado en la velocidad de conexión, la función obtiene recursos para la página predicha. Al obtener estos recursos antes de la solicitud de la página siguiente, la aplicación puede potencialmente entregar contenido más rápido y brindar una mejor experiencia de usuario.

Que sigue

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