Tutorial do Edge TensorFlow.js

O que você criará

Neste tutorial, você fará o download de um modelo de classificação de imagens do TensorFlow.js treinado e exportado usando o AutoML Vision Edge. Em seguida, você criará uma página da Web que carrega o modelo e faz uma previsão em uma imagem.

Objetivos

Escrever o código JavaScript para:

  • executar um modelo pré-treinado para classificação de imagens do AutoML Vision Edg em uma página da Web usando a biblioteca do TensorFlow.js.

Antes de começar

Treinar um modelo do AutoML Vision Edge

Antes de implantar um modelo em um dispositivo Edge, você precisa primeiro treinar e exportar um modelo TensorFlow.js do AutoML Vision Edge seguindo o Guia de início rápido do modelo de dispositivo Edge.

Na etapa final, exporte o modelo para TensorFlow.js:

captura de tela atualizada do modelo TensorFlow.js de exportação

Depois de concluir o guia de início rápido, você terá os seguintes arquivos exportados no Google Cloud Storage:

  • um arquivo dict.txt com rótulos
  • um arquivo model.json
  • arquivos de peso *.bin
Exemplo de pasta Tensorflow.js

Faça o download dos arquivos de modelo

Copie os arquivos exportados do Google Cloud Storage para um diretório local:

gsutil cp gs://${cloud-storage-bucket}/model-export/icn/${model-name}/* ${local-folder}

Criar um pequeno app da Web

Depois de armazenar os arquivos de modelo do TensorFlow.js no local, você estará pronto para criar seu app da Web:

  1. Vá até o diretório local em que os arquivos de modelo estão armazenados, caso ainda não tenha feito isso.

  2. Crie um arquivo index.html no mesmo diretório local com o seguinte conteúdo:

    index.html

    Amostras de código

    <script src="https://unpkg.com/@tensorflow/tfjs"></script>
    <script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>
    <img id="daisy" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/img_classification/daisy.jpg">
    <script>
    async function run() {
      const model = await tf.automl.loadImageClassification('model.json');
      const image = document.getElementById('daisy');
      const predictions = await model.classify(image);
      console.log(predictions);
      // Show the resulting object on the page.
      const pre = document.createElement('pre');
      pre.textContent = JSON.stringify(predictions, null, 2);
      document.body.append(pre);
    }
    run();
    </script>

Executar o app da Web

Inicie um servidor HTTP simples na porta 8000 pelo diretório com o arquivo index.html:

Python

python -m SimpleHTTPServer 8000

Node.js

Se você tiver o Node.js, instale o pacote http-server (em inglês) globalmente e execute:

http-server -p 8000

Ao abrir http://localhost:8000 no navegador, você verá o resultado da previsão no console (Visualizar > Desenvolvedor > Console do JavaScript), assim como na página.

Previsão do TensorFlow.js no navegador

Como funciona?

Agora que o app está em execução, é possível explorar o que o código está fazendo.

As duas primeiras tags de script carregam a biblioteca do TensorFlow.js e do AutoML, que estão disponíveis no gerenciador de pacotes NPM (em inglês).

<script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>

O pacote NPM do AutoML fornece um conjunto de APIs para carregar e executar modelos desenvolvidos pelo AutoML Vision Edge. Esse pacote cuida de qualquer pré ou pós-processamento necessário para executar o modelo, como a capacidade de alimentar um elemento de imagem ou vídeo, normalizando valores de pixel e retornando um objeto classificado com rótulos e pontuações.

A tag de imagem carrega uma imagem de teste de um caminho de publicação do Google Cloud Storage:

<img id="daisy" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/img_classification/daisy.jpg">

É preciso substituir a imagem src pelo caminho para sua própria imagem ao testar o modelo.

Em seguida, carregue o modelo e faça uma previsão com sua imagem:

const model = await tf.automl.loadImageClassification('model.json');
const image = document.getElementById('daisy');
const predictions = await model.classify(image);

Especifique um modelo com tf.automl.loadImageClassification(url). Essa função usa um URL absoluto ou relativo para o arquivo model.json exportado, que, neste caso, é um caminho relativo, porque o arquivo index.html e os arquivos de modelo estão no mesmo diretório.

Para receber as previsões, basta chamar model.classify(image). Essa função executa uma única imagem por meio do modelo e retorna a previsão. A entrada dessa função é um elemento de imagem HTML, um elemento de vídeo ou um tensor 3D (em inglês).

A seguir

Você concluiu um tutorial do aplicativo da Web de classificação de imagens do TensorFlow usando um modelo Edge. Você executou o aplicativo da Web em um navegador e fez uma previsão de classificação usando o modelo Edge personalizado e uma imagem carregada da Web. Em seguida, você examinou partes do código de amostra para entender a funcionalidade subjacente.

Próximas etapas: