File size: 2,124 Bytes
fd79d75 1f9d776 fd79d75 9cc77fb 1f9d776 9cc77fb 1f9d776 9cc77fb fd79d75 1f9d776 9cc77fb fd79d75 1f9d776 853d214 1f9d776 9cc77fb 1f9d776 9cc77fb 1f9d776 fd79d75 2acff05 |
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 |
<!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>
|