Spaces:

Arrcttacsrks
/

Llama-3.2-3B_ChatX

Sleeping

App Files Files Community

Arrcttacsrks commited on Oct 29

Commit

43d4650

•

1 Parent(s): 688c860

Update index.html

Browse files

Files changed (1) hide show

index.html +47 -59

index.html CHANGED Viewed

@@ -3,76 +3,64 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Chatbot</title>
-    <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <div class="chat-container">
-        <h1>Chatbot</h1>
-        <div id="chat-box"></div>
-        <input type="text" id="user-input" placeholder="Nhập tin nhắn ở đây...">
-        <input type="text" id="username" placeholder="Nhập tên của bạn..." />
-        <button id="send-button">Gửi</button>
-        <button id="clear-button">Xóa lịch sử</button>
     </div>
     <script>
-        const chatBox = document.getElementById('chat-box');
-        const userInput = document.getElementById('user-input');
-        const usernameInput = document.getElementById('username');
-        const sendButton = document.getElementById('send-button');
-        const clearButton = document.getElementById('clear-button');
-        // Lưu trữ lịch sử tin nhắn
-        const chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || [];
-        // Hiển thị lịch sử tin nhắn
-        chatHistory.forEach(msg => {
-            chatBox.innerHTML += `<div class="${msg.role}-message">${msg.content}</div>`;
-        });
-        function addMessage(role, content) {
-            chatHistory.push({ role, content });
-            localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
-            chatBox.innerHTML += `<div class="${role}-message">${content}</div>`;
-            chatBox.scrollTop = chatBox.scrollHeight; // Cuộn xuống dưới
-        }
-        sendButton.addEventListener('click', sendMessage);
-        userInput.addEventListener('keypress', function (e) {
-            if (e.key === 'Enter') {
-                sendMessage();
-            }
-        });
-        clearButton.addEventListener('click', clearChat);
-        function sendMessage() {
-            const message = userInput.value;
-            const username = usernameInput.value || "Người dùng";
-            if (!message) return;
-            addMessage('user', `<strong>${username}:</strong> ${message}`);
-            userInput.value = '';
-            fetch('/chat', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ message })
-            })
-            .then(response => response.json())
-            .then(data => {
-                addMessage('bot', `<strong>Bot:</strong> ${data.response}`);
             });
-        }
-        function clearChat() {
-            localStorage.removeItem('chatHistory');
-            chatHistory.length = 0;
-            chatBox.innerHTML = '';
-        }
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vivi Chatbot</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
     <div class="chat-container">
+        <div class="chat-header">
+            <h1>Vivi - Trợ lý ảo</h1>
+        </div>
+        <div class="chat-box" id="chat-box">
+            {% for entry in history %}
+                <div class="user-message"><span>{{ entry.timestamp }}</span> {{ entry.user }}</div>
+                <div class="bot-message"><span>{{ entry.timestamp }}</span> {{ entry.bot }}</div>
+            {% endfor %}
+            <div id="typing-indicator" class="bot-message" style="display: none;">Đang gõ...</div>
+        </div>
+        <form id="chat-form">
+            <input type="text" id="user-input" placeholder="Nhập tin nhắn..." autocomplete="off" required>
+            <button type="submit">Gửi</button>
+            <button type="button" id="clear-chat">🗑️</button>
+        </form>
     </div>
     <script>
+        document.getElementById("chat-form").addEventListener("submit", async function(event) {
+            event.preventDefault();
+            const userInput = document.getElementById("user-input").value;
+            const chatBox = document.getElementById("chat-box");
+            // Hiển thị tin nhắn người dùng
+            const timestamp = new Date().toLocaleTimeString();
+            chatBox.innerHTML += `<div class="user-message"><span>${timestamp}</span> ${userInput}</div>`;
+            document.getElementById("user-input").value = "";
+            // Hiển thị trạng thái "đang gõ..."
+            const typingIndicator = document.getElementById("typing-indicator");
+            typingIndicator.style.display = "block";
+            // Gửi tin nhắn đến server
+            const response = await fetch("/chat", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ message: userInput })
             });
+            const data = await response.json();
+            // Ẩn trạng thái "đang gõ..." và hiển thị phản hồi bot
+            typingIndicator.style.display = "none";
+            chatBox.innerHTML += `<div class="bot-message"><span>${data.timestamp}</span> ${data.response}</div>`;
+            chatBox.scrollTop = chatBox.scrollHeight;
+        });
+        // Xóa lịch sử chat
+        document.getElementById("clear-chat").addEventListener("click", async function() {
+            const response = await fetch("/clear", { method: "POST" });
+            if (response.ok) {
+                document.getElementById("chat-box").innerHTML = ""; // Xóa nội dung chat-box
+            }
+        });
     </script>
 </body>
 </html>