AWS Bedrock을 사용하여 Angular 애플리케이션에 GenAI 추가-JS 튜토리얼-php.cn

AWS Bedrock을 사용하여 Angular 애플리케이션에 GenAI 추가

PHPz

풀어 주다： 2024-08-09 02:32:22

원래의

828명이 탐색했습니다.

Adding GenAI to Angular Application Using AWS Bedrock

웹 애플리케이션에 AI를 통합하는 것이 점점 더 보편화되고 있습니다. AWS Bedrock은 생성적 AI 애플리케이션 구축을 위한 기반 모델(FM)에 액세스하고 활용할 수 있는 강력한 플랫폼을 제공합니다. 이 문서에서는 AWS Bedrock을 사용하여 AI 기능을 Angular 애플리케이션에 통합하는 방법을 안내합니다.

전제조건

Angular 및 TypeScript에 대한 기본 이해
필요한 권한이 있는 AWS 계정.
Node.js 및 npm(또는 Yarn)이 설치되었습니다.
Angular 프로젝트 설정

단계별 가이드

이 기사에서는 AWS Bedrock을 사용하여 AI 기능을 Angular 애플리케이션에 통합하는 방법을 안내합니다.

1. AWS 기반암 설정

AWS 계정 생성: 계정이 없다면 AWS 계정을 생성하세요.
IAM 역할 설정: AWS Bedrock 및 기타 필수 서비스에 액세스하는 데 필요한 권한이 있는 IAM 역할을 생성합니다.
기반 모델 선택: AWS Bedrock은 다양한 공급자의 다양한 기반 모델을 제공합니다. 귀하의 애플리케이션 요구 사항에 가장 적합한 모델을 선택하세요.

2. AWS Lambda 함수 생성

새 Lambda 함수 생성: AWS Management Console 또는 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 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;
      });
  }
}

로그인 후 복사