IA Web Práctica: Integrada, Basada en Navegador, Brillante

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

El progreso de la IA avanza rápidamente en el lado del servidor, donde viven las GPUs, pero la plataforma web nunca está tan lejos. En esta charla vamos a explorar las aplicaciones increíbles que puedes construir en el navegador hoy y en el futuro cercano.

Verás cómo construir una aplicación de traducción de idioma de voz a voz, capaz de funcionar sin conexión, un pez de Babel, usando nada más que la plataforma web. A través de esta aplicación exploraremos las diferentes formas en que podemos ejecutar modelos de IA en el navegador hoy y lo que podría integrarse en el navegador en el futuro. Desde estándares de bajo nivel hasta experimentos de alto nivel, aprenderás cómo trabajar con IA en la web.

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

Phil Nash
Phil Nash
30 min
12 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla profundiza en la integración de herramientas de IA generativa en el desarrollo web, enfatizando el impacto de la revolución de la IA. Explora la creación de una aplicación de traducción basada en navegador sin servidores backend, enfatizando las APIs de reconocimiento de voz y traducción. La discusión destaca las capacidades de voz basadas en navegador, diferentes voces y los desafíos de la traducción dentro del navegador. La exploración de la API de prompt, Gemini Nano y APIs especializadas muestra características experimentales y capacidades de modelos de lenguaje. También se discuten los avances en IA basada en navegador, el uso de IA centrada en la privacidad en Chrome y la utilización de Langflow para la experimentación de IA generativa del lado del servidor. La mejora progresiva, la integración móvil, la traducción en tiempo real, las preocupaciones de privacidad y la integración de modelos en los navegadores son temas clave.

1. Discusión sobre IA y Desarrollo Web

Short description:

El orador, Phil Nash, habla sobre código y una aplicación integrada con herramientas de IA generativa de Datastacks, enfatizando la importancia de la revolución de la IA y su impacto en el desarrollo web.

Es maravilloso ahora estar hablando con ustedes un poco sobre algo de código y algunas cosas, más bien que solo nuestros otros maravillosos oradores. Si viste la charla de Thomas Steiner más temprano hoy, voy a hablar un poco sobre algunas de las mismas cosas allí, pero he construido todo en una gran aplicación. No va a ser codificado en vivo, porque él eligió un camino interesante allí, un camino peligroso. El mío son solo demostraciones que podrían fallar de todos modos, así que veamos cómo funciona eso.

Como dijimos, mi nombre es Phil Nash. Soy un Ingeniero de Relaciones con Desarrolladores en Datastacks. Datastacks está construyendo una plataforma de IA generativa para que puedas construir aplicaciones. Tenemos una base de datos vectorial llamada AstroDB. Tenemos un constructor Gooey, un constructor de arrastrar y soltar para flujos de IA generativa llamado LangFlow, y te recomiendo que revises ambos. Si quieres encontrarme en línea, soy Phil Nash en toda internet.

Hay una pequeña advertencia al comienzo de esto, que aunque dije práctico en el título, mucho de esto se está ejecutando en navegadores, pero navegadores que la gente no está usando. Así que todo aquí es Chrome Canary hoy, y aunque algunas de las aplicaciones, algunas de las APIs que veremos están llegando al Chrome real muy pronto, ciertamente no es algo multiplataforma y es algo muy nuevo y emergente. Y eso es porque la revolución de la IA está sucediendo. Sé que ha habido un montón de menciones de IA en otras charlas que ni siquiera eran sobre IA hoy, pero la revolución de la IA está sucediendo, y está haciendo que muchas cosas interesantes sucedan. Estoy emocionado por ello, porque estoy emocionado por lo que podemos construir con ella, así como algunas de las cosas que lo hacen más fácil para nosotros construir.

2. Exploration of Browser-Based Babblefish

Short description:

Phil Nash discute las intrigantes posibilidades del desarrollo web, centrándose en crear una aplicación de traducción basada en el navegador sin servidores backend para uso personal durante unas vacaciones en España.

Lo que podemos construir, creo, es realmente interesante. Y lo que podemos construir en la web es aún más. {{^}}Lo que podemos ofrecer a las personas dentro de sus navegadores en un contexto enfocado en la privacidad, en un tipo de contexto seguro es aún más increíble, y eso es lo que vamos a ver hoy.

Así que tenía un título diferente para esta charla, pero tenía menos sentido cuando realmente lo pones en un horario. Quería llamar a esto el Babblefish integrado basado en el navegador, porque me gusta la aliteración, pero también porque quería construir una especie de Babblefish, y eso está tomado de la Guía del autoestopista galáctico, como la idea de un pez que podía vivir dentro del canal auditivo de las personas y traducir lo que otras personas estaban diciendo directamente en el discurso que escuchaban en su cabeza.

Tuve que obtener algunas representaciones de cómo podría ser esto, así que le pedí a Gemini, y esto fue extraño. Me gustó particularmente el borde en la oreja aquí. Eso es súper extraño. Cosas de IA. No tomen fotos de ello. Es raro. Este fue el intento de OpenAI, que es realmente bastante bueno, porque obtienes el pequeño apéndice en la parte inferior donde se engancha en el cerebro allí. Eso también es raro, ¿verdad? Es un Babblefish. Va a traducir cosas, y lo hará porque me voy de vacaciones a España este verano, lo cual creo que es lo que dice. Aprendí español en la escuela, lo que significa que ya no sé español.

3. Building Web-Based Translation Application

Short description:

El orador explora la construcción de una aplicación de traducción utilizando solo la plataforma web y el navegador, enfatizando la necesidad de capacidad de reconocimiento de voz a texto y APIs de traducción. Demostrando la efectividad de modelos de lenguaje como LangFlow para experiencias de traducción sin problemas.

Estoy muy emocionado por eso. Vivo en Australia. Está tan lejos de hablar español con personas como sea posible, pero tengo la suerte de ir a España de vacaciones, así que pensé, ¿puedo construir algo que me permita traducir mi camino tanto de inglés a español como de español a inglés, para saber de qué estoy hablando mientras estoy fuera? Esa es la idea. Veremos cómo nos va.

La pregunta es, ¿puedes construir una aplicación de traducción usando solo la plataforma web, solo el navegador web en sí, sin servidores backend, nada más? Sí. ¿Qué necesitas para esto? Necesitas poder hacer reconocimiento de voz a texto. Necesitas poder convertir lo que estoy diciendo en texto que luego podamos traducir de alguna manera y volver a convertir en voz. Ahora, idealmente, en realidad, todo esto sería solo un gran modelo de voz a voz, pero esos realmente no existen todavía, así que este es el tipo de proceso que vamos a seguir para lograr esto. Tradicionalmente, el navegador ha tenido un montón de APIs que son realmente útiles para esto. Tenemos la web speech API que hace reconocimiento de voz a texto dentro del navegador.

Necesitarías algún tipo de API de traducción, algo normalmente en tu lado del servidor para hacer algo al respecto. Como un aparte, por supuesto, los modelos de lenguaje grandes, siendo que se tratan de lenguaje, son realmente buenos en la traducción. Solo quería dar una demostración rápida de eso. Esto es LangFlow. Este es el tipo de constructor de IA general en el que trabajo. Es una aplicación de código abierto. Es Python, así que puedes simplemente pip installarlo. Este es casi como el más simple de los flujos que puedes hacer. Tenemos un prompt que dice que eres un experto en traducción de idiomas. Tiene un par de ejemplos como si la entrada es inglés, salida español. Si la entrada es español, salida inglés.

Luego puedes simplemente hablar con él y decir lo que quieras. Hola, me lo estoy pasando muy bien en la conferencia. Conferencia. Eso solo va a pasar por Gemini en este caso. Dice, hola, me lo estoy pasando muy bien a la conferencia. Disculpa mi acento. Todavía tengo que hablar. El punto es que Gemini y otros modelos son realmente buenos en traducir sin siquiera tener que intentarlo. Eso es genial.

4. Exploring Browser-Based Speech Capabilities

Short description:

El orador profundiza en las capacidades de la web speech API para funciones de texto a voz y de voz a texto, destacando la facilidad de reconocimiento de voz y la síntesis de voz basada en el navegador.

Podrías pasarlo a LangFlow en segundo plano para hacer esta traducción. ¿Qué nos da esta web speech API para empezar? Hablemos de ese lado de texto a voz, voz a texto. Reconocimiento de voz, súper fácil. Si no has visto esto antes, solo necesitas un objeto de reconocimiento de voz. Escuchas los resultados y luego lo inicias. Tienes que decirle qué idioma necesitas escuchar. Pero simplemente funciona. Tengo esto funcionando en mi navegador. Mis diapositivas también están ejecutándose dentro de canary. Esto no necesita canary. Esto funciona en Chrome regular.

Hola a todos. Esto debería comenzar a aparecer en la pantalla. Y lo que es bastante agradable de esto es que obtienes resultados intermedios. Y esos resultados intermedios aparecen en cursiva. Cuando dejan de estar en cursiva, significa que es el resultado finalizado. Eso es bastante bueno, ¿verdad? Voy a detener esto ahora antes de que transcriba toda mi charla. Eso es bastante genial. Eso existe en el navegador hoy. Ahora, no funciona en Firefox porque no tienen un servicio para hacer la traducción. Pero tal vez en algún momento en el futuro lo tendrán.

Por otro lado, hacer que el navegador hable, también es súper fácil. Tienes que usar APIs tan ridículas como la speech synthesis utterance, que es muy difícil de decir. He estado en una sala diciendo eso una y otra vez para asegurarme de poder hacer esto para ustedes hoy. Speech synthesis utterance. Le das al enunciado un idioma. De hecho, puedes darle una elección de voces, que verás en un minuto. Y luego simplemente le dices que hable el enunciado. Ahora, lo extraño de esto es que en realidad usa el sistema operativo subyacente. Y así, estoy usando una Mac y tenemos un montón de voces de Mac disponibles para nosotros.

5. Exploring Voices and Translation Challenges

Short description:

El orador explora diferentes voces en el contexto de las capacidades de habla basadas en el navegador y discute los desafíos de la traducción dentro del navegador, destacando el papel evolutivo de la IA en la web.

Verás diferentes voces si estás usando Windows o algo más. Pero aquí hay un ejemplo de esto. Solo voy a usar los auriculares para poder escuchar lo que está diciendo también. Es tan bueno pasar tiempo con todos ustedes en esta conferencia. ¿Verdad? Una agradable voz australiana para ustedes. Ahora, quiero decirles algo. Tenemos algunas cosas realmente extrañas aquí porque hay tantas voces.

Pero mi favorita absoluta y extraña es Bubbles. Ahora, quiero que me ayuden un poco aquí porque voy a reproducir esto de nuevo en la voz de Bubbles. Y me gustaría que todos dijeran cuando termine, eso es tan raro. Principalmente porque quiero que el resto de la conferencia sea como, ¿qué está pasando allá arriba? Pero también, estarán de acuerdo conmigo, es realmente raro. Y es tan bueno pasar tiempo con todos ustedes en esta conferencia. Eso es tan raro. ¿Por qué existe eso? No lo sé.

Voy a seguir adelante. Porque la traducción es lo que nos falta dentro del navegador. Eso es lo que no tenemos ahora mismo. Y así es donde tradicionalmente irías a un servidor para hacer esta traducción y volver. Ahora, eso va a tomar tiempo porque estás yendo a través de la red y está compartiendo lo que alguien está diciendo. Si estás tratando de traducir a otra cosa, probablemente a un servidor de terceros en algún lugar. Así que eso nos lleva a la IA en la web. Como dije, si viste la charla de Thomas antes, ahora te das cuenta de que Chrome puede hacer algunas de estas cosas. Y comienza con el prompt API.

6. Exploring Prompt API and Gemini Nano

Short description:

El orador discute la naturaleza experimental del prompt API, su integración en extensiones y la facilidad de construcción con modelos de lenguaje. Demuestran el uso de prompts para poemas y destacan las capacidades y limitaciones de Gemini Nano, un modelo de lenguaje pequeño pero poderoso.

Y sigue siendo el experimental. Como el prompt API todavía no está programado para entrar en un navegador pronto. Está abriéndose camino en las extensiones. Lo cual es bastante útil. Aún puedes construir cosas con él y conseguir que los usuarios usen al menos una extensión. Es súper fácil de configurar. Solo llamas a language model.create y esperas a que eso suceda.

Y luego dices una vez que tienes el modelo, solo le envías un prompt. Es así de fácil. De hecho, podemos hacerlo ahora mismo. Dije en mis diapositivas. Escríbeme un poema de cuatro líneas sobre gatos. Pelaje esponjoso y ojos esmeralda. Un corazón de cazador. Espíritu independiente. Un amigo peludo que sabe qué hacer. Perdimos la rima al final, ¿verdad?

Lo que tenemos aquí es Gemini Nano. Quiero hacer uno más. Yo estaba como, escribe un haiku sobre JavaScript y Ámsterdam. Lo intentará. Cafetería. Espectáculo vibrante. Centro tecnológico. Probablemente no el número correcto de sílabas. No es bueno haciendo haikus. Es porque tenemos Gemini Nano. Es un modelo de lenguaje grande y pequeño. Si estás acostumbrado a usar los modelos de frontera de Google con Gemini o Open AI, esperas mucho más de ellos. Cuando vas a Gemini Nano, es increíble. Es un paso atrás de seis, 12 meses.

7. Technical Requirements of Prompt API

Short description:

El orador discute los requisitos técnicos y limitaciones del prompt API, incluyendo el espacio de almacenamiento y las necesidades de VRAM para los modelos, enfatizando el estado de disponibilidad y los desafíos para diferentes dispositivos.

Todo lo que podrías haber aprendido de la ingeniería de prompt se aplica de nuevo. Es más difícil, pero se va a integrar. Tiene estos otros requisitos. Solo funciona en una máquina con Windows, Mac o Linux. No está en dispositivos móviles o Chrome OS. Aparentemente, necesita alrededor de 22 gigabytes de espacio de almacenamiento disponible.

El modelo solo tiene alrededor de dos gigabytes de tamaño, pero requiere esta cantidad de espacio de almacenamiento. Más de cuatro gig de VRAM. Y tuve que revisar mis notas. La documentación de Google todavía dice cuatro, así que mis diapositivas todavía dicen cuatro. El punto es, que no va a ser el dispositivo de todos. Definitivamente no.

Y si es la primera vez que se ejecuta, tienes que conseguirte un modelo de dos gigabytes, lo cual es aterrador de alguna manera. Hay un par de APIs adicionales alrededor de esto. Puedes llamar a esta sección de disponibilidad en el modelo de lenguaje. Eso te dirá si está no disponible, descargable, descargando o disponible. No disponible es como, esto no existe para ti. No puedes hacer esto en tu dispositivo. Descargable significa, claro, pero tienes que esperar a que lleguen dos gigas. Descargando está en camino. Y disponible es, estás listo. Puedes ir.

8. Exploring Specialized APIs of Prompt API

Short description:

El orador habla sobre las capacidades del prompt API, su controversia debido a Gemini Nano, y el desarrollo de APIs especializadas como translator, language detector, summarizer, writer, rewriter, y proofreader para tareas de enfoque específico.

Es genial, puedes pasar en ese método de creación, puedes pasar una función para monitorear la descarga y hacer que el usuario sea consciente de que hay una descarga en curso antes de que puedas usar esta característica en particular, quizás. De lo contrario, muy genial.

Pero luego, luego, porque este prompt API es un poco controvertido, porque está usando Gemini Nano y si otro navegador fuera a implementarlo, lo cual Edge ha estado trabajando con sus modelos Fi4, los modelos pueden comportarse de manera diferente a los prompts. Es controvertido cómo esto necesariamente va a funcionar. Eso hizo que el equipo trabajara para ver en qué estaban experimentando las personas usando el prompt API y luego construir modelos más pequeños que puedan hacer cosas de enfoque específico, resolviendo problemas comunes que las personas estaban tratando de lograr.

Esto nos dio APIs especializadas como el translator y language detector, que vamos a usar. El summarizer, con el que Thomas se divirtió un poco antes. Y luego hay otros nuevos, como el writer y rewriter, que son para edición, y luego proofreader, nuevamente, también para editar contenido. Translator, language detector y summarizer están llegando a Chrome 138 y en la beta ahora mismo.

9. Browser-Based Language Tools

Short description:

El writer y rewriter están en prueba, mientras que el proofreader fue anunciado recientemente. El translator es fácil de usar para traducciones rápidas. El language detector asegura la selección correcta de voz para el habla y detecta múltiples idiomas con niveles de confianza.

The writer y rewriter han estado en prueba de origen y el proofreader fue anunciado en Google I.O. hace unas semanas. No sé si existe todavía. No lo he probado. El translator, agradable y fácil. Creas un translator con un idioma de origen y un idioma de destino y puedes traducir cosas.

Genial. Para que yo pueda ir y hablar con alguien en España y decir que quiero hacer cosas, traduce cosas. Eso es rápido. Esta es una buena máquina en la que estoy trabajando.

Eso lo hizo en el navegador en ningún momento. Puedo cambiar esto. Puedo decir, sabes, me gustaría pedir una cerveza, por favor. Es un día caluroso y espero que haga calor en España.

10. Browser-Based Babelfish Speech Interaction

Short description:

El detector de idioma asegura la voz correcta para texto a voz. Ofrece niveles de confianza para el reconocimiento de idiomas. Puede detectar múltiples idiomas. Un Babelfish basado en navegador utiliza la Web Speech API para traducción y habla. Seleccionar voces como Monica mejora la experiencia.

Excelente. Esto es solo en el navegador. Esto no está accediendo a ninguna red ni haciendo nada. Y lo útil para nosotros es el detector de idioma, porque cuando vamos a convertirlo en habla, de texto a voz, necesitamos elegir la voz correcta para eso. No queremos elegir un acento australiano para leer cosas en español. Eso es algo malo.

El detector de idioma tiene la misma función de creación y tiene una función de detección. Y te mostrará un nivel de confianza. Te da un porcentaje de cuán seguro está de que es este idioma. Si cambiara eso a cerveza está en mi mente, aparentemente. Va a pensar que probablemente eso es español. Sí. Una vez puse algo ligeramente incorrecto.

Tal vez esto es español, tal vez esto es portugués. Así que es interesante notar que no solo hace un idioma. Detectará varios si no está seguro. Y así construí una aplicación completa para jugar con esto. Y eso vive aquí. Este es mi Babelfish basado en navegador y está usando la Web Speech API para hacer de voz a texto. Está usando el translator API para traducir de inglés a español. O si elijo el otro idioma, de español a inglés, y luego hablará en una voz. Así que voy a elegir una voz un poco mejor que Eddie. Voy a elegir a Monica. Voy a escuchar para asegurarme de que esto está funcionando de nuevo. Y hablar con él.

11. Exploring Multimodal Prompt API

Short description:

El orador discute la traducción entre inglés y español usando herramientas del navegador. Explorando los desafíos de implementar la API de voz web para uso sin conexión. Introducción de la API de solicitud multimodal para transcripción de audio.

Estoy pasando un gran momento hablando con todos ustedes aquí en JS Nation. ¿Bonito, verdad? Y ahora me gustaría una cerveza. Bien. No me está escuchando ahora. Pero debería hacerlo al revés, ¿verdad? Esperaba obtener una oración fácil allí. Y eso está saliendo en Karen, supongo. Genial.

Así que podemos traducir inglés a español, podemos traducir español a inglés, y podemos hacerlo usando nuestras herramientas integradas del navegador. Pero dije en mi resumen que quiero que todo esto esté integrado en el navegador y quiero que funcione sin conexión. Y el secreto detrás de la API de voz web y por qué Firefox no la implementa es porque está enviando a la API de reconocimiento de voz en la nube de Google en el backend.

Ahora, podemos usar eso gratis, lo cual es genial. Pero también significa que si alguien está obteniendo algo traducido y está usando tu aplicación para hacerlo, eso se enviará a Google. Entonces, ¿podemos hacer esto sin conexión? ¿Podemos traducir de voz, de audio a texto sin nada más? Y de nuevo, muy, muy nuevo. Esto se anunció en Google I.O. nuevamente hace un par de semanas, es la API de solicitud multimodal. Tom lo mostró antes con detección de imágenes y puedo mostrarte hoy con trabajo de audio.

12. Advancements in Browser-Based AI

Short description:

Tom demuestra la nueva y genial función de transcripción de audio en Chrome Canary. La funcionalidad sin conexión y el procesamiento de contenido generado por el usuario se destacan como beneficios clave de la IA basada en el navegador para traducciones.

Tom lo mostró antes con detección de imágenes y puedo mostrarte hoy con trabajo de audio. Está detrás de una bandera en Chrome Canary, es muy nuevo, pero es muy genial. Tomamos ese mismo modelo de lenguaje y simplemente le decimos que habrá algunas entradas esperadas en este tipo de audio. Y luego podemos obtener una transcripción simplemente diciendo, oye, transcribe este audio, y luego dándole el búfer de audio.

Actualmente, solo toma fragmentos de audio de hasta 30 segundos de duración. Si intentas darle algo más largo que eso, se cortará a los 30 segundos, pero solo lo estoy usando para oraciones a la vez en este punto, así que 30 segundos es demasiado largo. Pero la demostración ahora significa que voy a actualizar esta página, voy a apagar el internet, y esto de alguna manera prueba que si realmente intento hablar con esto ahora mismo, no puede escucharme.

Está tratando de enviar eso a un navegador, lo siento, a un servidor en algún lugar, y no puede, está sin conexión. Pero si uso la grabadora aquí, y déjame decirte, esto es un poco más de una tubería, porque en este caso particular, estamos usando dispositivos de medios para obtener acceso al micrófono. Estamos usando la API de grabadora de medios para detectar fragmentos de audio y empaquetarlos todos en una pequeña matriz.

13. Empowering Browser-Based AI

Short description:

Usando Web Audio API y prompt API para el procesamiento de búfer de audio y traducción. La IA basada en el navegador sin conexión permite diversas aplicaciones específicas para el usuario.

Luego lo convertimos en un búfer de audio usando la Web Audio API que la prompt API puede manejar, y luego se lo enviamos, y después de eso, tendemos a traerlo de vuelta y hablar en español, con suerte, en el otro lado.

Vamos. ¿Qué voy a decir? Me he quedado sin cosas en mi mente. Vamos todos a hacer una fiesta después de esta conferencia. Eso parece bien. Eso parece bien. Pero también, puedo decir lo mismo al revés, ¿verdad?

Vamos todos a hacer una fiesta después de esta conferencia. Y va a detectar que eso era inglés. Está diciendo cosas, ¿no? ¿Estaba diciendo cosas? No lo sé. Bien, bueno. Detectó usando el detector de idioma API que luego le hablé en español, por lo que pudo traducir eso de español a inglés y usar la voz correcta en el exterior también. Y así, este es el tipo de cosas que podemos construir con un poco de IA integrada en el navegador.

14. Enhancing User Experience with In-Browser AI

Short description:

La IA en el navegador permite tareas específicas para el usuario de manera rentable, como traducciones y resúmenes. La personalización de contenido y traducción mejora las experiencias del usuario y ahorra costos. Ofrecer sugerencias de texto alternativo para imágenes y transcripciones en el dispositivo mejora la accesibilidad y la privacidad.

Todo está fuera de línea, y eso es increíble. Y eso es increíble para un montón de casos de uso. Si tenemos IA disponible para nosotros en el navegador de esta manera, entonces muchas cosas generadas por el usuario y específicas para el usuario se pueden hacer directamente en el navegador. Porque si estuvieras tratando de hacer una traducción o un resumen basado en las preferencias del usuario para todos, eso cuesta mucho dinero con APIs de IA y cosas así. Si puedes hacerlo en el navegador, estás en un lugar mucho mejor.

Si estás traduciendo contenido generado por el usuario, siempre recuerdo en Twitter, si encontrabas un tweet en otro idioma, podría haber un pequeño enlace de traducir esto debajo. Ahora me gusta usar Blue Sky, pero eso no lo tiene, presumiblemente porque Blue Sky no puede simplemente permitirse tener una API de traducción para todos todo el tiempo. Pero podrían construirlo con esto. Podría ser una personalización de resúmenes de reseñas de usuarios. Podrías ver resúmenes de reseñas de productos de usuarios en Amazon estos días.

Pero si dijeras, si estuvieras obteniendo reseñas para un par de auriculares o algo, y te importara más el bajo, podrías decir, me importa el bajo, resume estas reseñas y lo que dicen particularmente sobre el bajo en estos auriculares. Y eso es como, eso no es algo que podrías hacer a escala, como personalizado para todos, a menos que esté funcionando en su dispositivo. Me encanta la idea de sugerir texto alternativo para cargas de imágenes. Cada vez que construyes un cargador de imágenes en cualquier lugar, solo ten uno de estos para decir, oye, ¿querías poner ese texto alternativo? Porque eso es importante para todos. Y luego transcribir y traducir videos, eso es muy caro normalmente. Y es increíble lo que podemos hacer con eso ahora.

QnA

Utilizing Privacy-Focused AI on Chrome

Short description:

Uso de IA centrada en la privacidad en Chrome Canary. Experimenta, proporciona retroalimentación y mejora aplicaciones. Accede a las APIs integradas de Chrome para demostraciones y compartir código.

Y la mayoría de esto también se debe a la privacidad. Como nada de esto salió de mi dispositivo después de que comencé a usar las cosas de IA integradas. Y eso creo que es realmente genial. No creo que tenga que cantar las alabanzas de la privacidad demasiado para entender que es una cosa positiva para nuestros usuarios.

Todo esto es completamente nuevo. Esto está en Chrome Canary. Pero, Dios mío, es hora de experimentar con ello. Es hora de probarlo. Únete al programa de acceso anticipado con Chrome, con el equipo de Chrome. Envíales tus comentarios. Construye cosas con ello. Y ve lo que podrías hacer para mejorar tus negocios, tus aplicaciones con el tiempo con estas cosas.

No puedo esperar a ver lo que construyes con ello. Y realmente quiero. Hay algunos enlaces a cosas. Así que esa es una especie de documentación para las APIs integradas de Chrome. Ese es el mejor lugar para comenzar a aprender sobre cómo realmente seguir adelante y construir todo esto. Tienen un montón de demostraciones en GitHub, lo cual es realmente genial. Compartiré el código de mi demostración en algún momento. Pero actualmente está horriblemente ensamblado porque las cosas no estaban funcionando durante bastante tiempo. Así que una vez que limpie ese código, puedo compartirlo contigo.

Utilizing Langflow for AI Enhancement

Short description:

Langflow para la experimentación de IA generativa del lado del servidor. La validación de la entrada del usuario y la moderación de contenido son casos de uso valiosos para las IAs locales basadas en el navegador.

Y luego, si alguna vez necesitas mejorar progresivamente, volver al servidor en algún momento, recomiendo el proyecto de código abierto Langflow como una forma de experimentar con IA generativa en el servidor también.

Así que muchas gracias. Ha sido un placer absoluto hablar contigo de nuevo. Mi nombre es Phil Nash. Soy un ingeniero de relaciones con desarrolladores en DataStax. Gracias.

¿Crees que la validación de la entrada del usuario o la moderación de contenido será un caso de uso válido para las IAs locales basadas en el navegador? Si es así, ¿en qué plazo? Creo que es un gran caso de uso para ello. Absolutamente. Si hay algo en particular que viene a la mente es la capacidad de validar entradas incorrectas.

Si tienes una página de comentarios o un sitio de redes sociales o lo que sea, poder detectar si este es un contenido tóxico es algo que poder hacer eso en el navegador te ahorra dinero. Hacer eso en el servidor es una opción. Pero creo que por ahora, obviamente, todo esto es un poco de una mejora progresiva si quieres usarlo.

Progressive Enhancement and Mobile Integration

Short description:

Mejorando la experiencia del usuario a través de la mejora progresiva con modelos más pequeños y enfocados. Expectativas para la integración en teléfonos móviles y desafíos en las capacidades variables de los dispositivos. Potencial para APIs dedicadas y expansión de modelos más pequeños en los navegadores.

Básicamente, casi no puedes en este punto, pero pronto. Pero puedes mejorarlo progresivamente usándolo donde esté disponible en un navegador y luego volviendo a un servidor si necesitas un servidor para esto también. Dado que estamos trabajando con modelos pequeños y enfocados, eso debería seguir siendo relativamente rentable en el servidor también. Pero sí, creo que es un gran caso de uso, que la validación de entrada es un gran caso de uso, particularmente para cosas que no podrías validar de otra manera con una regla o una expresión regular. No uses expresiones regulares. No, pero es realmente, realmente agradable.

Quiero decir, incluso si creas este tipo de caso de uso y lo compartes con Google, probablemente crearán una API dedicada para eso. Eso es lo que hicieron con el traductor y los detectores de idioma. Y es mucho más fácil llevar esos modelos más pequeños al navegador porque hay controversia sobre el prompt API.

Entonces, la siguiente pregunta es, ¿cuándo esperas que estas capacidades lleguen a los teléfonos móviles, si es que alguna vez lo hacen? Bueno, quiero decir, definitivamente hay algunos teléfonos móviles a los que no va a llegar, y probablemente sean todos los teléfonos móviles de los que Alex Russell estaba hablando antes. Así que, de nuevo, esto es una mejora progresiva en el mejor de los casos. Como, hay una posibilidad en el futuro de que todos tengamos dispositivos increíblemente poderosos, incluso en el extremo más barato o medio del mercado. Y eso definitivamente no es el caso ahora mismo. Así que, una vez más, esto es experimental. Como, los modelos más pequeños, lo siento, debería señalar, como, el prompt API es el grande es el modelo de 2GIG. Es el verdadero LLM. Los modelos más pequeños y enfocados funcionarán en hardware menos difícil. Y así deberíamos esperar ver más de esos surgir en más lugares. Creo que, como, los paquetes de traducción de idiomas, como de inglés a español, son de unos 80 megabytes ahora mismo. Así que no son 2GIG. No toma todo eso. Y ejecutarlos es mucho más fácil, también. Así que deberíamos verlo llegar a la mayoría de los dispositivos y, ciertamente, a los nuevos. Pero tienes que tener en cuenta la mejora progresiva y ese tipo de cosas también.

Fireside API and Real-time Translation

Short description:

Discutiendo Fireside API para llamadas de iPhone, mejora progresiva con el kit de herramientas Firebase AI, desafíos de detección de múltiples voces y viabilidad de traducción en tiempo real.

Sí, tiene sentido. De hecho, Thomas, antes en su charla, decía que puedes usar Fireside API. Eso es una llamada de iPhone. Si no tienes la manera de hacerlo localmente, puedes llamar a la API. Sí, así que sigo hablando de esto como esta mejora progresiva que construyes tú mismo. Sí, absolutamente. Google o el equipo de Firebase juntaron un kit de herramientas de Firebase AI dedicado al frontend que utiliza AI en el navegador si es posible y se conectará automáticamente a un servidor por ti si no lo haces. Así que, sí, es una herramienta muy genial. Me gustaría ver, espero que haya más de ese tipo de cosas también. Porque esa, creo, específicamente se conecta al hosting de modelos de Firebase y cosas así. Y si quieres usar otra cosa. Pero, sí. Muy genial. Muy genial.

¿Y qué pasa si dos, tres personas hablan simultáneamente? ¿Será capaz de detectar? Oh, practico esto en una habitación tranquila por mi cuenta. Podemos intentarlo más tarde. Quiero decir, esto es probablemente algo, sí, reunámonos y hablemos todos al mismo tiempo en algún momento. No creo que lo haga muy bien. Pero, en su mayoría, nada lo hace muy bien al identificar múltiples voces si están hablando simultáneamente. Así que, no creo que tenga detección de diferentes hablantes y las cosas enfocadas que otros modelos y productos de reconocimiento de voz a texto más profundos tienen. Pero sí, probémoslo. Veamos qué hace. De hecho, puedo relacionarme con esa pregunta. Porque en España, cuando hablamos, hablamos al mismo tiempo. Podemos hablar de algo, pero estamos hablando todos al mismo tiempo. Así que esto es realmente interesante. Entonces, ¿ves estas APIs siendo utilizadas para la traducción en tiempo real del contenido de la transmisión? ¿Es eso viable en este punto? No veo por qué no. Me gusta eso. Como, si estás recibiendo... Sí, deberías poder, como, tomar una transmisión, traducirla a ese texto, traducirla en tiempo real si lo necesitas.

Privacy Concerns and Feasibility

Short description:

Discusión sobre la viabilidad de la traducción en tiempo real, preocupaciones de privacidad respecto al entrenamiento de AI, uso de modelos basados en el navegador y confianza en la capacidad offline para el entrenamiento.

Sí, me encantaría ver eso como un caso de uso. ¿Es eso factible en este punto? Nuevamente, como, la pregunta en este punto siempre es como, oh, sí, claro, si tus usuarios tienen contenido, y una bandera activada. Pero pronto, pronto. Genial.

Entonces, sobre la privacidad, ¿podemos estar seguros de que el contenido que traducimos no se utiliza para el entrenamiento de AI, y es seguro compartir nombres y otros detalles personales? Espero que no... Correcto. Entonces, lo que está sucediendo aquí es que el navegador está descargando un modelo para ejecutarse dentro del propio navegador. No es que... Sabes, apagué la red allí, y funcionó, lo que significa que no está llamando a casa. No está haciendo cosas así. Eso es lo que hacía la web speech API, al menos en Chrome. Estaba llamando a casa y obteniendo cosas del cloud speech. Y aunque es útil, la privacidad es una preocupación. Con todos estos modelos, nada sale del dispositivo.

Y, ya sabes, supongo que tanto como confías en Google para no simplemente, si alguien enciende Google, si alguien enciende dispositivos de medios, canalizar eso hacia ellos mismos, tendrías que confiar en ellos para hacer eso. Puedes probarlo. Puedes abrir la pestaña de red para ver si se están haciendo conexiones. Puedes ver lo que está sucediendo en el fondo. Creo que podemos confiar en que estas cosas son capaces de funcionar sin conexión y no se utilizarán para entrenar cosas. Eso es bueno.

Model Integration and Language Packs

Short description:

Discusión sobre el tamaño del modelo, integración en navegadores, uso de modelos locales, disponibilidad de paquetes de idiomas y cobertura de traducción a través de modelos de navegador.

cosas son capaces de funcionar sin conexión y no se utilizarán para entrenar cosas. Eso es bueno. Sí. ¿Prevés que esas 22 gigabytes de cargas lleguen al navegador, o tendrá sentido estar empaquetado en el... Así que es algo importante. Solo requiere que haya 22 gigabytes de espacio. Creo que el modelo en sí solo tiene dos gigabytes de tamaño. Eso es una cosa. No tiene que ir y descargar 22, lo cual es algo bueno. ¿Se integrará en el navegador en primer lugar? Tal vez, pero también tal vez no. Creo que integrarlo en el navegador en primer lugar significa que tienes que detectar qué tipo de dispositivo se está descargando, para no ocupar accidentalmente dos gigabytes del espacio de alguien sin poder realmente ejecutarlo. Pero una vez que lo descargas por primera vez para una aplicación, es solo parte del navegador.

Así que está ahí para cualquier otra aplicación que quiera usarlo después. No es tu versión del modelo, es la versión del modelo del navegador, por lo que estará allí después. Otra cosa que quiero mencionar, de hecho, estaba hablando con Thomas antes de subir a dar esta charla, y aparentemente, aunque demostré que la Web Speech API, que llama a un servidor ahora mismo, sabes, no funciona sin una conexión de red, hay una bandera que puedes activar para usar un modelo local, y si tienes el modelo de traducción local, entonces es totalmente posible que funcione localmente en el futuro.

Así que esto es algo que se ha añadido a la especificación, y por lo tanto integrar estos modelos en los navegadores para hacer este tipo de cosas realmente nos va a ayudar en esas viejas APIs, así como en estas nuevas. Oh, realmente genial, realmente genial. Y sí, la última pregunta, ¿qué pasa con idiomas como el japonés? Esa es una gran pregunta. Así que hay un montón de paquetes de idiomas disponibles. Usé inglés a español, principalmente porque genuinamente voy de vacaciones a España. Inglés a japonés es en realidad uno de los paquetes que pude descargar antes. Ahora, hay muchos disponibles, pero creo que dado cualquier versión de Canary que tenía en ese momento, me estaba negando inglés a francés. Existen y están llegando, pero no me estaba permitiendo hacerlo, pero inglés a japonés absolutamente está ahí. Simplemente no jugué con las cosas en japonés porque no sabría si lo estaba haciendo correctamente o no. Pero sí, hay muchas de estas cosas de idiomas dando vueltas, y creo que incluso mejor para las cosas de traducción que si no hay una directa de un idioma a otro, creo que se está construyendo de tal manera que podrías pasarlo a través de un modelo intermedio donde vas de inglés a un idioma, perdón, de un idioma a inglés, inglés al otro idioma, y obtener toda la cobertura de idiomas sin tener que necesariamente cubrir todo. Por supuesto, podrías encontrar que la calidad varía en ese punto, pero. No, tiene sentido. Y al final, si quieres estos idiomas, solo pídeles. Sí. Oh, absolutamente. Sí. De vuelta al equipo de Chrome. No, agradable. Qué realmente agradable.

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.
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.
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)
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.
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í
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