Construyendo un Asistente AI Activado por Voz con Javascript

Rate this content
Bookmark

En esta charla, construiremos nuestro propio Jarvis utilizando Web APIs y langchain. Habrá codificación en vivo.

Tejas Kumar
Tejas Kumar
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 AI activado por voz utilizando Web APIs y JavaScript. Cubre el uso de la API de reconocimiento de voz de Web Speech y la API de síntesis de voz para texto a 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 cómo dirigirse al usuario. El orador concluye mencionando la posibilidad de crear un producto a partir del proyecto y utilizar Tauri para experiencias similares a las de un escritorio nativo.

Available in English

1. Introducción a DevRel y AI

Short description:

Hola, soy Tejas Kumar, y dirijo una pequeña pero efectiva consultoría de relaciones con desarrolladores. 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 IA activado por voz utilizando APIs web y JavaScript. El propósito es divertirse mientras aprendemos y celebramos JavaScript y AI.

Hola, soy Tejas Kumar, y dirijo una pequeña pero efectiva consultoría de relaciones con desarrolladores. 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 hiring. O lo hacemos a través de una ejecución práctica de bajo nivel, como literalmente a veces escribimos la docs, hacemos las charlas, etc. En ese espíritu, es importante para nosotros, ya sabes, mantenernos en el bucle, y ser relevantes y relacionables con los desarrolladores para tener excelentes relaciones con los desarrolladores de DevRel. Y a veces para hacer eso, simplemente tienes que construir cosas. Verás, muchas conferencias en estos días, son un montón de gente de DevRel tratando de venderte cosas, y eso no nos gusta. Es DevRel, no DevSell. Y en ese espíritu, no vamos a venderte nada aquí, simplemente vamos a hackear juntos. El propósito es divertirnos un poco, aprender un poco, y así sucesivamente. Lo que vamos a hacer en nuestro tiempo juntos es vamos a construir un asistente de AI activado por voz, como Jarvis de Ironman, usando solo APIs web, solo JavaScript. Usaremos VEET para un servidor de desarrollo, pero eso es todo, esto funciona. Vamos a usar 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 así sucesivamente. El punto hoy, sin embargo, no es ese, es divertirse mientras aprendemos un poco

2. Plan para Construir el Asistente de IA

Short description:

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

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

3. Construyendo la Funcionalidad de Reconocimiento de Voz

Short description:

Para construir nuestro asistente, utilizaremos el reconocedor de voz de Chrome. Crearemos un nuevo objeto de reconocimiento de voz y añadiremos un detector de eventos 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 hacerlo funcionar en otros navegadores. Vamos a abrir el DS code y empezar. Tenemos una página en blanco con un botón que dice hola. Si queremos ver el code, index.html es HTML, algo de cabecera, eliminando el margen por defecto. Hay en realidad una pequeña cosa aquí que mi cara está cubriendo, una pequeña caja negra. Puedes ver si bajo esto un poco. Ahí es donde va mi cara. En fin. Y luego tenemos esta caja negra, el botón que literalmente no hace nada en index.tsx.

Empecemos reconociendo mi voz. Chrome tiene un reconocedor de voz incorporado. Lo tiene desde 2013 y simplemente funciona. Otros navegadores tienen diferentes implementaciones y así sucesivamente. Pero el objetivo es construirnos un asistente. No estamos construyendo un producto para vender, estamos simplemente aprendiendo, divirtiéndonos para construirnos un asistente. Así que en ese espíritu, lo que haremos es decir const recognition es new speech recognition, speech recognition. Y esto previsiblemente fallará porque necesitas un prefijo de vendedor 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 esto ahora debería darnos ningún error. Así que está ahí. Entonces, ¿qué queremos hacer? Necesitamos un detector de eventos. Así que añadiremos un detector de eventos a esto llamado resultado, más bien escuchar en el evento de resultado. Y cuando obtengamos un resultado, vamos a const text es los resultados. Oops, deberíamos quizás obtener evento. Los resultados del evento, el primer resultado y el primer intento del primer resultado. Así que esta API hará si la dejamos, hará muchas suposiciones sobre lo que dije. Y siento que es lo suficientemente bueno que simplemente nos quedamos con el primero. Así que iteraremos si necesitamos, pero obtenemos el primer resultado y luego

