Versión en EspañolES

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

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!

This talk has been presented at JSNation Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

TensorFlow.js es una biblioteca de JavaScript para el aprendizaje automático que permite ejecutar, reentrenar modelos mediante aprendizaje por transferencia y escribir tus propios modelos desde cero en el navegador y otros entornos JavaScript, como Node.js, React Native y Electron.

Usar TensorFlow.js en el navegador ofrece varias ventajas como la privacidad total de los datos al no tener que enviar imágenes a un servidor, menor latencia, reducción de costos de infraestructura y la posibilidad de usar modelos de aprendizaje automático en tiempo real.

Con TensorFlow.js, puedes utilizar modelos preentrenados que cubren una variedad de casos de uso como detección de objetos, segmentación corporal y reconocimiento de puntos de referencia faciales, simplificando significativamente el proceso de implementación de soluciones de IA.

El aprendizaje por transferencia en TensorFlow.js te permite reentrenar modelos existentes con tus propios datos personalizados, permitiendo adaptar modelos de aprendizaje automático a necesidades específicas sin empezar el entrenamiento desde cero.

Cloud AutoML permite entrenar modelos de visión personalizados que luego pueden ser exportados como TensorFlow.js. Simplemente debes cargar tus imágenes en Google Cloud Storage, entrenar el modelo en la nube y exportar el modelo en formato TensorFlow.js para su uso en aplicaciones web.

Puedes visitar el sitio web oficial de TensorFlow.js para acceder a tutoriales y recursos de aprendizaje. Además, el libro 'Deep Learning with JavaScript' es una excelente fuente para profundizar en el tema, y la comunidad en línea ofrece ejemplos y soporte técnico.

Teachable Machine es un sitio web que permite entrenar e inferir modelos de aprendizaje automático completamente en el navegador. Es una herramienta útil para prototipos y puede ser utilizada para entrenar modelos para detección de objetos y otros casos, exportando luego los modelos para usarlos con TensorFlow.js.

tensorflow machine learning

Jason Mayes

39 min

11 Jun, 2021

Comments

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: TensorFlow.JS 101: ML in the Browser and Beyond

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!

Available in other languages:

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

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

ML conf EU 2020

41 min

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

Jason Mayes

Web AI Lead at Google.

TensorFlow.js enables machine learning in the browser and beyond, with features like face mesh, body segmentation, and pose estimation. It offers JavaScript prototyping and transfer learning capabilities, as well as the ability to recognize custom objects using the Image Project feature. TensorFlow.js can be used with Cloud AutoML for training custom vision models and provides performance benefits in both JavaScript and Python development. It offers interactivity, reach, scale, and performance, and encourages community engagement and collaboration between the JavaScript and machine learning communities.

tensorflow machine learning innovation tensorflow react

Transformers.js: Machine Learning de Última Generación para la Web

JSNation 2025

27 min

Transformers.js: Machine Learning de Última Generación para la Web

Joshua Lochner

Hugging Face

Joshua introduces Transformers JS and Hugging Face, emphasizing community collaboration and pre-trained models. Transformers JS evolution led to 1.4 million monthly users, supporting 155 architectures. The library's browser-based capabilities offer real-time processing, cost-efficiency, and scalability. Integration enhancements include native web GPU execution and React Native implementation. Web ML implementation focuses on Onyx Runtime for device execution and web GPU for resource optimization. Browser-based ML applications cover vision, speech recognition, and text-to-speech. Advanced implementations include multimodal applications and educational tools. Interactive AI demonstrations showcase semantic search and conversational AI scenarios. Model licensing transitions to ECMAScript for efficiency and model redownloading factors are discussed.

machine learning webgpu

Construye un Sistema Solar 3D con Reconocimiento de Manos y Three.js

JSNation 2022

36 min

Construye un Sistema Solar 3D con Reconocimiento de Manos y Three.js

Workshops on related topic

¿Pueden los LLM aprender? Personalicemos un LLM para chatear con tus propios datos

C3 Dev Festival 2024

48 min

¿Pueden los LLM aprender? Personalicemos un LLM para chatear con tus propios datos

WorkshopFree

Andreia Ocanoaia

Sientes las limitaciones de los LLMs? Pueden ser creativos, pero a veces carecen de precisión o se basan en información desactualizada. En esta masterclass, desglosaremos el proceso de construir y desplegar fácilmente un sistema de Generación con Recuperación Mejorada. Este enfoque te permite aprovechar el poder de los LLMs con el beneficio adicional de precisión factual e información actualizada.

machine learning artificial intelligence openai

Aprovechando LLMs para Construir Experiencias de IA Intuitivas con JavaScript

JSNation 2024

108 min

Aprovechando LLMs para Construir Experiencias de IA Intuitivas con JavaScript

Workshop

2 authors

Hoy en día, todos los desarrolladores están utilizando LLMs en diferentes formas y variantes, desde ChatGPT hasta asistentes de código como GitHub CoPilot. Siguiendo esto, muchos productos han introducido capacidades de IA integradas, y en este masterclass haremos que los LLMs sean comprensibles para los desarrolladores web. Y nos adentraremos en la codificación de tu propia aplicación impulsada por IA. No se necesita experiencia previa en trabajar con LLMs o aprendizaje automático. En su lugar, utilizaremos tecnologías web como JavaScript, React que ya conoces y amas, al mismo tiempo que aprendemos sobre algunas nuevas bibliotecas como OpenAI, Transformers.js

machine learning artificial intelligence openai

Deja que la IA sea tu Documentación

JSNation 2024

69 min

Deja que la IA sea tu Documentación

Workshop

Jesse Hall

Únete a nuestro masterclass dinámico para crear un portal de documentación impulsado por IA. Aprende a integrar ChatGPT de OpenAI con Next.js 14, Tailwind CSS y tecnología de vanguardia para ofrecer soluciones de código e resúmenes instantáneos. Esta sesión práctica te equipará con el conocimiento para revolucionar la forma en que los usuarios interactúan con la documentación, convirtiendo las búsquedas tediosas en descubrimientos eficientes e inteligentes.
Aspectos destacados:
- Experiencia práctica en la creación de un sitio de documentación impulsado por IA.- Comprensión de la integración de la IA en las experiencias de usuario.- Habilidades prácticas con las últimas tecnologías de desarrollo web.- Estrategias para implementar y mantener recursos de documentación inteligente.
Tabla de contenidos:- Introducción a la IA en la documentación- Configuración del entorno- Construcción de la estructura de documentación- Integración de ChatGPT para documentación interactiva

frameworks machine learning artificial intelligence

Introducción a la IA para Desarrolladores de JavaScript con Tensorflow.js

JSNation Live 2021

81 min

Introducción a la IA para Desarrolladores de JavaScript con Tensorflow.js

Workshop

Chris Achard

¿Has querido explorar la IA, pero no has querido aprender Python para hacerlo? ¡Tensorflow.js te permite usar IA y aprendizaje profundo en javascript, sin necesidad de Python!
Veremos las diferentes tareas que la IA puede ayudar a resolver y cómo usar Tensorflow.js para resolverlas. No necesitas saber nada de IA para empezar, comenzaremos desde lo básico, pero aún así podremos ver algunas demos interesantes, porque Tensorflow.js tiene muchas funcionalidades y modelos preconstruidos que puedes usar en el servidor o en el navegador.
Después de este masterclass, deberías ser capaz de configurar y ejecutar modelos preconstruidos de Tensorflow.js, o comenzar a escribir y entrenar tus propios modelos con tus propios datos.

tensorflow artificial intelligence

Prácticas con TensorFlow.js

ML conf EU 2020

160 min

Prácticas con TensorFlow.js

Workshop

Jason Mayes

Ven y descubre nuestro masterclass que te guiará a través de 3 recorridos comunes al usar TensorFlow.js. Comenzaremos demostrando cómo usar uno de nuestros modelos predefinidos, clases de JS muy fáciles de usar para trabajar rápidamente con ML. Luego veremos cómo volver a entrenar uno de estos modelos en minutos utilizando el aprendizaje por transferencia en el navegador a través de Teachable Machine y cómo se puede usar en tu propio sitio web personalizado. Finalmente, terminaremos con un hola mundo escribiendo tu propio código de modelo desde cero para hacer una regresión lineal simple y predecir los precios ficticios de las casas en función de sus metros cuadrados.

tensorflow machine learning

La Guía del Autoestopista de la Galaxia de Ingeniería de Aprendizaje Automático

ML conf EU 2020

112 min

La Guía del Autoestopista de la Galaxia de Ingeniería de Aprendizaje Automático

Workshop

Alyona Galyeva

¿Eres un Ingeniero de Software al que se le asignó la tarea de implementar un modelo de aprendizaje automático o aprendizaje profundo por primera vez en tu vida? ¿Te preguntas qué pasos seguir y cómo se diferencia el software impulsado por IA del software tradicional? Entonces este es el masterclass adecuado al que asistir.
Internet ofrece miles de artículos y cursos gratuitos que muestran lo fácil que es entrenar e implementar un modelo de IA simple. Al mismo tiempo, en la realidad es difícil integrar un modelo real en la infraestructura actual, depurarlo, probarlo, implementarlo y monitorearlo correctamente. En este masterclass, te guiaré a través de este proceso compartiendo consejos, trucos y herramientas de código abierto favoritas que te facilitarán mucho la vida. Así que al final del masterclass, sabrás por dónde empezar tu viaje de implementación, qué herramientas utilizar y qué preguntas hacer.

machine learning