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!

This talk has been presented at ML conf EU 2020, check out the latest edition of this Tech Conference.

FAQ

TensorFlow.js es una biblioteca de JavaScript para entrenar y desplegar modelos de aprendizaje automático en el navegador y en el servidor. Se utiliza para realizar tareas de aprendizaje automático como reconocimiento de objetos, análisis de sentimientos, y mucho más, directamente en el entorno del cliente o del servidor sin necesidad de complementos adicionales.

Con TensorFlow.js, puedes ejecutar modelos pre-entrenados, reentrenarlos mediante transferencia de aprendizaje, o escribir tus propios modelos de aprendizaje automático desde cero directamente en el navegador. Esto permite aplicaciones como la realidad aumentada, reconocimiento de sonido, y análisis de sentimientos, ejecutándose en tiempo real sin enviar datos a un servidor externo.

TensorFlow.js permite ejecutar algoritmos de aprendizaje automático en una amplia variedad de entornos sin necesidad de plugins adicionales, incluyendo navegadores, servidores, escritorios, móviles e Internet de las cosas. Además, JavaScript es uno de los lenguajes más utilizados, lo que facilita la integración de aprendizaje automático en aplicaciones web y móviles existentes.

TensorFlow.js ofrece varios modelos pre-entrenados que pueden utilizarse para detección de objetos, segmentación corporal, estimación de postura, detección de puntos de referencia faciales, y más. Estos modelos son fáciles de integrar y usar en aplicaciones web para realizar tareas complejas de visión por computadora y procesamiento de lenguaje natural.

Al ejecutar modelos de aprendizaje automático directamente en el navegador, TensorFlow.js ayuda a mantener la privacidad de los datos del usuario, ya que no se envían a un servidor externo. Además, esto puede reducir significativamente los costos asociados con el mantenimiento de servidores y la gestión de datos, ya que el procesamiento se realiza en el dispositivo del usuario.

Sí, TensorFlow.js permite reentrenar modelos existentes con nuevos datos a través del aprendizaje por transferencia. Esto se puede hacer directamente en el navegador, permitiendo a los desarrolladores personalizar modelos según sus necesidades específicas sin necesidad de un backend complicado.

TensorFlow.js cuenta con una amplia documentación en su sitio web oficial, tutoriales interactivos, y ejemplos de código en plataformas como Glitch. Además, hay libros como 'Deep Learning with JavaScript' y una comunidad activa en línea donde los desarrolladores pueden compartir sus proyectos y resolver dudas.

Jason Mayes
Jason Mayes
41 min
02 Jul, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
TensorFlow.js permite el aprendizaje automático en el navegador y más allá, con características como malla facial, segmentación corporal y estimación de postura. Ofrece capacidades de prototipado y transferencia de JavaScript, así como la capacidad de reconocer objetos personalizados utilizando la función de Proyecto de Imagen. TensorFlow.js se puede utilizar con Cloud AutoML para entrenar modelos de visión personalizados y proporciona beneficios de rendimiento tanto en el desarrollo de JavaScript como en Python. Ofrece interactividad, alcance, escala y rendimiento, y fomenta la participación y colaboración de la comunidad entre las comunidades de JavaScript y aprendizaje automático.

1. Introducción a TensorFlow.js

Short description:

Hola a todos. Voy a hablarles sobre el aprendizaje automático en el navegador y más allá. JavaScript es uno de los únicos lenguajes que puede ejecutarse en todos estos entornos sin complementos adicionales. TensorFlow.js es una excelente manera de entrenar sus modelos de aprendizaje automático. Puede crear cualquier cosa que pueda imaginar, desde realidad aumentada hasta análisis de sentimientos. La forma más fácil es usar nuestros modelos pre-entrenados, que incluyen detección de objetos, segmentación corporal, estimación de postura y detección de puntos de referencia faciales. Puede ver esto en acción en vivo en el navegador, incluso usando la cámara web.

TensorFlow.js. Hola a todos. Voy a hablarles sobre el aprendizaje automático en el navegador y más allá. Así que empecemos.

Ahora, en primer lugar, ¿por qué querrías usar el aprendizaje automático en JavaScript? Esa es una gran pregunta. Y si miramos aquí, podemos ver que podemos usar el aprendizaje automático en cualquier lugar donde JavaScript pueda ejecutarse, y eso es realmente muchos lugares. El navegador web, el lado del servidor, el escritorio, el móvil e incluso el Internet de las cosas. Y JavaScript es uno de los únicos lenguajes que puede ejecutarse en todos estos entornos sin complementos adicionales. Y eso solo es muy, muy poderoso.

Y con TensorFlow.js, puedes ejecutar, reentrenar mediante transferencia de aprendizaje o escribir tus propios modelos de aprendizaje automático completamente desde cero si quieres. Y también puedes usar TensorFlow.js para ejecutar tus propios modelos de aprendizaje automático. Así que empecemos. TensorFlow.js es una excelente manera de entrenar tus modelos de aprendizaje automático, y puedes ejecutar, reentrenar o escribir tus propios modelos de aprendizaje automático completamente 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.

Entonces, la forma más fácil es usar nuestros modelos pre-entrenados. Estos son clases de JavaScript muy fáciles de usar para muchos casos de uso comunes, como podemos ver en la diapositiva actual. Y 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 el procesamiento del lenguaje natural es compatible en el navegador. Así que veamos algunos de estos en acción. Ahora, lo primero que tenemos es 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, con los perros resaltados con sus cuadros delimitadores, e incluso podemos saber que hay dos perros en esta imagen ya que ambos nos son devueltos. Así que veamos esto en acción en vivo para ver cómo funciona en el navegador.

De acuerdo, aquí hay una página web que creé que está ejecutando 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 funcionando para cualquier objeto que encuentre en esas imágenes, incluso si son diferentes tipos de clases de objetos. Pero podemos hacerlo mejor que esto, podemos habilitar la cámara web y luego 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 muy genial, porque no solo se ejecuta en un script del lado del cliente, sino que se ejecuta en el lado del cliente en un navegador, lo que significa que ninguna de estas imágenes de la cámara web se envía a un servidor para su clasificación. No solo eso ahorra costos, también significa que se preserva mi privacidad, y eso es realmente importante en estos días. Y con TensorFlow.js, puedes obtener eso de forma gratuita. Así que a continuación, tenemos la malla facial.

2. Malla facial, Segmentación corporal y Estimación de postura

Short description:

Esta parte presenta la función de malla facial, que puede reconocer 468 puntos de referencia faciales en el rostro humano. También muestra el rendimiento en tiempo real de la malla facial en un navegador web, con la capacidad de mover el rostro y ver la superposición de la malla. Además, se demuestra el uso de la segmentación corporal y la estimación de postura, resaltando el potencial creativo de estos modelos.

Esto tiene solo 3 megabytes de tamaño y puede reconocer 468 puntos de referencia faciales en el rostro humano. Y esta es una característica realmente genial, y voy a mostrarte cómo usarla en la diapositiva ahora mismo.

Ahora, las personas están comenzando a utilizar esto para casos de uso del mundo real, como L'Oreal, y han creado una prueba de maquillaje de realidad aumentada, que te permite probar lápiz labial en este caso en realtime sin siquiera tener que estar físicamente presente en la tienda. Así que debes tener en cuenta que la mujer del lado derecho no está usando lápiz labial. Estamos utilizando la malla facial para comprender dónde están sus labios, y cómo aplicar el lápiz labial que ella desea en su rostro en realtime. Así que esto es súper genial, y estoy seguro de que vamos a ver más cosas como esta en el futuro.

Veamos la malla facial en acción para ver cómo funciona en el mundo real. Cambiemos a la demostración. Bien, ahora puedes verme hablando contigo con la malla facial funcionando en realtime en el navegador web al mismo tiempo. En el lado izquierdo aquí, puedes ver el aprendizaje automático en acción, y de hecho hay una malla de mi rostro superpuesta en el navegador web, y puedo mover mi rostro y es bastante robusto. Puedo abrir y cerrar la boca y los ojos, y puedes ver que todo eso sucede en realtime. Y estamos obteniendo aproximadamente 25 cuadros 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 cuadros por segundo si quisiera, pero también puedo cambiar como desarrollador a Wasm, que es WebAssembly, para ejecutar en una CPU, o puedo elegir ejecutar en la CPU por sí misma, que es la forma más lenta de ejecución. Así que 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 representar esta 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, por lo que tienes muchas bibliotecas, especialmente para gráficos 3D, para poder 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 el navegador.

Bien, volvamos a las diapositivas. A continuación está la segmentación corporal. Esto te permite distinguir 24 áreas corporales en múltiples cuerpos, todo en realtime. Puedes ver esto en acción en la diapositiva, y en el lado derecho tenemos varias líneas que representan diferentes partes de cada cuerpo. Aún mejor, también tenemos la estimación de postura, esas líneas azules claras contenidas en cada uno de los cuerpos del lado derecho, que nos permiten estimar dónde está el esqueleto humano. Y con eso, se pueden crear demostraciones realmente poderosas, como la capacidad de reconocer cuando estás en una cierta postura o un gesto, o algo así. Y tenemos muchos datos geniales de nuestros 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 imágenes 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 observa cuando camino en la cama, la cama todavía se deforma. Y con esta imagen estática, puedo calcular las actualizaciones del fondo en tiempo real y solo eliminar mi cuerpo de las partes donde realmente está mi cuerpo. Y, por supuesto, no es perfecto, pero son los primeros pasos, y esto se hizo en solo un día.

QnA

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

Construyendo Interfaces Controladas por el Cerebro en JavaScript
JSNation Live 2021JSNation Live 2021
27 min
Construyendo Interfaces Controladas por el Cerebro en JavaScript
Top Content
Learn how to build brain-controlled interfaces using JavaScript and brain sensors. Understand the functions of different parts of the brain and how they relate to sensor placement. Explore examples of calm and focus detection, as well as the Kinesis API for mental commands. Discover the applications of brain-controlled interfaces, such as scrolling web pages and password-less authentication. Understand the limits and opportunities of brain control and the potential for using brain sensors in medical applications.
Creando lo Imposible: Virtualización X86 en el Navegador con WebAssembly
JSNation 2022JSNation 2022
21 min
Creando lo Imposible: Virtualización X86 en el Navegador con WebAssembly
ChirpX is a technology to securely run binary code in the browser, written in C++ and compiled to JavaScript WebAssembly. It can run a full virtualized system in the browser, including Bash and other languages like Python and JavaScript. ChirpX aims for scalability and the ability to work with large code bases, supporting multiprocessing and multithreading. It uses a two-tiered execution engine with an interpreter and a JIT engine. Future plans include running the full X.Org server in the browser and implementing the Windows system call. WebVM, the underlying technology, has a virtual file system backed by Cloudflare.
Construye un Sistema Solar 3D con Reconocimiento de Manos y Three.js
JSNation 2022JSNation 2022
36 min
Construye un Sistema Solar 3D con Reconocimiento de Manos y Three.js
Top Content
This Talk explores the use of TypeScript, 3JS, hand recognition, and TensorFlow.js to create 3D experiences on the web. It covers topics such as rendering 3D objects, adding lights and objects, hand tracking, and creating interactive gestures. The speaker demonstrates how to build a cube and a bouncy box, move objects with flick gestures, and create a solar system with stars and planets. The Talk also discusses the possibilities of using hand gestures for web navigation and controlling websites, as well as the performance limits of these technologies.
Uso de MediaPipe para Crear Aplicaciones de Aprendizaje Automático Multiplataforma con React
React Advanced 2021React Advanced 2021
21 min
Uso de MediaPipe para Crear Aplicaciones de Aprendizaje Automático Multiplataforma con React
Top Content
MediaPipe is a cross-platform framework that helps build perception pipelines using machine learning models. It offers ready-to-use solutions for various applications, such as selfie segmentation, face mesh, object detection, hand tracking, and more. MediaPipe can be integrated with React using NPM modules provided by the MediaPipe team. The demonstration showcases the implementation of face mesh and selfie segmentation solutions. MediaPipe enables the creation of amazing applications without needing to understand the underlying computer vision or machine learning processes.
Makepad - Aprovechando Rust + Wasm + WebGL para construir aplicaciones multiplataforma increíbles
JSNation 2022JSNation 2022
22 min
Makepad - Aprovechando Rust + Wasm + WebGL para construir aplicaciones multiplataforma increíbles
Top Content
Welcome to MakePad, a new way to build UI for web and native using WebAssembly and Rust. JavaScript is not suitable for complex applications like IDEs and design tools. Rust, a new programming language, was used to reimagine MakePad, resulting in a fast and efficient platform. MakePad offers live editing, high CPU performance, and the ability to load native instrument components. The future of MakePad includes an open-source release, a design tool, and support for importing 3D models.

Workshops on related topic

Aprovechando LLMs para Construir Experiencias de IA Intuitivas con JavaScript
JSNation 2024JSNation 2024
108 min
Aprovechando LLMs para Construir Experiencias de IA Intuitivas con JavaScript
Featured Workshop
Roy Derks
Shivay Lamba
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
¿Pueden los LLM aprender? Personalicemos un LLM para chatear con tus propios datos
C3 Dev Festival 2024C3 Dev Festival 2024
48 min
¿Pueden los LLM aprender? Personalicemos un LLM para chatear con tus propios datos
WorkshopFree
Andreia Ocanoaia
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.
Deja que la IA sea tu Documentación
JSNation 2024JSNation 2024
69 min
Deja que la IA sea tu Documentación
Workshop
Jesse Hall
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
Introducción a la IA para Desarrolladores de JavaScript con Tensorflow.js
JSNation Live 2021JSNation Live 2021
81 min
Introducción a la IA para Desarrolladores de JavaScript con Tensorflow.js
Workshop
Chris Achard
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.
Prácticas con TensorFlow.js
ML conf EU 2020ML conf EU 2020
160 min
Prácticas con TensorFlow.js
Workshop
Jason Mayes
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.
La Guía del Autoestopista de la Galaxia de Ingeniería de Aprendizaje Automático
ML conf EU 2020ML conf EU 2020
112 min
La Guía del Autoestopista de la Galaxia de Ingeniería de Aprendizaje Automático
Workshop
Alyona Galyeva
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.