Incorpora IA generativa a una aplicación web de JavaScript

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.

¿Cómo funciona esta aplicación?

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.

1
2
3
4
5
6
7
8
9
10
11
12
{ policyName: "amplify-permissions-custom-resources",
            policyDocument: {
                Version: "2012-10-17",
                Statement: [
                    {
                        Resource: "*",
                        Action: ["bedrock:InvokeModel*", "bedrock:List*", "bedrock:Retrieve*"],
                        Effect: "Allow",
                    }
                ]
            }
        }

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.

1
2
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 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
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;
};

Código --> 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 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.

1
2
3
4
5
6
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 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.

Segundo: Bases de conocimiento de Amazon Bedrock

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:

1
2
3
4
5
6
7
8
9
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 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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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:

primero fork este repositorio:

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

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-apps como 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 escribe dev.

Si no hay ningún ROLE existente, crea un nuevo role para dar servicio a Amplify.
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 Grupo de usuarios de Amazon Cognito.

✅ Cómo crear un usuario

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.

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

🤖🚀 ¡Prueba la aplicación!

✅ 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

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:

Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.

Site Terms, Privacy, and more.