TensorFlow.js 101: Aprendizaje automático en el navegador y más allá

Rate this content
Bookmark

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!

39 min
11 Jun, 2021

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.

Available in English

1. Introducción al Aprendizaje Automático en JavaScript

Short description:

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

Short description:

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

Short description:

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.

navegador al mismo tiempo. Aquí, en el lado izquierdo, puedes ver el aprendizaje automático en acción, y de hecho hay una malla de mi rostro superpuesta mientras muevo mi rostro, y es bastante robusto. Puedo abrir y cerrar la boca y los ojos, y puedes ver que todo esto sucede en tiempo real. Y obtengo aproximadamente 25 fotogramas por segundo mientras se ejecuta en mi GPU a través de WebGL. Ahora, por supuesto, también estoy transmitiendo esto en vivo. Así que estoy utilizando algunos de mis recursos de GPU en este momento. Podría obtener más fotogramas por segundo si así lo deseo. Pero también puedo cambiar como desarrollador a Wasm, que es WebAssembly, para ejecutarlo de manera eficiente en el CPU, o puedo elegir ejecutarlo solo en el CPU, que es la forma más lenta de ejecución. Entonces, hay varias opciones de implementación. Y debido a que esto es JavaScript, no solo estoy haciendo el aprendizaje automático en el lado izquierdo, también puedo renderizar la nube de puntos 3D de los resultados en el lado derecho utilizando 3.js. Y JavaScript desde el primer día ha sido diseñado para la presentación y visualización de información. Así que tienes bibliotecas muy completas, especialmente para gráficos 3D, que te permiten hacer esto de manera muy, muy fácil. Y puedes ver que puedo moverlo y ahora inspeccionar mi rostro desde diferentes ángulos, que se está construyendo en tiempo real en vivo.

4. Body Segmentation and Superpowers

Short description:

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.

el navegador. De acuerdo. Volvamos a las diapositivas. Entonces, a continuación está la segmentación corporal. Esto te permite distinguir 24 áreas del cuerpo en tiempo real. Puedes ver esto en acción en la diapositiva. Y en el lado derecho, puedes ver que los diferentes colores representan diferentes partes de cada cuerpo. Aún mejor, tenemos la estimación de poses ocurriendo al mismo tiempo, esas líneas azul claro contenidas en cada uno de los cuerpos en el lado derecho allí, lo que nos permite estimar dónde está el esqueleto humano. Y con eso, eso puede habilitar demostraciones realmente poderosas como la capacidad de reconocer cuando estás en una cierta pose o un gesto, o algo así. Ya hemos visto a personas en nuestra community usar esto para hacer clases de ejercicios o instructores de yoga, y este tipo de cosas. Así que es súper genial ver el potencial creativo de este modelo. Y de hecho, con un poco de creatividad, podemos usar cosas como fotos corporales de varias formas encantadoras. Aquí hay solo dos ejemplos que creé en mi tiempo libre. En el lado izquierdo, puedes ver cómo me vuelvo invisible mientras camino en mi cama. Y nota cuando camino en la cama, la cama todavía se deforma. Y esto es más poderoso que solo un truco barato donde solo reemplazas la imagen de fondo con una imagen estática. Puedo calcular las actualizaciones de fondo en tiempo real y solo eliminar mi cuerpo de las partes donde realmente está mi cuerpo. Y, por supuesto, ya sabes, no es perfecto, pero son los primeros pasos, y esto se hizo en solo un día. Así que cosas muy, muy geniales. Puedes ver aquí cómo JavaScript puede permitirte prototipar ideas muy, muy rápidamente. En el lado derecho, también hice un estimador de tallas de ropa. Ahora, no sé tú, pero soy realmente malo para saber qué talla de ropa soy cuando intento comprar ropa una vez al año. Y para diferentes marcas, tengo diferentes tallas, en algunas marcas soy pequeño, en otras marcas soy mediano. Así que nunca sé qué seleccionar al pagar. Aquí, en menos de 15 segundos, puedo obtener una estimación de mi talla de cuerpo para las medidas clave que les importan para esa marca en particular, y puedo seleccionar automáticamente al pagar la talla correcta para mí. Y eso me ahorra tiempo y dinero al tener que devolver cosas cuando no me quedan bien. Y esto resolvió un problema que tenía en mi vida diaria. A continuación, ¿qué tal si te das superpoderes? Un miembro de nuestra community combinó nuestro modelo de malla facial con sombreadores WebGL, para crear este efecto similar a Iron Man. Y aquí puedes ver láseres que salen de sus ojos y boca de una manera realmente hermosa y realista, lo cual podría ser genial para una activación con una compañía de cine, o algo así, para el lanzamiento de una nueva película. ¿O qué tal si lo combinas con otras tecnologías? Aquí vemos a otro miembro de la community usando WebXR y WebGL y TensorFlow.js juntos para extraer una imagen de un cuerpo de una revista y luego llevar ese cuerpo al mundo real, para poder inspeccionar el diseño de moda con más detalle. Incluso he visto a esta persona ir un paso más allá y hacer que la cara se anime y emita sonidos, lo cual es realmente genial.

