gemma-3-chat-api-3

Sleeping

App Files Files Community

NanobotzAI commited on May 1

Commit

a49d903

verified ·

1 Parent(s): e7dd97d

Create static/index.html

Browse files

Files changed (1) hide show

static/index.html +401 -0

static/index.html ADDED Viewed

	@@ -0,0 +1,401 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SentryLabs AI Assistant</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Arial, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f7fa;
+        }
+        h1 {
+            color: #2c3e50;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .container {
+            display: flex;
+            gap: 20px;
+            height: calc(100vh - 160px);
+            min-height: 500px;
+        }
+        .upload-section {
+            flex: 1;
+            background: white;
+            border-radius: 8px;
+            padding: 20px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            display: flex;
+            flex-direction: column;
+        }
+        .chat-section {
+            flex: 2;
+            display: flex;
+            flex-direction: column;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        #upload-form {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+        .dropzone {
+            border: 2px dashed #2c3e50;
+            border-radius: 8px;
+            padding: 40px 20px;
+            text-align: center;
+            cursor: pointer;
+            margin-bottom: 20px;
+            background: #f9fafc;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+        .dropzone:hover {
+            background: #eef2f7;
+        }
+        .dropzone p {
+            margin: 10px 0 0;
+            color: #7f8c8d;
+        }
+        input[type="file"] {
+            display: none;
+        }
+        button {
+            background-color: #3498db;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-weight: bold;
+            transition: background-color 0.3s;
+        }
+        button:hover {
+            background-color: #2980b9;
+        }
+        button:disabled {
+            background-color: #95a5a6;
+            cursor: not-allowed;
+        }
+        #status-message {
+            margin-top: 15px;
+            padding: 10px;
+            border-radius: 5px;
+            text-align: center;
+        }
+        .success {
+            background-color: #d5f5e3;
+            color: #27ae60;
+        }
+        .error {
+            background-color: #fadbd8;
+            color: #c0392b;
+        }
+        .chat-container {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+            overflow: hidden;
+        }
+        .messages {
+            flex-grow: 1;
+            overflow-y: auto;
+            padding-right: 10px;
+            margin-bottom: 20px;
+        }
+        .message {
+            margin-bottom: 15px;
+            padding: 12px 16px;
+            border-radius: 8px;
+            max-width: 80%;
+            word-wrap: break-word;
+        }
+        .user {
+            background-color: #e3f2fd;
+            margin-left: auto;
+            border-bottom-right-radius: 2px;
+        }
+        .bot {
+            background-color: #f1f1f1;
+            margin-right: auto;
+            border-bottom-left-radius: 2px;
+        }
+        .input-container {
+            display: flex;
+            gap: 10px;
+        }
+        #user-input {
+            flex-grow: 1;
+            padding: 12px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            resize: none;
+            font-family: inherit;
+        }
+        #user-input:focus {
+            outline: none;
+            border-color: #3498db;
+        }
+        #send-button {
+            align-self: flex-end;
+        }
+        .initial-message {
+            text-align: center;
+            color: #7f8c8d;
+            margin-top: 40px;
+        }
+        @media (max-width: 768px) {
+            .container {
+                flex-direction: column;
+                height: auto;
+            }
+            .upload-section, .chat-section {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <h1>SentryLabs AI Assistant</h1>
+    <div class="container">
+        <div class="upload-section">
+            <h2>Upload Document</h2>
+            <form id="upload-form">
+                <div class="dropzone" id="dropzone">
+                    <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#2c3e50" stroke-width="2">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="17 8 12 3 7 8"></polyline>
+                        <line x1="12" y1="3" x2="12" y2="15"></line>
+                    </svg>
+                    <p>Drag & drop your PDF or click to browse</p>
+                </div>
+                <input type="file" id="file-input" accept=".pdf">
+                <button type="submit" id="upload-button" disabled>Upload PDF</button>
+            </form>
+            <div id="status-message"></div>
+        </div>
+        <div class="chat-section">
+            <div class="chat-container">
+                <div class="messages" id="chat-messages">
+                    <div class="initial-message">
+                        <p>Upload a PDF document to start chatting with the AI assistant.</p>
+                    </div>
+                </div>
+                <div class="input-container">
+                    <textarea id="user-input" placeholder="Ask a question about the document..." rows="2" disabled></textarea>
+                    <button id="send-button" disabled>Send</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const dropzone = document.getElementById('dropzone');
+            const fileInput = document.getElementById('file-input');
+            const uploadForm = document.getElementById('upload-form');
+            const uploadButton = document.getElementById('upload-button');
+            const statusMessage = document.getElementById('status-message');
+            const chatMessages = document.getElementById('chat-messages');
+            const userInput = document.getElementById('user-input');
+            const sendButton = document.getElementById('send-button');
+            let selectedFile = null;
+            // Dropzone functionality
+            dropzone.addEventListener('click', () => fileInput.click());
+            dropzone.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                dropzone.style.borderColor = '#3498db';
+            });
+            dropzone.addEventListener('dragleave', () => {
+                dropzone.style.borderColor = '#2c3e50';
+            });
+            dropzone.addEventListener('drop', (e) => {
+                e.preventDefault();
+                dropzone.style.borderColor = '#2c3e50';
+                if (e.dataTransfer.files.length) {
+                    handleFileSelection(e.dataTransfer.files[0]);
+                }
+            });
+            fileInput.addEventListener('change', () => {
+                if (fileInput.files.length) {
+                    handleFileSelection(fileInput.files[0]);
+                }
+            });
+            function handleFileSelection(file) {
+                if (file.type !== 'application/pdf') {
+                    showStatus('Please select a PDF file.', 'error');
+                    return;
+                }
+                selectedFile = file;
+                dropzone.innerHTML = `<p>${file.name}</p>`;
+                uploadButton.disabled = false;
+                showStatus('', '');
+            }
+            // PDF Upload functionality
+            uploadForm.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                if (!selectedFile) return;
+                const formData = new FormData();
+                formData.append('pdf', selectedFile);
+                uploadButton.disabled = true;
+                showStatus('Uploading and processing...', '');
+                try {
+                    const response = await fetch('/upload_pdf', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    const result = await response.json();
+                    if (response.ok) {
+                        showStatus(result.message, 'success');
+                        enableChat();
+                        // Clear initial message and add bot welcome
+                        chatMessages.innerHTML = '';
+                        addBotMessage("Hello! I've analyzed your document. What would you like to know about it?");
+                    } else {
+                        showStatus(result.error, 'error');
+                        uploadButton.disabled = false;
+                    }
+                } catch (error) {
+                    showStatus('Network error. Please try again.', 'error');
+                    uploadButton.disabled = false;
+                }
+            });
+            function showStatus(message, type) {
+                statusMessage.textContent = message;
+                statusMessage.className = type;
+            }
+            function enableChat() {
+                userInput.disabled = false;
+                sendButton.disabled = false;
+                userInput.focus();
+            }
+            // Chat functionality
+            sendButton.addEventListener('click', sendMessage);
+            userInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    sendMessage();
+                }
+            });
+            async function sendMessage() {
+                const message = userInput.value.trim();
+                if (!message) return;
+                // Add user message to chat
+                addUserMessage(message);
+                userInput.value = '';
+                // Disable input while processing
+                userInput.disabled = true;
+                sendButton.disabled = true;
+                try {
+                    const response = await fetch('/ask_question', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({ message })
+                    });
+                    const result = await response.json();
+                    // Add bot response to chat
+                    addBotMessage(result.response);
+                } catch (error) {
+                    addBotMessage("I'm sorry, I couldn't process your request. Please try again.");
+                } finally {
+                    // Re-enable input
+                    userInput.disabled = false;
+                    sendButton.disabled = false;
+                    userInput.focus();
+                }
+            }
+            function addUserMessage(text) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = 'message user';
+                messageDiv.textContent = text;
+                chatMessages.appendChild(messageDiv);
+                scrollToBottom();
+            }
+            function addBotMessage(text) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = 'message bot';
+                messageDiv.textContent = text;
+                chatMessages.appendChild(messageDiv);
+                scrollToBottom();
+            }
+            function scrollToBottom() {
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            }
+        });
+    </script>
+</body>
+</html>