<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Chatbot</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }
#chatbox { width: 300px; height: 300px; border: 1px solid black; padding:
10px; overflow-y: auto; }
input { width: 200px; padding: 5px; }
button { padding: 5px; }
</style>
</head>
<body>
<h2>AI Chatbot</h2>
<div id="chatbox"></div>
<input type="text" id="userInput" placeholder="Type a message...">
<button onclick="sendMessage()">Send</button>
<script>
let chatbotMemory = {}; // Memory for learning
function chatbotResponse(input) {
input = input.toLowerCase().trim(); // Remove spaces
// Check memory for learned responses
if (chatbotMemory[input]) {
return chatbotMemory[input];
}
// AI-like keyword matching
if (input.includes("hello") || input.includes("hi")) {
return "Hello! How can I assist you?";
} else if (input.includes("how are you")) {
return "I'm a bot, but I'm here to help!";
} else if (input.includes("bye")) {
return "Goodbye! Have a great day!";
} else if (input.includes("name")) {
return "I am a chatbot that learns from you!";
} else {
// Learn from user input
let response = prompt("I don't know this. How should I respond?");
if (response) {
chatbotMemory[input] = response; // Store new response
return response;
} else {
return "Okay, I won't learn that.";
}
}
}
function sendMessage() {
let userInput = document.getElementById("userInput").value;
if (!userInput) return;
let chatbox = document.getElementById("chatbox");
chatbox.innerHTML += "<p><strong>You:</strong> " + userInput + "</p>";
let botResponse = chatbotResponse(userInput);
chatbox.innerHTML += "<p><strong>Bot:</strong> " + botResponse +
"</p>";
document.getElementById("userInput").value = ""; // Clear input
chatbox.scrollTop = chatbox.scrollHeight; // Auto-scroll
}
</script>
</body>
</html>
