Voltar ao blog

TensorFlow.js: Treinando Modelos de Aprendizado de Máquina no Navegador com WebGL

TensorFlow.js: Treinando Modelos de Aprendizado de Máquina no Navegador com WebGL

Introdução: O TensorFlow.js é uma biblioteca de código aberto da Google que traz o poder do aprendizado de máquina (ML) diretamente para ambientes JavaScript, incluindo navegadores web. Com ela, é possível criar, treinar e executar modelos de ML sem sair do navegador, aproveitando a GPU local via WebGL para acelerar os cálculos. Neste tutorial, veremos passo a passo como configurar o ambiente TensorFlow.js, criar modelos de redes neurais, preparar dados e executar o treinamento diretamente no navegador, destacando a aceleração obtida pelo WebGL. O objetivo é mostrar como desenvolver aplicações de ML no front-end, usando apenas JavaScript, de forma didática e acessível. Ao final, você terá um exemplo prático de modelo treinado no navegador, entendendo os desafios, benefícios e as melhores práticas desse fluxo de trabalho.

O que é TensorFlow.js e por que treinar no navegador?

O TensorFlow.js é uma biblioteca que permite usar APIs familiares do TensorFlow em JavaScript. Com ela, desenvolvedores podem importar modelos já treinados, treinar novos modelos e fazer inferências, tudo no navegador ou em ambientes Node.js. Treinar no navegador traz vantagens interessantes:

  • Ausência de infraestrutura de backend: você não precisa de servidores poderosos ou GPUs de data center; o próprio dispositivo do usuário (smartphone, computador, tablet) resolve o problema.
  • Privacidade de dados: os dados do usuário permanecem localmente no navegador, o que evita tráfego extra ou problemas de privacidade ao enviar dados para servidores remotos.
  • Interação em tempo real: permite criar demos interativas ou aplicações que se adaptam aos dados do usuário em tempo real (por exemplo, personalizar sugestões conforme o usuário digita).
  • Custo computacional reduzido: você aproveita recursos que o usuário já tem (CPU/GPU), potencialmente economizando custos de infraestrutura em nuvem. Em contrapartida, treinar no dispositivo do usuário também tem limitações: geralmente modelos mais simples e conjuntos de dados menores, pois navegadores e dispositivos móveis têm menos memória e poder de processamento que servidores dedicados.

Em outras palavras, ao treinar modelos no navegador, é como se você estivesse ensinando o computador do usuário localmente, ao invés de enviar dados e esperar uma resposta de um servidor distante. Com o auxílio do WebGL, o TensorFlow.js consegue acelerar muitos cálculos lineares usando a GPU do dispositivo, aproximando-se das vantagens de performance encontradas em GPUs dedicadas. Vamos ver na prática como começar.

Configurando o Ambiente TensorFlow.js

Para usar o TensorFlow.js no navegador, não é necessário instalar nada no servidor; basta incluir a biblioteca JavaScript na sua página ou projeto. Existem duas abordagens comuns:

  • Incluindo via <script>: você pode usar o CDN oficial do TensorFlow.js. Por exemplo:

    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>

    Isso carrega a versão mais recente e torna o objeto tf disponível globalmente.

  • Instalando via npm (em projetos com bundler): se estiver usando um build moderno com Webpack, Parcel ou similar, pode instalar pelo npm:

    npm install @tensorflow/tfjs

    Em seguida, importe no seu código JavaScript:

    import * as tf from '@tensorflow/tfjs';

Uma vez incluso, o TensorFlow.js “autodetecta” o melhor backend (conjunto de implementações de operações matemáticas) disponível no dispositivo. Os principais backends suportados no navegador são:

  • WebGL (GPU): usa a API WebGL para executar shaders que realizam as operações matriciais. É tipicamente o mais rápido para modelos moderados a grandes.
  • WASM (WebAssembly): executa código C/C++ compilado para WebAssembly. Pode ser mais rápido que o JavaScript puro em CPUs, especialmente para modelos muito pequenos.
  • CPU (JavaScript): implementa todas as operações usando JavaScript. Serve como último recurso se o dispositivo não suportar WebGL ou WASM.

O TensorFlow.js geralmente escolhe o backend WebGL automaticamente quando disponível. Para conferirmos ou alterarmos manualmente, podemos usar:

console.log('Backend padrão:', tf.getBackend());    // Exibe o backend atual, geralmente 'webgl'.
await tf.setBackend('webgl');                       // Força o uso do WebGL.
console.log('Backend atual:', tf.getBackend());

Obs.: Caso o dispositivo não suporte WebGL (por exemplo, navegadores sem aceleração gráfica), o TF.js vai usar o backend de WASM ou CPU. Em dispositivos móveis antigos, o WebGL pode ter limitações (como float16 em vez de float32), o que pode afetar precisão. Mas no geral, usar WebGL acelera muito os cálculos de ML no navegador.

Criando e Configurando um Modelo de Rede Neural

Com o ambiente pronto, o próximo passo é definir a arquitetura do modelo. O TensorFlow.js oferece a Layers API, similar ao Keras em Python, que simplifica a construção de redes neurais. Os modelos podem ser criados de duas formas:

  • Modelo Sequencial (tf.sequential): ideal para redes lineares em que as camadas são empilhadas em sequência, da entrada à saída.
  • Modelo Funcional (tf.model com tf.layers): para arquiteturas mais complexas, com conexões não lineares. Como vamos focar em exemplos iniciais, usaremos o modelo sequencial.

Veja um exemplo básico de modelo sequencial em JavaScript:

// Cria um modelo sequencial vazio
const model = tf.sequential();

// Adiciona a primeira camada densa (perceptron) com 5 unidades e função de ativação ReLU.
// Suponha que temos 2 características de entrada (inputShape: [2]).
model.add(tf.layers.dense({
  units: 5,
  activation: 'relu',
  inputShape: [2]   // duas características de entrada
}));

// Adiciona uma segunda camada densa de saída com 1 unidade (saída única).
model.add(tf.layers.dense({ units: 1 }));

Nesse exemplo:

  • Camada densa (tf.layers.dense) representa a função $$y = Ax + b$$ onde $A$ e $b$ são parâmetros aprendíveis (pesos e vieses).
  • inputShape: [2] indica que cada exemplo de entrada terá 2 valores.
  • A primeira camada tem ativação 'relu', comum em redes neurais, e produz 5 valores de saída (features ocultas). A camada final tem 1 saída (por exemplo, regressão de um valor).
  • Poderíamos ainda adicionar outras camadas ocultas ou usar diferentes funções de ativação (sigmoid, softmax, etc.), conforme a tarefa (regressão ou classificação).

Após definir as camadas, podemos inspecionar o sumário do modelo:

model.summary();

Isso exibe no console a arquitetura, a forma de saída de cada camada e o número total de parâmetros aprendíveis.

Dica: Em classificações multiclasse, a última camada costuma usar ativação 'softmax' e a perda 'categoricalCrossentropy'. Em regressão, deixe-a linear (sem ativação especial) e use 'meanSquaredError' como função de perda.

Preparando os Dados no Navegador

Para treinar o modelo, precisamos de dados. No navegador, você pode usar dados estáticos (arrays/tensores), dados recebidos via API, ou até imagens da webcam. Os dados devem ser convertidos em objetos tf.Tensor para que o TensorFlow.js possa manipular eficientemente. Alguns métodos úteis:

  • Arrays JavaScript para Tensores: Você pode criar tensores a partir de arrays normais usando tf.tensor, tf.tensor2d, etc. Por exemplo:

    // Exemplo: problemas de regressão linear
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);  // entradas (4 amostras, 1 característica cada)
const ys = tf.tensor2d([3, 5, 7, 9], [4, 1]);  // saídas (4 amostras, 1 valor de saída cada)

    Aqui criamos um conjunto simples onde $y = 2x + 1$. O tensor xs tem shape [4,1] (4 linhas, 1 coluna) e ys também [4,1].

  • Normalização: É comum normalizar os dados (por exemplo, escalar valores entre 0 e 1) antes do treinamento, especialmente imagens (dividir por 255) ou dados com unidades grandes, para melhorar a convergência. Você pode aplicar operações elementares do TensorFlow.js; por exemplo, xs.div(tf.scalar(255)) para normalizar.

  • Divisão em treinamento/teste: Em ML tradicional, separa-se um conjunto de treino e outro de teste. No navegador, você pode simplesmente dividir seus tensores manualmente, por exemplo:

    const split = Math.floor(xs.shape[0] * 0.8);
const trainXs = xs.slice([0, 0], [split, xs.shape[1]]);
const testXs  = xs.slice([split, 0], [xs.shape[0] - split, xs.shape[1]]);
const trainYs = ys.slice([0, 0], [split, ys.shape[1]]);
const testYs  = ys.slice([split, 0], [ys.shape[0] - split, ys.shape[1]]);

    Isso pega os 80% primeiros exemplos para treino, e os 20% restantes para teste.

  • tf.data API (opcional): Para grandes conjuntos de dados ou streams de dados (por exemplo, fluxos de TensorFlow.js com webcam), use a API tf.data. Exemplo simplificado:

    // Suponha que temos um array de objetos JS dataObjects
const dataObjs = [...]; 
const dataset = tf.data.array(dataObjs.map(o => o.features))
                    .zip(tf.data.array(dataObjs.map(o => o.labels)));
await model.fitDataset(dataset.batch(32), { epochs: 10 });

    Isso permite treinar em dados que não cabem completamente na memória do navegador. Para a maioria dos iniciantes, porém, treinar com tensores completos (usando model.fit) é suficiente.

  • Memória e tf.tidy: Durante operações intermediárias, é importante liberar memória para evitar vazamento. O TensorFlow.js não limpa tudo automaticamente, especialmente no backend WebGL. Use tf.tidy(() => { ... }) para envolver blocos de código, garantindo que tensores intermediários sejam descartados. Exemplo:

    tf.tidy(() => {
  const intermediate = xs.square();  // operação temporária
  return model.predict(intermediate);
});
// 'intermediate' é descartado ao sair do tidy.

    Durante o treinamento via model.fit, parte dessa gestão é feita internamente; mas ao fazer manipulações manuais ou loops, cuide de chamar dispose() nos tensores que não precisa mais.

Treinando o Modelo

Com os dados preparados e o modelo configurado, procedemos ao treinamento propriamente dito. Isso envolve três passos principais:

  1. Compilação do modelo: Aqui definimos o otimizador, a função de perda e métricas para monitorar. Exemplo:

    model.compile({
  optimizer: 'sgd',            // otimizador SGD (gradiente descendente simples)
  loss: 'meanSquaredError',    // perda quadrática média, comum em regressão
  metrics: ['mse']            // metricas a exibir (opcional)
});

    Você poderia usar outros otimizadores como 'adam' para treinamentos não-lineares mais complexos. Para classificação, usar 'categoricalCrossentropy' ou 'binaryCrossentropy' costuma ser indicado.

  2. Chamada do treinamento (fit): O método model.fit treina o modelo nos dados fornecidos. Ele aceita um tensor de entrada (ou array de tensores) e um de alvo:

    await model.fit(trainXs, trainYs, {
  epochs: 30,                   // número de épocas (quantas vezes percorrer todo o conjunto de dados)
  batchSize: 16,                // tamanho de lote (quantas amostras processar antes de atualizar pesos)
  validationData: [testXs, testYs],  // opcional: dados de validação para avaliar ao fim de cada época
  callbacks: {
    onEpochEnd: (epoch, logs) => {
      console.log(`Época ${epoch+1}: perda = ${logs.loss.toFixed(4)}`);
    }
  }
});

    Esse código faz o treinamento por 30 épocas, exibindo a perda ao final de cada época. model.fit retorna uma Promise que é resolvida quando o treinamento termina. Importante: como esse processo pode ser pesado (muitos cálculos de matrizes), ele pode bloquear o thread principal se rodar continuamente; portanto, em aplicações reais convém fazer treinamento em Web Worker ou dar pausas, mas para exemplificação direta usamos await.

  3. Avaliação e predição: Após treinar, você pode avaliar a acurácia no conjunto de teste ou simplesmente fazer previsões em novos dados. Por exemplo:

    // Digamos que temos um novo exemplo:
const novoExemplo = tf.tensor2d([[5]], [1, 1]);
const previsao = model.predict(novoExemplo);
previsao.print();  // mostra o resultado no console

    No caso de classificação, você pode interpretar as saídas (por exemplo, usar tf.argMax em probabilidades do softmax).

Em resumo, o processo de treinamento é: alimentar o modelo com dados, calcular a saída, comparar com o valor real (calcular a perda), e ajustar os parâmetros (pesos) para reduzir o erro. Em cada batch de dados, o TensorFlow.js executa internamente os passos de forward pass (predição) e backpropagation (otimização), atualizando os pesos segundo o otimizador escolhido.

  • Etapas simplificadas do treinamento:
    • Obter um lote (batch) de dados de entrada e seus alvos.
    • Fazer o modelo predizer com base nesse lote.
    • Calcular a perda (diferença entre predição e valor real).
    • Usar o otimizador para ajustar os pesos minimizando a perda.
    • Repetir para todos os lotes, várias vezes (épocas), até o modelo convergir.
// Exemplo simples de treinamento (regressão y = 2x + 1):
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([3, 5, 7, 9], [4, 1]);

const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});

// Treina por 50 épocas
await model.fit(xs, ys, { epochs: 50 });
console.log('Treinamento concluído');

// Usa o modelo para prever um novo valor
const output = model.predict(tf.tensor2d([5], [1, 1]));
output.print();  // deverá estar próximo de 11 (2*5+1)

Nesse exemplo, criamos um modelo linear simples sem ativação, compilamos com meanSquaredError e sgd, e treinamos com quatro pontos. Após o treinamento, pedimos ao modelo a predição para x=5. A saída deve ser aproximadamente 11, já que aprendemos a função $y=2x+1$.

Acelerando o Treinamento com WebGL

Uma das grandes forças do TensorFlow.js é utilizar o backend WebGL para acelerar cálculos matemáticos na GPU do dispositivo. A biblioteca armazena os dados de tensores como texturas WebGL e compila operações complexas em shaders que são executados na GPU. Na prática, isso significa que tarefas de aprendizado de máquina – mesmo em navegadores – podem ser muito mais rápidas do que se fossem executadas apenas no processador (CPU). De fato, coisas como multiplicações matriciais em GPUs modernas podem ser dezenas de vezes mais rápidas.

  • Por padrão, a maior parte das operações do TF.js no navegador irá rodar no backend 'webgl' automaticamente (se disponível). Você pode confirmar isso com:

    tf.ready().then(() => console.log('Backend atual:', tf.getBackend()));

    Se retornar "webgl", ótimo. Caso queira forçar:

    await tf.setBackend('webgl');
await tf.ready();
console.log('Rodando em WebGL!');

  • Comparação de performance: Pesquisas e benchmarks internos do TensorFlow.js mostram que o backend WebGL é geralmente muito mais rápido que o backend de CPU puro (às vezes 100x mais rápido em certas operações) (www.tensorflow.org). Em outras palavras, deixar o TF.js usar WebGL pode transformar um loop de treinamento que levaria minutos em algo que leva segundos, dependendo do modelo e do dispositivo.

  • Cuidados com memória: Diferentemente do JavaScript cotidiano, as texturas WebGL não são automaticamente coletadas pelo garbage collector. Portanto, é importante descartar tensores que você não precisa mais, para evitar que a memória GPU esgote. Felizmente, a maioria das APIs de alto nível (como model.fit) já faz parte desse gerenciamento, mas se você criar tensores manualmente sem usar tidy, lembre-se de chamar tensor.dispose() ou colocar dentro de tf.tidy().

  • Limitações do WebGL: Em dispositivos móveis, o WebGL pode aceitar apenas texturas de 16 bits (half float), enquanto a maioria dos modelos usa 32 bits. Isso pode causar pequenas perdas de precisão. Você pode verificar capacidades via:

    const renderFloat32 = tf.ENV.get('WEBGL_RENDER_FLOAT32_ENABLED');
console.log('Suporte a float32:', renderFloat32);

    Se for false, o dispositivo só suporta 16-bit e você deve ter cuidado com problemas de precisão numérica. Além disso, em termos de compatibilidade, todos os navegadores modernos suportam WebGL, mas alguns dispositivos muito antigos ou restritos a modos de “economia de energia” podem desabilitar.

  • WebAssembly (WASM): Como alternativa, o TensorFlow.js também fornece backend de WebAssembly, que roda em CPU mas pode ser mais rápido que o JavaScript puro, especialmente em modelos muito pequenos. Em geral, recomenda-se WebGL para modelos médios a grandes por questão de desempenho.

Em resumo, para obter desempenho máximo no treinamento dentro do navegador, use o backend WebGL. Isso permitirá que operações pesadas de multiplicação de matrizes e convoluções sejam processadas na GPU, mantendo a interface do usuário mais responsiva e reduzindo o tempo de treinamento.

Exemplo Prático Completo

Vamos juntar tudo em um exemplo prático completo. Suponha que queremos treinar um modelo simples no navegador para prever um valor a partir de dois recursos de entrada (uma regressão linear simples). O fluxo será:

  1. Preparar os dados: definimos arrays JS com valores de entrada e saída e convertemos em tensores.
  2. Criar o modelo: uma rede sequencial com camadas densas.
  3. Compilar: definindo otimizador e função de perda.
  4. Treinar: usando model.fit.
  5. Avaliar/prever: usando dados novos.

Exemplo de código:

// 1. Preparar dados de treinamento (simples exemplo x1+x2 = y):
const rawXs = [
  [0, 1],  // x1=0, x2=1
  [1, 1],
  [2, 0],
  [3, 2],
  [4, 3],
];
const rawYs = [
  [1],   // 0+1
  [2],   // 1+1
  [2],   // 2+0
  [5],   // 3+2
  [7],   // 4+3
];
// Converte para Tensores 2D
const xs = tf.tensor2d(rawXs, [rawXs.length, rawXs[0].length]);
const ys = tf.tensor2d(rawYs, [rawYs.length, rawYs[0].length]);

// 2. Criar o modelo sequencial
const model = tf.sequential();
model.add(tf.layers.dense({ units: 4, inputShape: [2], activation: 'relu' }));
model.add(tf.layers.dense({ units: 1 }));

// 3. Compilar o modelo
model.compile({
  optimizer: 'sgd',
  loss: 'meanSquaredError'
});

// 4. Treinar o modelo
await model.fit(xs, ys, {
  epochs: 100,
  batchSize: 2,
  callbacks: {
    onEpochEnd: (epoch, logs) => {
      console.log(`Época ${epoch+1}: perda = ${logs.loss.toFixed(4)}`);
    }
  }
});

// 5. Fazer previsões com dados novos
const novosXs = tf.tensor2d([[5, 5], [10, 2]], [2, 2]);
const preds = model.predict(novosXs);
preds.print();  // Exibe as previsões no console

// Por exemplo, espera-se algo próximo de [10, 12] para [5+5, 10+2] = [10, 12].

Explicação do exemplo:

  • Montamos um conjunto de treinamento onde efetivamente $y = x_1 + x_2$. São 5 exemplos com duas entradas.
  • O modelo sequencial tem duas camadas densas: uma oculta de 4 neurônios com ReLU, e uma de saída linear (1 neurônio).
  • Compilamos com SGD e erro quadrático médio.
  • Treinamos por 100 épocas com batch de 2 exemplos e exibimos a perda após cada época.
  • Por fim, testamos com dois novos pontos. Se o modelo aprendeu bem, ele deverá aproximar 10 e 12 para as entradas [5,5] e [10,2], respectivamente.

Esse é um exemplo didático simples, mas mostra o fluxo completo dentro do navegador. Em um aplicativo real, você exibiria os resultados na interface, porém aqui usamos console.log e print() para ilustrar.

Conclusão

Treinar modelos de aprendizado de máquina diretamente no navegador é hoje uma realidade graças ao TensorFlow.js. Vimos como configurar o ambiente, criar modelos sequenciais, preparar dados, executar o treinamento e acelerar o processo com o backend WebGL para GPU. No navegador ganhamos a vantagem de executarmos o ML no cliente, tornando aplicações web mais interativas e distribuindo a carga computacional.

Pontos-chave deste tutorial:

  • TensorFlow.js permite treinar e executar modelos de ML usando apenas JavaScript no navegador.
  • Montar um modelo envolve definir camadas sequenciais com tf.layers, compilar com otimizador e perda, e chamar model.fit.
  • Os dados precisam ser convertidos para tensores. Use tf.tensor ou APIs de dados (tf.data) para organizar seu conjunto de treinamento.
  • O WebGL é o grande trunfo para desempenho: basta garantir que tf.getBackend() retorne "webgl". Esse backend utiliza a GPU do dispositivo, tornando cálculos matriciais muito mais rápidos do que no CPU puro.
  • Sempre cuide da memória chamando dispose() ou usando tf.tidy quando fizer muitas operações manualmente, para não sobrecarregar a GPU ou a RAM do navegador.

Próximos Passos

Como próximos passos, você pode explorar:

  • Modelos pré-treinados e Transfer Learning: O TensorFlow.js inclui modelos já prontos (ex: classificação de imagens, detecção de objetos). Além disso, é possível usar transferência de aprendizado para ajustar um modelo existente ao seu caso.
  • TensorFlow.js com WebGPU: A próxima fronteira no navegador é a API WebGPU (mais moderna que WebGL). O TF.js já tem fase experimental de backend WebGPU, que promete ainda mais desempenho em GPUs modernas.
  • Integração avançada: Conectar o treinamento no navegador com elementos da página (por exemplo, imagens de canvas ou webcam com tf.data.webcam) e visualização dos resultados com TensorFlow.js Visor (tfvis).
  • Node.js Backend: Se você precisar de treinamento pesado, também pode usar TensorFlow.js em Node.js com o backend nativo (baseado em C++ TensorFlow), que é muito mais rápido e adequado a servidores. No entanto, aplicações que rodam no cliente (navegador) se beneficiam da capacidade de não dependerem de servidor algum em suas inferências ou aprendizados básicos.

No cenário atual, aplicativos de ML on-edge e no navegador crescem exponencialmente. Com a popularização de recursos como o WebGL e a nova WebGPU, o futuro do ML próximo ao usuário é muito promissor. Teste, experimente e inove: o usuário final tem agora uma ferramenta poderosa na palma da mão do teclado. Boa codificação com TensorFlow.js!

Quer aprender mais sobre Programação?

Você acabou de ganhar 1 hora com a minha equipe para uma call exclusiva! Vamos entender o seu momento e te mostrar o caminho para se tornar um programador de sucesso. Clique no botão abaixo e agende agora mesmo!

Agendar minha call gratuita