diff --git a/lightrag/api/static/index.html b/lightrag/api/static/index.html index 96dce9f1..d4784802 100644 --- a/lightrag/api/static/index.html +++ b/lightrag/api/static/index.html @@ -267,15 +267,201 @@ // Form Submissions uploadForm.addEventListener('submit', async (e) => { - e.preventDefault(); - // Add your upload logic here + e.preventDefault(); + const files = fileInput.files; + + if (files.length === 0) { + uploadStatus.innerHTML = 'Please select files to upload'; + return; + } + + uploadProgress.classList.remove('hidden'); + const progressBar = uploadProgress.querySelector('.bg-blue-600'); + uploadStatus.textContent = 'Starting upload...'; + + try { + for (let i = 0; i < files.length; i++) { + const file = files[i]; + const formData = new FormData(); + formData.append('file', file); + + uploadStatus.textContent = `Uploading ${file.name} (${i + 1}/${files.length})...`; + console.log(`Uploading file: ${file.name}`); + + try { + const response = await fetch('/documents/upload', { + method: 'POST', + headers: { + 'Authorization': `Bearer ${localStorage.getItem('apiKey') || ''}` + }, + body: formData + }); + + console.log('Response status:', response.status); + + if (!response.ok) { + const errorData = await response.json(); + throw new Error(`Upload failed: ${errorData.detail || response.statusText}`); + } + + // Update progress + const progress = ((i + 1) / files.length) * 100; + progressBar.style.width = `${progress}%`; + console.log(`Progress: ${progress}%`); + + } catch (error) { + console.error('Upload error:', error); + uploadStatus.innerHTML = `Error uploading ${file.name}: ${error.message}`; + return; + } + } + + // All files uploaded successfully + uploadStatus.innerHTML = 'All files uploaded successfully!'; + progressBar.style.width = '100%'; + + // Clear the file input and selection display + setTimeout(() => { + fileInput.value = ''; + selectedFiles.innerHTML = ''; + uploadProgress.classList.add('hidden'); + progressBar.style.width = '0%'; + }, 3000); + + } catch (error) { + console.error('General upload error:', error); + uploadStatus.innerHTML = `Upload failed: ${error.message}`; + } }); + queryForm.addEventListener('submit', async (e) => { - e.preventDefault(); - // Add your query logic here + e.preventDefault(); + const query = queryInput.value.trim(); + + if (!query) { + queryResponse.innerHTML = '

Please enter a query

'; + return; + } + + // Show loading state + queryResponse.innerHTML = ` +
+
+ + + + + Processing your query... +
+
+ `; + + try { + console.log('Sending query:', query); + + const response = await fetch('/query', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${localStorage.getItem('apiKey') || ''}` + }, + body: JSON.stringify({ query }) + }); + + console.log('Response status:', response.status); + + if (!response.ok) { + const errorData = await response.json(); + throw new Error(`Query failed: ${errorData.detail || response.statusText}`); + } + + const data = await response.json(); + console.log('Query response:', data); + + // Format and display the response + if (data.response) { + // Use marked.js to render markdown + queryResponse.innerHTML = ` +
+ ${marked.parse(data.response)} +
+ `; + } else { + queryResponse.innerHTML = '

No response data received

'; + } + + // Optional: Add sources if available + if (data.sources && data.sources.length > 0) { + const sourcesHtml = ` +
+

Sources:

+ +
+ `; + queryResponse.insertAdjacentHTML('beforeend', sourcesHtml); + } + + } catch (error) { + console.error('Query error:', error); + queryResponse.innerHTML = ` +
+

Error processing query:

+

${error.message}

+
+ `; + } + + // Optional: Add a copy button for the response + const copyButton = document.createElement('button'); + copyButton.className = 'mt-4 px-3 py-1 text-sm text-slate-600 hover:text-slate-800 border border-slate-300 rounded hover:bg-slate-50 transition-colors'; + copyButton.innerHTML = ` + + + + + Copy Response + + `; + copyButton.onclick = () => { + const textToCopy = queryResponse.textContent; + navigator.clipboard.writeText(textToCopy).then(() => { + copyButton.innerHTML = ` + + + + + Copied! + + `; + setTimeout(() => { + copyButton.innerHTML = ` + + + + + Copy Response + + `; + }, 2000); + }); + }; + queryResponse.appendChild(copyButton); }); + // Modal Controls $('#settingsBtn').addEventListener('click', () => settingsModal.classList.remove('hidden')); $('#settingsBtn').addEventListener('click', () => settingsModal.classList.remove('hidden'));