|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>ChatBot</title> |
|
<style> |
|
body { font-family: Arial, sans-serif; margin: 20px; } |
|
#chatbox { border: 1px solid #ccc; padding: 10px; width: 300px; height: 400px; overflow-y: scroll; } |
|
#input { margin-top: 10px; width: 300px; } |
|
</style> |
|
</head> |
|
<body> |
|
<h1>ChatBot</h1> |
|
<div id="chatbox"></div> |
|
<input id="input" type="text" placeholder="Scrivi un messaggio..."> |
|
<button onclick="sendMessage()">Invia</button> |
|
|
|
<script> |
|
async function sendMessage() { |
|
const inputField = document.getElementById('input'); |
|
const message = inputField.value; |
|
inputField.value = ''; |
|
|
|
const chatbox = document.getElementById('chatbox'); |
|
chatbox.innerHTML += `<div>Tu: ${message}</div>`; |
|
|
|
const response = await fetch('/chat', { |
|
method: 'POST', |
|
headers: { 'Content-Type': 'application/json' }, |
|
body: JSON.stringify({ prompt: message }) |
|
}); |
|
|
|
const data = await response.json(); |
|
chatbox.innerHTML += `<div>BOT: ${data.response}</div>`; |
|
chatbox.scrollTop = chatbox.scrollHeight; |
|
} |
|
</script> |
|
</body> |
|
</html> |
|
|
