<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced AI Chatbot with NLP & Voice Search</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
#chatbox {
width: 100%;
max-width: 600px;
height: 400px;
border: 1px solid #ccc;
overflow-y: auto;
padding: 10px;
background: white;
border-radius: 10px;
}
#inputContainer {
display: flex;
margin-top: 10px;
#userInput {
flex: 1;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
#sendBtn, #voiceBtn {
padding: 10px;
margin-left: 5px;
border-radius: 5px;
border: none;
background-color: #007BFF;
color: white;
cursor: pointer;
.message {
margin: 10px 0;
padding: 8px;
border-radius: 5px;
}
.user {
background-color: #007BFF;
color: white;
text-align: right;
align-self: flex-end;
.bot {
background-color: #28A745;
color: white;
text-align: left;
align-self: flex-start;
</style>
</head>
<body>
<h1>AI Chatbot with NLP & Voice Search</h1>
<div id="chatbox"></div>
<div id="inputContainer">
<input type="text" id="userInput" placeholder="Type your message...">
<button id="sendBtn">Send</button>
<button id="voiceBtn">🎤</button>
</div>
<script>
const chatbox = document.getElementById('chatbox');
const userInput = document.getElementById('userInput');
const sendBtn = document.getElementById('sendBtn');
const voiceBtn = document.getElementById('voiceBtn');
sendBtn.addEventListener('click', sendMessage);
voiceBtn.addEventListener('click', startVoiceRecognition);
userInput.addEventListener('keypress', function (e) {
if (e.key === 'Enter') sendMessage();
});
function sendMessage() {
const userMessage = userInput.value.trim();
if (userMessage === '') return;
appendMessage(userMessage, 'user');
userInput.value = '';
setTimeout(() => appendTypingIndicator(), 500);
setTimeout(() => {
removeTypingIndicator();
appendMessage(getBotResponse(userMessage), 'bot');
}, 1500);
function appendMessage(message, sender) {
const messageDiv = document.createElement('div');
messageDiv.classList.add('message', sender);
messageDiv.textContent = message;
chatbox.appendChild(messageDiv);
chatbox.scrollTop = chatbox.scrollHeight;
function appendTypingIndicator() {
const typingIndicator = document.createElement('div');
typingIndicator.id = 'typingIndicator';
typingIndicator.classList.add('message', 'bot');
typingIndicator.textContent = 'Chatbot is typing...';
chatbox.appendChild(typingIndicator);
chatbox.scrollTop = chatbox.scrollHeight;
function removeTypingIndicator() {
const typingIndicator = document.getElementById('typingIndicator');
if (typingIndicator) typingIndicator.remove();
function getBotResponse(userMessage) {
userMessage = userMessage.toLowerCase().replace(/[.,!?]/g, '');
const knowledgeBase = {
'hello': 'Hey there! How can I assist you today?',
'hi': 'Hi! Hope you are having a great day!',
'how are you': 'I am a chatbot, so always at my best! How about you?',
'bye': 'Goodbye! Hope to chat with you again soon.',
'joke': 'Why don’t skeletons fight each other? They don’t have the guts!',
'help': 'I am here to chat! Ask me anything.',
'name': 'I am your friendly AI chatbot!',
'color': 'I love all colors, but blue is quite calming!',
'weather': 'I cannot check real-time weather, but I hope it is sunny where you are!',
'space': 'Did you know that a day on Venus is longer than a year on Venus?',
'ocean': 'The ocean covers more than 70% of the Earth’s surface!',
'history': 'The Great Wall of China is over 13,000 miles long!',
'science': 'Water expands when it freezes, unlike most other substances!',
'technology': 'Did you know that the first computer was invented in the 1940s?',
'biology': 'Your body has more bacteria cells than human cells!',
'math': 'Did you know that zero was invented in India?',
'universe': 'The observable universe is about 93 billion light-years across!',
'animals': 'Octopuses have three hearts and blue blood!',
'health': 'Drinking enough water daily is essential for good health!',
'food': 'Honey never spoils—it can last thousands of years!',
'psychology': 'Smiling, even when you’re sad, can help improve your mood!'
};
for (let key in knowledgeBase) {
if (userMessage.includes(key)) {
return knowledgeBase[key];
}
return "I'm still learning! Could you rephrase that?";
function startVoiceRecognition() {
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'en-US';
recognition.start();
recognition.onresult = function(event) {
const transcript = event.results[0][0].transcript;
userInput.value = transcript;
sendMessage();
};
</script>
</body>
</html>
