Incorpora IA generativa a una aplicación web de JavaScript

🇻🇪🇨🇱 Dev.to Linkedin GitHub Twitter Instagram Youtube
Linktr

---

Crea una aplicación React GenAI con Amazon Bedrock y AWS SDK

This article was written in colaboration Enrique Rodriguez

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 Amazon Bedrock API desde una aplicación webSPA 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 CloudScape design system. Desplegarás todos los recursos y alojarás la aplicación usando AWS Amplify.

¿Cómo funciona esta aplicación?

En el repository of this application, 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 (IAM Role) que contiene la política con los permisos para invocar Amazon Bedrock.

{ policyName: "amplify-permissions-custom-resources",
            policyDocument: {
                Version: "2012-10-17",
                Statement: [
                    {
                        Resource: "*",
                        Action: ["bedrock:InvokeModel*", "bedrock:List*", "bedrock:Retrieve*"],
                        Effect: "Allow",
                    }
                ]
            }
        }

Revisa la guia "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í: IAM Role Code

✅ Frontend: una aplicación Reactjs de una sola página (SPA) y CloudScape 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 or BedrockAgentRuntimeClient 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.

import { BedrockAgentClient} from "@aws-sdk/client-bedrock-agent"
import { BedrockAgentRuntimeClient} from "@aws-sdk/client-bedrock-agent-runtime"

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.

Un ejemplo de un modelo lingüístico amplio

Para usar un modelo en tu aplicación (por ejemplo anthropic.claude-instant-v1) inicializas Bedrock Class from Langchain. Tienes que especificar la región, las respuestas de streaming y las credenciales de la API del user pool authentication. 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.

export const getModel = async () => {
    const session = await fetchAuthSession(); //Amplify helper to fetch current logged in user
    const model = new Bedrock({
        model: "anthropic.claude-instant-v1", // model-id you can try others if you want
        region: "us-east-1", // app region
        streaming: true, // this enables to get the response in streaming manner
        credentials: session.credentials, // the user credentials that allows to invoke bedrock service
        // try to limit to 1000 tokens for generation
        // temperature = 1 means more creative and freedom 
        modelKwargs: { max_tokens_to_sample: 1000, temperature: 1 }, 
    });
    return model;
};

Code --> llmLib.js

Te explicaremos cada grupo de demos para destacar sus diferencias.

Primero: charla con Amazon Bedrock

Aquí hablarás directamente con el modelo de lenguaje grande (LLM) implementado por la API de Bedrock a través de un chain, de dos maneras diferentes:

- Chat Q&A: Envía un prompt y el modelo responde con una salida generada.

- Chat with Memory: 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 conBuffer 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 library para Langchain, ConservationChain para gestionar la conversación y BufferMemory para invocar el uso de la memoria.

import { Bedrock } from "@langchain/community/llms/bedrock/web";
import { ConversationChain} from "langchain/chains";
import { BufferMemory } from "langchain/memory";

// create a memory object
const memory = new BufferMemory({ humanPrefix: "H",  memoryKey:"chat_history"});

¿Por qué HumanPrefix: «H»?

Anthropic Claude ha recibido entrenamiento para entender los términos de Human: and Assistant: indicators. For memory you use "H:" to identify the human part (instead of Human:) 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.

Segundo: Bases de conocimiento de Amazon Bedrock

En esta demostración, harás preguntas a Knowledge Bases for Amazon Bedrock aprovechando el retrieval augmented generation (RAG). Debes tener al menos una base de conocimientos creada, hazlo siguiendo la guia Create a knowledge base.

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 ListKnowledgeBasesCommandde la siguiente manera:

import { ListKnowledgeBasesCommand } from "@aws-sdk/client-bedrock-agent"

export const getBedrockKnowledgeBases = async () => {
    const session = await fetchAuthSession()
    const client = new BedrockAgentClient({ region: "us-east-1", credentials: session.credentials })
    const command = new ListKnowledgeBasesCommand({})
    const response = await client.send(command)
    return response.knowledgeBaseSummaries
}

La claseAmazonKnowledgeBaseRetriever 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)

import { AmazonKnowledgeBaseRetriever } from "@langchain/community/retrievers/amazon_knowledge_base";

export const getBedrockKnowledgeBaseRetriever = async (knowledgeBaseId) => {
    const session = await fetchAuthSession();

    const retriever = new AmazonKnowledgeBaseRetriever({
        topK: 10, // return top 10 documents
        knowledgeBaseId: knowledgeBaseId,
        region: "us-east-1",
        clientOptions: { credentials: session.credentials }
    })

    return retriever
}

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.

import { ConversationalRetrievalQAChain } from "langchain/chains";

export const getConversationalRetrievalQAChain = async (llm, retriever, memory) => {

    const chain = ConversationalRetrievalQAChain.fromLLM(
        llm, retriever = retriever)
    chain.memory = memory

    //Here you modify the default prompt to add the Human prefix and Assistant suffix needed by Claude.
    //otherwise you get an exception
    //this is the prompt that uses chat history and last question to formulate a complete standalone question

    chain.questionGeneratorChain.prompt.template = "Human: " + chain.questionGeneratorChain.prompt.template +"\nAssistant:"
     // Here you finally answer the question using the retrieved documents.

    chain.combineDocumentsChain.llmChain.prompt.template = `Human: Use the following pieces of context to answer the question at the end. If you don't know the answer, just say that you don't know, don't try to make up an answer. 

{context}

Question: {question}
Helpful Answer:
Assistant:`

return chain
}

- Amazon Bedrock Retrieve & Generate:

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.

import { BedrockAgentRuntimeClient, RetrieveAndGenerateCommand } from "@aws-sdk/client-bedrock-agent-runtime"

export const ragBedrockKnowledgeBase = async (sessionId, knowledgeBaseId, query) => {
    const session = await fetchAuthSession()
    const client = new BedrockAgentRuntimeClient({ region: "us-east-1", credentials: session.credentials });
    const input = {
        input: { text: query }, // user question
        retrieveAndGenerateConfiguration: {
            type: "KNOWLEDGE_BASE",
            knowledgeBaseConfiguration: {
                knowledgeBaseId: knowledgeBaseId,
                //your existing KnowledgeBase in the same region/ account
                // Arn of a Bedrock model, in this case we jump to claude 2.1, the latest. Feel free to use another
                modelArn: "arn:aws:bedrock:us-east-1::foundation-model/anthropic.claude-v2:1", // Arn of a Bedrock model
            },
        }
    }

    if (sessionId) {
        // you can pass the sessionId to continue a dialog.
        input.sessionId = sessionId
    }

    const command = new RetrieveAndGenerateCommand(input);
    const response = await client.send(command)
    return response
}

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:

La aplicación está creada con AWS Amplify. Para implementarlo en tu cuenta:

1. primero fork este repo:

https://github.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/forks

1. Crea una Nueva branch: dev-branch.

2. Sigue los pasos en la guia de Getting started with existing code guide.

3. En Step 1 Add repository branch, selecciona la branch dev-branch y en Connecting a monorepo? Pick a folder y escribe reactjs-gen-ai-apps como directorio raíz.

1. Para el próximo paso, Build settings, selecciona building-a-gen-ai-gen-ai-personal-assistant-reactjs-apps(this app) como nombre de App, en Enviroment selecciona Create a new envitoment y escribe dev

1. Si no hay ningún ROLE existente, crea uno nuevo para service Amplify.

2. Despliega tu aplicación.

Paso 2: Acceso a la URL de la 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 Amazon Cognito User Pool User.

✅ Cómo crear un usuario

En la aplicación, ve a Backend environments y haz clic en Autenticación

Luego, en Autenticación, haz clic en View in Cognito:

En el User Pool, haz clic en el nombre de tu grupo de usuarios y Create User.

Create your user and then sing in.

Note: 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.

Probemos la aplicación de IA generativa React con el SDK de Javascript de Amazon Bedrock

Antes de poder utilizar un modelo de base en Amazon Bedrock, debes solicitar acceso a él. Sigue la guia de Add model access guide.

Ve al enlace de la aplicación e inicia sesión con el usuario que has creado.

🤖🚀 ¡Prueba la aplicación!

✅ Chat with 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

Conclusión

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.

🚀 Algunos enlaces para que sigas aprendiendo y construyendo:

• Amplify Workshops
• Amplify JavaScript Sample Applications
• Actions and scenarios using SDK for JavaScript

---

🇻🇪🇨🇱 Dev.to Linkedin GitHub Twitter Instagram Youtube
Linktr