-
Notifications
You must be signed in to change notification settings - Fork 0
/
chatbot.html
130 lines (121 loc) · 4.7 KB
/
chatbot.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<title>Chatbot</title>
<style>
body {
color: #421;
font-weight: bold;
font-size: 18px;
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 30%, rgba(93, 208, 127, 1) 52%, rgba(76, 168, 110, 1) 58%);
background-image: url("girl.png");
background-repeat: repeat-y;
}
#main {
position: sticky;
top: 40%;
right: 60px;
width: 400px;
border: 0px solid #421;
padding: 40px;
}
#main div {
margin: 10px;
}
#input {
border: 0;
background: #9c9c9a;
padding: 5px;
border: 1px solid #421;
}
</style>
</head>
<body>
<div id="main">
<div>user: <span id="user"></span></div>
<div>chatbot: <span id="chatbot"></span></div>
<div><input id="input" type="text" placeholder="say anything..." autocomplete="off" /></div>
</div>
<script type="text/javascript">
var trigger = [
["hi", "hey", "hello"],
["how are you", "how is life", "how are things"],
["what are you doing", "what is going on"],
["how old are you"],
["who are you", "are you human", "are you bot", "are you human or bot"],
["who created you", "who made you"],
["your name please", "your name", "may i know your name", "what is your name"],
["i love you"],
["happy", "good"],
["bad", "bored", "tired"],
["help me", "tell me story", "tell me joke"],
["ah", "yes", "ok", "okay", "nice", "thanks", "thank you"],
["bye", "good bye", "goodbye", "see you later"]
];
var reply = [
["Hi", "Hey", "Hello"],
["Fine", "Pretty well", "Fantastic"],
["Nothing much", "Can you guest?", "I don't know actually"],
["I am 1 day old"],
["I am just a bot", "I am a bot. What are you?"],
["Kani Veri", "My God"],
["I am nameless", "I don't have a name"],
["I love you too", "Me too"],
["Have you ever felt bad?", "Glad to hear it"],
["Why?", "Why? You shouldn't!", "Try watching TV"],
["I will", "What about?"],
["Tell me a story", "Tell me a joke", "Tell me about yourself", "You are welcome"],
["Bye", "Goodbye", "See you later"]
];
var alternative = ["Haha...", "Eh..."];
document.querySelector("#input").addEventListener("keypress", function(e) {
var key = e.which || e.keyCode;
if (key === 13) { //Enter button
var input = document.getElementById("input").value;
document.getElementById("user").innerHTML = input;
output(input);
}
});
function output(input) {
try {
var product = input + "=" + eval(input);
} catch (e) {
var text = (input.toLowerCase()).replace(/[^\w\s\d]/gi, ""); //remove all chars except words, space and
text = text.replace(/ a /g, " ").replace(/i feel /g, "").replace(/whats/g, "what is").replace(/please /g, "").replace(/ please/g, "");
if (compare(trigger, reply, text)) {
var product = compare(trigger, reply, text);
} else {
var product = alternative[Math.floor(Math.random() * alternative.length)];
}
}
document.getElementById("chatbot").innerHTML = product;
speak(product);
document.getElementById("input").value = ""; //clear input value
}
function compare(arr, array, string) {
var item;
for (var x = 0; x < arr.length; x++) {
for (var y = 0; y < array.length; y++) {
if (arr[x][y] == string) {
items = array[x];
item = items[Math.floor(Math.random() * items.length)];
}
}
}
return item;
}
function speak(string) {
var utterance = new SpeechSynthesisUtterance();
utterance.voice = speechSynthesis.getVoices().filter(function(voice) {
return voice.name == "Agnes";
})[0];
utterance.text = string;
utterance.lang = "en-US";
utterance.volume = 1; //0-1 interval
utterance.rate = 1;
utterance.pitch = 2; //0-2 interval
speechSynthesis.speak(utterance);
}
</script>
</body>
</html>