Implantar TensorFlow.js em uma extensão do Chrome

Neste tutorial, você criará e instalará uma extensão do Chrome que permite clicar com o botão direito do mouse em uma imagem em uma página da Web e executar a detecção de objetos multiclasse na imagem. A extensão aplica um classificador MobileNetV2 à imagem e, em seguida, rotula a imagem com a classe prevista.

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:

Crie a extensão

Obtenha o código-fonte e crie a extensão:

  1. Clone ou baixe o repositório tfjs-examples .
  2. Mude para o diretório chrome-extension : cd tfjs-examples/chrome-extension .
  3. Instalar dependências: yarn .
  4. Execute o script de construção: yarn build .

Depois de executar o script de compilação, você verá os seguintes novos arquivos:

  • dist/src/content.js
  • dist/src/service_worker.js
  • dist/src/service_worker.js.map

Instale a extensão

Instale a extensão no Chrome:

  1. No navegador Chrome, navegue até chrome://extensions .
  2. Ative o modo Desenvolvedor usando o botão no lado direito do navegador.
  3. Selecione Carregar descompactado e selecione o tfjs-examples/chrome-extension/dist . Esse diretório contém o arquivo manifest.json e os arquivos src/*.js compactados pelo build.

Você deve ver um novo cartão para TF.js mobilenet em uma extensão do Chrome .

Use a extensão

Com a extensão instalada, você pode classificar as imagens no navegador:

  1. Navegue até um site com imagens nele. Por exemplo, navegue até google.com , pesquise "tigres" e selecione Imagens na página de resultados. Você deve ver uma página de imagens de tigres.
  2. Clique com o botão direito do mouse em uma imagem e selecione Classificar imagem com TensorFlow.js . Há um período de aquecimento, portanto, na primeira vez que você executar o aplicativo, a inferência será mais lenta. (Em seus próprios aplicativos, você pode preparar o modelo alimentando-o com dados fictícios.)

A extensão executa o modelo na imagem e sobrepõe o texto indicando a previsão.

Remova a extensão

Quando terminar de experimentar a extensão, você poderá removê-la:

  1. No Chrome, navegue até chrome://extensions .
  2. No mobilenet TF.js em um cartão de extensão do Chrome , selecione Remover e confirme que deseja remover a extensão.

Como funciona a extensão

Esta seção descreve como a extensão funciona, em alto nível.

O arquivo de manifesto , manifest.json , especifica um service worker que o Chrome executará em segundo plano:

"background": {
   "service_worker": "src/service_worker.js"
},

O script do service worker, service_worker.js , importa o pacote TensorFlow.js e o modelo mobilenet .

import * as mobilenet from '@tensorflow-models/mobilenet';
import * as tf from '@tensorflow/tfjs';

O script de compilação em package.json usa um bundler, Parcel , para agrupar tudo, de modo que nenhum script externo seja carregado no tempo de execução.

"build": "parcel build src/service_worker.js --dist-dir dist/src/ && npm run copy",

Isso é feito para cumprir o Chrome Manifest V3, que proíbe o código hospedado remotamente . Observe que um service worker ainda pode carregar recursos externos, como modelos TensorFlow.js.

O script do service worker cria um item de menu de contexto que opera em imagens. Em seguida, o script escuta os cliques.

/**
 * Adds a right-click menu option to trigger classifying the image.
 * The menu option should only appear when right-clicking an image.
 */
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'contextMenu0',
    title: 'Classify image with TensorFlow.js ',
    contexts: ['image'],
  });
});

chrome.contextMenus.onClicked.addListener(clickMenuCallback);

Quando o usuário seleciona o item de menu, um retorno de chamada envia uma mensagem contendo o ID da guia atual e o URL da imagem clicada com o botão direito. (Observe que em um service worker, os objetos DOM não estão disponíveis.)

function clickMenuCallback(info, tab) {
  const message = { action: 'IMAGE_CLICKED', url: info.srcUrl };
  chrome.tabs.sendMessage(tab.id, message, (resp) => {
    if (!resp.rawImageData) {
      console.error(
        'Failed to get image data. ' +
        'The image might be too small or failed to load. ' +
        'See console logs for errors.');
      return;
    }
    const imageData = new ImageData(
      Uint8ClampedArray.from(resp.rawImageData), resp.width, resp.height);
    imageClassifier.analyzeImage(imageData, info.srcUrl, tab.id);
  });
}

O script de conteúdo, content.js , escuta as mensagens e manipula a ação IMAGE_CLICKED . O script recebe a URL da imagem, carrega a imagem, renderiza a imagem em um OffscreenCanvas , obtém os dados da imagem da tela e envia os dados de volta ao service worker.

Depois que o service worker recebe os dados da imagem, ele executa o modelo mobilenet com os dados e obtém os resultados da previsão. Na função clickMenuCallback acima, imageClassifier é uma instância da classe ImageClassifier , que carrega o modelo e obtém previsões. O script do service worker envia os resultados de volta ao script de conteúdo para exibição. Depois que o script de conteúdo recebe os resultados, ele sobrepõe os resultados sobre a imagem original.

O encadeamento do service worker fica ocioso quando nenhuma atividade ocorre por aproximadamente 30 segundos. Para obter mais informações sobre como gerenciar eventos de service worker, consulte a documentação do Chrome .

Qual é o próximo

Este tutorial mostrou como implantar uma extensão do Chrome que usa TensorFlow.js e um modelo MobileNet pré-treinado para classificar imagens. Para saber mais sobre modelos pré-treinados para TensorFlow.js, consulte o repositório de modelos pré-treinados .