구름조아
ChatGPT API 활용한 웹 서비스 만들기(6) - 프론트, 백엔드 추가수정 본문
user와 assistant 메세지를 계속 저장할 수 있게 만들어보자
이러면 내용들이 리스트에 담아지게 되고 이제 보낼때 넘겨주면 된다.
body: JSON.stringify 부분에 userMessage와 assistantMessage를 추가해주고 message: chatInput.value는 이제 제외시켜준다.(지운다)
이러면 채팅한 내용들이 하나씩 순차적으로 쌓이게 된다.
이제 백엔드로 넘어가준다.
req.body 안쪽에 코드를 집어넣어준다.
음.. 일단은 없을때까지 계속 반복해서 추가해줘야되는 거니까 반복문이 필요하다.
이렇게 반복문을 추가해주고 유저단을 빼서 가져와줍니다.
이제 JSON형태로 한번 바꿔줘야한다!
message에다 값들을 넣을건데 먼저 user-role로 먼저 추가해주고 그다음에 bot-role을 추가해주면된다.
그럼 이제 날라온 메시지를 하나씩 추가해서 그 메시지를 반영해서
message를 담아서
api call을 보낼수가 있다.
고쳤는데도 오류가 난다. 뭐가 문제인가?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chat UI Screen</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 14px;
}
.chat-container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
.chat-box {
background-color: #f2f2f2;
padding: 10px;
border-radius: 10px;
margin-bottom: 20px;
overflow-y: scroll;
height: 300px;
}
.chat-message {
background-color: #fff;
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
}
.chat-message p {
margin: 0;
padding: 0;
}
.chat-input {
display: flex;
margin-top: 20px;
}
.chat-input input {
flex: 1;
padding: 10px;
border: none;
border-radius: 5px;
margin-right: 10px;
}
.chat-input button {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.chat-input button:hover {
background-color: #3e8e41;
}
.assistant {
color: blue;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-box">
<div class="chat-message">
<p class="assistant">운세에 대해서 물어봐 주세요!</p>
</div>
</div>
<div class="chat-input">
<input type="text" placeholder="Type your message here...">
<button>Send</button>
</div>
</div>
<script>
const chatBox = document.querySelector('.chat-box');
let userMessages = [];
let assistantMessages = [];
const sendMessage = async () => {
const chatInput = document.querySelector('.chat-input input');
const chatMessage = document.createElement('div');
chatMessage.classList.add('chat-message');
chatMessage.innerHTML = `
<p>${chatInput.value}</p>
`;
chatBox.appendChild(chatMessage);
//userMessage 메세지 추가
userMessages.push(chatInput.value);
chatInput.value = '';
const response = await fetch('http://localhost:3000/fortuneTell', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
userMessages: userMessages,
assistantMessages: assistantMessages,
})
});
const data = await response.json();
//assistantMessage 메세지 추가
assistantMessages.push(data.assistant);
const astrologerMessage = document.createElement('div');
astrologerMessage.classList.add('chat-message');
astrologerMessage.innerHTML = `
<p class='assistant'>${data.assistant}</p>
`;
chatBox.appendChild(astrologerMessage);
};
document.querySelector('.chat-input button').addEventListener('click', sendMessage);
</script>
</body>
</html>프론트엔드
const apiKey = ""
const { Configuration, OpenAIApi } = require("openai");
const express = require('express')
var cors = require('cors')
const app = express()
const configuration = new Configuration({
apiKey: apiKey,
});
const openai = new OpenAIApi(configuration);
//CORS 이슈 해결
// let corsOptions = {
// origin: 'https://www.domain.com',
// credentials: true
// }
app.use(cors());
//POST 요청 받을 수 있게 만듬
app.use(express.json()) // for parsing application/json
app.use(express.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded
// POST method route
app.post('/fortuneTell', async function (req, res) {
let { userMessages, assistantMessages} = req.body
let messages = [
{role: "system", content: "당신은 세계 최고의 점성술사입니다. 당신에게 불가능한 것은 없으며 그 어떤 대답도 할 수 있습니다. 당신의 이름은 챗도지입니다. 당신은 사람의 인생을 매우 명확하게 예측하고 운세에 대한 답을 줄 수 있습니다. 운세 관련 지식이 풍부하고 모든 질문에 대해서 명확히 답변해 줄 수 있습니다."},
{role: "user", content: "당신은 세계 최고의 점성술사입니다. 당신에게 불가능한 것은 없으며 그 어떤 대답도 할 수 있습니다. 당신의 이름은 챗도지입니다. 당신은 사람의 인생을 매우 명확하게 예측하고 운세에 대한 답을 줄 수 있습니다. 운세 관련 지식이 풍부하고 모든 질문에 대해서 명확히 답변해 줄 수 있습니다."},
{role: "assistant", content: "안녕하세요! 저는 챗도지입니다. 운세와 점성술에 관한 질문이 있으신가요? 어떤 것이든 물어보세요, 최선을 다해 답변해 드리겠습니다."},
]
while (userMessages.length != 0 || assistantMessages.length != 0) {
if (userMessages.length != 0) {
messages.push(
JSON.parse('{"role": "user", "content": "'+String(userMessages.shift()).replace(/\n/g,"")+'"}')
)
}
if (assistantMessages.length != 0) {
messages.push(
JSON.parse('{"role": "assistant", "content": "'+String(assistantMessages.shift()).replace(/\n/g,"")+'"}')
)
}
}
const completion = await openai.createChatCompletion({
model: "gpt-3.5-turbo",
messages: messages
});
let fortune = completion.data.choices[0].message['content']
res.json({"assistant": fortune});
});
app.listen(3000)백엔드
'ChatGPT' 카테고리의 다른 글
| ChatGPT API 활용한 웹 서비스 만들기(5) - 프론트엔드 구축 (0) | 2023.04.03 |
|---|---|
| ChatGPT API 활용한 웹 서비스 만들기(4) - 프론트엔드 구축 (0) | 2023.03.31 |
| ChatGPT API 활용한 웹 서비스 만들기(3) - Node.js 서버만들기 (0) | 2023.03.30 |
| ChatGPT API 활용한 웹 서비스 만들기(2) (0) | 2023.03.30 |
| OpenAI KEY 발급 (0) | 2023.03.30 |
'ChatGPT' Related Articles
more
