Embedded Files
AI code
AI code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ELIZA Chatbot</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
}
.chat-container {
width: 400px;
margin: auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.chat-box {
height: 300px;
overflow-y: auto;
border: 1px solid #ccc;
padding: 10px;
background: #fff;
}
.user-message {
text-align: right;
color: blue;
}
.bot-message {
text-align: left;
color: green;
}
input {
width: 80%;
padding: 10px;
margin-top: 10px;
}
button {
padding: 10px;
background: blue;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>ELIZA Chatbot</h2>
<div class="chat-container" hidden id="a">
<div class="chat-box" id="chat-box"></div>
<input type="text" id="user-input" placeholder="Say something...">
<button onclick="sendMessage()">Send</button>
</div>
<button onclick="loadMessage()" id="b">
Load Message
</button>
<script>
const responses = {
"hello": "Hi! How can I help you?",
"hi": "Hello! What’s on your mind?",
"how are you": "I'm just a bot, but I'm functioning as expected!",
"i am sad": "I'm sorry to hear that. What's bothering you?",
"my name is (.*)": "Nice to meet you, $1!",
"i need help": "I'm here to listen. Tell me more.",
"bye": "Goodbye! Take care.",
};
function sendMessage() {
let input = document.getElementById("user-input").value.toLowerCase();
if (!input) return;
let chatBox = document.getElementById("chat-box");
chatBox.innerHTML += `<div class="user-message"><b>You:</b> ${input}</div>`;
let reply = `${input}` + "?" + " Tell me why you are feeling that way?";
for (let pattern in responses) {
let regex = new RegExp(pattern, "i");
if (regex.test(input)) {
reply = responses[pattern].replace(/\$1/, input.match(regex)[1] || '');
break;
}
else{
let hi = localStorage.getItem(input)
if(hi != null){
reply = hi
}
}
}
setTimeout(() => {
chatBox.innerHTML += `<div class="bot-message"><b>Eliza:</b> ${reply}</div>`;
chatBox.scrollTop = chatBox.scrollHeight;
}, 500);
document.getElementById("user-input").value = "";
}
function loadMessage(){
document.getElementById("a").hidden = false
document.getElementById("b").style.display="none"
localStorage.setItem("I feel sad", "Oh that is sad to hear tell me more")
}
</script>
</body>
</html>
Replace responses with whatever you want to type make sure the userinput part is on lower key
example:
"userinput", "aioutput"
Page updated
Report abuse