building reactjs gen ai apps with amazon bedrock javascript sdk
1.0.0
تمت كتابة هذا المقال في Colaboration Enrique Rodriguez
استعد للشروع في رحلة مثيرة حيث نجمع بين قوة الأساس الأمازون و ReactJS و AWS JavaScript SDK لإنشاء تطبيق AI التوليدي مع الحد الأدنى من رمز التكامل.
يمثل دمج الذكاء الاصطناعي في التطبيقات الحالية تحديات. يتمتع العديد من المطورين بخبرة محدودة في نماذج التدريب على الأسس ، ولكن الهدف من ذلك هو دمج قدرات الذكاء الاصطناعي التوليدي مع الحد الأدنى من التغييرات في الكود.
لحل هذا ، أنشأنا تطبيقًا يدمج قوة الذكاء الاصطناعى التوليدي مع مكالمة إلى Amazon Bedrock API من تطبيق الويب الذي تم تصميمه مع JavaScript و React Framework. مع عدم وجود برامج وسيطة ، خفض الحاجز لدمج توليد الذكاء الاصطناعى من خلال الحد الأدنى من تكامل الكود.
خلال هذا البرنامج التعليمي ، ستتعلم كيفية استخدام بيانات اعتماد Amazon Cognito وأدوار IAM للوصول إلى Amazon Bedrock API بشكل آمن ضمن تطبيق ReactJS الذي تم تصميمه باستخدام نظام تصميم Cloudscape. سنرشدك خلال عملية نشر جميع الموارد اللازمة واستضافة التطبيق باستخدام AWS Amplify ، وتبسيط عملية الإعداد والنشر.
لتعزيز مرونة وتخصيص نموذج الأساس (FM) ، سنقوم بإظهار كيفية تعيين أدوار مختلفة باستخدام موجه النظام. من خلال إنشاء جدول Amazon DynamoDB ، يمكنك تخزين الأدوار المختلفة واستردادها ، وتمكينك من إدارة مطالبات النظام المتميزة والوصول إليها المرتبطة بكل دور ترغب في تعيينه إلى FM. يسمح نهج المستودع المركزي هذا بتخصيص الدور الديناميكي والاستجابات المصممة لوكالة الذكاء الاصطناعى بناءً على الدور المحدد.
في مستودع هذا التطبيق ، ستجد الكود جاهزًا لنشر الواجهة الخلفية والواجهة الأمامية.
✅ الواجهة الخلفية: تجمع مستخدمي Amazon Cognito ومجموعة الهوية ، مع هوية AWS والوصول إلى دور Managemen (دور 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 AWS من قبل المستخدمين المصادقة مع Amazon Cognito.
يمكن تخصيص هذه الأذونات هنا: رمز الدور IAM
✅ الواجهة الأمامية: A ReactJS تطبيق صفحة واحدة (SPA) مصممة مع نظام تصميم Cloudscape.
يتكون هذا التطبيق من 4 عروض تجريبية:
تشترك جميع العروض التجريبية في استخدام bedrockruntimeclient أو bedrockagentruntimeclient لاستدعاء خدمة الأساس أو bedrockagent للتفاعل المحادثة. يستخدم bedrockagentClient أيضًا لسرد المعرفة الحالية للأحوام الأساسية المنشورة في نفس الحساب.
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 ;
} ; لتحديد ModelId أولاً ، سرد نماذج Foundation Amazon Bedrock باستخدام 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.
سوف نسير لك من خلال كل مجموعة تجريبية لتسليط الضوء على اختلافاتهم.
يتم استخدام vokemodelwithresponsestream لاستدعاء نموذج الأساس Amazon لتشغيل الاستدلال باستخدام المعلمات المطالبة والاستدلال المقدمة في هيئة الطلب.
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 ، تتم معالجة المحادثة من قبل واجهة برمجة تطبيقات الرسائل: 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 للصور ، وأنواع MITURE/JPEG و IMATE/PNG و IMAGE/GIF و Image/WebP Media. يمكنك رؤية تحويل الصور إلى Base64 لهذا التطبيق في وظيفة
buildContentمن MessageHelpers.js. رؤية المزيد من أمثلة الإدخال.
تتيح لنا واجهة برمجة تطبيقات الرسائل إضافة سياق أو تعليمات إلى النموذج من خلال موجه النظام (النظام).
من خلال استخدام موجه النظام ، يمكننا تعيين FM دورًا محددًا أو تزويده بالإرشادات السابقة قبل إطعامه بالمدخلات. لتمكين FM من القيام بأدوار متعددة ، أنشأنا مكون React يتيح لك إنشاء موجه نظام ، وتخزينه في جدول Amazon DynamoDB ، ثم حدده عندما تريد تعيين هذا الدور المحدد إلى FM.
يتم التعامل مع جميع عمليات API لإدارة المطالبات بواسطة نقطة نهاية APSYNC APISQL API. يتيح لك AWS AppSync إنشاء وإدارة واجهات برمجة تطبيقات GraphQL ، والتي توفر طريقة مرنة وفعالة لجلب البيانات ومعالجتها من مصادر متعددة من خلال نقطة نهاية واحدة. (AWS AppSync Tutorial: DynamoDB Resolvers)
دعنا نراجع مثالًا لمطالبة حيث نخبر FM أنه خبير في JavaScript:
في GIF التالية ، يوفر النموذج رمزًا وشرحًا مفصلاً ، مثل الخبير.
في هذا العرض التوضيحي ، ستطرح أسئلة على قواعد المعرفة لـ Amazon Bedrock الاستفادة من الجيل المعزز للاسترجاع (RAG). يجب أن يكون لديك قاعدة معرفة واحدة على الأقل تم إنشاؤها ، قم بذلك باتباع دليل قاعدة المعرفة.
سيتم طرح أسئلة حول قواعد المعرفة لـ Amazon Bedrock بطريقتين:
- Retrieve Amazon Bedrock => 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
}تنشئ فئة AmazonKnowledgeBaserTriever Langchain مستردًا ، وهو كائن قادر على استرداد مستندات مشابهة للاستعلام من قاعدة المعرفة (في هذه الحالة هي قاعدة معرفة من الأساس)
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
}يتم إنشاء مثيل للمحادثة مع المسترد والذاكرة. يعتني بالذاكرة ، والاستعلام عن المسترد وصياغة الإجابة (مع المستندات) باستخدام مثيل 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
- استرداد وتوليد الصخور الأمازون:
هنا سوف تستخدم خدمة خرقة AWS الكاملة AWS. ليست هناك حاجة إلى حزم إضافية (langchain) أو زيادة التعقيد مع المطالبات. سوف تستخدم مكالمة API واحدة فقط إلى bedrockagentruntimeclient . كما تتم إدارة الذاكرة من خلال الخدمة باستخدام SessionId .
تتم تهيئة الأساس مع bedrockagentruntimeclient ومع استعلامات RetrieveAndGeneratecommand قاعدة المعرفة ونموذج الأساس يولد ردود بناء على النتائج التي تم استردادها. في هذا العرض التوضيحي لانجشين ليست هناك حاجة.
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 Agent هو مكون برنامج يستخدم نماذج الذكاء الاصطناعى التي توفرها Amazon Bedrock Service لتقديم وظائف تواجه المستخدم ، مثل chatbots أو المساعدين الظاهريين أو أدوات توليد النصوص. يمكن تخصيص هذه العوامل وتكييفها مع الاحتياجات المحددة لكل تطبيق ، مما يوفر واجهة مستخدم للمستخدمين النهائيين للتفاعل مع قدرات الذكاء الاصطناعي الأساسي. تتعامل عوامل الأساس المعالجة مع النماذج اللغوية ومعالجة مدخلات المستخدم وتوليد الاستجابات والإجراءات الأخرى التي يحتمل أن تكون بناءً على إخراج نماذج الذكاء الاصطناعى.
لدمج وكلاء Amazon Bedrock في هذا التطبيق ، يجب عليك إنشاء خطوات ، اتبع الخطوات إنشاء وكيل في Amazon Bedrock
في Amazon Bedrock ، يمكنك إنشاء إصدار جديد من وكيلك عن طريق إنشاء اسم مستعار يشير إلى الإصدار الجديد افتراضيًا ، يتم سرد الأسماء المستعارة مع ListagentaliasesCommand (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 تضخيم. لنشره في حسابك:
https://github.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/forks
إنشاء فرع جديد: dev-branch .
ثم اتبع الخطوات في البدء مع دليل التعليمات البرمجية الحالية.
في الخطوة 1 ، أضف فرع المستودع ، حدد الفرع الرئيسي وتوصيل monorepo؟ اختر مجلد وأدخل reactjs-gen-ai-apps كدليل جذر.
building-a-gen-ai-gen-ai-personal-assistant-reactjs-apps(this app) كاسم للتطبيق ، في Enviroment ، قم بإنشاء حسد جديد واكتب dev 
إذا لم يكن هناك دور حالي ، فقم بإنشاء دور جديد لخدمة التضخيم.
نشر التطبيق الخاص بك.
بمجرد نشر الطلب ، انتقل إلى الرابط في التطبيق ، والذي يقع تحت المربع الأبيض.
عند إدخال الرابط ، ستظهر The Sing in Window ، لذلك يجب عليك إنشاء مستخدم Amazon Cognito Pool.
في التطبيق ، انتقل إلى بيئات الواجهة الخلفية وانقر على المصادقة.
ثم ، تحت المصادقة ، انقر فوق عرض في Cognito :
في تجمع المستخدم ، انقر فوق اسم تجمع المستخدم وإنشاء المستخدم .
قم بإنشاء المستخدم الخاص بك ثم الغناء فيه.
ملاحظة: يمكنك إنشاء المستخدم مباشرة من التطبيق عن طريق تغيير
hideSignUp: falsein App.jsx ، ولكن هذا يمكن أن يقدم عيبًا أمانًا من خلال منح أي شخص الوصول إليه.
قبل أن تتمكن من استخدام طراز الأساس في Amazon Bedrock ، يجب أن تطلب الوصول إليه. اتبع الخطوة في إضافة دليل الوصول إلى النموذج.
انتقل إلى رابط التطبيق وتسجيل الدخول مع المستخدم الذي أنشأته.
في هذا المنشور ، أظهرنا كيف يمكنك إنشاء تطبيق Web React الذي يصل مباشرة إلى واجهة برمجة تطبيقات Amazon Bedrock باستخدام Amazon Cognito للمصادقة الآمنة. من خلال الاستفادة من الخدمات المدارة AWS مثل Cognito و IAM ، يمكنك دمج إمكانات AI التوليدية القوية في تطبيقات JavaScript دون الحاجة إلى رمز الخلفية.
يتيح هذا النهج للمطورين التركيز على خلق تجارب محادثة جذابة مع الاستفادة من خدمة المعرفة المدارة في Amazon Bedrock. تعزز استجابات البث تجربة المستخدم عن طريق تقليل أوقات الانتظار وتمكين المزيد من التفاعلات الطبيعية مع الذكاء الاصطناعي للمحادثة.
علاوة على ذلك ، أظهرنا كيف يمكنك تعيين أدوار متعددة لنموذج الأساس باستخدام مطالبات النظام المخزنة في جدول Amazon DynamoDB. يوفر هذا المستودع المركزي المرونة والتنوع ، مما يتيح لك استرداد وتعيين أدوار مميزة بشكل فعال بناءً على حالة الاستخدام المحددة.
باتباع الخطوات الموضحة في هذا المنشور ، يمكنك فتح إمكانات الذكاء الاصطناعي التوليدي في تطبيقات React الخاصة بك. سواء كنت تقوم ببناء تطبيق جديد من نقطة الصفر أو تعزيز تطبيق Amazon Bedrock و AWS JavaScript SDK يجعل من الأسهل من أي وقت مضى دمج إمكانيات AI المتطورة.
نحن نشجعك على استكشاف عينات الكود والموارد المقدمة للبدء في بناء تطبيقات الذكاء الاصطناعي الخاص بك. إذا كان لديك أي أسئلة أو تعليقات ، فيرجى ترك تعليق أدناه. ترميز سعيد!
انظر المساهمة لمزيد من المعلومات.
هذه المكتبة مرخصة بموجب ترخيص MIT-0. انظر ملف الترخيص.
