¿Pasas horas desplazándote por TikTok, asombrado por los movimientos de baile extravagantes pero complicados de los jóvenes de hoy en día? Esos chicos están triunfando mientras tú te sientas a codificar consultas SQL. Afortunadamente, somos tecnólogos y no hay problema que no podamos resolver, incluido mejorar en el baile de TikTok. En esta charla, te mostraré cómo perfeccioné mis movimientos construyendo PoseDance, tu amigable entrenador de TikTok. Discutiremos cómo aproveché PoseNet, que te permite identificar el movimiento del cuerpo y dibujar un 'esqueleto' en un video. Combinado con una cámara web que mapea tu propio esqueleto de baile, un poco de matemáticas para comparar los puntos coincidentes, Azure Functions para autenticar a un usuario y PlayFab como backend amigable para juegos para mantener las puntuaciones y crear un ranking, tienes el pasatiempo perfecto para la cuarentena, haciendo el ridículo frente a una cámara web. ¡Ven a bailar conmigo!
Video Summary and Transcription
En esta charla, Jen Looper presenta PoseDance, una aplicación entrenadora de TikTok que utiliza PoseNet para la detección de poses. Discute los desafíos de la puntuación y el potencial para aplicaciones médicas. Jen también menciona el uso de Azure Functions y PlayFab para el backend y despliegue de la aplicación. La charla concluye con un recorrido por el código y una invitación para contribuir a mejorar el sistema de puntuación.
1. Introducción a PoseDance y TikTok
Hola a todos, en esta parte, les presentaré PoseDance, una aplicación de entrenamiento de TikTok. Hablaremos sobre la idea de construir un esqueleto utilizando la API de Canvas y video para mejorar tus habilidades de baile. Soy Jen Looper, una Líder de Defensa en la Nube en Microsoft, y también hablaré sobre qué es TikTok, profundizaré en PoseNet, explicaré cómo funciona internamente y compartiré información sobre cómo construí PoseDance. ¡Estén atentos para una demostración emocionante!
Hola a todos, estoy muy emocionada de estar aquí para hablarles hoy sobre una aplicación muy interesante que he creado. Se llama PoseDance y lo que es es un entrenador de TikTok. Así que vamos a hablar un poco sobre PoseDance, la idea de construir un esqueleto, utilizando la API de Canvas y video para permitirte bailar tan bien como esos increíbles chicos a los que todos estamos perdiendo el tiempo viendo en TikTok. Mi nombre es Jen Looper, siempre puedes encontrarme en Twitter como Jen Looper y soy una Líder de Defensa en la Nube en Microsoft. Así que la agenda de hoy es hablar un poco sobre qué es TikTok, vamos a hablar sobre PoseNet, vamos a profundizar un poco en lo que se ejecuta detrás de escena en PoseNet y cómo fue construido. Vamos a hablar un poco sobre cómo construí PoseDance y luego voy a ir
2. Introducción a TikTok
TikTok es una popular aplicación móvil que evolucionó a partir de Musical.ly. Es conocida por sus videos cortos, especialmente de bailes. A pesar de ser una pérdida de tiempo, es increíblemente divertida. Estén atentos para obtener más información y recursos sobre TikTok.
3. Introducción a PoseNet
PoseNet es un producto de Google que permite la detección de posturas en el navegador. Utiliza TensorFlow.js y se puede utilizar con cámaras web, video o imágenes. Puede mostrar una o más personas y tiene varios casos de uso, como deportes y yoga. Proporciona estimaciones de 17 puntos clave del cuerpo y el usuario puede crear el esqueleto en el lienzo. PoseNet se basa en los modelos de PersonLab, que permiten un enfoque de partes primero para determinar las acciones de una persona en una imagen.
4. Entrenamiento y Funcionalidad de PoseNet
El entrenamiento de PersonLab consta de dos pasos: detectar a una persona y estimar las posturas. Utiliza mapas de calor y predicciones de desplazamiento de corto alcance para identificar puntos clave. El sistema utiliza votación huff y matrices huff para una colocación precisa de los puntos clave. PoseNet decodifica las posturas y agrupa a las personas utilizando desplazamientos de largo alcance. Se utilizan redes neuronales convolucionales en todo el proceso. PoseNet abstrae las complejidades y proporciona métodos fáciles de usar para la estimación en tiempo real en el navegador. Se puede instalar a través de NPM como parte de los modelos de TensorFlow.
Entonces, el entrenamiento de PersonLab consta de dos pasos, ¿verdad? Detecta a una persona y luego estima las posturas. Y primero intenta detectar los puntos clave. Puedes ver estos mapas de calor. Los agrupa en instancias de persona. Por lo tanto, está mirando una imagen, determinando qué partes pertenecen a qué persona y descubriendo qué elementos pertenecen a esa persona en particular. Intenta hacer estas agrupaciones y la red en sí se entrena de manera supervisada, y busca 17 partes del cuerpo y la cara utilizando el conjunto de datos COCO. COCO significa Objetos Comunes en Contexto, conjunto de datos COCO. Por lo tanto, siempre es útil saber cómo se construyeron estos modelos y qué conjunto de datos se utiliza para construir este tipo de cosas.
Entonces, utiliza los mapas de calor y luego predicciones de desplazamiento de corto alcance para identificar posibles puntos clave, descubriendo, ya sabes, tal vez esto sea un tobillo. Tal vez esto sea una... Y luego utiliza un sistema de votación huff para determinar la colocación más precisa de un punto clave. Por lo tanto, utiliza la votación huff para crear matrices huff. Y puedes echar un vistazo a qué son las matrices huff haciendo una búsqueda rápida en Google. Las matrices huff se basan en las transformadas huff, que es una técnica de extracción de características utilizada en el análisis de imágenes y la visión por computadora. Y está diseñada para encontrar instancias imperfectas de objetos dentro de una cierta clase de formas mediante un procedimiento de votación. Curiosamente, fue inventada en 1959 y patentada en 1962, creo. Por lo tanto, todas estas técnicas de aprendizaje automático que estamos utilizando, muchas de ellas han existido durante mucho tiempo. Y es bastante interesante recordar que estamos construyendo sobre los hombros de gigantes. De todos modos, tenemos nuestras votaciones huff que llegan. Tenemos matrices huff construidas. Y luego tratamos de averiguar las personas involucradas en la creación de las posturas. Por lo tanto, decodifica las posturas de estas personas, utilizando estas detecciones para crear posibles instancias de personas individuales. ¿Verdad? Y utiliza los desplazamientos de largo alcance que encuentra para agrupar a las personas en instancias segmentadas de cada persona en una imagen. Y es bueno saber que todos estos pasos utilizan redes neuronales convolucionales. Por lo tanto, realmente hay mucho sucediendo detrás de escena para crear este modelo que luego se empaqueta y se nos proporciona para usar en PoseNet. Por lo tanto, siempre es útil saber qué está sucediendo detrás de escena y especialmente qué conjunto de datos se utilizó para crear el modelo que acabamos de tomar y usar. Echa un vistazo al artículo de investigación que se menciona en la parte inferior aquí. Como dije, PoseNet fue un proyecto de Google Creative Lab y se ejecuta en tiempo real en el navegador. Y lo que hace PoseNet es básicamente abstraer las complejidades del modelo que nos proporciona esta maquinaria compleja detrás de escena. Y encapsula la funcionalidad entregada por estos modelos en métodos fáciles de usar que podemos utilizar en la web. Se puede instalar a través de NPM como parte de los modelos de TensorFlow, por lo que puedes echar un vistazo al repositorio de modelos de TensorFlow y hay una gran cantidad de demos que puedes ver para obtener algo de inspiración.
5. Construyendo PoseDance y Abordando el Ableismo
TensorFlow.js permite el aprendizaje automático en el navegador, lo que permite la inferencia y el entrenamiento de modelos. Basándome en TikTok, creé una aplicación inclusiva que utiliza PoseNet para comparar el movimiento de un bailarín con el tuyo. Abordé las preocupaciones sobre el ableismo mostrando bailarines con habilidades diferentes. Vamos a adentrarnos en la construcción de PoseDance, considerando el diseño, la arquitectura, el uso de PoseNet, la integración de la cámara web y el manejo de modelos pesados.
Y se acompaña de TensorFlow.js, lo cual es realmente útil, porque con TensorFlow.js, podemos utilizar el aprendizaje automático en nuestro navegador. Puedes realizar inferencias fácilmente utilizando TensorFlow.js en tu navegador. También puedes entrenar modelos en tu navegador. No es mi forma favorita de entrenar. Prefiero hacerlo, ya sabes, utilizando una pila diferente para que sea un poco más eficiente. Pero si quisieras, podrías entrenar modelos en tu navegador. Pero a mí me gusta usarlo para inferencia. Y un dato curioso, utiliza el algoritmo de decodificación FastGreedy del artículo de investigación del laboratorio del que hemos estado hablando. Así que tenemos el modelo que queremos usar. Hemos determinado que queremos construir algún tipo de aplicación. ¿Cuál sería la cosa más divertida que se te ocurra construir con esta tecnología? Para mí, me fui directamente a TikTok, porque, ya sabes, ¿por qué no perder un poco más de tiempo en TikTok y empujarlo un poco tecnológicamente, ver qué podemos construir sobre TikTok utilizando PoseNet? Pensé, bueno, ¿por qué no construir una comparación lado a lado para que puedas usar PoseNet para comparar el movimiento de un bailarín con el tuyo al comparar el video de TikTok con la salida de tu cámara web, porque esta cosa está diseñada para usar tu cámara web? Así que seré yo con mi cámara web aquí con mi esqueleto determinado y luego haré una comparación con el punto de verdad de TikTok. Así que, ¿por qué no? Hagámoslo.
Mientras pensaba en esto y comenzaba a construirlo, empecé a sentirme un poco incómodo. Porque pensé, bueno, tal vez lo que estoy construyendo y lo que estoy usando es inherentemente ableista. Así que solo una nota rápida sobre qué es el ableismo, es discriminación a favor de personas con habilidades estándar, personas que pueden caminar, personas que no están en sillas de ruedas. Y empecé a preguntarme, ¿nuestro laboratorio de personas es PoseNet y es PoseDance mi aplicación? ¿Es inherentemente ableista por naturaleza? Porque está buscando esqueletos, esqueletos intactos para dibujar sobre una imagen. Y como la mayoría de los modelos de aprendizaje automático, esta cosa en realidad no emite juicios. Solo mide. Y si no encuentra una parte del cuerpo o, por ejemplo, si el brazo se detiene en el codo, simplemente no mostrará ese punto clave de la muñeca. Así que simplemente no emite juicios. Solo busca partes, mide y muestra. Sin embargo, pensé que si creo una aplicación sobre TikTok comparando mis movimientos con un mecanismo de puntuación para bailarines semiprofesionales y capacitados, eso podría ser ableista. Así que decidí hacer una aplicación inclusiva y asegurarme de mostrar bailarines con habilidades diferentes, personas en sillas de ruedas, personas con diferentes habilidades. Eso es lo que intenté hacer, solo para que lo sepas. Así que cuando visites la aplicación, verás bailarines de diferentes tipos interesantes.
Así que hablemos de la construcción de PoseDance. Tuve muchas consideraciones que tuve que reunir cuando estaba comenzando el trabajo. Tuve que preocuparme por el diseño, establecer la arquitectura, descubrir cómo usar PoseNet, descubrir cómo usar una cámara web y darme cuenta de que estos modelos son pesados,
6. App Responsiveness and Back-end Implementation
Para hacer que tu aplicación sea receptiva, considera construir la puntuación y el tablero de líderes. Azure Functions y PlayFab son excelentes herramientas para la implementación del backend. Azure Functions puede comunicarse con PlayFab para enviar puntuaciones y crear un tablero de líderes. La implementación es otro aspecto importante a considerar.
7. App Dependencies and PoseNet Usage
Al construir la aplicación, instalé NPM y las dependencias, incluyendo PoseNet de los modelos de TensorFlow y TFJS. También se utilizaron Axios, Bulma, Sass Loader, Vue y otros componentes. La interfaz permite la integración de la cámara web y los videos de TikTok. Inicialmente, intenté usar videos incrustados de TikTok, pero tuve que obtener los videos de la aplicación móvil. Preocupada por los términos de servicio, me aseguré de hacer las atribuciones y créditos adecuados. Usando PoseNet, que tiene modelos grandes, la aplicación tarda aproximadamente 10 segundos en cargarse. Se ejecutan dos modelos, uno para la cámara web y otro para los videos de TikTok.
Entonces, cuando estoy construyendo una aplicación, generalmente comienzo como cualquier desarrollador de JavaScript, instalando NPM y las dependencias. Aquí está la lista de mis dependencias para la aplicación. Y las dos más importantes son las dos primeras, ¿verdad? Tenemos instalado PoseNet de los modelos de TensorFlow y TFJS, eso es TensorFlow.js, también instalado. Esas dos tienen que estar emparejadas juntas. Funcionan juntas. Axios para llamar a mi API, Bulma para un sitio web receptivo agradable. Bulma utiliza Sass y Sass Loader. Es un sitio Vue. Soy un desarrollador de Vue. Así que necesito mis piezas de Vue. Y el resto es el enrutador, VueAllocate para el formulario que creé, para que puedas iniciar sesión y guardar tu puntuación. Y PersistentState para que VueX se comporte correctamente. Esas son las piezas que utilicé. Necesitaba construir una interfaz que te permitiera tener la cámara web en un lado y los videos de TikTok en el otro. Inicialmente, quería usar los videos incrustados de TikTok. Si vas a TikTok en la web, verás que puedes descargar incrustados. Pensé que podría dibujar mi esqueleto justo encima de ese incrustado. Resulta que no pude. Tuve que obtener el video de TikTok, y en realidad puedes hacer eso en su aplicación móvil, lo cual es interesante. Estoy obteniendo estos videos como mp4 y los estoy usando dentro de la aplicación web. Empecé a preocuparme por los términos de servicio, así que me aseguré de que los incrustados de TikTok estén en la página de inicio para que puedas ver todas las atribuciones y los créditos que se les dan a cada bailarín y a la música que utilizan. Bien. Usando PoseNet. Esto es realmente divertido cuando empiezas a pensar en cosas geniales que puedes hacer con estos modelos de aprendizaje automático. Luego te das cuenta, oh dios mío, estos son realmente grandes. Son modelos grandes. La aplicación tarda unos 10 segundos en cargarse. Estoy usando PoseNet dos veces. Tengo dos modelos en funcionamiento. Tengo uno para la cámara web y otro
8. Manejo de modelos grandes, cámara web, poses y puntuación
Para manejar modelos grandes y la cámara web, crea un sitio web receptivo y compatible con asincronía. Utiliza llamadas asincrónicas y ganchos del ciclo de vida como Mounted Async para cargar el video, configurar la cámara web y dibujar puntos clave y esqueletos. La estimación de poses requiere cargar modelos y dibujar el esqueleto utilizando la API de lienzo. Ten en cuenta las limitaciones de rendimiento. Dibujar el esqueleto permite la creatividad en el grosor y color. La puntuación implica comparar puntos clave de diferentes videos.
9. Desafíos con la Puntuación
La puntuación tiende a degradarse a negativo a medida que te alejas del video. Posicionarte exactamente donde está la persona del video y alinearte a sus movimientos es un desafío. Mi puntuación más alta es solo 6, lo cual no es genial. Mi hija encuentra la aplicación molesta porque su puntuación fue mala.
10. Backend, Leader Board, and Deployment
Hablemos del backend. Decidí utilizar PlayFab como backend para la aplicación. Es excelente para juegos. Construí el tablero de líderes utilizando la API de PlayFab y lo mostré con Axios. Para el despliegue, utilicé Azure Static Web Apps, que fue lanzado recientemente y funciona bien para varios tipos de aplicaciones.
11. Pose Dance Demo
Voy a mostrarles mi aplicación, Pose Dance. Tiene una invitación para bailar tanto como quieras. Incluye a personas con discapacidades diferentes. El modelo se está cargando y puedo hacer clic en vista previa para ver el video con el esqueleto. Mi puntuación no se captura porque no he iniciado sesión.
De acuerdo. Creo que en este punto estamos listos para la demostración. Creo que podemos intentarlo. Voy a escapar de esto. Y les voy a mostrar mi aplicación. Aquí está. Y bien. Esta es Pose Dance. Esta es la aplicación que construí. Esta es la primera página y tiene una invitación para bailar tanto como quieras. Como dije, incluí a personas con discapacidades diferentes. Y voy a bailar con este chico. Y puedes ver que se está cargando, cargando, cargando el modelo. Se está cargando, cargando, cargando. De acuerdo. Está listo. No he iniciado sesión, así que mi puntuación no se capturará. También puedo hacer clic en vista previa y simplemente ver el video con el esqueleto. Pero no he jugado esto. Ya está un poco lento. Aquí vamos. Ups. Ya lo arruiné.
QnA
Conclusion and Q&A
Te animo a visitar la aplicación en aka.ms/slashosedance. Todo el contenido, incluido un video, diapositivas y código, está disponible en GitHub. Espero que hayas disfrutado de mi charla. Gracias.
Ah, mi puntuación más alta como anónimo sigue siendo seis. Bueno, te animo a ir a aka.ms slashosedance para visitar la aplicación. Todo el contenido está en GitHub. Y he escrito un bonito post-dance. Léeme. Y puedes obtener toda la información que necesitas en este post-dance. Hay un video. Puedes echar un vistazo a las diapositivas. Próximamente publicaré un artículo en el blog. Y puedes probar la aplicación. Y todo el código está listo para ti. Espero que hayas disfrutado de mi charla. Hablaremos en Twitter. Y eso es todo por mi parte. Gracias. Increíble, increíble presentación, Jen. Por favor, únete a mí en el escenario para algunas preguntas y respuestas. ¡Hola! ¡Hola a todos! ¡Hola, Jen, cómo estás? Muy bien. ¿Y tú? Bien, bien, bien. Antes de nada, quería agradecerte personalmente por crear post-dance. ¡De nada!
App Lagging and Body Types
Tengo una amplia experiencia bailando mal. La aplicación tiene algunos problemas de retraso debido al JavaScript pesado y los modelos que se implementan. El retraso puede ser causado por la cantidad de incrustaciones de TikTok y la carga de modelos, webcam y video. Puede haber una fuga de memoria que debe investigarse. Los tipos de cuerpo, como los hombros más anchos y las alturas diferentes, pueden afectar la coincidencia de los fotogramas en la aplicación.
Sí, creo que hay un par de cosas que podrían estar causando ese retraso. Una cosa que he notado es que cuando vuelves a la pantalla con todas esas incrustaciones, creo que hay ocho incrustaciones provenientes de TikTok, y creo que hay mucho JavaScript cargándose en esa página. No hay mucho que pueda hacer al respecto porque quería mantener toda la marca alrededor de esas incrustaciones de TikTok de acuerdo con sus términos de servicio. Si vas a usar TikTok, al menos debes tener eso en tu sitio web, y no quería tener problemas con TikTok. Y luego, en cuanto a cuando haces clic en el botón de baile, y llegas a la segunda página donde creas los esqueletos y todo eso, como dije en la charla, hay una gran cantidad de JavaScript. Por lo general, tarda unos 10 segundos en cargar tus modelos, cargar tu webcam, cargar el video, organizar todo y hacer clic en ese botón de presión porque hay dos modelos en funcionamiento en esa página. Así que es mucho JavaScript, son aplicaciones muy pesadas y modelos pesados que se implementan allí. Así que no vamos a lanzar esto a producción ahora mismo. Es muy probable que haya una fuga de memoria que no he encontrado, pero tal vez tú sí. Así que cosas que necesito revisar.
Claro, claro, claro. Y tenemos una pregunta de uno, que preguntaba si los tipos de cuerpo, como los hombros más anchos, los niños versus los adultos, afectan eso ya que los fotogramas deben coincidir exactamente con la posición. Excelente pregunta. Y sí, lo harían, porque realmente está mirando esas coordenadas x e y de donde están todos tus puntos clave dentro del fotograma. Entonces, si tienes una persona que mide 6'7, comparándose con, ya sabes, mi hija muy baja, si tengo una,
App Potential and Medical Applications
Podrías posicionarte mejor en el encuadre. La aplicación tiene potencial para entrenamiento de yoga y aplicaciones médicas. Puede ayudar a asegurar posiciones corporales correctas y prevenir lesiones. Sería interesante ejecutar un video de un gimnasta. La tecnología tiene diversas aplicaciones más allá del baile.
Sí, bueno, como dije, hice que mi hija probara esto y ella dijo, ya sabes, realmente perdiste una oportunidad aquí porque mucha gente está probando el yoga en este momento y no tienen idea de lo que están haciendo. Están viendo, ya sabes, un minuto en TikTok y convirtiéndose en yoguis de inmediato. No es una situación muy difícil. Así que creo que en términos de usar PoseNet para asegurarse de que todas tus partes del cuerpo estén en la posición correcta para que no te lastimes haciendo yoga. Creo que sería una excelente forma de trabajar con un entrenador personal, ya sabes, igualar mi pose exactamente y obtener una puntuación, eso funcionaría. Siempre me pregunté sobre las aplicaciones médicas para esto y si la gente estaría considerando, ya sabes, descubrir qué sucede si te lesionas, ¿qué pasa si te lesionas? Ya sabes, con la cadera girada en exceso, como en el caso de un gimnasta, por ejemplo, cuando estás entrenando, cuando subes y haces ciertos movimientos en las barras paralelas, ¿hay cosas que no deberías hacer para no lastimarte al desmontar? Ya sabes, ese tipo de cosas. En realidad, ahora tengo muchas ganas de probar ejecutar un video de un gimnasta con esto y ver qué sucede. Será interesante. Ahí lo tienes. Ahí lo tienes. Siento que no solo estamos obteniendo respuestas sobre qué tan bueno puedo ser como bailarín, sino que también estamos obteniendo otras respuestas.
Scoring System Rework
Hay planes para reestructurar el sistema de puntuación, posiblemente haciéndolo basado en el movimiento en lugar de basado en la posición. El sistema de puntuación actual involucra mucha matemática y no es muy eficiente. Se aceptan sugerencias y PR para mejorar la puntuación y hacerla más rápida.
Recorrido de código y PR para mejorar la puntuación
Ayer, agregué un recorrido de código a mi base de código en Visual Studio Code. Puedes realizar un recorrido del código y brindar comentarios. Agradezco tus PR para ayudar a solucionar cualquier problema. También hay una pregunta sobre medir los ángulos de las extremidades en lugar de X, X, Y para mejorar la puntuación. Es una idea inteligente que eliminaría la necesidad de estar cerca de la cámara. Siéntete libre de hacer un PR y mejorarlo. Para más preguntas, visita aka.ms/Posedance y consulta el repositorio de GitHub para mejoras.
