Pré-busca preditiva com TensorFlow.js

Neste tutorial, você executará um exemplo de aplicativo Web que usa o TensorFlow.js para fazer a pré-busca preditiva de recursos. Construído com Angular , o exemplo é inspirado na Google Merchandise Store, mas não compartilha nenhum dado ou detalhe de implementação com ela.

O exemplo usa um modelo pré-treinado para fazer previsões. Em um cenário real, você precisaria treinar um modelo usando análises do seu site. Você pode usar o TFX para fazer esse treinamento. Para saber mais sobre como treinar um modelo personalizado para pré-busca preditiva, consulte esta postagem do blog .

O código de exemplo está disponível no GitHub .

Pré-requisitos

Para concluir este tutorial, você precisa do seguinte instalado em seu ambiente de desenvolvimento:

Instale o exemplo

Obtenha o código fonte e instale as dependências:

  1. Clone ou baixe o repositório tfjs-examples .

  2. Mude para o diretório angular-predictive-prefetching/client e instale as dependências:

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

  3. Mude para o diretório angular-predictive-prefetching/server e instale as dependências:

    cd ../server && yarn

Execute o exemplo

Inicie o servidor e o cliente:

  1. Inicie o servidor: No diretório server , execute yarn start .

  2. Inicie o cliente:

    1. Abra outra janela do terminal.
    2. Mude para tfjs-examples/angular-predictive-prefetching/client .

    3. Execute os seguintes comandos:

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

      Você pode ser solicitado a instalar o pacote de serviço . Nesse caso, digite y para instalar o pacote.

  3. Navegue para http://localhost:3000 no seu navegador. Você deverá ver uma simulação de loja de mercadorias do Google.

Explorar com DevTools

Use o Chrome DevTools para ver a pré-busca em ação:

  1. Abra DevTools e selecione Console .

  2. Navegue até algumas páginas diferentes do aplicativo para prepará-lo. Em seguida, selecione Venda na navegação esquerda. Você deverá ver a saída do log assim:

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

    Esta saída mostra previsões para a página que você (o usuário) visitará em seguida. O aplicativo busca recursos com base nessas previsões.

  3. Para ver as solicitações de busca, selecione Network . A saída é um pouco barulhenta, mas você poderá encontrar solicitações de recursos para as páginas previstas. Por exemplo, após prever quickview , o aplicativo faz uma solicitação para http://localhost:8000/api/merch/quickview .

Como funciona a pré-busca preditiva

O aplicativo de exemplo usa um modelo pré-treinado para prever a próxima página que um usuário visitará. Quando o usuário navega para uma nova página, o aplicativo consulta o modelo e, em seguida, busca previamente as imagens associadas às páginas previstas.

O aplicativo faz a pré-busca preditiva em um service worker , para que possa consultar o modelo sem bloquear o thread principal. Com base no histórico de navegação do usuário, o service worker faz previsões para navegação futura e busca previamente imagens de produtos relevantes.

O service worker é carregado no arquivo principal do aplicativo Angular, main.ts :

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

O snippet acima baixa o script prefetch.service-worker.js e o executa em segundo plano.

Em merch-display.component.ts , o aplicativo encaminha eventos de navegação para o service worker:

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

No snippet acima, o aplicativo observa alterações nos parâmetros do URL. Na alteração, o script encaminha a categoria da página para o service worker.

O script do service worker, prefetch.service-worker.js , manipula mensagens do thread principal, faz previsões com base nelas e pré-busca os recursos relevantes.

O service worker usa loadGraphModel para carregar o modelo pré-treinado :

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

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

A previsão acontece na seguinte expressão de função :

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

A função predict é então invocada pela função de pré-busca :

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

Primeiro, prefetch prevê as páginas que o usuário poderá visitar em seguida. Em seguida, ele itera sobre as previsões. Para cada previsão, se a probabilidade exceder um determinado limite com base na velocidade da conexão, a função busca recursos para a página prevista. Ao buscar esses recursos antes da próxima solicitação de página, o aplicativo pode potencialmente veicular conteúdo com mais rapidez e fornecer uma melhor experiência ao usuário.

O que vem a seguir

Neste tutorial, o aplicativo de exemplo usa um modelo pré-treinado para fazer previsões. Você pode usar o TFX para treinar um modelo para pré-busca preditiva. Para saber mais, consulte Acelere seus sites com pré-busca de páginas da Web usando aprendizado de máquina .