使用 AWS Bedrock 将 GenAI 添加到 Angular 应用程序

将人工智能集成到 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<string>('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 等占位符替换为实际值。

以上是使用 AWS Bedrock 将 GenAI 添加到 Angular 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！