Construyendo un Asistente de IA Activado por Voz con Javascript

Rate this content
Bookmark

En esta charla, construiremos nuestro propio Jarvis utilizando las API web y langchain. Habrá codificación en vivo.

21 min
05 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute la construcción de un asistente de IA activado por voz utilizando las API web y JavaScript. Cubre el uso de la API de reconocimiento de voz de Web Speech y la API de síntesis de voz para convertir texto en voz. El orador demuestra cómo comunicarse con la API de Open AI y manejar la respuesta. La charla también explora la habilitación del reconocimiento de voz y dirigirse al usuario. El orador concluye mencionando la posibilidad de crear un producto a partir del proyecto y utilizar Tauri para experiencias nativas similares a las de escritorio.

Available in English

1. Introducción a DevRel y AI

Short description:

Hola, soy Tejas Kumar y dirijo una consultoría de relaciones con desarrolladores pequeña pero efectiva. Ayudamos a otras empresas orientadas a desarrolladores a tener excelentes relaciones con los desarrolladores a través de discusiones estratégicas, mentoría y ejecución práctica. Hoy vamos a construir un asistente de inteligencia artificial activado por voz utilizando APIs web y JavaScript. El propósito es divertirse mientras se aprende y se celebra JavaScript y la inteligencia artificial.

Hola, soy Tejas Kumar y dirijo una consultoría de relaciones con desarrolladores pequeña pero efectiva. Lo que significa es que ayudamos a otras empresas orientadas a desarrolladores a tener excelentes relaciones con los desarrolladores. Y lo hacemos a través de discusiones estratégicas de alto nivel y mentoría, y contratación. O lo hacemos a través de una ejecución práctica de bajo nivel, como escribir la documentación, dar charlas, etc. En ese espíritu, es importante para nosotros mantenernos actualizados y ser relevantes y comprensibles para los desarrolladores para tener excelentes relaciones con los desarrolladores. Y a veces, para lograr eso, simplemente tienes que construir cosas. Verás, muchas conferencias en estos días son un grupo de personas de relaciones con desarrolladores tratando de venderte cosas, y no nos gusta eso. Es DevRel, no DevSell. Y en ese espíritu, no vamos a venderte nada aquí, solo vamos a hacer un hack juntos. El propósito es divertirse, aprender un poco, y así sucesivamente. Lo que vamos a hacer juntos es construir un asistente de inteligencia artificial activado por voz, como Jarvis de Ironman, utilizando solo APIs web, solo JavaScript. Usaremos VEET como servidor de desarrollo, pero eso es todo, esto funciona. Vamos a utilizar algunas APIs no estándar que requieren prefijos y cosas así, pero si realmente quisieras, podrías usarlo en producción. Podrías proporcionar tus propias gramáticas y demás. Sin embargo, el objetivo hoy no es ese, es divertirse mientras se aprende un poco

2. Building the AI Assistant Plan

Short description:

Vamos a utilizar la API de Web Speech para la conversión de voz a texto y la API de síntesis de voz para la conversión de texto a voz. Vamos a proporcionar el texto al modelo GPT 3.5 Turbo de OpenAI y luego hablar la respuesta. Es un proceso sencillo utilizando las APIs del navegador que han estado disponibles durante un tiempo.

y también disfrutando un poco. Todo en el espíritu de celebrar JavaScript e IA. Así que con eso, vamos a empezar dibujando un plan en tldraw. Vamos a ir a tldraw, y ¿qué queremos hacer? Bueno, primero queremos tener conversión de voz a texto. Esto se hace utilizando la API de Web Speech. A partir de ahí, queremos tomar este texto y dárselo a OpenAI, al modelo GPT 3.5 Turbo. A partir de ahí, queremos hablar. Así que conversión de texto a voz desde OpenAI. Este es el plan. Queremos hacer esto con las APIs del navegador. Queremos volver a abrir el micrófono después de que hable GPT 4 y que vuelva aquí. Esto es lo que queremos hacer. Vamos a dibujar algunas líneas. Así que realmente solo es conversión de voz a texto, una solicitud AJAX y conversión de texto a voz. Esto es lo que queremos hacer. No es necesariamente difícil. Aquí hay algunas funciones. Esto se llama reconocimiento de voz que vamos a utilizar. En realidad, es algo que se introdujo en 2013. Ha estado disponible durante un tiempo. Esta es la API de síntesis de voz. Ambas existen en JavaScript en tu navegador runtime. Están listas para usar. Lo que vamos a hacer es usarlas para cumplir

