Neste tutorial, você executará um exemplo de aplicativo da 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 dados ou detalhes de implementação com ela.
O exemplo usa um modelo pré-treinado para fazer previsões. Em um cenário do mundo 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 no 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:
- Clone ou baixe o repositório
tfjs-examples. Mude para o diretório
angular-predictive-prefetching/cliente instale as dependências:cd tfjs-examples/angular-predictive-prefetching/client && yarnMude para o diretório
angular-predictive-prefetching/servere instale as dependências:cd ../server && yarn
Execute o exemplo
Inicie o servidor e o cliente:
Inicie o servidor: No diretório
server, executeyarn start.Inicie o cliente:
- Abra outra janela de terminal.
- Mude para
tfjs-examples/angular-predictive-prefetching/client. Execute os seguintes comandos:
yarn build cd dist/merch-store npx serve -s .Você pode ser solicitado a instalar o pacote serve . Nesse caso, digite y para instalar o pacote.
Navegue até
http://localhost:3000em seu navegador. Você deve 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:
- Abra o DevTools e selecione Console .
Navegue até algumas páginas diferentes no aplicativo para prepará-lo. Em seguida, selecione Venda na navegação à esquerda. Você deve ver a saída de log como esta:
Navigating from: 'sale' 'quickview' -> 0.381757915019989 'apparel-unisex' -> 0.3150934875011444 'store.html' -> 0.1957530975341797 '' -> 0.052346792072057724 'signin.html' -> 0.0007763378671370447Esta 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.
Para ver as solicitações de busca, selecione Rede . A saída é um pouco ruidosa, mas você deve conseguir encontrar solicitações de recursos para as páginas previstas. Por exemplo, depois de prever
quickview, o aplicativo faz uma solicitação parahttp://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 pré-busca 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 pré-busca 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 da URL. Na mudança, o script encaminha a categoria da página para o service worker.
O script do service worker, prefetch.service-worker.js , manipula as mensagens do encadeamento 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 pode visitar em seguida. Em seguida, 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 buscará recursos para a página prevista. Ao buscar esses recursos antes da solicitação da próxima página, o aplicativo pode servir o conteúdo mais rapidamente e fornecer uma melhor experiência do usuário.
Qual é o próximo
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ágina da Web usando Machine Learning .