Spaces:
Sleeping
Sleeping
File size: 1,752 Bytes
9be21ef | 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 | <!DOCTYPE html>
<html>
<head>
<title>EmpowerHer Chatbot</title>
<style>
body { font-family: Arial, sans-serif; background: #fce8f2; padding: 20px; }
#chat-box { width: 100%; height: 500px; border: 1px solid #ccc; padding: 10px; overflow-y: scroll; background: white; }
#msg { width: 80%; padding: 10px; }
#send { padding: 10px; background: #e91e63; color: white; border: none; }
.meta { color: #444; font-size: 12px; margin: 2px 0 10px 0; }
.meta span { margin-right: 12px; }
</style>
</head>
<body>
<h2>EmpowerHer – Menstrual Support Chatbot</h2>
<div id="chat-box"></div>
<input id="msg" type="text" placeholder="Type your message...">
<button id="send">Send</button>
<script>
document.getElementById("send").onclick = async function() {
const msg = document.getElementById("msg").value;
if (!msg) return;
const box = document.getElementById("chat-box");
box.innerHTML += `<p><b>You:</b> ${msg}</p>`;
const res = await fetch("http://127.0.0.1:5000/chat", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({ message: msg })
});
const data = await res.json();
const emotions = Array.isArray(data.emotions) && data.emotions.length ? data.emotions.join(", ") : "none";
const intent = data.intent || "unknown";
const topic = data.topic || "unknown";
box.innerHTML += `<p><b>Bot:</b> ${data.reply}</p>`;
box.innerHTML += `<div class="meta"><span><b>Emotions:</b> ${emotions}</span><span><b>Intent:</b> ${intent}</span><span><b>Topic:</b> ${topic}</span></div>`;
box.scrollTop = box.scrollHeight;
document.getElementById("msg").value = "";
};
</script>
</body>
</html>
|