Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>University Assistant</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" | |
| href="{{ url_for('static', filename='style.css') }}"> | |
| <!-- <link rel="stylesheet" href="../static/style.css"> --> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| }; | |
| </script> | |
| </head> | |
| <body class="bg-zinc-100 text-black dark:bg-slate-950 dark:text-white flex items-center justify-center min-h-screen"> | |
| <div | |
| class="flex w-full flex-col overflow-hidden border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg h-screen relative"> | |
| <!-- Theme Toggle Icon --> | |
| <button id="theme-toggle" | |
| class="absolute top-2 right-2 z-20 flex h-9 w-9 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 text-black dark:text-white shadow transition-all" | |
| title="Toggle Theme"> | |
| 🌓 | |
| </button> | |
| <div class="flex flex-col flex-grow overflow-hidden"> | |
| <div id="chat-container" class="flex-grow overflow-y-auto p-3 space-y-3 bg-zinc-100 dark:bg-slate-950"> | |
| <!-- Chat messages will appear here --> | |
| </div> | |
| <div class="border-t p-2 border-gray-300 dark:border-slate-800"> | |
| <div class="flex gap-2"> | |
| <input id="chat-input" | |
| class="flex-grow rounded-md border border-gray-300 dark:border-slate-800 bg-white dark:bg-slate-800 px-3 py-1 text-sm text-black dark:text-white focus:outline-none" | |
| type="text" placeholder="Type your question here..." /> | |
| <button id="send-button" class="rounded-md bg-blue-600 px-3 py-1 text-white hover:bg-blue-700"> | |
| ➤ | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const toggleButton = document.getElementById("theme-toggle"); | |
| toggleButton.addEventListener("click", () => { | |
| document.documentElement.classList.toggle("dark"); | |
| // Optional: save preference | |
| if (document.documentElement.classList.contains("dark")) { | |
| localStorage.setItem("theme", "dark"); | |
| } else { | |
| localStorage.setItem("theme", "light"); | |
| } | |
| }); | |
| // Optional: load theme from localStorage | |
| if (localStorage.getItem("theme") === "dark") { | |
| document.documentElement.classList.add("dark"); | |
| } | |
| const API_BASE_URL = window.location.origin; | |
| const chatContainer = document.getElementById("chat-container"); | |
| const chatInput = document.getElementById("chat-input"); | |
| const sendButton = document.getElementById("send-button"); | |
| const initialMessage = { | |
| id: "1", | |
| text: "Hello! I'm the JUIT University Assistant. How can I help you today? !(The first message may take 10-15s to load)", | |
| isUser: false, | |
| }; | |
| let messages = [initialMessage]; | |
| let isTyping = false; | |
| function renderMessages() { | |
| chatContainer.innerHTML = ""; | |
| messages.forEach((msg) => { | |
| const bubble = document.createElement("div"); | |
| bubble.className = `flex items-start gap-2 ${msg.isUser ? "flex-row-reverse" : "flex-row"}`; | |
| const avatar = document.createElement("img"); | |
| avatar.className = "h-9 w-9 rounded-full object-cover"; | |
| // Use complete URLs for images | |
| const baseUrl = window.location.origin; | |
| avatar.src = msg.isUser ? `${baseUrl}/static/profile.png` : `${baseUrl}/static/JUIT_icon.png`; | |
| // avatar.src = msg.isUser ? `../static/profile.png` : `../static/JUIT_icon.png`; | |
| avatar.alt = msg.isUser ? "" : ""; | |
| avatar.onerror = function () { | |
| // Fallback if image fails to load | |
| this.src = msg.isUser ? | |
| "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%230ea5e9'/%3E%3C/svg%3E" : | |
| "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23475569'/%3E%3C/svg%3E"; | |
| }; | |
| const msgDiv = document.createElement("div"); | |
| msgDiv.className = `max-w-[75%] break-words rounded-md px-3 py-1 text-sm ${ | |
| msg.isUser | |
| ? "bg-blue-600 text-white rounded-tr-none" | |
| : "bg-gray-200 text-black light:bg-gray-700 light:text-white rounded-tl-none" | |
| }`; | |
| msgDiv.innerText = msg.text; | |
| bubble.appendChild(avatar); | |
| bubble.appendChild(msgDiv); | |
| chatContainer.appendChild(bubble); | |
| }); | |
| if (isTyping) { | |
| const typing = document.createElement("div"); | |
| typing.className = "flex items-start gap-2"; | |
| typing.innerHTML = ` | |
| <img src="../static/JUIT_icon.png" alt="Bot" class="h-9 w-9 rounded-full object-cover" /> | |
| <div class="max-w-[75%] rounded-md rounded-tl-none bg-gray-200 light:bg-gray-700 px-3 py-1 text-sm"> | |
| <div class="dot-typing text-black light:text-white"> | |
| <span>.</span><span>.</span><span>.</span> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(typing); | |
| } | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| async function simulateBotResponse(userInput) { | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/get`, { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| }, | |
| body: JSON.stringify({ | |
| message: userInput | |
| }), | |
| }); | |
| if (!response.ok) { | |
| const errorText = await response.text(); | |
| throw new Error(`API error (${response.status}): ${errorText}`); | |
| } | |
| const data = await response.json(); | |
| if (data.error) throw new Error(data.error); | |
| return data.response; | |
| } catch (error) { | |
| console.error("Error fetching response:", error); | |
| throw error; | |
| } | |
| } | |
| async function handleSendMessage() { | |
| const text = chatInput.value.trim(); | |
| if (!text || isTyping) return; | |
| const userMessage = { | |
| id: Date.now().toString(), | |
| text, | |
| isUser: true, | |
| }; | |
| messages.push(userMessage); | |
| chatInput.value = ""; | |
| isTyping = true; | |
| // Render messages, including typing animation | |
| renderMessages(); | |
| // Add typing animation (". . .") | |
| const typingMessage = { | |
| id: "typing", | |
| text: ". . .", // Use animated dots here | |
| isUser: false, | |
| }; | |
| messages.push(typingMessage); | |
| try { | |
| const res = await simulateBotResponse(text); | |
| // Remove typing animation once response is received | |
| messages.pop(); // Removes the ". . ." animation message | |
| const botMessage = { | |
| id: (Date.now() + 1).toString(), | |
| text: res.response, | |
| isUser: false, | |
| }; | |
| messages.push(botMessage); | |
| } catch (error) { | |
| // Remove typing animation if there's an error | |
| messages.pop(); // Removes the ". . ." animation message | |
| messages.push({ | |
| id: Date.now().toString(), | |
| text: `Error: ${error.message || "Failed to get response. Please try again."}`, | |
| isUser: false, | |
| }); | |
| } | |
| isTyping = false; | |
| renderMessages(); | |
| } | |
| // Check server health on page load | |
| async function checkServerHealth() { | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/health`); | |
| if (!response.ok) { | |
| console.warn("Server health check failed"); | |
| } | |
| } catch (error) { | |
| console.error("Server health check error:", error); | |
| } | |
| } | |
| sendButton.addEventListener("click", handleSendMessage); | |
| chatInput.addEventListener("keydown", (e) => { | |
| if (e.key === "Enter" && !e.shiftKey) { | |
| e.preventDefault(); | |
| handleSendMessage(); | |
| } | |
| }); | |
| // Initialize | |
| renderMessages(); | |
| checkServerHealth(); | |
| </script> | |
| </body> | |
| </html> | |