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
See 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.

3. Capabilities and Benefits of Transformers JS

Short description:

Transformers JS soporta varias tareas con 155 arquitecturas diferentes y 1,850 modelos en el Hugging Face Hub. La integración con diferentes navegadores permite ejecutar modelos en Chrome, Edge, Brave, Firefox AI runtime, y próximamente soporte en Safari. Ejecutar modelos en el navegador ofrece beneficios como seguridad, procesamiento en tiempo real, eficiencia de costos, escalabilidad y versatilidad en diferentes tiempos de ejecución.

Estamos alrededor de un millón de descargas de NPM en los últimos 30 días. Y en la parte inferior, el número de solicitudes de entrega de CDN de JS para aquellos que no quieren instalar a través de NPM. Entonces, ¿qué puede hacer Transformers JS? Soportamos una variedad de tareas. Nos gusta clasificarlas en tareas de texto, visión, audio y multimodal. Y puedes ver algunas de las listas aquí. Como mencioné antes, soportamos alrededor de 155 arquitecturas diferentes a través de 27 diferentes tareas. Así que ya sea clasificación de texto o, digamos, reconocimiento de voz, texto a voz, esas cosas. Y tenemos alrededor de 1,850 modelos listos para usar en el Hugging Face Hub. Así que solo tienes que reemplazar el ID del modelo con un modelo que te guste o que hayas afinado y podrás, con suerte, ejecutarlo en el navegador.

También tenemos una gran integración en diferentes navegadores. Así que los navegadores basados en Chromium tienen un muy buen soporte para web GPU, por ejemplo. Así que Chrome, Edge, Brave, navegadores como esos. Transformers JS en realidad potencia el runtime de Firefox AI en colaboración con Onyx Runtime. Y por último, Safari, que de hecho hace unos días anunció que el soporte para web GPU se lanzará en Safari 26 Beta. Y eso significa que podremos ejecutar modelos de Transformers JS en Mac OS, iOS, iPad OS, e incluso Vision OS, lo cual es realmente emocionante.

Solo algunos beneficios de por qué querrías ejecutar modelos en el navegador. Así que número uno, seguridad y privacidad. Ya que ninguno de tus datos, y especialmente ninguno de tus datos sensibles de sensores como el micrófono o la entrada de la cámara se envía a un servidor remoto, todo sucede localmente. Por supuesto, las aplicaciones en tiempo real son un gran beneficio porque no hay latencia de red. Digamos, por ejemplo, eliminación de fondo en tiempo real. No tienes que enviar una imagen de tu pantalla cada fotograma, lo cual sería completamente No tiene sentido. Y luego costos más bajos tanto para los desarrolladores, porque no tienen que pagar por la inferencia o costos de servidor, y también para el usuario, donde estás usando tu propio cómputo, así que no tienes que usar claves de API o algo así. Y luego creo que un gran beneficio de distribuir a través de la web es que es altamente escalable. Todo lo que necesito hacer para compartir una aplicación con todos en la audiencia hoy es darles un enlace y pueden ejecutarlo en su dispositivo. Y otra razón, como habrás visto hace unos días, es cuando OpenAI o ChatGPT estuvo inactivo durante bastantes horas. Así que ese es otro beneficio de ejecutar en el dispositivo. Y luego también, nos beneficiamos enormemente de la versatilidad de JavaScript. Así que como mencioné, podemos ejecutar en navegadores, pero esa es solo una parte de la historia. Tenemos soporte para... Puedes ejecutar en Node.js, Bund, todos estos diferentes tiempos de ejecución.

4. Integration and Execution Enhancements

Short description:

Soporte para varias bibliotecas, frameworks, herramientas de construcción y entornos. Desarrollo de ejecución nativa de web GPU para aplicaciones aceleradas por GPU e implementación de React Native con soporte de GPU. Descripción del proceso: selección de modelos, conversión usando bibliotecas como Optimum o Onyx Runtime, y ejecución con Onyx Runtime para experiencias versátiles de aprendizaje automático.

Tus bibliotecas o frameworks favoritos, ya sea React, Next.js, Svelte, Angular, todos estos. Y luego tenemos soporte para diferentes herramientas de construcción, supongo. Y luego, por supuesto, los entornos, donde básicamente puedes, si quieres ejecutar en un trabajador web, como una extensión del navegador, sin servidor tal vez en funciones de borde super-based o aplicaciones de escritorio con Electron. Todos esos son posibles.

También estamos trabajando en la ejecución nativa de web GPU en colaboración con Onyx Runtime y Onyx Runtime Web, lo que mejorará enormemente el soporte para aplicaciones aceleradas por GPU, por ejemplo, en tus aplicaciones Electron o, digamos, una función de borde. Y luego, otro de nuestros objetivos es poder implementar y ejecutar en React Native con soporte de GPU también. Pero esas son algunas cosas en las que estamos trabajando.

Diapositiva rápida sobre cómo funciona. Así que primero tomas tu modelo que has entrenado en el entorno de Python, o puedes usar uno de nuestros modelos preconvertidos. Y hay algunos conjuntos de bibliotecas, como Optimum o Onyx Runtime, que puedes usar para convertir tus modelos de PyTorch, Jax o TensorFlow al formato Onyx. Y Onyx significa intercambio de red neuronal abierta. Es básicamente un formato que permite experiencias de aprendizaje automático altamente interoperables.

5. Web Application ML Implementation

Short description:

Creación de pipelines de ML en aplicaciones web usando Onyx Runtime para la ejecución de modelos en varios dispositivos. Introducción al web GPU como sucesor de WebGL, permitiendo una API moderna para gráficos acelerados y computación. Importancia de la cuantización para la optimización de recursos y consideraciones para desarrollar aplicaciones web, incluyendo características del dispositivo y hardware objetivo. Logros de rendimiento con LLMs en web GPU, mostrando velocidades de modelos en diferentes configuraciones de hardware.

Y luego escribes tu código JavaScript, así que en este caso, solo unas pocas líneas de código para ejecutar Whisper. Y luego, detrás de escena, utiliza Onyx Runtime para poder ejecutar tu modelo ya sea en web assembly en CPU, web GPU en GPU, o con Web NN en CPU, GPU, o NPU. Así que veamos cómo podrías comenzar tal vez agregando ML a tus aplicaciones web. Así que solo unas pocas líneas de código. Número uno, importas la biblioteca. Número dos, creas un pipeline. Y luego número tres, lo ejecutas en alguna entrada. Y también puedes especificar un modelo personalizado. Así que como tu segundo parámetro para la función pipeline, puedes especificar el modelo que te gustaría usar. Y luego algunas otras opciones. Así que tienes los parámetros de inicialización. Así que si quieres especificar si deseas ejecutar en GPU, así que web GPU, así como configuraciones de cuantización como Q4, F16, eso es en el primer paso. Y luego en el segundo paso, en los parámetros de tiempo de ejecución como el número máximo de tokens que generarás.

Una pequeña descripción rápida de lo que es web GPU. Está destinado a ser el sucesor de WebGL y es un nuevo estándar web que te permite ejecutar modernos, es una API moderna para gráficos acelerados y computación. Y más importante, es una API de propósito general, lo que significa que podemos ejecutar, ya sabes, operaciones de aprendizaje automático, lo cual es realmente, realmente importante. Y puedes habilitar el soporte de web GPU simplemente especificando el dispositivo como web GPU. Tiene una disponibilidad un poco limitada como mencioné anteriormente, pero esperamos ver que los navegadores se muevan hacia un mejor soporte en el futuro. Y luego WebNN también, puedes especificar el dispositivo diciendo WebNN ya sea tal vez si quieres NPU, GPU, o CPU, también puedes especificar eso en este caso. Y luego una diapositiva rápida sobre lo que son las cuantizaciones, básicamente puedes, porque es muy importante, porque los navegadores están extremadamente limitados en recursos, alentamos a los usuarios a cuantizar sus modelos y reducir la precisión a cambio de un menor consumo de recursos, menor consumo de memoria, menor ancho de banda para el usuario porque necesitan descargarlo una vez y luego menor consumo de memoria en tiempo de ejecución.

Y luego también exponemos diferentes tal vez APIs que los usuarios desearían lograr un poco más de control. Así que por ejemplo, una demostración de segmentación como esta. Tal vez algunos factores a considerar mientras desarrollas para la web, el ancho de banda es importante así que el usuario necesita descargar el modelo una vez, por lo que los animas a elegir modelos que puedan ejecutarse en el hardware objetivo. Precisión versus velocidad, qué nivel de cuantización vas a usar y qué latencia y precisión se requiere. Características del dispositivo, qué APIs del navegador se requieren, tal vez entrada de micrófono y soporte de web GPU es uno de los principales, y luego dispositivos objetivo, ¿estás construyendo para móvil, escritorio, y cualquier cosa intermedia. Tal vez solo un recorrido rápido de algunas aplicaciones que puedes construir. Así que por supuesto, chat bots enfocados en la privacidad, poder ejecutar LLMs en el navegador tal vez no sea nuevo ahora, pero el rendimiento que podemos lograr es bastante notable, especialmente en web GPU. Así que en este caso, un modelo 4B ejecutándose a alrededor de 90 tokens por segundo en un RTX 4090, y luego en esta Mac aquí ejecutando un modelo 1.7B a alrededor de 130 tokens por segundo, lo cual es realmente genial de ver. Realmente grandes mejoras, y grandes mejoras aún por venir. Con el web GPU nativo, creo que hay muchas mejoras que aún podemos hacer.

6. Browser-Based ML Applications

Short description:

Subtítulos en tiempo real con modelos de lenguaje de visión, modelos de razonamiento como DeepSeek R1 que igualan los niveles de GVT 4.0, y aplicaciones multimodales para tareas de imágenes. Aplicaciones de reconocimiento de voz y texto a voz con modelos como Whisper y CoCro. Inferencia en el navegador para edición de imágenes, herramientas educativas y visualización de mecanismos de atención en transformadores de visión.

Subtítulos en tiempo real, que es un ejemplo de tomar una entrada de cámara web y usar un modelo de lenguaje de visión para describir lo que estás viendo. que es un modelo que Hugging Face creó. Y luego también apoyamos modelos de razonamiento. Así que si quieres habilitar DeepSeek R1, esta es una versión destilada de DeepSeek R1, y en realidad se desempeña según sus benchmarks al mismo nivel que GVT 4.0 en diferentes benchmarks de matemáticas, lo cual es muy sorprendente de ver, como un modelo de 1.

5B desempeñándose a la misma calidad que algunos de estos modelos de código cerrado mucho más grandes. Y luego aplicaciones multimodales. Así que básicamente tener entrada de texto e imagen, y luego salida de texto e imagen. Así que en este caso, generando una imagen de un zorro.

7. Advanced Browser-Based ML Implementations

Short description:

Varias aplicaciones multimodales como subtitulado, reconocimiento de voz con Whisper y texto a voz con CoCro. Inferencia en el navegador para eliminación de fondo y edición de imágenes con modelos como Segment Anything. Casos de uso educativos para mecanismos de atención, tokenización, visualización de modelos y soporte para juegos móviles y de escritorio.

Y también puedes tomar una imagen y luego, digamos, convertir esta imagen de LaTeX al código LaTeX. Varias otras aplicaciones multimodales, como el subtitulado que también apoyamos. El reconocimiento de voz con modelos como Whisper es un caso de uso muy importante y poderoso, pero también popular con el que la gente ha podido desarrollar aplicaciones geniales. Texto a voz con modelos como CoCro, que en este caso, es un modelo muy pequeño de 82 millones de parámetros. Reproduciré una demostración rápida de la calidad. CoCro es un modelo TTS de peso abierto con 82 millones de parámetros. arquitectura ligera. Ofrece una calidad comparable a modelos más grandes mientras es significativamente más rápido y más eficiente en costos.

Y así, significativamente mejor que tal vez las voces robóticas con las que podrías estar familiarizado con las APIs tradicionales del navegador. También tenemos modelos de eliminación de fondo, que como mencioné antes, es uno de esos ejemplos canónicos de por qué elegirías la inferencia en el navegador. Edición de imágenes con modelos como Segment Anything. Esto es que la gente ha podido crear plugins de Figma que utilizan Segment Anything. En este caso, tiene solo alrededor de 15 megabytes de tamaño. Así que poder ejecutar eso en el navegador localmente es realmente genial.

Y esto se está ejecutando en tiempo real aquí. También apoyamos un montón de casos de uso educativos, así que poder visualizar el mecanismo de atención en transformadores de visión, poder ver en qué se están enfocando los modelos. Ese es otro ejemplo. Todo se ejecuta localmente. Y otras herramientas educativas como la tokenización, cómo funciona la tokenización, poder ejecutar eso localmente también es un gran caso de uso. Y también poder visualizar los modelos, así que si quieres, me adelantaré un poco, poder diseccionar y realmente entrar en detalle de qué son los modelos, cómo están construidos. Y esto es impulsado por Netron. También apoyamos juegos móviles y de escritorio. En este caso, es un modelo simple de clasificación de imágenes. Dibujas en un lienzo y luego el modelo predice lo que estás dibujando. Y el objetivo del juego, es similar a Google Quick Draw. Así que el objetivo es dibujar tantos elementos como puedas en un tiempo asignado. Otro ejemplo, detección de objetos. Tenemos estimación de profundidad, muchas aplicaciones normales de visión. La generación de música es otra más.

QnA

Advanced Interactive AI Demonstrations

Short description:

Música lo-fi y caso de uso de búsqueda semántica con conversión de datos en bruto a embeddings para búsqueda semántica. Demostración en vivo de IA conversacional con escenarios interactivos de juego de roles como contar chistes y solicitudes de regalos. Presentación de SmallVLM para análisis en tiempo real y fomento de la exploración de oportunidades de aprendizaje automático basado en navegador.

Otro ejemplo, música lo-fi. Y otro que diría que es muy importante, y es un caso de uso muy simple de búsqueda semántica tomando datos en bruto, ya sea una imagen, como puedes ver a la izquierda, o audio, y poder convertir a embeddings y luego poder hacer búsqueda semántica en tiempo real. Y luego esta es una demostración, la demostración más reciente, que es una IA conversacional. Y vamos a intentar ejecutarla. Recuerda, creo que una charla anterior con Thomas fue si la demostración funciona, aplaudimos. Y si no funciona, aplaudimos más fuerte. Así que veamos si funciona. Voy a mostrarla.

Hola, mi nombre es Hart. ¿Cómo puedo ayudarte hoy? Hola, estoy en el escenario en JS Nation. ¿Puedes contarme un chiste? Claro, aquí tienes uno para ti. ¿Por qué a los programadores no les gusta ver películas antiguas? Porque están demasiado llenas de errores para soportarlas. Bien, ahora ¿puedes decirme cuál es la capital de los Países Bajos? Claro, la capital de los Países Bajos es Ámsterdam. Y ahora quiero que actúes como Santa, y yo seré un niño pequeño pidiéndote un regalo.

