使用 AWS Bedrock 将 GenAI 添加到 Angular 应用程序-js教程-PHP中文网

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

PHPz

发布： 2024-08-09 02:32:22

原创

839 人浏览过

Adding GenAI to Angular Application Using AWS Bedrock

将人工智能集成到 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;
      });
  }
}

登录后复制