diff --git a/New_APIs/Chatbot_API/README.md b/New_APIs/Chatbot_API/README.md new file mode 100644 index 0000000..9b51ea0 --- /dev/null +++ b/New_APIs/Chatbot_API/README.md @@ -0,0 +1,12 @@ +**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. + +![image](https://github.com/user-attachments/assets/e75808e0-42a2-4fe7-9ded-94ffe70138e4) + + +[Deployed Link](https://chatbot-api-omega.vercel.app/) diff --git a/New_APIs/Chatbot_API/assets/bot-mini.png b/New_APIs/Chatbot_API/assets/bot-mini.png new file mode 100644 index 0000000..f37417c Binary files /dev/null and b/New_APIs/Chatbot_API/assets/bot-mini.png differ diff --git a/New_APIs/Chatbot_API/assets/bot.png b/New_APIs/Chatbot_API/assets/bot.png new file mode 100644 index 0000000..c6357a2 Binary files /dev/null and b/New_APIs/Chatbot_API/assets/bot.png differ diff --git a/New_APIs/Chatbot_API/assets/user.png b/New_APIs/Chatbot_API/assets/user.png new file mode 100644 index 0000000..369636d Binary files /dev/null and b/New_APIs/Chatbot_API/assets/user.png differ diff --git a/New_APIs/Chatbot_API/constants.js b/New_APIs/Chatbot_API/constants.js new file mode 100644 index 0000000..d0fcdf2 --- /dev/null +++ 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"] \ No newline at end of file diff --git a/New_APIs/Chatbot_API/index.html b/New_APIs/Chatbot_API/index.html new file mode 100644 index 0000000..978b2a7 --- /dev/null +++ b/New_APIs/Chatbot_API/index.html @@ -0,0 +1,23 @@ + + + + + Chatbot + + + + + +
+
+
+ +
+ Robot cartoon +
+ + + + + + \ No newline at end of file diff --git a/New_APIs/Chatbot_API/index.js b/New_APIs/Chatbot_API/index.js new file mode 100644 index 0000000..d3a10c1 --- /dev/null +++ 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 = `${input}`; + 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 + ) + +} \ No newline at end of file diff --git a/New_APIs/Chatbot_API/speech.js b/New_APIs/Chatbot_API/speech.js new file mode 100644 index 0000000..698d71c --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/New_APIs/Chatbot_API/style.css b/New_APIs/Chatbot_API/style.css new file mode 100644 index 0000000..2dff23f --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/New_APIs/Foodie_API/README.md b/New_APIs/Foodie_API/README.md new file mode 100644 index 0000000..389f856 --- /dev/null +++ b/New_APIs/Foodie_API/README.md @@ -0,0 +1 @@ +# hungry diff --git a/New_APIs/Foodie_API/assets/Foodie_API_demo.webm b/New_APIs/Foodie_API/assets/Foodie_API_demo.webm new file mode 100644 index 0000000..f660bf6 Binary files /dev/null and b/New_APIs/Foodie_API/assets/Foodie_API_demo.webm differ diff --git a/New_APIs/Foodie_API/assets/preview.png b/New_APIs/Foodie_API/assets/preview.png new file mode 100644 index 0000000..da01a53 Binary files /dev/null and b/New_APIs/Foodie_API/assets/preview.png differ diff --git a/New_APIs/Foodie_API/index.html b/New_APIs/Foodie_API/index.html new file mode 100644 index 0000000..820a64b --- /dev/null +++ b/New_APIs/Foodie_API/index.html @@ -0,0 +1,58 @@ + + + + + + + Hungry Monster + + + + + + + + + + + + + +
+
+
+
+
+
+
+ + +
+
+
+
+
+ + + + + + + diff --git a/New_APIs/Foodie_API/style.css b/New_APIs/Foodie_API/style.css new file mode 100644 index 0000000..7ce3792 --- /dev/null +++ b/New_APIs/Foodie_API/style.css @@ -0,0 +1,110 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + font-family: 'Poppins', sans-serif; +} +h3 { + font-size: 24px; + color: #333; + font-weight: 600; +} +b { + font-weight: 600; +} +.btn:focus { + box-shadow: none; +} + +#searchBox .input-group { + max-width: 400px; + margin: auto; + background: #ffeee8; + overflow: hidden; + border-radius: 5px; +} +#searchBox .input-group-prepend .input-group-text { + background: none; + border: none; + padding: 0 20px; +} +#searchBox .input-group-append #searchBtn { + padding: 0 25px; + background: #ff855f; + color: #fff; + font-size: 14px; + transition: .4s; +} +#searchBox .input-group-append #searchBtn:hover { + background: #ff6738; +} +#searchBox .input-group .form-control { + padding: 25px; + padding-left: 0; + border: none; + font-size: 14px; + background: #ffeee8; +} +#searchBox .input-group .form-control:focus { + box-shadow: none; +} + +#mealDetailSection #mealDetails { + width: 500px; + margin: auto; + background: #ffeee8; + border-radius: 5px; +} +.item-details { + padding: 0 20px; +} + +#mealDetailSection ul { + list-style: none; + margin-top: 15px; +} +#mealDetailSection ul li { + margin-bottom: 5px; + font-size: 14px; +} +#mealDetailSection ul li .fas { + color: #ff855f +} + +.meal-box { + border: none; + background: #ffeee8; + border-radius: 5px; +} +.meal-box h5 { + color: #333; + font-weight: 600; + padding: 10px; +} + +#meal{ + display: grid; + grid-template-columns: repeat(4, 1fr); + margin: 0px; + align-items: center; + grid-gap: 15px; + position: relative; +} +#mealDetails { + margin: 0 15px; +} + +.error { + position: absolute; + display: block; + width: 100%; + text-align: center; +} + +@media (max-width: 768px) { + #meal{ + grid-template-columns: repeat(2, 2fr) !important; + } +} diff --git a/New_APIs/Foodie_API/style.js b/New_APIs/Foodie_API/style.js new file mode 100644 index 0000000..a02751d --- /dev/null +++ b/New_APIs/Foodie_API/style.js @@ -0,0 +1,104 @@ +const result = document.getElementById('mealDetails'); + +// search button +const searchButton = document.getElementById('searchBtn'); +searchButton.addEventListener('click', (event) => { + event.preventDefault(); + const inputField = document.getElementById('inputField').value; + inputValue(inputField); +}); + +// input field code here +function inputValue(inputField) { + result.style.display = "none"; + const meal = document.getElementById('meal'); + let url = ""; + if (inputField.length === 1) { + url = `https://www.themealdb.com/api/json/v1/1/search.php?f=${inputField}`; + meal.innerHTML = null; + meal.innerHTML = null; + } else { + url = `https://www.themealdb.com/api/json/v1/1/search.php?s=${inputField}`; + meal.innerHTML = null; + meal.innerHTML = null; + } + fetch(url) + .then(res => res.json()) + .then(data => { + displayData(data) + }) +} + +// all meal box here +const displayData = data => { + let text = ""; + if (data.meals) { + data.meals.forEach(item => { + const div = document.createElement('div'); + const allMealInfo = text + ` + `; + div.innerHTML = allMealInfo; + meal.appendChild(div); + }); + } + else { + result.style.display = "none" + const div = document.createElement('div'); + text = ` +
+

eisob amader restaurent e nai!

+
`; + div.innerHTML = text; + meal.appendChild(div); + } +} + +// meal details here +const showMealDetails = (string) => { + url = `https://www.themealdb.com/api/json/v1/1/search.php?s=${string}`; + fetch(url) + .then(res => res.json()) + .then(data => { + result.style.display = "block" + const div = document.createElement('div'); + let mealInfo; + data.meals.forEach(perItem => { + if (string === perItem.strMeal) { + mealInfo = ` +
+ +
+
+

${perItem.strMeal}

+ Ingredients +
+ +
+
`; + } + }) + div.innerHTML = mealInfo; + result.appendChild(div); + }); + result.innerHTML = null; +} diff --git a/New_APIs/README.md b/New_APIs/README.md index 015aa72..96e2ba1 100644 --- 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|