5. WebRTC and Teleportation

Short description:

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

Short description:

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

Short description:

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.

el mismo número de imágenes de las cartas. Así que tengo 42 ahí. Eso es lo suficientemente cercano. Todo lo que necesito hacer ahora es hacer clic en entrenar modelo. Y ahora, en vivo en el navegador web, esto va a intentar categorizar los datos de entrenamiento que le he presentado en comparación con los que se le enseñaron previamente. Puedo ver que en menos de 30 segundos, ya está completo. Y actualmente está prediciendo JSON como resultado con un 99% de confianza. Lo cual es bastante bueno. Y si acerco mi mazo de cartas puedes ver que cambia a cartas con un 100% de confianza. Así que, cartas JSON. Cartas JSON. Y puedes ver lo fácil que fue hacerlo y lo robusto que es en realidad detectar esos dos objetos. Por supuesto, esto es un prototipo. Si esto fuera lo suficientemente bueno para lo que necesito, puedo hacer clic en exportar modelo aquí. Puedo hacer clic en el botón de descarga. Y por supuesto, luego puedo copiar este código y usarlo en mi propio sitio web si así lo elijo. Entonces, eso es Teachable Machine. Y es genial para prototipos. Sin embargo, si tienes gigabytes de data, es posible que desees usar algo más robusto para modelos de calidad de producción. Entonces, volvamos a las diapositivas y veamos cómo hacer eso.

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

Short description:

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.

es súper simple. De hecho, es tan simple que cabe en una diapositiva. Así que recorramos este código. Primero, vamos a importar la biblioteca TensorFlow.js usando esta etiqueta de script. Segundo, vamos a importar la biblioteca auto ML con la segunda etiqueta de script. Debajo de esto, he creado una imagen, que es simplemente una imagen de una margarita que encontré en algún lugar de Internet. Esta es la imagen que queremos clasificar. Esto podría ser algo más, como un fotograma de la cámara web o lo que sea. Pero esto, lo he tomado por simplicidad como daisy.jpg. Ahora, la parte principal del código está en estas tres líneas de JavaScript aquí. La primera simplemente llama a await tf.autoML load image classification. Y luego le pasamos model.json. Así que model.json aquí es el archivo que descargamos en la página anterior. Y esto estaría alojado en algún lugar de tu red de entrega de contenido o tu servidor web. Ahora, debido a que esta es una operación asíncrona, tenemos que usar la palabra clave await en JavaScript para indicarle a JavaScript que espere a que termine antes de continuar secuencialmente después de eso. Una vez que se haya cargado, porque el modelo puede tener un tamaño de varios megabytes, podemos pasar al siguiente paso. Entonces, a continuación, obtenemos una referencia a la imagen que queremos clasificar. En este caso, llamamos a document.getElementById Daisy, que se refiere a la imagen de Daisy de arriba aquí. Y ahora tenemos una referencia a eso en memoria. Todo lo que necesitamos hacer ahora es llamar a await model.classify y pasarle la imagen que quieres clasificar. Y esto, nuevamente, es una operación asíncrona porque esto puede llevar varios milisegundos en ejecutarse, lo cual, por supuesto, en términos informáticos es mucho tiempo. Así que queremos esperar a que termine y luego tendremos un objeto JSON asignado a esta constante de predicciones aquí a la izquierda, que luego puedes recorrer y ver todas las cosas que cree que ha encontrado en la imagen. Y con eso, puedes hacer lo que quieras. Puedes activar algo para que se ejecute. Podrías controlar un robot. Podrías hacer lo que quieras solo con unas pocas líneas de código. Así que súper genial y súper funcional.

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

Short description:

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

Short description:

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.

lo utilizó. Aquí podemos ver cómo Huggingface convirtió su modelo distill-burt para ejecutarse en Node.js. Básicamente, convirtieron las capas de pre y post-procesamiento para que estuvieran escritas en JavaScript en Node, y esto resultó en un aumento del rendimiento de dos veces en comparación con el equivalente en Python. Entonces, lo que es importante destacar aquí es que estamos utilizando el modelo guardado de Python, pero al convertir las capas de pre y post-procesamiento, obtenemos un aumento de velocidad de dos veces debido a la compilación en tiempo real de JavaScript en Node. Y hablando de eso, si estás pensando en ejecutar en el lado del cliente, también hay algunas superpotencias que debes considerar, y estas son difíciles o imposibles de lograr en el lado del servidor en Node o Python. La primera es la privacidad. Si estás ejecutando completamente en el lado del cliente, entonces ninguno de los datos del sensor se envía a un servidor para inferencia, y eso significa que la privacidad del cliente se mantiene por completo, y eso es muy importante para ciertos tipos de aplicaciones como médicas o legales, o si estás tratando de cumplir con ciertas reglas como el GDPR donde es posible que no se te permita transmitir datos a un servidor diferente. El segundo punto, si no hay un servidor involucrado, puedes lograr una menor latencia. Por lo general, puede llevar 100 milisegundos o más si estás usando un dispositivo móvil para comunicarte con un servidor y obtener los resultados. Si estás usando TensorFlow.js en el dispositivo, puedes eliminar ese intermediario y tener una latencia más baja para tus tiempos de inferencia, lo que resulta en un mayor número de cuadros por segundo para permitir aplicaciones en tiempo real. El tercer punto es un menor costo. Debido a que no hay servidores involucrados, puedes ahorrar costos significativos en la contratación de GPUs, RAM y CPUs que podrían estar funcionando las 24 horas del día, los 7 días de la semana para una aplicación de aprendizaje automático ocupada. Al hacer todo esto en el lado del cliente, no necesitas contratar esas piezas de hardware en primer lugar. Solo necesitas tener un CDN web estándar para entregar el sitio web. El cuarto punto es la interactividad. JavaScript desde el primer día ha sido diseñado para presentar información de una manera rica. Y tenemos bibliotecas maduras para gráficos 3D, visualización de datos, gráficos, y mucho, mucho más. Esto te permite prototipar cosas muy complejas muy, muy rápidamente y esta es una de las ventajas de usar JavaScript. Y luego el quinto punto es el alcance y la escala de la web. Cualquier persona en el mundo puede hacer clic en un enlace y usar tu modelo de aprendizaje automático en un navegador web. Lo mismo no es cierto si quieres hacer esto en Node o Python. Porque en primer lugar, debes entender cómo instalar Linux. En segundo lugar, debes instalar TensorFlow. Luego debes instalar los controladores rudimentarios. Y luego debes clonar el repositorio de GitHub de la persona, leer su archivo readme, y si todo eso funciona a tu favor, entonces podrías tener la oportunidad de ejecutar su modelo de aprendizaje automático. Así que puedes ver cómo hay una barrera de entrada mucho más baja si tu objetivo es que tu investigación sea utilizada por muchas personas en todo el mundo. Y eso puede ser realmente genial porque te permite identificar sesgos o errores que tal vez podrían haber pasado desapercibidos si solo diez personas lo estuvieran usando en lugar de diez mil. Y, por supuesto, con TensorFlow.js en el navegador, podemos ejecutar en GPUs en el 84% de los dispositivos debido a WebGL. Estamos limitados solo a tarjetas gráficas, pero también podemos ejecutar en las de AMD. Y así sucesivamente. Y si miramos el lado del servidor, también podemos ver algunos de los beneficios de ejecutar Node.js.

11. Benefits of TensorFlow.js and Community

Short description:

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!

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

6 min
Charlie Gerard's Career Advice: Be intentional about how you spend your time and effort
Featured Article
When it comes to career, Charlie has one trick: to focus. But that doesn’t mean that you shouldn’t try different things — currently a senior front-end developer at Netlify, she is also a sought-after speaker, mentor, and a machine learning trailblazer of the JavaScript universe. "Experiment with things, but build expertise in a specific area," she advises.

What led you to software engineering?My background is in digital marketing, so I started my career as a project manager in advertising agencies. After a couple of years of doing that, I realized that I wasn't learning and growing as much as I wanted to. I was interested in learning more about building websites, so I quit my job and signed up for an intensive coding boot camp called General Assembly. I absolutely loved it and started my career in tech from there.
 What is the most impactful thing you ever did to boost your career?I think it might be public speaking. Going on stage to share knowledge about things I learned while building my side projects gave me the opportunity to meet a lot of people in the industry, learn a ton from watching other people's talks and, for lack of better words, build a personal brand.
 What would be your three tips for engineers to level up their career?Practice your communication skills. I can't stress enough how important it is to be able to explain things in a way anyone can understand, but also communicate in a way that's inclusive and creates an environment where team members feel safe and welcome to contribute ideas, ask questions, and give feedback. In addition, build some expertise in a specific area. I'm a huge fan of learning and experimenting with lots of technologies but as you grow in your career, there comes a time where you need to pick an area to focus on to build more profound knowledge. This could be in a specific language like JavaScript or Python or in a practice like accessibility or web performance. It doesn't mean you shouldn't keep in touch with anything else that's going on in the industry, but it means that you focus on an area you want to have more expertise in. If you could be the "go-to" person for something, what would you want it to be? 
 And lastly, be intentional about how you spend your time and effort. Saying yes to everything isn't always helpful if it doesn't serve your goals. No matter the job, there are always projects and tasks that will help you reach your goals and some that won't. If you can, try to focus on the tasks that will grow the skills you want to grow or help you get the next job you'd like to have.
 What are you working on right now?Recently I've taken a pretty big break from side projects, but the next one I'd like to work on is a prototype of a tool that would allow hands-free coding using gaze detection. 
 Do you have some rituals that keep you focused and goal-oriented?Usually, when I come up with a side project idea I'm really excited about, that excitement is enough to keep me motivated. That's why I tend to avoid spending time on things I'm not genuinely interested in. Otherwise, breaking down projects into smaller chunks allows me to fit them better in my schedule. I make sure to take enough breaks, so I maintain a certain level of energy and motivation to finish what I have in mind.
 You wrote a book called Practical Machine Learning in JavaScript. What got you so excited about the connection between JavaScript and ML?The release of TensorFlow.js opened up the world of ML to frontend devs, and this is what really got me excited. I had machine learning on my list of things I wanted to learn for a few years, but I didn't start looking into it before because I knew I'd have to learn another language as well, like Python, for example. As soon as I realized it was now available in JS, that removed a big barrier and made it a lot more approachable. Considering that you can use JavaScript to build lots of different applications, including augmented reality, virtual reality, and IoT, and combine them with machine learning as well as some fun web APIs felt super exciting to me.


Where do you see the fields going together in the future, near or far? I'd love to see more AI-powered web applications in the future, especially as machine learning models get smaller and more performant. However, it seems like the adoption of ML in JS is still rather low. Considering the amount of content we post online, there could be great opportunities to build tools that assist you in writing blog posts or that can automatically edit podcasts and videos. There are lots of tasks we do that feel cumbersome that could be made a bit easier with the help of machine learning.
 You are a frequent conference speaker. You have your own blog and even a newsletter. What made you start with content creation?I realized that I love learning new things because I love teaching. I think that if I kept what I know to myself, it would be pretty boring. If I'm excited about something, I want to share the knowledge I gained, and I'd like other people to feel the same excitement I feel. That's definitely what motivated me to start creating content.
 How has content affected your career?I don't track any metrics on my blog or likes and follows on Twitter, so I don't know what created different opportunities. Creating content to share something you built improves the chances of people stumbling upon it and learning more about you and what you like to do, but this is not something that's guaranteed. I think over time, I accumulated enough projects, blog posts, and conference talks that some conferences now invite me, so I don't always apply anymore. I sometimes get invited on podcasts and asked if I want to create video content and things like that. Having a backlog of content helps people better understand who you are and quickly decide if you're the right person for an opportunity.What pieces of your work are you most proud of?It is probably that I've managed to develop a mindset where I set myself hard challenges on my side project, and I'm not scared to fail and push the boundaries of what I think is possible. I don't prefer a particular project, it's more around the creative thinking I've developed over the years that I believe has become a big strength of mine.***Follow Charlie on Twitter
