building reactjs gen ai apps with amazon bedrock javascript sdk
1.0.0
Эта статья была написана в колаборе Энрике Родригес
Приготовьтесь отправиться в захватывающее путешествие, поскольку мы объединяем мощность Bedrock, ReactJS и AWS Javascript SDK, чтобы создать генеративное приложение AI с минимальным кодом интеграции.
Интеграция генеративного ИИ в существующие приложения представляет проблемы. Многие разработчики имеют ограниченный опыт обучения моделей фондов, но цель состоит в том, чтобы интегрировать генеративные возможности ИИ с минимальными изменениями кода.
Чтобы решить это, мы создали приложение, которое интегрирует мощность генеративного ИИ с вызовом API Amazon Bedrock из веб -приложения, подобного спа -салону с JavaScript и React Framework. Без промежуточного программного обеспечения, снижение барьера для включения генерации ИИ с помощью минимальной интеграции кода.
На протяжении всего этого урока вы узнаете, как использовать учетные данные Amazon Cognito и IAM, чтобы надежно получить доступ к API Amazon Bendrock в рамках вашего приложения ReactJS, построенного в системе проектирования CloudScape. Мы проведем вас через процесс развертывания всех необходимых ресурсов и размещения приложения с помощью AWS Amplify, оптимизации процесса настройки и развертывания.
Чтобы повысить гибкость и настройку модели Фонда (FM), мы продемонстрируем, как назначить различные роли, используя системную подсказку. Создавая таблицу Amazon DynamoDB, вы можете хранить и получать различные роли, позволяя вам управлять и получить доступ к отдельным системным подсказкам, связанным с каждой ролью, которую вы хотите назначить FM. Этот централизованный подход репозитория позволяет проводить динамическое назначение ролей и адаптированные ответы ИИ на основе выбранной роли.
В репозитории этого приложения вы найдете код, готовую для развертывания бэкэнд и фронта.
✅ Бэкэнд: пул пользователей и идентификации Amazon Cognito, с роли идентификации AWS и управления доступом (роль IAM), которая содержит политику с разрешениями на вызов Amazon Bedrock.
{ policyName: "amplify-permissions-custom-resources",
policyDocument: {
Version: "2012-10-17",
Statement: [
{
Resource: "*",
Action: ["bedrock:InvokeModel*", "bedrock:List*", "bedrock:Retrieve*"],
Effect: "Allow",
}
]
}
}
Проверьте «Интеграция аутентификации и авторизации Amazon Cognito с помощью веб -и мобильных приложений» для вызова операций API API пользователями, аутентифицированными с Amazon Cognito.
Это разрешения можно настроить здесь: код роли IAM
✅ Frontend: одностраничное приложение ReactJS (SPA), созданное с помощью системы проектирования Cloudscape.
Это приложение состоит из 4 демонстраций:
Все демонстрации имеют общее использование Bedrockruntimeclient или Bedrockagentruntimeclient, чтобы вызвать услуги по роде или коренным спине для разговорного взаимодействия. BedrockagentClient также используется для перечисления текущих баз знаний Bedrock, развернутых в одной и той же учетной записи.
import { BedrockAgentClient } from "@aws-sdk/client-bedrock-agent"
import { BedrockAgentRuntimeClient } from "@aws-sdk/client-bedrock-agent-runtime"Amazon Bedrock-это полностью управляемый сервис, который предлагает выбор высокопроизводительных моделей фундамента (FMS), а также широкий набор возможностей, необходимых для создания и масштабирования генеративных приложений искусственного интеллекта.
Чтобы вызвать FM, вам необходимо указать регион, потоковые ответы и учетные данные API из аутентификации пула пользователей. Для аргументов моделей вы указываете модель для образца до 1000 токенов и для более творческой и свободы генерации используйте температуру 1. Мы делаем это с функцией getModel llmlib.js
export const getModel = async ( modelId = "anthropic.claude-instant-v1" ) => {
const session = await fetchAuthSession ( ) ; //Amplify helper to fetch current logged in user
let region = session . identityId . split ( ":" ) [ 0 ] //
const model = new Bedrock ( {
model : modelId , // model-id you can try others if you want
region : region , // 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 ;
} ; Чтобы выбрать модель, сначала вы перечислите модели Amazon Bedrock Foundation, используя ListFoundationModels на функции getFMs (llmlib.js). Каждый FM имеет свой собственный способ вызывания модели, и этот блог фокусируется только на мультимодальных моделях антропного.
export const getFMs = async ( ) => {
const session = await fetchAuthSession ( )
let region = session . identityId . split ( ":" ) [ 0 ]
const client = new BedrockClient ( { region : region , credentials : session . credentials } )
const input = { byProvider : "Anthropic" , byOutputModality : "TEXT" , byInferenceType : "ON_DEMAND" }
const command = new ListFoundationModelsCommand ( input )
const response = await client . send ( command )
return response . modelSummaries
}Этот код позволяет вам выбирать между Antropic Claude 3 Sonnet или Haiku.
Мы проведем вас через каждую демонстрационную группу, чтобы подчеркнуть их различия.
Invokemodelwithresponsestream используется для вызова модели Amazon Bedrock для выполнения вывода с использованием параметров приглашения и вывода, представленных в корпусе запроса.
const session = await fetchAuthSession ( )
let region = session . identityId . split ( ":" ) [ 0 ]
const client = new BedrockRuntimeClient ( { region : region , credentials : session . credentials } )
const input = {
body : JSON . stringify ( body ) ,
contentType : "application/json" ,
accept : "application/json" ,
modelId : modelId
}
const command = new InvokeModelWithResponseStreamCommand ( input )
const response = await client . send ( command ) В предыдущем блоге мы ссылались на два подхода к вызову модели - один сфокусирован на простом задании вопросов и получении ответов, а другой - для полных разговоров с моделью. С антропным Клодом 3 разговор обрабатывается API сообщений: messages=[{"role": "user", "content": content}] .
Каждое входное сообщение должно быть объектом с role (пользователем или помощником) и контентом. content может быть в одной строке или в массиве блоков содержимого, каждый блок имеет свой собственный type (текст или изображение).
type равный text : {"role": "user", "content": [{"type": "text", "text": "Hello, Claude"}]}
type равного image : {"role": "user", "content": [
{
"type": "image",
"source": {
"type": "base64",
"media_type": "image/jpeg",
"data": "/9j/4AAQSkZJRg...",
}
},
{"type": "text", "text": "What is in this image?"}
]}
Это пример тела:
content = [
{"type": "image", "source": {"type": "base64",
"media_type": "image/jpeg", "data": content_image}},
{"type":"text","text":text}
]
body = {
"system": "You are an AI Assistant, always reply in the original user text language.",
"messages":content,"anthropic_version": anthropic_version,"max_tokens":max_tokens}
️ Антропический в настоящее время поддерживает тип источника Base64 для изображений, а также Image/JPEG, Image/PNG, Image/GIF и типы носителей Image/Webp. Вы можете увидеть преобразование изображений в Base64 для этого приложения в функции
buildContentof MessageHelpers.js. Смотрите больше входных примеров.
API сообщений позволяет нам добавлять контекст или инструкции в модель через системную подсказку (System).
Используя подсказку системы, мы можем назначить FM конкретную роль или предоставить ей предыдущие инструкции, прежде чем кормить вход. Чтобы позволить FM взять на себя несколько ролей, мы создали компонент React, который позволяет вам генерировать системную подсказку, хранить его в таблице DynamoDB Amazon, а затем выбирайте его, когда вы хотите назначить эту конкретную роль FM.
Все операции API для управления подсказками обрабатываются конечной точкой API APS APSSINC GraphQL. AWS Appsync позволяет создавать и управлять API GraphQL, которые обеспечивают гибкий и эффективный способ извлечения и манипулирования данными из нескольких источников через одну конечную точку. (Учебник AWS Appsync: DynamoDB Resollvers)
Давайте рассмотрим пример подсказки, когда мы сообщим FM, что он является экспертом в JavaScript:
В следующем GIF модель предоставляет код и подробное объяснение, как эксперт.
В этой демонстрации вы зададите вопросы о базах знаний для Amazon Bedrock, используя преимущества извлечения дополненного поколения (RAG). У вас должна быть создана хотя бы одна база знаний, сделайте это, следуя Руководству по базе знаний.
Вопросы для баз знаний для Amazon Bedrock будут заданы двумя способами:
- Amazon Bedrock retrieve => llm:
Перечислите базы знаний с ListKnowledgeBasesCommand следующим образом:
import { ListKnowledgeBasesCommand } from "@aws-sdk/client-bedrock-agent"
export const getBedrockKnowledgeBases = async ( ) => {
const session = await fetchAuthSession ( )
let region = session . identityId . split ( ":" ) [ 0 ]
const client = new BedrockAgentClient ( { region : region , credentials : session . credentials } )
const command = new ListKnowledgeBasesCommand ( { } )
const response = await client . send ( command )
return response . knowledgeBaseSummaries
}Класс AmaonknowledgeBaserEriever Langchain создает ретривер, объект, способный получить документы, аналогичные запросу из базы знаний (в данном случае является базой знаний от Bedrock)
import { AmazonKnowledgeBaseRetriever } from "@langchain/community/retrievers/amazon_knowledge_base" ;
export const getBedrockKnowledgeBaseRetriever = async ( knowledgeBaseId ) => {
const session = await fetchAuthSession ( ) ;
let region = session . identityId . split ( ":" ) [ 0 ]
const retriever = new AmazonKnowledgeBaseRetriever ( {
topK : 10 , // return top 10 documents
knowledgeBaseId : knowledgeBaseId ,
region : region ,
clientOptions : { credentials : session . credentials }
} )
return retriever
}CongratchationalRetrievalqachain создается с ретривером и памятью. Он заботится о памяти, запрашивает ретривер и сформулирует ответ (с документами), используя экземпляр 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
} 
Код Bedrockkbretrieve.jsx
- Amazon Bedrock Retive & Generate:
Здесь вы будете использовать полный сервис AWS Managed Rag. Нет необходимости в дополнительных пакетах (Langchain) или увеличении сложности с подсказками. Вы будете использовать только один вызов API в Bedrockagentruntimeclient . Также память управляется службой с помощью SessionID .
Bedrock инициализируется с помощью Bedrockagentruntimeclient и с помощью запросов retieveanderateCommand база знаний, а модель фундамента генерирует ответы на основе полученных результатов. В этой демонстрации Лангхейн не нужен.
import { BedrockAgentRuntimeClient , RetrieveAndGenerateCommand } from "@aws-sdk/client-bedrock-agent-runtime"
export const ragBedrockKnowledgeBase = async ( sessionId , knowledgeBaseId , query , modelId = "anthropic.claude-instant-v1" ) => {
const session = await fetchAuthSession ( )
let region = session . identityId . split ( ":" ) [ 0 ]
const client = new BedrockAgentRuntimeClient ( { region : region , 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: ${ region } ::foundation-model/ ${ modelId } ` , // 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
} 
Код BedrockkbandGenerate.jsx
Агент Amazon Bedrock-это программный компонент, который использует модели искусственного интеллекта, предоставленные службой Amazon Bedrock для предоставления функциональных возможностей, связанных с пользователем, таких как чат-боты, виртуальные помощники или инструменты генерации текста. Эти агенты могут быть настроены и адаптированы к конкретным потребностям каждого приложения, предоставляя пользовательский интерфейс для конечных пользователей для взаимодействия с базовыми возможностями ИИ. Агенты Bendrock обрабатывают интеграцию с языковыми моделями, обрабатывают пользовательские входы, генерируя ответы и потенциально другие действия, основанные на выводе моделей AI.
Чтобы интегрировать агенты Amazon Bendrock в это приложение, вы должны создать его, следуйте шагам Создайте агента в Amazon Bendrock
В Amazon Bedrock вы можете создать новую версию своего агента, создав псевдоним, который указывает на новую версию по умолчанию, псевдоним перечислены в Distaragentiasescommand (llmlib.js):
import { BedrockAgentClient , ListAgentAliasesCommand } from "@aws-sdk/client-bedrock-agent" ;
const client = new BedrockAgentRuntimeClient ( { region : region , credentials : session . credentials } )
export const getBedrockAgentAliases = async ( client , agent ) => {
const agentCommand = new ListAgentAliasesCommand ( { agentId : agent . agentId } )
const response = await client . send ( agentCommand )
return response . agentAliasSummaries
}Чтобы отправить подсказку для агента для обработки и ответа использования InvokeagentCommand
import { BedrockAgentRuntimeClient , InvokeAgentCommand } from "@aws-sdk/client-bedrock-agent-runtime" ;
export const invokeBedrockAgent = async ( sessionId , agentId , agentAlias , query ) => {
const session = await fetchAuthSession ( )
let region = session . identityId . split ( ":" ) [ 0 ]
const client = new BedrockAgentRuntimeClient ( { region : region , credentials : session . credentials } )
const input = {
sessionId : sessionId ,
agentId : agentId ,
agentAliasId : agentAlias ,
inputText : query
}
console . log ( input )
const command = new InvokeAgentCommand ( input )
const response = await client . send ( command , )
console . log ( "response:" , response )
let completion = ""
let decoder = new TextDecoder ( "utf-8" )
for await ( const chunk of response . completion ) {
console . log ( "chunk:" , chunk )
const text = decoder . decode ( chunk . chunk . bytes )
completion += text
console . log ( text )
}
return completion
}В агенте этого первого GIF создайте билет для технической поддержки:
Во втором GIF пользователь спрашивает агента о статусе билета:
Приложение построено с AWS Amplify. Чтобы развернуть его в своей учетной записи:
https://github.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/forks
Создайте новую филиал: dev-branch .
Затем выполните шаги в начале работы с существующим руководством по коду.
На шаге 1 Добавьте ветвь хранилища , выберите основную ветвь и подключите монорепо? Выберите папку и введите reactjs-gen-ai-apps в качестве корневого каталога.
building-a-gen-ai-gen-ai-personal-assistant-reactjs-apps(this app) в качестве названия приложения, в Enviroment Select Создайте новое окружение и написать dev 
Если нет существующей роли, создайте новую для Amplify.
Развернуть ваше приложение.
Как только приложение будет развернуто, перейдите по ссылке в приложении, которая находится под белой коробкой.
Когда вы вводите ссылку, появится пение в окне, поэтому вы должны создать пользователя пользователя Amazon Cognito Pool.
В приложении перейдите в среды бэкэнд и нажмите на аутентификацию.
Затем, под аутентификацией, нажмите «Просмотр в Cognito :
В пуле пользователей нажмите на имя своего пользовательского пула и создайте пользователя .
Создайте своего пользователя, а затем пойте.
ПРИМЕЧАНИЕ. Вы можете создать пользователя непосредственно из приложения, изменив False
hideSignUp: falsein app.jsx, но это может представить недостаток безопасности, предоставив любому доступу к нему.
Прежде чем вы сможете использовать модель фундамента в Amazon Bendrock, вы должны запросить к ней доступ. Следуйте руководству Add Model Access.
Перейдите по ссылке приложения и войдите в систему с созданным пользователем.
В этом посте мы продемонстрировали, как вы можете создать веб -приложение React, которое напрямую обращается к API Amazon Bedrock с использованием Amazon Cognito для безопасной аутентификации. Используя управляемые услуги AWS, такие как Cognito и IAM, вы можете плавно интегрировать мощные генеративные возможности ИИ в свои приложения JavaScript без необходимости кода бэкэнд.
Этот подход позволяет разработчикам сосредоточиться на создании увлекательного разговорного опыта, используя преимущества управляемого сервиса знаний Amazon Bedrock. Потоковые ответы улучшают пользовательский опыт за счет сокращения времени ожидания и обеспечивая более естественное взаимодействие с разговорным ИИ.
Кроме того, мы показали, как вы можете назначить несколько ролей модели фундамента, используя системные подсказки, хранящиеся в таблице Amazon DynamoDB. Этот централизованный репозиторий обеспечивает гибкость и универсальность, что позволяет эффективно извлекать и назначать различные роли модели на основе вашего конкретного варианта использования.
Следуя шагам, описанным в этом посте, вы можете разблокировать потенциал генеративного ИИ в ваших приложениях React. Независимо от того, создаете ли вы новое приложение с нуля или улучшаете существующее, Amazon Bedrock и AWS JavaScript SDK облегчают, чем когда-либо, чтобы включить передовые возможности ИИ.
Мы призываем вас изучить образцы и ресурсы кода, чтобы начать создавать собственные генеративные приложения ИИ. Если у вас есть какие -либо вопросы или отзывы, оставьте комментарий ниже. Счастливого кодирования!
Смотрите Anploying для получения дополнительной информации.
Эта библиотека лицензирована по лицензии MIT-0. Смотрите файл лицензии.
