본문 바로가기
머신러닝과 딥러닝(ML&DL)/LLM(Large Language Models)

GPT REST API 기본 사용법(HTML,CSS,JS)

by whisperscope_ai 2024. 3. 10.
반응형

간단한 GPT API 사용 가이드

이 가이드는 OpenAI의 GPT API를 활용하여 간단한 챗봇을 구현하는 방법을 설명합니다. HTML, CSS, JavaScript 세 가지 파일을 사용하여 사용자와 대화할 수 있는 웹 인터페이스를 만듭니다.

gptapi사용

1. HTML 구성 (openai.html)

HTML 파일은 웹 페이지의 기본 구조를 정의합니다. 사용자 입력, 챗봇 메시지 표시 영역, 그리고 CSS와 JavaScript 파일을 연결하는 역할을 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenAI를 이용한 챗봇</title>
    <link rel="stylesheet" href="chatbot.css">
</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>

2. CSS 스타일 (chatbot.css)

CSS 파일은 챗봇 인터페이스의 스타일을 정의합니다. 여기에는 사용자의 메시지 입력 필드, 메시지 표시 영역, 버튼 등의 스타일이 포함됩니다.

/* 예시 */
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;
}
.message-c {
    border-top: 1px solid #ccc;
    padding: 10px;
    margin-top: 5px;
    background-color: plum;
}
#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;
}

3. JavaScript 동작 (chatbot.js)

JavaScript 파일은 챗봇의 핵심 기능을 구현합니다. 사용자 입력 처리, OpenAI API로의 요청 전송, 그리고 받은 응답을 화면에 표시하는 기능을 포함합니다. ('승인받은APIKEY' 수정 필요 발급 받지 않았다면 아래 링크를 참고하세요.)

 

 

GPT API 기본 사용법

GPT란 무엇인가? GPT(Generative Pre-trained Transformer)는 OpenAI에 의해 개발된 자연어 처리를 위한 인공지능 모델입니다. 이 모델은 대규모의 텍스트 데이터를 미리 학습(pre-training)하여 다양한 종류의 텍

class.soyiyou.com

// 채팅 메시지를 표시할 DOM
const chatMessages = document.querySelector('#chat-messages');
// 사용자 입력 필드
const userInput = document.querySelector('#user-input input');
// 전송 버튼
const sendButton = document.querySelector('#user-input button');
// 발급받은 OpenAI API 키를 변수로 저장
const apiKey = '승인받은APIKEY';
// OpenAI API 엔드포인트 주소를 변수로 저장
const apiEndpoint = 'https://api.openai.com/v1/chat/completions'
function addMessage(sender, message) {
    // 새로운 div 생성
    const messageElement = document.createElement('div');
    // 생성된 요소에 클래스 추가
    if(sender =='나'){
        messageElement.className = 'message';
    }else{
        messageElement.className = 'message-c';
    }
     // 채팅 메시지 목록에 새로운 메시지 추가
    messageElement.textContent = `${sender}: ${message}`;
    chatMessages.prepend(messageElement);
}
// ChatGPT API 요청
async function fetchAIResponse(prompt) {
    // API 요청에 사용할 옵션을 정의
    const requestOptions = {
        method: 'POST',
        // API 요청의 헤더를 설정
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify({
            model: "gpt-3.5-turbo",  // 사용할 AI 모델
            messages: [{
                role: "user",    // 메시지 역할을 user로 설정
                content: prompt  // 사용자가 입력한 메시지
            }, ],
            temperature: 0.8, // 모델의 출력 다양성
            max_tokens: 1024, // 응답받을 메시지 최대 토큰(단어) 수 설정
            top_p: 1, // 토큰 샘플링 확률을 설정
            frequency_penalty: 0.5, // 일반적으로 나오지 않는 단어를 억제하는 정도
            presence_penalty: 0.5, // 동일한 단어나 구문이 반복되는 것을 억제하는 정도
            stop: ["Human"], // 생성된 텍스트에서 종료 구문을 설정
        }),
    };
    // API 요청후 응답 처리
    try {
        const response = await fetch(apiEndpoint, requestOptions);
        const data = await response.json();
        const aiResponse = data.choices[0].message.content;
        return aiResponse;
    } 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 = '';
    //ChatGPT API 요청후 답변을 화면에 추가
    const aiResponse = await fetchAIResponse(message);
    addMessage('챗봇', aiResponse);
});
// 사용자 입력 필드에서 Enter 키 이벤트를 처리
userInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
        sendButton.click();
    }
});

이 가이드를 통해 기본적인 챗봇을 구현할 수 있습니다. 사용자의 질문에 AI가 답변하는 방식으로, HTML과 CSS로 구성된 간단한 인터페이스에서 JavaScript를 통해 OpenAI GPT와의 통신을 구현하게 됩니다. 필요에 따라 자바스크립트 코드 내의 API 키, 요청 옵션 등을 자신의 용도에 맞게 수정해 사용하세요.

반응형

'머신러닝과 딥러닝(ML&DL) > LLM(Large Language Models)' 카테고리의 다른 글

GPT API와 LangChain 사용법  (0) 2024.03.10
GPT API 기본 사용법  (0) 2024.03.10

관련글

티스토리툴바