gemma-3-chat-api-2

Sleeping

App Files Files Community

NanobotzAI commited on Apr 7

Commit

9d2b0e2

verified ·

1 Parent(s): 760592c

Update index.html

Browse files

Files changed (1) hide show

index.html +467 -48

index.html CHANGED Viewed

@@ -3,50 +3,381 @@
 <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',
@@ -55,47 +386,135 @@
                     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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document Assistant</title>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <style>
+        :root {
+            --primary-color: #36393f; /* Dark background */
+            --secondary-color: #40444b; /* Slightly lighter dark */
+            --text-color: #dcddde;     /* Light gray text */
+            --accent-color: #7289da;   /* Blurple */
+            --user-message-bg: #7289da; /* User message bubble */
+            --assistant-message-bg: #4f545c; /* Assistant message bubble */
+            --input-bg: #40444b;
+            --border-color: #2f3136;
+            --success-color: #43b581;
+            --error-color: #f04747;
+            --font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+            --border-radius: 8px;
         }
+        body {
+            font-family: var(--font-family);
+            background-color: var(--primary-color);
+            color: var(--text-color);
+            margin: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
             padding: 20px;
+            box-sizing: border-box;
+        }
+        .chat-container {
+            background-color: var(--secondary-color);
+            border-radius: var(--border-radius);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+            width: 100%;
+            max-width: 700px;
+            height: 85vh; /* Limit height */
+            display: flex;
+            flex-direction: column;
+            overflow: hidden; /* Contain children */
+        }
+        header {
+            background-color: var(--primary-color);
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            text-align: center;
+        }
+        header h1 {
+            margin: 0;
+            font-size: 1.4em;
+            color: #fff;
+        }
+        .upload-section {
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            background-color: var(--secondary-color); /* Match container bg */
         }
+        /* Hide default file input */
+        #pdfUpload {
+            display: none;
+        }
+        /* Style the label like a button */
+        .upload-label {
+            background-color: var(--accent-color);
+            color: white;
+            padding: 8px 15px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.2s ease;
+            font-size: 0.9em;
+            white-space: nowrap;
+        }
+        .upload-label:hover {
+            background-color: #677bc4; /* Slightly darker accent */
+        }
+        #uploadStatus {
+            font-size: 0.85em;
+            color: var(--text-color);
+            flex-grow: 1; /* Take remaining space */
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
         #chat {
+            flex-grow: 1; /* Take available space */
             overflow-y: auto;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 15px; /* Space between messages */
         }
+        /* Scrollbar styling (optional, WebKit browsers) */
+        #chat::-webkit-scrollbar {
+            width: 8px;
+        }
+        #chat::-webkit-scrollbar-track {
+            background: var(--secondary-color);
+        }
+        #chat::-webkit-scrollbar-thumb {
+            background-color: var(--input-bg);
+            border-radius: 4px;
+        }
+         #chat::-webkit-scrollbar-thumb:hover {
+            background-color: #5c616a;
+         }
+        .message {
+            display: flex;
+            max-width: 75%;
+            opacity: 0; /* Start hidden for animation */
+            animation: fadeIn 0.3s ease forwards;
+        }
+        @keyframes fadeIn {
+            to { opacity: 1; }
+        }
+        .message-content {
+            padding: 10px 15px;
+            border-radius: var(--border-radius);
+            line-height: 1.4;
+            word-wrap: break-word;
+            font-size: 0.95em;
+        }
+        .message.user {
+            margin-left: auto; /* Align right */
+            flex-direction: row-reverse; /* Keep content left within flex */
+        }
+        .message.user .message-content {
+            background-color: var(--user-message-bg);
+            color: white;
+            border-bottom-right-radius: 2px; /* Subtle shape difference */
+        }
+        .message.assistant {
+            margin-right: auto; /* Align left */
+        }
+        .message.assistant .message-content {
+            background-color: var(--assistant-message-bg);
+            color: var(--text-color);
+            border-bottom-left-radius: 2px; /* Subtle shape difference */
+        }
+        .message.system { /* For status messages like errors */
+            font-style: italic;
+            color: var(--error-color);
+            text-align: center;
+            width: 100%;
+            max-width: 100%;
+            font-size: 0.9em;
+            margin: 5px 0;
+        }
+        .message.system .message-content {
+             background: none;
+             padding: 0;
+        }
+        .input-area {
+            display: flex;
+            padding: 15px 20px;
+            border-top: 1px solid var(--border-color);
+            background-color: var(--primary-color);
         }
+        #userInput {
+            flex-grow: 1;
+            background-color: var(--input-bg);
+            color: var(--text-color);
+            border: none;
+            border-radius: var(--border-radius);
+            padding: 10px 15px;
+            resize: none; /* Prevent manual resizing */
+            font-family: var(--font-family);
+            font-size: 0.95em;
+            margin-right: 10px;
+            height: 40px; /* Initial height */
+            max-height: 100px; /* Limit growth */
+            box-sizing: border-box;
+            overflow-y: auto; /* Allow scrolling if text exceeds max height */
+        }
+        #userInput:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px var(--accent-color);
+        }
+        #sendButton {
+            background-color: var(--accent-color);
+            color: white;
+            border: none;
+            border-radius: var(--border-radius);
+            padding: 0 15px;
+            cursor: pointer;
+            font-size: 1.2em; /* Icon size */
+            transition: background-color 0.2s ease, opacity 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 40px;
+            width: 50px; /* Fixed width for the button */
+        }
+        #sendButton:hover {
+            background-color: #677bc4;
+        }
+        #sendButton:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .typing-indicator {
+            display: flex;
+            align-items: center;
+            padding: 5px 0 0 0; /* Add slight top padding */
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            height: 0; /* Start hidden */
+            overflow: hidden;
+        }
+        .typing-indicator.visible {
+            opacity: 1;
+             height: 20px; /* Make visible */
+        }
+        .typing-indicator span {
+             font-size: 0.85em;
+             color: var(--text-color);
+             margin-right: 5px;
+        }
+        .typing-indicator .dot {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            background-color: var(--text-color);
+            border-radius: 50%;
+            margin: 0 2px;
+            animation: typing 1s infinite ease-in-out;
+        }
+        .typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
+        .typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes typing {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-4px); }
+        }
     </style>
 </head>
 <body>
+    <div class="chat-container">
+        <header>
+            <h1>Document Assistant</h1>
+        </header>
+        <div class="upload-section">
+            <label for="pdfUpload" class="upload-label">
+                <i class="fas fa-file-pdf"></i> Choose PDF
+            </label>
+            <input type="file" id="pdfUpload" accept=".pdf" />
+            <span id="uploadStatus">No PDF uploaded yet.</span>
+            <button id="uploadButton" style="display: none;">Upload</button> <!-- Hidden, triggered by JS -->
+        </div>
+        <div id="chat">
+            <!-- Chat messages will appear here -->
+             <div class="message assistant">
+                <div class="message-content">
+                    Please upload a PDF document using the button above to begin.
+                </div>
+            </div>
+        </div>
+        <!-- Typing Indicator -->
+        <div class="typing-indicator" id="typingIndicator">
+             <span>Assistant is typing</span>
+             <div class="dot"></div>
+             <div class="dot"></div>
+             <div class="dot"></div>
+        </div>
+        <div class="input-area">
+            <textarea id="userInput" placeholder="Ask a question about the PDF..." rows="1"></textarea>
+            <button id="sendButton" title="Send Message" disabled> <!-- Start disabled -->
+                <i class="fas fa-paper-plane"></i>
+            </button>
+        </div>
     </div>
     <script>
         $(document).ready(function() {
+            let chatHistory = []; // Use a JS array for history
+            let pdfUploaded = false;
+            // Function to add a message to the chat interface
+            function addMessage(sender, text, type = 'normal') {
+                 // Sanitize text to prevent basic HTML injection
+                 const sanitizedText = $('<div>').text(text).html();
+                 let messageClass = sender; // 'user' or 'assistant' or 'system'
+                 let content = `<div class="message-content">${sanitizedText.replace(/\n/g, '<br>')}</div>`; // Replace newlines with <br>
+                 // Use system class for errors or status messages
+                 if (type === 'error') {
+                    messageClass = 'system';
+                    content = `<div class="message-content">${sanitizedText}</div>`; // No extra formatting needed
+                 } else if (type === 'info') {
+                     messageClass = 'system'; // Or style differently if needed
+                     content = `<div class="message-content" style="color: var(--success-color);">${sanitizedText}</div>`;
+                 }
+                 const messageElement = $(`<div class="message ${messageClass}">${content}</div>`);
+                 $('#chat').append(messageElement);
+                 // Scroll to bottom smoothly
+                 $('#chat').animate({ scrollTop: $('#chat')[0].scrollHeight }, 300);
+            }
+            // Function to show/hide typing indicator
+            function showTypingIndicator(show) {
+                if (show) {
+                    $('#typingIndicator').addClass('visible');
+                } else {
+                    $('#typingIndicator').removeClass('visible');
+                }
+                 // Adjust scroll after potential layout shift
+                 setTimeout(() => {$('#chat').scrollTop($('#chat')[0].scrollHeight);}, 50);
+            }
+            // --- Upload Handling ---
+            // Trigger hidden file input when label is clicked
+             $('.upload-label').on('click', function() {
+                $('#pdfUpload').click();
+            });
+            // Handle file selection
+            $('#pdfUpload').on('change', function() {
+                const file = this.files[0];
+                if (file) {
+                    if (file.type === "application/pdf") {
+                         $('#uploadStatus').text(`Selected: ${file.name}`).css('color', 'var(--text-color)');
+                         // Automatically trigger the hidden upload button's logic
+                         uploadFile(file);
+                    } else {
+                         $('#uploadStatus').text('Error: Please select a PDF file.').css('color', 'var(--error-color)');
+                         this.value = ''; // Reset file input
+                    }
+                } else {
+                     // Optional: Handle case where selection is cancelled
+                     // $('#uploadStatus').text('No file selected.');
+                }
+            });
+            // Actual upload logic (separated function)
+            function uploadFile(file) {
+                const formData = new FormData();
+                formData.append('pdf', file);
+                $('#uploadStatus').text(`Uploading: ${file.name}...`).css('color', 'var(--text-color)');
+                $('.upload-label').prop('disabled', true).css('opacity', 0.6); // Disable button visually
                 $.ajax({
                     url: '/upload_pdf',
                     contentType: false,
                     processData: false,
                     success: function(response) {
+                        $('#uploadStatus').html(`<i class="fas fa-check-circle" style="color: var(--success-color);"></i> ${response.message || 'PDF processed successfully!'}`).css('color', 'var(--success-color)');
+                        // addMessage('system', response.message || 'PDF processed successfully!', 'info'); // Add message to chat
+                        pdfUploaded = true;
+                        $('#sendButton').prop('disabled', false); // Enable send button
+                        $('#userInput').prop('disabled', false).attr('placeholder', 'Ask a question about the PDF...'); // Enable input
                     },
+                    error: function(jqXHR, textStatus, errorThrown) {
+                         let errorMsg = 'Error uploading PDF.';
+                        if (jqXHR.responseJSON && jqXHR.responseJSON.error) {
+                            errorMsg = jqXHR.responseJSON.error;
+                        } else if (jqXHR.responseText) {
+                             // Try to get text if JSON parsing fails
+                             try {
+                                const errObj = JSON.parse(jqXHR.responseText);
+                                if (errObj.error) errorMsg = errObj.error;
+                             } catch (e) { /* Ignore parsing error */ }
+                        }
+                         $('#uploadStatus').text(`Error: ${errorMsg}`).css('color', 'var(--error-color)');
+                         // addMessage('system', `Upload failed: ${errorMsg}`, 'error');
+                         pdfUploaded = false;
+                         $('#sendButton').prop('disabled', true);
+                         $('#userInput').prop('disabled', true).attr('placeholder', 'Upload a PDF first');
+                    },
+                    complete: function() {
+                         $('.upload-label').prop('disabled', false).css('opacity', 1); // Re-enable button
                     }
                 });
+            }
+            // --- Chat Message Handling ---
+            function sendMessage() {
+                const message = $('#userInput').val().trim();
+                if (message === "" || !pdfUploaded) return; // Don't send empty or if no PDF
+                addMessage('user', message);
+                chatHistory.push(["user", message]); // Add user message to history
+                $('#userInput').val('').prop('disabled', true); // Clear and disable input
+                $('#sendButton').prop('disabled', true); // Disable send button
+                showTypingIndicator(true); // Show typing indicator
+                // Prepare history for API (send pairs [user, assistant])
+                const historyForApi = [];
+                for(let i = 0; i < chatHistory.length; i += 2) {
+                    if (chatHistory[i] && chatHistory[i+1]) {
+                         historyForApi.push([ chatHistory[i][1], chatHistory[i+1][1] ]);
+                    }
+                }
+                 // If the last message was user, don't include it in history pairs yet
+                 // The backend structure expects pairs, the current user query is sent separately
                 $.ajax({
                     url: '/ask_question',
                     type: 'POST',
                     contentType: 'application/json',
+                    data: JSON.stringify({
+                        message: message,
+                        // Send history structure expected by backend (pairs of user/assistant)
+                        history: historyForApi
+                    }),
                     success: function(response) {
+                         if (response && response.response) {
+                            addMessage('assistant', response.response);
+                            chatHistory.push(["assistant", response.response]); // Add assistant response
+                         } else {
+                             addMessage('assistant', "Received an empty response.", 'error');
+                              chatHistory.push(["assistant", ""]); // Add empty response pair
+                         }
+                    },
+                    error: function(jqXHR, textStatus, errorThrown) {
+                        let errorMsg = 'Error getting response from assistant.';
+                         if (jqXHR.responseJSON && jqXHR.responseJSON.error) {
+                             errorMsg = jqXHR.responseJSON.error;
+                         } else if (jqXHR.responseJSON && jqXHR.responseJSON.response){
+                             // Sometimes errors might be in 'response' field
+                              errorMsg = jqXHR.responseJSON.response;
+                         }
+                        addMessage('system', errorMsg, 'error');
+                         // Add a placeholder in history to maintain pairing if needed, or adjust logic
+                         chatHistory.push(["assistant", ""]); // Indicate error turn
                     },
+                    complete: function() {
+                        $('#userInput').prop('disabled', false); // Re-enable input
+                        $('#sendButton').prop('disabled', !$('#userInput').val().trim()); // Re-enable send if input has text
+                        showTypingIndicator(false); // Hide typing indicator
+                        $('#userInput').focus(); // Focus back on input
+                        adjustTextareaHeight(); // Adjust height in case of past multiline input
                     }
                 });
+            }
+            // Send message on button click
+            $('#sendButton').click(sendMessage);
+            // Send message on Enter key press in textarea (Shift+Enter for newline)
+            $('#userInput').keypress(function(e) {
+                if (e.which === 13 && !e.shiftKey) {
+                    e.preventDefault(); // Prevent newline
+                    sendMessage();
+                }
+            });
+             // Enable/disable send button based on input
+            $('#userInput').on('input keyup', function() {
+                 adjustTextareaHeight();
+                 const isEmpty = $(this).val().trim() === '';
+                 $('#sendButton').prop('disabled', isEmpty || !pdfUploaded);
             });
+            // Adjust textarea height dynamically
+             function adjustTextareaHeight() {
+                const textarea = $('#userInput')[0];
+                textarea.style.height = 'auto'; // Reset height
+                textarea.style.height = (textarea.scrollHeight) + 'px'; // Set to scroll height
+                 // Check against max-height defined in CSS
+                 const maxHeight = parseInt($(textarea).css('max-height'));
+                 if (textarea.scrollHeight > maxHeight) {
+                     textarea.style.overflowY = 'auto'; // Ensure scrollbar appears if needed
+                 } else {
+                     textarea.style.overflowY = 'hidden'; // Hide scrollbar if not needed
+                 }
+            }
+            // Initial state
+            $('#userInput').prop('disabled', true).attr('placeholder', 'Upload a PDF first');
+            $('#sendButton').prop('disabled', true);
+            adjustTextareaHeight(); // Initial height adjustment
         });
     </script>
 </body>
+</html>