| {% 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>
|
|
|
|
|
| <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>
|
|
|
|
|
| <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>
|
|
|
|
|
| <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 %}
|
|
|
