마트철수

[TIL_9] KB 부트캠프: 챗GPT API 완전 쉽게 연결하기 (챗봇) 본문

KB IT's Your Life/KB 기자단

[TIL_9] KB 부트캠프: 챗GPT API 완전 쉽게 연결하기 (챗봇)

마트스 2024. 10. 1. 12:48

 

[TIL_8] KB 부트캠프: 챗GPT API 완전 쉽게 연결하기 (챗봇)

 

안녕하세요,

저번주에는 지도를 api로 연동하는 방법에 대해 작성했습니다.

 

이번주는 api를 연동해서 챗봇을 만드는 방법에 대해

자세히 알려드리겠습니다!

 

GPT에서는 정말 자세히 코드를 알려주기 때문에,

해당 과정을 따라하다가 어려운 부분이 있다면 홈페이지를 참고하신다면

따라하기 엄청 편하실 거에요!

 

챗GPT CHATGPT 연동하기

 

 

#KB IT's Your Life #비전공자부트캠프

 

 

 

프로젝트 과정 중에서 ERD로 DB를 설계했는데요,

해당 내용을 다루고 바로 챗봇 연동을 작성해보겠습니다!

 

ERD(개체 관계도)

시스템 분석과 설계 과정에서 필수적인 요소 중 하나로,

데이터 모델링의 중요한 부분을 차지합니다.

 

데이터 모델링의 논리적 단계를 시각화하여

설계자, 개발자, 이해관계자가 데이터 구조를 쉽게 이해할 수 있게 도와줍니다.

 

프로젝트를 진행하면서 필수적으로 사용해야하는 ERD가 무엇인지,

저희가 어떻게 활요하고 있는지 말씀드리겠습니다!

 

 

ERD 설계 예시 출처: 인프런 ERD

 

 

1. ERD(개체 관계도)란?

 

ERD는 데이터베이스 설계에서 개체(Entity), 속성(Attribute), 그리고 관계(Relationship) 간의 구조를 시각적으로 표현한 다이어그램입니다. 이를 통해 시스템에서 다루는 정보와 그 정보 간의 관계를 명확하게 파악할 수 있습니다.

 

  • 개체(Entity): 데이터를 저장할 대상
  • 속성(Attribute): 개체의 특성을 나타내는 요소
  • 관계(Relationship): 개체 간의 상호작용이나 연관성

 

ERD의 주요 요소:

 

ERD 요소 출처: IT 용어위키

 

 

 

  • 사각형 (Rectangle): 개체(Entity)
  • 타원형 (Ellipse): 개체의 속성(Attribute)
  • 다이아몬드형 (Diamond): 관계(Relationship)
  • 선 (Lines): 개체와 속성 또는 개체와 관계

 

2. ERD 활용 방안

저희는 복잡한 데이터 구조를 시각화하였기 때문에

ERD를 통해 데이터 흐름을 쉽게 이해할 수 있었습니다.

 

프로젝트 팀원 간의 협업이 원활해지고,

개발 오류를 사전에 방지할 수 있습니다.

 

1) 데이터베이스 설계

ERD는 데이터베이스 설계의 첫 단계에서 사용됩니다.

 

시스템이 처리해야 할 데이터를 정리하고, 각 데이터 간의 관계를 정의하는 데 도움을 줍니다. 이를 통해 데이터베이스 구조를 효율적으로 설계하고, 중복 데이터를 방지하며, 데이터 무결성을 유지할 수 있습니다.

 

DB 설계 데이터베이스 예시 출처: 인프런

 

2) 시스템 분석 및 설계

ERD는 데이터베이스뿐만 아니라 시스템 분석 및 설계 과정에서도 중요한 도구입니다. ERD를 통해 시스템에서 관리할 데이터와 그 데이터 간의 관계를 시각화함으로써, 시스템 요구 사항을 명확하게 정의할 수 있습니다.

  • 요구 사항 분석: 사용자가 요구하는 데이터를 시각적으로 표현하여 요구 사항을 구체화할 수 있습니다.
  • 기능 설계: 시스템이 처리해야 할 데이터를 바탕으로 기능을 설계할 때 ERD를 활용하여 데이터 흐름을 파악할 수 있습니다.

 

3) 데이터베이스 최적화

ERD는 데이터베이스 성능을 최적화하는 데도 중요한 역할을 합니다.

 

잘 설계된 ERD는 데이터를 중복 없이 저장하고, 필요한 데이터를 효율적으로 조회할 수 있도록 도와줍니다. 특히 대규모 시스템에서는 데이터베이스 성능이 중요한데, ERD를 기반으로 적절한 인덱스와 관계를 설정함으로써 성능을 개선할 수 있습니다.

 

 

MySQL Workbench

 

ERD는 데이터베이스 설계와 시스템 분석의 필수적인 도구입니다.
저희 조는 MySQL workbench를 사용해서 ERD를 설계하여 사용하고 있습니다!

 

 

GPT API를 사용해서 챗봇 구현하기

▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼

 

챗봇 구현하기

이번에는 GPT AI를 이용하여 챗봇을 구현한 방법에 대해 알려드리겠습니다.

 

오늘은 OpenAI의 ChatGPT API를 활용해 간단한 AI 챗봇을 구현해 보았습니다. 자바스크립트로 API를 호출하여 사용자와 대화를 주고받는 형태로, 웹 개발에 익숙하지 않으신 분들도 쉽게 따라할 수 있도록 최대한 간결한 코드를 작성했어요. 아래는 챗봇 개발 과정과 코드 구성에 대해 간략히 설명해 드리겠습니다!

 

OpenAI API 발급받기

챗봇을 구현하기 전에 먼저 OpenAI API 키가 필요합니다.

 

OpenAI 플랫폼에 가입한 후,

아래의 단계를 통해 API 키를 발급받을 수 있습니다.

 

노란색으로 표시된 버튼 클릭 출처: GPT

 

  1. OpenAI API 페이지에 접속하여 로그인합니다.
  2. View API Keys 메뉴에서 새 API 키를 생성하세요.
  3. 발급된 API 키를 복사하여 코드에 사용할 수 있도록 저장합니다.

 

처음 가입하면 $18의 무료 크레딧이 제공되므로, 테스트 용도로 충분히 사용할 수 있습니다.
저는 테스트를 너무 많이 해서, 카드와 연결해서 조금 결제하긴 했습니다 ..ㅎㅎ

 

HTML로 챗봇 UI 구성

챗봇의 UI는 간단한 채팅창 형태로 디자인했습니다.

 

HTML과 CSS 코드만 사용하여 만들었으며,

index.html 파일로 작성되었습니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenAI를 이용한 챗봇</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .message {
            border-top: 1px solid #ccc;
            padding: 10px;
            margin-top: 5px;
            background-color: #e6e6e6;
        }
        #chat-container {
            width: 400px;
            height: 600px;
            display: flex;
            flex-direction: column;
            border: 1px solid #ccc;
        }
        #chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            display: flex;
            flex-direction: column-reverse;
        }
        #user-input {
            display: flex;
            padding: 10px;
        }
        #user-input input {
            flex: 1;
            padding: 10px;
            outline: none;
        }
        #user-input button {
            border: none;
            background-color: #1e88e5;
            color: white;
            padding: 10px 15px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="chat-container">
        <div id="chat-messages"></div>
        <div id="user-input">
            <input type="text" placeholder="메시지를 입력하세요..." />
            <button>전송</button>
        </div>
    </div>
    <script src="chatbot.js"></script>
</body>
</html>

 

챗봇 구현하기 초보

 

아직 대답 없는 챗봇 외관을 완성했습니다.

 

벌써부터 두근두근..

조금만 코드를 더 작성하면 나만의 챗봇이 완성될 예정..!

 

 

 

 

JavaScript로 API 연결

UI를 구성한 후, 실제로 OpenAI의 GPT-3 Turbo 모델을 호출하는 JavaScript 코드를 작성합니다.

 

챗봇의 질문에 대한 응답을 가져오기 위해 fetch()를 사용하여 API에 POST 요청을 보내고,

응답 결과를 화면에 출력하는 방식입니다.

 

// 채팅 메시지를 표시할 DOM
const chatMessages = document.querySelector('#chat-messages');
const userInput = document.querySelector('#user-input input');
const sendButton = document.querySelector('#user-input button');
const apiKey = '발급받은 API키 입력';
const apiEndpoint = 'https://api.openai.com/v1/chat/completions';

function addMessage(sender, message) {
    const messageElement = document.createElement('div');
    messageElement.className = 'message';
    messageElement.textContent = `${sender}: ${message}`;
    chatMessages.prepend(messageElement);
}

async function fetchAIResponse(prompt) {
    const requestOptions = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify({
            model: "gpt-3.5-turbo",
            messages: [{ role: "user", content: prompt }],
            temperature: 0.8,
            max_tokens: 1024,
            top_p: 1,
            frequency_penalty: 0.5,
            presence_penalty: 0.5,
            stop: ["Human"],
        }),
    };
    try {
        const response = await fetch(apiEndpoint, requestOptions);
        const data = await response.json();
        return data.choices[0].message.content;
    } catch (error) {
        console.error('OpenAI API 호출 중 오류 발생:', error);
        return 'OpenAI API 호출 중 오류 발생';
    }
}

sendButton.addEventListener('click', async () => {
    const message = userInput.value.trim();
    if (message.length === 0) return;
    addMessage('나', message);
    userInput.value = '';
    const aiResponse = await fetchAIResponse(message);
    addMessage('챗봇', aiResponse);
});

userInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
        sendButton.click();
    }
});

 

API 요청 파라미터

  • temperature: 답변의 창의성을 조절하며, 0.8로 설정하여 창의성 조정하였습니다.
  • max_tokens: 1024로 설정하여 한 번에 받을 수 있는 최대 토큰 수를 지정했습니다.
  • top_p: 샘플링할 때 고려할 토큰들의 확률 상한을 1로 설정해 모든 가능한 응답을 고려하도록 했습니다.
  • frequency_penalty: 값이 높을수록 중복된 단어 사용을 억제합니다.
  • presence_penalty: 값이 높을수록 반복 구문을 억제해 다양성을 높입니다.
  • stop: 특정 구문에서 응답을 멈추도록 설정할 수 있습니다.

 

해당 코드를 그냥 넣기만 해도, 챗봇은 구현됩니다!
다만, 자신의 디자인에 맞게 수정하면 좀 더 성취감이 있지 않을까..!

 

챗 GPT 챗봇 만들기 GPT API

 

 

GPT와 연결해서 나의 웹에서 챗봇을 보여줄 수 있습니다!

여러 질문을 하면서, 직접 답변을 얻을 수 있어요.

 

 

※ 위 사진 출처는 이미지 하단에 기입해 두었습니다.

 

📒TIL을 마무리하며..

OpenAI API를 활용해 챗봇을 구현해보니,

여러 파라미터 설정으로 답변의 다양성을 조절할 수 있어 매우 유용했습니다.

 

나만의 챗봇을 쉽게 만들 수 있고,

다양한 기능을 추가해 발전시킬 수도 있을 것 같아요.

 

제가 챗봇을 연결하려는 시도를 해보았을때,

티스토리, 블로그 등 굉장한 도움을 받았었습니다.

 

이번 저의 포스팅도 챗봇을 연결하려고 시도하시는 많은 분들에게

도움이 되었길 바랍니다!

 

저는 앞으로도 더욱 발전된 기능을 추가하고 개선해 나갈 계획입니다! 😊

 

 

KB IT's Is Your Life 기자단 부트캠프 til 챗봇개발자 생성형ai

 

 

'KB IT's Your Life > KB 기자단' 카테고리의 다른 글

[TIL_11] KB 부트캠프 프로젝트 고도화(i18n, 다국어 처리)  (19) 2024.10.25
[TIL_10] KB 풀스택 부트캠프 최종 수상? 발표 자료 꿀팁까지!  (8) 2024.10.20
[TIL_8] KB 부트캠프: 카카오개발자 API 지도 불러오기(Vue, JAVA)  (5) 2024.09.24
[TIL_7] KB 부트캠프: 비전공자가 개발 프로젝트 시작  (5) 2024.09.15
[TIL_6] KB 부트캠프: CRUD 게시판 만들기 ?!  (1) 2024.09.08
'KB IT's Your Life/KB 기자단' Related Articles more