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