02.- Machine Learning JavaScript en Espa帽ol 馃嚜馃嚫 [Clasificador de video con ml5.js]


Introducci贸n.

Bienvenidos a este curso de tensi贸n flow en javascript y en este tutorial realmente estoy muy emocionado porque si les gust贸 el tutorial anterior este pues los va a dejar con la boca abierta. Lo que vamos a hacer lo mismo con el tutorial anterior pero pero en lugar de darle im谩genes a nuestro sistema para que nos las identifique le vamos a dar un v铆deo para ser exactos la captura de una webcam y para que tensorflow no va a decir esta cosa que tienes en tu webcam es una l谩piz o una cuchara o un tenedor. En serio se los juro vamos a hacer eso y pues solo tenemos que tener una webcam y el siguiente c贸digo:

Codigo

<html>
    <head>
        <meta charset="UTF-8">
        <title>Webcam Image Classification using MobileNet and 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.1.2/dist/ml5.min.js" type="text/javascript"></script> 
    </head>

    <body>
        <h1>Clasificador de imaganes por webcam usando MobileNet and p5.js</h1>
        <p id='estado'>Carga modelo...</p>
        <p>
            Esto es un <strong> <span id="resultado">...</span></strong><br/>
            Con una certeza del <strong><span id="probabilidad">...</span></strong>.
        </p>
        <script>
            let clasificador;
            let video;
            function setup() {
                noCanvas();
                // Inicializa la camara
                video = createCapture(VIDEO);
                // Inicializa le clasificador de imagenes con el video
                clasificador = ml5.imageClassifier('MobileNet', video, modeloListo);
            }
            //Cuando el modelo este listo
            function modeloListo() {
                // Cambiamos el estado a Modelo cargado
                select('#estado').html('Modelo cargado');
                // Llama al la funcion para comenzar a clasificar el video
                clasificarVideo();
            }
            // Predecimos que imagen es la que se muestra en el video
            function clasificarVideo() {
                clasificador.predict(tomaResultado);
            }
            // Cuando obtenemos el resultado
            function tomaResultado(err, resultado) {
                console.log(resultado);
                // Escribimos el nombre de la imagen detectada
                select('#resultado').html(resultado[0].className);
                select('#probabilidad').html(nf(resultado[0].probability, 0, 2));
                // Llamamos de nuevo al clasificador
                clasificarVideo();
            }
        </script>
    </body>

</html>

Codigo en codepen: https://codepen.io/eucm2/pen/byqjoG

Video




Comentarios

Facebook Like

Entri Populer

hackear wifi con kali linux 馃摗

Instalar Netbeans 10 en Windows 10

Instalar netbeans 10 en ubuntu 18.04