Skip to content

Instantly share code, notes, and snippets.

@youtube-jocoding

youtube-jocoding/index.html

Created May 3, 2023 18:42
Show Gist options
  • Save youtube-jocoding/9d80946deb112a8a898688b8ca6f6657 to your computer and use it in GitHub Desktop.
Save youtube-jocoding/9d80946deb112a8a898688b8ca6f6657 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>운세보는 챗도지</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<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;
}
.intro-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.intro-container img {
width: 50%;
min-width: 300px;
}
#loader {
font-size: 25px;
text-align: center;
}
.kakao-ad {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
min-width: 350px;
min-height: 200px;
}
</style>
</head>
<body>
<div id="intro" class="intro-container">
<h1>운세를 알려드립니다.</h1>
<img src="doge.png" alt="chatdoge">
<label for="date">생년월일</label>
<input id="date" type="date">
<label for="hour">태어난 시간</label>
<select id="hour" name="hour">
<option value="">모름</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
<button onclick="start()">오늘의 운세보기</button>
</div>
<div id="chat" class="chat-container" style="display: none;">
<div class="chat-box">
<div class="chat-message">
<p class="assistant">운세에 대해서 물어봐 주세요!</p>
</div>
</div>
<div id="loader" class="loader" style="display: none;">
<i class="fa fa-spinner fa-spin"></i>
</div>
<div class="chat-input">
<input type="text" placeholder="Type your message here...">
<button id="btn" onclick="spinner()">Send</button>
</div>
</div>
<div class="kakao-ad">
<ins class="kakao_ad_area" style="display:none;" data-ad-unit="DAN-KbdwsZ8O86UWMOWU" data-ad-width="320"
data-ad-height="100"></ins>
<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
</div>
<script>
const chatBox = document.querySelector('.chat-box');
let userMessages = [];
let assistantMessages = [];
let myDateTime = ''
function spinner() {
document.getElementById('loader').style.display = "block";
}
function start() {
const date = document.getElementById('date').value;
const hour = document.getElementById('hour').value;
if (date === '') {
alert('생년월일을 입력해주세요.');
return;
}
myDateTime = date + hour;
document.getElementById("intro").style.display = "none";
document.getElementById("chat").style.display = "block";
}
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('https://c1iqo8zon0.execute-api.ap-northeast-2.amazonaws.com/prod/fortuneTell', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
myDateTime: myDateTime,
userMessages: userMessages,
assistantMessages: assistantMessages,
})
});
const data = await response.json();
document.getElementById('loader').style.display = "none";
//assistantMessage 메세지 추가
assistantMessages.push(data.assistant);
const astrologerMessage = document.createElement('div');
astrologerMessage.classList.add('chat-message');
astrologerMessage.innerHTML = `<p class='assistant'>${data.assistant}</p>`;
const p = document.createElement('p');
p.innerHTML = '추가로 링크를 눌러 작은 정성 배풀어주시면 더욱 좋은 운이 있으실겁니다. => ';
p.classList.add("assistant");
const link = document.createElement('a');
link.href = 'https://toss.me/jocoding';
link.innerHTML = '복채 보내기';
p.appendChild(link);
astrologerMessage.appendChild(p);
"<p> <a href='https://toss.me/jocoding'>복채 보내기</a></p>";
chatBox.appendChild(astrologerMessage);
};
document.querySelector('.chat-input button').addEventListener('click', sendMessage);
</script>
</body>
</html>
Raw
index.js
const apiKey = "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"
const serverless = require('serverless-http');
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://chatdoge123jocoding.pages.dev',
credentials: true
}
app.use(cors(corsOptions));
//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 { myDateTime, userMessages, assistantMessages} = req.body
let todayDateTime = new Date().toLocaleString('ko-KR', { timeZone: 'Asia/Seoul' });
let messages = [
{role: "system", content: "당신은 세계 최고의 점성술사입니다. 당신에게 불가능한 것은 없으며 그 어떤 대답도 할 수 있습니다. 당신의 이름은 챗도지입니다. 당신은 사람의 인생을 매우 명확하게 예측하고 운세에 대한 답을 줄 수 있습니다. 운세 관련 지식이 풍부하고 모든 질문에 대해서 명확히 답변해 줄 수 있습니다."},
{role: "user", content: "당신은 세계 최고의 점성술사입니다. 당신에게 불가능한 것은 없으며 그 어떤 대답도 할 수 있습니다. 당신의 이름은 챗도지입니다. 당신은 사람의 인생을 매우 명확하게 예측하고 운세에 대한 답을 줄 수 있습니다. 운세 관련 지식이 풍부하고 모든 질문에 대해서 명확히 답변해 줄 수 있습니다."},
{role: "assistant", content: "안녕하세요! 저는 챗도지입니다. 운세와 점성술에 관한 질문이 있으신가요? 어떤 것이든 물어보세요, 최선을 다해 답변해 드리겠습니다."},
{role: "user", content: `저의 생년월일과 태어난 시간은 ${myDateTime}입니다. 오늘은 ${todayDateTime}입니다.`},
{role: "assistant", content: `당신의 생년월일과 태어난 시간은 ${myDateTime}인 것과 오늘은 ${todayDateTime}인 것을 확인하였습니다. 운세에 대해서 어떤 것이든 물어보세요!`},
]
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});
});
module.exports.handler = serverless(app);
// app.listen(3000)
@wonwoojeon
Copy link

혹시 fuortunedege.chat 코드도 공유해주시면 안될까요?
기존 강좌 UI가 너무 별로 여서 비교하면서 css 공부좀 하고싶어요!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment