Bedrock AgentCore: جاسازی عامل مرورگر زنده هوش مصنوعی در React

دوران عامل‌های هوش مصنوعی که به عنوان "جعبه‌های سیاه" مبهم عمل می‌کنند، به سرعت رو به پایان است. با توجه به اینکه هوش مصنوعی وظایف increasingly پیچیده و خودکار را بر عهده می‌گیرد، به ویژه در محیط‌های وب، تقاضا برای شفافیت، اعتماد و کنترل کاربر هرگز به این اندازه بالا نبوده است. کاربران باید اقدامات یک عامل هوش مصنوعی را که به نمایندگی از آنها انجام می‌دهد، درک کرده و تأیید کنند، به خصوص زمانی که آن اقدامات شامل ناوبری وب‌سایت‌ها، تعامل با داده‌های حساس یا اجرای گردش کارهای حیاتی باشد.

برای مقابله با این چالش اساسی، Amazon Web Services یک راه‌حل قدرتمند معرفی می‌کند: کامپوننت BrowserLiveView از Amazon Bedrock AgentCore. این ابزار نوآورانه به توسعه‌دهندگان امکان می‌دهد تا یک فید ویدیویی زنده و بلادرنگ از جلسه مرورگر یک عامل هوش مصنوعی را مستقیماً در برنامه‌های React خود جاسازی کنند. این یکپارچه‌سازی نه تنها رفتار عامل را از ابهام خارج می‌کند، بلکه دید بی‌سابقه‌ای و حس کنترل حیاتی را برای کاربران فراهم می‌آورد.

کامپوننت BrowserLiveView که بخشی از Bedrock AgentCore TypeScript SDK است، یکپارچه‌سازی جریان‌های مرورگر زنده را با تنها چند خط JavaScript XML (JSX) در برنامه شما ساده می‌کند. این کامپوننت با استفاده از پروتکل پرقدرت Amazon DCV، جلسه عامل را رندر می‌کند و به طور مؤثر یک فرآیند سنتی پنهان را به یک تجربه بصری قابل تأیید تبدیل می‌کند. این مقاله شما را در این فرآیند، از شروع یک جلسه و تولید URL نمایش زنده، تا رندر کردن جریان در برنامه React شما، و در نهایت، اتصال یک عامل هوش مصنوعی برای هدایت مرورگر در حین تماشای کاربران، راهنمایی خواهد کرد.

افزایش شفافیت عامل هوش مصنوعی با BrowserLiveView

در چشم‌انداز به سرعت در حال تکامل هوش مصنوعی عاملی امروزی، توانایی واگذاری وظایف مرور وب به عامل‌های هوش مصنوعی نوید افزایش کارایی عظیمی را می‌دهد. با این حال، این وعده اغلب با نگرانی‌هایی در مورد قابلیت اطمینان، دقت و امنیت عامل همراه است. بدون یک پنجره روشن به عملیات یک عامل، کاربران مجبورند به سیستمی اعتماد کنند که نمی‌توانند آن را مشاهده کنند، که می‌تواند مانع پذیرش و محدودیت استقرار در سناریوهای حساس شود.

کامپوننت BrowserLiveView مستقیماً با باز کردن "چشمان" عامل هوش مصنوعی به روی کاربر، با این چالش مقابله می‌کند. یک عامل هوش مصنوعی را تصور کنید که وظیفه پر کردن یک فرم آنلاین پیچیده یا بازیابی اطلاعات خاص از چندین وب‌سایت را بر عهده دارد. به طور سنتی، کاربر تنها یک خروجی نهایی یا خلاصه‌ای از اقدامات را دریافت می‌کرد و در مورد مراحل میانی سؤالاتی برایش باقی می‌ماند. با یک نمایش زنده جاسازی شده، کاربران می‌توانند هر ناوبری، ارسال فرم و جستجو را در زمان واقعی که عامل آن را انجام می‌دهد، دنبال کنند.

این تأیید بصری فوری بی‌ارزش است. به کاربران اطمینان می‌دهد که عامل در صفحه صحیح قرار دارد، با عناصر درست تعامل می‌کند و طبق برنامه‌ریزی در گردش کار پیش می‌رود. این حلقه بازخورد بلادرنگ فراتر از صرف تأییدهای متنی است؛ یک مسیر حسابرسی قابل لمس و قابل تأیید از رفتار عامل را فراهم می‌کند و اعتماد بیشتری را به وجود می‌آورد. برای گردش کارهایی که تحت نظارت هستند یا شامل داده‌های حساس مشتری می‌شوند، این شواهد بصری می‌تواند برای انطباق و پاسخگویی حیاتی باشد. علاوه بر این، در سناریوهایی که نیاز به نظارت انسانی دارند، یک ناظر می‌تواند مستقیماً اقدامات عامل را در داخل برنامه مشاهده کند و در صورت لزوم، بدون ایجاد اختلال در جریان کار، مداخله کند.

معماری پشت مشاهده عامل بلادرنگ

یکپارچه‌سازی بی‌نقص یک عامل مرورگر هوش مصنوعی زنده در یک برنامه React که توسط Amazon Bedrock AgentCore پشتیبانی می‌شود، از طریق یک معماری پیچیده و در عین حال کارآمد متشکل از سه مؤلفه کلیدی سازماندهی می‌شود. درک تعامل بین این بخش‌ها برای پیاده‌سازی و استقرار موفقیت‌آمیز حیاتی است.

این تعامل با مرورگر وب کاربر آغاز می‌شود که برنامه React شما را اجرا می‌کند. در داخل این برنامه، کامپوننت BrowserLiveView رندر می‌شود و منتظر یک URL از پیش امضا شده SigV4 ایمن و زمان‌دار است. این URL، که توسط سرور برنامه شما تولید می‌شود، کلید برقراری یک اتصال WebSocket پایدار مستقیماً به سرویس Bedrock AgentCore در ابر AWS است.

سرور برنامه شما دو هدف را دنبال می‌کند: منطق عامل هوش مصنوعی را میزبانی می‌کند و به عنوان واسطه‌ای برای مدیریت جلسه عمل می‌کند. با API Amazon Bedrock AgentCore تماس می‌گیرد تا جلسات مرورگر را آغاز کند و سپس به طور ایمن URLهای از پیش امضا شده SigV4 را تولید می‌کند که به مرورگر کلاینت شما اجازه دسترسی به جریان نمایش زنده را می‌دهد. نکته مهم این است که در حالی که سرور شما اقدامات عامل را هماهنگ می‌کند و اعتبارنامه‌های لازم را تولید می‌کند، به طور مستقیم جریان ویدیو را مدیریت نمی‌کند.

عملیات سنگین اتوماسیون مرورگر و پخش ویدیو در ابر AWS انجام می‌شود. Amazon Bedrock AgentCore جلسات مرورگر ابری ایزوله شده را میزبانی می‌کند و هم نقطه پایانی اتوماسیون — که عامل هوش مصنوعی شما با استفاده از پروتکل ابزارهای توسعه Chrome (CDP) Playwright با آن تعامل دارد — و هم نقطه پایانی پخش نمایش زنده، که توسط Amazon DCV پشتیبانی می‌شود، را فراهم می‌کند. این طراحی تضمین می‌کند که جریان نمایش زنده DCV مستقیماً از Amazon Bedrock AgentCore به مرورگر کاربر سرازیر می‌شود. این اتصال مستقیم WebSocket، سرور برنامه شما را دور می‌زند، تأخیر را به حداقل می‌رساند، سربار زیرساخت شما را کاهش می‌دهد و تجربه مشاهده روان و بلادرنگ را تضمین می‌کند.

پیش‌نیازهای استقرار عامل هوش مصنوعی زنده شما

پیش از ورود به پیاده‌سازی عامل مرورگر هوش مصنوعی زنده خود، اطمینان از پیکربندی صحیح محیط توسعه و داشتن منابع و مجوزهای AWS ضروری است. رعایت این پیش‌نیازها فرآیند توسعه شما را ساده می‌کند و به حفظ وضعیت عملیاتی امن کمک می‌کند.

1. محیط Node.js: برای اجرای کامپوننت‌های سمت سرور برنامه خود، به Node.js نسخه 20 یا بالاتر نیاز دارید که روی سیستم شما نصب شده باشد.
2. حساب و منطقه AWS: یک حساب فعال AWS با دسترسی به منطقه AWS پشتیبانی شده که Amazon Bedrock AgentCore در آن در دسترس است، لازم است.
3. اعتبارنامه‌ها و مجوزهای AWS: اعتبارنامه‌های AWS شما باید دارای مجوزهای مرورگر Amazon Bedrock AgentCore باشند. رعایت اصل کمترین امتیاز هنگام پیکربندی مجوزهای AWS Identity and Access Management (IAM) حیاتی است. برای افزایش امنیت، همیشه از اعتبارنامه‌های موقت که از AWS IAM Identity Center یا AWS Security Token Service (AWS STS) به دست می‌آید، استفاده کنید و از کلیدهای دسترسی طولانی‌مدت خودداری کنید.
4. دسترسی به مدل هوش مصنوعی: اگر قصد دارید از یک مدل هوش مصنوعی برای هدایت عامل استفاده کنید (همانطور که در مثال نشان داده شده است، که از Amazon Bedrock Converse API با Anthropic Claude استفاده می‌کند)، به آن مدل خاص و هر مجوز Bedrock AWS مرتبط نیاز خواهید داشت. با این حال، به خاطر داشته باشید که خود نمایش زنده مستقل از مدل است و به شما امکان می‌دهد هر ارائه‌دهنده مدل یا چارچوب عاملی را به انتخاب خود ادغام کنید.
5. نصب SDK ها:
   • SDK TypeScript bedrock-agentcore را برای تعامل با AgentCore نصب کنید:

     npm install bedrock-agentcore
     

   • اگر از AWS Bedrock برای مدل هوش مصنوعی خود استفاده می‌کنید، AWS SDK برای JavaScript را نصب کنید:

     npm install @aws-sdk/client-bedrock-runtime
     

کد پایه برای پیاده‌سازی نمایش زنده معمولاً به دو بخش تقسیم می‌شود: کد سمت سرور (برای مدیریت جلسه و منطق عامل هوش مصنوعی) در Node.js اجرا می‌شود، و کد سمت کلاینت (برای رندر نمایش زنده) در یک برنامه React اجرا می‌شود که اغلب با ابزارهایی مانند Vite باندل می‌شود.

یکپارچه‌سازی گام به گام: از جلسه تا جریان

یکپارچه‌سازی یک عامل مرورگر هوش مصنوعی زنده با Amazon Bedrock AgentCore شامل یک فرآیند واضح و سه مرحله‌ای است که منطق سمت سرور شما را با برنامه React سمت کلاینت شما و قابلیت‌های قدرتمند ابر AWS پیوند می‌دهد.

1. شروع یک جلسه مرورگر و تولید URL نمایش زنده

مرحله اول در سرور برنامه شما اتفاق می‌افتد. اینجاست که منطق بک‌اند شما یک جلسه مرورگر را در Amazon Bedrock AgentCore آغاز می‌کند و به طور ایمن URL لازم را برای پخش جریان نمایش زنده به دست می‌آورد.

شما از کلاس Browser از SDK bedrock-agentcore استفاده خواهید کرد. این کلاس پیچیدگی ایجاد و مدیریت محیط‌های مرورگر ایزوله شده در ابر را مدیریت می‌کند. خروجی کلیدی این مرحله، یک URL از پیش امضا شده SigV4 است که دسترسی ایمن و موقت به جریان ویدیویی زنده جلسه مرورگر را می‌دهد.

// Example server-side code (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Initialize Bedrock AgentCore client (ensure proper AWS credentials are configured)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // از منطقه مورد نظر خود استفاده کنید

async function startLiveSession() {
    // یک جلسه مرورگر جدید ایجاد کنید
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // URL نمایش زنده را تولید کنید
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // browser.sessionId را ذخیره کنید تا بعداً عامل هوش مصنوعی خود را متصل یا جلسه را خاتمه دهید
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// این `liveViewUrl` به کلاینت React شما ارسال خواهد شد.

این URL سپس به فرانت‌اند React شما ارسال می‌شود که از آن برای برقراری جریان زنده استفاده خواهد کرد.

2. رندر نمایش زنده در برنامه React شما

هنگامی که برنامه React شما liveViewUrl را از سرور شما دریافت می‌کند، رندر کردن جریان بلادرنگ به لطف کامپوننت BrowserLiveView به طرز چشمگیری ساده است.

// Example client-side code (React component)
import React, { useEffect, useState } from 'react';
import { BrowserLiveView } from 'bedrock-agentcore';

interface LiveAgentViewerProps {
    liveViewUrl: string;
}

const LiveAgentViewer: React.FC<LiveAgentViewerProps> = ({ liveViewUrl }) => {
    if (!liveViewUrl) {
        return <p>منتظر URL نمایش زنده...</p>;
    }

    return (
        <div style={{ width: '100%', height: '600px', border: '1px solid #ccc' }}>
            <BrowserLiveView url={liveViewUrl} />
        </div>
    );
};

// In your main App component or page:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Fetch the liveViewUrl from your backend
//         // liveViewUrl را از بک‌اند خود دریافت کنید
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>نمایش زنده عامل هوش مصنوعی</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

تنها با url={liveViewUrl}، کامپوننت BrowserLiveView جزئیات پیچیده برقراری اتصال WebSocket، مصرف جریان DCV و رندر فید ویدیویی زنده را در ابعاد مشخص شده شما مدیریت می‌کند. این یکپارچه‌سازی حداقلی JSX، توسعه فرانت‌اند را تا حد زیادی ساده می‌کند و به شما امکان می‌دهد بر تجربه کاربری پیرامون عامل زنده تمرکز کنید.

3. اتصال یک عامل هوش مصنوعی برای هدایت مرورگر

مرحله نهایی، هوش عامل هوش مصنوعی شما را به اقدامات واقعی مرورگر در جلسه ایزوله شده متصل می‌کند. در حالی که BrowserLiveView بازخورد بصری را ارائه می‌دهد، عامل هوش مصنوعی شما از Playwright CDP (پروتکل ابزارهای توسعه Chrome) برای تعامل برنامه‌نویسی با مرورگر استفاده می‌کند.

سرور برنامه شما، که عامل هوش مصنوعی شما را نیز میزبانی می‌کند، از ویژگی page آبجکت Browser (که یک آبجکت Page Playwright است) برای اجرای اقدامات مرورگر استفاده خواهد کرد.

// Example server-side code (continued from step 1)
// فرض بر این است که شما یک رابط شبیه Playwright یا استفاده مستقیم از Playwright دارید
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (previous setup for browser creation) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // به جلسه موجود دوباره متصل شوید
    await browser.connect(); // به جلسه مرورگر متصل شوید

    const page = browser.page; // آبجکت Playwright Page را دریافت کنید

    // مثال منطق عامل هوش مصنوعی (برای توضیح ساده شده است)
    // در اینجا شما با LLM خود (مثلاً Anthropic Claude از طریق Bedrock Converse API) یکپارچه می‌شوید
    // تا اقدامات را بر اساس درخواست‌های کاربر و محتوای صفحه تعیین کنید.
    console.log("Agent navigating to example.com..."); // عامل در حال ناوبری به example.com...
    await page.goto('https://www.example.com');
    console.log("Agent waited for 3 seconds..."); // عامل 3 ثانیه صبر کرد...
    await page.waitForTimeout(3000); // شبیه‌سازی زمان پردازش

    console.log("Agent typing into a search box (hypothetical)..."); // عامل در حال تایپ در کادر جستجو (فرضی)...
    // Example: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Example: await page.click('#search-button');

    const content = await page.content();
    // Use an LLM to analyze 'content' and decide next steps
    // از یک LLM برای تجزیه و تحلیل 'content' و تصمیم‌گیری در مورد مراحل بعدی استفاده کنید
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // یا مدل ترجیحی شما
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `این محتوای وب‌پیج را تحلیل کرده و اقدام بعدی را پیشنهاد دهید: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("AI Model suggested action:", parsedBody.content[0].text); // اقدام پیشنهادی مدل هوش مصنوعی:

    // Based on LLM's suggestion, execute further page actions...
    // بر اساس پیشنهاد LLM، اقدامات صفحه بعدی را اجرا کنید...

    // Don't forget to close the browser session when done
    // فراموش نکنید که پس از اتمام کار، جلسه مرورگر را ببندید
    // await browser.close();
}

// After starting the session and getting the URL, you would then call driveAgent(sessionId)
// پس از شروع جلسه و دریافت URL، باید driveAgent(sessionId) را فراخوانی کنید

این حلقه تعامل – که در آن عامل هوش مصنوعی شما محتوای صفحه را تجزیه و تحلیل می‌کند، اقدام بعدی را تعیین می‌کند و آن را از طریق Playwright CDP اجرا می‌کند – هسته یک عامل مرورگر مستقل را تشکیل می‌دهد. تمام این اقدامات به صورت بصری و بلادرنگ از طریق کامپوننت BrowserLiveView روی صفحه نمایش کاربر رندر می‌شوند.

گشودن امکانات جدید با عامل‌های هوش مصنوعی جاسازی شده

یکپارچه‌سازی BrowserLiveView از Amazon Bedrock AgentCore چیزی فراتر از یک ویژگی فنی است؛ این یک تغییر پارادایم در نحوه تعامل کاربران با عامل‌های هوش مصنوعی و اعتماد به آن‌ها است. با جاسازی بازخورد بصری بلادرنگ، توسعه‌دهندگان می‌توانند برنامه‌های مبتنی بر هوش مصنوعی ایجاد کنند که نه تنها کارآمد، بلکه شفاف، قابل حسابرسی و کاربرپسند باشند.

این قابلیت به ویژه برای برنامه‌هایی که شامل موارد زیر هستند، متحول‌کننده است:

• گردش کارهای پیچیده: خودکارسازی فرآیندهای آنلاین چند مرحله‌ای مانند ورود داده، پذیرش کاربر جدید (onboarding) یا انطباق با مقررات، که در آن‌ها دید به هر مرحله بسیار حیاتی است.
• پشتیبانی مشتری: اجازه دادن به عامل‌ها برای مشاهده کمک‌خلبان‌های هوش مصنوعی که درخواست‌های مشتری را حل می‌کنند یا در سیستم‌ها ناوبری می‌کنند، اطمینان از دقت و فراهم آوردن فرصت‌هایی برای مداخله.
• آموزش و اشکال‌زدایی: ارائه ابزاری قدرتمند به توسعه‌دهندگان و کاربران نهایی برای درک رفتار عامل، اشکال‌زدایی مشکلات و آموزش عامل‌ها از طریق مشاهده مستقیم.
• مسیرهای حسابرسی پیشرفته: ایجاد سوابق بصری از اقدامات عامل، که می‌تواند با ضبط‌های جلسه در Amazon S3 برای بررسی جامع پس از وقوع و انطباق ترکیب شود.

توانایی پخش مستقیم جلسات مرورگر از ابر AWS به مرورگرهای کلاینت، با دور زدن سرور برنامه برای جریان ویدیو، مزایای قابل توجهی را از نظر عملکرد و مقیاس‌پذیری ارائه می‌دهد. این معماری تأخیر را به حداقل می‌رساند و بار را بر زیرساخت بک‌اند شما کاهش می‌دهد، و به شما امکان می‌دهد راه‌حل‌های عامل هوش مصنوعی بسیار پاسخگو و مقیاس‌پذیر را پیاده‌سازی کنید.

با اتخاذ BrowserLiveView، شما فقط عامل‌های هوش مصنوعی نمی‌سازید؛ شما در حال ساخت اعتماد، کنترل و یک تجربه کاربری غنی‌تر هستید. امکانات را کاوش کنید و کاربران خود را با اطمینان خاطر برای واگذاری وظایف پیچیده وب به عامل‌های هوشمند توانمند سازید.