1. Introdução
Você já deu os primeiros passos com o TensorFlow.js, testou nossos modelos pré-criados ou até mesmo criou o seu próprio. Mas você viu algumas pesquisas de ponta em Python e quer saber se elas vão funcionar no navegador da Web para transformar sua ideia em realidade para milhões de pessoas de maneira escalonável. Parece familiar? Se sim, este é o codelab certo para você!
A equipe do TensorFlow.js criou uma ferramenta conveniente para converter modelos no formato SavedModel para o TensorFlow.js usando um conversor de linha de comando. Assim, você pode usar esses modelos com o alcance e a escala da Web.
O que você vai aprender
Neste laboratório de programação, você vai aprender a usar o conversor de linha de comando do TensorFlow.js para transferir um SavedModel gerado em Python para o formato model.json necessário para execução no lado do cliente em um navegador da Web.
Especificamente:
- Como criar um modelo de ML simples em Python e salvá-lo no formato necessário para o conversor do TensorFlow.js.
- Como instalar e usar o conversor do TensorFlow.js no SavedModel exportado do Python.
- Pegue os arquivos resultantes da conversão e use no seu aplicativo da Web JS.
- Entenda o que fazer quando algo dá errado (nem todos os modelos serão convertidos) e quais opções você tem.
Imagine poder pegar uma pesquisa recém-lançada e disponibilizar esse modelo para milhões de desenvolvedores de JS no mundo todo. Ou talvez você use isso na sua própria criação, que qualquer pessoa no mundo poderá acessar se ela for executada no navegador da Web, já que não são necessárias dependências complexas nem configuração de ambiente. Tudo pronto para começar a programar? Vamos lá!
Compartilhe o que você converte com a gente!
Você pode usar o que aprender hoje para tentar converter alguns dos seus modelos favoritos do Python. Se você conseguir fazer isso e criar um site de demonstração funcional do modelo em ação, marque-nos na rede social usando a hashtag #MadeWithTFJS para que seu projeto tenha a chance de ser destacado no nosso blog do TensorFlow ou até em futuros eventos de demonstração. Gostaríamos de ver mais pesquisas incríveis sendo portadas para a Web e permitir que um número maior de pessoas use esses modelos de maneiras inovadoras ou criativas, como este ótimo exemplo.
2. O que é o TensorFlow.js?
O TensorFlow.js é uma biblioteca de machine learning de código aberto que pode ser executada em qualquer lugar que o JavaScript possa. Ela é baseada na biblioteca original do TensorFlow escrita em Python e tem como objetivo recriar essa experiência do desenvolvedor e o conjunto de APIs para o ecossistema JavaScript.
Onde ela pode ser usada?
Devido à portabilidade do JavaScript, agora é possível programar em uma linguagem e realizar aprendizado de máquina em todas as seguintes plataformas com facilidade:
- Lado do cliente no navegador da Web usando JavaScript simples
- Lado do servidor e até mesmo dispositivos IoT, como o Raspberry Pi, usando o Node.js
- Apps para computador usando Electron
- Apps nativos para dispositivos móveis usando o React Native
O TensorFlow.js também oferece suporte a vários back-ends em cada um desses ambientes (os ambientes reais baseados em hardware em que ele pode ser executado, como CPU ou WebGL, por exemplo). Um "back-end" nesse contexto não significa um ambiente do lado do servidor. O back-end para execução pode ser do lado do cliente em WebGL, por exemplo, para garantir a compatibilidade e manter tudo funcionando rapidamente. No momento, o TensorFlow.js é compatível com:
- Execução do WebGL na placa gráfica do dispositivo (GPU): essa é a maneira mais rápida de executar modelos maiores (mais de 3 MB) com aceleração de GPU.
- Execução do Web Assembly (WASM) na CPU: para melhorar a performance da CPU em todos os dispositivos, incluindo smartphones de gerações mais antigas, por exemplo. Isso é mais adequado para modelos menores (menos de 3 MB), que podem ser executados mais rapidamente na CPU com WASM do que com WebGL devido ao overhead de upload de conteúdo para um processador gráfico.
- Execução da CPU: o fallback será usado se nenhum dos outros ambientes estiver disponível. É o mais lento dos três, mas está sempre disponível.
Observação:você pode forçar um desses back-ends se souber em qual dispositivo vai executar ou deixar o TensorFlow.js decidir por você se não especificar isso.
Superpoderes do lado do cliente
Executar o TensorFlow.js no navegador da Web na máquina do cliente pode trazer vários benefícios que valem a pena considerar.
Privacidade
É possível treinar e classificar dados na máquina do cliente sem enviar informações para um servidor da Web de terceiros. Em alguns casos, isso pode ser um requisito para obedecer às leis locais, como o GDPR, ou ao processar dados que o usuário queira manter na máquina e não enviar a terceiros.
Velocidade
Como você não precisa enviar dados para um servidor remoto, a inferência (o ato de classificar os dados) pode ser mais rápida. Melhor ainda, você tem acesso direto aos sensores do dispositivo, como câmera, microfone, GPS, acelerômetro e muito mais, caso o usuário conceda acesso.
Alcance e escala
Com um clique, qualquer pessoa no mundo pode clicar em um link que você enviou, abrir a página da Web no navegador e usar o que você criou. Não é necessário ter uma configuração complexa do Linux do lado do servidor com drivers CUDA e muito mais apenas para usar o sistema de aprendizado de máquina.
Custo
Sem servidores, a única coisa que você precisa pagar é uma CDN para hospedar seus arquivos HTML, CSS, JS e de modelo. O custo de uma CDN é muito menor do que manter um servidor (possivelmente com uma placa gráfica conectada) funcionando 24 horas por dia, 7 dias por semana.
Recursos do lado do servidor
O uso da implementação do TensorFlow.js em Node.js permite os seguintes recursos.
Suporte completo ao CUDA
No lado do servidor, para aceleração da placa gráfica, instale os drivers NVIDIA CUDA para permitir que o TensorFlow funcione com a placa gráfica (ao contrário do navegador, que usa WebGL e não precisa de instalação). No entanto, com suporte total ao CUDA, é possível aproveitar ao máximo as capacidades de nível inferior da placa de vídeo, o que resulta em tempos de treinamento e inferência mais rápidos. O desempenho é igual à implementação do TensorFlow em Python, já que ambos compartilham o mesmo back-end em C++.
Tamanho do modelo
Para modelos de ponta de pesquisa, você pode estar trabalhando com modelos muito grandes, talvez gigabytes de tamanho. No momento, não é possível executar esses modelos no navegador da web devido às limitações de uso da memória por guia do navegador. Para executar esses modelos maiores, use o Node.js no seu próprio servidor com as especificações de hardware necessárias para executar um modelo desse tipo com eficiência.
IOT
O Node.js é compatível com computadores de placa única conhecidos, como o Raspberry Pi (em inglês). Isso significa que você também pode executar modelos do TensorFlow.js nesses dispositivos.
Velocidade
O Node.js é escrito em JavaScript, o que significa que ele se beneficia da compilação just-in-time. Isso significa que você pode ter ganhos de performance ao usar o Node.js, já que ele será otimizado no tempo de execução, principalmente para qualquer pré-processamento que você esteja fazendo. Um ótimo exemplo disso pode ser visto neste estudo de caso, que mostra como a Hugging Face usou o Node.js para aumentar o desempenho do modelo de processamento de linguagem natural em duas vezes.
Agora que você entende o básico do TensorFlow.js, onde ele pode ser executado e alguns dos benefícios, vamos começar a fazer coisas úteis com ele.
3. Como configurar seu sistema
Neste tutorial, vamos usar o Ubuntu, uma distribuição popular do Linux que muitas pessoas usam e que está disponível no Compute Engine do Google Cloud como uma imagem de base se você quiser acompanhar em uma máquina virtual baseada na nuvem.
No momento da redação, é possível selecionar a imagem do Ubuntu 18.04.4 LTS ao criar uma nova instância simples do Compute Engine, que é o que vamos usar. Você pode usar sua própria máquina ou até mesmo um sistema operacional diferente, se quiser, mas as instruções de instalação e as dependências podem variar entre os sistemas.
Como instalar o TensorFlow (versão do Python)
Agora, como você provavelmente está tentando converter algum modelo baseado em Python que encontrou ou vai escrever, antes de exportar um arquivo "SavedModel" do Python, é necessário configurar a versão Python do TensorFlow na sua instância se o "SavedModel" ainda não estiver disponível para download.
Use SSH para acessar a máquina na nuvem que você criou acima e digite o seguinte na janela do terminal:
Janela do terminal:
sudo apt update
sudo apt-get install python3
Isso garante que o Python 3 esteja instalado na máquina. O Python 3.4 ou mais recente precisa estar instalado para usar o TensorFlow.
Para verificar se a versão correta está instalada, digite o seguinte:
Janela do terminal:
python3 --version
Você vai ver uma saída indicando o número da versão, como Python 3.6.9. Se você vir isso impresso corretamente e o valor for maior que 3,4, podemos continuar.
Em seguida, vamos instalar o PIP para Python 3, que é o gerenciador de pacotes do Python, e depois atualizá-lo. Tipo:
Janela do terminal:
sudo apt install python3-pip
pip3 install --upgrade pip
Podemos verificar a instalação do pip3 novamente com:
Janela do terminal:
pip3 --version
No momento da redação, vemos pip 20.2.3 impresso no terminal após a execução desse comando.
Antes de instalar o TensorFlow, é necessário que o pacote Python "setuptools" esteja na versão 41.0.0 ou mais recente. Execute o comando a seguir para garantir que ele esteja atualizado com a versão mais recente:
Janela do terminal:
pip3 install -U setuptools
Por fim, instale o TensorFlow para Python:
Janela do terminal:
pip3 install tensorflow
Esse processo pode levar algum tempo. Aguarde a conclusão.
Vamos verificar se o TensorFlow foi instalado corretamente. Crie um arquivo Python chamado test.py no diretório atual:
Janela do terminal:
nano test.py
Quando o nano abrir, podemos escrever um código Python para imprimir a versão do TensorFlow instalada:
test.py:
import tensorflow as tf
print(tf.__version__)
Pressione CTRL + O para gravar as mudanças no disco e CTRL + X para sair do editor nano.
Agora podemos executar esse arquivo Python para ver a versão do TensorFlow impressa na tela:
Janela do terminal:
python3 test.py
No momento da redação, vemos 2.3.1 impresso no console para nossa versão do TensorFlow Python instalada.
4. Como criar um modelo em Python
A próxima etapa deste codelab vai mostrar como criar um modelo simples em Python para salvar o modelo treinado resultante no formato "SavedModel" e usar com o conversor de linha de comando do TensorFlow.js. O princípio seria semelhante para qualquer modelo do Python que você tentasse converter, mas vamos manter este código simples para que todos possam entender.
Vamos editar o arquivo test.py criado na primeira seção e atualizar o código da seguinte maneira:
test.py:
import tensorflow as tf
print(tf.__version__)
# Import NumPy - package for working with arrays in Python.
import numpy as np
# Import useful keras functions - this is similar to the
# TensorFlow.js Layers API functionality.
from tensorflow.keras import Sequential
from tensorflow.keras.layers import Dense
# Create a new dense layer with 1 unit, and input shape of [1].
layer0 = Dense(units=1, input_shape=[1])
model = Sequential([layer0])
# Compile the model using stochastic gradient descent as optimiser
# and the mean squared error loss function.
model.compile(optimizer='sgd', loss='mean_absolute_error')
# Provide some training data! Here we are using some fictional data
# for house square footage and house price (which is simply 1000x the
# square footage) which our model must learn for itself.
xs = np.array([800.0, 850.0, 900.0, 950.0, 980.0, 1000.0, 1050.0, 1075.0, 1100.0, 1150.0, 1200.0, 1250.0, 1300.0, 1400.0, 1500.0, 1600.0, 1700.0, 1800.0, 1900.0, 2000.0], dtype=float)
ys = np.array([800000.0, 850000.0, 900000.0, 950000.0, 980000.0, 1000000.0, 1050000.0, 1075000.0, 1100000.0, 1150000.0, 1200000.0, 1250000.0, 1300000.0, 1400000.0, 1500000.0, 1600000.0, 1700000.0, 1800000.0, 1900000.0, 2000000.0], dtype=float)
# Train the model for 500 epochs.
model.fit(xs, ys, epochs=500, verbose=0)
# Test the trained model on a test input value
print(model.predict([1200.0]))
# Save the model we just trained to the "SavedModel" format to the
# same directory our test.py file is located.
tf.saved_model.save(model, './')
Esse código vai treinar uma regressão linear muito simples para aprender a estimar a relação entre os x (entradas) e y (saídas) fornecidos. Em seguida, vamos salvar o modelo treinado resultante no disco. Confira os comentários inline para mais detalhes sobre o que cada linha faz.
Se verificarmos nosso diretório depois de executar esse programa (chamando python3 test.py), vamos encontrar alguns novos arquivos e pastas criados no diretório atual:
- test.py
- saved_model.pb
- recursos
- variables
Agora geramos os arquivos necessários para serem usados pelo conversor do TensorFlow.js e executar o modelo no navegador.
5. Converter SavedModel para o formato do TensorFlow.js
Instalar o conversor do TensorFlow.js
Para instalar o conversor, execute o seguinte comando:
Janela do terminal:
pip3 install tensorflowjs
Foi fácil.
Supondo que estejamos usando o conversor de linha de comando (tensorflowjs_converter) e não a versão do assistente mostrada acima, podemos chamar o seguinte comando para converter o modelo salvo que acabamos de criar e transmitir explicitamente os parâmetros ao conversor:
Janela do terminal:
tensorflowjs_converter \
--input_format=keras_saved_model \
./ \
./predict_houses_tfjs
O que está acontecendo aqui? Primeiro, chamamos o binário tensorflowjs_converter que acabamos de instalar e especificamos que estamos tentando converter um modelo salvo do Keras.
No exemplo de código acima, você vai notar que importamos o Keras e usamos as APIs de camadas de nível superior dele para criar nosso modelo. Se você não usou o keras no seu código Python, talvez queira usar um formato de entrada diferente:
- keras: para carregar o formato keras (tipo de arquivo HDF5)
- tf_saved_model: para carregar um modelo que usa APIs principais do TensorFlow em vez do Keras.
- tf_frozen_model: para carregar um modelo que contém pesos congelados.
- tf_hub: para carregar um modelo gerado no TensorFlow Hub.
Saiba mais sobre esses outros formatos aqui.
Os dois parâmetros a seguir especificam em qual pasta o modelo salvo está localizado. Na demonstração acima, especificamos o diretório atual e, por fim, especificamos em qual diretório queremos gerar a conversão, que especificamos acima como uma pasta chamada "predict_houses_tfjs" no diretório atual.
A execução do comando acima cria uma pasta no diretório atual chamada predict_houses_tfjs que contém :
- model.json
- Group1-shard1of1.bin
Esses são os arquivos necessários para executar o modelo no navegador da Web. Salve esses arquivos, porque vamos usá-los na próxima seção.
6. Como usar o modelo convertido no navegador
Hospedar os arquivos convertidos
Primeiro, precisamos colocar os arquivos model.json e *.bin gerados em um servidor da Web para que possamos acessá-los pela página da Web. Para esta demonstração, vamos usar o Glitch.com para facilitar o acompanhamento. No entanto, se você tiver experiência em engenharia da Web, poderá iniciar um servidor HTTP simples na instância atual do servidor Ubuntu para fazer isso. A escolha é sua.
Como fazer upload de arquivos para o Glitch
- Faça login em Glitch.com.
- Use este link para clonar nosso projeto boilerplate do TensorFlow.js. Ele contém um esqueleto de arquivos html, css e js que importam a biblioteca TensorFlow.js para uso imediato.
- Clique na pasta "Recursos" no painel à esquerda.
- Clique em "Fazer upload de um recurso" e selecione
group1-shard1of1.binpara enviar para essa pasta. Depois de fazer o upload, ele vai ficar assim:
- Se você clicar no arquivo
group1-shard1of1.binque acabou de enviar, poderá copiar o URL do local dele. Copie este caminho agora, como mostrado:
- Agora edite
model.jsonusando seu editor de texto favorito na máquina local e pesquise (usando CTRL+F) o arquivogroup1-shard1of1.bin, que será mencionado em algum lugar.
Substitua esse nome de arquivo pelo URL copiado na etapa 5, mas exclua o https://cdn.glitch.com/ inicial que o glitch gera do caminho copiado.
Depois da edição, ele vai ficar assim (observe como o caminho do servidor inicial foi removido para que apenas o nome do arquivo enviado resultante seja mantido): 
7. Agora salve e faça upload desse arquivo model.json editado para o Glitch. Para isso, clique em "Recursos" e depois no botão "Fazer upload de um recurso" (importante). Se você não usar o botão físico e arrastar e soltar, ele será enviado como um arquivo editável em vez de na CDN, que não estará na mesma pasta, e o caminho relativo será presumido quando o TensorFlow.js tentar baixar os arquivos binários de um determinado modelo. Se você fez isso corretamente, verá dois arquivos na pasta assets, assim: 
Ótimo! Agora podemos usar os arquivos salvos com um código real no navegador.
Como carregar o modelo
Agora que hospedamos os arquivos convertidos, podemos escrever uma página da Web simples para carregar esses arquivos e usá-los para fazer uma previsão. Abra script.js na pasta do projeto Glitch e substitua o conteúdo deste arquivo pelo seguinte depois de mudar o const MODEL_URL para apontar para o link gerado do Glitch.com do arquivo model.json que você enviou no Glitch:
script.js:
// Grab a reference to our status text element on the web page.
// Initially we print out the loaded version of TFJS.
const status = document.getElementById('status');
status.innerText = 'Loaded TensorFlow.js - version: ' + tf.version.tfjs;
// Specify location of our Model.json file we uploaded to the Glitch.com CDN.
const MODEL_URL = ‘YOUR MODEL.JSON URL HERE! CHANGE THIS!';
// Specify a test value we wish to use in our prediction.
// Here we use 950, so we expect the result to be close to 950,000.
const TEST_VALUE = 950.0
// Create an asynchronous function.
async function run() {
// Load the model from the CDN.
const model = await tf.loadLayersModel(MODEL_URL);
// Print out the architecture of the loaded model.
// This is useful to see that it matches what we built in Python.
console.log(model.summary());
// Create a 1 dimensional tensor with our test value.
const input = tf.tensor1d([TEST_VALUE]);
// Actually make the prediction.
const result = model.predict(input);
// Grab the result of prediction using dataSync method
// which ensures we do this synchronously.
status.innerText = 'Input of ' + TEST_VALUE +
'sqft predicted as $' + result.dataSync()[0];
}
// Call our function to start the prediction!
run();
Executar o código acima depois de mudar a constante MODEL_URL para apontar para o caminho model.json resulta em uma saída mostrada abaixo.
Se inspecionarmos o console do navegador da Web (pressione F12 para abrir as ferramentas de desenvolvedor no navegador), também poderemos ver a descrição do modelo carregado, que mostra:
Comparando isso com nosso código Python no início deste codelab, podemos confirmar que essa é a mesma rede que criamos com uma entrada densa e uma camada densa com um nó.
Parabéns! Você acabou de executar um modelo Python convertido e treinado no navegador da Web.
7. Modelos que não convertem
Às vezes, modelos mais complexos que compilam para usar operações menos comuns não são compatíveis com a conversão. A versão do TensorFlow.js baseada em navegador é uma reescrita completa do TensorFlow. Por isso, no momento, não oferecemos suporte a todas as operações de baixo nível da API C++ do TensorFlow (são milhares). No entanto, com o tempo, mais operações serão adicionadas à medida que crescermos e as operações principais se tornarem mais estáveis.
No momento da redação deste artigo, uma dessas funções em Python do TensorFlow que gera uma operação sem suporte quando exportada como um SavedModel é linalg.diag. Se tentarmos converter um SavedModel que usa isso em Python (que oferece suporte às operações resultantes), vamos encontrar um erro semelhante ao mostrado abaixo:
Aqui, podemos ver destacado em vermelho que a chamada linalg.diag foi compilada para produzir uma operação chamada MatrixDiagV3, que não é compatível com o TensorFlow.js no navegador da Web no momento da escrita deste codelab.
O que fazer?
Você tem duas opções:
- Implemente essa operação ausente no TensorFlow.js. Somos um projeto de código aberto e aceitamos contribuições para itens como novas operações. Confira este guia sobre como escrever novas operações para o TensorFlow.js. Se você conseguir fazer isso, use a flag
Skip_op_checkno conversor de linha de comando para ignorar esse erro e continuar a conversão de qualquer maneira. Ele vai presumir que essa op está disponível no novo build do TensorFlow.js que você criou e que tem suporte para a op ausente. - Determine qual parte do seu código Python produziu a operação sem suporte no arquivo
savedmodelexportado. Em um pequeno conjunto de código, isso pode ser fácil de localizar, mas em modelos mais complexos, isso pode exigir uma investigação considerável, já que atualmente não há um método para identificar a chamada de função Python de alto nível que produziu uma determinada operação no formato de arquivosavedmodel. Depois de localizar, você pode mudar para usar um método diferente que seja compatível.
8. Parabéns
Parabéns! Você deu os primeiros passos para usar um modelo do Python com o TensorFlow.js no navegador da Web.
Resumo
Neste codelab, aprendemos a:
- Configurar nosso ambiente Linux para instalar o TensorFlow baseado em Python
- Exportar um "SavedModel" do Python
- Instalar o conversor de linha de comando do TensorFlow.js
- Use o conversor de linha de comando do TensorFlow.js para criar os arquivos necessários do lado do cliente.
- Usar os arquivos gerados em um aplicativo da Web real
- Identifique os modelos que não vão gerar conversões e o que precisa ser implementado para que eles possam gerar conversões no futuro.
Qual é a próxima etapa?
Lembre-se de nos marcar em qualquer app que você criar usando a hashtag #MadeWithTFJS para ter uma chance de ser destacado nas redes sociais ou até mesmo ser exibido em eventos futuros do TensorFlow. Queremos saber o que você converte e usa no lado do cliente no navegador.
Mais codelabs do TensorFlow.js para continuar seu aprendizado
- Criar uma rede neural do zero no TensorFlow.js
- Faça uma webcam inteligente que detecta objetos
- Classificação de imagens personalizadas com aprendizado por transferência no TensorFlow.js