Enhancing AI with RAG

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Slides
Rate this content

La generación aumentada por recuperación (RAG) proporciona a los modelos de lenguaje grandes información actualizada y les ayuda a alucinar menos. Pero, ¿cómo funciona todo bajo la superficie?


En esta sesión de codificación en vivo, construiremos los componentes de un sistema RAG desde cero en JavaScript. (¡Aparte del LLM, probablemente no haya tiempo para eso!) Al construir el nuestro, entenderemos la vectorización, la búsqueda de similitud y el papel de los modelos de incrustación y las bases de datos vectoriales. Luego lo conectaremos todo para ver a nuestro bot aumentado en acción.


Obtendrás una buena base en los componentes de chatbots exitosos y por qué funcionan.

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

Phil Nash
Phil Nash
20 min
21 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla de hoy explora el concepto de generación aumentada por recuperación (RAG) y su aplicación en la construcción de chatbots. RAG implica dar a los modelos de lenguaje más contexto al recuperar datos relevantes. Esto se logra creando vectores para cada charla y usando la similitud coseno para compararlos. La charla enfatiza las limitaciones de los vectores basados en palabras y los beneficios de usar modelos de incrustación y bases de datos vectoriales. Al reemplazar los modelos basados en palabras con búsqueda vectorial, el contenido puede ser ordenado y recuperado de manera más eficiente. RAG, junto con modelos de lenguaje grandes e IA, tiene el potencial de mejorar la escalabilidad y desatar nuevas posibilidades.
Available in English: Build RAG from Scratch

1. Introducción y Contexto

Short description:

Hoy vamos a hablar sobre cómo construir un rag desde cero. Los modelos de lenguaje grandes tienen el problema de no tener acceso a datos actualizados e información privada. Descubramos cómo podemos darles el contexto necesario.

¿Qué tal a todos? Mi nombre es Fonash y soy un ingeniero de relaciones con desarrolladores en una empresa llamada Datastacks. Si alguna vez quieren encontrarme en línea, pueden encontrarme en todas partes como Fonash en Twitter, en LinkedIn. Vengan y conéctense conmigo, me encantaría charlar con ustedes.

Pero entremos en la charla. Hoy vamos a hablar sobre cómo construir un rag desde cero, y para lidiar con eso, primero tendremos que averiguar qué es un rag. Todo esto se trata de la IA generativa, y si han tratado con modelos de lenguaje grandes, ya sea usando aplicaciones de consumo o intentando desarrollar usando sus APIs, sabrán que tienen un par de problemas. Uno de ellos es que no conocen ningún dato actualizado, porque tienen una fecha de corte de entrenamiento, y por lo tanto no pueden saber nada más allá de la fecha en que dejaron de entrenar. Y el segundo es que no conocen ninguna información privada, y eso es algo bueno. No queremos que conozcan nuestra información privada necesariamente. Ciertamente no queremos que hayan sido entrenados con nuestra información privada.

2. Retrieval Augmented Generation

Short description:

Voy a mostrarte una demostración del AI studio de Google hablando con Gemini Flash. El modelo no puede proporcionar información en tiempo real y sugiere consultar el sitio web oficial. Si pregunto sobre oradores o eventos específicos, el bot no tiene acceso a esa información debido a limitaciones de entrenamiento.

Solo quiero mostrarte eso como una demostración. Tengo el AI studio de Google aquí hablando con Gemini Flash, uno de sus modelos, y voy a preguntar qué está pasando en JS Nation US? Y no puede saber esto, porque fue entrenado mucho antes y dice que no tiene acceso a información en tiempo real. Podrías también consultar el sitio web oficial. Es un buen consejo, pero no es un bot muy útil. También podríamos, ya sabes, este es un bot construido con mi propia cosa, y así esto también está llamando a la API de Gemini 1.5 Flash, y si le pregunto qué está hablando Phil Nash sobre JS Nation, también, simplemente no va a saber esto. No sabe nada sobre mí. Necesita más información para responder esa pregunta. Y eso es justo. No lo sabe. Fue más allá de su fecha de corte de entrenamiento.

3. Retrieval Augmented Generation II

Short description:

La generación aumentada por recuperación es una forma de dar más contexto a un modelo de lenguaje. Recuperamos datos relevantes para proporcionar contexto al modelo y generar una respuesta. La parte difícil es recuperar datos relevantes basados en una consulta en lenguaje natural. Esto implica usar incrustaciones vectoriales para representar el significado del texto.

¿Y qué hacemos al respecto? Esto nos lleva a la idea de la generación aumentada por recuperación. Esta es una de las formas en que podemos dar a un modelo de lenguaje grande más contexto para responder. La idea detrás de la generación aumentada por recuperación es que tomamos todos nuestros datos actualizados o privados y los almacenamos en algún lugar.

Cuando un usuario hace una consulta a un bot que hemos construido, usamos esa consulta para recuperar datos relevantes sobre la consulta, proporcionar esos datos como contexto al modelo junto con la consulta original, proporcionar cómo el modelo genera una respuesta usando ese contexto, usando información que no podría haber conocido previamente, y luego eventualmente supongo que obtener beneficios. Esa es la idea aquí.

Cómo la parte difícil de esto en realidad, ya sabes, porque se han hecho modelos, sabemos esto, y siguen mejorando y haciéndose mejores. La parte difícil para nosotros es recuperar datos relevantes basados en algo como una consulta en lenguaje natural. Y así es como todo encaja junto.

Entonces, la recuperación en esta generación aumentada por recuperación es ese paso de búsqueda contra tus datos que quieres poner a disposición del bot. La augmentación es donde lo conviertes en un aviso y finalmente la generación es manejada por un modelo. Y vamos a hablar sobre el lado de la búsqueda de esto porque esta es la parte más importante. Y por lo tanto, es importante que sea búsqueda en lenguaje natural. No es búsqueda por palabras clave. Queremos buscar por similitud de significado.

Y eso suena fácil de decir, pero ¿qué significa eso realmente en la práctica? ¿Cómo capturamos el significado de una manera que podamos buscar un significado similar? Esto nos da la idea de las incrustaciones vectoriales. Las incrustaciones vectoriales son una lista de números, en última instancia, que representan el significado de un cuerpo de texto.

Y podemos generarlas de diferentes maneras. Veremos un par de esas maneras hoy, comenzando por crear nuestra propia incrustación vectorial. Así que tengo una hipótesis para esto. Para un bot sobre una conferencia, digamos JSNation US donde estamos, los títulos y descripciones contienen los significados de las charlas que vamos a ver. Esos títulos y descripciones están compuestos por palabras. Proporcióname aquí. Y los títulos y descripciones que comparten palabras son similares.

Y así también las consultas en lenguaje natural que también comparten palabras que están en esos títulos y descripciones probablemente están preguntando sobre esas charlas específicas. Y así, si recopilamos todas las palabras y representamos cada charla como un conteo de cada conjunto total de palabras, entonces cuando obtenemos una consulta de usuario podemos hacer lo mismo y compararlas, obteniendo finalmente palabras similares basadas solo en la similitud de charlas y consultas similares basadas en el número de palabras que comparten. Y así, vamos a echar un vistazo a esto. Tengo este tipo de chat de evento inútil ahora mismo, pero tengo el código para eso aquí. Y lo que he hecho es raspar todas las descripciones de charlas para JSNation US y las tengo en un gran archivo JSON.

4. Creating Talk Vectors

Short description:

Podemos convertir cada charla en un arreglo de palabras y crear una lista única de palabras. Al mapear el conjunto de charlas, podemos obtener todas las palabras utilizadas en todas las descripciones de charlas. Después de eso, podemos crear un vector para cada charla usando la lista de palabras contando las ocurrencias de cada palabra.

Y así para cada una de las charlas en nuestra en nuestra gran lista de charlas, podemos convertirlas en ese tipo de arreglo de palabras. Y así, en realidad podemos obtener todas las palabras de todas las charlas haciendo un arreglo a partir de un conjunto, de modo que básicamente las hacemos palabras únicas al mapear de manera plana sobre el conjunto de charlas y devolver el arreglo de palabras. Y así, si fuera a console.log todas las palabras, podemos ver que hay un montón de palabras y las primeras son AI assisted developer workflow, build faster smarter today, esa es la charla de Addy Osmani. Justo, así que esa es la primera y ese es el primer conjunto de palabras que obtenemos allí. Y si solo echo un vistazo rápido a la longitud, podemos ver que hay 1498 palabras totales utilizadas en todas las charlas, todas las descripciones de charlas, excluyendo esas palabras comunes. Y así, una vez que hemos hecho eso, podemos entonces crear un vector de una charla usando todas esas usando todas esas palabras. Y así, lo que vamos a hacer allí es obtener un mapa de las palabras usando un objeto, en este caso, para cada una de las palabras en una charla, podemos recorrerlas y hacer un mapa que diga, si sabes, cuenta cada una de las palabras, y eso es lo que hace este mapa de palabras.