Está bien, seré Santa. ¿Qué tipo de regalo estás buscando? ¿Podría tener un trozo de carbón, por favor? Lo siento, pero como personaje, no puedo realmente darte un trozo de carbón. Pero puedo decirte que en el mundo del hockey sobre hielo, un trozo de hielo es una parte crucial del juego. Cuanto más sabes. Y una última demostración en vivo que me gustaría mostrar es usando SmallVLM ejecutándose en tiempo real. Así que lo que voy a hacer es hacer clic en iniciar aquí y preguntarle qué ves. Y en este caso dice, con las manos en el pecho, la palabra hugging face en la camiseta, supongo que eso parece correcto, así que es genial verlo. Y continuemos. Creo que una o dos diapositivas más. Solo algunos pensamientos finales. Me gustaría decir que hay posibilidades infinitas y supongo que querría animarte a tal vez explorar dentro del navegador el aprendizaje automático en el dispositivo y poder compartir lo que creas. Nos encantaría verlo. Y por último, si te dejo con un pensamiento, siempre apuesta por JS. Como diría Brendan Aich, primero dijeron que JS no se podía usar para construir aplicaciones ricas de internet. Luego dijeron que no podía ser rápido, luego dijeron que no podía ser arreglado, luego que no podía ser multi-core GPU. Equivocados cada vez. Así que su consejo, siempre apuesta por JS.

Model Licensing and Transition to ECMAScript

Short description:

Discutiendo la transición a ECMAScript para una mejor eficiencia y un desarrollo más rápido. Explicación sobre el envío de aplicaciones electron con modelos pre-cacheados. Detalles de licencias para diferentes modelos y factores que afectan la re-descarga de modelos.

Así que naturalmente lo cité en Twitter y dije, entonces no podría ejecutar LLMs. Equivocados cada vez. Y a él pareció gustarle eso. Así que espero que estemos en el camino correcto y podamos construir demostraciones geniales con IA en el navegador y nos encantaría ver lo que construyes. Así que muchas gracias.

Entonces, la primera pregunta aquí es, si estoy usando una construcción basada en Electron, ¿puedo enviar la aplicación con modelos pre-cacheados o siempre necesito especificar un espejo? Así que apoyamos poder ejecutar y cargar modelos en el momento de la construcción. Así que puedes especificar el directorio desde el que te gustaría cargarlo. Y si envías tu aplicación Electron con ese modelo, podrás ejecutarla sin tener que buscar nada de un servidor. Genial.

La siguiente aquí. ¿Cuál fue la razón para comenzar con CommonJS en primer lugar? Yo diría que un poco de inexperiencia de mi parte. Tal vez era más un desarrollador de Python, más un ingeniero de aprendizaje automático tradicionalmente, supongo. Así que cuando comencé la biblioteca, no sabía mucho. Así que cuando me encontré con errores y problemas con CommonJS, investigué un poco y aparentemente está siendo eliminado, lo cual solo aprendí ahora. Así que hacer el cambio a ECMAScript fue un beneficio masivo, masivo.

Licenciamiento de Modelos, Uso Comercial y Re-descarga

Short description:

Recomendación de cambiar de CommonJS para aumentar la eficiencia. Detalles sobre licencias de uso comercial para varios modelos. Factores que influyen en la re-descarga de modelos, indulgencia del caché del navegador e impacto en el almacenamiento.

Hemos visto que se puede ejecutar en workers y un montón de otros ejemplos que si alguien todavía está usando CommonJS, recomendaría cambiar. Así que he podido construir mucho más rápido, mucho más eficiente después del cambio. Genial. Siguiente.

¿Cómo funciona el licenciamiento con diferentes modelos? ¿Están abiertos para uso comercial? Sí. Así que todo depende del modelo que vayas a ejecutar. Así que como ejemplo, el modelo TTS que estaba mostrando antes, CoCro es comercialmente utilizable. Tiene una licencia Apache 2. Depende de ciertos otros modelos, si es licencia MIT o Apache 2. Esos están permitidos comercialmente. Pero es muy específico del modelo, y la empresa o la persona que hace el modelo entonces especificará la licencia que puedes ver en la tarjeta del modelo cuando lo busques en el Hugging Face Hub. Genial.

¿Qué factores podrían necesitar la re-descarga del modelo? Sí. Básicamente estamos a merced de la implementación de caché del navegador. Así que esos modelos que estaba demostrando antes probablemente han estado en caché durante el último mes, solo porque, supongo, los visito regularmente mostrando las demostraciones. Pero si te estás quedando sin espacio de almacenamiento, el navegador tiene el permiso para eliminarlo del caché. Pero diría que los navegadores son en realidad muy, muy indulgentes cuando se trata del nivel de espacio del sistema o del disco disponible. Y los diferentes mecanismos de caché que Transformers.js utiliza pueden aprovechar eso. Así que depende, supongo, está a merced del navegador cuando decide eliminarlo. Pero he visto, especialmente si no tienes problemas de espacio en disco, que puede durar mucho tiempo. Increíble.

Browser Agents, Performance, and Model Deployment

Short description:

Uso de agentes en el navegador con Transformers.js. Consideraciones de rendimiento para uso solo de CPU. Ejecutar un modelo en un proyecto sin descargar, usando archivos .onix.

El siguiente aquí, creo que este es realmente interesante. ¿Es posible usar agentes en el navegador con Transformers.js? Sí. Así que este es un gran ejemplo de donde la comunidad ha sido genial y donde animamos a la comunidad a explorar más. Así que Transformers.js, supongo que el caso de uso es hacer la inferencia de los modelos, la ejecución de los modelos de lenguaje, generando el texto. Y luego supongo que sería un desarrollador, dependiendo de qué ejemplo y qué aplicación están tratando de construir, entonces podrían usar Transformers.js para generar cierto código de llamada de función o si tienes una API que está expuesta al navegador, eso podría ser realmente interesante como desarrollador de sitios web, estás permitiendo como window.function, ¿sabes? Y permitir que una biblioteca como Transformers.js vea eso y luego lo ejecute, eso sería un caso de uso muy interesante. Pero sí, diría que depende de los desarrolladores poder tomar la inferencia de los grandes modelos de lenguaje y luego construir alrededor de eso y explorar y crear aplicaciones agenticas. Genial.

¿Qué tan bueno es el rendimiento al usar solo CPU? Esa es una gran pregunta. Supongo que siempre está la respuesta de depende, pero dependiendo de qué modelo estás usando, algunos de los modelos WISP que he mostrado aquí funcionan perfectamente bien en mi iPhone 12 en WebAssembly en el navegador, como múltiples capas de sandboxing y abstracción en un teléfono relativamente antiguo, tal vez no uno de los más antiguos, pero incluso en ese caso, funciona perfectamente bien. Si vas a ejecutar grandes modelos de lenguaje, recomendaría altamente poder utilizar la GPU. Especialmente cuando vas a través de WebAssembly o incluso en un backend de nodo JS de CPU, puede ser bastante lento. Así que recomendamos poder ejecutar en WebGPU si tienes la opción, pero si no, entonces recomendaría elegir el modelo que se alinee con tus usuarios, las especificaciones del dispositivo de tu audiencia objetivo y si estás construyendo móvil, si estás construyendo escritorio, esos factores todos contribuyen a qué modelo eliges, qué cuantización eliges, y tamaño del modelo y cosas por el estilo. Increíble.

Uno más. ¿Es posible ejecutar un modelo colocándolo en un proyecto sin descargarlo? Si entiendo la pregunta correctamente, es básicamente como arrastrar el modelo o tenerlo ya pre-descargado o arrastrarlo a la interfaz tal vez. Eso podría ser genial. Todo lo que necesitas es un archivo .onix y si sigue la firma correcta, si está exportado con las herramientas que recomendamos, entonces puede ejecutarse. Creo que lo que actualmente tal vez, como una solicitud de función, sería básicamente usar esos datos directamente en lugar de ir a través del Hugging Face Hub y esas son cosas a las que definitivamente estamos abiertos. Increíble. Muchas gracias. Ha sido increíble. Genial. Gracias. 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

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.