Não Hotdog com Keras e TensorFlow.js

Valeri Alexiev Blocked Desbloquear Seguir Seguindo 29 de outubro

Se você estava confuso sobre se algo era um cachorro-quente ou não, não se preocupe! Eu tenho o aplicativo da web só para você!

“Sanduíche de salsicha com mostarda” por Jonathan Larson em Unsplash

Neste breve tutorial, vou orientá-lo no treinamento de um modelo de Keras para classificação de imagens e, em seguida, usar esse modelo em um aplicativo da Web usando o TensorFlow.js. O problema que vamos resolver é Não Hotdog : dada uma imagem, nosso modelo terá que classificar corretamente o objeto como um hotdog ou não um hotdog. Esta tarefa de classificação não é particularmente interessante, mas para este tutorial, vamos nos concentrar mais no processo de usar um modelo Keras pré-treinado usando o Tensorflow.js.

Treinando um modelo de Keras

Vamos começar construindo nosso conjunto de dados. Eu usei o utilitário de download de imagens do Google , mas você pode usar o que preferir. Instabot é outra boa opção. Apenas certifique-se de ter algumas centenas de imagens para as duas classes e divida-as em conjuntos de treinamento, validação e teste no formato que Keras espera:

Trending AI Articles:

1. Construindo uma API de detecção de face do Django POST usando OpenCV e Haar Cascades

2. Aprendendo com os erros com o Hindsight Experience Replay

3. Como evitar o viés na aprendizagem de máquina

4. Workshop de AI e PNL

Em seguida, criaremos uma rede profunda simples para treinar no conjunto de dados que temos. A rede neural que usei é composta de 3 pedaços de convoluções com ativações de ReLU e camadas de maxpool após elas. No topo, temos duas camadas totalmente conectadas com uma ativação ReLU, uma camada de dropout e um sigmoid para classificação binária.

Usaremos a entropia cruzada binária como a função loss e usaremos o RMSProp como algoritmo de otimização. Nós treinamos por 50 épocas para alcançar uma precisão de ~ 93% no conjunto de validação, o que é bom o suficiente para os propósitos deste tutorial. Para treinar o modelo sozinho ou brincar com o código, confira o caderno aqui . O código é largamente baseado nas primeiras partes deste tutorial de Keras .

Uma vez que temos um modelo treinado, precisamos nos certificar de salvá-lo no disco antes de prosseguirmos para a próxima seção:

 model.save ('simplemodel.h5') 

Certifique-se de usar o método correto para salvar o modelo. Keras fornece vários métodos diferentes para salvar modelos:

  • model.save_weights('<filename>') salvará apenas os pesos do modelo;
  • model.to_json() / model.to_yaml() salvará a arquitetura no formato json ou yaml;
  • model.save('<filename'>) salvará os pesos, a arquitetura e até mesmo o estado do otimizador para que o treinamento possa ser retomado;

Precisamos usar o último método porque, sem surpresa, o TensorFlow.js precisa dos pesos e da arquitetura do nosso modelo antes de poder utilizá-lo.

Convertendo um Modelo Keras em um Modelo TensorFlow.js

Agora que temos o modelo salvo, instale o pacote do Python tensorflowjs e execute o seguinte comando:

 tensorflowjs --input_format keras <caminho-para-h5-arquivo> <caminho-para-dir> 

Alternativamente, poderíamos ter usado a API do Python tensorflowjs para salvar o modelo diretamente como um modelo TensorFlow.js:

 tensorflowjs.converters.save_keras_model (model, model_dir) 

Em ambos os casos, agora devemos ter vários arquivos em nosso diretório de modelo: um arquivo model.json e vários arquivos de peso em formato binário. É importante observar que essas conversões são suportadas apenas para classes e métodos Keras padrão. Camadas ou métricas personalizadas não podem ser convertidas com segurança de Python para JavaScript.

Usando um modelo pré-treinado no TensorFlow.js

Depois que o modelo for convertido, vamos usá-lo em um pequeno aplicativo da web . No lado HTML das coisas, simplesmente teremos um elemento de seleção de arquivo image_upload , um elemento de image para mostrar a imagem selecionada e um div de result para mostrar a classificação do modelo.

O lado do JavaScript das coisas é um pouco mais complicado. Vamos dar uma olhada no código e, em seguida, podemos percorrê-lo:

Primeiro, começamos carregando nosso modelo e garantimos que realmente esperamos que a operação seja concluída usando o await :

 const model = await tf.loadModel ('./ model / model.json'); 

Em seguida, precisamos definir um manipulador de eventos que responda ao seletor de arquivos que está sendo usado. Usaremos a API FileReader definindo outro retorno de chamada quando uma imagem for carregada e disparar o carregamento real da imagem usando readAsDataURL(...) .

 document.getElementById ('image_upload'). onchange = function (ev) { 
var f = ev.target.files [0];
var fr = new FileReader ();
 var makePrediction = função assíncrona (img) {...}; 
var fileReadComplete = function (ev2) {...};
 fr.onload = fileReadComplete; 

fr.readAsDataURL (f);
}

Depois que o arquivo for lido, mostraremos a imagem em nossa página e depois criaremos um objeto Image que será passado para a função de previsão real:

 var fileReadComplete = function (ev2) { 
document.getElementById ('image'). src = ev2.target.result;
var img = novo Image ();
img.src = ev2.target.result;
makePrediction (img);
};

Neste ponto, temos que garantir que o objeto Image esteja pronto ou o restante do código não seja feliz. É por isso que usaremos o lambda de wait que definimos no topo do nosso código, para garantir que a função espere até que a imagem esteja pronta para ser usada.

Então, temos que converter nosso objeto Image em um tensor com a formatação correta. Usaremos o fromPixels(...) para transformar a imagem em um tensor, redimensioná-la para o que nosso modelo espera usando resizeNearestNeighbor(...) , convertê-la em valores de ponto flutuante usando toFloat() e, em seguida, usar expandDims() para inserir outra dimensão em nosso tensor para que ela se encaixe no formato de entrada em lote em que nosso modelo foi treinado.

 var makePrediction = função assíncrona (img) { 
while (! img.complete) {
aguardar espera (100);
}
 var tensor = tf.fromPixels (img) 
.resizeNearestNeighbor ([150,150])
.toFloat (). expandDims ();
 predição de const = model.predict (tensor); 
 var data = prediction.dataSync (); 
document.getElementById ('result'). innerHTML =
dados [0] == 0? "Agora, isso é um cachorro quente! :)": "Não hotdog! :(";
}

Depois de pré-processar nossa imagem, podemos passá-la para o nosso modelo usando o método predict(...) e obter uma previsão. Para obter os dados reais do tensor de previsão, usaremos o método dataSync() . Neste ponto, você pode fazer o que precisar com a previsão. Nesse caso, adicionaremos uma mensagem simples à nossa página da Web que responde à antiga pergunta: “Isso é um cachorro-quente?”. Nós realmente vivemos no futuro.