|
|
<!DOCTYPE html> |
|
|
<html lang="ar"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>شات بوت Speedy</title> |
|
|
<style> |
|
|
body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; } |
|
|
#chat-box { width: 80%; max-width: 600px; height: 400px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; margin: 20px 0; } |
|
|
#user-input { width: 80%; padding: 10px; } |
|
|
#send-button { padding: 10px 20px; margin-top: 10px; cursor: pointer; } |
|
|
.message { margin: 10px 0; } |
|
|
.user-message { text-align: right; color: blue; } |
|
|
.bot-message { text-align: left; color: green; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h2>شات بوت Speedy</h2> |
|
|
<div id="chat-box"></div> |
|
|
<input type="text" id="user-input" placeholder="اكتب رسالتك هنا..."> |
|
|
<button id="send-button">إرسال</button> |
|
|
|
|
|
<script> |
|
|
document.getElementById("send-button").addEventListener("click", async () => { |
|
|
const userInput = document.getElementById("user-input").value; |
|
|
if (!userInput) return; |
|
|
|
|
|
const chatBox = document.getElementById("chat-box"); |
|
|
const userMessage = document.createElement("div"); |
|
|
userMessage.className = "message user-message"; |
|
|
userMessage.textContent = userInput; |
|
|
chatBox.appendChild(userMessage); |
|
|
|
|
|
document.getElementById("user-input").value = ""; |
|
|
|
|
|
const response = await fetch("/generate-response", { |
|
|
method: "POST", |
|
|
headers: { "Content-Type": "application/json" }, |
|
|
body: JSON.stringify({ text: userInput }) |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
const botMessage = document.createElement("div"); |
|
|
botMessage.className = "message bot-message"; |
|
|
botMessage.textContent = data.response; |
|
|
chatBox.appendChild(botMessage); |
|
|
|
|
|
chatBox.scrollTop = chatBox.scrollHeight; |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
