웹 애플리케이션에 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('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와 같은 자리 표시자를 실제 값으로 바꾸세요.