![HEADER-Google-Developers-[GD-BLOG]-7-dos-and-don'ts-of-using-ML-on-the-web-with-MediaPipe](https://storage.googleapis.com/gweb-developer-goog-blog-assets/images/HEADER-Google-Developers-GD-BLOG-7-dos-and-dont.original.png)
Se você é desenvolvedor da Web e deseja trazer o poder do aprendizado de máquina (ML, na sigla em inglês) para seus apps da Web, confira o MediaPipe Solutions! Com o MediaPipe Solutions, você pode implantar tarefas personalizadas e resolver problemas comuns de ML com apenas algumas linhas de código. Veja os guias na documentação e experimente as demonstrações da Web no Codepen para ver como é simples começar. Embora o MediaPipe Solutions lide com grande parte da complexidade do ML na Web, ainda há algumas questões a serem levadas em consideração que vão além das práticas recomendadas habituais de JavaScript. Compilei tudo aqui nesta lista do que fazer e não fazer. Continue lendo para ver algumas boas dicas!
Como desenvolvedor da Web, você tem o hábito de tornar um app o mais leve possível para garantir a melhor experiência do usuário. Quando há itens maiores para carregar, você já sabe que deve fazer o download deles de uma forma cuidadosa e que permita ao usuário interagir com o conteúdo rapidamente, em vez de ter de esperar por um longo download. Estratégias como a quantização tornaram os modelos de ML menores e acessíveis a dispositivos de borda, mas ainda grandes o suficiente para não serem empacotados em apps da Web. Armazene os modelos na solução de armazenamento em nuvem de sua escolha. Assim, quando você inicializar a tarefa, será feito o download do modelo e do binário WebAssembly, que depois serão inicializados. Após o carregamento da primeira página, use o armazenamento local ou o IndexedDB para armazenar em cache o modelo e o binário, de modo que os carregamentos de página futuros sejam executados ainda mais rapidamente. Você pode ver uma amostra disso neste app de exemplo de caixa eletrônico sem contato no GitHub.
A inicialização de tarefas pode levar algum tempo, dependendo do tamanho do modelo, da velocidade da conexão e do tipo de dispositivo. Portanto, é uma boa ideia inicializar a solução antes da interação do usuário. Na maioria dos exemplos de código no Codepen, a inicialização ocorre no carregamento da página. Lembre-se de que esses exemplos devem ser os mais simples possível para que você consiga entender o código e aplicá-lo a seu próprio caso de uso. Talvez inicializar o modelo no carregamento da página não faça sentido para você. Basta se concentrar em encontrar o local certo para ativar a tarefa de modo que o processamento fique oculto para o usuário.
Após a inicialização, você deve esquentar a tarefa transmitindo uma imagem de marcador de posição por meio do modelo. Este exemplo mostra uma função para executar um canvas de 1x1 pixel usando a tarefa Pose Landmarker:
function dummyDetection(poseLandmarker: PoseLandmarker) {
const width = 1;
const height = 1;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillRect(0, 0, width, height);
poseLandmarker.detect(canvas);
}
Uma das minhas partes favoritas do JavaScript é a coleta de lixo automática. Na verdade, não me lembro da última vez que me preocupei com o gerenciamento de memória. Espero que você saiba um pouco a respeito da memória, pois precisará disso para aproveitar ao máximo sua tarefa do MediaPipe. O MediaPipe Solutions para a Web usa o WebAssembly (WASM) para executar código C++ no navegador. Você não precisa conhecer muito de C++, mas é bom saber que ele faz você eliminar seu próprio lixo. Se você não liberar a memória não utilizada, verá que a página da Web usará cada vez mais memória ao longo do tempo, o que pode causar problemas de desempenho ou até mesmo levar a falhas.
Quando você finalizar a solução, libere os recursos usando o método .close().
Por exemplo, é possível criar um reconhecedor de gestos usando o seguinte código:
const createGestureRecognizer = async () => {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
);
gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
baseOptions: {
modelAssetPath:
"https://storage.googleapis.com/mediapipe-models/gesture_recognizer/gesture_recognizer/float16/1/gesture_recognizer.task",
delegate: "GPU"
},
});
};
createGestureRecognizer();
Ao finalizar o reconhecimento dos gestos, descartamos o reconhecedor usando o método close():
gestureRecognizer.close();
Cada tarefa tem um método close, portanto use-o quando isso for relevante! Algumas tarefas têm métodos close() para os resultados retornados, então consulte os documentos da API para obter detalhes.
Ao decidir como será sua solução ou personalizá-la, é uma boa ideia testá-la no MediaPipe Studio antes de escrever seu próprio código. O MediaPipe Studio é um aplicativo baseado na Web para avaliar e personalizar modelos e pipelines de ML no dispositivo para aplicativos. O app permite que você teste rapidamente as soluções do MediaPipe no navegador com seus próprios dados e modelos de ML personalizados. Cada demonstração de solução também permite experimentar configurações de modelos quanto ao número total de resultados, ao limite mínimo de confiança para relatar resultados e muito mais. Você verá que isso é muito útil ao personalizar soluções para analisar o desempenho do modelo sem a necessidade de criar uma página da Web de teste.
É sempre importante testar os apps da Web em vários dispositivos e navegadores para garantir que eles funcionem conforme o esperado, mas acho que vale a pena lembrar o teste deve ser feito logo cedo e com frequência em diversas plataformas. Você também pode usar o MediaPipe Studio para testar dispositivos e saber imediatamente se uma solução funcionará nos dispositivos dos usuários.
Cada tarefa lista um ou mais modelos recomendados. Por exemplo, a tarefa de detecção de objetos lista três modelos diferentes, cada um com benefícios e desvantagens em relação a velocidade, tamanho e acurácia. Pode ser tentador pensar que o mais importante é escolher o modelo com a maior acurácia, mas isso compromete a velocidade e aumenta o tamanho do modelo. Dependendo do caso de uso, os usuários podem se beneficiar mais de um resultado mais rápido do que de um mais acurado. A melhor maneira de comparar as opções de modelos é no MediaPipe Studio. Sei que isto já está começando a parecer um anúncio, mas ele é realmente útil!
Tem alguma dica do que fazer e do que não fazer quanto ao ML na Web que acha que eu deixei de mencionar? Tem dúvidas sobre como começar? Ou tem um projeto legal que deseja compartilhar? Entre em contato comigo no LinkedIn e me conte tudo!
