Spaces:
Sleeping
Sleeping
File size: 4,709 Bytes
3e5e7d1 12b0bb5 3e5e7d1 12b0bb5 3e5e7d1 12b0bb5 b002cd8 12b0bb5 b002cd8 12b0bb5 b002cd8 12b0bb5 b002cd8 12b0bb5 b002cd8 12b0bb5 b002cd8 12b0bb5 b002cd8 12b0bb5 b002cd8 12b0bb5 b002cd8 3e5e7d1 12b0bb5 b002cd8 3e5e7d1 9f8c4dc | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | <!DOCTYPE html>
<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> |