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, os seguintes arquivos terão sido 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}

Crie um pequeno app da Web

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

  1. Acesse o diretório local em que os arquivos do 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

python3 -m SimpleHTTPServer 8000

Node.js

Se você tiver o Node.js, instale o pacote http-server 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 JavaScript) e na página também.

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 as bibliotecas do TensorFlow.js e do AutoML, que estão disponíveis no gerenciador de pacotes NPM.

<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, a normalização dos valores de pixel e o retorno de 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">

Ao testar o modelo, substitua a imagem src pelo caminho para sua própria imagem.

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 exportado model.json, que, neste caso, é um caminho relativo, porque o arquivo index.html e os arquivos do 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: