插件窝干货文章使用 AWS Bedrock 将 GenAI 添加到 Angular 应用程序

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

bedrock li angular 函数 982 来源： 2024-10-22

将人工智能集成到 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) =&gt; {
  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 =&gt; {
        this.generatedText = text;
      });
  }
}

结论：

通过执行以下步骤，您可以使用 aws bedrock 成功将 ai 功能集成到您的 angular 应用程序中。这种集成可以增强用户体验、自动化任务并为您的应用程序释放新的可能性。

注意：将 your_model_id 和 https://your-lambda-function-endpoint 等占位符替换为实际值。

上一篇：Vue 和 Tailwind 管理框架

下一篇：使用 InversifyJS 在 Nodejs 中实现依赖注入