Criar uma webcam inteligente em JavaScript com um modelo de machine learning pré-treinado do TensorFlow.js

1. Antes de começar

O machine learning é uma palavra da moda atualmente. As aplicações parecem não ter limites, e a tecnologia está prestes a afetar quase todos os setores em um futuro próximo. Se você trabalha como engenheiro ou designer, front-end ou back-end, e tem familiaridade com JavaScript, este codelab foi escrito para ajudar você a começar a adicionar machine learning ao seu conjunto de habilidades.

Pré-requisitos

Este codelab foi escrito para engenheiros experientes que já conhecem JavaScript.

O que você vai criar

Neste codelab, você vai:

• Crie uma página da Web que usa machine learning diretamente no navegador com o TensorFlow.js para classificar e detectar objetos comuns (sim, incluindo mais de um por vez) de uma transmissão ao vivo de webcam.
• Melhore sua webcam comum para identificar objetos e receber as coordenadas da caixa delimitadora de cada um deles.
• Destaque o objeto encontrado no stream de vídeo, conforme mostrado abaixo:

Imagine poder detectar se uma pessoa estava em um vídeo para contar quantas pessoas estavam presentes a qualquer momento e estimar o movimento de uma determinada área ao longo do dia. Ou receber um alerta quando seu cachorro for detectado em um cômodo da casa em que ele não deveria estar enquanto você está fora. Se você conseguir fazer isso, estará no caminho certo para criar sua própria versão de uma câmera Google Nest que pode alertar quando um invasor (de qualquer tipo) for detectado usando seu próprio hardware personalizado. Muito legal. É difícil de fazer? Não. Vamos começar a hackear…

O que você vai aprender

• Como carregar um modelo pré-treinado do TensorFlow.js.
• Como extrair dados de uma transmissão ao vivo por webcam e desenhá-los na tela.
• Como classificar um frame de imagem para encontrar as caixas delimitadoras de qualquer objeto que o modelo tenha sido treinado para reconhecer.
• Como usar os dados transmitidos de volta do modelo para destacar os objetos encontrados.

Este codelab se concentra em como começar a usar modelos pré-treinados do TensorFlow.js. Conceitos e blocos de código que não são relevantes para o TensorFlow.js e o machine learning não são explicados e são fornecidos para que você apenas copie e cole.

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. Modelos pré-treinados

O TensorFlow.js oferece vários modelos pré-treinados de machine learning (ML). Esses modelos foram treinados pela equipe do TensorFlow.js e agrupados em uma classe fácil de usar. Eles são uma ótima maneira de dar os primeiros passos com o machine learning. Em vez de criar e treinar um modelo para resolver seu problema, importe um modelo pré-treinado como ponto de partida.

Confira uma lista crescente de modelos pré-treinados fáceis de usar na página Modelos para JavaScript do Tensorflow.js. Há também outros lugares em que você pode conseguir modelos convertidos do TensorFlow que funcionam no TensorFlow.js, incluindo o TensorFlow Hub.

Por que usar um modelo pré-treinado?

Há vários benefícios em começar com um modelo pré-treinado conhecido se ele se adequar ao seu caso de uso desejado, como:

1. Não é necessário coletar dados de treinamento. Preparar e rotular dados no formato correto para que um sistema de machine learning possa aprender com eles pode ser muito demorado e caro.
2. A capacidade de prototipar rapidamente uma ideia com custo e tempo reduzidos.
   Não faz sentido "reinventar a roda" quando um modelo pré-treinado pode ser bom o suficiente para fazer o que você precisa, permitindo que você se concentre em usar o conhecimento fornecido pelo modelo para implementar suas ideias criativas.
3. Uso de pesquisas de última geração. Os modelos pré-treinados geralmente são baseados em pesquisas conhecidas, o que permite que você os conheça e entenda o desempenho deles no mundo real.
4. Facilidade de uso e documentação extensa. Devido à popularidade desses modelos.
5. Recursos de aprendizado por transferência. Alguns modelos pré-treinados oferecem recursos de aprendizado por transferência, que é essencialmente a prática de transferir informações aprendidas de uma tarefa de machine learning para outro exemplo semelhante. Por exemplo, um modelo treinado originalmente para reconhecer gatos pode ser treinado novamente para reconhecer cachorros, se você fornecer novos dados de treinamento. Isso será mais rápido, já que você não vai começar com uma tela em branco. O modelo pode usar o que já aprendeu para reconhecer gatos e, em seguida, reconhecer a nova coisa. Afinal, os cachorros também têm olhos e orelhas. Portanto, se ele já sabe como encontrar esses recursos, já estamos na metade do caminho. Treinar novamente o modelo com seus próprios dados de uma maneira muito mais rápida.

