index.htmlā¢2.41 kB
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Patient History Chatbot</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
<div class="container">
<h1>Patient History Chatbot</h1>
<!-- Patient ID form -->
<div class="patient-form">
<input type="text" id="patient_id" placeholder="Enter Patient ID">
<button onclick="setPatient()">Set Patient</button>
</div>
<!-- Chat window -->
<div id="chat-window"></div>
<!-- Message input -->
<div class="input-area">
<input type="text" id="message" placeholder="Type your message...">
<button onclick="sendMessage()">Send</button>
<button onclick="resetChat()">Reset</button>
</div>
</div>
<script>
async function setPatient() {
const pid = document.getElementById("patient_id").value;
const formData = new FormData();
formData.append("patient_id", pid);
const res = await fetch("/set_patient", { method: "POST", body: formData });
const data = await res.json();
addMessage("System", data.message || data.error);
}
async function sendMessage() {
const msg = document.getElementById("message").value;
if (!msg) return;
addMessage("You", msg);
document.getElementById("message").value = "";
const formData = new FormData();
formData.append("message", msg);
formData.append("do_search", "true");
const res = await fetch("/chat", { method: "POST", body: formData });
const data = await res.json();
if (data.ok) {
addMessage("Bot", data.reply);
} else {
addMessage("System", data.error);
}
}
async function resetChat() {
const res = await fetch("/reset", { method: "POST" });
const data = await res.json();
document.getElementById("chat-window").innerHTML = "";
addMessage("System", data.message);
}
function addMessage(sender, text) {
const chatWindow = document.getElementById("chat-window");
const msgDiv = document.createElement("div");
msgDiv.className = "message " + sender.toLowerCase();
msgDiv.innerHTML = `<strong>${sender}:</strong> ${text}`;
chatWindow.appendChild(msgDiv);
chatWindow.scrollTop = chatWindow.scrollHeight;
}
</script>
</body>
</html>