A advance speech chatbot using HTML CSS & JAVASCRIPT WITH SOURCE CODE
A advance speech chatbot using HTML CSS & JAVASCRIPT WITH SOURCE CODE-:
YOTUBECHANNEL LINK - YOUTUBE LINK
IAMGE FOR THIS CHATBOT
IMAGE 1
 |
| SAVE AS BOT.png |
image -2
 |
| save as - bot-mini.png |
image-3
 |
| save as- user.png |
HTML CODE-
SAVE AS- INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<title>Chatbot</title>
<link rel="icon" href="bot.png" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container" class="container">
<div id="chat" class="chat">
<div id="messages" class="messages"></div>
<input id="input" type="text" placeholder="Say something..." autocomplete="off" autofocus="true" />
</div>
<img src="bot.png" alt="Robot cartoon" height="500vh">
</div>
</body>
<script type="text/javascript" src="index.js" ></script>
<script type="text/javascript" src="constants.js" ></script>
<script type="text/javascript" src="speech.js" ></script>
</html>
CSS CODE-
SAVE AS- STYLE.CSS
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
font-family: 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, Helvetica,
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: rgba(223, 242, 247, .5);
height: 100%;
margin: 0;
}
span {
padding-right: 15px;
padding-left: 15px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.chat {
height: 300px;
width: 50vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
::-webkit-input-placeholder {
color: .711
}
input {
border: 0;
padding: 15px;
margin-left: auto;
border-radius: 10px;
}
.messages {
display: flex;
flex-direction: column;
overflow: scroll;
height: 90%;
width: 100%;
background-color: white;
padding: 15px;
margin: 15px;
border-radius: 10px;
}
#bot {
margin-left: auto;
}
.bot {
font-family: Consolas, 'Courier New', Menlo, source-code-pro, Monaco,
monospace;
}
.avatar {
height: 25px;
}
.response {
display: flex;
align-items: center;
margin: 1%;
}
/* Mobile */
/* MADE BY GAURAV TRIPATHI */
@media only screen and (max-width: 980px) {
.container {
flex-direction: column;
justify-content: flex-start;
}
.chat {
width: 75vw;
margin: 10vw;
}
}
JAVASCRIPT CODE-1
SAVE AS- INDEX.JS
document.addEventListener("DOMContentLoaded", () => {
const inputField = document.getElementById("input");
inputField.addEventListener("keydown", (e) => {
if (e.code === "Enter") {
let input = inputField.value;
inputField.value = "";
output(input);
}
});
});
function output(input) {
let product;
//GAURAV TRIPATHI
// Trim trailing whitespce
// made by gaurav tripathi
// But solves problem of entering something like 'hi1'
let text = input.toLowerCase().replace(/[^\w\s]/gi, "").replace(/[\d]/gi, "").trim();
text = text
.replace(/ a /g, " ") // 'tell me a story' -> 'tell me story'
.replace(/i feel /g, "")
.replace(/whats/g, "what is")
.replace(/please /g, "")
.replace(/ please/g, "")
.replace(/r u/g, "are you");
if (compare(prompts, replies, text)) {
// Search for exact match in `prompts`
product = compare(prompts, replies, text);
} else if (text.match(/thank/gi)) {
product = "You're welcome!"
} else if (text.match(/(corona|covid|virus)/gi)) {
// If no match, check if message contains `coronavirus`
product = coronavirus[Math.floor(Math.random() * coronavirus.length)];
} else {
// If all else fails: random alternative
product = alternative[Math.floor(Math.random() * alternative.length)];
}
// Update DOM
addChat(input, product);
}
function compare(promptsArray, repliesArray, string) {
let reply;
let replyFound = false;
for (let x = 0; x < promptsArray.length; x++) {
for (let y = 0; y < promptsArray[x].length; y++) {
if (promptsArray[x][y] === string) {
let replies = repliesArray[x];
reply = replies[Math.floor(Math.random() * replies.length)];
replyFound = true;
// Stop inner loop when input value matches prompts
break;
}
}
if (replyFound) {
// Stop outer loop when reply is found instead of interating through the entire array
break;
}
}
return reply;
}
function addChat(input, product) {
const messagesContainer = document.getElementById("messages");
let userDiv = document.createElement("div");
userDiv.id = "user";
userDiv.className = "user response";
userDiv.innerHTML = `<img src="user.png" class="avatar"><span>${input}</span>`;
messagesContainer.appendChild(userDiv);
let botDiv = document.createElement("div");
let botImg = document.createElement("img");
let botText = document.createElement("span");
botDiv.id = "bot";
botImg.src = "bot-mini.png";
botImg.className = "avatar";
botDiv.className = "bot response";
botText.innerText = "Typing...";
botDiv.appendChild(botText);
botDiv.appendChild(botImg);
messagesContainer.appendChild(botDiv);
// Keep messages at most recent
messagesContainer.scrollTop = messagesContainer.scrollHeight - messagesContainer.clientHeight;
// Fake delay to seem "real"
setTimeout(() => {
botText.innerText = `${product}`;
textToSpeech(product)
}, 2000
)
}
JAVASCRIPT CODE-2
SAVE AS- SPEECH.JS
// Text to Speech
const synth = window.speechSynthesis;
const textToSpeech = (string) => {
let voice = new SpeechSynthesisUtterance(string);
voice.text = string;
voice.lang = "en-US";
voice.volume = 1;
voice.rate = 1;
voice.pitch = 1; // Can be 0, 1, or 2
synth.speak(voice);
}
JAVASCRIPT CODE-3
SAVE AS- CONSTANTS.JS
// Options the user could type in
const prompts = [
["hi", "hey", "hello", "good morning", "good afternoon"],
["how are you", "how is life", "how are things"],
["what are you doing", "what is going on", "what is up"],
["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",
"what call yourself"
],
["i love you"],
["happy", "good", "fun", "wonderful", "fantastic", "cool"],
["bad", "bored", "tired"],
["help me", "tell me story", "tell me joke"],
["ah", "yes", "ok", "okay", "nice"],
["bye", "good bye", "goodbye", "see you later"],
["what should i eat today"],
["bro"],
["what", "why", "how", "where", "when"],
["no","not sure","maybe","no thanks"],
[""],
["haha","ha","lol","hehe","funny","joke"]
]
// Possible responses, in corresponding order
const replies = [
["Hello!", "Hi!", "Hey!", "Hi there!","Howdy"],
[
"Fine... how are you?",
"Pretty well, how are you?",
"Fantastic, how are you?"
],
[
"Nothing much",
"About to go to sleep",
"Can you guess?",
"I don't know actually"
],
["I am infinite"],
["I am just a bot", "I am a bot. What are you?"],
["The one true God, JavaScript"],
["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"],
["What about?", "Once upon a time..."],
["Tell me a story", "Tell me a joke", "Tell me about yourself"],
["Bye", "Goodbye", "See you later"],
["Sushi", "Pizza"],
["Bro!"],
["Great question"],
["That's ok","I understand","What do you want to talk about?"],
["Please say something :("],
["Haha!","Good one!"]
]
// Random for any other user input
const alternative = [
"Same",
"Go on...",
"Bro...",
"Try again sir",
"I'm listening...",
"I don't understand :/"
]
// Whatever else you want :)
const coronavirus = ["Please stay home", "Wear a mask", "Fortunately, I don't have COVID", "These are uncertain times"]
Comments
Post a Comment