IA Justo en el Navegador Con las APIs de IA Integradas de Chrome

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

En esta masterclass, Thomas Steiner del equipo de IA de Google Chrome se sumerge en las diversas APIs de IA integradas que el equipo está explorando actualmente. Primero, está la API de Prompt exploratoria que permite interacciones de forma libre con el modelo Gemini Nano. En segundo lugar, están las diferentes APIs de tareas que están afinadas para funcionar bien en una tarea particular como traducciones, detección de idiomas, resumir y escribir o reescribir. Después de introducir las APIs, la parte final de la masterclass se centra en demostraciones, aplicaciones y casos de uso desbloqueados a través de estas APIs.

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

Thomas Steiner
Thomas Steiner
31 min
12 Jun, 2025

Comments

Sign in or register to post your comment.
  • Va Da
    Va Da
    P4
    Browser local LLMs is the future!
Video Summary and Transcription
Thomas Steiner discute la IA en Chrome, la detección de idiomas, la traducción y la resumir utilizando las APIs de Chrome. Soluciona problemas de rendimiento lento con la API de Summarizer e introduce la API de Prompt para el formato de texto. Se demuestra el desarrollo de un detector de imágenes multimodal, mejoras en la interacción del modelo y la utilización del reconocimiento de imágenes para respuestas de prompt. Se destaca la exploración de conversaciones multimodales con la API de Prompt, conversaciones sin interrupciones con PWA y la compatibilidad entre navegadores para las APIs de Chrome.

1. Thomas Steiner on AI in Chrome

Short description:

Thomas Steiner habla sobre IA en el navegador con las APIs de IA integradas de Chrome. Menciona una versión pulida de la charla presentada en Google I-O y anima a la audiencia a verla. La versión de JS Nation se describe como sin cortes, con posibles fallos y problemas. Se muestra una demostración en vivo de un sitio construido por Thomas en glitch.me.

Estoy aquí, Thomas Steiner. Bueno, Google Alemania ya no es cierto. Google España ahora se ha reubicado recientemente. Pero de todos modos, así que IA justo en el navegador con las APIs de IA integradas de Chrome es de lo que quiero hablar. Si tienes preguntas después de la charla, hay obviamente la sesión de preguntas y respuestas. Pero también puedes contactarme en Tomajag en todas las redes sociales, excepto en X. Me niego a estar en X más. Así que si hay algo que tienes después de la charla, siéntete libre de contactarme. Hay formas de encontrarme en las otras redes sociales, o simplemente por correo electrónico. Todo funciona.

Muy bien, y con eso, empecemos. Quiero decirte que en realidad hay una versión pulida de esta charla. Así que en Google I-O de este año, tuve una charla pregrabada sobre IA Práctica Integrada con Gemini Nano en Chrome. Como es una charla pregrabada, no estoy seguro si alguno de ustedes ha tenido el placer de hacer una charla pregrabada. Se aseguran de que todo esté bien, que no haya fallos, que no haya AMS. Hay algunos, pero los cortan. Si quieres ver la versión pulida de esta charla, este es el código QR que quieres escanear. Y te recomiendo encarecidamente que lo hagas.

Pero esta versión de JS Nation es como la sin cortes, rock and roll, versión cruda. Así que habrá fallos, habrá AMS, habrá cosas que podrían salir mal. En Google I-O para las charlas en vivo, establecieron una regla este año, donde si una demostración funciona, aplaudes. Si una demostración no funciona, aplaudes más fuerte. Así que si algo sale mal, por favor aplaude más fuerte. Y con esto, en realidad solo quiero dejar las diapositivas y saltar directamente a mi demostración en vivo aquí. Así que construí un pequeño sitio, jsnation-rocks.glitch.me. Probablemente sea una de las últimas demostraciones de glitch que tengo, porque glitch está muriendo. Es muy triste. Pero afortunadamente, todavía está en línea hoy. Y solo tomé mi biografía que usé para la presentación aquí. Así que puedes ver quién soy y bla, yada yada.

2. Chrome APIs for Language Detection

Short description:

El ponente demuestra las APIs de Chrome para la detección de idiomas creando y utilizando un detector de idiomas. El detector se utiliza para identificar el idioma del contenido generado por el usuario con un ejemplo de detección de inglés con niveles de confianza.

Así que quiero mostrarte algunas de las APIs que tenemos en Chrome ahora. Puedes probarlas. Están en prueba de origen, así que puedes probarlas con usuarios reales. Y lo primero que quiero mostrarte es, bueno, supongamos que no sabemos cuál es el idioma de esto. Supongamos que esto fue solo algún contenido generado por el usuario que recibimos. Así que necesitamos algún tipo de detector de idiomas.

Detector igual a un peso, language detector dot create. Así que solo creamos un detector de idiomas. Así que podemos ver qué podemos hacer con él. Así que tiene idiomas de entrada esperados. Tiene una cuota de entrada, que es infinita. Así que podemos lanzar tanto como queramos.

Así que hagamos algo con este detector de idiomas. Así que language detector dot not destroy, sino detect. Y luego le doy mi biografía. Y la biografía es realmente solo este diff aquí. Así que solo lo hice una variable global. Así que cada vez que digo biografía, son los contenidos de este diff. Y todo esto es asíncrono, así que necesitamos esperar.

3. Detección de Idiomas y Traducción en Chrome

Short description:

El ponente demuestra el proceso de detección de idiomas en Chrome, identificando el inglés con niveles de confianza y explorando las capacidades de traducción entre inglés y holandés.

Y luego podemos ver que recibimos un array con dos entradas. Y si abres la primera, podemos ver que con un 99% de confianza, el detector piensa que esto es inglés. Y luego la otra entrada es, bueno, con el restante lo que sea, 0, 0, 0, piensa que esto no es determinable. Así que eso es genial. Tenemos nuestra primera demostración que funcionó.

Así que en realidad solo vamos a almacenar esto en una variable. Así que tenemos const lang igual a esto. Y necesitamos crear esto y hacerlo la primera entrada. Y luego tomamos el idioma detectado. Así que espero que esto funcione. Así que ahora en lang tenemos inglés. Muy bien, así que la primera demostración funcionó. Eso es un poco aburrido.

Así que, ¿qué puedo hacer con esto? Bueno, por supuesto, puedes traducir. Y ahora en Chrome tenemos una API de traducción. Así que tenemos const translator igual a await translator dot create. Y solo puedo crear un traductor. Aquí necesito darle algunos parámetros adicionales. Así que necesito decirle cuál es el idioma de origen. Y es, por supuesto, el lang que teníamos antes. Y necesitamos un idioma de destino.

4. Traducción y Resumen con APIs de Chrome

Short description:

El ponente demuestra la simplicidad de usar la API de traducción en Chrome para los idiomas inglés y holandés e introduce la API de Resumen para crear resúmenes en viñetas.

Y, por supuesto, estamos aquí en los Países Bajos, así que lo hacemos NL. Así que ahora tenemos un traductor para nuestro idioma de entrada detectado, que era inglés y holandés. Así que ahora podemos, por supuesto, traducir algo con ello. Y de nuevo, le doy mi bio dot inner text. Y de nuevo, esto es async. Y no intentaré pronunciar esto, pero espero que puedas ver que es algo como holandés. Está utilizando los mismos modelos que tenemos en Chrome para la traducción a nivel nativo del navegador. Así que los mismos modelos de traducción de redes neuronales que hemos tenido durante muchos años. Así que sí, puedes ver que esto es súper fácil de usar. Solo dos líneas de código, y tienes una API de traducción directamente integrada en el navegador.

Muy bien, así que esto es, sí, gracias. Gracias. Esta es la segunda API. Y ahora quiero mostrarte otra tercera API. Así que aquí, mi bio, eso es como dos párrafos. Pero algunos de ustedes son generación TikTok, así que dos párrafos. Oh Dios mío, eso es súper complejo, ¿verdad? Así que, ¿puedo resumir esto y hacerlo en viñetas? Y resulta que podemos, porque en el navegador ahora tenemos la API de Resumen. Así que podemos decir, como, summarize it dot await. Y ya puedes ver el patrón aquí. Summarize it dot create. Y ahora tenemos un resumidor. Y ya puedes ver que hay, bueno, déjame expandirlo. Ya puedes ver que hay, sí, el formato, que está marcado. Hay la longitud, que es corta. Por defecto, hay el tipo, que son puntos clave. Así que intentemos y esperemos que resuma mi texto aquí. Así que summarizer dot summarize. Bio dot inner text. Y como siempre, necesitamos esperar el resultado. Y si esto funciona, deberíamos obtener un resumen de esto.

5. Resolución de Problemas con la API de Resumen Lenta en Chrome

Short description:

El ponente encuentra problemas de rendimiento lento con la API de Resumen en Chrome Canary, pero finalmente tiene éxito después de solucionar problemas.

Estaba lento en la última demostración que intenté, así que veamos. Todo esto se está ejecutando en Chrome Canary hoy. Así que espero que no lo hayan roto hoy. Pero démosle un poco más de tiempo.

Vamos, Summarizer. Resume más rápido. Sí. Sí. Así que se está colgando. A veces funciona si simplemente recargo. Así que hagamos esto. Volvamos a lo que teníamos antes. Así que Summarizer y luego Summarizer inner text. Veamos. ¿Todavía nada? Vamos.

OK. ¿Sabes qué? Reiniciemos Canary. Esto también a veces funciona. Y puedes ver que hice el cambio a Tahoe. Así que espero que no haya nada que interfiera aquí con Mac OS Tahoe o Mac OS 26, como lo llaman ahora. OK, así que veamos. Ahora con una sesión completamente nueva. Así que necesitamos crear el Summarizer y luego Resumir. Una última oportunidad para que funcione. No, se niega a funcionar hoy. OK, así que. ¡Oh! Eso es increíble. OK, así que tomó mucho más tiempo de lo habitual, pero funcionó. Muchas gracias por aplaudir más fuerte. Esto realmente lo hace mucho más fácil.

6. Introducción a la API Prompt de Chrome

Short description:

El ponente discute los desafíos de formato del texto marcado y presenta la API Prompt en Chrome, demostrando su uso y funcionamiento interno.

Así que veamos. Esto está marcado, así que no es super fácil de analizar. Pero podemos ver que hay puntos de viñeta. Y el primer punto de viñeta va de aquí a aquí. Luego la nueva línea, luego tenemos el siguiente punto de viñeta que va de aquí a aquí. Y luego el último punto de viñeta. Así que solo resumí mis dos párrafos en tres puntos de viñeta que son fáciles de digerir para las personas que no les gusta leer textos complejos como biografías de dos párrafos.

Muy bien, así que con este momento de suspensión aquí, momento de tensión, todo ha funcionado, eventualmente. Pero hay más. Así que quiero mostrarte otra API en la que estamos trabajando en Chrome. Y es la API Prompt. Y para esto, en realidad puedo cerrar mis Herramientas de Desarrollador. Tengo un poco más de espacio aquí. Así que puedo ver allá abajo, hay un campo donde puedo ingresar cosas. Así que puedo decir, no sé, ¿qué puedo hacer en Amsterdam si tengo un día? Puedo ver que el LLM hace lo que hace el LLM. Bueno, no está formateado correctamente. Así que puedes ver que comienza con un encabezado y luego algo de contenido y luego algo de texto en negrita y markdown y así sucesivamente. Así que eso es un poco interesante.

Pero ya has visto esto antes. Lo que quiero mostrarte es algo que hace esto un poco más útil. Pero antes de ir allí, déjame mostrarte cómo funciona todo esto internamente. Tenemos HTML aquí, sin framework. Escuché la charla de Alex. Así que es todo JavaScript puro, HTML puro, CSS puro en CSS, no CSS en JS. Tenemos un formulario básico. Tenemos una etiqueta básica, una entrada, un botón que es de tipo enviar. Y tenemos una salida aquí. Luego, este HTML simple está conectado a, por ahora, script básico. Así que lo que hacemos en script básico es obtener referencias al DOM, así que formulario, entrada y salida. Luego tenemos un listener de evento submit.

7. Desarrollando Detector de Imágenes Multimodal

Short description:

El ponente explica el uso de listeners de eventos, demuestra el método de streaming de prompts para IA, e introduce un JSON Schema para las restricciones de respuesta.

Así que algunos de ustedes podrían ver este código por primera vez. Así que así es como tienes un listener de eventos en JavaScript. Así que escuchamos el evento submit, prevenimos el comportamiento por defecto. Y luego viene el verdadero secreto aquí. Así que tenemos la entrada, tomamos el valor, lo recortamos. Si queda algo, lo siento, si no queda nada, así que si hay una cadena de entrada vacía, esencialmente, regresamos. Pero a medida que continuamos, restablecemos el HTML interno de nuestra salida.

Y luego viene el código real de IA. Así que aquí, tenemos el modelo de lenguaje punto create. Y has visto el patrón antes. Así que el cosa punto create te da el modelo de lenguaje en este caso. Y luego antes, te mostré las variantes no streaming. Así que te mostré translate en lugar de translate streaming. Te mostré summarize en lugar de summarize streaming. Pero aquí, quiero mostrarte el método de streaming de prompts, que te da un stream legible. Y luego puedes simplemente iterar sobre cada uno de los chunks del stream. Y luego simplemente añadirlos al HTML. Así que es super fácil de usar. Y has visto el resultado aquí.

Pero a continuación, quiero desarrollar lentamente esta charla y hacerla, como dije, algo más útil. Así que quiero trabajar en hacer de esto un detector multimodal de imágenes donde podría hacer preguntas sobre la imagen. Y no solo hacer preguntas sobre la imagen, sino también tener un clasificador verdadero o falso. Así que déjame conectar el siguiente script, que es este tipo aquí, JSON Schema. Déjame solo tomar el nombre del archivo y luego ir aquí y poner eso aquí. Así que lo que tenemos ahora es que hemos introducido un JSON Schema. Así que todo de aquí a aquí es lo mismo. Pero ahora tenemos una restricción de respuesta. Y el JSON Schema más simple posible es solo este objeto que puede decir, mi respuesta debería ser verdadera o falsa. Y luego puedes ver que todo lo demás es lo mismo aquí. Para el streaming de prompts, le damos la restricción de respuesta.

8. Mejorando la Interacción del Modelo con Prompts de Imágenes

Short description:

El ponente demuestra el uso de respuestas verdaderas o falsas para la interacción del modelo y combina prompts de texto e imagen para una mejor usabilidad.

Así que ahora, en lugar de tener un texto largo, el modelo se verá obligado a responder solo con verdadero o falso. Así que intentemos esto ahora. Así que puedo preguntar algo como, ¿está Ámsterdam ubicado en Europa? Responde con verdadero o falso. Y luego puedo enviar eso. Y el modelo, afortunadamente, responde correctamente con verdadero ahí abajo. Así que puedes ver, bueno, esto está comenzando a volverse útil porque ahora, en lugar de tener esto, oh sí, Ámsterdam está ubicado en Europa, bla, bla, yada, yada, una respuesta tipo LLM, lo reduces a solo un valor verdadero o falso, que, por supuesto, es mucho más fácil de digerir y analizar si trabajas con datos generados.

Muy bien, así que eso está OK útil. Pero a continuación, quiero mostrarte cómo puedes hacer esto realmente útil. Y puedes ver esta imagen aquí. Así que este es mi avatar habitual que tengo en la mayoría de las páginas. Así que déjame conectar el script final aquí, que es este. Regresa aquí. Y tomamos ese script ahora. Y veamos qué está sucediendo aquí. Así que ahora obtenemos una referencia a la imagen. Aún tenemos la restricción de respuesta de antes. Pero ahora nuestro prompt se vuelve un poco más complejo porque ahora lo que estoy haciendo es que estoy combinando un prompt de texto con un prompt de imagen. Así que puedes ver aquí, solo he renombrado mi variable de prompts a prompt de texto. Pero esencialmente sigue siendo lo mismo.

Pero luego, ahí abajo, puedes ver que mi prompt ahora es un poco más complejo. Así que este es el prompt completo. Puedes ver que es un array con un objeto que tiene un rol de usuario. Y luego un contenido, que es un array nuevamente. Y luego tenemos los dos prompts aquí. Así que tenemos el prompt de texto, así que tipo texto y un tipo imagen. Y simplemente dale la referencia a la imagen desde el HTML. Todo lo demás ahí abajo es lo mismo. Puedes ver que por ahora, he comentado mi restricción de respuesta. Así que ahora puedo hacer preguntas sobre esta imagen. Así que puedo decir cosas como, ¿qué ves aquí? Y luego Enviar.

9. Utilizando el Reconocimiento de Imágenes para Respuestas de Prompts

Short description:

El modelo identifica con éxito el contenido de la imagen y proporciona respuestas verdaderas o falsas para consultas específicas, mostrando sus aplicaciones prácticas.

Y si todo funciona, el modelo debería responder con algo. Sí, ahora comienza. Así que dice, esta es una selfie de un hombre de pie en una playa mirando al océano. Tiene el cabello corto y castaño. Bueno, eso es un cumplido. Y una barba. Bueno, no estaba bien afeitado ese día. Pero ya puedes ver que ha entendido lo que hay en la imagen. Así que eso es genial.

Pero ahora volvamos a introducir nuestra restricción de respuesta. Y ahora hemos obligado al modelo a responder solo con verdadero o falso. Así que ahora podemos ir aquí y decir, necesito recargar. Y ahora puedo decir, ¿hay una persona en esta imagen? ¿Signo de interrogación? Lo envío. Y el modelo dice verdadero. Así que sí, puedes ver, bueno, esto es útil. He construido un pequeño clasificador aquí que solo me dice, ¿hay una persona en esta imagen? Sí, lo sé.

Pero, por supuesto, puedo hacer esto más complejo, como, ¿la persona en esta imagen lleva un sombrero? Y podemos ver qué dice el modelo. Dice verdadero. Así que sí, increíble. Está ahí abajo, un poco difícil de ver. Pero puedes ver cómo esto puede ser útil. Así que si trabajas en cualquier tipo de espacio donde necesites, digamos, antes de que las personas suban una imagen, clasificar si esto muestra, no sé, una licencia de conducir, puedes preguntarle al modelo, oye, ¿esto representa una licencia de conducir? Y luego responder solo con sí o no. Así que antes de verificar manualmente que la imagen es una licencia de conducir, por ejemplo, si necesitas verificar a las personas, puedes hacer que este LLM haga el trabajo del lado del cliente por ti. Sí, puedes ver cómo esto puede ser realmente muy útil.

10. Explorando Conversaciones Multimodales con Prompt API

Short description:

Explorando las capacidades de Prompt API con entrada multimodal y retención de contexto para conversaciones en curso.

Pero sí, la restricción de respuesta en combinación con entrada multimodal, eso es bastante genial. Tomé la Prompt API y construí algo un poco más complejo. Así que es como un mini Gemini o un chat GPT, o lo que quieras, en tu navegador. Y es una PWA instalable, así que en realidad solo podemos instalarla. Así que Chrome está haciendo la instalación. Así que ahora está instalada. Y puedo crear una nueva conversación ahora.

Y puedo agregar una imagen. Y resulta que tengo una preparada. Así que esto es solo Google asegurándose de que no estoy subiendo nada ilegal. Así que puedes ver, este es el letrero de iAmsterdam. Así que puedo decir, ¿qué ves aquí? Y la IA mirará la imagen y pensará en ello. Y sí, puedes ver que esta imagen muestra el letrero de Amsterdam, bla, bla, bla, Rijksmuseum, y así sucesivamente. Así que ha entendido que esta es la imagen.

Puedo decir, ¿cuál es el edificio en el fondo? Y puedo ver que continúa con la sesión. Así que tiene el contexto de esto. Muy bien, así que esto es algo interesante. Pero en realidad, vamos a cerrar esto. Así que cierro la aplicación. Está completamente cerrada. Vamos a apagar el Wi-Fi, lo cual es algo aterrador de hacer. Así que estoy temblando. Mi Wi-Fi está apagado ahora. OK, así que puedes ver que está apagado. Vamos a relanzar la PWA. Y ha restaurado donde estaba antes. Y puedo continuar mi conversación. Puedo decir, ¿qué se está exponiendo allí? Y puedes ver que continúa. Bueno, no está super, super, super poniéndose al día con el contexto aquí. ¿Qué se expone en el museo? Bueno, todavía está un poco colgado en la imagen.

