Francisco Suarez
Jul 31 · 3 min read

Hoy en dia la clasificación de imágenes puede ser una herramienta demasiado útil. Sin embargo que un modelo de Machine Learning pueda indicar que hay en una imagen, no significa que nos diga dónde esta esta imagen, para eso necesitaríamos una arquitectura diferente.

La detección de objetos abre la capacidad de por ejemplo rastrear el movimiento de un objeto, ubicar la posición, contar cuantos objetos hay, entre otras cosas mas.

Al terminar de leer esta publicación contaremos con una aplicación web que detecta objetos en una imagen en tiempo real mediante nuestra cámara web .

Paso numero 1:

Crearemos una carpeta mediante la terminal llamada “app-tensorflow-js”

Con el comando cd ingresaremos a la carpeta, y ejecutaremos el siguiente comando.

Paso numero 2:

NOTA: Recordar que “tensorflow-js” en el siguiente comando es el nombre de la aplicación, si quieres puedes colocar otro.

Paso numero 3:

También necesitamos instalar ciertos packages que nos permitirán realizar la detección de objetos, cargar el modelo entre otras cosas.

Paso numero 4:

Luego de tener todas las librerías instaladas procederemos a abrir “App.js” y pegaremos el siguiente código, en el mismo tendremos las librerías importadas, y las funciones que realizan la detección de objetos.

Paso numero 5:

En el archivo “index.css” que encontramos en la carpeta “src”, incluiremos un fragmento de código el cual nos permite a nosotros poder mostrar sobre la imagen un cuadro con la información que detecta en tiempo real.

Paso numero 6:

Ejecutaremos la aplicación con el siguiente comando


— — ¿AHORA QUE PASA CON TODO ESTO? — —

Imagen relacionada

Ahora procederemos a explicar un poco todo lo de hicimos arriba. Para poder realizar predicciones de detección de objetos, todo lo que tenemos que hacer es importar el modelo TensorFlow “coco-ssd”.

Luego de obtener nuestra predicción, necesitamos una forma de poder mostrar estos datos en pantalla. Nuestra forma es mostrando un cuadro delimitador de color celeste sobre el objeto que detecta. Para poder realizar esto lo hacemos con una etiqueta llamada <canvas>

En tiempo real mediante nuestra cámara web

Ejecutar la detección en tiempo real en una transmisión de cámara web es casi tan fácil como realizar el cambio de una etiqueta<img> a una etiqueta<video>, Sin embargo esta vez vamos a llamar a la función “requestAnimationFrame” que va a llamar a nuestra función de detección una y otra vez en un bucle infinito tan rápido como sea posible para poder así detectar en tiempo real todos los objetos que posen frente a la camara.



Espero que el post te haya gustado ! Pasa por me about.me y sígueme en mis redes sociales.

Este post no fue 100% de mi autoría, el post original es de Nick Bourdakos, pero me pareció bueno poder llevarlo del ingles a español y compartirlo con todos.

Post original en ingles:

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Francisco Suarez

Written by

👨‍💻Javascript Developer ❤️ Nodejs React Next| 📚Estudiante/Autodidacta | Trelew Chubut Argentina

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade