Open Ai) Flutter에서 Chat GPT 의 API를 사용해보자!

최근 chat gpt의 인기가 핫해지면서 chat gpt를 통한 외부 프로그램도 많이 생기고있다.
현재 내가 쓰는것만 해도 구글 검색시 오른쪽에 chat gpt의 답변을 같이 보여주는 확장프로그램, 외국어를 마우스로 드래그 하면 한국어로 번역해서 보여주는 확장프로그램을 사용하고있다.

따라서 이런 좋은 기능들을 만들 수 있게 open ai의 gpt api를 사용하는 방법을 알아보고자 한다.

 

API 키 발급 사이트

OpenAI API

우선 위 사이트에서 자신만의 api key를 발급받자, 주의해야할 점은 처음에 한번만 key를 복사해올 수 있다는 점이다.

 

위와 같은 화면을 볼 수 있다. api 키는 복사를 하고 따로 보관해준다.

그리고 무료 평가판 계정에서는 api를 정상적으로 이용할 수 없으므로
https://platform.openai.com/account/billing/overview
위 링크에서 로그인해서 free trial로 되어있다면 카드를 등록해준다.

 

OpenAI API

 

위와 같이 보이면 성공이다.

 

 

이제 플러터 프로젝트를 생성해준다.
이름은 간단하게 gpt_app 이라고 지어줬다.

프로젝트 생성 후 바로 실행하면 아래와 같은 친숙한 화면이 나타난다.

이제 간단하게 gpt를 사용할 수 있는 코드로 바꿔보자

간단한 코드는 이제 직접 짤 필요 없이 gpt에게 물어보면 알아서 짜준다.
아래는 내가 질문한 내용에 대해 chat gpt 가 대답해준것인데 저것을 일부만 바꿔서 그대로 사용해보도록 하겠다.



프롬프트: 새 텍스트를 생성할 때 시작점으로 사용할 초기 텍스트 프롬프트입니다.

최대_토큰: 출력 텍스트에 생성할 토큰(즉, 단어)의 최대 개수입니다.

온도: 생성된 텍스트의 '창의성' 또는 무작위성을 측정하는 값입니다. 온도가 높을수록 더 다양하고 예측할 수 없는 텍스트가 생성되고, 온도가 낮을수록 더 보수적이고 예측 가능한 텍스트가 생성됩니다.

n: 생성할 독립적인 완성문의 수입니다. 각 완성은 온도 매개변수에 의해 도입된 무작위성에 따라 조금씩 달라집니다.

stop: 모델이 토큰을 발견할 때 텍스트 생성을 중지하도록 하는 하나 이상의 토큰 문자열입니다. 특정 단어나 구문으로 끝나는 텍스트를 생성할 때 유용할 수 있습니다.

 

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _generatedText = "";

  Future<void> generateText() async {
    String prompt = "The quick brown fox jumps over the lazy dog";
    String model = "text-davinci-002";
    String apiKey = "<YOUR_API_KEY>";

    var response = await http.post(
      Uri.parse('https://api.openai.com/v1/engines/$model/completions'),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer $apiKey',
      },
      body: jsonEncode({
        'prompt': prompt,
        'max_tokens': 100,
        'temperature': 0.5,
        'n': 1,
        'stop': '.'
      }),
    );

    if (response.statusCode == 200) {
      var data = jsonDecode(response.body);
      setState(() {
        _generatedText = data['choices'][0]['text'];
      });
    } else {
      setState(() {
        _generatedText = "Error: ${response.reasonPhrase}";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GPT-3 Text Generation'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: generateText,
                child: Text('Generate Text'),
              ),
              SizedBox(height: 20),
              Text(_generatedText),
            ],
          ),
        ),
      ),
    );
  }
}

    body: jsonEncode({
        'prompt': prompt, // 새 텍스트를 생성할 때 시작점으로 사용할 초기 텍스트 프롬프트.
        'max_tokens': 1000, // 출력 텍스트에 생성할 토큰(즉, 단어)의 최대 개수입니다.
        'temperature': 0.5, // 생성된 텍스트의 '창의성' 또는 무작위성을 측정하는 값, 값이 높을수록 더 다양하고 예측할 수 없는 텍스트가 생성되고, 낮을수록 더 보수적이고 예측 가능한 텍스트가 생성됨
        // 'n': 1, // 생성할 독립적인 완성문의 수입니다. 각 완성문은 temperature 에 의해 도입된 무작위성에 따라 조금씩 달라짐.
        // 'stop': '.' // 모델이 토큰을 발견할 때 텍스트 생성을 중지하도록 하는 하나 이상의 토큰 문자열 특정 단어나 구문으로 끝나는 텍스트를 생성할 때 유용할 수 있습니다.
      }),

 

원하는 결과를 얻기 위해 위 body에서 문장의 수를 제한하는 'n' 파라미터와, 문장을 중간에 끊어주는 'stop' 파라미터를 주석처리 해주고 단어의 갯수를 1000으로 늘려줍니다.

 

풀 소스는 위와 같고 <YOUT_API_KEY> 부분에는 아까전에 발급받았던 키를 넣어준다.
통신을 위해 http 플러그인이 필요한듯 하니 pubspec.yaml 파일에 
http: ^0.13.5 <-- 요 플러그인을 추가해준다.

 

마지막으로 'prompt'에는 chat gpt에게 질문하는것처럼 원하는 질문을 넣어준다.
나는 '서울대 입구역 근처 맛집을 세개만 추천해줘' 라고 질문을 넣었다.

String prompt = "Please recommend only three restaurants near Seoul National University Station";

 

그리고 다시 실행하면 아래와같이 화면이 바뀐다.

이제 Generate Text 버튼을 누르면 위 질문에 대한 대답이 아래에 출력되게 된다.

 

끝! (저 맛집들은 나중에 꼭 가보는걸로 ㅎㅎ)