04.-Machine Learning JavaScript Español?? [Transferencia de conocimiento con Extracción de rasgos]
Introducción.
En este tutorial vamos a trabajar directamente con el código, vamos a hacer un programa que como les comentaba en el tutorial anterior va a reconocer ya sea que tengamos en mi caso una brocha o una taza. Este codigo me recuerda a la serie de Silicon Valley: Not Hotdog donde se reconocían las imágenes, pues hacer algo así es tan simple como colocar el código de abajo en nuestro editor guardarlo y correrlo en nuestro navegador.
Codigo
<html> <head> <meta charset="UTF-8"> <title>Image Classification using Feature Extraction with MobileNet. Built with p5.js</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/ml5.min.js" type="text/javascript"></script> <style> button { margin: 2px; padding: 4px; } video{ width: 300; height: 300; } p{ display: inline; font-size: 14px; } h6{ margin: 4px; font-weight: lighter; font-size: 14px; margin-bottom: 10px; } </style> </head> <body> <h2>Clasificador deimagenes usando el extractor de caracteristicas con mobilenet</h2> <div id="contenedorVideo"></div> <h6><span id="estadoModelo">Cargando modelo base...</span> | <span id="estadoVideo">Cargando video...</span></h6> <p><button id="botonBrocha">Agregar imagen de brocha</button></p> <p><span id="sumaDeImagenesBrocha">0</span> imagenes de brocha</p> <br><button id="botonTaza">Agregar imagen de taza</button> <p><span id="sumaDeImagenesTaza">0</span> imagenes de taza</p> <br/> <button id="botonEntrenamiento">Entrenamiento</button><span id="perdida"></span> <br/> <p> <button id="botonPredecir">Iniciar la prediccion!</button><br> Esto es: <span id="result">...</span>, Con una certeza del <span id="confidence">...</span>. </p> <script> let video; let featureExtractor; let clasificador; let brochaImagenes=0; let tazaImagenes=0; let perdida=0; function setup(){ noCanvas(); video=createCapture(VIDEO); video.parent('contenedorVideo'); featureExtractor=ml5.featureExtractor('MobileNet',modeloListo); clasificador=featureExtractor.classification(video,videoListo); configuraBotones(); } function modeloListo(){ select('#estadoModelo').html('modelo cargado'); } function videoListo(){ select('#estadoVideo').html('video cargado'); } function configuraBotones(){ botonA=select('#botonBrocha'); botonA.mousePressed(function (){ clasificador.addImage('brocha'); select('#sumaDeImagenesBrocha').html(brochaImagenes++); }); botonB=select('#botonTaza'); botonB.mousePressed(function (){ clasificador.addImage('taza'); select('#sumaDeImagenesTaza').html(tazaImagenes++); }); botonEntrenamiento=select('#botonEntrenamiento'); botonEntrenamiento.mousePressed(function (){ clasificador.train(function (valorPerdida){ if(valorPerdida){ perdida=valorPerdida; select("#perdida").html('perdida='+perdida); } else{ select("#perdida").html('Entrenamiento terminado con una perdida de '+perdida); } }); }); botonPredecir=select('#botonPredecir'); botonPredecir.mousePressed(function (){ clasificador.classify(muestraResultado); }); } function muestraResultado(err,res){ console.log(res); clasificador.classify(muestraResultado); select("#result").html(res[0].label); select("#confidence").html(res[0].confidence); } </script> </body> </html>
Ahora que si no quieres copiar y pegar este código en tu editor puedes entrar en esta url donde se ejecuta el código directamente en codepen.
Video
Código en codepen: https://codepen.io/eucm2/pen/OYpwNG