ML conf EU 2020ML conf EU 2020
41 min
TensorFlow.js 101: ML in the Browser and Beyond
Discover how to embrace machine learning in JavaScript using TensorFlow.js in the browser and beyond in this speedy talk. Get inspired through a whole bunch of creative prototypes that push the boundaries of what is possible in the modern web browser (things have come a long way) and then take your own first steps with machine learning in minutes. By the end of the talk everyone will understand how to recognize an object of their choice which could then be used in any creative way you can imagine. Familiarity with JavaScript is assumed, but no background in machine learning is required. Come take your first steps with TensorFlow.js!
React Advanced Conference 2021React Advanced Conference 2021
21 min
Using MediaPipe to Create Cross Platform Machine Learning Applications with React
Top Content
This talk gives an introduction about MediaPipe which is an open source Machine Learning Solutions that allows running machine learning models on low-powered devices and helps integrate the models with mobile applications. It gives these creative professionals a lot of dynamic tools and utilizes Machine learning in a really easy way to create powerful and intuitive applications without having much / no knowledge of machine learning beforehand. So we can see how MediaPipe can be integrated with React. Giving easy access to include machine learning use cases to build web applications with React.
JSNation 2022JSNation 2022
36 min
Build a 3D Solar System with Hand Recognition and Three.js
Top Content
We live in exciting times. Frameworks like TensorFlowJS allow us to harness the power of AI models in the browser, while others like Three.js allow us to easily create 3D worlds. In this talk we will see how we can combine both, to build a full solar system, in our browser, using nothing but hand gestures!
ML conf EU 2020ML conf EU 2020
32 min
An Introduction to Transfer Learning in NLP and HuggingFace
In this talk I'll start introducing the recent breakthroughs in NLP that resulted from the combination of Transfer Learning schemes and Transformer architectures. The second part of the talk will be dedicated to an introduction of the open-source tools released HuggingFace, in particular our Transformers, Tokenizers and Datasets libraries and our models.

Workshops on related topic

JSNation Live 2021JSNation Live 2021
81 min
Intro to AI for JavaScript Developers with Tensorflow.js
Workshop
Have you wanted to explore AI, but didn't want to learn Python to do it? Tensorflow.js lets you use AI and deep learning in javascript – no python required!
We'll take a look at the different tasks AI can help solve, and how to use Tensorflow.js to solve them. You don't need to know any AI to get started - we'll start with the basics, but we'll still be able to see some neat demos, because Tensorflow.js has a bunch of functionality and pre-built models that you can use on the server or in the browser.
After this workshop, you should be able to set up and run pre-built Tensorflow.js models, or begin to write and train your own models on your own data.
ML conf EU 2020ML conf EU 2020
160 min
Hands on with TensorFlow.js
Workshop
Come check out our workshop which will walk you through 3 common journeys when using TensorFlow.js. We will start with demonstrating how to use one of our pre-made models - super easy to use JS classes to get you working with ML fast. We will then look into how to retrain one of these models in minutes using in browser transfer learning via Teachable Machine and how that can be then used on your own custom website, and finally end with a hello world of writing your own model code from scratch to make a simple linear regression to predict fictional house prices based on their square footage.
ML conf EU 2020ML conf EU 2020
112 min
The Hitchhiker's Guide to the Machine Learning Engineering Galaxy
Workshop
Are you a Software Engineer who got tasked to deploy a machine learning or deep learning model for the first time in your life? Are you wondering what steps to take and how AI-powered software is different from traditional software? Then it is the right workshop to attend.
The internet offers thousands of articles and free of charge courses, showing how it is easy to train and deploy a simple AI model. At the same time in reality it is difficult to integrate a real model into the current infrastructure, debug, test, deploy, and monitor it properly. In this workshop, I will guide you through this process sharing tips, tricks, and favorite open source tools that will make your life much easier. So, at the end of the workshop, you will know where to start your deployment journey, what tools to use, and what questions to ask.
ML conf EU 2020ML conf EU 2020
146 min
Introduction to Machine Learning on the Cloud
Workshop
This workshop will be both a gentle introduction to Machine Learning, and a practical exercise of using the cloud to train simple and not-so-simple machine learning models. We will start with using Automatic ML to train the model to predict survival on Titanic, and then move to more complex machine learning tasks such as hyperparameter optimization and scheduling series of experiments on the compute cluster. Finally, I will show how Azure Machine Learning can be used to generate artificial paintings using Generative Adversarial Networks, and how to train language question-answering model on COVID papers to answer COVID-related questions.