11. Conversaciones Sin Costuras con PWA

Short description:

Continuando conversaciones sin costuras sin conexión con el humor de Gemini y la funcionalidad de PWA para IA local.

Bueno, finalmente me da algo de arte holandés, historia holandesa, otro arte. Así que puedes ver que he cerrado completamente la aplicación, la he reabierto. Estaba sin conexión. Y pude continuar la conversación aquí. Y luego, por supuesto, si subes aquí, puedes ver que puedo cerrar esto y luego crear una nueva conversación.

Así que cuéntame un chiste. Y puedes ver cómo actualiza la conversación en tiempo real. Y luego vuelvo aquí, cambio de conversación de nuevo, ¿y está abierto hoy? Y me dice que en realidad no sabe. Así que cambia de conversación fácilmente. Puedo volver a mi conversación de chistes aquí. Cerremos esta, abramos esa. Cerremos esta, abramos esa. Y solo puedo decir otro. Y todo esto completamente sin conexión.

Bueno, increíble. El humor de Gemini es simplemente genial. Así que sí, estoy completamente sin conexión, todo funcionando con una PWA instalable que tengo en mi navegador. Y es como mi IA local privada, completamente funcionando justo en el navegador. Así que con eso, volvamos allí. Así que esta fue esa demostración. Así que déjame volver aquí. Y creo que necesito encender el Wi-Fi de nuevo para que la presentación me permita entrar en modo de presentación. Reconectando, vamos aquí. Así que esto es público. Puedes acceder a la demostración aquí, JS Nation Rocks Glitch.me. Esto también es público. Te di un poco de tiempo para tomar el código QR, pero también comparto mis diapositivas, así que no hay necesidad de tomar fotos individuales si no lo deseas.

12. Utilizando APIs de Chrome y Vista Previa Temprana

Short description:

Guía para la utilización de APIs de Chrome, programa de vista previa temprana, pruebas entre navegadores y Origin Trial para acceso a API.

Y sí, así que te estás preguntando, ¿cómo puedo usar todo esto? Bueno, tenemos toneladas de documentación, developerchrome.com, docs.ai integrados. Escanea este código para ver todo. Así que hay en el lado izquierdo un montón de enlaces sobre todas las diferentes APIs que te he mostrado. Hay algunas más que también están en desarrollo. Y sobre todo, por favor, si estás interesado en esto, únete a nuestro programa de vista previa temprana.

Así que aquí está el enlace para eso. Hay un formulario de Google simple. Lo llenas. Es principalmente para que obtengamos información sobre los usuarios de esto. ¿Cuáles son los posibles casos de uso que tendrías para esto? Así que estaremos enviando encuestas. Te estaremos preguntando, ¿cómo se siente esto? ¿Crees que esta es la forma correcta de abordar el problema? Y esto está en Chrome hoy.

Microsoft Edge también tiene una implementación no basada en Gemini Nano, sino en 5.4, así que un modelo de Microsoft, pero la misma API, esencialmente. Así que ya puedes probar hoy en dos navegadores diferentes. Y algunas de esas APIs están en este momento ya en Origin Trial. Así que Origin Trial es un concepto que tenemos en Chrome. Edge también tiene un concepto similar, donde puede decir, como, obtengo un token especial de un sitio web. Coloco el token en mi meta tag o como un encabezado de enlace. Y luego Chrome, si ve ese token, desbloquea las APIs para los usuarios.

QnA

Pruebas de API y Uso de AI en Chrome

Short description:

Pruebas de APIs en Origin Trial, enlace a las diapositivas de presentación, uso del modelo local de AI en Chrome.

Así que puedes probar todas esas APIs. Lo siento, no todas esas. Las que están en Origin Trial con usuarios reales, y obtener una sensación de cómo reaccionarían a todas esas APIs. Esas APIs se mencionan en algunos casos de uso, nuevamente, en la charla. Así que si quieres ver la versión pulida, no JS Nation versión preliminar, nuevamente, piensa en la charla.

Y con eso, bedankt. Fue un placer estar aquí. Las diapositivas están aquí. Gracias. Las diapositivas están aquí. Así que google.gle.jsnation. AI incorporado, si quieres obtener las diapositivas. Así que este es tu único enlace que quieres obtener. Y luego todo lo demás está vinculado desde la presentación.

Y creo que tenemos tiempo para algunas preguntas ahora. Muchas gracias, nuevamente. Así que la primera, empecemos con una fácil. ¿Cómo utiliza el AI de Chrome modelos locales o instancias remotas de Yemeni? ¿En lugar de? ¿Utiliza el AI de Chrome modelos locales o instancias remotas de Yemeni? OK. Así que en Chrome, tenemos Gemini Nano, que es un modelo propietario construido por Google, por el equipo de Gemini. Que en el primer intento de usar una de esas APIs se descarga dinámicamente en el navegador. Así que se descarga una vez, y luego se comparte por todas las páginas que quieren usar esa API. Así que si trabajas en diferentes aplicaciones, las probabilidades son que cuanto más populares se vuelvan esas APIs, pero el modelo ya estará allí. Perfecto. Así que básicamente, sí, puedes usarlo localmente.

Compatibilidad entre Navegadores y Rendimiento del Modelo

Short description:

Asegurando que las APIs de Chrome funcionen en todos los navegadores, expandiéndose a dispositivos móviles con soporte de modelo, desafíos de compatibilidad de dispositivos y objetivos de desarrollo futuro.

OK, ahora hay una pregunta que tiene tantos votos. Así que vamos por esta. ¿Cómo se aseguran de que una API exclusiva de Chrome funcione para asegurarse de que también funcione en otros navegadores? No queremos que los navegadores registren APIs. Sí, así que yo tampoco. Así que primero, por supuesto, lo mencioné antes. Ahora también está comenzando a aterrizar en Edge. Tenemos muchas conversaciones con el equipo de Mozilla, con el equipo de Safari, pidiéndoles que se unan a la conversación desde el principio para obtener sus opiniones sobre qué piensan sobre esas APIs. ¿Cómo podemos ponerlas en una pista de estándares? Así que todo está funcionando en abierto, así que hay un rastro de papel de todos esos diferentes pasos donde preguntamos en los repositorios de posiciones de estándares cuáles son las opiniones de los otros proveedores de navegadores. Y sí, así que al final, por supuesto, incluso dentro de Chrome, así que en Chrome Android, hoy no puedes usar esas APIs porque Android aún no soporta ejecutar el modelo. Nuestra respuesta hasta ahora es un SDK de lógica de AI de Firebase, donde esencialmente si el modelo es compatible localmente, usará el modelo local, o de lo contrario, se ejecutará en el servidor, lo que obviamente viene con diferenciación de privacidad. Así que si antes tu presentación era que todo se procesa localmente, por supuesto, cuando vas al servidor, sí, esto puede tener un impacto si aún puedes ejecutar tu aplicación con eso. Por supuesto, nuestro objetivo es al final hacer que las APIs funcionen en todas nuestras plataformas, incluyendo Android, incluyendo Chrome OS. Así que funciona en macOS, Linux y Windows. Y sí, así que como dije, es nuestro objetivo. Mi objetivo personal, siempre les digo a las personas que no estoy haciendo tanto el aplazamiento de Chrome, estoy haciendo el aplazamiento web. Así que espero que esto se convierta en una API interoperable relativamente pronto. Bien. Es bueno escuchar eso.

OK, así que la siguiente pregunta es, ¿qué tipo de sacrificios tienen que hacerse en términos de rendimiento en estos modelos en el dispositivo? ¿Podemos esperar poder ejecutar estos en dispositivos móviles sin ESus en algún momento? Así que sí, los modelos son relativamente grandes. Así que son 4.39 gigabytes en disco, lo que significa que requiere un mínimo de 6 gigabytes de RAM, RAM de GPU, para poder ejecutarse. Hay un enfoque llamado salida temprana, donde esencialmente tienes diferentes capas del LLM. Y si el modelo determina que tiene una respuesta lo suficientemente buena, puede salir temprano, lo que significa que es menos costoso computacionalmente. Así que hay algo de trabajo para hacerlo posible en móviles también para que puedas simplemente salir temprano, obtener un poco menos de calidad en comparación con si tuvieras que pasar por todas las capas. Pero eventualmente, las canalizaciones mejoran. Los modelos mejoran. Los dispositivos lentamente mejoran. Así que conozco a Alex, y tiene toda la razón, pasará mucho, mucho tiempo hasta que esto sea ejecutable en un, ¿cuál era el precio? , $250, creo, era el costo promedio del teléfono móvil o algo así. Así que pasará mucho tiempo hasta que lleguemos a esos dispositivos. Pero para esos dispositivos, el SDK de Firebase está ahí, y aún puedes usar la nube. OK, OK.

APIs del Navegador y Medidas de Seguridad del Modelo

Short description:

No se necesita licencia ni suscripción para las APIs del navegador. Restricciones de Gemini Nano en varios idiomas. Medidas de seguridad para las respuestas del modelo y planes de expansión de idiomas.

Pero de lo contrario, APIs. Así que aplaudamos por otra pregunta, y luego podemos dejar de preguntar aquí. Y siempre puedes ir al lugar y preguntar más. Pero para esta, ¿necesitamos alguna licencia o suscripción para esto? No. Así que todo esto viene con el navegador de forma gratuita. El procesamiento ocurre en el cliente. Así que si quieres, ellos pagan con su batería y su uso de GPU y CPU. Pero para ti, es gratis. No hay licencia que necesites firmar. Aparte de Gemini Nano, hay algunas restricciones de uso general. No puedes usar Gemini Nano para preguntar, no sé, cómo construir una bomba o algo así. Así que esto, por cierto, también es la limitación para otros idiomas hasta ahora. Así que notarás que a menudo te dirá, oh, no puedo responder a esto aún cuando le pidas una respuesta en francés, por ejemplo. Así que los idiomas son difíciles. Así que hay medidas de seguridad internas que el modelo no te dice, hey, quiero matarme. ¿Es más eficiente saltar de un puente o dispararme en la cabeza? Así que el modelo no debería, por supuesto, decirte qué es más eficiente. Pero conseguir esto bien, así que asegurarse de que el modelo bloquee, esto es en realidad ahora mismo el cuello de botella para desbloquear más idiomas. Así que lentamente, a medida que se soporten más idiomas, apuntaremos, obviamente, por popularidad. Así que serán los clásicos fijos, así que francés, italiano, alemán, español, japonés, y así sucesivamente. Pero esperamos que eventualmente tengamos muchos más idiomas soportados por esos modelos. Yo también lo espero. Bien. Así que ahora, gracias, Thomas, por todas las respuestas increíbles. Gracias. Y puedes ir al registro. Hay un lugar para hacer más preguntas si tienes alguna para él.

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 un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
El Flujo de Trabajo del Desarrollador Asistido por IA: Construye Más Rápido e Inteligente Hoy
JSNation US 2024JSNation US 2024
31 min
El Flujo de Trabajo del Desarrollador Asistido por IA: Construye Más Rápido e Inteligente Hoy
Top Content
AI is transforming software engineering by using agents to help with coding. Agents can autonomously complete tasks and make decisions based on data. Collaborative AI and automation are opening new possibilities in code generation. Bolt is a powerful tool for troubleshooting, bug fixing, and authentication. Code generation tools like Copilot and Cursor provide support for selecting models and codebase awareness. Cline is a useful extension for website inspection and testing. Guidelines for coding with agents include defining requirements, choosing the right model, and frequent testing. Clear and concise instructions are crucial in AI-generated code. Experienced engineers are still necessary in understanding architecture and problem-solving. Energy consumption insights and sustainability are discussed in the Talk.
IA y Desarrollo Web: ¿Exageración o Realidad?
JSNation 2023JSNation 2023
24 min
IA y Desarrollo Web: ¿Exageración o Realidad?
Top Content
This talk explores the use of AI in web development, including tools like GitHub Copilot and Fig for CLI commands. AI can generate boilerplate code, provide context-aware solutions, and generate dummy data. It can also assist with CSS selectors and regexes, and be integrated into applications. AI is used to enhance the podcast experience by transcribing episodes and providing JSON data. The talk also discusses formatting AI output, crafting requests, and analyzing embeddings for similarity.
El Ascenso del Ingeniero de IA
React Summit US 2023React Summit US 2023
30 min
El Ascenso del Ingeniero de IA
Top Content
The rise of AI engineers is driven by the demand for AI and the emergence of ML research and engineering organizations. Start-ups are leveraging AI through APIs, resulting in a time-to-market advantage. The future of AI engineering holds promising results, with a focus on AI UX and the role of AI agents. Equity in AI and the central problems of AI engineering require collective efforts to address. The day-to-day life of an AI engineer involves working on products or infrastructure and dealing with specialties and tools specific to the field.
Instala Nada: Interfaces de Usuario de Aplicaciones con APIs Nativas del Navegador
JSNation 2024JSNation 2024
31 min
Instala Nada: Interfaces de Usuario de Aplicaciones con APIs Nativas del Navegador
Top Content
This Talk introduces real demos using HTML, CSS, and JavaScript to showcase new or underutilized browser APIs, with ship scores provided for each API. The dialogue element allows for the creation of modals with minimal JavaScript and is supported by 96% of browsers. The web animations API is a simple and well-supported solution for creating animations, while the view transitions API offers easy animation workarounds without CSS. The scroll snap API allows for swipers without JavaScript, providing a smooth scrolling experience.
Aplicaciones Web del Futuro con Web AI
JSNation 2024JSNation 2024
32 min
Aplicaciones Web del Futuro con Web AI
Web AI in JavaScript allows for running machine learning models client-side in a web browser, offering advantages such as privacy, offline capabilities, low latency, and cost savings. Various AI models can be used for tasks like background blur, text toxicity detection, 3D data extraction, face mesh recognition, hand tracking, pose detection, and body segmentation. JavaScript libraries like MediaPipe LLM inference API and Visual Blocks facilitate the use of AI models. Web AI is in its early stages but has the potential to revolutionize web experiences and improve accessibility.

Workshops on related topic

IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
AI para Desarrolladores de React
React Advanced 2024React Advanced 2024
142 min
AI para Desarrolladores de React
Top Content
Featured Workshop
Eve Porcello
Eve Porcello
El conocimiento de las herramientas de AI es fundamental para preparar el futuro de las carreras de los desarrolladores de React, y la suite de herramientas de AI de Vercel es una vía de acceso accesible. En este curso, examinaremos más de cerca el Vercel AI SDK y cómo esto puede ayudar a los desarrolladores de React a construir interfaces de transmisión con JavaScript y Next.js. También incorporaremos APIs de terceros adicionales para construir y desplegar una aplicación de visualización de música.
Temas:- Creación de un Proyecto de React con Next.js- Elección de un LLM- Personalización de Interfaces de Transmisión- Construcción de Rutas- Creación y Generación de Componentes - Uso de Hooks (useChat, useCompletion, useActions, etc)
Building Full Stack Apps With Cursor
JSNation 2025JSNation 2025
46 min
Building Full Stack Apps With Cursor
Featured Workshop
Mike Mikula
Mike Mikula
En esta masterclass cubriré un proceso repetible sobre cómo iniciar aplicaciones full stack en Cursor. Espere comprender técnicas como el uso de GPT para crear requisitos de producto, esquemas de base de datos, hojas de ruta y usarlos en notas para generar listas de verificación que guíen el desarrollo de aplicaciones. Profundizaremos más en cómo solucionar alucinaciones/errores que ocurren, indicaciones útiles para hacer que su aplicación se vea y se sienta moderna, enfoques para conectar cada capa y más. Al final, ¡espere poder ejecutar su propia aplicación full stack generada por IA en su máquina!
Por favor, encuentre las preguntas frecuentes aquí
How to 9,2x Your Development Speed with Cline
JSNation 2025JSNation 2025
64 min
How to 9,2x Your Development Speed with Cline
Featured Workshop
Nik Pash
Nik Pash
La forma en que escribimos código está cambiando fundamentalmente. En lugar de quedar atrapado en bucles anidados y detalles de implementación, imagine enfocarse puramente en la arquitectura y la resolución creativa de problemas mientras su programador de pares de IA maneja la ejecución. En esta masterclass práctica, te mostraré cómo aprovechar Cline (un agente de codificación autónomo que recientemente alcanzó 1M de descargas en VS Code) para acelerar drásticamente tu flujo de trabajo de desarrollo a través de una práctica que llamamos "vibe coding" - donde los humanos se enfocan en el pensamiento de alto nivel y la IA maneja la implementación.Descubrirás:Los principios fundamentales del "vibe coding" y cómo se diferencia del desarrollo tradicionalCómo diseñar soluciones a un alto nivel y hacer que la IA las implemente con precisiónDemostración en vivo: Construcción de un sistema de almacenamiento en caché de grado de producción en Go que nos ahorró $500/semanaTécnicas para usar IA para entender bases de código complejas en minutos en lugar de horasMejores prácticas para solicitar a los agentes de IA que obtengan exactamente el código que deseasErrores comunes a evitar al trabajar con asistentes de codificación de IAEstrategias para usar IA para acelerar el aprendizaje y reducir la dependencia de ingenieros seniorCómo combinar efectivamente la creatividad humana con las capacidades de implementación de IAYa sea que seas un desarrollador junior que busca acelerar tu aprendizaje o un ingeniero senior que desea optimizar tu flujo de trabajo, saldrás de esta masterclass con experiencia práctica en desarrollo asistido por IA que puedes aplicar inmediatamente a tus proyectos. A través de demostraciones de codificación en vivo y ejercicios prácticos, aprenderás cómo aprovechar Cline para escribir mejor código más rápido mientras te enfocas en lo que importa: resolver problemas reales.
Webinar gratuito: Construyendo aplicaciones Full Stack con Cursor
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
71 min
Webinar gratuito: Construyendo aplicaciones Full Stack con Cursor
Top Content
WorkshopFree
Mike Mikula
Mike Mikula
Para asistir al webinar, por favor regístrate aquí.En este webinar cubriré un proceso repetible sobre cómo iniciar aplicaciones Full Stack en Cursor. Espera entender técnicas como usar GPT para crear requisitos de producto, esquemas de base de datos, hojas de ruta y usar esos en notas para generar listas de verificación que guíen el desarrollo de la aplicación. Profundizaremos más en cómo corregir alucinaciones/errores que ocurren, indicaciones útiles para hacer que tu aplicación se vea y se sienta moderna, enfoques para conectar cada capa y más. Al final, ¡espera poder ejecutar tu propia aplicación Full Stack generada por IA en tu máquina!
Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React
React Advanced 2023React Advanced 2023
98 min
Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React
Top Content
Workshop
Richard Moss
Richard Moss
En esta masterclass daremos un recorrido por la IA aplicada desde la perspectiva de los desarrolladores de front end, enfocándonos en las mejores prácticas emergentes cuando se trata de trabajar con LLMs para construir grandes productos. Esta masterclass se basa en los aprendizajes obtenidos al trabajar con la API de OpenAI desde su debut en noviembre pasado para construir un MVP funcional que se convirtió en PowerModeAI (una herramienta de creación de ideas y presentaciones orientada al cliente).
En la masterclass habrá una mezcla de presentación y ejercicios prácticos para cubrir temas que incluyen:
- Fundamentos de GPT- Trampas de los LLMs- Mejores prácticas y técnicas de ingeniería de prompts- Uso efectivo del playground- Instalación y configuración del SDK de OpenAI- Enfoques para trabajar con la API y la gestión de prompts- Implementación de la API para construir una aplicación orientada al cliente potenciada por IA- Ajuste fino y embeddings- Mejores prácticas emergentes en LLMOps