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

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Conozca Transformers.js, una innovadora biblioteca de JavaScript para ejecutar modelos de machine learning de última generación 100% localmente en su navegador. Con soporte para casi 2 000 modelos preentrenados, que abarcan una amplia gama de modalidades y tareas, Transformers.js permite a los desarrolladores integrar sin problemas capacidades avanzadas de ML en sus aplicaciones web. También exploraremos cómo aprovechamos las tecnologías web emergentes como WebGPU y WebNN para crear experiencias web interactivas, que preservan la privacidad y son escalables.

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

 Joshua Lochner
Joshua Lochner
27 min
12 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Joshua presenta Transformers JS y Hugging Face, enfatizando la colaboración comunitaria y los modelos preentrenados. La evolución de Transformers JS llevó a 1.4 millones de usuarios mensuales, apoyando 155 arquitecturas. Las capacidades basadas en el navegador de la biblioteca ofrecen procesamiento en tiempo real, rentabilidad y escalabilidad. Las mejoras de integración incluyen la ejecución nativa de web GPU y la implementación de React Native. La implementación de Web ML se centra en Onyx Runtime para la ejecución en dispositivos y web GPU para la optimización de recursos. Las aplicaciones de ML basadas en navegador cubren visión, reconocimiento de voz y texto a voz. Las implementaciones avanzadas incluyen aplicaciones multimodales y herramientas educativas. Las demostraciones interactivas de IA muestran búsqueda semántica y escenarios de IA conversacional. Se discuten las transiciones de licencias de modelos a ECMAScript para la eficiencia y los factores de redescarga de modelos.

1. Introducción a Transformers JS y Hugging Face

Short description:

Joshua presenta Transformers JS y su experiencia como ingeniero de aprendizaje automático. Hugging Face es una plataforma para la colaboración en modelos, conjuntos de datos y aplicaciones con una vasta comunidad. La plataforma ofrece una gran cantidad de modelos preentrenados, conjuntos de datos y aplicaciones para interacción y exploración.

Hola a todos. Mi nombre es Joshua y estoy muy emocionado de hablarles hoy sobre Transformers JS. Así que, primero, una pequeña introducción. Comenzando con ¿quién soy yo? Bueno, soy un ingeniero de aprendizaje automático de 25 años de Sudáfrica y uno de mis principales objetivos cuando me uní a Hugging Face en 2023 fue llevar el poder del aprendizaje automático directamente a la web y a su navegador. Una de las misiones en Hugging Face es democratizar el buen aprendizaje automático e incorporar y expandir nuestras bibliotecas de Python y nuestro conjunto de nuestro ecosistema en ese frente a la comunidad de desarrolladores de JavaScript era realmente importante y de ahí surgió este proyecto. Así que, y por último, soy muy apasionado del código abierto, creador de, supongo, Transformers JS, GingerJS, creo que ven un patrón allí y algunos más.

Así que tal vez un pequeño paso atrás, ¿qué es Hugging Face? Bueno, Hugging Face es una plataforma donde la comunidad de aprendizaje automático puede colaborar en modelos, conjuntos de datos y aplicaciones. Somos una comunidad muy grande, una comunidad muy grande y en crecimiento y si tienes algún modelo, conjunto de datos o espacios o aplicaciones como nos gusta llamarlos, nos encantaría que te unas y compartas esas demostraciones en nuestra plataforma. Así que, sí, si quieres buscar modelos en el Hugging Face Hub, tenemos alrededor de 1.7 millones de modelos preentrenados que puedes buscar con un montón de filtros y etiquetas que puedes seleccionar para básicamente filtrar tu búsqueda de los 1.7 millones a algo que realmente estás buscando.

Se mantiene actualizado y por supuesto puedes seleccionar también la etiqueta de la biblioteca Transformers JS para asegurarte de que puedes ver qué modelos son compatibles con la biblioteca Transformers JS. También tenemos una gran selección de conjuntos de datos. Así que en esta demostración, puedes ver que si tienes un conjunto de datos que te gustaría ver, puedes ir al visor de conjuntos de datos y luego incluso interactuar con él con lenguaje natural y luego eso se convertirá en una consulta donde básicamente puedes seleccionar los datos de una manera interactiva del conjunto de datos. Y por último, los espacios que es lo que llamamos nuestro directorio de aplicaciones. También puedes buscar si quieres, digamos, generar un modelo 3D a partir de la imagen, entonces buscas eso en la interfaz y aparecerá algo que puedes usar. Y aquí es donde nuestra comunidad realmente brilla. Tenemos una comunidad muy grande de personas que realmente quieren mostrar sus aplicaciones, los modelos que han creado y esta es la mejor manera en que las personas han podido mostrar sus modelos directamente desde el navegador. Y también mantenemos una gran colección de bibliotecas de código abierto. Puede que estés familiarizado con la biblioteca Transformers, diffusers, tokenizers, solo por nombrar algunos. Pero hoy nos centraremos en uno en particular, Transformers JS.

2. Evolution and Growth of Transformers JS

Short description:

Transformers JS es una biblioteca de JavaScript que permite el uso en el navegador de modelos preentrenados con facilidad. El proyecto, completamente de código abierto y dirigido por la comunidad, experimentó un rápido crecimiento hasta alcanzar 1.4 millones de usuarios mensuales. Comenzando con un clasificador de spam, la biblioteca evolucionó a través de varias versiones, ahora soportando 155 arquitecturas. Las contribuciones y el compromiso de la comunidad son muy apreciados.

Entonces, ¿qué es Transformers JS? Bueno, Transformers JS es una biblioteca de JavaScript que te permite ejecutar modelos preentrenados de última generación directamente en el navegador. El objetivo es hacerlo extremadamente fácil de usar, permitiéndote crear y añadir funcionalidad de aprendizaje automático directamente en tus aplicaciones web con tan solo tres líneas de código. Por supuesto, mencioné antes, somos completamente de código abierto, publicando todo en GitHub y es un desarrollo muy dirigido por la comunidad. Así que si la gente quiere una solicitud de función, ellos hacen, ya sabes, abren un issue en GitHub. Nos encanta la comunidad cuando podemos colaborar de esa manera.

Y solo otra indicación del crecimiento a lo largo del tiempo. Así que estos son nuestros usuarios mensuales únicos del conjunto de modelos de Transformers JS. Actualmente estamos alrededor de 1.4 millones de usuarios mensuales únicos. Y esto es básicamente el doble de lo que vimos hace unos seis meses. Y la tendencia sigue en aumento. Estamos realmente, realmente agradecidos por el apoyo y las personas que han podido crear aplicaciones realmente geniales con la biblioteca. Y también solo un poco de la línea de tiempo de desarrollo para aquellos interesados. Es un proyecto relativamente nuevo. Así que la idea era básicamente, bueno, el origen de la biblioteca era básicamente tomar un clasificador de spam preentrenado que había creado en mi tiempo libre y quería ejecutarlo como una extensión del navegador. Desafortunadamente, realmente no existía nada en ese momento que me permitiera hacerlo. Así que el siguiente paso lógico fue hacerlo yo mismo. Básicamente intentar llevar mi modelo preentrenado al navegador.

Afortunadamente, había muchas bibliotecas realmente geniales de las que te hablaré en breve que realmente me permitieron juntar todo de una manera que me permitió ejecutar el modelo en el navegador. El lanzamiento de la V1 de Transformers JS ocurrió en marzo de 2023. Y en ese momento solo soportábamos alrededor de cinco arquitecturas diferentes, pero como pronto verás, el número comenzó a crecer lentamente y luego rápidamente. Así que la siguiente V2, el siguiente paso lógico fue hacer una reescritura completa de CommonJS a ECMAScript. Y en ese momento, tal vez como dos meses después, estábamos en 19 arquitecturas soportadas. Y luego V3, que es nuestro lanzamiento más grande hasta ahora, fue básicamente introducir soporte para WebGPU y WebNN. Y luego pudimos soportar 119 arquitecturas diferentes. Y luego donde estamos actualmente estamos alrededor de 155 arquitecturas diferentes y hay muchas cosas planeadas para la biblioteca que supongo cubriré en breve. Y una vez más, solo un gran agradecimiento a nuestra comunidad en todo el mundo. Creando demos, contribuyendo a la biblioteca y publicando en redes sociales sobre lo que han creado, es realmente, realmente genial de ver desde nuestro lado también. Así que gracias. Y un conjunto más de diapositivas sobre estadísticas.

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

Embracing WebGPU and WebXR With Three.js
JSNation 2024JSNation 2024
27 min
Embracing WebGPU and WebXR With Three.js
Top Content
The 3JS project has evolved into a community-driven effort with numerous contributors over the past 14 years. It started with 3D engine work in Flash and transitioned to using SVGs for rendering in HTML5 before adopting WebGL. The project showcases various projects and frameworks, including a no-code tool powered by 3.js. The team is working on a new render using WebGPU and developing a new shader language called TSL. The hope is that WebGPU will eventually replace WebGL, offering better control and performance.
TensorFlow.js 101: Aprendizaje automático en el navegador y más allá
ML conf EU 2020ML conf EU 2020
41 min
TensorFlow.js 101: Aprendizaje automático en el navegador y más allá
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.
Unreal Engine en WebAssembly/WebGPU
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Unreal Engine en WebAssembly/WebGPU
Top Content
Alex Saint-Louis, co-founder of Wunder Interactive, shares the mission of bringing Unreal Engine to the browser, enabling cross-platform 3D applications and games. They are working on a WebGPU back end for Unreal Engine to push the limits of 3D on the web. Wunder Interactive has improved compression, built their own asset file system, and offers powerful tools for game developers. They are utilizing modern web technologies like WebAssembly, WebGL, and WebGPU, and plan to support other engines like Unity and Godot. The team aims to transform the industry by bringing console-quality games to the browser and providing an alternative distribution path. They are excited to bring Unreal Engine 5 to the web with WebGPU support and are working on WebXR support for cross-platform 3D experiences, including VR.
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.
Ampliando Unity WebGL con Javascript
JS GameDev Summit 2022JS GameDev Summit 2022
32 min
Ampliando Unity WebGL con Javascript
Top Content
Unity targets over 25 platforms and technologies, including desktop, mobile, and virtual reality. They use Emscripten to compile the engine and game logic into WebAssembly for web development. Unity can be extended with plugins to access browser features like WebXR's augmented reality mode. The speaker demonstrates intercepting Unity's calls to the browser to modify its behavior. Unity is actively working on mobile support for web export and improving documentation for extending Unity with web plugins.

Workshops on related topic

¿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.
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
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
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
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.
Introducción al Aprendizaje Automático en la Nube
ML conf EU 2020ML conf EU 2020
146 min
Introducción al Aprendizaje Automático en la Nube
Workshop
Dmitry Soshnikov
Dmitry Soshnikov
Este masterclass será tanto una introducción suave al Aprendizaje Automático, como un ejercicio práctico de uso de la nube para entrenar modelos de aprendizaje automático simples y no tan simples. Comenzaremos utilizando ML Automático para entrenar el modelo para predecir la supervivencia en el Titanic, y luego pasaremos a tareas de aprendizaje automático más complejas como la optimización de hiperparámetros y la programación de series de experimentos en el clúster de cómputo. Finalmente, mostraré cómo Azure Machine Learning se puede utilizar para generar pinturas artificiales utilizando Redes Generativas Adversarias, y cómo entrenar un modelo de preguntas y respuestas de lenguaje en documentos de COVID para responder preguntas relacionadas con COVID.