Decodificación de la Búsqueda Vectorial y Embeddings para Desarrolladores de React

Rate this content
Bookmark

En esta charla desglosaremos conceptos clave de la IA Generativa como la Búsqueda Vectorial y los Embeddings Vectoriales y cómo los Desarrolladores de React pueden aprovecharlos con tecnologías como LangChainJS para construir aplicaciones intuitivas impulsadas por IA. Discutiremos diferentes experiencias de búsqueda habilitadas por IA como enfoques de búsqueda vectorial e híbrida, explorando cómo funciona cada método, sus ventajas y desventajas, y casos de uso prácticos.

La charla desglosará lo que pueden ser conceptos excesivamente complejos en conclusiones prácticas para nuestro trabajo diario como desarrolladores de React/JavaScript. Al final de la sesión tendrás una mejor comprensión de cuándo y cómo usar diferentes técnicas de búsqueda para optimizar tu experiencia de usuario. Lo más importante es que también aprenderás cómo, como desarrollador de React, podemos usar estas técnicas de búsqueda utilizando herramientas y bibliotecas de código abierto, incluyendo algunos motores de búsqueda potentes escritos en TS/JS y crear aplicaciones impulsadas por IA en React. 

This talk has been presented at React Day Berlin 2024, check out the latest edition of this React Conference.

Shivay Lamba
Shivay Lamba
28 min
16 Dec, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Bienvenidos a mi charla en React Day Berlin. Hoy, discutiremos la búsqueda vectorial y los embeddings para desarrolladores de React. La búsqueda tradicional está rota, resultando en experiencias de usuario pobres. Convertir datos en embeddings desbloquea búsquedas más precisas, recomendaciones de contenido y comparaciones de documentos. La búsqueda vectorial mide la cercanía o similitud de los vectores usando distancias. En la búsqueda vectorial, los documentos más relevantes se encuentran basados en similitudes entre vectores. Hay múltiples formas de calcular la distancia entre datos en la búsqueda vectorial. Las aplicaciones de IA Generativa a menudo manejan tanto datos textuales como de imagen, haciendo útil la búsqueda vectorial. Al convertir consultas y datos en vectores, se considera el significado semántico, permitiendo resultados más precisos. Los desarrolladores de React y Next.js tienen acceso a una gama de herramientas, incluyendo BlankChain y AI SDK de Vercel. La generación aumentada por recuperación mejora los resultados de búsqueda convirtiendo datos en vectores y generando texto más coherente. La consulta del usuario se convierte en un vector y se empareja usando búsqueda vectorial, y la respuesta se genera usando el AISDK de Vercel.

1. Introducción a la Búsqueda Vectorial y Embeddings

Short description:

Bienvenidos a mi charla en React Day Berlin. Hoy, discutiremos la búsqueda vectorial y los embeddings para desarrolladores de React. La búsqueda tradicional está rota, resultando en malas experiencias de usuario. Exploraremos vectores, embeddings y cómo se aplican al desarrollo de React. Los vectores son listas de números que representan texto y los embeddings organizan el texto para una búsqueda eficiente.

Hola a todos. Bienvenidos a mi charla en React Day Berlin. Soy Shabal Amba. Trabajo como evangelista de desarrolladores en Couchbase, que es una plataforma de base de datos NoSQL que empodera a los desarrolladores, incluyendo muchas capacidades de IA que se están implementando con soporte para búsqueda vectorial.

Así que la sesión de hoy girará en torno a descifrar la búsqueda vectorial y los embeddings para desarrolladores de React. Ahora imagina que eres como Joey de Friends y estás sentado en un sofá realmente bonito. Por supuesto, a todos nos encanta el sofá y tener una buena silla, ¿verdad? Así que, por supuesto, si eres un desarrollador de software, probablemente amarás tu silla de trabajo o si simplemente estás disfrutando viendo una película y disfrutando de balancearte detrás con una silla realmente agradable. Así que, por supuesto, a todos nos encanta eso. Y si lo usas demasiado, a veces podrías ver que tu silla simplemente se rompe. Así que, por supuesto, el siguiente paso sería que podrías querer buscar ese tipo particular de silla que realmente amas. Así que podrías tener una consulta de búsqueda en una plataforma de comercio electrónico donde buscas Estoy buscando una silla vieja, que sea muy cómoda. Tiene un color marrón porque realmente no puedes recordar la marca exacta de esa silla particular que estás buscando, porque es tan vieja.

Y, por supuesto, ¿qué pasaría si dieras una descripción tan descriptiva de la silla cuando avanzas e intentas buscar con este tipo de descripción en diferentes plataformas de comercio electrónico? Veamos qué sucede realmente. Entonces, ¿crees que Joey podrá realmente encontrar esa misma silla que está buscando? Bueno, según muchas encuestas, el 88% de los usuarios no podrán realmente encontrar lo que están buscando, y no regresan a un sitio web después de una experiencia tan mala donde no encuentran o no pueden encontrar lo que buscan. Y el 61% de los usuarios dicen que no pueden realmente encontrar lo que buscan en cinco segundos. Y si eso sucede, realmente irán al siguiente sitio para encontrar los resultados.