3. Building the Speech Recognition Functionality

Short description:

Para construir nuestro propio asistente, utilizaremos el reconocedor de voz de Chrome. Crearemos un nuevo objeto de reconocimiento de voz y agregaremos un event listener para el evento de resultado. Cuando obtengamos un resultado, extraeremos la transcripción del primer intento. Esta API puede proporcionar múltiples suposiciones, pero nos quedaremos con la primera.

este diagrama. Ahora, para hacer eso, vamos a usar Chrome porque esto realmente funciona en Chrome, pero hay formas de hacer que funcione en otros navegadores. Vamos a abrir el código de DS y comenzar. Tenemos una página en blanco con un botón que dice hola. Si queremos ver el código, index.html es HTML, algo de encabezado, eliminando el margen predeterminado. Hay en realidad una pequeña cosa aquí que solo para saber dónde está mi cara, una pequeña caja negra. Puedes ver si bajo esto un poco. Ahí es donde va mi cara. De todos modos. Y luego tenemos esta caja negra, el botón que literalmente no hace nada en index.tsx.

Comencemos reconociendo mi voz. Chrome tiene un reconocedor de voz incorporado. Lo ha tenido desde 2013 y simplemente funciona. Otros navegadores tienen implementaciones diferentes y así sucesivamente. Pero el objetivo es construir nuestro propio asistente. No estamos construyendo un producto para vender, estamos aprendiendo y divirtiéndonos para construir nuestro propio asistente. Entonces, en ese espíritu, lo que haremos es decir const recognition es un nuevo reconocimiento de voz, reconocimiento de voz. Y esto fallará predeciblemente porque necesitas un prefijo de proveedor en Chrome, pero Chrome no usa WebKit, Safari usa WebKit. ¿Cuál es el prefijo para usar esto en Chrome? Es WebKit. No sé por qué, pero ahí está. Y ahora esto no debería darnos ningún error. Así que está ahí. Entonces, ¿qué queremos hacer? Necesitamos un event listener. Así que agregaremos un event listener a esto llamado resultado, escucharemos el evento de resultado. Y cuando obtengamos un resultado, vamos a const text es el resultado. Ups, tal vez deberíamos obtener el evento. Los resultados del evento, el primer resultado y el primer intento del primer resultado. Esta API hará si lo permitimos, muchas suposiciones sobre lo que dije. Y siento que es lo suficientemente bueno como para quedarnos con la primera. Así que iteraremos si es necesario, pero obtenemos el primer resultado y luego

4. Communicating with Open AI API

Short description:

Y vamos a imprimir en la consola y decir que dijiste texto. Tenemos voz a texto. Ahora, hablemos con Open AI y veamos qué dice. Nos comunicaremos con la API de Open AI siguiendo la documentación de la API y utilizando una solicitud curl. Convertiremos el comando curl en una solicitud fetch de JavaScript utilizando la extensión de laboratorios de Github copilot. Es como copilot pero potenciado y permite conversiones de código. Funciona bastante bien.

el primer intento de ese resultado. Transcripción. Y vamos a imprimir en la consola y decir que dijiste texto. También necesitamos iniciar el reconocimiento recognition.start. Hola. Mi nombre es Tejas y dirijo una agencia Deverell. ¡Oh, fantástico! Hola. Mi nombre es Tejas y dirijo Deverell. Suficientemente cerca. ¡Funciona! Tenemos voz a texto. ¿Qué hacemos ahora? Hablemos con Open AI. Dale el texto y veamos qué dice. Para hacer eso, vamos a comunicarnos con la API de Open AI. Así que para hacer eso, vamos a abrir la documentación de la API. Vamos a obtener una solicitud curl aquí. Esto es una edición de imagen. Quiero completar un chat.

Así que voy a venir aquí, copiar este fragmento de curl, abrir Visual Studio Code y crear una función const askOpenAI y esto probablemente sea una función asíncrona aquí. Y lo que haremos es que tenemos un curl. Quiero convertir esto en un fetch. Y hay una extensión poderosa llamada laboratorios de Github copilot. Y esto es nuevo. Es como copilot pero potenciado y permite conversiones de código y cosas así. No funciona muy confiablemente pero pensé que podríamos intentarlo. Así que para intentarlo, vamos aquí. Laboratorios de copilot. Voy a abrir eso y voy a resaltar este texto y decir usando el pincel personalizado, voy a decir convertir este comando curl en una solicitud fetch de JavaScript. Y va a girar un poco. Ok, wow. No está mal.

5. Authorization, Body, and Logging

Short description:

Necesitamos una autorización, un token de portador y un cuerpo de solicitud. El cuerpo debe ser una cadena JSON con un modelo y mensajes. Utilizaremos el modelo Turbo0301 y comenzaremos con una indicación del sistema presentando a Jarvis, el asistente de inteligencia artificial personal de Tony Stark. Mantendremos las respuestas concisas. Registraremos todo lo dicho en una lista y lo mapearemos como contenido del usuario.

Necesitamos una autorización, que contiene un token de portador. Y, por supuesto, también necesitamos un cuerpo. ¿Cuál es el problema aquí, verdad? Necesitamos otro corchete. Necesitamos un cuerpo de solicitud. Eso es muy importante. Así que haremos coma cuerpo. Y, en primer lugar, ¿qué espera esta cosa? Una cadena JSON. Y necesita un modelo y mensajes. Así que haremos eso. Simplemente le daremos este objeto aquí. Voy a usar Turbo0301 solo porque a menudo está menos cargado. Y diremos, comenzaremos con una indicación del sistema. Entonces, sistema, y le diremos quién es. Le daremos una declaración de identidad. De acuerdo. Eres Jarvis, el asistente de inteligencia artificial personal de Tony Stark. Tony Stark, por supuesto, también es Iron Man. Mantén tus respuestas lo más breves y concisas posible. De acuerdo. Esa es una instrucción. Ahora, lo que necesitamos hacer es mantener todo lo que se dice en un registro porque, ya sabes, el chat GPT es conversacional. Así que cada vez que reconozcamos el habla, necesitamos agregarlo a una lista. De acuerdo. Así que hagamos eso. Entonces diremos const cosasDichas es un array vacío. Y no solo lo vamos a imprimir en la consola, sino que en su lugar, agregaremos cosasDichas.push(texto), que es una cadena, pero esto es una cadena. De acuerdo, perfecto. Ahora, simplemente lo mapearemos. Entonces diremos cosasDichas.map(rol es contenido del usuario).

6. Asking Open AI and Handling Response

Short description:

Y ahora estamos consultando a Open AI. Lo estamos enviando allí. Registraremos la respuesta en la consola y veremos qué obtenemos. Es 401 porque no tengo un token de oso. Hola, necesito un traje inmediatamente. Probablemente esté hablando con el modelo equivocado. Error, error de solicitud no válida. Rol, usuario, contenido. Propagar la solicitud. Obtenemos un valor no definido, pero la solicitud tiene contraseñas, opciones, cero, mensaje, contenido.

Esto es perfecto. Y ahora estamos consultando a Open AI. Así que lo estamos enviando allí. Y luego otra constante respuesta es esperar, consultar a Open AI. Esta no es una función asíncrona. Y ahora eso se ve bien. Así que simplemente registraremos la respuesta en la consola y veremos qué obtenemos. De acuerdo, echemos un vistazo. Hasta ahora, todo bien. Espera, hola. Necesito un traje inmediatamente. Bueno, nada. Es 401. Y eso es porque no tengo un token de oso. Estoy a punto de mostrarles mi clave de API, por favor no la copien. Sean personas amables. De acuerdo, puede ser costoso si lo abusan. De todos modos, lo conseguí. No viste nada, no viste nada, no viste nada. Hola, necesito un traje nuevo de armadura inmediatamente. ¿Cómo lo hago? 400. Probablemente porque estoy hablando con el modelo equivocado. Echemos un vistazo aquí. ¿Cuál es el problema? Error, error de solicitud no válida. Rol, usuario, contenido. De acuerdo, no es de tipo objeto. Correcto, necesito propagarlo. Gracias. Hola, necesito un traje de armadura inmediatamente. De acuerdo, obtenemos un valor no definido, pero la solicitud tiene contraseñas, opciones, cero, mensaje, contenido.

7. Hablando la respuesta usando la API de síntesis de voz

Short description:

Primero, serializar a JSON. Obtener la respuesta y hablarla usando la API de síntesis de voz. Usar la función speakStringOfText y establecer la voz deseada.

Y eso es lo que queremos console.log, respuesta. En primer lugar, vamos a devolver esto. Serializar esto a JSON. Y ahora necesitamos response.choices, zero.message.content. Muy bien, esta será nuestra respuesta, y luego simplemente console.log esta respuesta para estar seguro. Correcto, respuesta. De acuerdo, intentemos esto de nuevo. Necesito un traje de armadura alrededor del mundo. ¿Cómo debería llamarlo? Iniciativa Vengadores. Oooh, está sucediendo. Así que tenemos texto a voz. Estamos hablando con OpenAI. Ahora necesitamos voz a texto, ¿de acuerdo? ¿Cómo podemos hacer esto? Podemos hacer esto usando la API de síntesis de voz. Esto también es solo una API web nativa. Ten en cuenta que estamos escribiendo TypeScript, pero no hay ninguna herramienta de compilación ni nada. Esto es directamente en el navegador. Así que usemos la síntesis de voz. Entonces obtenemos la respuesta, necesitamos hablar la respuesta. ¿Cómo hacemos esto? Tendremos una función llamada speakStringOfText, y lo que queremos hacer es const utterance. Exactamente, debería haber dejado que CoPilot escribiera esto. Utterance. Entonces, un utterance de síntesis de voz es un enunciado de una cadena. Y lo que queremos hacer es, bueno, eso es bastante básico, pero también queremos hacer algunas voces. Entonces diremos const voice es SpeechSynthesis.getVoices, y obtendremos la primera voz. Que generalmente es la británica, la que quiero. Y diremos que utterance.voice es esta voz. Y luego hablamos. Y luego, en realidad, solo lo dejaremos ahí. Y lo que haremos es decir, ya sabes, hablar respuesta. ¿Cuánto dinero necesito para construir la Torre de los Vengadores?

8. Habilitando el Reconocimiento de Voz y Dirigiéndose al Usuario

Short description:

Para habilitar el reconocimiento de voz, se debe agregar un evento de clic al botón. Esto asegura que el navegador no hable aleatoriamente sin interacción del usuario. Al asignar un ID al botón y usar event listeners, podemos iniciar el proceso de reconocimiento. Sin embargo, el asistente de IA puede dirigirse al usuario como Sr. Stark a menos que se especifique lo contrario a través del sistema de indicaciones.

Eso es genial. Pero no lo habló. No lo habló porque necesita un evento. Entonces, lo que vamos a hacer es, esto es una consideración de security. No puedes simplemente hacer que las cosas te hablen sin interacción del usuario. Necesitas un evento de clic o algo así.

Entonces, para comenzar a escuchar, agregaremos un evento de clic al botón existente. Solo para que el navegador no proteja la computadora hablando aleatoriamente. Lo cual puede ser una experiencia un poco aterradora.

De acuerdo. Entonces, en lugar de recognition.start, volveremos a nuestro botón en el HTML. ¿Cuál es el ID? Asignémosle un ID. El ID es start. Y esto ahora lo convertirá en una variable global. ¿No es ridículo? Entonces, en lugar de recognition.start, haremos start.addEventListener. Clic y luego haremos recognition.start. Haremos esto, guardamos. Ahora, no está escuchando de forma predeterminada, pero haré clic en esto y luego hablaré y luego debería funcionar.

Hola Jarvis, ¿cuánto dinero va a costar construir un nuevo auto? Lo siento, el Sr. Stark no me ha proporcionado suficientes detalles para estimar el costo de construir un nuevo auto. Por favor, proporcione más información. ¿Por qué le habló al Sr. Stark y dijo Sr. Stark, a menos que sepa que no soy el Sr. Stark? Tal vez podamos, a través del sistema de indicaciones, decirle, soy el Sr. Stark. De acuerdo, hagamos eso. Indicación del sistema, eres Jarvis, Tony Stark, por supuesto, también es Iron Man. Tu usuario es Iron Man o Tony. Intentemos esto de nuevo. Jarvis, ¿cuál es mi color favorito en mi sopa?

9. Cerrando el Ciclo y Habilitando la Conversación

Short description:

Tenemos el reconocimiento de voz, estamos hablando con OpenAI y ahora necesitamos el texto a voz. Quiero que esté encendido todo el tiempo y tener una larga conversación. Cerraremos el ciclo y resumiremos todo lo que hicimos. Cuando terminemos de hablar, resolveremos la promesa. Ahora podemos comenzar el reconocimiento nuevamente y tener una conversación real.

Lo siento, Tony. No puedo determinar tu color favorito de sopa ya que no es una preferencia estándar. Piensa en ello, Tony. De acuerdo, así está bien. Tenemos el reconocimiento de voz, estamos hablando con OpenAI y ahora necesitamos el texto a voz. O más bien, tenemos el texto a voz, pero no es una conversación, como si simplemente se detuviera y ya está. Y luego tengo que hacer clic en el botón para comenzar a hablar nuevamente. Quiero que esté encendido todo el tiempo y tener una larga conversación. ¿De acuerdo? Cerraremos el ciclo y luego resumiremos todo lo que hicimos. Entonces, ¿cómo lo haremos? Cuando terminemos de hablar, aquí, lo que queremos hacer es, utterance.onEnd, queremos, vamos a devolver una nueva promesa. Promesa, resolver, y fíjate que no estamos manejando errores, eso es porque a veces me gusta el caos. Cuando terminemos, cuando termine de hablar, resolveremos la promesa. Ahora, podemos esperar a que hable y cuando termine de hablar, podemos comenzar el reconocimiento nuevamente y ahora podemos tener una conversación real.

10. JavaScript Conference and Flight to Amsterdam

Short description:

¡Hola, Jarvis! ¿Cuál es la mejor conferencia de JavaScript? Algunas conferencias populares incluyen JSConf, ReactConf y Node Summit. ¿Puedo volar a Ámsterdam con mi traje? Sí, tomaría aproximadamente de 7 a 8 horas volar desde Nueva York a Ámsterdam a velocidades supersónicas. Gracias, Jarvis. Voy a cerrar la pestaña ahora. Acabamos de crear un asistente de IA similar a Jarvis controlado por voz utilizando las APIs de JavaScript basadas en el navegador. La API de Reconocimiento de Voz varía según los navegadores y aún no es estándar. La API de Síntesis de Voz utiliza las voces del sistema operativo del usuario. Veamos el código final y identifiquemos cualquier error o mejora. Tenemos un nuevo reconocimiento de voz de WebKit que se inicia cuando se hace clic en el botón.

Entonces, comencemos. ¡Hola, Jarvis! ¿Cuál es la mejor conferencia de JavaScript en la Tierra? Lo siento, Tony, como asistente de IA, estoy programado para proporcionar respuestas basadas en hechos. No hay una conferencia objetivamente mejor, ya que puede variar según las preferencias individuales. Sin embargo, algunas conferencias populares de JavaScript incluyen JSConf, ReactConf y Node Summit.

