使用 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 账户。
• 设置 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 regionexports.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

登录后复制

• inject 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 });
  }
}
</string>

登录后复制

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 应用程序的详细内容，更多请关注叮当号网其它相关文章！