오늘은 개인 프로젝트 중 chatGTP api를 이용하여 Data를 받아왔던 방법에 대해 적어보려고 한다.
이번 포스팅은 chatGPT key값을 받아오는 과정은 생략하고, 받아온 key값을 사용하여 flutter app에서 데이터를 받아오는 방법만 기록하려고 한다.
먼저 flutter에서 api를 받아오는 방식을 공부했던 것은 "노마드 코더"이다.
해당 인터넷 강의에서 http 패키지를 이용하는 방법을 배웠고, 이를 이 프로젝트에 응용해서 데이터를 받아오는 연습을 진행했다.
http 패키지 import
먼저 http 패키지를 pub.dev에서 설치 한 뒤 import 해준다.
dart pub add http
or
flutter pub add http
or
dependencies:
http: ^1.0.0
//import
import 'package:http/http.dart as http';data 받아오기
그 다음 data를 받아오는 작업을 해야한다.
코드는 아래와 같이 작성했고, url는 "chat gpt api reference"에서 참고했다 (하단 참고 URL)
class QueController extends GetxController {
final String baseUrl = 'URL';
//authorization 값 대용
final String apiKey = 'KEY';
//Future<String> => 해당 함수가 완료가 되었을 때 string 타입을 반환할 것이라고 알려주는 것
Future<String> getGPTData() async {
final url = Uri.parse(baseUrl);
final response = await http.post(
url,
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer $apiKey',
},
body: jsonEncode({
"model": "gpt-3.5-turbo", // GPT-3.5-Turbo는 OpenAI의 언어 모델 중 하나로, 대화 생성과 같은 작업에 사용됩니다. 이 모델은 대화 생성에 특히 뛰어나며, 다양한 주제에 대한 응답을 생성하는 데 사용될 수 있습니다.
"messages": [
{"role": "user", "content": "tell me about cat"}//"role"은 메시지의 역할을 나타내며, "user"는 사용자 메시지를 의미합니다. "content"는 메시지의 내용을 나타냅니다.
],
"temperature": 0.7 //높은 온도(temperature) 값은 더 무작위하고 창의적인 응답을 생성할 가능성이 높으며, 낮은 온도 값은 더 일관된 및 예상 가능한 응답을 생성할 가능성이 높습니다.
}),
);
if (response.statusCode == 200) {
final Map<String, dynamic> chatGPT = jsonDecode(response.body);
String content = chatGPT['choices'][0]['message']['content'];
print(content);
return;
}
throw Error();
}
}getx 패턴을 사용하고 있어서 controller에 작업을 진행했다.
코드를 작성하면서 데이터 요청을 보내는 것부터 받아오는 것까지의 큰 흐름은 react와 크게 다르지 않아서 어렵지 않았는데, decode와 encode를 하는 부분에서 많이 헤맸던 것 같다.
디코딩(decode)은 responce.body값을 flutter 가 사용할 수 있는 객체로 변환시켜주는 과정을 거치는 것이고, 인코딩(encode)는 dart 객체를 json 형태로 변환시켜주는 것이다.
React의 json.parse, json.stringfy 와 비슷한 역할을 한다고 생각하니 이해가 더 잘 되었다.
코드를 구현하고 받아온 response.body 값을 key와 value가 있는 Map에 담아준 뒤 콘솔에 찍어보니 gpt에서 받아온 값들이 아래와 같이 잘 나온다!
이 중에서 우리가 필요한 정보는 choices에 message에 content 정보기 때문에 content라는 변수에 해당 정보를 담아줬고 출력해보았다.
질문을 바꿔도 잘 출력된다!
대답하는 문장이 길어질수록 토큰의 수가 많아지고, 해당 토큰에 따라 돈이 나가는 구조인 것 같았다ㅎㅎ
프론트엔드 개발에서의 필수,,api를 연결해서 데이터를 받아오는 경험을 해보고 나니 이제야 조금 플러터를 경험한 것 같은 느낌이 든다.
이제 받아온 값을 view에 출력하는 작업도 곧 포스팅해야겠다.
참고
https://jschan0911.tistory.com/87
https://platform.openai.com/docs/api-reference/completions/create
