ReactNative: Expo에서 GPT에 요청-응답 받아오기

Expo에서 GPT에 요청-응답 받아오기

캡스톤디자인 프로젝트를 진행하던 중, GPT API를 사용하기 위하여 GPT에 요청을 보내고 해당 요청을 받아오는 코드를 작성하려고 하는데, 자료들이 많이 없어 애를 많이 먹었다

각종 자료를 종합하고, 확인하여 응답을 보내고, 요청을 받아 화면에 출력하는 간단한 API 활용법에 대하여 포스팅하려고 한다

프로젝트는 진행 중이며, 아직 초기 단계지만 프로젝트 내용과 사용하는 기술 스택 및 여러 정보들은 다음 깃허브 주소를 참고하면 될 것 같다

GitHub - dduneon/Nine-2023CapstoneDesign: 2023 Chosun Univ. Capstone Design(01)

---

 

배경

---

먼저 해당 프로젝트는 React Native 언어를 바탕으로 작성되었으며, Expo를 사용하였기 때문에 openai 라이브러리를 직접적으로 사용하지는 못하였기 때문에 일반적인 통신 방식인 fetch-response 를 활용하여 코드를 작성하였다

 

방법

---

1. API KEY 발급받기 (OpenAI)

OpenAI API

먼저 OpenAI 회원가입을 한다. 한 명의에 한개의 아이디만 무료 크레딧을 제공받을 수 있으니 이점을 생각해서 아이디를 생성하면 된다

 

회원가입이 완료되었으면, 빨간색 화살표가 가리키는 부분을 눌러 'View API keys' 탭으로 들어간다

그리고 Creat new secret key 버튼을 눌러 API Key를 생성한다

생성한 API Key는 'sk-' 로 시작하는 문자열이며, 생성 시 한번만 볼 수 있고 생성 후에는 다시 키를 볼 수 없으니 소중한 곳에 저장해 놓는 것을 추천한다

 

2. React Native 프로젝트 작업

나는 TextInput을 만들고 이곳에 사용자가 키보드를 통하여 문장을 작성한 후에, 버튼을 누르면 GPT의 응답이 Text에 출력되도록 하는 코드를 작성해 보았다

먼저, 다음을 import 해준다

import React, { useState } from 'react';
import { View, TextInput, Button, Text, StyleSheet } from 'react-native';

 

두번째로 다음과 같이 API_KEY와 API_URL 변수를 설정해준다.

다만, API_KEY를 다음과 같이 소스코드에 하드코딩 하는 방식은 보안상 좋지 않으므로 업로드시 API_KEY를 함께 업로드 하는 경우를 주의해야 한다!

const API_KEY = 'YOUR API KEY';
const API_URL = 'https://api.openai.com/v1/chat/completions';

 

마지막으로 프로그램의 전체 코드를 작성해 보았다

const App = () => {
  const [inputText, setInputText] = useState('');
  const [responseText, setResponseText] = useState('');

  const handleSend = () => {
    fetch(API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${API_KEY}`,
      },
      body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: [{ role: 'user', content: inputText }],
        max_tokens: 600,
        temperature: 0.7,
      }),
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        const responseData = data.choices[0].message.content.trim();
        setResponseText(responseData);
      })
      .catch((error) => {
        console.error(error);
      });
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter text"
        value={inputText}
        onChangeText={(text) => setInputText(text)}
      />
      <Button title="Send" onPress={handleSend} />
      <Text style={styles.responseText}>{responseText}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    width: '90%',
    height: 100,
    borderWidth: 1,
    borderColor: '#ccc',
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  responseText: {
    marginTop: 20,
    fontSize: 18,
  },
});

export default App;

 

fetch를 통하여 요청을 보내고, 헤더는 다음과 같은데

headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${API_KEY}`,
      }

응답의 타입이 json형식이며, API_KEY는 다음과 같이 Authorization: 'Bearer ${KEY}' 형식을 유지해야 한다

 

또한 body의 경우

body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: [{ role: 'user', content: inputText }],
        max_tokens: 600,
        temperature: 0.7,
      }),

다음과 같이 role에는 3개의 요소가 들어갈 수 있으나 우리는 user를 선택해주고, content에는 TextInput에 입력해준 텍스트를 넣어주면 된다(질문)

또한 model은 gpt-3.5-turbo를 선택하였는데 여러 방면에서 이점이 존재해서 이 모델을 선택하게 되었다

 

이렇게 하여 간단한 GPT 질의응답 어플리케이션이 완성되었고 응답 데이터를 추출하는 방법은 JSON의 형식만 알고있다면 충분히 쉽게 할 수 있을것이라 생각되어 해당 내용에 대한 설명은 패스하도록 하겠다