본문 바로가기
서비스 기획/🫧 Bubble

[Bubble] GPT의 출력을 Json형식으로 변경하기

대장고양이샤샤 2024. 6. 13. 17:52

[참고자료]

🔗How to integrate your Bubble app with OpenAI & ChatGPT to receive JSON Objects

 

🔗Bubble.io, OpenAI & JSON Mode

 

 

✔️ GPT api 연결

GPT-4o(OpenAI GPT-4 모델)을 Bubble에 연결하려면, OpenAI API를 사용하여 모델과 통신하는 방법을 설정

 

사전 준비

  • OpenAI API 키 발급: OpenAI에서 API 키를 발급
  • 이는 OpenAI의 웹사이트에서 계정을 만들고 키를 생성

단계별 가이드

  1. API 커넥터 플러그인 설치
    • 프로젝트 대시보드에서 '플러그인' 메뉴로 이동합니다.
    • 'Add Plugins'를 클릭하고 'API Connector'를 검색하여 설치합니다.
  2. OpenAI API 설정
    • 설치한 API 커넥터를 열고, 'Add another API'를 클릭하여 새로운 API를 추가합니다.
    • API 이름을 적절히 설정합니다(예: "OpenAI").
    • 'Add a new API call'을 클릭합니다.
  3. API 호출 설정
    • 'Headers' 섹션에 'Authorization' 'Content-Type' 키를 추가
      • Key: Authorization
      • Value: Bearer YOUR_API_KEY (여기서 YOUR_API_KEY는 발급받은 OpenAI API 키로 대체해)
      • Key: 'Content-Type'
      • Value: 'application/json'으로 설정
    • API 엔드 포인트 설정*
    1. Name
      • 원하는 엔드포인트 이름을 입력해 (예: "GPT-4 Completion").
    2. Use as
      • Action을 선택해.
    3. Method
      • POST를 선택해.
    4. URL
      • OpenAI의 GPT-4 엔드포인트 URL을 입력해:
      • https://api.openai.com/v1/engines/gpt-4/completions
  4. 헤더 및 본문 설정
**요청 본문 설정**

- 'Body' 섹션에 다음과 같이 JSON 형식으로 설정합니다

※ model은 gpt-3.5-turbo-1106 로 설정해야 Json Mode를 사용할 수 있다

- “gpt-3.5-turbo”, “gpt-4-1106-previews” 의 경우 오류
- “gpt-3.5-turbo”는 Jason모드가 아닐 시에는 작동함

```python
{
  "model": "gpt-3.5-turbo-1106",
  "messages": [
    {
      "role": "system",
      "content": "<content>"
    },
    {
      "role": "user",
      "content": "<user text>" }],
  "temperature": 0.5,
  "top_p": 1,
  "frequency_penalty": 0,
  "presence_penalty": 0
}
```

```python

간략한 버전

{
  "model": "<model>",
  "temperature": 0.5,
  "messages": [
       {
      "role": "system",
      "content": "<content>"
    },
    {
      "role": "user",
      "content": "<user text>" }]
}
```

- <>안에 변수를 설정하면 `dynamic value`로 설정하여 사용할 수 있습니다.

    ```json
    {
      "model": <model>,
      "temperature" : <temp>,
      "messages": [
        {"role": "user", "content": "<content>"}
      ]
    }
    ```

 

설명

  • prompt: GPT-4에 입력할 텍스트를 지정 실제 사용 시 이 값을 동적으로 변경가능
  • max_tokens: 생성할 텍스트의 최대 토큰 수를 지정
  • temperature: 텍스트 생성의 창의성 정도를 조절값이 높을수록 더 창의적인 텍스트가 생성돼 (0.0에서 1.0 사이의 값).

※ 오류 처리방법

  1. dynamic value 안에 따옴표, 큰따옴표 처리 중복되지 않는지 확인
    •  

 

✔️ Bubble에 OpenAI연결 + ChatGPT

bubble을 실제 OpenAI와 연결하는 단계

 

 

[Step1] GPT API의 Json모드 : 응답을 Json형식으로 변환

 

