Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nexus AI ChatBot</title> | |
| <style> | |
| body { font-family: 'Segoe UI', Roboto, sans-serif; background: #212121; color: #ececf1; margin: 0; display: flex; flex-direction: column; height: 100vh; } | |
| /* Chat Area */ | |
| #chat-window { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 20px 0; } | |
| .row { width: 100%; display: flex; justify-content: center; padding: 25px 0; border-bottom: 1px solid #3d3d3d; } | |
| .user-row { background: #2f2f2f; } | |
| .message-content { max-width: 800px; width: 90%; display: flex; gap: 20px; line-height: 1.6; font-size: 16px; } | |
| .avatar { width: 30px; height: 30px; border-radius: 2px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; } | |
| .ai-avatar { background: #19c37d; } | |
| .user-avatar { background: #5436da; } | |
| /* Input Bar */ | |
| #input-area { padding: 40px 20px; background: linear-gradient(transparent, #212121 50%); position: sticky; bottom: 0; display: flex; justify-content: center; } | |
| .input-container { max-width: 800px; width: 100%; position: relative; } | |
| input { width: 100%; padding: 14px 45px 14px 16px; background: #40414f; border: 1px solid #565869; border-radius: 8px; color: white; font-size: 16px; outline: none; box-sizing: border-box; } | |
| button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: #acacbe; cursor: pointer; font-size: 20px; } | |
| /* Loading dots */ | |
| .typing { font-style: italic; color: #9a9a9a; font-size: 14px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chat-window"> | |
| <div class="row"> | |
| <div class="message-content"> | |
| <div class="avatar ai-avatar">AI</div> | |
| <div class="text">Hello! I am Nexus AI. Ask me anything that you want to know.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="input-area"> | |
| <div class="input-container"> | |
| <input type="text" id="userInput" placeholder="Send a message..." onkeypress="if(event.key==='Enter') sendMessage()"> | |
| <button onclick="sendMessage()">➤</button> | |
| </div> | |
| </div> | |
| <script> | |
| async function sendMessage() { | |
| const input = document.getElementById('userInput'); | |
| const chat = document.getElementById('chat-window'); | |
| const query = input.value.trim(); | |
| if(!query) return; | |
| // 1. Add User Message | |
| chat.innerHTML += ` | |
| <div class="row user-row"> | |
| <div class="message-content"> | |
| <div class="avatar user-avatar">U</div> | |
| <div class="text">${query}</div> | |
| </div> | |
| </div>`; | |
| input.value = ''; | |
| // 2. Add AI Placeholder (Loading) | |
| const aiId = "ai-" + Date.now(); | |
| chat.innerHTML += ` | |
| <div class="row"> | |
| <div class="message-content"> | |
| <div class="avatar ai-avatar">AI</div> | |
| <div class="text typing" id="${aiId}">Thinking...</div> | |
| </div> | |
| </div>`; | |
| chat.scrollTop = chat.scrollHeight; | |
| // 3. Fetch Answer | |
| try { | |
| const res = await fetch('/ask', { | |
| method: 'POST', | |
| headers: {'Content-Type': 'application/json'}, | |
| body: JSON.stringify({query: query}) | |
| }); | |
| const data = await res.json(); | |
| // 4. Type the Answer | |
| const aiDiv = document.getElementById(aiId); | |
| aiDiv.classList.remove('typing'); | |
| aiDiv.innerText = ''; | |
| typeWriter(aiDiv, data.answer); | |
| } catch (e) { | |
| document.getElementById(aiId).innerText = "Error: Could not connect to the AI."; | |
| } | |
| } | |
| function typeWriter(element, text) { | |
| let i = 0; | |
| function type() { | |
| if (i < text.length) { | |
| element.innerHTML += text.charAt(i); | |
| i++; | |
| setTimeout(type, 15); // Adjust speed here | |
| document.getElementById('chat-window').scrollTop = document.getElementById('chat-window').scrollHeight; | |
| } | |
| } | |
| type(); | |
| } | |
| </script> | |
| </body> | |
| </html> |