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

4분 분량

콘텐츠 수준: 중급

본 기사에서는 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함수와 매핑합니다. !