File size: 3,266 Bytes
d0a6b4f | 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 109 110 | {% extends "layout.html" %}
{% block content %}
<div class="text-2xl font-bold text-gray-800">
Welcome to NeuroML 🚀
</div>
<p class="mt-4 text-gray-600">
Ask anything about Machine Learning using the chat button.
</p>
<!-- ================= CHAT BUTTON ================= -->
<button id="chat-btn"
class="fixed bottom-6 right-6 bg-indigo-600 text-white w-14 h-14 rounded-full shadow-xl text-xl z-50">
🤖
</button>
<!-- ================= CHAT BOX ================= -->
<div id="chat-box"
class="hidden fixed bottom-24 right-6 w-80 bg-white rounded-xl shadow-2xl border z-50">
<div class="p-3 bg-indigo-600 text-white rounded-t-xl font-semibold">
Qwen ML Tutor
</div>
<div id="chat-messages"
class="p-3 h-64 overflow-y-auto text-sm space-y-2">
</div>
<div class="p-3 flex gap-2 border-t">
<input id="chat-input"
class="border flex-1 p-2 rounded text-sm"
placeholder="Ask ML question..." />
<button id="send-btn"
class="bg-indigo-600 text-white px-4 rounded">
Send
</button>
</div>
</div>
<!-- ================= CHAT SCRIPT ================= -->
<script>
const chatBtn = document.getElementById("chat-btn");
const chatBox = document.getElementById("chat-box");
const sendBtn = document.getElementById("send-btn");
const input = document.getElementById("chat-input");
const messages = document.getElementById("chat-messages");
chatBtn.addEventListener("click", () => {
chatBox.classList.toggle("hidden");
});
sendBtn.addEventListener("click", sendMessage);
input.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
sendMessage();
}
});
function addMessage(text, sender) {
const div = document.createElement("div");
if (sender === "user") {
div.className = "text-right";
div.innerHTML = `
<span class="inline-block bg-indigo-500 text-white px-3 py-2 rounded-lg max-w-[85%]">
${text}
</span>
`;
} else {
div.className = "text-left";
div.innerHTML = `
<span class="inline-block bg-gray-200 text-gray-800 px-3 py-2 rounded-lg max-w-[85%]">
${text}
</span>
`;
}
messages.appendChild(div);
messages.scrollTop = messages.scrollHeight;
}
async function sendMessage() {
const text = input.value.trim();
if (!text) return;
addMessage(text, "user");
input.value = "";
try {
const response = await fetch("/chat", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ message: text })
});
const data = await response.json();
addMessage(data.reply, "bot");
} catch (error) {
addMessage("Server error. Please try again.", "bot");
}
}
</script>
{% endblock %}
|