dishamodi0910 · SanskarSinghiit · Aug 9, 2024 · Aug 9, 2024 · Aug 9, 2024
diff --git a/New_APIs/Chatbot_API/README.md b/New_APIs/Chatbot_API/README.md
@@ -0,0 +1,11 @@
+**ChatBot App** is a conversational AI designed to provide intuitive and engaging interactions.
+Whether you need assistance, information, or just a friendly chat, our bot is here to help.
+
+### Features
+- **Natural Language Processing**: Understands and responds to user queries with context.
+- **24/7 Availability**: Always ready to assist, no matter the time.
+- **Customizable Responses**: Tailor responses to fit different scenarios or personalities.
+
+[Deployed Link](https://chatbot-api-omega.vercel.app/)
+
+![image](https://github.com/user-attachments/assets/cf60ab99-80d5-4af0-a9e8-a99ab74a307d)
diff --git a/New_APIs/Chatbot_API/assets/bot-mini.png b/New_APIs/Chatbot_API/assets/bot-mini.png
diff --git a/New_APIs/Chatbot_API/assets/bot.png b/New_APIs/Chatbot_API/assets/bot.png
diff --git a/New_APIs/Chatbot_API/assets/user.png b/New_APIs/Chatbot_API/assets/user.png
diff --git a/New_APIs/Chatbot_API/constants.js b/New_APIs/Chatbot_API/constants.js
@@ -0,0 +1,76 @@
+// 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",
+ "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"]
diff --git a/New_APIs/Chatbot_API/index.html b/New_APIs/Chatbot_API/index.html
@@ -0,0 +1,23 @@
+<!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="./assets/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>
diff --git a/New_APIs/Chatbot_API/index.js b/New_APIs/Chatbot_API/index.js
@@ -0,0 +1,97 @@
+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;
+
+ // Regex remove non word/space chars
+ // Trim trailing whitespce
+ // Remove digits - not sure if this is best
+ // 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="./assets/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 = "./assets/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
+ )
+
+}
diff --git a/New_APIs/Chatbot_API/speech.js b/New_APIs/Chatbot_API/speech.js
@@ -0,0 +1,13 @@
+// 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);
+}
diff --git a/New_APIs/Chatbot_API/style.css b/New_APIs/Chatbot_API/style.css
@@ -0,0 +1,97 @@
+* {
+ 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 */
+
+@media only screen and (max-width: 980px) {
+ .container {
+ flex-direction: column; 
+ justify-content: flex-start;
+ }
+ .chat {
+ width: 75vw;
+ margin: 10vw;
+ }
+}
diff --git a/New_APIs/README.md b/New_APIs/README.md
@@ -22,6 +22,7 @@
 |[Temperature_API](./Temperature_API/)| Real-time global temperature data via HTTP requests from reliable weather sources
 |[Cryptocurrency_API](./Cryptocurrency_API/)|This demonstrates how a convert Cryptocurrency and spefic currency to dollars only|
 |[Weather_Forecast_API](./Weather_Forecast_API/)|This demonstrates we can know weather report via api and spefic locactions only|
+|[Chatbot_API](./Chatbot_API/)| Engage users with contextual replies and automated speech synthesis|