🧠Bubble에서 OpenAI의 API 커넥터를 사용하면 단순한 텍스트 생성을 넘어 다양하고 강력한 용도로 사용할 수 있는 JSON 객체를 반환하는 AI 기반 애플리케이션을 만들 수 있습니다.
📊OpenAI에 연결하는 표준 방법은 프롬프트를 보내고 텍스트 응답을 받는 것이지만, 응답 형식을 JSON으로 지정하고 세부 프롬프트를 사용하면 OpenAI가 구조화된 JSON 개체를 반환하도록 할 수 있습니다.
🛠Bubble 내에서 텍스트를 JSON 형식으로 변환하는 API 호출을 설정하면 JSON 객체를 수신하고 작업할 수 있습니다.

 

1. reponse_format 설정하고 Json형식으로 받기!!!

  • "response_format" : { "type": "json_object" },(구분 위한 온점 포함)을 버블 Json body에 추가한다
  • ⭐ system 의 content에 Jason paremeter를 포함해서 gpt가 출력해야하는 형식을 전달한다
※ 주의점
1. system의 content 예시문에는 개념적인 내용이 들어가면 안된다
(그 내용의 답변의 기반이됨, User의 messege에 입력해야함)

2. system의 content에는 Json형식으로 출력해 달라는 내용이 포함되어야한다.
예) < Reply with a JSON object with the following paremeters : Question, the answer of this question , Explanation of the answer to this question >라는 문장을 포함해, 출력에
Question, Options, answer, explanation이 포함되게 한다

 

▶ Json Body 

{
  "model": "<model>",
       "response_format" : {"type":"json_object"},
  "temperature": 0.5,
  "messages": [
       {
      "role": "system",
      "content": "<content>"
    },
    {
      "role": "user",
      "content": "<message>" }]
}

 

▶ Dynamic Parameter 설정

Key Value
model gpt-3.5-turbo-1106
content 들어온 정보에 대한 4지선다 객관식 문제를 만들어줘 예시 1. 미국마케팅 학회 에서는 서비스를 '판매 목적으로 제공되거나 또는 상품 판매와 연계해 제공되는 모든, , '이라고 정의하고 있다.다음 빈칸에 들어갈 말로 틀린 것은? a. 활동 b. 편익 c. 만족 d. 효율 답 : d Reply with a JSON object with the following paremeters : Question, the answer of this question , Explanation of the answer to this question
message 적당히 쓰세요

 

들어온 정보에 대한 4지선다 객관식 문제를 만들어줘 예시 1. 미국마케팅 학회 에서는 서비스를 '판매 목적으로 제공되거나 또는 상품 판매와 연계해 제공되는 모든,  , '이라고 정의하고 있다.다음 빈칸에 들어갈 말로 틀린 것은?  a. 활동  b. 편익  c. 만족  d. 효율   답 : d
Reply with a JSON object with the following paremeters : Question, the answer of this question , Explanation of the answer to this question

 

🔗 참고 : OpenAI API reference https://platform.openai.com/docs/api-reference/chat/create

  • 모델이 출력해야 하는 형식을 지정하는 객체입니다. GPT-4 Turbo 및 gpt-3.5-turbo-1106보다 최신인 모든 GPT-3.5 Turbo 모델과 호환
  • { "type": "json_object" }로 설정하면 JSON 모드가 활성화되어 모델이 생성하는 메시지가 유효한 JSON임을 보장
  • 중요: JSON 모드를 사용할 때는 시스템 또는 사용자 메시지를 통해 모델에 직접 JSON을 생성하도록 지시해야 합니다. 그렇지 않으면 모델이 토큰 제한에 도달할 때까지 끝없는 공백 스트림을 생성하여 요청이 오래 실행되고 "멈춘" 것처럼 보일 수 있습니다. 또한 generation이 max_tokens를 초과했거나 대화가 최대 컨텍스트 길이를 초과했음을 나타내는 finish_reason="length"인 경우 메시지 콘텐츠가 부분적으로 잘릴 수 있다는 점에 유의하세요.

 

[Step2] 워크 플로우에서 input / output 설정

  1. API를 호출해준다 : (body)에서 user의 input(messege)는 private를 해제했기 때문에 사용자가 입력가능한 dynamic value로 설정가능하다 →input GPT’s value로 지정해준다.
  2. output이 출력될 element(text)를 만든 후에, display data워크플로우에 gpt의 결과값이 output에 뜨게 설정한다 → data는 gpt api호출의 result로 나오게 한다

결과

  • (input)위와 같이 문제를 생성할 내용을 input으로 입력하면
  • (output) Json형태로 출력이 된다

 

저작자표시

티스토리툴바