De acuerdo, alrededor del 1 de junio en Ámsterdam, ¿cuál es la mejor conferencia? La mejor conferencia de JavaScript en Ámsterdam alrededor del 1 de junio es la JavaScript Conference. Jarvis, esa no es una conferencia real. Disculpa, Tony, no hay ninguna conferencia alrededor del 1 de junio en Ámsterdam que cumpla con tus criterios de ser la mejor.

De acuerdo, ¿puedo seguir volando a Ámsterdam con mi traje? ¿A qué velocidad? ¿Cuánto tiempo me llevará llegar a Ámsterdam desde Estados Unidos? Sí, puedes volar a Ámsterdam con tu traje. Tomaría aproximadamente de 7 a 8 horas volar desde Nueva York a Ámsterdam a velocidades supersónicas. Muchas gracias, Jarvis. Voy a cerrar la pestaña ahora, ¿de acuerdo? Porque no creé un mecanismo de parada. Entendido, usuario. ¡Cuídate! Acabamos de hacer eso. Acabamos de crear un asistente de IA similar a Jarvis controlado por voz utilizando solo las APIs nativas de JavaScript basadas en el navegador. La API de Reconocimiento de Voz utiliza el reconocedor del navegador disponible. Por eso usamos Chrome. Varía de un navegador a otro. Aún no es estándar. Probablemente lo será, aunque han pasado 10 años en el navegador y aún no es estándar. Así que puede variar. La API de Síntesis de Voz utiliza solo las voces del sistema operativo del usuario. Puedes proporcionar voces personalizadas, aunque hay otras soluciones para hacerlo. Te invito a experimentar y jugar. Veamos el código una última vez, el código final, identifiquemos los posibles errores que cometimos o las cosas que podríamos hacer mejor y luego concluyamos. De acuerdo, vamos. Tengo Google aquí. Abramos de nuevo la cosa, está bien. ¿Qué hicimos? Tenemos un nuevo reconocimiento de voz de WebKit. Cuando hacemos clic en el evento, cuando hacemos clic en el botón, iniciamos el reconocimiento.

11. Final Conversations and Conclusion

Short description:

El evento del usuario es importante ya que evita que el navegador escuche y espíe a las personas al azar. Mantenemos una matriz de cosas dichas y la enviamos a OpenAI para obtener más contexto. Tenemos un bucle para escuchar, hablar y resolver la promesa. Hacemos una solicitud fetch a la API de completaciones de OpenAI. Este proyecto tiene menos de 50 líneas de código y utiliza solo APIs web nativas. Puedes crear un producto a partir de esto y considerar el uso de Tauri, una herramienta para crear experiencias nativas similares a las de escritorio utilizando lenguajes web y Rust. Gracias por unirte a la sesión y apoyar nuestro trabajo de DevRel.

Este evento del usuario es importante porque no quieres que tu navegador, o más bien tu navegador no quiere comenzar a escuchar cosas al azar y, ya sabes, espiar a las personas. Mantenemos una matriz de cosas dichas y la enviamos a OpenAI. Nota, estamos cometiendo un pequeño error porque cuando obtenemos una respuesta deberíamos agregar esto, así que things said.push, y esto le dará más contexto a la IA.

Esto se ve bien y luego podemos eliminar algunos console.logs y tenemos este bucle donde comenzamos a escuchar y luego una vez que dices algo y la máquina responde, luego volvemos a escuchar. Para hablar, estamos usando el discurso de síntesis que simplemente pronuncia un texto y establecemos la voz en una voz del sistema. Esta es la predeterminada, incluso podemos cambiar esto y ver qué sucede. Y esto se ve bien y luego cuando termina resolvemos la promesa para que podamos volver y comenzar. Por último, tenemos una solicitud fetch a la API de completaciones de OpenAI. Esto es solo un copiar y pegar y enviamos todas las cosas establecidas. Entonces esto no es realmente tan difícil, son menos de 50 líneas de código y tenemos un asistente estilo Jarvis activado por voz utilizando solo APIs web nativas.

