Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5bf5c4a

Browse files
committed
chatbot
1 parent 2717a2c commit 5bf5c4a

File tree

4 files changed

+250
-0
lines changed

4 files changed

+250
-0
lines changed

‎voice-chatbot-main/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# voice-chatbot
2+
In this you will get a voice response from a bot. Click the bottom red symbol to talk Robo, and say hi..https://ks103.github.io/voice-chatbot/

‎voice-chatbot-main/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Chatbot</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<header>Chit-Chat</header>
11+
<section class="main">
12+
<div class="user-area">
13+
14+
</div>
15+
<div class="chatarea-main">
16+
<div class="chatarea-outer">
17+
</div>
18+
</div>
19+
<div class="chatbot-area">
20+
21+
</div>
22+
<button id="mic"><i class="flaticon-microphone"></i></button>
23+
</section>
24+
<script src="main.js"></script>
25+
</body>
26+
</html>

‎voice-chatbot-main/main.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
let mic = document.getElementById("mic");
2+
let chatareamain = document.querySelector('.chatarea-main');
3+
let chatareaouter = document.querySelector('.chatarea-outer');
4+
5+
let intro = ["Hello, I am Robo", "Hi, I am a Robo", "Hello, My name is Robo"];
6+
let help = ["How may i assist you?", "How can i help you?", "What i can do for you?"];
7+
let greetings = ["i am good you little piece of love", "i am fine, what about you", "don't want to talk", "i am good"];
8+
let hobbies = ["i love to talk with humans", "i like to make friends like you", "i like cooking"];
9+
let pizzas = ["which type of pizza do you like?", "i can make a pizza for you", "i would love to make a pizza for you", "would you like cheese pizza?"];
10+
let thank = ["Most welcome", "Not an issue", "Its my pleasure", "Mention not"];
11+
let closing = ['Ok bye-bye', 'As you wish, bye take-care', 'Bye-bye, see you soon..']
12+
13+
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
14+
const recognition = new SpeechRecognition();
15+
16+
function showusermsg(usermsg) {
17+
let output = '';
18+
output += `<div class="chatarea-inner user">${usermsg}</div>`;
19+
chatareaouter.innerHTML += output;
20+
return chatareaouter;
21+
}
22+
23+
function showchatbotmsg(chatbotmsg) {
24+
let output = '';
25+
output += `<div class="chatarea-inner chatbot">${chatbotmsg}</div>`;
26+
chatareaouter.innerHTML += output;
27+
return chatareaouter;
28+
}
29+
30+
function chatbotvoice(message) {
31+
const speech = new SpeechSynthesisUtterance();
32+
speech.text = "Didn't got you";
33+
if (message.includes('who are you') || ('hi')) {
34+
let finalresult = intro[Math.floor(Math.random() * intro.length)];
35+
speech.text = finalresult;
36+
}
37+
if (message.includes('help')) {
38+
let finalresult = help[Math.floor(Math.random() * help.length)];
39+
speech.text = finalresult;
40+
}
41+
if (message.includes('how are you' || 'how are you doing today')) {
42+
let finalresult = greetings[Math.floor(Math.random() * greetings.length)];
43+
speech.text = finalresult;
44+
}
45+
if (message.includes('tell me something about you' || 'tell me something about your hobbies')) {
46+
let finalresult = hobbies[Math.floor(Math.random() * hobbies.length)];
47+
speech.text = finalresult;
48+
}
49+
if (message.includes('food')) {
50+
let finalresult = pizzas[Math.floor(Math.random() * pizzas.length)];
51+
speech.text = finalresult;
52+
}
53+
if (message.includes('thank you' || 'thank you so much')) {
54+
let finalresult = thank[Math.floor(Math.random() * thank.length)];
55+
speech.text = finalresult;
56+
}
57+
if (message.includes('talk to you' || 'talk')) {
58+
let finalresult = closing[Math.floor(Math.random() * closing.length)];
59+
speech.text = finalresult;
60+
}
61+
window.speechSynthesis.speak(speech);
62+
chatareamain.appendChild(showchatbotmsg(speech.text));
63+
}
64+
65+
recognition.onresult = function (e) {
66+
let resultIndex = e.resultIndex;
67+
let transcript = e.results[resultIndex][0].transcript;
68+
chatareamain.appendChild(showusermsg(transcript));
69+
chatbotvoice(transcript);
70+
console.log(transcript);
71+
}
72+
recognition.onend = function () {
73+
mic.style.background = "#ff3b3b";
74+
}
75+
mic.addEventListener("click", function () {
76+
mic.style.background = '#39c81f';
77+
recognition.start();
78+
console.log("Activated");
79+
})

‎voice-chatbot-main/style.css‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: 'Roboto-Regular';
10+
background-color: rgb(10, 0, 0);
11+
}
12+
13+
header {
14+
15+
color: #fafafa;
16+
text-align: center;
17+
line-height: 60px;
18+
font-size: 40px;
19+
20+
width: 100%;
21+
position: fixed;
22+
z-index: 2;
23+
}
24+
25+
.main {
26+
width: 100%;
27+
float: left;
28+
margin-top: 60px;
29+
padding: 30px 0;
30+
}
31+
32+
.main button {
33+
background: #fd3705;
34+
padding: 25px;
35+
border-radius: 50%;
36+
box-shadow: 0 0 10px #666;
37+
position: fixed;
38+
right: 20px;
39+
bottom: 20px;
40+
border: none;
41+
color: #fff;
42+
cursor: pointer;
43+
}
44+
45+
.main button:focus {
46+
outline: none;
47+
}
48+
49+
.container {
50+
width: 85%;
51+
margin: 0 auto;
52+
}
53+
54+
.user-area,
55+
.chatbot-area {
56+
width: 20%;
57+
height: calc(100vh - 60px);
58+
margin-right: 15px;
59+
display: flex;
60+
align-items: center;
61+
position: fixed;
62+
left: 80px;
63+
z-index: 99999;
64+
65+
}
66+
67+
.chatbot-area {
68+
float: right;
69+
right: 80px;
70+
left: auto;
71+
}
72+
73+
.user-area img,
74+
.chatbot-area img {
75+
width: 70%;
76+
}
77+
78+
.user-area img {
79+
left: 60%;
80+
81+
}
82+
83+
.chatarea-main {
84+
width: 40%;
85+
margin: 0 auto;
86+
}
87+
88+
.chatarea-outer {
89+
width: 100%;
90+
float: left;
91+
}
92+
93+
.chatbot-area .chatarea-main {
94+
float: left;
95+
}
96+
97+
.chatarea.user {
98+
float: left;
99+
width: 40%;
100+
padding: 60px 0;
101+
}
102+
103+
.chatarea-inner {
104+
float: left;
105+
width: 60%;
106+
padding: 10px;
107+
color: rgb(7, 7, 7);
108+
position: relative;
109+
margin: 5px 0;
110+
}
111+
112+
.chatarea-inner.user {
113+
background: #03e5f5;
114+
}
115+
116+
.chatarea-inner.chatbot {
117+
background: #8203f9;
118+
float: right;
119+
}
120+
121+
.chatarea-inner.user:before {
122+
content: '';
123+
position: absolute;
124+
border-right: 20px solid #03e5f5;
125+
border-top: 20px solid transparent;
126+
border-bottom: 0px solid transparent;
127+
bottom: 0;
128+
left: -20px;
129+
}
130+
131+
.chatarea-inner.chatbot:before {
132+
content: '';
133+
position: absolute;
134+
border-left: 20px solid #466EB6;
135+
border-top: 20px solid transparent;
136+
border-bottom: 0px solid transparent;
137+
bottom: 0;
138+
right: -20px;
139+
}
140+
141+
.chatbot-area .chatarea-inner {
142+
float: left;
143+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /