Amazon Bedrock과 AWS 서버리스 서비스를 이용해 생성형 AI 를 사용할 수 있는 간단한 웹을 만드는 방법

4분 분량
콘텐츠 수준: 중급
0

본 기사에서는 Amazon Bedrock 과 AWS 제공하는 다양한 서버리스 서비스를 이용하여 생성형 AI를 사용할 수 있는 웹을 만드는 방법에 대해서 알려드립니다.

사용사례

Amazon Bedrock은 AI21 Labs, Anthropic, Cohere, Meta, Stability AI 및 Amazon과 같은 선도적인 AI 회사의 다양한 고성능 파운데이션 모델(FM)을 단일 API로 제공하는 완전관리형 서비스입니다. 이 서비스를 사용하면 생성형 AI 애플리케이션을 구축할 수 있습니다. [1]

하지만 현재에는 한국어로 입력하는 경우 정확도가 떨어진 대답이 나오고 있습니다. 따라서 이 기사에서는 한국어를 입력하는 경우 영어로 번역하여 검색함으로써 더 나은 정확도를 얻을 수 있게 개발 하였습니다.

사용되는 서비스

  • Amazon Lambda
  • Amazon API Gateway
  • Amazon Translate
  • Amazon Bedrock

전제조건

  • Bedrock을 지원하는 리전인 us-east-1에서 개발을 진행하였습니다. [2]
  • 해당 가이드에서는 React 애플리케이션이 이미 있다는 가정하에 진행합니다.

단계1. React application 수정

  • axios 라이브러리 설치
npm install axios
  • APP.js
import MyComponent from "./MyComponent";

function App() {
  return (
    <div className="App">
      <MyComponent/>
    </div>
  );
}
export default App;

  • MyComponent.jsx
import React, { useState } from 'react';
import axios from 'axios';

function MyComponent() {
  const [inputValue, setInputValue] = useState('');
  const [responseData, setResponseData] = useState(null);
  const [loading,setLoading]=useState(false)

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('<API Gateway 엔드포인트>', { "prompt": inputValue });
      setResponseData(response.data);
      setLoading(true)
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <div>
    <form onSubmit={handleSubmit}>
      <label>
        <h2>검색할 내용</h2>
        <input type="text" palceholder="내용" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
      </label>
      <button type="submit">검색</button>
    </form>
    {responseData && (
        <div>
          <h3>Bedrock 응답</h3>
          {loading ? <pre>{JSON.stringify(responseData, null, 2)}</pre> : <h2>is Loading...</h2>} 
        </div>
      )}
    </div>
  );
}

export default MyComponent;

단계2. Lambda 함수에 사용할 역할 생성하기

  • IAM 페이지에서 [IAM 역할],[역할 만들기]를 클릭합니다.
  • 일반사용사례 [lambda]를 클릭한뒤 아래의 정책을 추가합니다.
    • AmazonBedrockFullAccess , TranslateFullAccess
  • 역할 세부정보에서 역할의 이름을 임의로 지정하여 IAM 역할을 생성합니다.

단계3: Lambda 함수 생성

  • [Lambda],[함수],[함수 생성] 을 클릭합니다.
  • 함수 이름에는 원하는 이름을 넣은뒤에 런타임은 최신버전의 파이썬 으로 선택합니다.
  • [기본 실행 역할 변경],[기존 역할 사용]을 클릭하여 이전에 만들어둔 IAM권한으로 설정합니다.

단계4. Lambda 코드 수정

  • 이전단계에서 만든 Lambda 함수에서 [코드]를 클릭한뒤에 편집창에서 붙여넣은뒤 저장한후 [Deploy]를 클릭하여 배포합니다. [3][4]
import json
import boto3

bedrock = boto3.client(service_name='bedrock-runtime')
translate_client = boto3.client('translate')

def translate(source,target,text):
    response = translate_client.translate_text(Text=text, SourceLanguageCode=source,
                                               TargetLanguageCode=target)
    translated_text = response['TranslatedText']
    return translated_text

def chat(prompt):
    modelId = 'ai21.j2-ultra'
    accept = 'application/json'
    contentType = 'application/json'
    body=json.dumps({'prompt': prompt, 'maxTokens': 4500, 'stopSequences': ['Human:']})
    response = bedrock.invoke_model(body=body, modelId=modelId, accept=accept,contentType=contentType)
    response_body = json.loads(response.get('body').read())
    completions = response_body['completions']
    output = ''
    for part in completions:
        output += part['data']['text']
    return output
    
def lambda_handler(event, context):
    body = json.loads(event.get('body', '{}'))
    body_prompt = body['prompt']
    output=translate("ko","en",body_prompt)
    medium=chat(output)
    translated_text=translate("en","ko",medium)
    return translated_text

단계5. API Gateway 생성

  • [API Gateway] 클릭 ,[HTTP API],[구축]을 클릭합니다.
  • 기본적인 구성에 따라 구축합니다.
  • 만들어진 API 를 클릭하고 [생성]을 클릭합니다.
  • [경로 및 메서드]에서 [POST]방식을 선택하고 원하는 이름으로 경로를 지정해줍니다.
  • 만들어진 API Gateway 메서드에서 [경로 세부 정보], [통합 연결], [통합 생성 및 연결]을 클릭하고 통합대상 [통합 유형]을 AWS Lambda 로 선택한뒤 이전에 만들어둔 Lambda함수와 매핑합니다. !

image1

단계6 : API Gateway CORS 설정

  • 만들어진 API를 클릭하고 [Develop], [CORS]에서 아래와 같이 수정합니다.
  • 참고: CORS 에러를 방지하기 위하여 아래와 같이 (*)전부 허용합니다. 테스트를 위해서 전부 허용하였습니다. 추후에는 고객님의 환경에 맞게 변경이 필요합니다. [5]

image2

테스트

  • React 터미널 에서 아래의 명령어를 통해서 Front 서버를 실행시킵니다.
npm run start
  • 한글로 검색 하고 자 하는 내용을 검색하면 아래와 같이 답변을 받을 수 있습니다.

image3

참고 자료

[1] Amazon Bedrock

https://aws.amazon.com/ko/bedrock/

[2] Amazon Bedrock, 이제 유럽(프랑크푸르트) AWS 리전에서 사용 가능

https://aws.amazon.com/ko/about-aws/whats-new/2023/10/amazon-bedrock-europe-frankfurt-aws-region/

[3] Boto3 1.34.21 documentation (Bedrock)

https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/bedrock.html

[4] Boto3 1.34.22 documentation (Translate)

https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/translate.html

[5] HTTP API에 대한 CORS 구성

https://docs.aws.amazon.com/ko_kr/apigateway/latest/developerguide/http-api-cors.html

댓글 없음