Conhecida como uma biblioteca amigável para machine learning, ml5.js é uma das alternativas mais acessíveis para você que deseja se aventurar no mundo do Machine Learning. Meses atrás eu descobri esta biblioteca web através do canal coding train.
O que é machine Learning?
Antes de entramos em detalhe se você nunca ouviu falar em Machine Learning, algo que entrou no hype na computação com uma série de recursos possíveis graças a computação na nuvem e a infinidade de dados que possuímos atualmente, mas Machine Learning existe na computação desde a década de 40.
Quando umas das definições mais clássicas foram criadas por Arthur Samuels:
É o campo de estudo onde são dados aos computadores a capacidade de aprender algo sem ser explicitamente programado.
Uma ótima definição feita no canal coding train com uma simples comparação na programação clássica temos o seguinte algoritmo:
console.log(“lado direito”);
} else {
console.log(“lado esquerdo”);
}
Code language: JavaScript (javascript)
Já com Machine Learning passamos uma série de dados:
300 – direita401 – direita210 – direita100 – esquerda87 – esquerda24 – esquerda
A partir dessa série de dados o Machine Learning vai analisar esses dados e tentar fazer uma previsão de dados futuros nesse caso a quantidade de amostra é importante para o sucesso da nossa aplicação.
Nos tutoriais sobre ML5.js vamos falar muito sobre três items:
Redes neurais — os algoritmos responsáveis por processar tarefas de Machine Learning, o de temos uma entrada de dados e fazemos uma série de cálculos para ter uma saída esperada. Para identificar padrões específicos.modelos pré-treinados — modelos pre-treinados é a parte que iremos abordar 90% dos casos por que são os items em mais evidência do momento, utilizado pelas grandes empresas para identificar usuários, moderação de texto, reconhecimento de voz entre outras funcionalidades.data sets — são os grupos de dados que utilizamos para treinar os nossos modelos.
Baseado nessa rápida de alguns pontos-chave, agora vamos falar sobre ML5, a idéia é criar mais posts sobre o assunto assim quando alguns pontos dos Machine Learning forem abordados traremos mais descrições.
ML5.js
Ml5.js foi construída em cima do tensorFlow.js que possibilita o uso Machine Learning na web com o processamento de dados através da GPU, geralmente utilizado para o processamento gráfico, mas o tensorFlow.js utiliza desse recurso para não afetar o processamento da CPU.
Com ml5.js visa atingir uma audiência que trata machine learning em mais alto nível desenvolvedores web e artistas. A biblioteca possui algoritmos e modelos que realizam a classificação de três categorias de dados de imagem, sons e textos.
Para cada grupo temos uma série de funções com diferentes funcionalidades, por exemplo, a função imageClassifier() através de redes neurais conseguimos reconhecer o conteúdo da imagem retornando um objeto com informações sobre a imagem vindo de um modelo pre-treinado
Com a função imageClassifier podemos treinar o nosso próprio modelo. Outra função interessante é poseNet(), com ela conseguimos identificar poses humanas, ela pode identificar uma única pose ou múltiplos integrantes.
Geralmente temos 10 funções para classificação de imagens e 2 funções para classificação de som e 4 funções para identificação de texto.
Tensorflow.js
É uma biblioteca criada pelo Google para trabalhar Machine Learning no JavaScript, foi construído baseado no TensorFlow biblioteca escrita em Python. Com tensorFlow.js podemos utilizar modelos pré-treinados, para classificação de imagens, detecção de objetos, detecção de texto tóxico e reconhecimento de comandos por voz.
Ou treinar o nosso próprio modelo, ele é uma biblioteca base do ML5.js possui uma estrutura mais complexa que o ML5.js.
Exemplo prático de aprendizado de máquina com Javascript
Agora que temos uma introdução desses três itens-chave faremos o nosso primeiro exercício com ML5.js, quando escrevi esse tutorial a lib estava na versão 0.3.1, agora escolheremos uma foto para testar com ml5.js, sinta-se a vontade para escolher a sua foto:
Agora temos a nossa imagem criará o nosso primeiro classificador de imagens:
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>ML5JS project</title>
<script src=“https://unpkg.com/ml5@0.3.1/dist/ml5.min.js”></script>
</head>
<body>
<img src=“./assets/dublin.jpg” id=“foto” />
<script>
// Passo 1: Criar uma classificador de imagems com mobileNet
const classifier = ml5.imageClassifier(‘MobileNet’, onModelReady);function onModelReady() {
// Passo 2: Selecionar uma image
const img = document.querySelector(“#foto”)// Passo 3: Fazer a predicção
let prediction = classifier.predict(img, gotResults);
}// Passo 4: Fazer algo quando tivemos o resultado!
function gotResults(err, results) {
console.log(results);
// e aqui acontece toda a mágica
}
</script>
</body>
</html>
Code language: HTML, XML (xml)
No código acima temos exemplo fazemos a classificação da imagem que escolhemos acima, primeiramente fazemos o carregamento da lib em uma CDN, após adicionamos a imagem com uma tag img no nosso markup, temos uma tag script com o código que irá analisar a nossa imagem.
Na tag script o primeiro comando faz a chamada de uma função imageClassifier na biblioteca ML5 passando dois parâmetros:
modelo – nesse caso utilizaremos o mobileNet esse modelo pre-treinado está na nuvem ele possui mais de 14 mil imagens no seu datasetfunção de callback – o segundo parâmetro a função de callback que chamaremos quando o nosso classificador de imagens estiver pronto.
Quando o nosso modelo estiver pronto chamaremos a função onModelReady dentro dela selecionamos a imagem que queremos analisar e com o nosso classificador de imagens(classifier) requisitamos a previsão da imagem.
Novamente passando dois parâmetros a imagens que analisaremos e a função de callback.
Quando executamos o nosso código num navegador o resultado será o seguinte:
Um resultado meio estranho se traduzirmos o resultado temos label como “mastro” ou “poste” com confidência de 0.76 ou seja 76%. Como podemos ver temos uma farbrica no fundo, com duas chaminés.
A escolha da imagem foi proposital para a gente entender como funciona a análise de imagens, como falamos anteriormente MobileNet é um modelo pré-treinado, mas ele tem uma base de 14 mil imagens o problema nessa caso será que o dentro dessas 14 mil imagens não treinamos o nosso modelo para identificar fábricas.
Se fizermos um segundo teste com essa imagem:
O resultado será o seguinte:
Agora temos o resultado classificado como “beer glass”(copo de cerveja) com uma confidência de 94%, então como podemos ver não existe uma mágica por trás do Machine Learning.
Com isso entendemos que precisão é baseada na quantidade de informação em que o meu dataset detém. Por isso empresas que detém uma grande base de informação conseguem aplicar a tecnologia a várias soluções.
Caso queira conferir mais tutoriais sobre JavaScript aqui confira o link: https://blog.fellyph.com.br/category/javascript/
Para esse post vamos ficando por aqui a ideia que em breve estarei a postar um vídeo no meu canal. Se ainda não segue o canal aqui está o link: https://www.youtube.com/c/FellyphCintra/videos
Este artigo foi importado automaticamente por fazer parte do Planetário Dev. Quer fazer parte deste HUB de conteúdos? Faça parte do Planetário e veja as vantagens.
Não tem site ou blog? Seja um autor do site e ainda pode ser remunerado.
Leia também: