index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot</title>
<link rel="stylesheet" href="/static/styles.css">
</head>
<body>
<div class="chat-container">
<div id="chat-box" class="chat-box"></div>
<input type="text" id="user-input" placeholder="Type your message here..." onkeydown="if (event.key === 'Enter') sendMessage()">
<button onclick="sendMessage()">Send</button>
</div>
<script>
async function sendMessage() {
const inputBox = document.getElementById('user-input');
const chatBox = document.getElementById('chat-box');
const userMessage = inputBox.value;
inputBox.value = '';
const userMessageElement = document.createElement('div');
userMessageElement.className = 'user-message';
userMessageElement.textContent = userMessage;
chatBox.appendChild(userMessageElement);
const response = await fetch('/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ message: userMessage })
});
const responseData = await response.json();
const botMessageElement = document.createElement('div');
botMessageElement.className = 'bot-message';
botMessageElement.textContent = responseData.response;
chatBox.appendChild(botMessageElement);
if (responseData.needs_training) {
const newAnswer = prompt("Bot: Sorry, I don't know the answer. Can you teach me?");
if (newAnswer && newAnswer.toLowerCase() !== 'skip') {
await fetch('/train', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ message: userMessage, answer: newAnswer })
});
const learnedMessageElement = document.createElement('div');
learnedMessageElement.className = 'bot-message';
learnedMessageElement.textContent = "Thank you! I learned a new response!";
chatBox.appendChild(learnedMessageElement);
}
}
chatBox.scrollTop = chatBox.scrollHeight;
}
</script>
</body>
</html>
Comments
Post a Comment