Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RAGTAG MVP</title> | |
| <link rel="icon" type="image/x-icon" href="/favicon.ico"> | |
| <style> | |
| body { | |
| font-family: 'Courier New', monospace; | |
| background-color: #000; | |
| color: #00ff00; | |
| margin: 0; | |
| padding: 0; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| #content { | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| padding: 20px; | |
| } | |
| #chat-container { | |
| border: 1px solid #00ff00; | |
| padding: 10px; | |
| margin-bottom: 10px; | |
| min-height: 200px; | |
| } | |
| #input-container { | |
| display: flex; | |
| padding: 10px 20px; | |
| background-color: #000; | |
| border-top: 1px solid #00ff00; | |
| } | |
| #prompt { | |
| color: #00ff00; | |
| margin-right: 5px; | |
| } | |
| #user-input { | |
| flex-grow: 1; | |
| background-color: #000; | |
| border: none; | |
| color: #00ff00; | |
| font-family: 'Courier New', monospace; | |
| font-size: 16px; | |
| } | |
| #user-input:focus { | |
| outline: none; | |
| } | |
| .message { | |
| margin-bottom: 10px; | |
| } | |
| .user-message { | |
| color: #ffffff; | |
| } | |
| .ai-message { | |
| color: #00ff00; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="content"> | |
| <a href="/docmanager" style="color: #00ff00; margin-bottom: 10px; display: block;">Document Manager</a> | |
| <a href="/describer" style="color: #00ff00; margin-bottom: 10px; display: block;">Image Describer</a> | |
| <div id="sessionInfo" style="color: #00ff00; margin-bottom: 10px;"> | |
| <div>Session ID: <span id="sessionIdDisplay"></span></div> | |
| <div>Title Filter: <span id="titleFilterDisplay">None</span></div> | |
| </div> | |
| <button id="clearButton" style="background-color: #003300; color: #00ff00; border: 1px solid #00ff00; padding: 5px 10px; cursor: pointer; margin-bottom: 10px;">Clear Chat</button> | |
| <div id="chat-container"></div> | |
| </div> | |
| <div id="input-container"> | |
| <span id="prompt">$</span> | |
| <input type="text" id="user-input" placeholder="Enter your query..."> | |
| </div> | |
| <script> | |
| const chatContainer = document.getElementById('chat-container'); | |
| const userInput = document.getElementById('user-input'); | |
| const clearButton = document.getElementById('clearButton'); | |
| const sessionIdDisplay = document.getElementById('sessionIdDisplay'); | |
| const titleFilterDisplay = document.getElementById('titleFilterDisplay'); | |
| let queryHistory = []; | |
| let historyIndex = -1; | |
| let sessionId = Date.now().toString(); | |
| let titleFilter = ''; | |
| // Display initial session ID | |
| sessionIdDisplay.textContent = sessionId; | |
| function addMessage(sender, message) { | |
| const messageElement = document.createElement('div'); | |
| messageElement.classList.add('message'); | |
| messageElement.classList.add(sender === 'You' ? 'user-message' : 'ai-message'); | |
| messageElement.textContent = `${sender === 'You' ? '$ ' : ''}${message}`; | |
| chatContainer.appendChild(messageElement); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| async function sendQuery(query) { | |
| try { | |
| const response = await fetch('/query', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ query: query, sessionId: sessionId, titleFilter: titleFilter }), | |
| }); | |
| if (!response.ok) { | |
| throw new Error('Network response was not ok'); | |
| } | |
| const reader = response.body.getReader(); | |
| addMessage('AI', ''); // Add an empty AI message to start | |
| let buffer = ''; | |
| while (true) { | |
| const { value, done } = await reader.read(); | |
| if (done) break; | |
| buffer += new TextDecoder().decode(value); | |
| const lines = buffer.split('\n'); | |
| buffer = lines.pop() || ''; | |
| for (const line of lines) { | |
| if (line.startsWith('data:')) { | |
| const content = line.slice(5); | |
| if (content) { | |
| appendToLastAIMessage(content); | |
| } else { | |
| appendToLastAIMessage('\n'); | |
| } | |
| } | |
| } | |
| } | |
| } catch (error) { | |
| console.error('Error:', error); | |
| addMessage('System', 'An error occurred while processing your request.'); | |
| } | |
| } | |
| function appendToLastAIMessage(content) { | |
| const messages = document.querySelectorAll('.message'); | |
| const lastAIMessage = Array.from(messages).reverse().find(msg => msg.classList.contains('ai-message')); | |
| if (lastAIMessage) { | |
| if (content === '\n') { | |
| lastAIMessage.appendChild(document.createElement('br')); | |
| } else { | |
| lastAIMessage.appendChild(document.createTextNode(content)); | |
| } | |
| lastAIMessage.scrollIntoView({ behavior: 'smooth', block: 'end' }); | |
| } else { | |
| addMessage('AI', content); | |
| } | |
| } | |
| async function clearSession() { | |
| try { | |
| const response = await fetch('/clear_session', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ sessionId: sessionId }), | |
| }); | |
| if (!response.ok) { | |
| throw new Error('Network response was not ok'); | |
| } | |
| chatContainer.innerHTML = ''; | |
| queryHistory = []; | |
| historyIndex = -1; | |
| sessionId = Date.now().toString(); | |
| titleFilter = ''; | |
| sessionIdDisplay.textContent = sessionId; | |
| titleFilterDisplay.textContent = 'None'; | |
| addMessage('System', 'Chat session cleared.'); | |
| } catch (error) { | |
| console.error('Error:', error); | |
| addMessage('System', 'An error occurred while clearing the session.'); | |
| } | |
| } | |
| function processQuery(query) { | |
| if (query.includes('@')) { | |
| const parts = query.split('@'); | |
| if (parts.length > 1) { | |
| titleFilter = parts[1].split(' ')[0]; | |
| titleFilterDisplay.textContent = titleFilter; | |
| } | |
| } | |
| return query; | |
| } | |
| userInput.addEventListener('keydown', (e) => { | |
| if (e.key === 'Enter') { | |
| const query = userInput.value.trim(); | |
| if (query) { | |
| addMessage('You', query); | |
| const processedQuery = processQuery(query); | |
| sendQuery(processedQuery); | |
| queryHistory.unshift(query); | |
| historyIndex = -1; | |
| userInput.value = ''; | |
| } | |
| } else if (e.key === 'ArrowUp') { | |
| e.preventDefault(); | |
| if (historyIndex < queryHistory.length - 1) { | |
| historyIndex++; | |
| userInput.value = queryHistory[historyIndex]; | |
| } | |
| } else if (e.key === 'ArrowDown') { | |
| e.preventDefault(); | |
| if (historyIndex > -1) { | |
| historyIndex--; | |
| userInput.value = historyIndex === -1 ? '' : queryHistory[historyIndex]; | |
| } | |
| } | |
| }); | |
| clearButton.addEventListener('click', clearSession); | |
| </script> | |
| </body> | |
| </html> |