5. Mapping Words and Comparing Vectors

Short description:

Podemos mapear todas las palabras en las charlas, verificando su conteo y creando un gran arreglo. Al mapear todas las charlas, podemos ver los vectores de cada charla. Los vectores muestran la ocurrencia de palabras y su contexto. Las computadoras comparan vectores por dirección y magnitud, no por la ubicación física de las palabras en el espacio.

Y finalmente, podemos mapear todas nuestras palabras. Así que para cada una de las palabras en todas las charlas, verificaremos si están en la charla que estamos viendo y cuál es su conteo. Y de alguna manera mapeamos eso en este gran arreglo. Y luego podemos hacer eso a todas las charlas mapeando sobre todas ellas, devolviéndoles el contexto de la charla y su vector.

Y así, para ver eso en acción, podemos simplemente registrar, vectores de charla, veamos el primero. Como dije, esa es la charla de Addy Osmani. Y lo que podemos ver es que tenemos este vector aquí. Y porque esta es la primera charla, todas las palabras aparecen al inicio de este vector, y luego comienza a ser ceros. Y puedes ver que el texto de eso es el AI Assistive Developer Workflow por Addy Osmani. Genial.

Si hiciera eso con la charla número ocho, veríamos que en realidad es mi charla, Bill Bradford y Sreć. Y aunque no comparte todas esas primeras palabras que están en la charla de Addy, podemos ver que en realidad hay algunos cruces allí, lo cual es agradable de saber, especialmente porque ambas son de hecho sobre el mundo de la IA. Así que volvamos a las diapositivas. Y hablemos de comparar vectores.

Resulta que las computadoras son obviamente mucho mejores comparando listas de números que comparando el significado de las palabras. Y eso hace que estos vectores sean útiles. Pero, ¿cómo comparamos estos vectores? Bueno, primero tenemos un vector multidimensional. Eso es una especie de punto o dirección en un espacio multidimensional. Lamentablemente para nuestros cerebros, no somos muy buenos imaginando cosas en más de tres dimensiones o cuatro si tienes tiempo. Así que solo voy a reducir esto a dos dimensiones para que sea un poco más fácil considerar cómo funciona esto. Y si tuviéramos tres vectores en un plano bidimensional como este, entonces si quisiéramos elegir los que son más similares, podríamos pensar que los que están físicamente ubicados cerca uno del otro son más similares que los que están más lejos.

Pero eso no es realmente cómo funcionan los vectores. No son solo una lista de números. No son un punto en un espacio multidimensional. Son una dirección y una magnitud. Y esa dirección es desde el origen del espacio desde 0, 0. Y una magnitud, que es qué tan lejos del origen están. Y así, un vector similar es en realidad uno que apunta en la misma dirección que otro. Y así, en este caso, nuestros vectores similares son en realidad el que está más cerca del origen y el que está más lejos a la derecha. Porque apuntan en la misma dirección.

6. Calculando la Similitud del Coseno con Vectores

Short description:

Vectores con significados similares pueden tener diferentes magnitudes. Usamos la similitud del coseno, que implica multiplicar y sumar los elementos de los vectores. La magnitud de un vector es la raíz cuadrada de la suma de sus elementos al cuadrado. Esto se puede ver en código.

Y aunque uno no es tan, ya sabes, no tan fuerte, no tiene una magnitud tan fuerte como el otro, ambos tienen un significado similar. Es solo que tal vez uno significa más que... significa más de eso que otro.

Y así, para calcular esto, usamos un poco de trigonometría. Vamos a volver a la escuela y a algunas matemáticas. Usamos la similitud del coseno. Esto me da la oportunidad de poner una función matemática que parece aterradora en una diapositiva. Pero al final no es tan aterradora, lo prometo. Estas grandes sigmas son solo la suma de... y cuando tienes un vector por un vector, en realidad solo multiplicamos cada elemento del vector y luego sumamos todo.

Así que el producto punto que está en la parte superior allí son dos vectores ya que cada elemento en un vector se multiplica por su par. Y luego sumamos todas esas multiplicaciones. Y en la parte inferior tenemos la magnitud. Como una magnitud del vector a es a al cuadrado. Así que eso es en realidad cada elemento en el vector a al cuadrado y sumado ordenadamente. Y luego la raíz cuadrada de esa suma completa. Lo mismo para el vector b. Y así esto es en realidad... podemos ver esto en código y en realidad tiene mucho más sentido en ese punto. Así que comenzamos con el producto punto. Esa es la parte superior de la función. Tomamos dos vectores diferentes, vector a y vector b, y para cada elemento en el vector a vamos a multiplicar ese elemento en el vector a por el elemento en el vector b. Y finalmente sumamos todos esos productos. Bastante sencillo. La magnitud entonces es similar. Solo toma un vector en este caso. Ups. Solo toma un vector en este caso. Y luego para cada elemento en ese vector lo elevamos al cuadrado y lo sumamos. Y luego tomamos la raíz cuadrada, math.square, de la suma.

7. Using Cosine Similarity for Talk Similarity

Short description:

La función de similitud del coseno compara la similitud entre dos vectores tomando el producto punto y dividiéndolo por el producto de sus magnitudes. Da una puntuación entre cero y uno. En el código, usamos la función findSimilarTalk para calcular la similitud del coseno entre un vector de consulta y todas las demás charlas. La función ordena las charlas por similitud y devuelve las cinco principales. Por ejemplo, al buscar sobre qué está hablando Phil Nash, obtenemos puntuaciones de similitud bajas cuando las palabras 'Phil' y 'Nash' aparecen en solo una charla. Al buscar sobre AI y desarrolladores, obtenemos puntuaciones de similitud más altas para charlas relacionadas con AI y herramientas para desarrolladores.

Y finalmente nuestra función de similitud del coseno es simplemente el producto punto de dos vectores dividido por la multiplicación de las dos magnitudes de cada uno de los vectores. Y eso nos da un resultado de similitud. Y así, si verificáramos esto haciendo un console.log Cosine similarity of text to vector talks zero. Así que esta es la charla de Adi. Y de hecho, hagámoslo contra cada celda. Si hacemos eso, lo que deberíamos encontrar es que la respuesta está muy cerca de uno. De hecho, es solo ligeramente superior a uno debido a la aritmética de punto flotante, lo cual está bien. Pero porque es la misma charla, significa exactamente lo mismo. Es similar en términos de uno.

Ahora, si comparáramos esto con la charla ocho, esa es mi charla, podemos ver que su similitud es 0.135. Ahora no lo hacemos realmente, porque estos vectores son vectores muy dispersos, la mayoría de los elementos en cada uno de los vectores para cada una de las charlas son cero, en realidad no vamos a encontrar charlas muy muy similares en este caso particular. Si pudiéramos verificar y decir de qué trata la charla cuatro, pero encontramos que tiene una similitud de 0.04. Así que la charla cuatro es mucho menos similar a la charla de Adi Osmani que mi charla, seguro, pero al menos en términos de las palabras que tiene. Así que esa es nuestra similitud del coseno. Nos da esa puntuación entre cero y uno de cuán similares son dos charlas.

Y si volvemos al código, oh, vemos que funciona. Bueno, funciona porque en realidad luego tenemos que ponerlo a disposición del bot real que hemos creado. Así que este findSimilarTalk es una función que toma cualquier consulta, la convierte en un vector basado en nuestro conjunto existente de palabras que hemos revisado, y luego mapea una similitud del coseno sobre todas las demás charlas contra esta consulta, ordena por la más similar y devuelve cinco charlas por defecto. Así que si hacemos eso, esto en realidad configura este chat de evento, y de hecho una búsqueda que tenemos aquí para mostrarnos lo que está sucediendo. Y así lo que podemos hacer es, correcto, tenemos búsqueda de similitud. Puedo buscar sobre qué está hablando Phil Nash. Si hacemos eso, podemos ver que debido a que las palabras Phil y Nash aparecen en solo una de las charlas, obtenemos este tipo de baja similitud, 0.014. Todas las otras cosas no son tan similares en absoluto, no mencionan a Phil Nash ni de hecho las palabras hablando sobre. Y así nos va a dar esa respuesta. Si miramos algo como solo AI y desarrolladores, obtenemos un montón de cosas como manual a mágico AI y herramientas para desarrolladores, tenemos integrar AI en la arquitectura de tu aplicación, desarrolladores integrando cosas, el flujo de trabajo del desarrollador asistido por AI. Así que puedes ver estas similitudes son 0.45, 0.37, 0.3. Eso es realmente útil. Así que si volvemos a nuestro chat real donde ponemos este contexto a través del bot también, y preguntamos sobre qué está hablando Phil Nash. Mantengamos las mayúsculas allí. ¿Sobre qué está hablando Phil Nash? Esto va a hacer esa búsqueda, encontrar la charla y otras cuatro que no son similares, pasarlo al modelo, permitir que el modelo luego salga con la respuesta correcta.

8. Building Rag from Scratch in JavaScript

Short description:

Hemos construido un sistema de vectores que funciona bien con un pequeño conjunto de charlas, pero tiene limitaciones. Se basa en vectores de palabras, lo que significa que la consulta es sensible al vocabulario utilizado. La misma palabra puede tener diferentes significados, y el orden de las palabras puede afectar la similitud. Para superar estas limitaciones, los modelos de embedding capturan el significado de las palabras y los textos. Empresas como OpenAI ofrecen modelos de embedding con diferentes dimensiones. Para conjuntos de datos más grandes, las bases de datos vectoriales como AstroDB proporcionan búsquedas de similitud del coseno más rápidas y eficientes.

Estamos hablando de construir rag desde cero en JavaScript, excelente. Y luego, ¿quién está hablando sobre AI y desarrolladores? Podemos ver que eso va a hacer ese mismo tipo de búsqueda y decir que Toba Lundberg, Yossi Kallen, Adi Osmani, Daniel Ostrovsky, Satoshi Nakajima, todos están hablando sobre AI y desarrolladores y cómo podemos hacer eso. Charlas emocionantes, cosas que quiero ver, honestamente.

Así que funciona. Nos hemos construido un mal vector, pero funciona. Es malo porque es disperso, está basado en palabras, tiene un montón de cosas. Necesitamos hacer todos esos datos por adelantado. La consulta es sensible al vocabulario. Así que si preguntamos algo que no usó ninguna de las palabras en ninguna de las charlas, obtendremos cero tipo de similitud.

Si fuéramos a expandir esto, si hubiera cientos y miles más de charlas para mirar, tendríamos que hacer muchos, muchos más cálculos, lo que eventualmente detendría esto. La misma palabra puede significar cosas diferentes. Las palabras podrían ser negadas para significar lo contrario. El orden de las palabras en una oración podría significar cosas diferentes. Y así, mucho de esto no está capturado por nuestro vector. Pero lo que puede ser capturado son los modelos de embedding. Estos son modelos de aprendizaje automático reales que se utilizan en la creación de grandes modelos de lenguaje también. Capturan ese significado de las palabras y de los cuerpos de texto.

Los modelos de embedding son ofrecidos por muchas de las empresas de AI que existen. Hay algunas empresas que solo hacen modelos de embedding para ti. Así que esto es OpenAI. Puedes llamar fácilmente a su API para obtener embeddings de OpenAI. En este caso, el modelo pequeño de embedding de texto 3 te da 1536 dimensiones y siempre te devolverá eso. Capturando el significado de un texto en alrededor de 1500 vectores, hay un modelo grande que tiene 372. Puedes elegir lo que quieras allí.

Y luego, obviamente lo que hicimos aquí fue mantener todo en memoria, lo cual está bien en un conjunto pequeño. Pero si tienes muchos más datos, necesitarás una base de datos para eso. Y así, las bases de datos vectoriales te permiten, bueno, tienen índices para hacer esta búsqueda de similitud del coseno contra muchos y muchos datos. Mucho más rápido, mucho más eficiente. AstroDB es una de esas bases de datos vectoriales, la que creamos en Datastacks. Y de hecho, tiene una ayuda adicional para ti si quieres hacer una búsqueda o encontrar vectorial.

9. Vectorizing Queries and Using RAG

Short description:

La base de datos puede manejar la vectorización de consultas por ti, eliminando la necesidad de múltiples llamadas. Al reemplazar el modelo basado en palabras con la búsqueda vectorial, podemos ordenar y recuperar contenido similar de manera más eficiente. RAG, o Generación Aumentada por Recuperación, captura el significado utilizando modelos de aprendizaje automático y una base de datos para mejorar la escalabilidad. Existen métodos alternativos como Colbert para embeddings vectoriales y sistemas RAG de grafos para almacenar contenido. Explora el uso de RAG, grandes modelos de lenguaje e IA para liberar todo su potencial.

De hecho, vectorizará las consultas por ti si lo configuras para hacerlo. Así que no tienes que preocuparte por hacer dos llamadas diferentes. Puedes simplemente permitir que la base de datos maneje la vectorización por ti. Y eso es realmente genial.

Solo quiero mostrar una demostración rápida en la que voy a eliminar nuestro modelo de bolsa de palabras. Eso es con lo que estábamos lidiando allí porque se basaba completamente en las palabras. Reemplázalo con búsqueda vectorial, que es esa consulta que acabamos de ver allí. Vamos a vectorizar esto al entrar. Ya guardé todas estas charlas en AstroDB, y ahora podemos ordenar usando nuestra consulta vectorizada y obtener un conjunto de cosas similares.

Y así, si ahora voy y miro de qué está hablando Phil Ash, va a hacer esa ordenación, hacer esa búsqueda y encontrar que la similitud de esa consulta, de qué está hablando Phil Ash, con mi charla es 0.72. Aunque en realidad habla de ello, también tiene similitud con otras cosas. Si miramos AI y desarrolladores, vamos a obtener puntuaciones muy similares a cosas como la charla de Addy, como la charla de Tober Lindbergh, como vimos. Y esta es una puntuación de similitud mucho mejor, una captura mucho mejor de cómo funciona todo.

Y así, si ahora preguntara de qué está hablando Phil Ash, todavía está usando esa similitud para simplemente devolver lo que tenemos. Y si digo quién está hablando, pero AI y desarrolladores, obtenemos esa misma lista. Pero ahora sabemos que en realidad estamos usando un modelo real para esto. Estamos usando una base de datos real para esto, por lo que es mucho más escalable y utilizable a largo plazo. Y eso es RAG, eso es Generación Aumentada por Recuperación.

Lo que hicimos aquí fue construir una idea muy pobre de un vector que fue realmente útil para nosotros ver, creo, cómo capturar el significado como una lista de números es útil para nosotros y cómo podemos luego compararlos. Luego reemplazamos eso usando modelos reales de aprendizaje automático para hacer la captura de significado y usando una base de datos para hacer la ordenación de una manera mucho más eficiente. Pero hay mucho más en esto. Si quieres investigar más sobre RAG, entonces hay formas alternativas de hacer embeddings vectoriales como Colbert. Hay formas alternativas de almacenar cosas en una base de datos, como usar un sistema RAG de grafos basado en el contenido. Acabo de compartir algunas otras publicaciones de blog que he escrito aquí, como una donde usé la ordenación por similitud para crear publicaciones relacionadas en un blog, en este caso un blog de Astro, Astro y Astra juntos, bastante divertido. Así que eso es todo lo que tengo para ti. Nuevamente, mi nombre es Phil Nash, soy un Ingeniero de Relaciones con Desarrolladores en Datastacks. Espero que disfrutes el resto de JSNation US. Nuevamente, encuéntrame en línea, soy Phil Nash por todas partes, o escanea este código QR para las diapositivas. Espero que puedas salir y explorar usando RAG, usando grandes modelos de lenguaje y construyendo con IA. Muchas gracias.

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

Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
El Flujo de Trabajo del Desarrollador Asistido por IA: Construye Más Rápido e Inteligente Hoy
JSNation US 2024JSNation US 2024
31 min
El Flujo de Trabajo del Desarrollador Asistido por IA: Construye Más Rápido e Inteligente Hoy
Top Content
AI is transforming software engineering by using agents to help with coding. Agents can autonomously complete tasks and make decisions based on data. Collaborative AI and automation are opening new possibilities in code generation. Bolt is a powerful tool for troubleshooting, bug fixing, and authentication. Code generation tools like Copilot and Cursor provide support for selecting models and codebase awareness. Cline is a useful extension for website inspection and testing. Guidelines for coding with agents include defining requirements, choosing the right model, and frequent testing. Clear and concise instructions are crucial in AI-generated code. Experienced engineers are still necessary in understanding architecture and problem-solving. Energy consumption insights and sustainability are discussed in the Talk.
IA y Desarrollo Web: ¿Exageración o Realidad?
JSNation 2023JSNation 2023
24 min
IA y Desarrollo Web: ¿Exageración o Realidad?
Top Content
This talk explores the use of AI in web development, including tools like GitHub Copilot and Fig for CLI commands. AI can generate boilerplate code, provide context-aware solutions, and generate dummy data. It can also assist with CSS selectors and regexes, and be integrated into applications. AI is used to enhance the podcast experience by transcribing episodes and providing JSON data. The talk also discusses formatting AI output, crafting requests, and analyzing embeddings for similarity.
El Ascenso del Ingeniero de IA
React Summit US 2023React Summit US 2023
30 min
El Ascenso del Ingeniero de IA
Top Content
The rise of AI engineers is driven by the demand for AI and the emergence of ML research and engineering organizations. Start-ups are leveraging AI through APIs, resulting in a time-to-market advantage. The future of AI engineering holds promising results, with a focus on AI UX and the role of AI agents. Equity in AI and the central problems of AI engineering require collective efforts to address. The day-to-day life of an AI engineer involves working on products or infrastructure and dealing with specialties and tools specific to the field.
TensorFlow.js 101: Aprendizaje automático en el navegador y más allá
ML conf EU 2020ML conf EU 2020
41 min
TensorFlow.js 101: Aprendizaje automático en el navegador y más allá
TensorFlow.js enables machine learning in the browser and beyond, with features like face mesh, body segmentation, and pose estimation. It offers JavaScript prototyping and transfer learning capabilities, as well as the ability to recognize custom objects using the Image Project feature. TensorFlow.js can be used with Cloud AutoML for training custom vision models and provides performance benefits in both JavaScript and Python development. It offers interactivity, reach, scale, and performance, and encourages community engagement and collaboration between the JavaScript and machine learning communities.
Aplicaciones Web del Futuro con Web AI
JSNation 2024JSNation 2024
32 min
Aplicaciones Web del Futuro con Web AI
Web AI in JavaScript allows for running machine learning models client-side in a web browser, offering advantages such as privacy, offline capabilities, low latency, and cost savings. Various AI models can be used for tasks like background blur, text toxicity detection, 3D data extraction, face mesh recognition, hand tracking, pose detection, and body segmentation. JavaScript libraries like MediaPipe LLM inference API and Visual Blocks facilitate the use of AI models. Web AI is in its early stages but has the potential to revolutionize web experiences and improve accessibility.

Workshops on related topic

IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
AI para Desarrolladores de React
React Advanced 2024React Advanced 2024
142 min
AI para Desarrolladores de React
Top Content
Featured Workshop
Eve Porcello
Eve Porcello
El conocimiento de las herramientas de AI es fundamental para preparar el futuro de las carreras de los desarrolladores de React, y la suite de herramientas de AI de Vercel es una vía de acceso accesible. En este curso, examinaremos más de cerca el Vercel AI SDK y cómo esto puede ayudar a los desarrolladores de React a construir interfaces de transmisión con JavaScript y Next.js. También incorporaremos APIs de terceros adicionales para construir y desplegar una aplicación de visualización de música.
Temas:- Creación de un Proyecto de React con Next.js- Elección de un LLM- Personalización de Interfaces de Transmisión- Construcción de Rutas- Creación y Generación de Componentes - Uso de Hooks (useChat, useCompletion, useActions, etc)
How to 9,2x Your Development Speed with Cline
JSNation 2025JSNation 2025
64 min
How to 9,2x Your Development Speed with Cline
Featured Workshop
Nik Pash
Nik Pash
La forma en que escribimos código está cambiando fundamentalmente. En lugar de quedar atrapado en bucles anidados y detalles de implementación, imagine enfocarse puramente en la arquitectura y la resolución creativa de problemas mientras su programador de pares de IA maneja la ejecución. En esta masterclass práctica, te mostraré cómo aprovechar Cline (un agente de codificación autónomo que recientemente alcanzó 1M de descargas en VS Code) para acelerar drásticamente tu flujo de trabajo de desarrollo a través de una práctica que llamamos "vibe coding" - donde los humanos se enfocan en el pensamiento de alto nivel y la IA maneja la implementación.Descubrirás:Los principios fundamentales del "vibe coding" y cómo se diferencia del desarrollo tradicionalCómo diseñar soluciones a un alto nivel y hacer que la IA las implemente con precisiónDemostración en vivo: Construcción de un sistema de almacenamiento en caché de grado de producción en Go que nos ahorró $500/semanaTécnicas para usar IA para entender bases de código complejas en minutos en lugar de horasMejores prácticas para solicitar a los agentes de IA que obtengan exactamente el código que deseasErrores comunes a evitar al trabajar con asistentes de codificación de IAEstrategias para usar IA para acelerar el aprendizaje y reducir la dependencia de ingenieros seniorCómo combinar efectivamente la creatividad humana con las capacidades de implementación de IAYa sea que seas un desarrollador junior que busca acelerar tu aprendizaje o un ingeniero senior que desea optimizar tu flujo de trabajo, saldrás de esta masterclass con experiencia práctica en desarrollo asistido por IA que puedes aplicar inmediatamente a tus proyectos. A través de demostraciones de codificación en vivo y ejercicios prácticos, aprenderás cómo aprovechar Cline para escribir mejor código más rápido mientras te enfocas en lo que importa: resolver problemas reales.
Building Full Stack Apps With Cursor
JSNation 2025JSNation 2025
46 min
Building Full Stack Apps With Cursor
Featured Workshop
Mike Mikula
Mike Mikula
En esta masterclass cubriré un proceso repetible sobre cómo iniciar aplicaciones full stack en Cursor. Espere comprender técnicas como el uso de GPT para crear requisitos de producto, esquemas de base de datos, hojas de ruta y usarlos en notas para generar listas de verificación que guíen el desarrollo de aplicaciones. Profundizaremos más en cómo solucionar alucinaciones/errores que ocurren, indicaciones útiles para hacer que su aplicación se vea y se sienta moderna, enfoques para conectar cada capa y más. Al final, ¡espere poder ejecutar su propia aplicación full stack generada por IA en su máquina!
Por favor, encuentre las preguntas frecuentes aquí
Webinar gratuito: Construyendo aplicaciones Full Stack con Cursor
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
71 min
Webinar gratuito: Construyendo aplicaciones Full Stack con Cursor
Top Content
WorkshopFree
Mike Mikula
Mike Mikula
Para asistir al webinar, por favor regístrate aquí.En este webinar cubriré un proceso repetible sobre cómo iniciar aplicaciones Full Stack en Cursor. Espera entender técnicas como usar GPT para crear requisitos de producto, esquemas de base de datos, hojas de ruta y usar esos en notas para generar listas de verificación que guíen el desarrollo de la aplicación. Profundizaremos más en cómo corregir alucinaciones/errores que ocurren, indicaciones útiles para hacer que tu aplicación se vea y se sienta moderna, enfoques para conectar cada capa y más. Al final, ¡espera poder ejecutar tu propia aplicación Full Stack generada por IA en tu máquina!
Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React
React Advanced 2023React Advanced 2023
98 min
Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React
Top Content
Workshop
Richard Moss
Richard Moss
En esta masterclass daremos un recorrido por la IA aplicada desde la perspectiva de los desarrolladores de front end, enfocándonos en las mejores prácticas emergentes cuando se trata de trabajar con LLMs para construir grandes productos. Esta masterclass se basa en los aprendizajes obtenidos al trabajar con la API de OpenAI desde su debut en noviembre pasado para construir un MVP funcional que se convirtió en PowerModeAI (una herramienta de creación de ideas y presentaciones orientada al cliente).
En la masterclass habrá una mezcla de presentación y ejercicios prácticos para cubrir temas que incluyen:
- Fundamentos de GPT- Trampas de los LLMs- Mejores prácticas y técnicas de ingeniería de prompts- Uso efectivo del playground- Instalación y configuración del SDK de OpenAI- Enfoques para trabajar con la API y la gestión de prompts- Implementación de la API para construir una aplicación orientada al cliente potenciada por IA- Ajuste fino y embeddings- Mejores prácticas emergentes en LLMOps