| <!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> |
|
|
