[OPENAI] 웹사이트에 chatGPT 붙이기

고영민·2023년 5월 23일

openai

목록 보기

1/1

openai api를 활용해 chatGPT를 나의 웹사이트에서 사용하는 방법
우선, 호스팅된 사이트가 없기 때문에, localhost에서 진행할 것이고,
Nodejs 환경에서 개발한다.

0. 프로젝트 초기 세팅

0-1. Terminal

# 프로젝트 시작하기
$ npm init
	## 세부 옵션에서는 건드릴 것 없이 모두 Enter

# express, openai, body-parser, cors 패키지 설치
$ npm install express openai body-parser cors
	## 패키지에 대한 설명은 뒤에서...

0-2. index.js

index.js 파일 생성

0-3. package.json

type = "module" 을 꼭 추가할 것

{
  "name": "gpt4api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "body-parser": "^1.20.2",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "openai": "^3.2.1"
  }
}

1. OpenAI api 사용하기

openai api를 사용해 보자

1-1. index.js

<QUESTION_HERE> 에 원하는 질문을 넣으면 된다.

import { Configuration, OpenAIApi } from "openai";

// 인증 정보 입력
const configuration = new Configuration({
  organization: "ORGANIZATION_ID",
  apiKey: "API_KEY"
});
const openai = new OPENAIApi(configuration)

// openai에 요청(질문) 보내기
const completion = await openai.createChatCompletion({
    model: "gpt-3.5-turbo",
    messages: [
      {"role": "user", "content": "<QUESTION_HERE>"}
    ]
})

// 응답 출력하기
console.log(completion.data.choices[0].message)

1-2. Terminal

Terminal Console에서 응답값을 확인한다.

node \index.js

// 이렇게 응답이 생성된다.
{
  role: 'assistant',
  content: 'Hello world! How can I assist you today?'
}

2. Express.js 사용하기

이제 index.html과 실제 웹 서버 상에서 chatGPT를 사용할 수 있도록 작업한다.
express.js에 대한 설명은 아래를 참고하자

Express.js는 Node.js를 위한 웹 애플리케이션 프레임워크입니다.

Express.js는 간결하고 유연한 라우팅 및 미들웨어 기능을 제공하여 웹 애플리케이션의 개발을 간편하게 만들어줍니다. 라우팅은 클라이언트 요청에 따라 적절한 핸들러 함수로 연결해주는 기능을 말하며, 미들웨어는 요청과 응답 사이에서 동작하는 함수로서 로그 기록, 인증, 데이터 처리 등 다양한 작업을 처리할 수 있습니다.

2-1. index.html

index.html 파일을 생성한 후

2-1-1. UI 만들기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GPT4 Chat API Model</title>
</head>
<body>
  <main>
    <h1>ChatGPT4 API</h1>
    <form action="post">
      <input type="text" name="message" id="message">
      <button type="submit">Send</button>
    </form>
    <div id="chat-log">

    </div>
  </main>
</body>

2-1-2. script 작성하기

<script>
    let messages = []
	
  	// DOM 가져오기 
    const message = document.getElementById('message');
    const chatLog = document.getElementById('chat-log');
    const form = document.querySelector('form');
  
	// submit 이벤트가 발생하면...  
    form.addEventListener('submit', (e) => { // 만약 submit 버튼을 클릭하면
      e.preventDefault();
  
      // 입력된 message를 가져와 messageElement를 생성해 표시한다.
      const messageText = message.value; 

      const newMessage = {"role": "user", "content": `${messageText}`}
      messages.push(newMessage)
		
  	  // newMessage에 저장했으므로, 다시 input 필드를 공백으로 만든다.
      message.value = '';
  
  	  // 사용자가 input에 입력한 질문을 div 요소로 보여준다.
      const messageElement = document.createElement('div');
      messageElement.classList.add('message');
      messageElement.classList.add('message--sent');
      messageElement.innerHTML = `
        <div class="message__text">${messageText}</div>
      `;
      chatLog.appendChild(messageElement);
      chatLog.scrollTop = chatLog.scrollHeight;

      // 2-2 index.js를 보고 올 것! 
  	  // http://localhost:3000에 POST 요청을 보낸다.
      fetch('http://localhost:3000', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          messages
        })
      })
      .then(res => res.json()) // 응답을 json 파일로 받음
      .then(data => { // json 파일을 data라는 매개변수로 받음
        let newAssitantMessage = {"role": "assistant", "content": `${data.completion.content}`}
        messages.push(newAssitantMessage) // 응답값을 저장
		
  
  		// 응답값을 표시하는 div 요소를 추가한다.
        const messageElement = document.createElement('div')
        messageElement.classList.add('message')
        messageElement.classList.add('message--received');
        messageElement.innerHTML = `
        <div class="message__text">${data.completion.content}</div>
        `;
        chatLog.appendChild(messageElement);
        chatLog.scrollTop = chatLog.scrollHeight;
      })
    })
  </script>

2-2. index.js

import { Configuration, OpenAIApi } from "openai";
import express from "express";
import bodyParser from "body-parser";
import cors from 'cors'

// 인증 정보 입력
const configuration = new Configuration({
  organization: "ORGANIZATION_ID",
  apiKey: "API_KEY"
});
const openai = new OPENAIApi(configuration)

// express 설정하기
const app = express();
const port = 3000;
	// post 요청을 보내면...
app.post("/", async (req, res) => {

  const { messages } = req.body; // Body의 messages를 가져옴

  const completion = await openai.createChatCompletion({
    model: "gpt-3.5-turbo",
    messages: [
      ...messages
    ]
  })
  
  res.json({ // 응답을 json의 형태로 받고, 응답값을 completion에 저장
    completion: completion.data.choices[0].message
  })
});

// 서버 시작
app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})