أصبح دمج الذكاء الاصطناعي في تطبيقات الويب منتشرًا بشكل متزايد. توفر AWS Bedrock منصة قوية للوصول إلى النماذج الأساسية (FMs) والاستفادة منها لبناء تطبيقات الذكاء الاصطناعي المنتجة. سترشدك هذه المقالة عبر دمج إمكانيات الذكاء الاصطناعي في تطبيق Angular الخاص بك باستخدام AWS Bedrock.

المتطلبات الأساسية

• الفهم الأساسي لـ Angular وTypeScript.
• حساب AWS بالأذونات اللازمة.
• تم تثبيت Node.js و npm (أو الغزل).
• تم إعداد مشروع Angular.

دليل خطوة بخطوة

سترشدك هذه المقالة إلى كيفية دمج إمكانات الذكاء الاصطناعي في تطبيق Angular الخاص بك باستخدام AWS Bedrock.

1. إعداد AWS Bedrock

• إنشاء حساب AWS: إذا لم يكن لديك حساب، قم بإنشاء حساب AWS.
• إعداد أدوار IAM: قم بإنشاء أدوار IAM بالأذونات اللازمة للوصول إلى AWS Bedrock والخدمات الأخرى المطلوبة.
• اختيار نموذج أساسي: تقدم AWS Bedrock مجموعة متنوعة من نماذج الأساس من موفري خدمات مختلفين. حدد النموذج الذي يناسب متطلبات التطبيق الخاص بك.

2. إنشاء وظيفة AWS Lambda

• إنشاء وظيفة Lambda جديدة: استخدم وحدة الإدارة في AWS أو AWS CLI لإنشاء وظيفة Lambda جديدة.
• اختر وقت تشغيل Node.js: حدد Node.js باعتباره وقت التشغيل لوظيفتك.
• اكتب رمز وظيفة Lambda: سيتفاعل هذا الرمز مع AWS Bedrock API لإرسال المطالبات وتلقي الاستجابات.

const AWS = require('aws-sdk');

const bedrockClient = new AWS.Bedrock({ region: 'us-east-1' }); // Replace with your region

exports.handler = async (event) => {
  const prompt = event.prompt;

  const params = {
    modelId: 'YOUR_MODEL_ID', // Replace with your model ID
    inputText: prompt
  };

  try {
    const response = await bedrockClient.generateText(params).promise();
    return response.text;
  } catch (error) {
    console.error(error);
    throw error;
  }
};

• تكوين الوظيفة: قم بتعيين دور IAM المناسب ومتغيرات البيئة.

3. إنشاء خدمة زاوية

إنشاء خدمة Angular جديدة: استخدم Angular CLI لإنشاء خدمة جديدة للتعامل مع التفاعلات مع وظيفة Lambda.

ng generate service bedrock

• Inject HttpClient: قم بإدخال HttpClient لإجراء طلبات HTTP إلى وظيفة Lambda.
• إنشاء طريقة لاستدعاء وظيفة Lambda: سترسل هذه الطريقة المطالبة إلى وظيفة Lambda وتعيد الاستجابة.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class BedrockService {
  constructor(private http: HttpClient) {}

  generateText(prompt: string) {
    return this.http.post('https://your-lambda-function-endpoint', { prompt });
  }
}

4. دمج الذكاء الاصطناعي في المكون الزاوي الخاص بك

• استيراد خدمة Bedrock: قم باستيراد خدمة Bedrock إلى المكون الخاص بك.
• إنشاء نموذج أو حقل إدخال: السماح للمستخدمين بإدخال النص كمطالبة.
• الاتصال بخدمة Bedrock: عندما يرسل المستخدم المطالبة، اتصل بخدمة Bedrock لإنشاء نص.
• عرض النص الذي تم إنشاؤه: اعرض النص الذي تم إنشاؤه في عرض المكون الخاص بك.

import { Component } from '@angular/core';
import { BedrockService } from './bedrock.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  prompt: string = '';
  generatedText: string = '';

  constructor(private bedrockService: BedrockService) {}

  generate() {
    this.bedrockService.generateText(this.prompt)
      .subscribe(text => {
        this.generatedText = text;
      });
  }
}

خاتمة:

باتباع هذه الخطوات، يمكنك دمج إمكانات الذكاء الاصطناعي بنجاح في تطبيق Angular الخاص بك باستخدام AWS Bedrock. يمكن أن يؤدي هذا التكامل إلى تحسين تجارب المستخدم، وأتمتة المهام، وفتح إمكانيات جديدة لتطبيقك.

ملاحظة: استبدل العناصر النائبة مثل YOUR_MODEL_ID وhttps://your-lambda-function-endpoint بالقيم الفعلية.