Usando MediaPipe para crear aplicaciones de aprendizaje automático multiplataforma con React

Bienvenidos a todos a mi charla en React Day Berlin 2022. Soy Shivaay y presentaré virtualmente sobre el tema de cómo utilizar MediaPipe para crear aplicaciones de aprendizaje automático multiplataforma con la ayuda de ReactJS. Soy un mentor de código de Google en MediaPipe y también lidero el grupo de trabajo de TensorFlow.js, y pueden conectarse conmigo en mi Twitter, how-to-develop. Y sin perder más tiempo, comencemos.

Hoy en día vemos muchas aplicaciones de aprendizaje automático en todas partes. Y esto es especialmente cierto para las aplicaciones web con la llegada de bibliotecas como TensorFlow.js, MediaPipe. Hay muchas de estas aplicaciones de pila completa que utilizan las capacidades de aprendizaje automático en sus aplicaciones web, y las estamos viendo también en producción con muchas startups e incluso empresas como LinkedIn, que están utilizando el aprendizaje automático para potenciar múltiples aplicaciones. Y eso se debe a que el aprendizaje automático es tan versátil que se puede utilizar para una variedad de aplicaciones diferentes. Y aquí hay algunas áreas comunes donde se utiliza el aprendizaje automático. Y especialmente una cosa que es común entre todas estas aplicaciones. Podemos ver en el lado izquierdo que algunas personas utilizan la detección de rostros en el iPhone XR. Puedes ver algunos puntos que pueden detectar tus manos. Luego puedes ver algunos efectos realmente geniales con la web y podemos ver algunas expresiones faciales. Y luego tienes la cámara Next que utiliza la cámara para poder detectar objetos. Luego tenemos OkGoogle o el asistente de Google e incluso cosas como Raspberry Pi, Coral, Edge TPUs. Así que todos ellos tienen una cosa en común y esa cosa común es que están siendo impulsados con la ayuda del aprendizaje automático y eso con la ayuda de MediaPipe.

Entonces, ¿qué es MediaPipe? MediaPipe es un marco de código abierto multiplataforma que se utiliza para construir percepciones y está dedicado al análisis basado en video y audio. Así que solo piensa en esto, en caso de que quieras construir una aplicación de aprendizaje automático de extremo a extremo, MediaPipe te permite preparar no solo tus conjuntos de datos, sino que también te permite pasar por toda la inferencia de aprendizaje automático. Eso significa que no solo obtendrás los objetos que se utilizarán para la detección, sino que también podrás obtener las visualizaciones y las salidas para un modelo en particular que estés ejecutando. Porque en un escenario típico de aprendizaje automático o en un algoritmo típico de aprendizaje automático, comenzarás tomando algunos datos de entrada y ejecutarás un modelo de aprendizaje automático sobre ellos y luego obtendrás alguna inferencia. Así que MetaPy permite un pipeline de extremo a extremo para poder hacer inferencia de aprendizaje automático. Y es especialmente útil para analizar video o audio. Y hoy veremos algunos ejemplos donde podrías usarlo para un audio en vivo, video en vivo o un escenario basado en cámara. Y, por supuesto, hay muchas características diferentes que vienen incluidas. Así que proporciona aceleración de extremo a extremo. Eso significa que MetaPy puede utilizar la CPU o GPU de tu sistema también. Y la tecnología subyacente, especialmente si la estás utilizando con JavaScript, es que utiliza WebAssembly en el backend. Y eso significa que con la ayuda de WebAssembly también puedes aprovechar el uso del hardware de tu sistema para acelerar y mejorar el rendimiento de los modelos de aprendizaje automático. Y una de las grandes cosas es que solo necesitas un pipeline de MediaPipe y un modelo de MediaPipe, y se puede utilizar en múltiples áreas porque MediaPipe es compatible con múltiples frameworks, incluyendo JavaScript, Android, iOS y otras plataformas, y también puedes implementarlo en plataformas como Raspberry Pi para aplicaciones de IoT o Edge. Y hay soluciones listas para usar.

Esto significa que exploraremos algunas de estas soluciones de MediaPipe en un momento. Y estas están completamente listas para usar. Solo tienes que importarlas dentro de tus funciones, dentro de tus programas.

Por ejemplo, si estás utilizando JavaScript, solo tienes que importar la función real y podrás usarla rápidamente y todas estas diferentes soluciones que exploraremos están completamente de código abierto. Así que si estás interesado en nivelar con ellas, también puedes consultar su código fuente y aplicarlo a tu propio caso de uso.

Y aquí hay algunas de las soluciones que están disponibles actualmente. Y cuando hablamos de soluciones, nos referimos esencialmente a tuberías de aprendizaje automático de extremo a extremo. Eso significa que desde la detección hasta la clasificación o la ejecución de tu inferencia, todo eso se maneja con la ayuda de estas tuberías de aprendizaje automático proporcionadas por MediaPipe. Así que tienes algunos modelos estándar que también verás en Python. Cosas como la detección de objetos, el seguimiento de objetos, pero también la capacidad de hacer cosas como la malla facial o el seguimiento de posturas humanas, todas estas se utilizan realmente en muchas startups que básicamente proporcionan la capacidad de hacer ejercicios de gimnasio o hacer tus ejercicios y realizar un seguimiento de ellos virtualmente solo con la ayuda de tu cámara web para hacer cosas como contar repeticiones o tener un fisioterapeuta virtual, por lo que se utilizan para eso.

Luego tenemos la detección facial, que es utilizada por empresas como L'Oreal para técnicas de lápiz labial basadas en realidad aumentada. Por lo tanto, muchas de estas soluciones ya se utilizan en producción. Y luego, por supuesto, hay más soluciones y puedes, por supuesto, consultarlas en el sitio web de MediaPipe. Se llama MediaPipe.dev. Así que puedes visitarlo y ver todas estas diferentes soluciones. Cosas como la solución de segmentación de selfies se ha utilizado en Google Meet para poner fondos virtuales. Estas son solo algunas de las soluciones que puedes usar directamente e incrustar en tu programa. Y, por supuesto, estas son algunos ejemplos que podemos compartir. Por lo tanto, puedes ver a la izquierda, uno que es muy similar al de LogL que puedes usar para lápiz labial basado en realidad aumentada. Luego puedes ver algunos avances de películas basados en realidad aumentada en YouTube. Puedes usar Google Lens, que es capaz de agregar objetos basados en realidad virtual o aumentada frente a ti utilizando la visión por computadora. Por lo tanto, estas son algunos ejemplos donde MediaPipe se utiliza no solo para aplicaciones deJavaScript, sino también para otras plataformas. Pero, por supuesto, también me gustaría explicar cómo se realiza esta inferencia en primer lugar. Para eso, echemos un vistazo a una percepción en vivo. Y para eso, tomaremos el ejemplo de un algoritmo de seguimiento de manos. La idea es que si usas una cámara web y colocas tu mano frente a la cámara, debería poder detectar algo que llamamos puntos de referencia. Básicamente, la idea es que tomarás la imagen o unvideo de tu mano y el modelo de aprendizaje automático, típicamente la tubería de MediaPipe, será capaz de obtener estos puntos de referencia específicos. Y estos puntos de referencia generalmente indican las diferentes articulaciones dentro de tu mano. Y podrás superponer los puntos de referencia sobre tu mano para que detecte tu mano y detecte la ubicación exacta de los puntos de referencia y los superponga. Eso es lo que estamos tratando de hacer con el significado de localizar los puntos de referencia de tu mano.

Entonces, la idea es que primero tomarás tu video. Esto puede ser una grabación de una cámara web o una grabación de una cámara Nest, por ejemplo. Luego, lo que hacemos es transformar esta imagen a un tamaño que será utilizado por el modelo de aprendizaje automático. Supongamos que el tamaño original es de 1920 por 1080, por lo que se realizará una transformación donde redimensionamos la imagen y la ajustamos al tamaño esperado por el modelo de aprendizaje automático. Luego, convertimos la imagen que tenemos en nuestros tensores. Ahora, si estás familiarizado o no has oído hablar de los tensores, los tensores son como los bloques de construcción del aprendizaje profundo o de TensorFlow. Si has escuchado antes la palabra TensorFlow o no, es algo así como grandes matrices numéricas y lo que estamos haciendo es convertir nuestra imagen en estas grandes matrices matemáticas de n dimensiones. Estas matrices luego se someterán a algunas transformaciones para ser utilizadas en nuestra propiedad de aprendizaje automático. Una vez que se han convertido en tensores, ejecutaremos la inferencia de aprendizaje automático sobre estos tensores, lo que, por supuesto, realizará algunos cambios dentro de los tensores y luego lo que haremos es básicamente convertir estos tensores en los puntos de referencia que ves en el lado derecho y luego renderizaremos estos puntos de referencia en la imagen que ha capturado tu mano y una vez que obtengas eso, finalmente obtendrás una salida de video donde verás algo así, donde los puntos de referencia se han superpuesto en la mano. Este será un tipo similar de tuberías de percepción para diferentes soluciones, soluciones de MediaPipe que uses, pero la idea típica de utilizar tu grabación de video, capturar la entrada y convertirla en tensores matemáticos y ejecutar la inferencia sobre ellos, realizar algunos cambios en estos tensores y finalmente obtenerlo de nuevo para que sea comprensible de forma legible para los humanos es lo que se utiliza con la ayuda de MediaPipe.

Ahora vamos a hablar un poco más sobre el uso de gráficos y calculadoras. Básicamente, cuando hablamos de cualquier solución de MediaPipe, hay principalmente dos puntos de conversación o dos puntos diferentes a considerar. El primero es un gráfico de MediaPipe y eso denota todo el proceso de percepción de extremo a extremo que acabamos de mencionar o mostrar en los ejemplos de detección de manos y, dentro de este gráfico, si, si conoces cómo funcionan los gráficos en las estructuras de datos, hay aristas y nodos.

En el caso de un gráfico de MediaPipe, cada nodo representa un calculador de MediaPipe único y, de manera similar a cómo los nodos están conectados en el caso de MediaPipe, estos dos nodos estarán conectados por algo llamado un flujo. Y estos nodos básicamente aceptan nuevos inputs o paquetes que contienen la información sobre la tubería que estamos ejecutando. Y nuevamente, todos estos calculadores están escritos en C++.

Entonces, cada vez que estés realizando cualquier tipo de inferencia o ejecutando la tubería de percepción real, todo eso se maneja con la ayuda del flujo de los paquetes dentro de estos nodos. Y los cálculos se realizan con la ayuda de los calculadores de MediaPipe que están presentes en estos nodos. Y tendrás tanto tus nodos de entrada como tus nodos de salida. Los puertos de entrada se encargarán de los paquetes entrantes y los nodos de salida se encargarán de los paquetes resultantes salientes que verás como la salida. Y nuevamente, si estás más interesado en ver diferentes tipos de visualizaciones, puedes echar un vistazo a wiz.mediapipe.dev para ver las tuberías de percepción para diferentes tipos de soluciones de MediaPipe. Definitivamente recomendaría echar un vistazo si estás interesado en saber qué está sucediendo detrás de escena. Nuevamente, no es necesario si vienes de un fondo de JavaScript, puedes usar directamente la solución. Pero en caso de que quieras, si estás interesado, definitivamente puedes echar un vistazo.

Entonces, nuevamente, se pueden utilizar para una multitud de aplicaciones diferentes. Y en caso de que estés interesado, puedes consultar los ejemplos específicos que proporciona el equipo de MediaPipe en mediapipe.dev/demo con la demo que desees. Si deseas integrarlo con el código de React JS, esto es muy simple. Dado que tenemos los paquetes NPM, lo primero que harás es importar los paquetes específicos de NPM para el módulo o solución específica que deseas usar. Y además de eso, habrá varios otros paquetes NPM que tendrás que instalar. Uno de ellos es camera utils. Nuevamente, encontrarás la documentación para esto en el sitio web de MediaPipe en JavaScript y se utilizan para capturar imágenes de tu cámara y luego utilizar los fotogramas para ejecutar las inferencias. En la mitad inferior, estamos utilizando el modelo de segmentación de selfies.

Entonces puedes ver que primero utilizamos la webcam, la referencia y el lienzo. Primero ejecutamos nuestro modelo y es capaz de localizar el archivo donde hemos utilizado el modelo de aprendizaje automático real. Luego tomará las imágenes de tu webcam, capturará la entrada y ejecutará la inferencia sobre ella y la representará en el lienzo. Así de simple es el código y puedes ver que en solo 10-29 líneas de código puedes crear una solución de aprendizaje automático de extremo a extremo.

Y por supuesto, ahora vamos a ver una demostración que he creado. Básicamente, la demostración es prácticamente la percepción de manos que hemos creado. Aquí tengo, digamos, levanto mi mano y puedes ver que dice que está abierta. Y si la cierro, puedes ver que cambia la etiqueta a cerrada. Así que veamos cómo funciona esto realmente. Correcto. El modelo que vamos a ver es básicamente el modelo de manos que, como mostramos en la tubería de percepción, es capaz de detectar los puntos de referencia de tu mano y luego los superpone. Y aquí tengo mi código que estoy ejecutando en un espacio de código de github. El más importante que vamos a ver es el archivo index.ts. Aquí es donde verás que hemos importado la solución de manos de MetaPipe. Y aquí tengo dos objetos diferentes que estoy usando. Uno es la mano en sí y la conexión de la mano. Estos son básicamente todos los puntos o puntos de referencia diferentes que tenemos. Muy similar al ejemplo que mostramos en las diapositivas reales. Primero tomamos algunas constantes importantes, que son principalmente la configuración de nuestros puntos de referencia y la obtención de nuestra cámara, el elemento video. Y por supuesto, lo primero que hacemos es que, dado que va a detectar manos, simplemente ejecutamos esto en nuestro lienzo.

Así que dentro de la demostración estamos renderizando todo esto encima de un elemento de lienzo. Básicamente, renderizamos nuestros puntos de referencia para ver cuántos puntos de referencia obtenemos dentro de nuestro lienzo. Y luego lo que hacemos es dibujar la imagen real encima de nuestro lienzo. Y aquí es donde principalmente procesamos nuestras imágenes reales.

Si observas desde las líneas de código 36 a 48, aquí es donde cuando traes tu imagen y en este caso, como en la grabación de la cámara web cerca de tu cámara web, entonces será capaz de obtener los puntos de referencia y encontrar las coordenadas para cada uno de estos puntos de referencia ya que es una imagen 2D. Obtendrá las coordenadas X e Y de cada punto de referencia y las almacenará en un array. Y luego lo que hacemos es dibujar un rectángulo. Como puedes ver, cuando levanto mi mano dentro de la demostración, en realidad se encargará de renderizar estos puntos de referencia obteniendo las coordenadas X e Y de cada punto de referencia que encuentra y los renderizará encima de la imagen real que se está representando en el lienzo.

Y aquí es donde básicamente cargamos el modelo real, y ese es el modelo de manos. Y aquí es donde inicializamos nuestra cámara. Así que cuando ejecutamos la demostración, aquí es donde inicializamos nuestra cámara y luego tenemos un par de funciones que ejecutamos, incluyendo la carga del modelo de manos. Y finalmente, lo que estamos viendo es que estamos renderizando los resultados utilizando la función asíncrona en los resultados, que básicamente captura tu grabación. Y básicamente se encarga de renderizar los puntos de referencia y conectarlos, asegurándose de que se ajusten o se superpongan encima de tu grabación. De esta manera, lo que puedes hacer es, por supuesto, este es un ejemplo para poder ejecutar la demostración de manos. Y, por supuesto, la lógica separada que se ha añadido a esto es poder detectar cuando los puntos de referencia están cerrados o abiertos.

Entonces, por supuesto, en este caso, la lógica que utilizo es que cuando todos los puntos de referencia no se superponen entre sí, simplemente se imprime como abierto.

Entonces, básicamente, volviendo a nuestra pantalla. Esta es básicamente la demostración rápida que quiero mostrar. Con eso, concluyo mi charla. Y, por supuesto, en caso de que tengas alguna pregunta sobre cómo comenzar con MediaPipe en JavaScript, definitivamente puedes comunicarte conmigo y te recomendaré que consultes MediaPipe en JavaScript, donde encontrarás una lista de todas las diferentes soluciones y sus respectivos módulos NPM. Y, por supuesto, verás algunos ejemplos de trabajo que ya están disponibles. Con eso, concluyo y muchas gracias. Y espero verte en persona el próximo año en React Dev Berlin. Muchas gracias.