Detección de objetos en tiempo real en 10 líneas de código con TensorFlow.js

Detección de objetos en tiempo real en 10 líneas de código con TensorFlow.js

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

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 a una etiqueta, 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.

Código en Github

FranciscoImanolSuarez/Tensorflow-js-imagenes-en-tiempo-real
Detección de objetos en tiempo real en 10 líneas de código con TensorFlow.js …
github.com

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

Francisco Imanol Suarez on about.me
I am a web developer, student, and photographer in Trelew, Argentina. Read my articles.about.me

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:

TensorFlow.js — Real-Time Object Detection in 10 Lines of Code
In my last article I showed you how to do image classification in the browser.
hackernoon.com