Descubre cómo aprovechar el aprendizaje automático en JavaScript utilizando TensorFlow.js en el navegador y más allá en esta charla rápida. Inspírate a través de un montón de prototipos creativos que empujan los límites de lo que es posible en el navegador web moderno (las cosas han avanzado mucho) y luego da tus primeros pasos con el aprendizaje automático en minutos. Al final de la charla, todos entenderán cómo reconocer un objeto de su elección que luego se puede utilizar de cualquier manera creativa que puedas imaginar. Se asume familiaridad con JavaScript, pero no se requiere experiencia en aprendizaje automático. ¡Ven y da tus primeros pasos con TensorFlow.js!
TensorFlow.js 101: Aprendizaje automático en el navegador y más allá
Video Summary and Transcription
JavaScript con TensorFlow.js permite el aprendizaje automático en varios entornos, lo que permite la creación de aplicaciones como realidad aumentada y análisis de sentimientos. TensorFlow.js ofrece modelos pre-entrenados para detección de objetos, segmentación corporal y detección de puntos de referencia faciales. También permite la renderización en 3D y la combinación de aprendizaje automático con WebGL. La integración de WebRTC y WebXR permite la teletransportación y una comunicación mejorada. TensorFlow.js admite el aprendizaje por transferencia a través de Teachable Machine y Cloud AutoML, y proporciona flexibilidad y beneficios de rendimiento en los entornos de navegador y Node.js.
1. Introducción al Aprendizaje Automático en JavaScript
Hola a todos. Mi nombre es Jason Mays, soy defensor del desarrollo para TensorFlow.js aquí en Google. Podemos utilizar el aprendizaje automático en cualquier lugar donde se pueda ejecutar JavaScript, y eso es en realidad muchos lugares. JavaScript es uno de los únicos lenguajes que puede ejecutarse en todos estos entornos sin necesidad de complementos adicionales. Y con TensorFlow.js, puedes ejecutar, volver a entrenar a través del aprendizaje por transferencia o escribir tus propios modelos desde cero si así lo deseas. Al igual que lo harías en Python en este momento, pero en JavaScript. Y eso significa que puedes crear cualquier cosa que puedas imaginar. Desde realidad aumentada, reconocimiento de sonido, análisis de sentimientos y mucho, mucho más.
Hola a todos. Mi nombre es Jason Mays, soy defensor del desarrollo para TensorFlow.js aquí en Google, y estoy emocionado de hablarles sobre el aprendizaje automático en el navegador y JavaScript. Así que empecemos. Ahora, primero, ¿por qué querrías usar el aprendizaje automático en JavaScript? Esa es una excelente pregunta. Y si miramos aquí, podemos ver que podemos utilizar el aprendizaje automático en cualquier lugar donde se pueda ejecutar JavaScript, y eso es en realidad muchos lugares. El navegador web, el lado del servidor, el escritorio, el móvil e incluso el Internet de las cosas. Y si nos adentramos un poco más en cada una de estas áreas, podemos ver muchas de las tecnologías que ya conocemos y amamos. Los navegadores web comunes en el lado izquierdo, Node.js, React Native para aplicaciones móviles nativas, Electron para aplicaciones de escritorio nativas e incluso Raspberry Pi para el Internet de las cosas. Y JavaScript es uno de los únicos lenguajes que puede ejecutarse en todos estos entornos sin necesidad de complementos adicionales. Y eso por sí solo es muy, muy poderoso. Y con TensorFlow.js, puedes ejecutar, volver a entrenar a través del aprendizaje por transferencia o escribir tus propios modelos desde cero si así lo deseas. Al igual que lo harías en Python en este momento, pero en JavaScript. Y eso significa que puedes crear cualquier cosa que puedas imaginar. Desde realidad aumentada, reconocimiento de sonido, análisis de sentimientos, y mucho, mucho más. Realmente depende de ti lo que crees.
2. TensorFlow.js: Modelos pre-entrenados y Face Mesh
Ahora, con TensorFlow.js, puedes utilizar modelos pre-entrenados para diversos casos de uso, incluyendo detección de objetos, segmentación corporal, estimación de postura, detección de puntos de referencia faciales y procesamiento de lenguaje natural en el navegador. Se muestra el reconocimiento de objetos utilizando Cocoa SSD, lo que permite la detección y clasificación en tiempo real de objetos en imágenes. La integración de la cámara web permite la detección y clasificación de objetos en tiempo real, ejecutándose en el lado del cliente en un navegador, garantizando la privacidad y el ahorro de costos. El modelo de malla facial de tres megabytes puede reconocer 468 puntos de referencia faciales, lo que permite aplicaciones en tiempo real como la prueba de maquillaje de realidad aumentada sin presencia física. Observa la malla facial en acción durante la demostración.
Ahora, con TensorFlow.js, tenemos varias formas diferentes en las que puedes utilizarlo. La primera forma y la más fácil es utilizar nuestros modelos pre-entrenados. Estos son muy fáciles de usar, clases de JavaScript para muchos casos de uso comunes, como podemos ver en la diapositiva actual. Aquí, podemos ver cosas como detección de objetos, segmentación corporal, estimación de postura, detección de puntos de referencia faciales y mucho, mucho más. Incluso se admite el procesamiento de lenguaje natural en el navegador.
Así que veamos algunos de estos en acción. Primero, tenemos el reconocimiento de objetos. Esto utiliza Cocoa SSD en segundo plano y está entrenado en 90 clases de objetos. Puedes ver esto en acción en el lado derecho, donde los perros están resaltados con sus cuadros delimitadores. Incluso podemos saber que hay dos perros en esta imagen, ya que ambos se nos devuelven. Así que veamos esto en acción en vivo para ver cómo funciona en el navegador.
Muy bien, aquí hay una página web que creé que ejecuta este código en vivo en Chrome, y si hago clic en cualquiera de estas imágenes, ahora puedo obtener la detección de objetos para cualquier objeto que encuentre en esas imágenes, incluso si son diferentes tipos de clases de objetos. Pero podemos hacer algo mejor que esto. Podemos habilitar la cámara web y hacer esto en tiempo real. Y puedes verme hablando contigo en este momento, y puedes ver cómo clasifica tanto a mí como a la cama en el fondo a veces mientras te hablo. Y esto es genial, porque no solo se ejecuta a una velocidad de fotogramas muy alta en JavaScript en tiempo real, sino que se ejecuta en el lado del cliente en un navegador. Eso significa que ninguna de estas imágenes de la cámara web se envía a un servidor para su clasificación. Esto no solo ahorra costos, sino que también significa que se preserva mi privacidad, y eso es algo realmente importante en estos días. Y con TensorFlow.js, puedes obtener eso de forma gratuita. A continuación, tenemos la malla facial. Este tiene solo tres megabytes de tamaño y puede reconocer 468 puntos de referencia faciales en el rostro humano. Puedes ver esto en acción en el lado izquierdo de la diapositiva en este momento. Ahora, las personas están comenzando a utilizar esto para casos de uso del mundo real, como L'oreal, y han creado AR Makeup Trion, que permite probarse lápiz labial en tiempo real sin siquiera tener que estar físicamente presente en la tienda. Así que debes tener en cuenta que la mujer del lado derecho no lleva ningún lápiz labial. Estamos utilizando la malla facial para entender dónde están sus labios, y luego usamos sombreadores de WebGL para cambiar el color del lápiz labial que ella desea en su rostro en tiempo real. Así que esto es genial, y estoy seguro de que veremos más cosas como esta en el futuro. Así que veamos la malla facial en acción para ver cómo funciona en el mundo real. Cambiemos a la demostración. Muy bien. Ahora puedes verme hablando contigo con la malla facial funcionando en tiempo real en la Web.
3. Machine Learning in Action and 3D Rendering
En el lado izquierdo, puedes ver el aprendizaje automático en acción, con una malla de mi rostro superpuesta mientras me muevo. Puedo abrir y cerrar la boca y los ojos en tiempo real. La ejecución se puede realizar en la GPU a través de WebGL, en el CPU mediante Wasm o solo en el CPU. JavaScript permite renderizar los resultados de la nube de puntos 3D utilizando 3.js, lo que facilita la visualización de información y la manipulación de objetos en el navegador.
4. Body Segmentation and Superpowers
A continuación está la segmentación corporal, que te permite distinguir 24 áreas del cuerpo en tiempo real. La estimación de poses se puede combinar con la segmentación corporal para habilitar demostraciones poderosas como el reconocimiento de poses o gestos. JavaScript permite el prototipado rápido, como se demuestra al crear un efecto invisible y un estimador de tallas de ropa. Combinar la malla facial con los sombreadores WebGL puede crear efectos impresionantes, como láseres que salen de los ojos y la boca. Combinar TensorFlow.js con WebXR y WebGL permite extraer y manipular imágenes corporales en el mundo real.
5. WebRTC and Teleportation
Al agregar WebRTC a esto, incluso puedo teletransportarme segmentando mi cuerpo usando fotos corporales de mi habitación, transmitiendo esa segmentación a través de Internet y reconstruyéndola en un espacio físico real utilizando WebXR. Esto permite una comunicación más significativa con amigos y familiares, superando las limitaciones de las llamadas de video rectangulares.
Pero, ¿por qué detenerse ahí? Podemos ir un paso más allá. Al agregar WebRTC a esto, que significa Comunicación en Tiempo Real a través de la Web, incluso puedo teletransportarme. Aquí, puedo segmentar mi cuerpo usando fotos corporales de mi habitación. Puedo transmitir esa segmentación a través de Internet y luego reconstruirla en un espacio físico real utilizando WebXR. Y esto me permite hablar con mis amigos y familiares en los tiempos actuales donde no podemos viajar tanto de una manera más significativa que una llamada de video rectangular. De hecho, tal vez en el futuro, mis futuras presentaciones les sean entregadas de esta forma. ¿Quién sabe? Pero hay cosas muy emocionantes por delante.
6. Using Teachable Machine for Transfer Learning
La segunda forma de usar TensorFlow.js es mediante el aprendizaje por transferencia, que te permite volver a entrenar modelos existentes con tus propios datos. Teachable Machine es un sitio web que permite el entrenamiento y la inferencia en el navegador web, lo que lo hace ideal para prototipos. Puedes seleccionar un proyecto de imágenes, elegir clases y grabar muestras usando tu webcam.
Ahora, la segunda forma de usar TensorFlow.js es mediante el aprendizaje por transferencia. Y esto te permite volver a entrenar modelos existentes para trabajar con tus propios datos personalizados. Ahora, por supuesto, si eres un experto en machine learning, puedes hacer esto de forma programática. Pero hoy quiero mostrarte dos formas más sencillas de comenzar. La primera es Teachable Machine. Este es un sitio web que puede realizar tanto el entrenamiento como la inferencia completamente en el navegador web. Esto es ideal para prototipos, para cosas como detección de objetos, estimación de poses y detección de sonido. Creo que en el futuro se admitirán más modelos . Así que, estén atentos. Pero veámoslo en acción para que puedas tener una idea de cómo funciona. Bien. Si vamos a teachablemachine.withgoogle.com. Puedes seguirme si quieres. Podemos seleccionar uno de los tres proyectos disponibles. Hoy vamos a elegir un proyecto de imágenes para reconocer un objeto personalizado. Así que hacemos clic en eso y luego se nos presenta una pantalla como esta. A la izquierda, tenemos una serie de clases para el objeto que queremos reconocer. Si queremos reconocer más de dos cosas, podemos hacer clic en el botón agregar clase si así lo deseamos. Pero hoy solo vamos a reconocer mi rostro o una baraja de cartas. Así que vamos a darles nombres más significativos. Voy a llamar al primer uno Jason para representarme a mí, y la segunda clase la llamaré cartas, que representa las cartas. Todo lo que necesitamos hacer es permitir el acceso a nuestra webcam, y verás una vista previa en vivo que aparecerá en el lado izquierdo para la primera clase. Ahora, solo necesito grabar algunas muestras de mi rostro para asegurarnos de tener algunos datos de entrenamiento para este tipo de clase. Así que vamos a hacer eso. Voy a mover mi cabeza para obtener algo de variedad. Listo. Y podemos ver que tengo cuántas imágenes tengo allí. ¿Unas 38 imágenes de muestra? Perfecto. Ahora voy a hacer lo mismo con la clase número dos, la baraja de cartas, y aquí tengo un buen conjunto de cartas para jugar. Así que, lo que voy a hacer es mantener presionado para grabar nuevamente, pero esta vez voy a obtener aproximadamente
7. Teachable Machine and Cloud AutoML
Entonces, he entrenado un modelo prototipo usando Teachable Machine que puede detectar JSON y cartas de juego con alta precisión. Si esto cumple con tus necesidades, puedes exportar el modelo y usarlo en tu propio sitio web. Sin embargo, para conjuntos de datos más grandes, Cloud AutoML proporciona una solución más robusta. Al cargar imágenes en Google Cloud Storage, puedes entrenar modelos de visión personalizados optimizados para precisión o velocidad. Una vez entrenado, puedes exportar el modelo como archivos TensorFlow.js e incorporarlo fácilmente en tu propia página web.
Entonces, cloud AutoML nos permite entrenar modelos de visión personalizados en la cloud. Y podemos implementar el TensorFlow.js al final, lo cual es súper útil. Entonces, todo lo que tienes que hacer es cargar carpetas de imágenes que deseas clasificar en Google Cloud Storage, como puedes ver aquí. Y luego hacer clic en el siguiente botón. Una vez que hagas eso, se te preguntará si deseas optimizar tu modelo para una mayor precisión o predicciones más rápidas o algún tipo de compensación entre ambos. Puedes establecer un presupuesto y dejarlo entrenando durante horas o días, dependiendo de cuántos datos hayas cargado allí. Y te devolverá los mejores resultados. Va a probar muchos hiperparámetros diferentes, muchos tipos diferentes de modelos de visión por computadora e intentará averiguar qué funciona mejor con tus data. Una vez que esté listo, puedes hacer clic en exportar y elegir TensorFlow.js como se muestra aquí en el círculo, lo cual descargará los archivos model.json, que necesitas ejecutar en el navegador web. Y con eso, puedes usarlo en tu propia página web y agregar tu propia experiencia de usuario e interfaz de usuario, y así sucesivamente. Puede que te preguntes, bueno, ¿qué tan difícil es realmente usar este modelo entrenado de calidad de producción? Y en realidad,
8. Code Walkthrough and API Structure
En este recorrido por el código, importamos las bibliotecas TensorFlow.js y auto ML. Luego, cargamos el modelo de clasificación de imágenes usando model.json. Después, obtenemos una referencia a la imagen que queremos clasificar y usamos el modelo para clasificarla. Esto nos permite realizar diversas acciones basadas en las predicciones. TensorFlow.js ofrece la flexibilidad de escribir tu propio código y proporciona superpoderes y beneficios de rendimiento cuando se utiliza en el navegador. Ahora, exploremos la estructura de nuestra API.
Ahora, la tercera forma de usar TensorFlow.js es escribir tu propio código. Y, por supuesto, pasar por eso sería una charla completamente diferente en sí misma. Así que hoy me voy a centrar en los superpoderes y los beneficios de rendimiento de por qué podrías considerar usar TensorFlow.js en el navegador. Primero, quiero darte una visión general de cómo está estructurada nuestra API.
9. APIs, Environments, and Performance
Tenemos dos APIs: la API LES de alto nivel, similar a Keras en Python, y la API Ops para operaciones matemáticas de bajo nivel. Las APIs pueden ejecutarse en diferentes entornos, incluyendo el lado del cliente (navegador web) y el lado del servidor (Node.js). La ejecución en el lado del servidor admite la carga de modelos Keras y TensorFlow Saves sin conversión. Para ejecutar un modelo saves en el navegador, utiliza el convertidor de línea de comandos de TensorFlow.js. En cuanto al rendimiento, la ejecución en Node.js es comparable a Python, y la compilación en tiempo real en Node.js puede mejorar el rendimiento para el pre y post-procesamiento.
Tenemos dos APIs. Una es la API LES de alto nivel, que es muy similar a Keras si estás familiarizado con Python. De hecho, si usas Keras, básicamente son las mismas firmas de funciones. Así que deberías sentirte como en casa. Y luego, para aquellos que quieren ir a un nivel más bajo, tenemos la API Ops, que es la capa más matemática que te permite hacer cosas como álgebra lineal y demás. Puedes ver cómo se unen en el siguiente diagrama.
En la parte superior, tenemos nuestros modelos predefinidos, que se basan en nuestra API LES. Esa API LES se basa en nuestra API Ops y entiende cómo comunicarse con diferentes entornos, como el lado del cliente. Y con lado del cliente nos referimos a cosas como el navegador web. Ahora, esos entornos en sí mismos pueden ejecutarse en diferentes backends. Y en este caso, podemos ejecutar en cosas como la CPU, que es la forma más lenta de ejecución, WebGL para obtener aceleración de la tarjeta gráfica y Web Assembly o WASM para mejorar el rendimiento en la CPU en dispositivos móviles. Y lo mismo ocurre en el lado del servidor. Podemos ejecutar usando Node.js en el lado del servidor y esto puede comunicarse con las mismas bibliotecas de enlace de TensorFlow CPU y GPU que tiene Python. Así que sí, eso significa que obtienes el mismo soporte AVX y la misma aceleración CUDA que en Python. Y de hecho, como veremos más adelante, esto significa que los beneficios de rendimiento son prácticamente los mismos también. Ejecutamos tan rápido y a veces más rápido que Python para ciertos casos de uso.
Ahora, si eliges seguir desarrollando tu aprendizaje automático en Python, lo cual muchos de ustedes, por supuesto, harán, eso está completamente bien también. Nuestra implementación de Node.js admite la carga de modelos Keras y TensorFlow Saves sin necesidad de conversión. Así que siempre que estés ejecutando en el lado del servidor en Node, no se requiere ninguna conversión para usarlo e integrarlo, por ejemplo, con un equipo web. Muy conveniente. Y luego, si eliges tomar tu modelo saves y quieres ejecutarlo en el navegador web, entonces tendrás que usar nuestro convertidor de línea de comandos de TensorFlow.js para hacerlo. Eso convertirá el formato del modelo saves en el formato .json que necesitamos para ejecutarlo en el navegador web. Y eso solo es necesario si quieres ejecutarlo en el lado del cliente en el navegador. Así que hablemos del rendimiento. Aquí, podemos ver para MobileNet V2, los tiempos promedio de inferencia para GPU y CPU. Mirando los resultados de GPU, puedes ver que para tf.python, obtenemos un resultado de 7.98 milisegundos, y para Node.js, obtenemos 8.81. Así que básicamente están dentro de un milisegundo el uno del otro, lo cual es prácticamente el mismo resultado. Ahora, lo importante a tener en cuenta aquí es que si tienes mucho pre y post-procesamiento, y lo conviertes para que esté escrito en Node.js, obtendrás los beneficios del compilador en tiempo real que es único de JavaScript en tiempo de ejecución. Y esto puede llevar a mejoras significativas de rendimiento fuera de la inferencia por sí sola. Así que veamos cómo Huggingface
10. Benefits of TensorFlow.js and Node.js
Huggingface convirtió su modelo distill-burt para ejecutarse en Node.js, lo que resultó en un aumento del rendimiento de dos veces. La ejecución en el lado del cliente ofrece privacidad, menor latencia, menor costo, interactividad y alcance y escala de la web. JavaScript permite presentaciones ricas, prototipado rápido y una barrera de entrada más baja. TensorFlow.js en el navegador puede ejecutarse en GPUs en el 84% de los dispositivos. Node.js proporciona beneficios en el lado del servidor.
11. Benefits of TensorFlow.js and Community
Nos permite utilizar el formato de modelo guardado de TensorFlow sin ningún tipo de conversión o penalización de rendimiento. Podemos ejecutar modelos más grandes de los que podemos hacer en el lado del cliente. Te permite programar en un solo lenguaje. En cuanto al rendimiento, obtenemos las mismas conexiones C que el TensorFlow original en Python. Consulta los recursos en nuestro sitio web, GitHub y el grupo de Google. Si quieres profundizar, te recomiendo leer 'Deep Learning with JavaScript' de Manning Productions. Únete a nuestra comunidad y comparte tus proyectos con el hashtag madewithTF.js.
Nos permite utilizar el formato de modelo guardado de TensorFlow sin ningún tipo de conversión o penalización de rendimiento. Y podemos ejecutar modelos más grandes de los que podemos hacer en el lado del cliente. Por supuesto, puede haber límites de memoria de GPU a los que te puedes enfrentar si intentas enviar un modelo de un gigabyte a través de la web al dispositivo del cliente. El tercer punto es que te permite programar en un solo lenguaje. Si ya estás utilizando JavaScript, esto es una gran ventaja. Según la encuesta de StackOverflow 2020, actualmente el 67% de los desarrolladores utilizan JavaScript en su desarrollo. Además, hay un gran ecosistema de NPM para Node.js con muchos módulos y bibliotecas que se lanzan constantemente, por lo que también hay un gran soporte de la comunidad. Y luego el quinto punto, el rendimiento, como mencionamos antes, obtenemos las mismas conexiones C que el TensorFlow original en Python, lo que se puede utilizar para obtener una velocidad de inferencia similar, y tenemos el impulso del compilador en tiempo real para el pre y post-procesamiento si decides convertirlo a Node.js. Así que con eso, terminemos con algunos recursos que puedes utilizar para comenzar y aprender más. Si hay una diapositiva que quieras marcar, que sea esta. Aquí puedes ver todos los recursos que necesitas para comenzar con TensorFlow.js. Nuestro sitio web está en la parte superior, donde puedes encontrar muchos recursos y tutoriales para ayudarte en tu camino. Tenemos nuestros modelos disponibles en tensorflow.org.js.models. Hoy solo te he mostrado tres o cuatro, pero hay muchos más disponibles que también puedes utilizar de inmediato para comenzar rápidamente. Somos completamente de código abierto, por lo que también estamos disponibles en GitHub, y animamos a contribuir al proyecto si te sientes ambicioso. Tenemos un grupo de Google para preguntas técnicas más avanzadas que son monitoreadas por el grupo, y por supuesto, también tenemos ejemplos de código en Glitch para ayudarte a comenzar con el código base y comprender cómo tomar datos de una cámara web y pasarlos a algunos de nuestros modelos.
Entonces, con eso, puedes comenzar muy, muy rápido. Ahora, si quieres profundizar, te recomiendo leer 'Deep Learning with JavaScript' de Manning Productions, escrito por personas de mi equipo y del propio equipo de TensorFlow. Es un gran libro y solo necesitas tener conocimientos básicos de JavaScript, no asume conocimientos previos de machine learning y es un gran recurso para ir de cero a héroe.
Y con eso, te animo a unirte a nuestra comunidad. Si revisas el hashtag madewithTF.js en Twitter o LinkedIn, encontrarás cientos de proyectos que la gente está creando cada semana en todo el mundo, y no puedo mostrarlos todos en la presentación de hoy, pero aquí tienes un vistazo de algunas de las grandes cosas que están sucediendo en la comunidad. Así que mi última pregunta para ti es, ¿qué vas a crear? Aquí tienes una última pieza de inspiración de un chico de nuestra comunidad en Tokio, Japón. Es un bailarín, pero ha utilizado TensorFlow.js para crear este video de hip-hop tan genial que puedes ver en la diapositiva. Mi punto es que el aprendizaje automático ahora está al alcance de todos, y estoy muy emocionado de ver cómo todos los demás en el mundo comenzarán a utilizar el aprendizaje automático ahora que es más accesible. Artistas, músicos, creativos... Todos tienen ahora la oportunidad de utilizar el aprendizaje automático, y si lo haces, por favor utiliza el hashtag madewithTF.js para que podamos destacarte en nuestras futuras presentaciones y publicaciones en el blog. Muchas gracias por escuchar, y siéntete libre de mantener contacto. Estoy disponible en Twitter y LinkedIn para más preguntas y espero hablar contigo pronto. ¡Gracias!