Incorpora IA generativa a una aplicación web de JavaScript
Integra GenAI con cambios mínimos en el código empleando JS y para invocar la API de Amazon Bedrock en una aplicación de una sola página de React.
Elizabeth Fuentes
Amazon Employee
Published Feb 20, 2024
¿Cómo funciona esta aplicación?
Un ejemplo de un modelo lingüístico amplio
Primero: charla con Amazon Bedrock
Segundo: Bases de conocimiento de Amazon Bedrock
Vamos a implementar la aplicación de IA generativa React con Amazon Bedrock y AWS Javascript SDK
Paso 1: Habilitar el host de AWS Amplify:
Paso 2: Acceso a la URL de la aplicación:
Probemos la aplicación de IA generativa React con el SDK de Javascript de Amazon Bedrock
🚀 Algunos enlaces para que sigas aprendiendo y construyendo:
Este artículo se escribió en colaboración Enrique Rodríguez
Integrar la IA generativa en las aplicaciones existentes presenta desafíos. Muchos desarrolladores tienen una experiencia limitada en el entrenamiento de modelos básicos, pero el objetivo es integrar las capacidades de la IA generativa con un mínimo de cambios en el código.
Para solucionarlo, creamos una aplicación que integra el poder de la IA generativa con una llamada a la API de Amazon Bedrock desde una aplicación web SPA creada con JavaScript y React Framework. Sin middleware, se reduce la barrera para incorporar la generación de IA mediante una integración mínima del código.
En este blog aprenderás a usar Amazon Cognito credenciales y funciones de IAM que invocar Amazon Bedrock La API en una aplicación basada en reacciones con JavaScript y el sistema de diseño de Cloud Scape . Desplegarás todos los recursos y alojarás la aplicación usando AWS Amplify.
En el repositorio de esta aplicación, encontrarás el código listo para implementar el backend y el frontend.
✅ Backend: Un grupo de usuarios e identidades de Amazon Cognito, con un AWS Identity and Access Managemen Role (rol de IAM) que contiene la política con los permisos para invocar Amazon Bedrock.
Revisa la Guía Integrating Amazon Cognito authentication and authorization with web and mobile apps» configura e invoca la API para la autenticación y autorización de los usuarios.
Estos permisos se pueden personalizar aquí: Código de rol de IAM
✅ Frontend: una aplicación Reactjs de una sola página (SPA) y Cloud Scape como sistema de diseño.
Esta aplicación incluye 2 demostraciones:
- Chatea con Amazon Bedrock
- Bases de conocimiento de Amazon Bedrock
Todas las demostraciones tienen en común el uso del BedrockRuntimeClient o BedrockAgentRuntimeClient para invocar el servicio Bedrock o BedrockAgent para una interacción conversacional. El BedrockAgentClient se usa también para listas las bases de conocimiento de Bedrock actuales desplegadas en la misma cuenta.
Amazon Bedrock es un servicio totalmente gestionado que ofrece una selección de modelos básicos (FM) de alto rendimiento junto con un amplio conjunto de capacidades que necesitas para crear aplicaciones de IA generativas.
Para usar un modelo en tu aplicación (por ejemploClaude-instant-v1) inicializas Bedrock Class from Langchain. Tienes que especificar la región, las respuestas de streaming y las credenciales de la API del autenticación del grupo de usuarios. Para los argumentos del modelo, especificas el modelo para muestrear hasta 1000 fichas y, para mayor creatividad y libertad de generación, utiliza una temperatura de 1.
Código --> llmLib.js
Te explicaremos cada grupo de demos para destacar sus diferencias.
Aquí hablarás directamente con el modelo de lenguaje grande (LLM) implementado por la API de Bedrock a través de un cadena, de dos maneras diferentes:
- Preguntas y respuestas del chat: Envía un prompt y el modelo responde con una salida generada.
- Chatea con la memoria: Envía un prompt junto con los mensajes anteriores (si existen) y el modelo responde con un resultado generado. Esta implementación usa memoria local.
Este chat está creado con un ConversationChain con Buffer Memory para almacenar y pasar los cuadros de diálogo. Hay otros tipos de memoria, más información en Working With Your Live Data Using LangChain.
Para configurar esta demostración, es necesario iniciar Bedrock para Langchain, ConservationChain para gestionar la conversación y BufferMemory para invocar el uso de la memoria.
¿Por qué HumanPrefix: «H»?
Anthropic Claude ha recibido entrenamiento para entender los términos de Humano: y asistente: como indicadores. Para la memoria, usas la «H»: para identificar la parte humana (en lugar de la humana:) y evitar confusiones entre modelos sobre dónde comienza la última instrucción humana.
La cadena analizará chat_history objeto de memoria para recuperar los diálogos anteriores.
En esta demostración, harás preguntas a Bases de conocimiento de Amazon Bedrock aprovechando recuperación de generación aumentada (RAG). Debes tener al menos una base de conocimientos creada, hazlo siguiendo la guia Crea base de conocimientos.
Las preguntas a las bases de conocimiento de Amazon Bedrock se formularán de dos maneras:
- Amazon Bedrock Retrieve => LLM:
Lista las bases de conocimiento con Comando Liste Knowledge Bases de la siguiente manera:
La clase AmazonKnowledgeBaseRetriever de Langchain crea un retriever, un objeto capaz de recuperar documentos similares a una consulta de una base de conocimientos (en este caso es una base de conocimientos de Bedrock)
El ConversationalRetrievalQAChain se instancia con el retriever y la memoria. Se ocupa la memoria, consulta al retriever y formula la respuesta (con los documentos) mediante la instancia de llm.
- Amazon Bedrock Recupera y genera:
Aquí utilizarás un servicio RAG gestionado completamente por AWS. No se necesitan paquetes adicionales (Langchain) ni aumentar la complejidad con prompt. Solo utilizarás una llamada a la API para BedrockAgentRuntimeClient. Además, el servicio gestiona la memoria mediante un sessionId.
Bedrock se inicializa con BedrockAgentRuntimeClient y RetrieveAndGenerateCommand consulta una base de conocimientos y un FM genera la respuestas en función de los resultados recuperados. En esta demostración no se necesita Langchain.
La aplicación está creada con AWS Amplify. Para implementarlo en tu cuenta:
- primero fork este repositorio:
- Crea un Nueva Branch:
dev-branch. - Sigue los pasos en la guia de Getting started with existing code.
- En Paso 1 Añadir la nueva branch del repositorio, selecciona la branch dev-branch y ¿Conectar un monorepo? Elige una carpeta y escribe
reactjs-gen-ai-appscomo directorio raíz.
Add repository branch - Para el siguiente paso, Crear ajustes, selecciona
building-a-gen-ai-gen-ai-personal-assistant-reactjs-apps(this app)como nombre de la aplicación, en Envitonment selecciona Crea un nuevo entorno y escribedev.
- Si no hay ningún ROLE existente, crea un nuevo role para dar servicio a Amplify.
- Despliega tu aplicación.
Una vez desplegada la aplicación, ve al enlace de la aplicación que se encuentra debajo del cuadro blanco.
Al introducir el enlace, aparecerá la ventana Iniciar sesión, por lo que debes crear un usuario del Grupo de usuarios de Amazon Cognito.
En la aplicación, ve a Entornos de back-end y haz clic en Autenticación.
Luego, en Autenticación, haz clic en Ver en Cognito:
En el Grupo de usuarios, haz clic en el nombre de tu grupo de usuarios y Crear usuario.
Crea tu usuario y luego canta.
Nota: Puedes crear el usuario directamente desde la aplicación cambiando Falso
hideSignUp: false en App.JSX, pero esto puede introducir un fallo de seguridad al dar a cualquiera acceso a él.Antes de poder utilizar un modelo de base en Amazon Bedrock, debes solicitar acceso a él. Sigue el paso Añadir modelo de guía de acceso.
Ve al enlace de la aplicación e inicia sesión con el usuario que has creado.
✅ Chatea con Amazon Bedrock:
✅ Haz preguntas de seguimiento y comprueba las funciones multilingües del modelo
✅ Consulta la base de conocimientos con el LLM para obtener la mejor respuesta
✅ Por último, consulta la base de datos de conocimientos directamente sin intermediarios
En este blog, has creado una aplicación web de React que puede acceder directamente a la API de Amazon Bedrock mediante la autenticación de Amazon Cognito. La integración segura de servicios de IA generativa como Bedrock en una interfaz de React se puede lograr aprovechando los servicios gestionados de AWS, como Cognito e IAM.
Con esto, puedes incorporar el poder de IA generativa de Amazon Bedrock en las aplicaciones React nuevas y existentes. Esto permite a los desarrolladores centrarse en crear experiencias de conversación y RAG atractivas con un servicio de conocimiento gestionado, sin necesidad de código de fondo. También demuestra el poder de las respuestas en streaming, que mejoran la experiencia de usuario y los tiempos de espera con la IA conversacional.
Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.