Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado.
O aprendizado de máquina é uma tecnologia fundamental no mundo moderno. Os computadores podem aprender a reconhecer imagens, criar obras de arte e até escrever seu próprio código, tudo com o mínimo de intervenção humana.
Mas como funciona o aprendizado de máquina e como você mesmo pode usá-lo?
O que é aprendizado de máquina?
O aprendizado de máquina é um conceito relativamente simples. Os sistemas de computador podem aprender e se adaptar analisando padrões de dados existentes a partir de conjuntos de informações. Isso geralmente é feito sem instruções explícitas de humanos.
Um bom exemplo vem na forma de ferramentas de assistente virtual. Siri, Cortana e Google Assistant fazem uso extensivo de aprendizado de máquina para entender a fala humana. Isso começa com um conjunto de gravações de áudio existentes, mas essas ferramentas também podem aprender com as interações que têm com você. Isso permite que eles melhorem por conta própria.
O que é ml5.js?
A maioria dos algoritmos e ferramentas de aprendizado de máquina usa R ou Python para seu código, mas ml5.js é diferente. Atuando como uma interface para a biblioteca Tensorflow.js do Google, o ml5.js é um projeto de código aberto que coloca o aprendizado de máquina nas mãos dos desenvolvedores de JavaScript.
Você pode começar a usar ml5.js para seu próprio aplicativo da web incluindo um único script externo em seu HTML.
Introdução ao aprendizado de máquina: o processo de aprendizado
O treinamento de um algoritmo de aprendizado de máquina leva tempo. Os computadores aprendem muito mais rápido que os humanos, mas também aprendem de maneiras diferentes. Felizmente, porém, ml5.js vem com uma seleção de modelos pré-treinados para que você possa pular esta etapa.
Aprendizado como os algoritmos de aprendizado de máquina treinam é uma ótima maneira de entender melhor ferramentas como essa.
O ml5.js facilita a criação de uma ferramenta de classificação de imagens para execução em seu site. A página HTML neste exemplo contém um campo de entrada de arquivo para selecionar uma imagem. As imagens carregadas são exibidas dentro de um elemento HTML preparado para permitir que ml5.js as verifique e identifique.
Etapa 1: incluir a biblioteca ml5.js
Este projeto requer duas bibliotecas para funcionar: ml5.js e p5.js. ml5.js é a biblioteca de aprendizado de máquina, enquanto p5.js permite trabalhar com imagens corretamente. Você precisa de duas linhas de HTML para adicionar essas bibliotecas:
<script origem ="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script origem ="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>Passo 2: Crie alguns elementos HTML
Em seguida, é hora de criar alguns elementos HTML. O mais importante é um div com um ID e uma classe denominada imageResult que armazenará o resultado final:
<h1>Classificador de imagem MakeUseOf</h1><h2>Clique "Escolher arquivo" para adicionar uma imagem</h2>
<classe div ="resultado da imagem" id="resultado da imagem"></div>
Em seguida, adicione um elemento de entrada de arquivo para coletar a imagem para o programa classificar.
<classe div ="imageInput">
<tipo de entrada ="arquivo"
oninput="uploadedImage.src=janela. URL.createObjectURL(this.files[0]); startImageScan()">
</div>
A entrada escuta um evento oninput e executa duas instruções em resposta, separadas por um ponto e vírgula. A primeira cria uma URL de objeto para a imagem, que permite trabalhar com os dados sem precisar carregá-los em um servidor. A segunda chama uma função startImageScan() que você criará na próxima etapa.
Finalmente, adicione um elemento img para exibir a imagem que o usuário carregou:
<classe img ="imagem carregada" id="imagem carregada" />Etapa 3: criar uma função JS de digitalização de imagem
Agora que você tem um pouco de HTML, é hora de adicionar um pouco de JS à mistura. Comece adicionando uma variável const para armazenar o elemento imageResult que você criou na última etapa.
const elemento = documento.getElementById("imageResult");Em seguida, adicione uma função chamada startImageScan() e, dentro dela, inicialize o classificador de imagem ml5.js usando o MobileNet.
Siga isso com o comando classifier.classify. Passe a ele uma referência ao elemento uploadedImage que você adicionou anteriormente, juntamente com uma função de retorno de chamada para processar o resultado.
funçãostartImageScan() {
// Criar a variávelpara inicializar o classificador de imagem ml5.js com MobileNet
classificador const = ml5.imageClassifier('MobileNet');
classificador.classify (document.getElementById("imagem carregada"), imageScanResult);
element.innerHTML = "...";
}Etapa 4: criar uma função de exibição de resultados
Você também precisa de uma função para exibir os resultados da classificação de imagem que você executou. Essa função contém uma instrução if simples para verificar se há algum erro.
funçãoimageScanResult(erro, resultados) {
se (erro) {
element.innerHTML = erro;
} outro {
deixar num = resultados[0].confiança * 100;
element.innerHTML = resultados[0].label + "<br>Confiança: " + num.toFixed (0) + "%";
}
}Passo 5: Junte tudo
Finalmente, é hora de juntar todo esse código. É importante estar atento ao
,