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.

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

FAQ

La consultoría dirigida por Tejas Kumar se especializa en mejorar las relaciones con desarrolladores para empresas orientadas a desarrolladores, ofreciendo desde estrategias de alto nivel y mentoría hasta ejecuciones prácticas como escribir documentación y realizar presentaciones.

El enfoque principal es mantener relaciones excelentes y relevantes con los desarrolladores, ayudando a las empresas a comunicarse eficazmente y a construir proyectos conjuntos sin vender directamente productos.

Tejas Kumar guiará en la creación de un asistente de AI activado por voz similar a Jarvis de Ironman, utilizando únicamente JavaScript y APIs web, como la API de Web Speech y la API GPT 3.5 Turbo de OpenAI.

Para el proyecto se utilizan la API de Web Speech para la conversión de voz a texto y la API de Síntesis de Voz para texto a voz, además de integración con OpenAI para procesamiento de lenguaje natural, todo implementado en JavaScript.

El asistente de AI utiliza eventos de interacción del usuario, como clics, para activar funciones y mantener la conversación, asegurando que el sistema no hable de forma autónoma sin la iniciación del usuario.

Aunque el asistente de AI está diseñado principalmente para aprendizaje y demostración, Tejas menciona que con algunas modificaciones, como proporcionar gramáticas personalizadas, podría adaptarse para uso en producción.

Tejas Kumar
Tejas Kumar
21 min
05 Jun, 2023

Comments

Sign in or register to post your comment.
  • GitNation resident
    Hi, your video conference is amazing, thanks a lot for that! Question: how would associate this voice-enable AI assistant with an avatar that is lip synced? Thx again!
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.

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

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

Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced 2023React Advanced 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Solucionando Problemas de Rendimiento en React
React Advanced 2023React Advanced 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
De Monolito a Micro-Frontends
React Advanced 2022React Advanced 2022
22 min
De Monolito a Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.
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.

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
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)
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
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Construyendo Aplicaciones AI para la Web
React Day Berlin 2023React Day Berlin 2023
98 min
Construyendo Aplicaciones AI para la Web
Workshop
Roy Derks
Roy Derks
Hoy en día, cada desarrollador está utilizando LLMs en diferentes formas y figuras. Muchos productos han introducido capacidades AI incorporadas, y en esta masterclass aprenderás cómo construir tu propia aplicación AI. No se necesita experiencia en la construcción de LLMs o en el aprendizaje automático. En cambio, utilizaremos tecnologías web como JavaScript, React y GraphQL que ya conoces y amas.
Construyendo tu Aplicación de IA Generativa
React Summit 2024React Summit 2024
82 min
Construyendo tu Aplicación de IA Generativa
WorkshopFree
Dieter Flick
Dieter Flick
La IA generativa está emocionando a los entusiastas de la tecnología y a las empresas con su vasto potencial. En esta sesión, presentaremos Retrieval Augmented Generation (RAG), un marco que proporciona contexto a los Modelos de Lenguaje Grande (LLMs) sin necesidad de volver a entrenarlos. Te guiaremos paso a paso en la construcción de tu propia aplicación RAG, culminando en un chatbot completamente funcional.
Conceptos Clave: IA Generativa, Retrieval Augmented Generation
Tecnologías: OpenAI, LangChain, AstraDB Vector Store, Streamlit, Langflow