將人工智慧整合到 Web 應用程式中已經變得越來越普遍。 AWS Bedrock 提供了一個強大的平台來存取和利用基礎模型 (FM) 來建立生成式 AI 應用程式。本文將指導您使用 AWS Bedrock 將 AI 功能整合到 Angular 應用程式中。

先決條件

• 對 Angular 和 TypeScript 的基本了解。
• 具有必要權限的AWS帳戶。
• 已安裝 Node.js 和 npm（或yarn）。
• Angular 計畫已建立。

逐步指南

本文將指導您使用 AWS Bedrock 將 AI 功能整合到 Angular 應用程式中。

1. 設定 AWS Bedrock

• 建立 AWS 帳戶：如果您沒有 AWS 帳戶，請建立一個 AWS 帳戶。
• 設定 IAM 角色：建立具有存取 AWS Bedrock 和其他所需服務所需權限的 IAM 角色。
• 選擇基礎模型：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 服務：使用 Angular CLI 建立新服務來處理與 Lambda 函數的互動。

ng generate service bedrock

• 注入 HttpClient：注入 HttpClient 以向 Lambda 函數發出 HTTP 請求。
• 建立一個呼叫 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. 將 AI 整合到 Angular 元件中

• 匯入 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;
      });
  }
}

結論：

透過執行這些步驟，您可以使用 AWS Bedrock 成功將 AI 功能整合到您的 Angular 應用程式中。這種整合可以增強使用者體驗、自動化任務並為您的應用程式釋放新的可能性。

注意：將 YOUR_MODEL_ID 和 https://your-lambda-function-endpoint 等佔位符替換為實際值。