Bedrock AgentCore: React-də Canlı Süni İntellekt Brauzer Agentini Yerləşdirin

Qeyri-şəffaf "qara qutular" kimi fəaliyyət göstərən süni intellekt agentləri dövrü sürətlə sona çatır. Süni intellekt getdikcə daha mürəkkəb və avtonom vəzifələri, xüsusilə veb mühitlərdə öz üzərinə götürdükcə, şəffaflıq, etimad və istifadəçi nəzarətinə olan tələbat heç vaxt bu qədər yüksək olmamışdı. İstifadəçilər süni intellekt agentinin onların adından gördüyü hərəkətləri anlamalı və yoxlamalıdırlar, xüsusilə də bu hərəkətlər vebsaytlarda naviqasiya, həssas məlumatlarla qarşılıqlı əlaqə və ya kritik iş axınlarının icrası ilə əlaqədar olduqda.

Bu əsas problemi həll edərək, Amazon Web Services güclü bir həll təqdim edir: Amazon Bedrock AgentCore BrowserLiveView komponenti. Bu innovativ alət inkişaf etdiricilərə süni intellekt agentinin brauzer sessiyasının canlı, real-vaxt video axınını birbaşa React tətbiqlərinə yerləşdirməyə imkan verir. Bu inteqrasiya nəinki agent davranışını aydınlaşdırır, həm də istifadəçilərə görünməmiş görünürlük və həlledici bir nəzarət hissi təmin edir.

Bedrock AgentCore TypeScript SDK hissəsi olan BrowserLiveView komponenti, bir neçə sətir JavaScript XML (JSX) ilə canlı brauzer axınlarının tətbiqinizə inteqrasiyasını sadələşdirir. Yüksək performanslı Amazon DCV protokolundan istifadə edərək, o, agentin sessiyasını göstərir, ənənəvi olaraq gizli bir prosesi vizual olaraq yoxlanıla bilən bir təcrübəyə çevirir. Bu məqalə sizi sessiyanı başlamaqdan və Canlı Görünüş URL-ini yaratmaqdan, axını React tətbiqinizdə göstərməkdən və nəhayət, istifadəçiləriniz izləyərkən brauzeri idarə etmək üçün bir süni intellekt agentini birləşdirməyə qədər olan prosesdə bələdçilik edəcək.

BrowserLiveView ilə Süni İntellekt Agentinin Şəffaflığını Artırmaq

Bu gün sürətlə inkişaf edən Agent Süni İntellekti mühitində, veb brauzer vəzifələrini süni intellekt agentlərinə həvalə etmək böyük səmərəlilik qazancları vəd edir. Bununla belə, bu vəd tez-tez agentin etibarlılığı, dəqiqliyi və təhlükəsizliyi ilə bağlı narahatlıqlarla müşayiət olunur. Agentin əməliyyatlarına aydın bir pəncərə olmadan, istifadəçilər müşahidə edə bilmədikləri bir sistemə güvənmək məcburiyyətində qalırlar ki, bu da qəbulu əngəlləyə və həssas ssenarilərdə tətbiqi məhdudlaşdıra bilər.

BrowserLiveView komponenti süni intellekt agentinin "gözlərini" istifadəçiyə açaraq bu çətinliyin birbaşa öhdəsindən gəlir. Təsəvvür edin ki, bir süni intellekt agenti mürəkkəb bir onlayn formanı doldurmaq və ya bir neçə vebsaytdan müəyyən məlumatları əldə etmək tapşırığı ilə vəzifələndirilib. Ənənəvi olaraq, istifadəçi yalnız son nəticəni və ya hərəkətlərin xülasəsini alırdı, bu da onların ara addımlar haqqında düşünməsinə səbəb olurdu. Daxil edilmiş Canlı Görünüşlə istifadəçilər agentin hər bir naviqasiyasını, forma təqdimatını və axtarış sorğusunu real vaxt rejimində izləyə bilərlər.

Bu dərhal vizual təsdiq əvəzsizdir. O, istifadəçiləri agentin doğru səhifədə olduğuna, düzgün elementlərlə qarşılıqlı əlaqədə olduğuna və iş axını boyunca gözlənilən kimi irəlilədiyinə əmin edir. Bu real-vaxt rəy dövrü sadə mətn təsdiqlərindən daha çoxdur; o, agentin davranışı barədə real, yoxlanıla bilən bir audit izi təmin edir, daha çox inam və etibar yaradır. Tənzimlənən və ya həssas müştəri məlumatlarını əhatə edən iş axınları üçün bu vizual sübut uyğunluq və hesabatlılıq üçün kritik ola bilər. Bundan əlavə, insan nəzarəti tələb edən ssenarilərdə, bir nəzarətçi agentin tətbiq daxilindəki hərəkətlərini birbaşa müşahidə edə, lazım gəldikdə müdaxilə edə bilər, axını pozmadan.

Real-vaxt Agent Müşahidəsinin Arxasındakı Memarlıq

Amazon Bedrock AgentCore tərəfindən dəstəklənən React tətbiqində canlı süni intellekt brauzer agentinin problemsiz inteqrasiyası üç əsas komponentdən ibarət mürəkkəb, lakin səmərəli bir memarlıq vasitəsilə təşkil edilir. Bu hissələr arasındakı qarşılıqlı əlaqəni anlamaq uğurlu tətbiq və yayım üçün həlledicidir.

Qarşılıqlı əlaqə React tətbiqinizi işləyən istifadəçinin veb brauzeri ilə başlayır. Bu tətbiq daxilində BrowserLiveView komponenti təhlükəsiz, vaxt məhdudiyyətli SigV4-öncədən imzalanmış URL-i gözləyərək təqdim olunur. Tətbiq serveriniz tərəfindən yaradılan bu URL, AWS Buludunda Bedrock AgentCore xidmətinə birbaşa davamlı WebSocket bağlantısı qurmaq üçün açardır.

Tətbiq serverinizin ikiqat məqsədi var: o, süni intellekt agentinin məntiqini ehtiva edir və sessiya idarəçiliyi üçün vasitəçi rolunu oynayır. O, brauzer sessiyalarını başlamaq üçün Amazon Bedrock AgentCore API-ni çağırır və sonra müştəri brauzerinizə Canlı Görünüş axınına giriş icazəsi verən SigV4-öncədən imzalanmış URL-ləri təhlükəsiz şəkildə yaradır. Əsas odur ki, serveriniz agentin hərəkətlərini təşkil etsə və lazımi etimadnamələri yaratsa da, video axını birbaşa idarə etmir.

Brauzer avtomatlaşdırması və video axınının əsas işi AWS Buludunda baş verir. Amazon Bedrock AgentCore təcrid olunmuş bulud brauzer sessiyalarına ev sahibliyi edir, həm avtomatlaşdırma son nöqtəsini (süni intellekt agentiniz Playwright Chrome DevTools Protokolu (CDP) istifadə edərək qarşılıqlı əlaqə qurur), həm də Amazon DCV tərəfindən dəstəklənən Canlı Görünüş axını son nöqtəsini təmin edir. Bu dizayn DCV Canlı Görünüş axınının birbaşa Amazon Bedrock AgentCore-dan istifadəçinin brauzerinə axmasını təmin edir. Bu birbaşa WebSocket bağlantısı tətbiq serverinizi yan keçir, gecikməni minimuma endirir, infrastruktur xərclərinizi azaldır və hamar, real-vaxt baxış təcrübəsi təmin edir.

Canlı Süni İntellekt Agentinizi Yerləşdirmək üçün İlkin Şərtlər

Canlı süni intellekt brauzer agentinizin tətbiqinə başlamazdan əvvəl, inkişaf mühitinizin düzgün qurulduğundan və lazımi AWS resursları və icazələrinə malik olduğunuzdan əmin olmaq vacibdir. Bu ilkin şərtlərə əməl etmək inkişaf prosesinizi asanlaşdıracaq və təhlükəsiz əməliyyat mövqeyini qorumağa kömək edəcək.

1. Node.js Mühiti: Tətbiqinizin server tərəfi komponentlərini işlətmək üçün sisteminizdə Node.js-nin 20 və ya daha yeni versiyası quraşdırılmalıdır.
2. AWS Hesabı və Bölgəsi: Amazon Bedrock AgentCore-un mövcud olduğu dəstəklənən AWS Bölgəsinə girişə malik aktiv bir AWS hesabı tələb olunur.
3. AWS Etimadnamələri və İcazələri: AWS etimadnamələrinizdə lazımi Amazon Bedrock AgentCore Brauzer icazələri olmalıdır. AWS Kimlik və Giriş İdarəçiliyi (IAM) icazələrini konfiqurasiya edərkən ən az imtiyaz prinsipini izləmək vacibdir. Artırılmış təhlükəsizlik üçün həmişə AWS IAM Identity Center və ya AWS Security Token Service (AWS STS)-dən əldə edilmiş müvəqqəti etimadnamələrdən istifadə edin, uzunmüddətli giriş açarlarından çəkinin.
4. Süni İntellekt Modelinə Giriş: Əgər agenti idarə etmək üçün süni intellekt modelindən istifadə etməyi planlaşdırırsınızsa (nümunədə göstərildiyi kimi, Anthropic Claude ilə Amazon Bedrock Converse API-dən istifadə edən), bu xüsusi modelə və hər hansı əlaqəli AWS Bedrock icazələrinə girişiniz olmalıdır. Bununla belə, unutmayın ki, Canlı Görünüş özü modeldən asılı deyil, bu da sizə istədiyiniz hər hansı model təminatçısını və ya agent çərçivəsini inteqrasiya etməyə imkan verir.
5. SDK Quraşdırmaları:
   • AgentCore ilə qarşılıqlı əlaqə üçün bedrock-agentcore TypeScript SDK-nı quraşdırın:

     npm install bedrock-agentcore
     

   • Əgər süni intellekt modeliniz üçün AWS Bedrock istifadə edirsinizsə, JavaScript üçün AWS SDK-nı quraşdırın:

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

Canlı Görünüşü tətbiq etmək üçün kod bazası adətən bölünür: server tərəfi kodu (sessiya idarəçiliyi və süni intellekt agent məntiqi üçün) Node.js-də işləyir və müştəri tərəfi kodu (Canlı Görünüşü göstərmək üçün) React tətbiqində, tez-tez Vite kimi alətlərlə birləşdirilmiş şəkildə işləyir.

Addım-Addım İnteqrasiya: Sessiyadan Axına

Canlı süni intellekt brauzer agentinin Amazon Bedrock AgentCore ilə inteqrasiyası aydın, üç addımlı bir prosesi əhatə edir, server tərəfi məntiqinizi müştəri tərəfi React tətbiqiniz və AWS Buludunun güclü imkanları ilə birləşdirir.

1. Brauzer Sessiyasını Başlamaq və Canlı Görünüş URL-ini Yaratmaq

İlk addım tətbiq serverinizdə baş verir. Burada backend məntiqiniz Amazon Bedrock AgentCore daxilində bir brauzer sessiyası başladır və canlı görünüşü yayımlamaq üçün lazımi URL-i təhlükəsiz şəkildə əldə edir.

Siz bedrock-agentcore SDK-dan Browser sinfindən istifadə edəcəksiniz. Bu sinif buludda təcrid olunmuş brauzer mühitlərini yaratmaq və idarə etmək mürəkkəbliyini həll edir. Bu addımdan əldə olunan əsas nəticə, brauzer sessiyasının canlı video axınına təhlükəsiz, müvəqqəti giriş imkanı verən SigV4-öncədən imzalanmış URL-dir.

// Nümunə server tərəfi kodu (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Bedrock AgentCore müştərisini başlatın (düzgün AWS etimadnamələrinin konfiqurasiya edildiyindən əmin olun)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // İstədiyiniz bölgəni istifadə edin

async function startLiveSession() {
    // Yeni bir brauzer sessiyası yaradın
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Canlı Görünüş URL-ini yaradın
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Daha sonra süni intellekt agentinizi qoşmaq və ya sessiyanı sonlandırmaq üçün browser.sessionId-ni yadda saxlayın
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Bu `liveViewUrl` React müştərinizə göndəriləcək.

Bu URL daha sonra React frontendinizə ötürülür və o, canlı axını qurmaq üçün istifadə edəcəkdir.

2. React Tətbiqinizdə Canlı Görünüşü Təqdim Etmək

React tətbiqiniz serverinizdən liveViewUrl aldıqdan sonra, BrowserLiveView komponenti sayəsində real-vaxt axınının təqdimatı olduqca sadədir.

// Nümunə müştəri tərəfi kodu (React komponenti)
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>Canlı Görünüş URL-i gözlənilir...</p>;
    }

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

// Əsas App komponentinizdə və ya səhifənizdə:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Backendinizdən liveViewUrl-i əldə edin
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>Süni İntellekt Agentinin Canlı Görünüşü</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Yalnız url={liveViewUrl} ilə BrowserLiveView komponenti WebSocket bağlantısının qurulması, DCV axınının istehlak edilməsi və canlı video axınının müəyyən etdiyiniz ölçülər daxilində təqdim edilməsi kimi mürəkkəb detalları idarə edir. Bu minimal JSX inteqrasiyası frontend inkişafını xeyli sadələşdirir, sizə canlı agent ətrafındakı istifadəçi təcrübəsinə fokuslanmağa imkan verir.

3. Brauzeri İdarə etmək üçün Süni İntellekt Agentini Birləşdirmək

Son addım, süni intellekt agentinizin zəkasını təcrid olunmuş sessiya daxilindəki real brauzer hərəkətlərinə bağlayır. BrowserLiveView vizual rəy təmin etsə də, süni intellekt agentiniz brauzerlə proqramlaşdırma yolu ilə qarşılıqlı əlaqə qurmaq üçün Playwright CDP (Chrome DevTools Protokolu) istifadə edir.

Süni intellekt agentinizi də ehtiva edən tətbiq serveriniz, brauzer hərəkətlərini icra etmək üçün Browser obyektinin page xüsusiyyətindən (bu, Playwright Page obyektidir) istifadə edəcək.

// Nümunə server tərəfi kodu (addım 1-dən davam)
// Playwright-a bənzər bir interfeysiniz və ya birbaşa Playwright istifadəniz olduğunu fərz edərək
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (brauzer yaratmaq üçün əvvəlki quraşdırma) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Mövcud sessiyaya yenidən qoşulun
    await browser.connect(); // Brauzer sessiyasına qoşulun

    const page = browser.page; // Playwright Page obyektini əldə edin

    // Nümunə süni intellekt agent məntiqi (illüstrasiya üçün sadələşdirilib)
    // Burada LLM-nizlə inteqrasiya edərsiniz (məsələn, Bedrock Converse API vasitəsilə Anthropic Claude)
    // istifadəçi sorğuları və səhifə məzmununa əsasən hərəkətləri müəyyənləşdirmək üçün.
    console.log("Agent example.com-a naviqasiya edir...");
    await page.goto('https://www.example.com');
    console.log("Agent 3 saniyə gözlədi...");
    await page.waitForTimeout(3000); // İşləmə müddətini simulyasiya edin

    console.log("Agent axtarış qutusuna yazır (fərziyyə)...");
    // Nümunə: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Nümunə: await page.click('#search-button');

    const content = await page.content();
    // 'məzmunu' təhlil etmək və növbəti addımları müəyyənləşdirmək üçün bir LLM istifadə edin
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // və ya seçdiyiniz model
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Bu veb səhifə məzmununu təhlil edin və növbəti hərəkəti təklif edin: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("Süni İntellekt Modelinin təklif etdiyi hərəkət:", parsedBody.content[0].text);

    // LLM-in təklifinə əsasən, əlavə səhifə hərəkətlərini icra edin...

    // İş bitdikdə brauzer sessiyasını bağlamağı unutmayın
    // await browser.close();
}

// Sessiyanı başladıb URL-i aldıqdan sonra driveAgent(sessionId)-i çağırırdınız

Süni intellekt agentinizin səhifə məzmununu təhlil etdiyi, növbəti hərəkəti müəyyənləşdirdiyi və onu Playwright CDP vasitəsilə icra etdiyi bu qarşılıqlı əlaqə dövrü avtonom brauzer agentinin əsasını təşkil edir. Bütün bu hərəkətlər BrowserLiveView komponenti vasitəsilə istifadəçinin ekranında real vaxt rejimində vizual olaraq təqdim olunur.

Yerləşdirilmiş Süni İntellekt Agentləri ilə Yeni İmkanlar Açmaq

Amazon Bedrock AgentCore-un BrowserLiveView komponentinin inteqrasiyası sadəcə texniki bir xüsusiyyətdən daha çoxdur; bu, istifadəçilərin süni intellekt agentləri ilə necə qarşılıqlı əlaqə qurduğu və onlara etibar etdiyi bir paradiqma dəyişikliyidir. Real-vaxt vizual rəy yerləşdirməklə, inkişaf etdiricilər nəinki səmərəli, həm də şəffaf, yoxlanıla bilən və istifadəçi dostu süni intellekt tərəfindən dəstəklənən tətbiqlər yarada bilərlər.

Bu imkan xüsusilə aşağıdakıları əhatə edən tətbiqlər üçün transformativdir:

• Mürəkkəb İş Axınları: Məlumat girişi, işə qəbul və ya tənzimləmə uyğunluğu kimi çoxaddımlı onlayn proseslərin avtomatlaşdırılması, burada hər bir addımın görünürlüyü əsas əhəmiyyət kəsb edir.
• Müştəri Dəstəyi: Agentlərə süni intellekt köməkçi pilotlarının müştəri sorğularını həll etməsini və ya sistemlərdə naviqasiya etməsini müşahidə etməyə imkan verir, dəqiqliyi təmin edir və müdaxilə imkanları yaradır.
• Təlim və Hata Ayıklama: İnkişaf etdiricilərə və son istifadəçilərə agent davranışını anlamaq, problemləri aradan qaldırmaq və birbaşa müşahidə vasitəsilə agentləri öyrətmək üçün güclü bir alət təqdim edir.
• Təkmilləşdirilmiş Audit İzləri: Agent hərəkətlərinin vizual qeydlərini yaratmaq, bu da hərtərəfli sonrakı nəzərdən keçirmə və uyğunluq üçün Amazon S3-ə sessiya qeydləri ilə birləşdirilə bilər.

Brauzer sessiyalarını birbaşa AWS Buludundan müştəri brauzerlərinə yayımlamaq, video axını üçün tətbiq serverini keçmək, performans və miqyaslana bilənlik baxımından əhəmiyyətli üstünlüklər təqdim edir. Bu memarlıq gecikməni minimuma endirir və backend infrastrukturunuzun yükünü azaldır, sizə yüksək həssas və miqyaslana bilən süni intellekt agent həlləri yerləşdirməyə imkan verir.

BrowserLiveView qəbul etməklə, siz sadəcə süni intellekt agentləri qurmur; siz etibar, nəzarət və daha zəngin bir istifadəçi təcrübəsi qurursunuz. İmkanları araşdırın və istifadəçilərinizi mürəkkəb veb vəzifələrini ağıllı agentlərə həvalə etmək üçün inamla gücləndirin.