gemma-3-chat-api

Sleeping

App Files Files Community

NanobotzAI commited on Apr 3, 2025

Commit

24a5e73

verified ·

1 Parent(s): d1b294b

Update index.html

Browse files

Files changed (1) hide show

index.html +80 -41

index.html CHANGED Viewed

@@ -4,59 +4,98 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>PDF-Based Chatbot</title>
     <style>
-        body { font-family: Arial, sans-serif; margin: 20px; text-align: center; }
-        #chat-container { max-width: 600px; margin: auto; }
-        input, button { padding: 10px; margin: 10px; }
-        #response { margin-top: 20px; white-space: pre-wrap; }
     </style>
 </head>
 <body>
-    <h2>Chat with Your PDF</h2>
-    <!-- PDF Upload -->
-    <input type="file" id="pdfInput">
-    <button onclick="uploadPDF()">Upload PDF</button>
-    <hr>
-    <!-- Chat Section -->
-    <div id="chat-container">
-        <input type="text" id="userMessage" placeholder="Ask a question">
-        <button onclick="sendMessage()">Send</button>
-        <p id="response"></p>
     </div>
     <script>
-        function uploadPDF() {
-            let fileInput = document.getElementById('pdfInput');
-            if (!fileInput.files.length) {
-                alert("Please select a PDF file.");
-                return;
-            }
-            let filePath = fileInput.files[0].name;
-            fetch(`/upload_pdf/?file_path=${filePath}`, { method: "POST" })
-                .then(response => response.json())
-                .then(data => alert(data.message))
-                .catch(error => console.error("Error uploading PDF:", error));
-        }
-        function sendMessage() {
-            let userMessage = document.getElementById('userMessage').value;
-            if (!userMessage.trim()) {
-                alert("Please enter a message.");
-                return;
-            }
-            fetch(`/chat/?msg=${encodeURIComponent(userMessage)}`)
-                .then(response => response.json())
-                .then(data => document.getElementById('response').innerText = "AI: " + data.response)
-                .catch(error => console.error("Error fetching response:", error));
-        }
-    </script>
 </body>
 </html>

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