Construyendo un Asistente AI Activado por Voz con Javascript

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

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

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.

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.

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?

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.

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!