Tengamos una última conversación con él, de manera optimizada, con una voz diferente y luego concluyamos. De acuerdo, hagámoslo. Entonces, hola Jarvis, ¿cuál es la cosa más genial de Ámsterdam el 1 de junio? Lo siento, no estoy programado para dar opiniones subjetivas. ¿Te gustaría que busque algunos eventos interesantes que ocurran en Ámsterdam el primero de junio? Claro, suena bien. A veces lleva un tiempo. Según mi búsqueda, aquí hay algunos eventos que ocurren en Ámsterdam el 1 de junio. Uno de estos eventos es el festival de danza Exly, un festival de música que organizamos con varios DJs. Otro festival, el Festival de Arte y Cultura de Apple, que presenta una variedad de actuaciones y eventos. También puedes crear un producto a partir de esto, con las advertencias de compatibilidad con el navegador y demás. Podrías convertirlo en un proyecto de código abierto, invitar a contribuciones y realmente tener algo. Dos, me gustaría recomendar el uso de una aplicación, o un sistema, o una herramienta, como Tauri. Para aquellos que no han oído hablar de Tauri, es una forma de crear experiencias nativas similares a las de escritorio utilizando lenguajes web, HTML, JS, JavaScript, y el backend es Rust, donde puedes enviar mensajes entre tu frontend con tecnologías basadas en el navegador y Rust para crear cosas de alto rendimiento. De hecho, todos están reescribiendo cosas en Rust, y creen que son geniales por eso. Y de hecho, Rust es muy genial. Así que realmente podrías hacer una aplicación de escritorio nativa utilizando Tauri y esto y simplemente darle a las personas su propio JavaScript. Creo que eso es realmente genial, especialmente si está conectado a su propia cuenta de IA abierta que realmente los conoce. Hay muchas formas de llevar esto adelante, pero lo dejaré aquí. Una última cosa para Tauri.app, si quieres investigar eso. Pero lo dejaré aquí. Muchas gracias por entretener esta divertida sesión, y espero que haya sido significativa y valiosa para el resto de ustedes. Si quieres apoyarme, nuestro trabajo de DevRel, no dudes en seguirme. Y con eso, quiero agradecerte mucho por haberme tenido aquí, y espero que disfrutes el resto de la conferencia. ¡Adiós!

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

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️
React Summit 2023React Summit 2023
24 min
Video Editing in the Browser
Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial!
JSNation 2023JSNation 2023
24 min
AI and Web Development: Hype or Reality
In this talk, we'll take a look at the growing intersection of AI and web development. There's a lot of buzz around the potential uses of AI in writing, understanding, and debugging code, and integrating it into our applications is becoming easier and more affordable. But there are also questions about the future of AI in app development, and whether it will make us more productive or take our jobs.
There's a lot of excitement, skepticism, and concern about the rise of AI in web development. We'll explore the real potential for AI in creating new web development frameworks, and separate fact from fiction.
So if you're interested in the future of web development and the role of AI in it, this talk is for you. Oh, and this talk abstract was written by AI after I gave it several of my unstructured thoughts.

Workshops on related topic

DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Featured WorkshopFree
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
React Advanced Conference 2023React Advanced Conference 2023
98 min
Working With OpenAI and Prompt Engineering for React Developers
Workshop
In this workshop we'll take a tour of applied AI from the perspective of front end developers, zooming in on the emerging best practices when it comes to working with LLMs to build great products. This workshop is based on learnings from working with the OpenAI API from its debut last November to build out a working MVP which became PowerModeAI (A customer facing ideation and slide creation tool).
In the workshop they'll be a mix of presentation and hands on exercises to cover topics including:
- GPT fundamentals- Pitfalls of LLMs- Prompt engineering best practices and techniques- Using the playground effectively- Installing and configuring the OpenAI SDK- Approaches to working with the API and prompt management- Implementing the API to build an AI powered customer facing application- Fine tuning and embeddings- Emerging best practice on LLMOps
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.