YD_S 개발로그
article thumbnail
Published 2023. 3. 15. 11:21
chat_gpt_sdk (ChatGPT 연동) Flutter

요즘 핫한 chat GPT를 Flutter와 연동하여 사용해보자 한다.

 

약간 뒷북인 듯 하지만 ^^

 

Chat GPT SDK package 설치

https://pub.dev/packages/chat_gpt_sdk

 

chat_gpt_sdk | Flutter Package

create chat bot and other bot with ChatGPT SDK

pub.dev

 

pubspec.yaml

 

 

Chat GPT API key 발급받기

  • Chat GPT 계정이 없을 경우 회원가입을 진행한다. 

 

https://platform.openai.com/account/api-keys

 

OpenAI API

An API for accessing new AI models developed by OpenAI

platform.openai.com

 

  • 로그인 후 위 API 발급 URL로 이동 시 아래와 같이 API keys가 나타난다.
  • 나의 경우 이미 생성한 key가 있기 때문에 리스트에 생성하였던 key가 나타난다. (생성된 key가 없는 경우 바로 key 생성 창이 나타난다.)
  • Key 생성을 하기 위해 'Create new secret key' 버튼을 클릭한다.
  • Key 생성 후 key의 전체 값이 보여주는 창이 나타난다.  

※ Key 값이 보여주는 창을 닫을 시 생성하였던 key 값을 확인할 수 있는 방법이 없으므로 key 값을 따로 메모하여 보관하자.

   (key를 확인할 수 있는 방법을 내가 모르는 것인지 아직 방법을 찾지 못하였다.)

API Keys

API 사용하기

 API 초기화

  • Chat GPT 사용을 위해 API 초기화를 시켜준다.
  • token 값은 위에서 발급한 API key를 입력해 준다. (key 노출 방지를 위해 env 사용을 권장한다.)
  • HttpSetup의 Timeout 값을 너무 짧게 설정할 경우 Timeout Error가 발생하므로 알맞게 설정하길 바란다.
  • isLogger는 API request 및 response 할 경우 Log를 나타내줄지의 여부이다.
final openAI = OpenAI.instance.build(
	token: [발급받은 API Key],
    	baseOption: HttpSetup(
			sendTimeout: const Duration(minutes: 3),
	        connectTimeout: const Duration(minutes: 3),
    	    receiveTimeout: const Duration(minutes: 3)),
  	  ),
   	 isLogger: true
 );

 

 번역 기능

  • 현시점 버전(2.0.4)에는 아직 3가지 번역 기능만을 지원한다. (앞으로 더 지원할 것으로 예상된다.)
translateEngToThai(word: '');			//영어를 태국어로 번역
translateThaiToEng(word: '');			//태국어를 영어로 번역
translateToJapanese(word: '');			//일본어로 번역

 

 Request 선언

  • prompt : Chat GPT에 request 할 문장이다. (한글로 작성 시 Response 역시 한글로 답해준다. But 한글 번역의 경우 영어보다 시간이 더 소요되는 것 같다.)
  • model : Chat GPT의 AI 모델을 지정한다. (https://platform.openai.com/docs/models/gpt-3-5모델 정보)
  • maxTokens : Token의 최댓값을 지정한다. (지정하지 않을 경우 default 값인 100으로 지정된다.)
final request = CompleteText(
	prompt: translateEngToThai(word: ''),
    model: kTranslateModelV3, 
   maxTokens: 200
);

 

 Tokens 이란?

  • request(질문)은 token이라는 단위로 나뉜다.
  • 문자의 시퀀스(Sequence of characters)이다.
  • Chat GPT는 tokens을 통해 다음 tokens이 무엇인지 예측한다.
  • 한 단어가 토큰이 되기도 하고, 긴 단어가 여러 개의 토큰으로 나뉘기도 한다.  
Tokens Characters
1 4
word

 

Tokens Characters
2 11
programming

 

 

Response 받기

  • 응답을 2가지 방식으로 받을 수 있다.

Stream으로 받기 

openAI.onCompletionStream(request:request).listen((response) => print(response))
        .onError((err) {
          print("$err");
  });

 

async/await 방식

final response = await openAI.onCompletion(request: request);

 

 

Chat GPT 3.5 Turbo

  • 최신 모델
  • 사용료가 매우 저렴(이전 모델 대비 10배 저렴, 1,000 Tokens당 $0.002)
  • Role을 부여할 수 있다. 
Role
System Assistant User
역할을 유저에게 메시지를 받기 전에 모델을 초기화 하거나 구성 이전 Chat GPT가 응답한 내용을 담아 다음 답변 시 해당 내용을 참고한다. 사용자 질문

Request 선언

  • System을 아래와 같이 지정 후 질문하면 박사 과정의 선생님이 대화하는 것처럼 모델이 설정된다.
 final request = ChatCompleteText(messages: [
    Map.of(
    	{
        	"role": "system", 
	        "content": 'You are a helpful PHD teacher talking to your students'
        },
        {
        	"role": "user", 
	        "content": 'Please explain what AI is'
        },        
     )
  ], maxToken: 200, 
  	model: kChatGptTurbo0301Model		//Chat GPT 3.5 Turbo
 );

 

  • Assistant를 사용할 경우 이전 Chat GPT가 보낸 메시지가 무엇인지 알려줘서 response값을 조정할 수 있다.
 final request = ChatCompleteText(messages: [
    Map.of(
	    {
        	"role": "user", 
	        "content": 'Who owns Tesla?'
        },
    	{
        	"role": "assistant", 
	        "content": 'Elon Musk owns Tesla'
        },
        {
        	"role": "user", 
	        "content": 'How much did he pay for it?'
        },        
     )
  ], maxToken: 200, 
  	model: kChatGptTurbo0301Model		//Chat GPT 3.5 Turbo
 );

 

Response 받기

  • Chat GPT 3.5 Turbo에서 response 받을 때 사용하는 함수명은 다른 모델로 사용할 때와 다르다.
  • Response Tokens이 많은 경우 응답 시간이 다소 소요된다.

 

Stream 방식

openAI.onChatCompletion(request:request).listen((response) => print(response))
        .onError((err) {
          print("$err");
  });

 

async/await 방식

 final response = await openAI.onChatCompletion(request: request);

실행 영상

Image Generater

  • 사용자가 입력한 내용을 분석하여 이미지를 생성해주는 기능이다.
  • 이미지 생성 시간이 소요된다.

Request 선언

  • prompt : 최대 1,000자 내 요청할 이미지 문장
  • n : 생성할 이미지 수 , 1 ~ 10 사이의 수여야만 한다.
  • size : 이미지 해상도를 지정한다, 256x256, 512x512, 1024x1024 중 하나여야 한다. (default : 1024x1024)
  • response_format : 응답 포맷을 지정한다. (URL or b64_json 중 택 1, defalut : URL)
  • user : openAI가 남용을 모니터링하고 감지하는데 도움이 될 수 있는 최종 사용자를 나타내는 고유 식별자 (defalut : "")
const prompt = "cat and dog";

final request = GenerateImage(prompt,2);

Response 받기

Stream 방식

openAI.generateImageStream(request)
              .asBroadcastStream()
              .listen((it) {
                print(it.data?.last?.url)
});

Stream 요청 취소 하기

openAI.genImgClose();

 

변수에 담기

 final response = openAI.generateImage(request);
 print("img url :${response.data?.last?.url}");

실행 영상


번외 Package Error

개발할 당시 package 버전이 2.0.2였다. 

 

해당 버전으로 진행하니 종종 pacakge 내에서 오류가 발생하였고 github에 issue를 등록하였다.

Issue 등록

  • 가끔식 response 값을 받는 과정에서 에러 발생
  • 다른 값은 정상적으로 받아지나 'finish_reason'의 값이 null로 넘어와 Json을 decoding 할 경우 에러 발생
  • 해당 내용을 설명과 함께 캡처 후 issue 등록하였다.

 

Issue close

  • issue 등록 후 약 2시간 만에 답변을 받았다.
  • 해당 내용을 이미 수정 후 업데이트를 올리지 않은 것인지 아님 내가 등록한 issue를 보고 수정된 것인지 불분명하나 다음 날 버전을 확인해 보니 2.0.2  ▷ 2.0.4로 변경되었다. (그새 2.0.3도 버전이 올라왔었나보다.)

 

나의 생각

Chat GPT를 실제로 써보니 신기하면서도 잘만 활용한다면 업무적으로 활용할 수 있는 범위가 무궁무진하다고 생각 든다. 

하지만 아직까진 정확하지 않는 답변을 하는 경우도 있고 속도도 더 개선되었으면 하는 바람이다.

 

Chat GPT 4 버전이 출시되었다고 한다. 하지만 아직 Flutter에는 적용이 안된 듯하다. 

아쉽게도 Chat GPT 4는 유료로만 운영하기에 테스트해볼 기회가 없을 것 같다.

 

점점 더 발전해가는 Chat GPT를 응원하며 추후 상용 목적으로 사용해볼 기회가 있기를 바란다.

 

 

GitHub 주소

 

GitHub - song011794/Flutter-chatGPT

Contribute to song011794/Flutter-chatGPT development by creating an account on GitHub.

github.com

 

Reference

https://youtu.be/n_8XhAD9G8g - 노마드 코더 YouTube

 

'Flutter' 카테고리의 다른 글

Material3 Design 적용하기  (0) 2023.04.26
정규식(Regex)을 쉽게 다뤄보자  (0) 2023.03.29
Kakao_flutter_sdk issues 등록기  (0) 2023.02.15
Build Options 정리  (3) 2023.02.09
iOS build 시 'pod repo update' 에러 대응  (1) 2023.01.27
profile

YD_S 개발로그

@YD_S

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!