02 ml5

02.- Machine Learning JavaScript en Español ?? [Clasificador de video con ml5.js]

02%2Bml5

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/[email protected]/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

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)