04 ml5
Programador Novato > Machine Learning JavaScript Español > 04.-Machine Learning JavaScript Español?? [Transferencia de conocimiento con Extracción de rasgos]

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/ml5@0.2.2/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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Salir de la versión móvil