O que você criará
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:
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
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:
Acesse o diretório local em que os arquivos do modelo estão armazenados, caso ainda não tenha feito isso.
Crie um arquivo
index.html
no mesmo diretório local com o seguinte conteúdo:index.html
Amostras de código
(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.
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:
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:
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:
- Veja uma demonstração que usa SVG para sobrepor as caixas previstas com probabilidades na imagem.
- Saiba mais sobre o TensorFlow.js (em inglês).
- Saiba mais sobre a biblioteca do NPM do AutoML na documentação oficial.
- Saiba mais sobre o TensorFlow em geral por meio dos tutoriais (em inglês).