127 lines
3.7 KiB
HTML
127 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<style>
|
|
.container {
|
|
width:100%;
|
|
height:100vh;
|
|
}
|
|
|
|
.chat-wrap {
|
|
padding: 0 20%;
|
|
}
|
|
.chat {
|
|
height: 95vh;
|
|
border: 1px solid #ccc;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
white-space: pre-wrap; /* 줄바꿈 유지 */
|
|
}
|
|
|
|
.prompt {
|
|
width:100%;
|
|
height:3vh;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.user-msg {
|
|
color: blue;
|
|
margin-top: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.bot-msg {
|
|
color: black;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="chat-wrap">
|
|
<div class="chat"></div>
|
|
<input type="text" class="prompt" value="재난관리부 부서장은 누구야?" placeholder="질문을 입력하고 Enter를 누르세요">
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const promptInput = document.querySelector('.prompt');
|
|
const chatDiv = document.querySelector('.chat');
|
|
|
|
promptInput.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Enter') {
|
|
const query = promptInput.value;
|
|
if (!query.trim()) return;
|
|
|
|
promptInput.value = '';
|
|
|
|
// 사용자 질문 표시
|
|
const userDiv = document.createElement('div');
|
|
userDiv.className = 'user-msg';
|
|
userDiv.textContent = `Q: ${query}`;
|
|
chatDiv.appendChild(userDiv);
|
|
|
|
// 봇 답변 영역 생성
|
|
const botDiv = document.createElement('div');
|
|
botDiv.className = 'bot-msg';
|
|
botDiv.textContent = 'A: ';
|
|
chatDiv.appendChild(botDiv);
|
|
|
|
// 스크롤 하단으로 이동
|
|
chatDiv.scrollTop = chatDiv.scrollHeight;
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
|
|
xhr.open('GET', `http://127.0.0.1:8000/?sessionId=20033011&query=${encodeURIComponent(query)}`);
|
|
|
|
let seenBytes = 0;
|
|
let buffer = '';
|
|
|
|
xhr.onprogress = function () {
|
|
const newData = xhr.responseText.substring(seenBytes);
|
|
console.log(newData)
|
|
seenBytes = xhr.responseText.length;
|
|
|
|
buffer += newData;
|
|
|
|
// 줄바꿈 기준으로 분리
|
|
const lines = buffer.split('\n');
|
|
|
|
// 마지막 부분은 불완전할 수 있으므로 버퍼에 남김
|
|
buffer = lines.pop();
|
|
|
|
lines.forEach(line => {
|
|
if (!line.trim()) return;
|
|
try {
|
|
const json = JSON.parse(line);
|
|
if (json.kind === 'text') {
|
|
botDiv.textContent += json.text;
|
|
chatDiv.scrollTop = chatDiv.scrollHeight;
|
|
}
|
|
} catch (e) {
|
|
console.error("JSON parsing error:", e);
|
|
}
|
|
});
|
|
};
|
|
|
|
xhr.onloadend = function() {
|
|
// 남은 버퍼 처리 (혹시 마지막에 줄바꿈이 없었을 경우)
|
|
if (buffer.trim()) {
|
|
try {
|
|
const json = JSON.parse(buffer);
|
|
if (json.kind === 'text') {
|
|
botDiv.textContent += json.text;
|
|
}
|
|
} catch (e) {
|
|
console.error("Final JSON parsing error:", e);
|
|
}
|
|
}
|
|
};
|
|
|
|
xhr.send();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |