first

2026-01-28 15:06:02 +09:00
commit 7b3b299cbb
12 changed files with 642 additions and 0 deletions
--- a/org.html
+++ b/org.html
@@ -0,0 +1,127 @@
+<!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>