O que é COCO-SSD?

COCO-SSD é o nome de um modelo de ML de detecção de objetos pré-treinado que você vai usar neste codelab, que tem como objetivo localizar e identificar vários objetos em uma única imagem. Em outras palavras, ele pode informar a caixa delimitadora dos objetos que foi treinado para encontrar e dar a localização desse objeto em qualquer imagem apresentada. Confira um exemplo na imagem abaixo:

Se houvesse mais de um cachorro na imagem acima, você receberia as coordenadas de duas caixas delimitadoras, descrevendo a localização de cada uma. O COCO-SSD foi pré-treinado para reconhecer 90 objetos comuns do dia a dia, como uma pessoa, um carro, um gato etc.

De onde veio o nome?

O nome pode parecer estranho, mas tem origem em duas siglas:

• COCO: refere-se ao fato de que ele foi treinado no conjunto de dados COCO (Common Objects in Context), que está disponível sem custo financeiro para qualquer pessoa fazer o download e usar ao treinar modelos próprios. O conjunto de dados contém mais de 200.000 imagens rotuladas que podem ser usadas para aprendizado.
• SSD (Single Shot MultiBox Detection): refere-se a parte da arquitetura do modelo usada na implementação dele. Não é necessário entender isso para o codelab, mas, se quiser saber mais, clique aqui.

4. Começar a configuração

O que é necessário

• Um navegador da Web moderno.
• Conhecimento básico de HTML, CSS, JavaScript e Chrome DevTools (visualização da saída do console).

Vamos programar

Modelos de boilerplate para começar foram criados para Glitch.com ou Codepen.io. Basta clonar um dos modelos como estado de base para este codelab com apenas um clique.

No Glitch, clique no botão remix this para fazer um fork e criar um novo conjunto de arquivos que podem ser editados.

Se preferir, no Codepen, clique em fork no canto inferior direito da tela.

Esse esqueleto muito simples fornece os seguintes arquivos:

• Página HTML (index.html)
• Folha de estilo (style.css)
• Arquivo para escrever nosso código JavaScript (script.js)

Para sua conveniência, há uma importação adicionada no arquivo HTML para a biblioteca TensorFlow.js. Esta é a aparência dela:

index.html

<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>

Alternativa: use seu editor da Web preferido ou trabalhe localmente

Se você quiser baixar o código e trabalhar localmente ou em outro editor on-line, basta criar os três arquivos mencionados acima no mesmo diretório e copiar e colar o código do modelo do Glitch em cada um deles.

Atenção:se você estiver executando localmente, em vez de outro site como Codepen.io ou similar, verifique se os arquivos estão sendo veiculados por um servidor da Web e não apenas clicando duas vezes em index.html para abrir usando o protocolo file://.

5. Preencher o esqueleto HTML

Todos os protótipos exigem uma estrutura HTML básica. Você vai usar isso para renderizar a saída do modelo de aprendizado de máquina mais tarde. Vamos configurar isso agora:

• Um título para a página
• Texto descritivo
• Um botão para ativar a webcam
• Uma tag de vídeo para renderizar o stream da webcam.

Para configurar esses recursos, abra index.html e cole o seguinte código sobre o código atual:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Multiple object detection using pre trained model in TensorFlow.js</title>
    <meta charset="utf-8">
    <!-- Import the webpage's stylesheet -->
    <link rel="stylesheet" href="style.css">
  </head>  
  <body>
    <h1>Multiple object detection using pre trained model in TensorFlow.js</h1>

    <p>Wait for the model to load before clicking the button to enable the webcam - at which point it will become visible to use.</p>
    
    <section id="demos" class="invisible">

      <p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
      
      <div id="liveView" class="camView">
        <button id="webcamButton">Enable Webcam</button>
        <video id="webcam" autoplay muted width="640" height="480"></video>
      </div>
    </section>

    <!-- Import TensorFlow.js library -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
    <!-- Load the coco-ssd model to use to recognize things in images -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
    
    <!-- Import the page's JavaScript to do some stuff -->
    <script src="script.js" defer></script>
  </body>
</html>

Entender o código

Observe alguns pontos importantes que você adicionou:

• Você adicionou uma tag <h1> e algumas tags <p> para o cabeçalho e informações sobre como usar a página. Nada de especial aqui.

Você também adicionou uma tag de seção representando seu espaço de demonstração:

index.html

    <section id="demos" class="invisible">

      <p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
      
      <div id="liveView" class="webcam">
        <button id="webcamButton">Enable Webcam</button>
        <video id="webcam" autoplay width="640" height="480"></video>
      </div>
    </section>

• Inicialmente, você vai dar a esse section uma classe "invisible". Assim, você pode ilustrar visualmente para o usuário quando o modelo estiver pronto e for seguro clicar no botão Ativar webcam.
• Você adicionou o botão ativar webcam, que será estilizado no CSS.
• Você também adicionou uma tag de vídeo, para a qual vai transmitir a entrada da webcam. Você vai configurar isso no seu código JavaScript em breve.

Se você visualizar a saída agora, ela será parecida com esta:

Dica:para conferir uma prévia dinâmica do seu trabalho em Glitch.com, clique no menu suspenso show no canto superior esquerdo da tela e selecione next to the code.

6. Adic. estilo

Padrões de elementos

Primeiro, vamos adicionar estilos aos elementos HTML que acabamos de incluir para garantir que eles sejam renderizados corretamente:

style.css

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
  color: #3D3D3D;
}

h1 {
  font-style: italic;
  color: #FF6F00;
}

video {
  display: block;
}

section {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}

Em seguida, adicione algumas classes CSS úteis para ajudar com vários estados diferentes da interface do usuário, como quando queremos ocultar o botão ou fazer com que a área de demonstração apareça como indisponível se o modelo ainda não estiver pronto.

style.css

.removed {
  display: none;
}

.invisible {
  opacity: 0.2;
}

.camView {
  position: relative;
  float: left;
  width: calc(100% - 20px);
  margin: 10px;
  cursor: pointer;
}

.camView p {
  position: absolute;
  padding: 5px;
  background-color: rgba(255, 111, 0, 0.85);
  color: #FFF;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  z-index: 2;
  font-size: 12px;
}

.highlighter {
  background: rgba(0, 255, 0, 0.25);
  border: 1px dashed #fff;
  z-index: 1;
  position: absolute;
}

Ótimo! Isso é tudo o que você precisa. Se você substituiu os estilos com os dois trechos de código acima, a prévia dinâmica vai ficar assim:

Observe como o texto da área de demonstração e o botão estão indisponíveis, já que o HTML tem por padrão a classe "invisible" aplicada. Você usará JavaScript para remover essa classe quando o modelo estiver pronto para uso.

7. Criar esqueleto JavaScript

Dica:o código abaixo é mostrado em ordem, mas dividido em partes menores para uma explicação mais detalhada. Se você copiar e colar cada segmento no final do arquivo JavaScript a cada vez ou substituir uma função vazia definida da etapa anterior, conforme recomendado, tudo vai funcionar bem :-)

Como referenciar elementos DOM importantes

Primeiro, verifique se você consegue acessar as partes principais da página que precisará manipular ou acessar mais tarde no nosso código:

script.js

const video = document.getElementById('webcam');
const liveView = document.getElementById('liveView');
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');

Verificar se há suporte para webcam

Agora você pode adicionar algumas funções de assistência para verificar se o navegador que você está usando permite acessar o stream da webcam via getUserMedia:

script.js

// Check if webcam access is supported.
function getUserMediaSupported() {
  return !!(navigator.mediaDevices &&
    navigator.mediaDevices.getUserMedia);
}

// If webcam supported, add event listener to button for when user
// wants to activate it to call enableCam function which we will 
// define in the next step.
if (getUserMediaSupported()) {
  enableWebcamButton.addEventListener('click', enableCam);
} else {
  console.warn('getUserMedia() is not supported by your browser');
}

// Placeholder function for next step. Paste over this in the next step.
function enableCam(event) {
}

Buscando a transmissão da webcam

Em seguida, copie e cole o código abaixo para preencher a função enableCam vazia que definimos acima:

Atenção:copie o código abaixo e cole-o na função enableCam definida na etapa anterior, em vez de apenas adicionar ao final do arquivo.

script.js

// Enable the live webcam view and start classification.
function enableCam(event) {
  // Only continue if the COCO-SSD has finished loading.
  if (!model) {
    return;
  }
  
  // Hide the button once clicked.
  event.target.classList.add('removed');  
  
  // getUsermedia parameters to force video but not audio.
  const constraints = {
    video: true
  };

  // Activate the webcam stream.
  navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
    video.srcObject = stream;
    video.addEventListener('loadeddata', predictWebcam);
  });
}

Por fim, adicione um código temporário para testar se a webcam está funcionando.

O código abaixo vai simular que o modelo está carregado e ativar o botão da câmera para que você possa clicar nele. Você vai substituir todo esse código na próxima etapa. Portanto, prepare-se para excluí-lo novamente em breve:

script.js

// Placeholder function for next step.
function predictWebcam() {
}

// Pretend model has loaded so we can try out the webcam code.
var model = true;
demosSection.classList.remove('invisible');

Faça um teste Nesse ponto, se você executar o código atual como está e clicar no botão quando ele ficar disponível, uma visualização da webcam ao vivo vai abrir depois que você aceitar o acesso à webcam no navegador da Web (que geralmente aparece no canto superior esquerdo do navegador como um pop-up).

Ótimo! Se você executou o código e clicou no botão como ele está atualmente, algo assim vai aparecer:

8. Uso de modelos de aprendizado de máquina

Como carregar o modelo

Agora está tudo pronto para carregar o modelo COCO-SSD.

Quando a inicialização terminar, ative a área de demonstração e o botão na sua página da Web. Cole este código sobre o código temporário que você adicionou no final da última etapa:

script.js

// Store the resulting model in the global scope of our app.
var model = undefined;

// Before we can use COCO-SSD class we must wait for it to finish
// loading. Machine Learning models can be large and take a moment 
// to get everything needed to run.
// Note: cocoSsd is an external object loaded from our index.html
// script tag import so ignore any warning in Glitch.
cocoSsd.load().then(function (loadedModel) {
  model = loadedModel;
  // Show demo section now model is ready to use.
  demosSection.classList.remove('invisible');
});

Depois de adicionar o código acima e atualizar as imagens ao vivo, você vai notar que, alguns segundos após o carregamento da página (dependendo da velocidade da sua rede), o botão ativar webcam aparece automaticamente quando o modelo está pronto para uso. No entanto, você também colou a função predictWebcam. Agora é hora de definir isso completamente, já que nosso código não fará nada no momento.

Vamos para a próxima etapa.

Classificar um frame da webcam

Execute o código abaixo para permitir que o app capture continuamente um frame do stream da webcam quando o navegador estiver pronto e o transmita ao modelo para classificação.

Em seguida, o modelo vai analisar os resultados e desenhar uma tag <p> nas coordenadas retornadas, além de definir o texto como o rótulo do objeto, se ele estiver acima de um determinado nível de confiança.

script.js

var children = [];

function predictWebcam() {
  // Now let's start classifying a frame in the stream.
  model.detect(video).then(function (predictions) {
    // Remove any highlighting we did previous frame.
    for (let i = 0; i < children.length; i++) {
      liveView.removeChild(children[i]);
    }
    children.splice(0);
    
    // Now lets loop through predictions and draw them to the live view if
    // they have a high confidence score.
    for (let n = 0; n < predictions.length; n++) {
      // If we are over 66% sure we are sure we classified it right, draw it!
      if (predictions[n].score > 0.66) {
        const p = document.createElement('p');
        p.innerText = predictions[n].class  + ' - with ' 
            + Math.round(parseFloat(predictions[n].score) * 100) 
            + '% confidence.';
        p.style = 'margin-left: ' + predictions[n].bbox[0] + 'px; margin-top: '
            + (predictions[n].bbox[1] - 10) + 'px; width: ' 
            + (predictions[n].bbox[2] - 10) + 'px; top: 0; left: 0;';

        const highlighter = document.createElement('div');
        highlighter.setAttribute('class', 'highlighter');
        highlighter.style = 'left: ' + predictions[n].bbox[0] + 'px; top: '
            + predictions[n].bbox[1] + 'px; width: ' 
            + predictions[n].bbox[2] + 'px; height: '
            + predictions[n].bbox[3] + 'px;';

        liveView.appendChild(highlighter);
        liveView.appendChild(p);
        children.push(highlighter);
        children.push(p);
      }
    }
    
    // Call this function again to keep predicting when the browser is ready.
    window.requestAnimationFrame(predictWebcam);
  });
}

A chamada realmente importante nesse novo código é model.detect().

Todos os modelos prontos para o TensorFlow.js têm uma função como esta (o nome pode mudar de modelo para modelo. Consulte a documentação para mais detalhes) que realiza a inferência de machine learning.

A inferência é simplesmente o ato de receber uma entrada e executá-la no modelo de machine learning (essencialmente muitas operações matemáticas) e fornecer alguns resultados. Com os modelos pré-criados do TensorFlow.js, retornamos nossas previsões na forma de objetos JSON, o que facilita o uso.

Confira todos os detalhes dessa função de previsão na documentação do GitHub para o modelo COCO-SSD. Essa função faz muito trabalho pesado nos bastidores: ela pode aceitar qualquer objeto "semelhante a imagem" como parâmetro, como uma imagem, um vídeo, uma tela etc. Usar modelos pré-criados pode economizar muito tempo e esforço, porque você não precisa escrever esse código e pode trabalhar com ele "pronto para uso".

A execução desse código vai gerar uma imagem parecida com esta:

Por fim, confira um exemplo do código detectando vários objetos ao mesmo tempo:

Uhuuu! Agora você pode imaginar como seria simples usar algo assim para criar um dispositivo como uma Nest Cam usando um smartphone antigo para alertar quando o cachorro estiver no sofá ou o gato no sofá. Se você estiver com problemas no seu código, confira minha versão final funcional aqui para ver se você copiou algo incorretamente.

9. Parabéns

Parabéns! Você deu os primeiros passos para usar o TensorFlow.js e o aprendizado de máquina no navegador da Web. Agora é com você transformar esses humildes começos em algo criativo. O que você vai criar?

Resumo

Neste codelab, você aprendeu como:

• Você aprendeu os benefícios de usar o TensorFlow.js em vez de outras formas do TensorFlow.
• Aprender as situações em que é recomendável começar com um modelo de machine learning pré-treinado.
• Criou uma página da Web totalmente funcional que pode classificar objetos em tempo real usando sua webcam, incluindo:
• Como criar um esqueleto HTML para conteúdo
• Definir estilos para elementos e classes HTML
• Configurar o scaffolding do JavaScript para interagir com o HTML e detectar a presença de uma webcam
• Como carregar um modelo pré-treinado do TensorFlow.js
• Usar o modelo carregado para fazer classificações contínuas do stream da webcam e desenhar uma caixa delimitadora ao redor dos objetos na imagem.

Próximas etapas

Compartilhe o que você sabe com a gente! Você pode estender facilmente o que criou para este codelab a outros casos de uso criativos também. Recomendamos que você pense fora da caixa e continue hackeando depois de terminar.

• Confira todos os objetos que esse modelo pode reconhecer e pense em como usar esse conhecimento para realizar uma ação. Quais ideias criativas podem ser implementadas estendendo o que você fez hoje?

Talvez você possa adicionar uma camada simples do lado do servidor para enviar uma notificação a outro dispositivo quando ele detectar um determinado objeto de sua escolha usando websockets. Essa é uma ótima maneira de reutilizar um smartphone antigo e dar a ele uma nova finalidade. As possibilidades são ilimitadas.

• Marque-nos nas redes sociais usando a hashtag #MadeWithTFJS para que seu projeto tenha a chance de ser destacado no nosso blog do TensorFlow ou até mesmo em eventos futuros do TensorFlow.

Mais codelabs do TensorFlow.js para continuar seu aprendizado

• Criar uma rede neural do zero no TensorFlow.js
• Reconhecimento de áudio usando aprendizado por transferência no TensorFlow.js
• Classificação de imagens personalizadas com aprendizado por transferência no TensorFlow.js

Sites para conferir

• Site oficial do TensorFlow.js
• Modelos prontos do TensorFlow.js
• API do TensorFlow.js
• Demonstrações do TensorFlow.js