Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>JUIT AI Assist</title> | |
| <link rel="shortcut icon" href="/static/images/juit.png" type="image/x-icon"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | |
| integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" | |
| crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" | |
| integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" | |
| crossorigin="anonymous"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script> | |
| window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); }; | |
| </script> | |
| <script defer src="/_vercel/insights/script.js"></script> | |
| <link rel="stylesheet" type="text/css" href="static/style.css" /> | |
| <style> | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container-fluid h-100"> | |
| <div class="row no-gutters h-100"> | |
| <div class=" chat"> | |
| <div class="card"> | |
| <div class="card-header msg_head"> | |
| <div class="d-flex bd-highlight"> | |
| <div class="img_cont"> | |
| <img src="/static/images/juit.png" class="rounded-circle user_img"> | |
| <span class="online_icon"></span> | |
| </div> | |
| <div class="user_info"> | |
| <span>JUIT AI Assist</span> | |
| <p font-size="200px">Explore College and Beyond: Ask Anything! 🎓</p> | |
| </div> | |
| <div class="d-flex flex-row align-items-baseline ml-auto"> | |
| <button id="themeToggle" class="btn btn-sm btn-light" style="position: static;">Light Mode</button> | |
| <button id="clearChat" class="btn btn-danger btn-sm mt-2">Clear Chat</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="messageFormeight" class="card-body msg_card_body"> | |
| <!-- Chat messages will be displayed here --> | |
| </div> | |
| <div class="card-footer" style="position: relative;"> | |
| <form id="messageArea" class="input-group" style="position: relative;"> | |
| <!-- Predictive Text Suggestions (ADD THIS HERE) --> | |
| <div class="predictive-text" style="position: absolute; display: none; z-index: 1000; width: 100%;"></div> | |
| <input type="text" id="text" name="msg" placeholder="Type your message..." autocomplete="off" | |
| class="form-control type_msg" required /> | |
| <div class="input-group-append"> | |
| <button type="submit" id="send" class="input-group-text send_btn"> | |
| <i class="fas fa-location-arrow"></i> | |
| </button> | |
| </div> | |
| </form> | |
| <div class="card-footer text-center"> | |
| <div class="d-flex justify-content-center align-items-center"> | |
| <span class="mr-2">Developed by:</span> | |
| <span class="mr-2">Ramandeep Singh Makkar</span> | |
| <a href="https://www.linkedin.com/in/ramandeep-singh-makkar/" target="_blank" class="mr-2"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="mailto:[email protected]" class="mr-3"> | |
| <i class="fas fa-envelope"></i> | |
| </a> | |
| <span class="mr-2">Aditya Singh</span> | |
| <a href="https://www.linkedin.com/in/aditsg26/" target="_blank" class="mr-2"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="mailto:[email protected]"> | |
| <i class="fas fa-envelope"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| $(document).ready(function() { | |
| let chatHistory = []; // Stores the user's input history | |
| let currentIndex = -1; // Tracks the current position in the history | |
| // Handle predictive text | |
| $("#text").on("input", function() { | |
| var input = $(this).val().toLowerCase(); | |
| var predictions = getPredictiveText(input); | |
| showPredictiveText(predictions); | |
| }); | |
| $(document).on("click", ".predictive-text p", function() { | |
| var text = $(this).text(); | |
| $("#text").val(text); | |
| $(".predictive-text").hide(); | |
| }); | |
| function getPredictiveText(input) { | |
| var predictions = []; | |
| var patterns = { | |
| "greeting": ["Hi", "Hey", "How are you", "what's up", "Is anyone there?", "Hello", "Good day"], | |
| "name": ["what is your name", "name", "what's your name", "who are you", "what should I call you"] | |
| }; | |
| for (var tag in patterns) { | |
| patterns[tag].forEach(function(pattern) { | |
| if (pattern.toLowerCase().startsWith(input) && !predictions.includes(pattern)) { | |
| predictions.push(pattern); | |
| } | |
| }); | |
| } | |
| return predictions; | |
| } | |
| function showPredictiveText(predictions) { | |
| if (predictions.length > 0) { | |
| var html = ""; | |
| predictions.forEach(function(prediction) { | |
| html += "<p>" + prediction + "</p>"; | |
| }); | |
| $(".predictive-text").html(html).show(); | |
| } else { | |
| $(".predictive-text").hide(); | |
| } | |
| } | |
| // Handle message submission and user input history | |
| $("#messageArea").on("submit", function(event) { | |
| $(".predictive-text").hide(); // Hide predictive suggestions | |
| const date = new Date(); | |
| const hour = date.getHours().toString().padStart(2, '0'); | |
| const minute = date.getMinutes().toString().padStart(2, '0'); | |
| const str_time = hour + ":" + minute; | |
| var rawText = $("#text").val(); | |
| chatHistory.push(rawText); // Store the user's message in history | |
| currentIndex = chatHistory.length - 1; // Update the current index | |
| var userHtml = ` | |
| <div class="d-flex justify-content-end mb-4"> | |
| <div class="msg_container_send">${rawText} | |
| <span class="msg_time_send">${str_time}</span> | |
| </div> | |
| <div class="img_cont_msg"> | |
| <img src="/static/images/user.png" class="rounded-circle user_img_msg"> | |
| </div> | |
| </div>`; | |
| $("#text").val(""); // Clear the input field | |
| $("#messageFormeight").append(userHtml); // Add the user message to the chat | |
| $(document).ready(function () { | |
| let chatHistory = JSON.parse(localStorage.getItem("chatHistory")) || []; // Load stored history | |
| let currentIndex = chatHistory.length; // Set index to last message | |
| $("#messageArea").on("submit", function (event) { | |
| event.preventDefault(); // Prevent form submission | |
| let rawText = $("#text").val().trim(); | |
| if (rawText === "") return; // Ignore empty input | |
| const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); | |
| // Append user message to chat | |
| let userHtml = ` | |
| <div class="d-flex justify-content-end mb-4"> | |
| <div class="msg_container_send">${rawText}<span class="msg_time_send">${time}</span></div> | |
| <div class="img_cont_msg"><img src="https://i.ibb.co/d5b84Xw/Untitled-design.png" class="rounded-circle user_img_msg"></div> | |
| </div>`; | |
| $("#messageFormeight").append(userHtml); | |
| // Update chat history | |
| chatHistory.push(rawText); | |
| localStorage.setItem("chatHistory", JSON.stringify(chatHistory)); // Save in localStorage | |
| currentIndex = chatHistory.length; // Reset index to end | |
| // Clear input field & scroll down | |
| $("#text").val(""); | |
| $("#messageFormeight").animate({ scrollTop: $("#messageFormeight")[0].scrollHeight }, 500); | |
| // Send message to server | |
| $.ajax({ | |
| data: { msg: rawText }, | |
| type: "POST", | |
| url: "/get", | |
| }).done(function (response) { | |
| let botHtml = ` | |
| <div class="d-flex justify-content-start mb-4"> | |
| <div class="img_cont_msg"> | |
| <img src="/static/images/juit.png" class="rounded-circle user_img_msg"> | |
| </div> | |
| <div class="msg_container">${response}<span class="msg_time">${time}</span></div> | |
| </div>`; | |
| $("#messageFormeight").append($.parseHTML(botHtml)); | |
| $("#messageFormeight").animate({ scrollTop: $("#messageFormeight")[0].scrollHeight }, 500); | |
| }); | |
| }); | |
| // Clear chat history | |
| $("#clearChat").click(function () { | |
| $("#messageFormeight").html(""); // Clears UI | |
| chatHistory = []; // Clears array | |
| localStorage.removeItem("chatHistory"); // Clears from storage | |
| currentIndex = 0; | |
| }); | |
| }); | |
| // Send the message to the server via AJAX | |
| $.ajax({ | |
| data: { | |
| msg: rawText, | |
| }, | |
| type: "POST", | |
| url: "/get", | |
| }).done(function(data) { | |
| // --- Typewriter effect for bot response START --- | |
| var lines = data.split("**"); | |
| var fullText = lines.join(' '); | |
| // Create the container for the bot message | |
| var botContainer = $('<div class="d-flex justify-content-start mb-4"></div>'); | |
| var imgDiv = $('<div class="img_cont_msg"><img src="/static/images/juit.png" class="rounded-circle user_img_msg"></div>'); | |
| var msgDiv = $('<div class="msg_container"></div>'); | |
| botContainer.append(imgDiv); | |
| botContainer.append(msgDiv); | |
| $("#messageFormeight").append(botContainer); | |
| var i = 0; | |
| function typeWriter() { | |
| if (i < fullText.length) { | |
| var charSpan = $('<span style="opacity: 0;">' + fullText.charAt(i) + '</span>'); | |
| msgDiv.append(charSpan); // Append the character | |
| charSpan.animate({ opacity: 1 }, 150); // Fade-in effect | |
| i++; | |
| setTimeout(typeWriter, 15); // Adjust delay as needed | |
| } else { | |
| msgDiv.append('<span class="msg_time">' + str_time + '</span>'); | |
| // Smooth scroll to the bottom of the chat | |
| var container = $("#messageFormeight"); | |
| container.animate({ scrollTop: container.prop("scrollHeight") }, 500); | |
| } | |
| } | |
| typeWriter(); | |
| // --- Typewriter effect for bot response END --- | |
| }); | |
| event.preventDefault(); | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| document.addEventListener("DOMContentLoaded", () => { | |
| const themeToggle = document.getElementById("themeToggle"); | |
| const body = document.body; | |
| // Check local storage for a saved theme, default to dark | |
| const savedTheme = localStorage.getItem("theme") || "dark"; | |
| if (savedTheme === "light") { | |
| body.classList.add("light-mode"); | |
| body.classList.remove("dark-mode"); | |
| } else { | |
| body.classList.add("dark-mode"); | |
| body.classList.remove("light-mode"); | |
| } | |
| updateButton(); // Update button text on load | |
| // Toggle theme on button click | |
| themeToggle.addEventListener("click", () => { | |
| if (body.classList.contains("light-mode")) { | |
| // Switch to dark mode | |
| body.classList.remove("light-mode"); | |
| body.classList.add("dark-mode"); | |
| localStorage.setItem("theme", "dark"); | |
| } else { | |
| // Switch to light mode | |
| body.classList.remove("dark-mode"); | |
| body.classList.add("light-mode"); | |
| localStorage.setItem("theme", "light"); | |
| } | |
| updateButton(); | |
| }); | |
| function updateButton() { | |
| if (body.classList.contains("light-mode")) { | |
| // Show sun icon when in light mode (indicating you can switch to dark) | |
| themeToggle.innerHTML = '<i class="fas fa-sun"></i> Dark Mode'; | |
| } else { | |
| // Show moon icon when in dark mode (indicating you can switch to light) | |
| themeToggle.innerHTML = '<i class="fas fa-moon"></i> Light Mode'; | |
| } | |
| } | |
| }); | |
| function showPredictiveText(predictions) { | |
| if (predictions.length > 0 && $("#text").val().trim() !== "") { | |
| let html = predictions.map(p => `<p>${p}</p>`).join(''); | |
| $(".predictive-text").html(html).show(); | |
| } else { | |
| $(".predictive-text").hide(); | |
| } | |
| } | |
| function scrollToBottom() { | |
| $("#messageFormeight").animate({ scrollTop: $("#messageFormeight")[0].scrollHeight }, 500); | |
| } | |
| $(document).ready(function() { | |
| $("#clearChat").click(function() { | |
| $("#messageFormeight").html(""); // Clears the chat area | |
| localStorage.removeItem("chatHistory"); // Clears stored history | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |