DEV Community

Cover image for Incorpora IA generativa a una aplicaci贸n web de JavaScript
Elizabeth Fuentes L for AWS Espa帽ol

Posted on • Originally published at community.aws

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.

Authentication

驴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",
                    }
                ]
            }
        }
Enter fullscreen mode Exit fullscreen mode

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

demos menu

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"
Enter fullscreen mode Exit fullscreen mode

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;
};
Enter fullscreen mode Exit fullscreen mode

Code --> llmLib.js

Te explicaremos cada grupo de demos para destacar sus diferencias.

Primero: charla con Amazon Bedrock

Chat With 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 Q&A

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

Chat with Memory

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";
Enter fullscreen mode Exit fullscreen mode
// create a memory object
const memory = new BufferMemory({ humanPrefix: "H",  memoryKey:"chat_history"});
Enter fullscreen mode Exit fullscreen mode

驴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:

Knowledge Bases for Amazon Bedrock

- Amazon Bedrock Retrieve => LLM:

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
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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

Amazon Bedrock Retrieve & Generate

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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  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.

Add repository branch

  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

App build and test settings

  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.

Amplify Deploy

Al introducir el enlace, aparecer谩 la ventana Iniciar sesi贸n, por lo que debes crear un usuario del Amazon Cognito User Pool User.

Sing In Window

鉁 C贸mo crear un usuario

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

Backend environments

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

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:

Chat Q&A

鉁 Haz preguntas de seguimiento y comprueba las funciones multiling眉es del modelo

Chat Memory

鉁 Consulta la base de conocimientos con el LLM para obtener la mejor respuesta

Chat LLM

鉁 Por 煤ltimo, consulta la base de datos de conocimientos directamente sin intermediarios

Chat LLM

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:


馃嚮馃嚜馃嚚馃嚤 Dev.to Linkedin GitHub Twitter Instagram Youtube
Linktr

Top comments (0)