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

Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

馃煝Editar c贸digo de un m贸dulo en Dolibarr [04]

馃煝Editar c贸digo de un m贸dulo en Dolibarr [04]

En este tutorial vamos editar el c贸digo de nuestro m贸dulo personas para poder personalizar algunas…

2 semanas hace
馃煝Crear un sub_m贸dulo en Dolibarr [03]

馃煝Crear un sub_m贸dulo en Dolibarr [03]

En este tutorial vamos a crear un sub m贸dulo llamado seguridad que ser谩 muy parecido…

2 semanas hace
馃煝Modificar un m贸dulo en Dolibarr [02]

馃煝Modificar un m贸dulo en Dolibarr [02]

En este tutorial aprenderemos a editar el objeto personas del modulo persona que creamos en…

2 semanas hace
馃煝Constructor de m贸dulos en Dolibarr

馃煝Constructor de m贸dulos en Dolibarr

Como mencionamos anteriormente Dolibarr es un proyecto realizado sobre la base de una pol铆tica clara:…

2 semanas hace
馃煝Tickets en Dolibarr [19]

馃煝Tickets en Dolibarr [19]

Los ticket en dolibarr nos ayudan a comunicar inconveniente en nuestros productos y servicios dentro…

2 semanas hace
馃煝Agenda en Dolibarr [18]

馃煝Agenda en Dolibarr [18]

Las agendas en dolibarr nos ayudan a ver las actividades realizadas en proceso y por…

2 semanas hace