DEVOCEAN

Flutter, Fast API 에서 LLM API 를 활용하는 법을 연재글로 작성해보려고 합니다.

제가 해당 API를 활용한 이유는 해외 상품에 대한 한국어로 된 설명을 보거나 한국어 상품을 외국어로 보기 위해서 입니다.

실제로 해당 API를 적용하여 U-delas 라는 이름으로 IOS 와 Android 에서 배포를 해둔 상태입니다

현재는 Open AI (GhatGPT)의 gpt-3.5-trubo 모델을 사용하고 있습니다.

어떻게 보면 조금 늦기도 했지만 실제로 적용해본 모델이라 관련된

샘플 어플리케이션 코드 공유와 openai, bard api, kakaotrans 를 비교한 내용을 공유해 보고자 작성해 보게 되었습니다.

정리를 하다 보니 내용이 많이 길어져서 3편으로 나누고자 합니다.

1편 : 개요 및 환경설정 (email 전송 demo 코드 활용)

• open ai API Key 생성하기

• bard API Key 생성하기

• github 에서 fast-api 코드 받고 환경셋팅

• github 에서 flutter 코드 받고 환경 셋팅

2편 : Fast-API 백엔드 구현 및 결과 보기

• config 변경하기

• 스키마 만들기

• 라우터 만들기

• Swagger 로 확인하기

3편 : Flutter 프론트엔드 구현 및 결과 보기

• gpt test screen 만들기

• gpt_controller 만들기

• app bar 및 drawer 메뉴 만들기

• 총평

“아래는 앞으로 공유할 예제 코드를 응용하여 openai , kakaoTrans를 활용해서 배포한 어플리케이션의 한 화면 입니다”

이번 블로그에서 이야기 할 내용은 아래와 같습니다.

1편 : 개요 및 환경설정 (email 전송 demo 코드 활용)

• Bard API Key 생성하기

• Open ai API Key 생성하기 (유료)

• Github 에서 fast-api 코드 받고 환경셋팅

• Github 에서 flutter 코드 받고 환경셋팅

kakaotrans의 경우는 python 패키지로 제공합니다. 그래서 API KEY는 Bard 와 openAI만 각각 설정하겠습니다.

openAI 의 경우는 유료이기 때문에, 과금을 피하고자 하시는 분들은 그냥 보기만 하셔도 됩니다

Bard API Key 획득하기

• Bard의 경우에는 브라우저에서 세션 정보를 통해 api key를 획득 할 수 있습니다.

• bardapi key : 크롬 → 개발자도구 → application → session 또는 cookie → __Secure-1PSID

• API 키의 마지막이 XXXX. 으로 마침표가 마지막에 들어갑니다. (BardAPI 참조하기 )

• 무료 API KEY를 잘 저장해 둡니다

Open AI API키 생성하기

• 해당 경우에는 빌링정보를 먼저 만들어야 되고, 만들면 5달러가 결제가 됩니다. API는 pricing 모델에 따라서 과금이 됩니다.

• Open AI 접속 > 로그인 > 빌링정보 등록

https://platform.openai.com/account/billing/payment-methods

• Usage Limits 등록 (매월 기준)

• API키 발급하기

이제 Fast-API 프로젝트를 셋팅해 보겠습니다.

• 저는 IDE는 Pycharm 또는 VS Code 를 주로 사용합니다.

• python 버전은 3.9 이상으로 셋팅해 주세요

• github에서 이메일 보내기 예제 프로젝트를 clone 해 옵니다.

• https://github.com/BTSQL/demo-fast-api

git clone <https://github.com/BTSQL/demo-fast-api.git>

• pip로 파이썬 패키지를 설치합니다

pip install -r ./requirements.txt 
# 또는 requirements.txt 없거나, 에러발생시 
pip install requests uvicorn fastapi pydantic[email] kakaotrans

• project root 디렉토리에서 .config_secret/setting_local.json 파일을 생성을 합니다. 각자 개인설정이므로 github에는 코드를 공유해 두지 않았습니다.

{
  "email_api_key" : "{여기에는 email api key를 입력하세요}",
  "openai_header" : {
        "Content-Type" : "application/json",
        "Authorization": "Bearer {여기에는 openai api 키를 입력합니다}"
    },
  "bard_api_key" : "{여기에는 bard api 키를 입력합니다}"
}

예시 
{
  "email_api_key" : "XAPEkdiekdi1234",
  "openai_header" : {
        "Content-Type" : "application/json",
        "Authorization": "Bearer skdltmqowjdghWkddlqslek."
    },
  "bard_api_key" : "qkemqkemQkem!!"
}

• 실행하고 Swagger 로 확인해 봅니다.

uvicorn main:app --reload --port 9004

http://localhost:9004/docs 접속하여 아래와 같이 나온다면 fast-api 환경 셋팅은 완료 입니다.

Flutter 셋팅하기

• Flutter는 처음 설치하시면 https://docs.flutter.dev/get-started/install 가이드를 따라서 설치하시면 됩니다. (윈도우11 설치 예시 https://www.youtube.com/watch?v=dqFDwpb4e-Y )

• Flutter 3.0.2 로 최초 개발되었으나 현재 최신버전 3.10.2 버전에서도 잘 동작합니다.

• Github에서 소스코드를 clone 합니다

• https://github.com/BTSQL/flutter-demo

git clone https://github.com/BTSQL/flutter-demo.git

• pub get 실행합니다

# flutter put get 또는 pubspec.yaml 파일을 재저장합니다. 
# Resolving dependencies... 는 일단 skip 하고 넘어가도 됩니다. 
devocean_flutter> flutter pub get 

• 애뮬레이터에서 동작을 테스트해 봅니다

• 아래와 같이 예전 화면이 보이면 되었습니다. 이제 다음 편에서 Fast-API 코드를 작성해 보겠습니다.