Así que, por supuesto, si pongo esa misma descripción dentro de una plataforma de comercio electrónico, entonces, ¿qué sucedería? Entonces, si vas y buscas ese tipo particular de silla, probablemente no podremos encontrar lo mismo que estamos buscando. Encontramos un montón de otras sillas aleatorias que no coinciden con la descripción que estamos tratando de buscar. Entonces, ¿qué significa eso sobre las experiencias de búsqueda? Vimos que no encontramos ninguna silla marrón, ninguna silla marrón terrosa, ningún reclinador manual o reclinador automático. Pero al menos estas eran sillas, pero aún no cumplían con nuestra descripción que queríamos encontrar. Así que esa es la razón por la cual la búsqueda tradicional está realmente rota.

Así que de lo que vamos a hablar hoy, vamos a hablar sobre qué es un vector, qué son los embeddings, qué es la búsqueda vectorial, y luego cómo se aplica realmente para nosotros los desarrolladores de React o Next.js. Así que vimos que, por supuesto, la búsqueda tradicional, que se basa típicamente en la búsqueda de texto completo, donde cualquier consulta de usuario que se envíe, tratamos de coincidir con la consulta de búsqueda exacta y tratamos de encontrar resultados en nuestra base de datos que coincidan con la palabra exacta por palabra o texto por letra o letra por letra basada en la consulta de búsqueda que has enviado. Así que si tienes una descripción muy vaga como Estoy buscando una silla marrón realmente bonita que sea reclinable, si ese mismo texto no existe en tu base de datos, entonces no podrás realmente encontrar resultados para eso. Así que veamos cómo podemos superar ese problema particular. Así que primero, entendamos qué es exactamente un vector. Así que de nuevo, una advertencia de que si eres un desarrollador de React o un desarrollador de JavaScript, esto involucrará muchos números. Bueno, un vector es una lista de números que puede representar palabras, frases, imágenes y mucho más. Y aquí, cada número en esta lista particular básicamente tendrá alguna información sobre el significado de ese texto particular que estás mostrando. Y un embedding o un vector embedding básicamente convierte estas palabras o frases en estas listas de números de baja dimensión. Y estos embeddings son muy compactos y ayudan a hacer tareas como buscar y organizar estos textos muy fáciles.

2. Working with Embeddings for Vector Search

Short description:

Convertir datos en embeddings desbloquea una búsqueda más precisa, recomendaciones de contenido y comparaciones de documentos. Los modelos de embedding son modelos de IA especializados que convierten texto en matrices numéricas usando redes neuronales. La búsqueda vectorial mide la cercanía o similitud de los vectores usando distancias. Vectores más cercanos indican características del mundo real similares. Por ejemplo, una consulta como 'I'm looking for my old chair with its leg part went up' puede ser utilizada para la búsqueda vectorial.

Así que, por ejemplo, si tienes toda esta descripción que estábamos tratando de buscar dentro de nuestra caja de búsqueda, cuando convertimos esto en el embedding usando una API de embedding, se convertirá en este vector. Así que como puedes ver, básicamente representa todo este modelo de embedding. Y aquí tienes un array de estos embeddings. Así que estos valores, representan las características del mundo real de tus datos. Simplemente estás convirtiendo tus características del mundo real de los datos en estos valores numéricos con la ayuda de un modelo de IA llamado modelo de embedding, donde puedes ver que el modelo de embedding en este caso es el modelo TextEmbedding3, que convierte tus datos de entrada en estos embeddings que representan las características del mundo real o las dimensiones del mundo real de tus datos. Y la razón por la que convertimos esto en este formato numérico o este formato de embedding, llegaremos a eso más tarde.

Y aquí, este modelo de TextEmbedding es de OpenAI. Así que tu aplicación de datos básicamente transforma todo el camino desde todos estos datos, como los datos textuales que ves ahora, en un gran array de las dimensiones de las representaciones vectoriales, lo que desbloquea. Así que al convertir tus datos de texto en estos embeddings, básicamente desbloquea una búsqueda más precisa, recomendaciones de contenido, y también poder hacer comparaciones de documentos. Así que la pregunta es, ¿es esto realmente magia? Así que primero discutamos también sobre los modelos de embedding. Así que los modelos de embedding a un alto nivel convertirán tu texto en estas matrices numéricas. Y esto básicamente sucede con la ayuda de estos modelos de IA especializados, que realmente son solo redes neuronales. Así que en el panorama del aprendizaje automático, el aprendizaje profundo, estas son redes neuronales, que básicamente toman los datos de las palabras para entender qué hay en esa palabra. Y luego lo convertirá en este valor numérico. Y por supuesto, estos modelos están tradicionalmente entrenados sobre una gran cantidad de datos vastos para entender adecuadamente qué representa realmente esos datos, para que luego pueda convertirlos en esta forma numérica y tener el contexto relevante de qué son las características de esos datos particulares. De manera similar, por supuesto, hoy en día, muchos de los diferentes modelos de IA, como los modelos GPT, son los que se están utilizando bajo los grandes modelos de lenguaje que son modelos generativos, que te permiten generar datos y generar respuestas similares a las humanas, ya sea generación de texto o resumen. Así que, por supuesto, esas son diferentes categorías de modelos, que se utilizan para LLMs. Pero los modelos de embedding son los que pueden básicamente convertir tus datos en el formato numérico.

Así que ahora entendamos cómo funciona realmente la búsqueda vectorial. Así que hemos discutido sobre qué son los vectores. ¿Qué son estos embeddings que están generando estos vectores a partir de nuestros datos de entrada? Y por supuesto, estos vectores también son multimodelo, lo que significa que tienes embeddings basados en texto, pero luego también puedes tener imagen o incluso una combinación de ambas imágenes y texto. Así que una vez que conviertes estos en los embeddings, ¿qué significa realmente? ¿Por qué los estamos convirtiendo incluso en los embeddings? Así que ahí es donde la búsqueda vectorial realmente entra en escena. Así que primero, hablemos sobre la cercanía y entendamos qué significa realmente esa cercanía. Así que la cercanía dentro de la búsqueda vectorial básicamente significa qué tan cerca están dos vectores o qué tan similares son, lo cual se mide típicamente con la ayuda de una distancia, que representa el valor de qué tan separados están estos vectores. Así que básicamente, en resumen, si los dos vectores son más pequeños en su distancia, como si están más cerca uno del otro, eso significa que tendrán más similitud. ¿Y qué significa eso en el mundo real? Así que primero, estos vectores están representando las características del mundo real de algo. Así que si los vectores están más cerca uno del otro, eso significa que las características del mundo real de dos cosas están coincidiendo más que si están más separadas. Así que eso significa que dos cosas que son similares en sus características realmente representarán, sus vectores estarán más cerca uno del otro. Eso significa que la distancia entre ellos será más pequeña en tamaño. Así que aquí hay un ejemplo. Digamos que tenemos la consulta. I'm looking for my old chair with its leg part went up.

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.
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
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.
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
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.
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.
Cobertura de código con IA
TestJS Summit 2023TestJS Summit 2023
8 min
Cobertura de código con IA
Codium is a generative AI assistant for software development that offers code explanation, test generation, and collaboration features. It can generate tests for a GraphQL API in VS Code, improve code coverage, and even document tests. Codium allows analyzing specific code lines, generating tests based on existing ones, and answering code-related questions. It can also provide suggestions for code improvement, help with code refactoring, and assist with writing commit messages.

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)
Aprovechando LLMs para Construir Experiencias de IA Intuitivas con JavaScript
JSNation 2024JSNation 2024
108 min
Aprovechando LLMs para Construir Experiencias de IA Intuitivas con JavaScript
Featured Workshop
Roy Derks
Shivay Lamba
2 authors
Hoy en día, todos los desarrolladores están utilizando LLMs en diferentes formas y variantes, desde ChatGPT hasta asistentes de código como GitHub CoPilot. Siguiendo esto, muchos productos han introducido capacidades de IA integradas, y en este masterclass haremos que los LLMs sean comprensibles para los desarrolladores web. Y nos adentraremos en la codificación de tu propia aplicación impulsada por IA. No se necesita experiencia previa en trabajar con LLMs o aprendizaje automático. En su lugar, utilizaremos tecnologías web como JavaScript, React que ya conoces y amas, al mismo tiempo que aprendemos sobre algunas nuevas bibliotecas como OpenAI, Transformers.js
Masterclass: Qué son y cómo aprovechar los LLMs
React Summit 2024React Summit 2024
66 min
Masterclass: Qué son y cómo aprovechar los LLMs
Featured Workshop
Nathan Marrs
Haris Rozajac
2 authors
Únete a Nathan en esta sesión práctica donde primero aprenderás a alto nivel qué son los modelos de lenguaje grandes (LLMs) y cómo funcionan. Luego sumérgete en un ejercicio de codificación interactivo donde implementarás la funcionalidad de LLM en una aplicación de ejemplo básica. Durante este ejercicio, adquirirás habilidades clave para trabajar con LLMs en tus propias aplicaciones, como la ingeniería de indicaciones y la exposición a la API de OpenAI.
Después de esta sesión, tendrás una idea de qué son los LLMs y cómo se pueden utilizar prácticamente para mejorar tus propias aplicaciones.
Tabla de contenidos:- Demostración interactiva de la implementación de funciones básicas impulsadas por LLM en una aplicación de demostración- Discutir cómo decidir dónde aprovechar los LLMs en un producto- Lecciones aprendidas sobre la integración con OpenAI / descripción general de la API de OpenAI- Mejores prácticas para la ingeniería de indicaciones- Desafíos comunes específicos de React (gestión de estado :D / buenas prácticas de UX)
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 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.