Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PDF-Based Chatbot</title> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| } | |
| .container { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| #chat { | |
| max-height: 400px; | |
| overflow-y: auto; | |
| border: 1px solid #ddd; | |
| padding: 10px; | |
| margin-bottom: 20px; | |
| } | |
| input[type="file"] { | |
| margin-bottom: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Chat with Your PDF</h1> | |
| <input type="file" id="pdfUpload" accept=".pdf" /> | |
| <button id="uploadButton">Upload PDF</button> | |
| <div id="chat"></div> | |
| <textarea id="userInput" placeholder="Ask a question" rows="3"></textarea> | |
| <button id="sendButton">Send</button> | |
| <div id="response"></div> | |
| </div> | |
| <script> | |
| $(document).ready(function() { | |
| // Handle PDF upload | |
| $('#uploadButton').click(function() { | |
| var formData = new FormData(); | |
| formData.append('pdf', $('#pdfUpload')[0].files[0]); | |
| $.ajax({ | |
| url: '/upload_pdf', | |
| type: 'POST', | |
| data: formData, | |
| contentType: false, | |
| processData: false, | |
| success: function(response) { | |
| alert(response.message); | |
| }, | |
| error: function(err) { | |
| alert('Error uploading PDF'); | |
| } | |
| }); | |
| }); | |
| // Handle sending user message | |
| $('#sendButton').click(function() { | |
| var message = $('#userInput').val(); | |
| if (message.trim() === "") return; | |
| var history = $('#chat').data('history') || []; | |
| history.push([message, '']); | |
| // Display user message in chat | |
| $('#chat').append(`<div><b>User:</b> ${message}</div>`); | |
| $.ajax({ | |
| url: '/ask_question', | |
| type: 'POST', | |
| contentType: 'application/json', | |
| data: JSON.stringify({ message: message, history: history }), | |
| success: function(response) { | |
| // Display assistant's response in chat | |
| $('#chat').append(`<div><b>Assistant:</b> ${response.response}</div>`); | |
| $('#chat').scrollTop($('#chat')[0].scrollHeight); | |
| // Update history | |
| history.push([message, response.response]); | |
| $('#chat').data('history', history); | |
| }, | |
| error: function(err) { | |
| alert('Error getting response'); | |
| } | |
| }); | |
| $('#userInput').val(''); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |