Tutorial do Edge TensorFlow.js

O que você criará

imagem de app da web com previsões

Neste tutorial, você fará o download de um modelo do TensorFlow.js Object Detection 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 do AutoML Vision Edge Object Detection 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/iod/${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="salad" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/object_detection/test_image.jpg">
<script>
async function run() {
  const model = await tf.automl.loadObjectDetection('model.json');
  const img = document.getElementById('salad');
  const options = {score: 0.5, iou: 0.5, topk: 20};
  const predictions = await model.detect(img, options);
  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>

  3. (opcional): substitua o atributo de caminho src da tag <img> para apontar para sua própria imagem.

Executar o app da Web

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

Python

python -m http.server 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.

O resultado é uma lista classificada de objetos de previsão:

[
  {
    "box": {
      "left": 105.1,
      "top": 22.2,
      "width": 70.6,
      "height": 55.7
    },
    "label": "Tomato",
    "score": 0.972
  },
  ...
]

Saiba mais sobre a API na documentação do pacote NPM do AutoML.

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="salad" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/object_detection/test_image.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.loadObjectDetection('model.json');
const img = document.getElementById('salad');
const options = {score: 0.5, iou: 0.5, topk: 20};
const predictions = await model.detect(img, options);

Especifique um modelo com tf.automl.loadObjectDetection(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.detect(img, options). Essa função executa uma única imagem por meio do modelo e retorna os objetos previstos. A entrada dessa função é um elemento de imagem HTML, um elemento de vídeo ou um tensor 3D.

A função model.detect(img, options) também aceita o argumento opcional options com as possíveis especificações:

  • score: índice de probabilidade de 0 a 1. O padrão é 0,5. As caixas com pontuação inferior a esse limite serão ignoradas.
  • topk: somente os objetos mais prováveis de topk são retornados. O número real de objetos pode ser menor que esse.

  • iou: intersecções acima do limite da união. IoU é uma métrica entre 0 e 1 usada para medir a sobreposição de duas caixas. As caixas previstas não serão sobrepostas além do limite especificado.

    Saiba mais sobre a avaliação de modelos que usam a Intersecção sobre união (IoU, na sigla em inglês) na página Como avaliar modelos.

Saiba mais sobre a API na documentação do pacote NPM do AutoML.

A seguir

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

Próximas etapas: