Temos uma ótima notícia! Você criou um aplicativo de IA da Web incrível que executa modelos de machine learning diretamente no dispositivo de um usuário. Ele é executado inteiramente no navegador da Web do lado do cliente, sem depender da nuvem. Esse design no dispositivo melhora a privacidade do usuário, melhora a performance e reduz significativamente os custos.
No entanto, há um obstáculo. Seu modelo do TensorFlow.js pode operar em CPUs (WebAssembly) e GPUs mais potentes (por meio do WebGL e do WebGPU). A pergunta é: como automatizar os testes do navegador de forma consistente com o hardware selecionado?
Manter a consistência é crucial para comparar o desempenho do modelo de machine learning ao longo do tempo, à medida que você os itera e melhora, antes da implantação para usuários reais usarem nos dispositivos deles.
Configurar um ambiente de teste consistente com GPUs pode ser mais difícil do que o esperado. Nesta postagem do blog, compartilhamos os problemas que enfrentamos e como os resolvemos para que você possa melhorar o desempenho do seu aplicativo.
Isso não é apenas para desenvolvedores de IA da Web! Se você estiver trabalhando com jogos na Web ou gráficos, esta postagem também é valiosa para você.
O que há em nossa caixa de ferramentas de automação
Veja o que estamos usando:
- Ambiente: um notebook do Google Colab com base em Linux conectado a uma GPU NVIDIA T4 ou V100. É possível usar outras plataformas de nuvem, como o Google Cloud (GCP), se preferir.
- Navegador: o Chrome oferece suporte à WebGPU, um sucessor poderoso do WebGL, que leva os avanços das APIs modernas de GPU para a Web.
- Automação: o Puppeteer é uma biblioteca do Node.js que permite controlar navegadores de maneira programática com JavaScript. Com o Puppeteer, podemos automatizar o Chrome no modo headless, o que significa que o navegador é executado em um servidor sem uma interface visível. Estamos usando o novo modo headless aprimorado, não o formato legado.
Verificar o ambiente
A melhor maneira de conferir se a aceleração de hardware está ativada no Chrome é digitar
chrome://gpu na barra de endereço. É possível
executar o equivalente com o Puppeteer
de maneira programática com console.log ou salvar o relatório completo em PDF para verificar manualmente:
/* Incomplete example.js */
import puppeteer from 'puppeteer';
// Configure launch parameters: Expands later
const browser = await puppeteer.launch({
headless: 'new',
args: ['--no-sandbox']
});
const page = await browser.newPage();
await page.goto('chrome://gpu');
// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({ path: './gpu.pdf' });
await browser.close();
Abra chrome://gpu para ter os seguintes resultados:
| Status do recurso gráfico | |
|---|---|
| OpenGL: | Desativada |
| Vulkan: | Desativada |
| WebGL: | Somente software, aceleração de hardware indisponível. |
| WebGL2 | Somente software, aceleração de hardware indisponível. |
| WebGPU: | Desativada |
|
Problemas detectados. |
|
Não é um bom começo. É bastante claro que a detecção de hardware falhou. WebGL, WebGL2 e WebGPU são essencialmente desativadas ou apenas software. Não estamos sozinhos nesse problema. Há várias discussões on-line de pessoas em situação semelhante, inclusive nos canais oficiais de suporte do Chrome (1) (2).
Ativar compatibilidade com WebGPU e WebGL
Por padrão, o Headless Chrome desativa a GPU. Para ativá-lo no Linux, aplique todas as sinalizações a seguir ao iniciar o Headless Chrome:
- A flag
--no-sandboxdesativa o sandbox de segurança do Chrome, que isola o processo do navegador do restante do sistema. Não é possível executar o Chrome como raiz sem esse sandbox. - A sinalização
--headless=newexecuta o Chrome com o novo e aprimorado modo headless, sem nenhuma interface visível. - A flag
--use-angle=vulkaninstrui o Chrome a usar o back-end do Vulkan para ANGLE, que converte chamadas do OpenGL ES 2/3 em chamadas da API Vulkan. - A flag
--enable-features=Vulkanativa o back-end gráfico da Vulkan para composição e varredura no Chrome. - A sinalização
--disable-vulkan-surfacedesativa a extensão de instância vulkanVK_KHR_surface. Em vez de usar uma cadeia de troca, a Bit blit é usada para o resultado de renderização presente na tela. - A flag
--enable-unsafe-webgpuativa a API WebGPU experimental no Chrome no Linux e desativa a lista de bloqueio de adaptadores.
Agora, combinamos todas as mudanças que fizemos até agora. Veja o script completo.
/* Complete example.js */
import puppeteer from 'puppeteer';
// Configure launch parameters
const browser = await puppeteer.launch({
headless: 'new',
args: [
'--no-sandbox',
'--headless=new',
'--use-angle=vulkan',
'--enable-features=Vulkan',
'--disable-vulkan-surface',
'--enable-unsafe-webgpu',
]
});
const page = await browser.newPage();
await page.goto('chrome://gpu');
// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({path: './gpu.pdf'});
await browser.close();
Execute o script novamente. Nenhum problema da WebGPU é detectado, e o valor muda de desativado para apenas software.
| Status do recurso gráfico | |
|---|---|
| OpenGL: | Desativada |
| Vulkan: | Desativada |
| WebGL: | Somente software, aceleração de hardware indisponível. |
| WebGL2 | Somente software, aceleração de hardware indisponível. |
| WebGPU: | Somente software, aceleração de hardware indisponível. |
No entanto, a aceleração de hardware ainda não está disponível, e a GPU NVIDIA T4 não é detectada.
Instalar os drivers de GPU corretos
Investigamos mais detalhadamente a saída do chrome://gpu, com alguns especialistas em GPU
da equipe do Chrome. Encontramos problemas com os drivers padrão instalados na instância do
Linux Colab,
que causaram problemas com o Vulkan, fazendo com que o Chrome não detectasse a
GPU NVIDIA T4 no nível GL_RENDERER, conforme mostrado na saída a seguir. Isso
causa problemas com o Headless Chrome.
| Informações do motorista | |
|---|---|
| GL_RENDERER | ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE)), driver SwiftShader-5.0.0) |
Portanto, a instalação dos drivers corretos que eram compatíveis corrige o problema.
| Informações do motorista | |
|---|---|
| GL_RENDERER | ANGLE (NVIDIA Corporation, Versa T4/PCIe/SSE2, OpenGL ES 3.2 NVIDIA 525.105.17) |
Para instalar os drivers corretos, execute os comandos a seguir durante a instalação. As
últimas duas linhas ajudam você a registrar as saídas do que os drivers da NVIDIA detectam junto
com vulkaninfo.
apt-get install -y vulkan-tools libnvidia-gl-525// Verify the NVIDIA drivers detects along with vulkaninfonvidia-smivulkaninfo --summary
Agora, execute o script novamente e o resultado será o seguinte. 🎉
| Status do recurso gráfico | |
|---|---|
| OpenGL: | Ativado |
| Vulkan: | Ativado |
| WebGL: | Hardware acelerado, mas com desempenho reduzido. |
| WebGL2 | Hardware acelerado, mas com desempenho reduzido. |
| WebGPU: | Hardware acelerado, mas com desempenho reduzido. |
Com o uso dos drivers e sinalizações corretos ao executar o Google Chrome, agora oferecemos compatibilidade com WebGPU e WebGL usando o novo e brilhante modo headless.
Nos bastidores: a investigação da nossa equipe
Depois de muita pesquisa, não encontramos métodos de trabalho para o ambiente que precisávamos executar no Google Colab, embora houvesse algumas postagens esperando que funcionassem em outros ambientes, o que foi promissor. No fim das contas, não conseguimos replicar o sucesso deles no ambiente do Colab NVIDIA T4, porque tivemos dois problemas principais:
- Algumas combinações de sinalizações permitem a detecção da GPU, mas não o uso real dela.
- Exemplos de soluções funcionais de terceiros usavam a antiga versão headless do Chrome, que em algum momento será descontinuada e substituída pela nova versão. Precisávamos de uma solução que funcionasse com o novo Headless Chrome para se preparar melhor para o futuro.
Confirmamos o baixo uso da GPU executando uma página da Web de exemplo do TensorFlow.js para reconhecimento de imagens, em que treinamos um modelo para reconhecer amostras de roupas (uma espécie de "hello world" de machine learning).
Em uma máquina normal, 50 ciclos de treinamento (conhecidos como períodos) são executados em menos de 1 segundo cada. Ao chamar o Headless Chrome no estado padrão, poderíamos registrar a saída do Console JavaScript na linha de comando do lado do servidor do Node.js para ver a velocidade desses ciclos de treinamento.
Como esperado, cada período de treinamento levou muito mais tempo do que o esperado (vários segundos), o que sugere que o Chrome voltou à antiga execução de CPU JS em vez de utilizar a GPU:
Depois de corrigir os drivers e usar a combinação certa de sinalizações para o Headless Chrome, executar novamente o exemplo de treinamento do TensorFlow.js resulta em períodos de treinamento muito mais rápidos.
Resumo
A IA da Web cresceu exponencialmente desde a criação, em 2017. Com tecnologias de navegador, como WebGPU, WebGL e WebAssembly, as operações matemáticas de um modelo de machine learning podem ser ainda mais aceleradas no lado do cliente.
Desde 2023, o TensorFlow.js e o MediaPipe Web passaram de mais de 1 bilhão de downloads de modelos e bibliotecas, um marco histórico e um sinal de como os desenvolvedores e engenheiros da Web estão mudando para adotar a IA na próxima geração de apps da Web para criar soluções verdadeiramente incríveis.
Ter sucesso no uso traz grandes responsabilidades. Nesse nível de uso em sistemas de produção, surge a necessidade de testar modelos de IA do lado do cliente, baseados em navegador em um verdadeiro ambiente de navegador, enquanto também são escalonáveis, automatizáveis e dentro de uma configuração de hardware padronizada conhecida.
Ao aproveitar o poder combinado do novo Headless Chrome e do Puppeteer, é possível testar com confiança essas cargas de trabalho em um ambiente padronizado e replicável, garantindo resultados consistentes e confiáveis.
Conclusão
Um guia explicativo está disponível na nossa documentação para que você possa testar a configuração completa por conta própria.
Se você achou isso útil, deixe um comentário no LinkedIn, X (antigo Twitter) ou em qualquer rede social que você use usando a hashtag #WebAI. Seria ótimo saber o que você tem para que possamos escrever mais coisas como esta no futuro.
Adicione uma estrela ao repositório do GitHub para receber atualizações futuras.
Agradecimentos
Agradecemos imensamente a todos da equipe do Chrome que ajudaram a depurar os problemas de driver e WebGPU que enfrentamos nessa solução, com um agradecimento especial a Jecelyn Yeen e Alexandra White por ajudarem a escrever esta postagem do blog. Agradecemos a Yuly Novikov, Andrey Kosyakov e Alex Rudenko, que foram fundamentais na criação da solução final e funcional.