Spaces:
Running
Running
File size: 2,316 Bytes
176bc9a |
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 54 55 56 57 58 59 60 61 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF RAG Chatbot</title>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
#chat-container { border: 1px solid #ddd; height: 400px; overflow-y: scroll; padding: 10px; margin-bottom: 10px; }
#user-input { width: 70%; padding: 5px; }
#send-button { padding: 5px 10px; }
</style>
</head>
<body>
<h1>PDF RAG Chatbot</h1>
<div id="chat-container"></div>
<input type="text" id="user-input" placeholder="Ask a question...">
<button id="send-button">Send</button>
<script>
const chatContainer = document.getElementById('chat-container');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');
function addMessage(role, content) {
const messageDiv = document.createElement('div');
messageDiv.innerHTML = `<strong>${role}:</strong> ${content}`;
chatContainer.appendChild(messageDiv);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
async function sendMessage() {
const question = userInput.value.trim();
if (question) {
addMessage('User', question);
userInput.value = '';
try {
const response = await fetch('/ask', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ question }),
});
const data = await response.json();
addMessage('Bot', data.response);
} catch (error) {
console.error('Error:', error);
addMessage('Bot', 'Sorry, there was an error processing your request.');
}
}
}
sendButton.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendMessage();
});
</script>
</body>
</html> |