4. Comunicándose con la API de Open AI

Short description:

Y vamos a registrar en 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 de búsqueda de JavaScript utilizando la extensión de los laboratorios de Github copilot. Es como copilot pero en esteroides y permite conversiones de código. Funciona bastante bien.

el primer intento de ese resultado. Transcripción. Y vamos a console ese registro y decir que dijiste texto. También necesitamos empezar a reconocer recognition dot start. Hola. Mi nombre es Tejas y dirijo una agencia Deverell. Oh, fantástico. Hola. Mi nombre es Tejas y dirijo Deverell. Lo suficientemente cerca. Está funcionando. Tenemos voz a texto. ¿Qué hacemos ahora? Hablemos con Open AI. Dale el texto y luego veamos qué dice. Para hacer eso vamos a comunicarnos con la API de Open AI. Así que para hacer eso vamos a abrir la documentation de la API. Vamos a obtener una solicitud curl aquí mismo. Esta es una edición de imagen. Quiero una finalización de chat.

Así que voy a venir aquí, copiar este fragmento de curl, abrir Visual Studio code y crear una función const askOpenAI y esta es probablemente 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 Github copilot labs. Y esto es nuevo. Es como copilot pero en esteroides y permite como conversiones de code y cosas. No funciona muy confiablemente pero pensé que podríamos intentarlo. Así que para intentarlo, vamos aquí. Copilot labs. Voy a abrir eso y voy a resaltar este texto y decir usando el pincel personalizado, voy a decir convierte este comando curl en una solicitud de búsqueda de JavaScript. Y va a girar un poco. Bueno, wow. No está mal.

5. Autorización, Cuerpo y Registro

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. Usaremos el modelo Turbo0301 y comenzaremos con un mensaje del sistema que presenta a Jarvis, el asistente personal de IA 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 rizado. Necesitamos un cuerpo de solicitud. Eso es muy importante. Así que haremos coma cuerpo. Y ¿qué espera esta cosa era una cadena JSON en primer lugar. Y necesita un modelo y mensajes. Así que haremos eso. Simplemente le daremos este objeto aquí. Voy a usar Turbo0301 simplemente porque a menudo está bajo menos carga. Y diremos, comenzaremos con un mensaje del sistema. Así que sistema, y le diremos quién es. Le daremos una declaración de identidad. De acuerdo. Eres Jarvis, Jarvis, Tony Stark, el asistente personal de IA de Tony Stark. Tony Stark, por supuesto, también es Iron Man. Mantén tus respuestas tan breves y concisas como sea posible. De acuerdo. Así que eso es una instrucción. Ahora, lo que necesitamos hacer es todo lo que se dice necesitamos mantenerlo en un registro porque ya sabes, el chat GPT es conversacional. Así que cada vez que reconocemos el habla, necesitamos agregar eso a una lista. De acuerdo. Así que hagamos eso. Así diremos const cosas dichas es un array vacío. Y no solo vamos a console registrar esto, sino que, en cambio, diremos cosas dichas dot push texto, que es una cadena, pero esto es una cadena. De acuerdo, perfecto. Ahora, solo mapearemos. Así que diremos cosas dichas dot map role es contenido del usuario.

6. Preguntando a Open AI y Manejando la Respuesta

Short description:

Y ahora estamos preguntando a Open AI. Lo estamos empujando allí. Vamos a registrar en consola la respuesta y ver qué obtenemos. Es 401 porque no tengo un token de oso. Hola, necesito un traje inmediatamente. Probablemente hablando con el modelo equivocado. Error, error de solicitud inválido. Rol, usuario, contenido. Propagar la solicitud. Obtuvimos indefinido, pero las contraseñas de solicitud, opciones, cero, mensaje, contenido.

Esto es perfecto. Y ahora estamos preguntando a Open AI. Así que lo estamos empujando allí. Y luego haremos o otra constante respuesta es esperar, preguntar a Open AI. Esta no es una función asíncrona. Y ahora eso se ve bien. Así que simplemente registraremos en console la respuesta y veremos qué obtenemos. Bueno, 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 mostrarte mi clave API, por favor no la copies. Sé una buena persona. Bueno, puede ser costoso si lo abusas. En fin, lo tengo. No viste nada, no viste nada, no viste nada. Hola, necesito una nueva 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 inválido. Rol, usuario, contenido. Bueno, no es de tipo objeto. Correcto, necesito propagar eso. Gracias. Hola, necesito una armadura inmediatamente. Bueno, obtuvimos indefinido, pero las contraseñas de solicitud, 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 en la deseada.

Y eso es lo que queremos console.log, respuesta. Primero que nada, devolvamos esto. Serializar esto a JSON. Y ahora necesitamos response.choices, zero.message.content. Bien, esta será nuestra respuesta, y luego solo console.log esta respuesta solo para estar seguro. Correcto, respuesta. Bien, intentemos esto de nuevo. Necesito un traje de armadura alrededor del mundo. ¿Cómo debería llamarlo? Iniciativa Avengers. Oooh, está sucediendo. Así que tenemos voz a texto. Estamos hablando con OpenAI. Ahora necesitamos texto a voz, ¿verdad? ¿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. Tenga en cuenta, estamos escribiendo TypeScript pero no hay ninguna herramienta de compilación o algo así. Esto es solo directamente en el navegador. Así que usemos la Síntesis de Voz. Así que 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. Así que una SpeechSynthesis utterance es una expresión de una cadena. Y lo que queremos hacer es, bueno, eso es bastante básico, pero también queremos hacer algunas voces. Así que diremos const voice es SpeechSynthesis.getVoices, y simplemente 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, simplemente lo dejamos allí. Y lo que haremos es que diremos, ya sabes, hablar respuesta. ¿Cuánto dinero necesito para construir la torre de los Avengers?

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

Short description:

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

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

Entonces, para empezar a escuchar, añadiremos un evento de clic al botón que existe. Solo para que el navegador no proteja la computadora simplemente hablando al azar. Lo cual puede ser una experiencia un poco aterradora.

Bien. Entonces, lo que haremos es, en lugar de recognition.start, volveremos a nuestro botón en el HTML. ¿Cuál es el ID? Vamos a darle un ID. El ID es start. Y esto ahora lo convertirá en una variable global. ¿No es ridículo? Entonces, lo que haremos es, en lugar de recognition.start, haremos start.add event listener. Clic y luego recognition.start. Haremos esto, guardar. Así que ahora, no está escuchando por defecto, pero haré clic en esto y luego hablaré y entonces debería funcionar.

Oye Jarvis, ¿cuánto dinero va a costar construir un coche nuevo? Lo siento, el Sr. Stark no me ha proporcionado suficientes detalles para estimar el costo de construir un coche nuevo. Por favor, proporciona más información. ¿Por qué habló al Sr. Stark y dijo Sr. Stark, a menos que sepa que no soy el Sr. Stark. Tal vez podemos, a través del indicador del sistema, decirle, soy el Sr. Stark. Bien, hagamos eso. Indicador del sistema, tú 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 Bucle y Habilitando la Conversación

Short description:

Tenemos voz a texto, estamos hablando con OpenAI, y ahora necesitamos texto a voz. Quiero que esté encendido para siempre y tener una larga conversación. Vamos a cerrar el bucle y resumir todo lo que hicimos. Cuando terminemos de hablar, resolveremos la promesa. Ahora, podemos iniciar de nuevo el reconocimiento y tener una conversación real.

Lo siento, Tony. No puedo determinar tu color de sopa favorito ya que no es una preferencia estándar. Piensa en Tony. Bueno, está bien. Tenemos voz a texto, estamos hablando con OpenAI y ahora necesitamos texto a voz. O más bien, tenemos texto a voz, pero no es una conversación, como que simplemente se detiene y luego se acaba. Y luego tengo que hacer clic en el botón para empezar a hablar de nuevo. Quiero que esté encendido para siempre y simplemente tener una larga conversación. ¿Vale? Vamos a cerrar el bucle y luego resumir todo lo que hicimos. Entonces, ¿cómo vamos a hacer esto? Cuando terminemos de hablar, aquí, lo que queremos hacer es, utterance.onEnd, queremos, vamos a devolver una nueva promesa. Promesa, resolver, y noten cómo no estamos manejando errores, eso es porque a veces me gusta el caos. Cuando terminamos, cuando termina de hablar, resolveremos la promesa. Ahora, podemos esperar a speak y cuando speak termine, podemos iniciar de nuevo el reconocimiento, y ahora podemos tener una conversación real.

10. Conferencia de JavaScript y Vuelo a Ámsterdam

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 en mi traje? Sí, te llevaría aproximadamente de 7 a 8 horas volar de Nueva York a Ámsterdam a velocidades supersónicas. Gracias, Jarvis. Voy a cerrar la pestaña ahora. Acabamos de crear un Jarvis similar a la IA comandada por voz utilizando las APIs de JavaScript basadas en el navegador. La API de reconocimiento de voz varía entre los navegadores y aún no es estándar. La API de síntesis de voz utiliza voces del sistema operativo del usuario. Vamos a revisar el código final e identificar cualquier error o mejora. Tenemos un nuevo reconocimiento de voz de WebKit que comienza 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 AI, estoy programado para proporcionar respuestas factuales. No hay una conferencia objetivamente mejor ya que puede variar dependiendo de las preferencias individuales. Sin embargo, algunas conferencias populares para JavaScript incluyen JSConf, ReactConf y Node Summit.

Bien, 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 Conferencia de JavaScript. Jarvis, esa no es una conferencia real. Pido disculpas. Tony, no hay una conferencia alrededor del 1 de junio en Ámsterdam que coincida con tus criterios para ser la mejor.

Bien, ¿puedo volar a Ámsterdam en mi traje? ¿Qué tan rápido? ¿Cuánto tiempo me llevará llegar a Ámsterdam desde Estados Unidos? Sí, puedes volar a Ámsterdam en tu traje. Te llevaría aproximadamente de 7 a 8 horas volar de Nueva York a Ámsterdam, viajando 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. ¡Mantente seguro! Acabamos de hacer eso. Acabamos de crear un Jarvis similar a la AI comandada por voz utilizando solo las APIs nativas de JavaScript basadas en el navegador. La API de reconocimiento de voz utiliza cualquier reconocedor de navegador disponible. Por eso usamos Chrome. Varía de un navegador a otro. Aún no es estándar. Probablemente lo será, aunque ha estado 10 años en el navegador y aún no es estándar. Así que, tu experiencia puede variar. La API de síntesis de voz utiliza solo las voces del sistema operativo del usuario. Puedes darle voces personalizadas, aunque hay otras soluciones para hacer eso. Te invitaría a experimentar y jugar. Vamos a revisar el código una última vez, el código final, identificar tal vez los errores que cometimos o las cosas que podríamos hacer mejor, y luego terminar. Bien, vamos. Tengo Google aquí. Vamos a abrir la cosa de nuevo, 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 más bien, comenzamos el reconocimiento.

11. Conversaciones Finales y Conclusión

Short description:

El evento de usuario es importante ya que evita que el navegador escuche y espíe a las personas de manera aleatoria. Mantenemos un array de cosas dichas y lo alimentamos a OpenAI para más contexto. Tenemos un bucle para escuchar, hablar y resolver la promesa. Hacemos una solicitud fetch a la API de completions de OpenAI. Este proyecto es de 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 similares a las de escritorio nativo utilizando lenguajes web y Rust. Gracias por unirte a la sesión y apoyar nuestro trabajo de DevRel.

Este evento de usuario es importante porque no quieres que tu navegador, más bien tu navegador no quiere simplemente empezar a escuchar cosas y, ya sabes, espiar a la gente. Mantenemos un array de cosas dichas y alimentamos esto a OpenAI. Nota, estamos cometiendo un poco de un error porque cuando obtenemos una respuesta deberíamos realmente añadir esto, así que cosas dichas.push, y esto le dará a la AI más contexto.

Esto se ve bien y luego podemos tal vez eliminar algunos console.logs y tenemos este bucle donde empezamos a escuchar y luego una vez que dices algo y la máquina responde, entonces empiezas a escuchar de nuevo. Para hablar, estamos usando la síntesis de voz que simplemente pronuncia algún texto y establecemos la voz a una voz del sistema. Esta es la predeterminada, tal vez incluso podríamos cambiar esto y ver qué pasa. Y esto se ve bien y luego cuando termina resolvemos la promesa para que podamos volver y empezar. Por último tenemos un fetch a la API de completions de OpenAI. Esto es solo un copiar y pegar y enviamos todas las cosas dichas. Así que esto realmente no es tan difícil, son menos de 50 líneas de code y tenemos un asistente al estilo Jarvis activado por voz usando solo APIs web nativas.

Vamos a tener una última conversación con él, de una manera optimizada, con una voz diferente y luego terminamos. Ok, hagámoslo. Entonces, hey Jarvis, ¿qué es lo más cool de Ámsterdam, el 1 de junio? Lo siento, no estoy programado para proporcionar opiniones subjetivas. ¿Te gustaría que busque algunos eventos interesantes que suceden en Ámsterdam el primero de junio? Claro, eso suena bien. A veces tarda un poco. Basado en mi búsqueda, aquí hay algunos eventos que suceden en Ámsterdam el 1 de junio. Un evento es el festival de danza Exly, music festival que organizamos con varios DJs. Otro festival, el Festival de Artes y Cultura de Apple con una variedad de actuaciones y eventos. También puedes crear un producto a partir de esto, con las advertencias de compatibilidad del navegador y así sucesivamente. 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 herramienta, como Tauri. Para aquellos que no han oído hablar de Tauri, es una forma de crear experiencias similares a las de escritorio nativo usando lenguajes web, HTML, JS, JavaScript, y el back end es entonces Rust, donde puedes pasar mensajes entre tu front-end con tecnologías basadas en navegador y Rust para crear cosas de alto rendimiento. De hecho, todo el mundo está reescribiendo cosas en Rust, y piensan que son geniales por ello. Y de hecho, Rust es muy genial. Así que realmente podrías hacer una aplicación de escritorio nativa usando Tauri y esto y simplemente dar a la gente su propio JavaScript. Creo que eso es realmente genial, especialmente si está conectado a su propia cuenta abierta de AI que realmente los conoce. Hay muchas formas en las que puedes llevar esto adelante, pero lo voy a dejar aquí. Una última cosa para Tauri.app, si querías investigar eso. Pero lo voy a dejar aquí. Muchas gracias por entretener esta divertida pequeña sesión, y espero que haya sido significativa y valiosa para el resto de ustedes. Si te gustaría apoyarme, nuestro trabajo de DevRel, no dudes en seguirme. Y con eso, quiero agradecerte mucho por tenerme, 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

A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
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.

Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
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.
Monolith to Micro-Frontends
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.
Power Fixing React Performance Woes
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Top Content
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! ⚡️
Video Editing in the Browser
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!
AI and Web Development: Hype or Reality
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

AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
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.
Working With OpenAI and Prompt Engineering for React Developers
React Advanced Conference 2023React Advanced Conference 2023
98 min
Working With OpenAI and Prompt Engineering for React Developers
Top Content
Workshop
Richard Moss
Richard Moss
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
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
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.
Build a chat room with Appwrite and React
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
Wess Cope
Wess Cope
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!
Hard GraphQL Problems at Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
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.
0 To Auth In An Hour For Your JavaScript App
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Asaf Shen
Asaf Shen
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.