Video Summary and Transcription
Bienvenido a una charla sobre el uso de MediaPipe para aplicaciones de aprendizaje automático multiplataforma con ReactJS. MediaPipe proporciona soluciones listas para usar para la detección de objetos, seguimiento, malla facial y más. Permite la transformación de video y la conversión de tensores, lo que permite la interpretación de imágenes de video de una forma legible para los humanos. MediaPipe utiliza gráficos y calculadoras para manejar el pipeline de percepción. Aprenda cómo usar los paquetes de MediaPipe en React y explore una demostración que muestra el modelo de manos para detectar puntos de referencia. Se puede escribir lógica personalizada para detectar puntos de referencia abiertos y cerrados, lo que lo hace útil para aplicaciones como el lenguaje de señas americano.
1. Introducción a MediaPipe
Bienvenidos a mi charla en React Day Berlin 2022. Soy Shivaay y hablaré sobre cómo utilizar MediaPipe para aplicaciones de aprendizaje automático multiplataforma con ReactJS. MediaPipe es un marco de código abierto que permite la inferencia de aprendizaje automático de extremo a extremo y es especialmente útil para el análisis de video y audio. Proporciona aceleración utilizando el hardware del sistema y se puede utilizar en múltiples plataformas.
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.
2. Explorando las soluciones de MediaPipe
Exploraremos las soluciones listas para usar de MediaPipe que cubren la detección de objetos, el seguimiento, la malla facial, el seguimiento de posturas humanas y más. Estas soluciones se utilizan en diversas aplicaciones, como el seguimiento de ejercicios virtuales y técnicas de lápiz labial basadas en realidad aumentada. MediaPipe proporciona tuberías de aprendizaje automático de extremo a extremo que se pueden integrar fácilmente en tus programas. Visita MediaPipe.dev para obtener más información y ejemplos de cómo se utiliza MediaPipe en JavaScript y otras plataformas.
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.
3. Transformación de video y conversión de tensores
La idea es transformar la imagen de video en tensores, que son matrices matemáticas de n dimensiones utilizadas para el aprendizaje automático. Estos tensores se someten a transformaciones y se convierten en puntos de referencia que se superponen en la imagen capturada. Este proceso es la base de las soluciones de MediaPipe, que permiten la interpretación de imágenes de video de forma legible para los humanos.
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.
4. Gráficos y Calculadoras de MediaPipe
En las soluciones de MediaPipe, hay nodos y aristas que forman un gráfico que representa la tubería de percepción. Cada nodo representa un calculador de MediaPipe conectado por flujos. Estos calculadores manejan el flujo de paquetes y realizan los cálculos necesarios. Los nodos de entrada y salida manejan los paquetes entrantes y salientes. Para obtener más visualizaciones, visita wiz.mediapipe.dev.
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.
5. Uso de paquetes de MediaPipe en React
Aprende cómo usar los paquetes de MediaPipe dentro de React importando los paquetes NPM específicos para el módulo o solución deseada. Además, instala otros paquetes NPM necesarios, como camera utils, para capturar imágenes de la cámara. Utiliza la webcam, la referencia y el lienzo para ejecutar el modelo y realizar inferencias en las imágenes de la webcam. Explora una demostración que muestra el modelo de manos, el cual detecta puntos de referencia de la mano y los superpone. Importa la solución de manos de MetaPipe y configura los puntos de referencia y obtén la cámara en el archivo index.ts.
Bien. Ahora, por supuesto, pasemos a la parte más importante, y eso es cómo usar estos paquetes de MediaPipe dentro de React. Hay varios paquetes de MediaPipe junto con sus paquetes NPM que puedes incorporar directamente en tu código de React. Algunos de los más comunes se muestran aquí en la pantalla que puedes ver, incluyendo face mesh, face detection, hands, holistic, object drawn pose.
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.
6. Renderización de puntos de referencia y conclusión
En la demostración, renderizamos puntos de referencia en un lienzo, procesamos las imágenes y dibujamos la imagen encima. Se carga el modelo de manos, se inicializa la cámara y se renderizan los resultados, conectando y superponiendo los puntos de referencia. Se puede escribir lógica personalizada para detectar puntos de referencia abiertos y cerrados. La demostración de manos se puede utilizar para diversas aplicaciones, incluyendo el lenguaje de señas americano. Visita MediaPipe en JavaScript para obtener más información y ejemplos.
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.
Pero en este caso, cuando los puntos de referencia se superponen entre sí, podemos ver que estoy imprimiendo la etiqueta como cerrado. Así que dependiendo de la necesidad, o dependiendo de cómo quieras utilizar este modelo en particular, puedes escribir tu lógica personalizada en JavaScript para ver si, por ejemplo, digamos que estás, porque cada uno de estos diferentes puntos de referencia tiene sus coordenadas únicas. Así que podrías hacer mucho más con esto específicamente, por ejemplo, si quisieras crear algo como un lenguaje de señas americano, podrías entrenar tu modelo de tal manera que, dependiendo de los puntos de referencia o las posiciones de tus puntos de referencia, y la forma en que están orientados, podrías crear una demostración completa de lenguaje de señas americano de principio a fin con la ayuda de la demostración de manos o el modelo de segmentación de manos. Así que eso, por supuesto, depende totalmente de ti en términos de cómo quieras hacerlo.
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.
Comments