gardel/lightrag
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added progress when scanning files and fixed some bugs in the API

Browse Source
This commit is contained in:
Saifeddine ALOUI
2025-01-30 23:27:43 +01:00
parent 59617da83e
commit 219cbab1e3
3 changed files with 470 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
lightrag/api/lightrag_server.py
View File

@@ -1,4 +1,24 @@
from fastapi import FastAPI, HTTPException, File, UploadFile, Form, Request from fastapi import FastAPI, HTTPException, File, UploadFile, Form, Request
# Backend (Python)
# Add this to store progress globally
from typing import Dict
import threading
# Global progress tracker
scan_progress: Dict = {
"is_scanning": False,
"current_file": "",
"indexed_count": 0,
"total_files": 0,
"progress": 0
}
# Lock for thread-safe operations
progress_lock = threading.Lock()
import json
import os
from fastapi.staticfiles import StaticFiles from fastapi.staticfiles import StaticFiles
from pydantic import BaseModel from pydantic import BaseModel
import logging import logging
@@ -538,7 +558,7 @@ class DocumentManager:
# Create input directory if it doesn't exist # Create input directory if it doesn't exist
self.input_dir.mkdir(parents=True, exist_ok=True) self.input_dir.mkdir(parents=True, exist_ok=True)
def scan_directory(self) -> List[Path]: def scan_directory_for_new_files(self) -> List[Path]:
"""Scan input directory for new files""" """Scan input directory for new files"""
new_files = [] new_files = []
for ext in self.supported_extensions: for ext in self.supported_extensions:
@@ -547,6 +567,14 @@ class DocumentManager:
new_files.append(file_path) new_files.append(file_path)
return new_files return new_files
def scan_directory(self) -> List[Path]:
"""Scan input directory for new files"""
new_files = []
for ext in self.supported_extensions:
for file_path in self.input_dir.rglob(f"*{ext}"):
new_files.append(file_path)
return new_files
def mark_as_indexed(self, file_path: Path): def mark_as_indexed(self, file_path: Path):
"""Mark a file as indexed""" """Mark a file as indexed"""
self.indexed_files.add(file_path) self.indexed_files.add(file_path)
@@ -730,7 +758,7 @@ def create_app(args):
# Startup logic # Startup logic
if args.auto_scan_at_startup: if args.auto_scan_at_startup:
try: try:
new_files = doc_manager.scan_directory() new_files = doc_manager.scan_directory_for_new_files()
for file_path in new_files: for file_path in new_files:
try: try:
await index_file(file_path) await index_file(file_path)
@@ -982,43 +1010,56 @@ def create_app(args):
else: else:
logging.warning(f"No content extracted from file: {file_path}") logging.warning(f"No content extracted from file: {file_path}")
@app.post("/documents/scan", dependencies=[Depends(optional_api_key)]) @app.post("/documents/scan", dependencies=[Depends(optional_api_key)])
async def scan_for_new_documents(): async def scan_for_new_documents():
""" """Trigger the scanning process"""
Manually trigger scanning for new documents in the directory managed by `doc_manager`. global scan_progress
This endpoint facilitates manual initiation of a document scan to identify and index new files.
It processes all newly detected files, attempts indexing each file, logs any errors that occur,
and returns a summary of the operation.
Returns:
dict: A dictionary containing:
- "status" (str): Indicates success or failure of the scanning process.
- "indexed_count" (int): The number of successfully indexed documents.
- "total_documents" (int): Total number of documents that have been indexed so far.
Raises:
HTTPException: If an error occurs during the document scanning process, a 500 status
code is returned with details about the exception.
"""
try: try:
new_files = doc_manager.scan_directory() with progress_lock:
indexed_count = 0 if scan_progress["is_scanning"]:
return {"status": "already_scanning"}
scan_progress["is_scanning"] = True
scan_progress["indexed_count"] = 0
scan_progress["progress"] = 0
new_files = doc_manager.scan_directory_for_new_files()
scan_progress["total_files"] = len(new_files)
for file_path in new_files: for file_path in new_files:
try: try:
with progress_lock:
scan_progress["current_file"] = os.path.basename(file_path)
await index_file(file_path) await index_file(file_path)
indexed_count += 1
with progress_lock:
scan_progress["indexed_count"] += 1
scan_progress["progress"] = (scan_progress["indexed_count"] / scan_progress["total_files"]) * 100
except Exception as e: except Exception as e:
logging.error(f"Error indexing file {file_path}: {str(e)}") logging.error(f"Error indexing file {file_path}: {str(e)}")
return { return {
"status": "success", "status": "success",
"indexed_count": indexed_count, "indexed_count": scan_progress["indexed_count"],
"total_documents": len(doc_manager.indexed_files), "total_documents": len(doc_manager.indexed_files),
} }
except Exception as e: except Exception as e:
raise HTTPException(status_code=500, detail=str(e)) raise HTTPException(status_code=500, detail=str(e))
finally:
with progress_lock:
scan_progress["is_scanning"] = False
@app.get("/documents/scan-progress")
async def get_scan_progress():
"""Get the current scanning progress"""
with progress_lock:
return scan_progress
@app.post("/documents/upload", dependencies=[Depends(optional_api_key)]) @app.post("/documents/upload", dependencies=[Depends(optional_api_key)])
async def upload_to_input_dir(file: UploadFile = File(...)): async def upload_to_input_dir(file: UploadFile = File(...)):
@@ -1849,7 +1890,7 @@ def create_app(args):
"status": "healthy", "status": "healthy",
"working_directory": str(args.working_dir), "working_directory": str(args.working_dir),
"input_directory": str(args.input_dir), "input_directory": str(args.input_dir),
"indexed_files": files, "indexed_files": [str(f) for f in files],
"indexed_files_count": len(files), "indexed_files_count": len(files),
"configuration": { "configuration": {
# LLM configuration binding/host address (if applicable)/model (if applicable) # LLM configuration binding/host address (if applicable)/model (if applicable)

2
lightrag/api/static/index.html
View File

@@ -98,7 +98,7 @@
</div> </div>
</div> </div>
<script src="/js/lightrag_api.js"></script> <script src="/js/api.js"></script>
</body> </body>
</html> </html>

778
lightrag/api/static/js/lightrag_api.js → lightrag/api/static/js/api.js
View File

@@ -1,375 +1,405 @@
// State management // State management
const state = { const state = {
apiKey: localStorage.getItem('apiKey') || '', apiKey: localStorage.getItem('apiKey') || '',
files: [], files: [],
indexedFiles: [], indexedFiles: [],
currentPage: 'file-manager' currentPage: 'file-manager'
}; };
// Utility functions // Utility functions
const showToast = (message, duration = 3000) => { const showToast = (message, duration = 3000) => {
const toast = document.getElementById('toast'); const toast = document.getElementById('toast');
toast.querySelector('div').textContent = message; toast.querySelector('div').textContent = message;
toast.classList.remove('hidden'); toast.classList.remove('hidden');
setTimeout(() => toast.classList.add('hidden'), duration); setTimeout(() => toast.classList.add('hidden'), duration);
}; };
const fetchWithAuth = async (url, options = {}) => { const fetchWithAuth = async (url, options = {}) => {
const headers = { const headers = {
...(options.headers || {}), ...(options.headers || {}),
...(state.apiKey ? { 'Authorization': `Bearer ${state.apiKey}` } : {}) ...(state.apiKey ? { 'Authorization': `Bearer ${state.apiKey}` } : {})
}; };
return fetch(url, { ...options, headers }); return fetch(url, { ...options, headers });
}; };
// Page renderers // Page renderers
const pages = { const pages = {
'file-manager': () => ` 'file-manager': () => `
<div class="space-y-6"> <div class="space-y-6">
<h2 class="text-2xl font-bold text-gray-800">File Manager</h2> <h2 class="text-2xl font-bold text-gray-800">File Manager</h2>
<div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors"> <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors">
<input type="file" id="fileInput" multiple accept=".txt,.md,.doc,.docx,.pdf,.pptx" class="hidden"> <input type="file" id="fileInput" multiple accept=".txt,.md,.doc,.docx,.pdf,.pptx" class="hidden">
<label for="fileInput" class="cursor-pointer"> <label for="fileInput" class="cursor-pointer">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
</svg> </svg>
<p class="mt-2 text-gray-600">Drag files here or click to select</p> <p class="mt-2 text-gray-600">Drag files here or click to select</p>
<p class="text-sm text-gray-500">Supported formats: TXT, MD, DOC, PDF, PPTX</p> <p class="text-sm text-gray-500">Supported formats: TXT, MD, DOC, PDF, PPTX</p>
</label> </label>
</div> </div>
<div id="fileList" class="space-y-2"> <div id="fileList" class="space-y-2">
<h3 class="text-lg font-semibold text-gray-700">Selected Files</h3> <h3 class="text-lg font-semibold text-gray-700">Selected Files</h3>
<div class="space-y-2"></div> <div class="space-y-2"></div>
</div> </div>
<div id="uploadProgress" class="hidden mt-4"> <div id="uploadProgress" class="hidden mt-4">
<div class="w-full bg-gray-200 rounded-full h-2.5"> <div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> <div class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
</div> </div>
<p class="text-sm text-gray-600 mt-2"><span id="uploadStatus">0</span> files processed</p> <p class="text-sm text-gray-600 mt-2"><span id="uploadStatus">0</span> files processed</p>
</div> </div>
<button id="rescanBtn" class="flex items-center bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
<button id="uploadBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor" class="mr-2">
Upload & Index Files <path d="M12 4a8 8 0 1 1-8 8H2.5a9.5 9.5 0 1 0 2.8-6.7L2 3v6h6L5.7 6.7A7.96 7.96 0 0 1 12 4z"/>
</button> </svg>
Rescan Files
<div id="indexedFiles" class="space-y-2"> </button>
<h3 class="text-lg font-semibold text-gray-700">Indexed Files</h3>
<div class="space-y-2"></div> <button id="uploadBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
</div> Upload & Index Files
<button id="rescanBtn" class="flex items-center bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"> </button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor" class="mr-2">
<path d="M12 4a8 8 0 1 1-8 8H2.5a9.5 9.5 0 1 0 2.8-6.7L2 3v6h6L5.7 6.7A7.96 7.96 0 0 1 12 4z"/> <div id="indexedFiles" class="space-y-2">
</svg> <h3 class="text-lg font-semibold text-gray-700">Indexed Files</h3>
Rescan Files <div class="space-y-2"></div>
</button> </div>
</div> </div>
`, `,
'query': () => ` 'query': () => `
<div class="space-y-6"> <div class="space-y-6">
<h2 class="text-2xl font-bold text-gray-800">Query Database</h2> <h2 class="text-2xl font-bold text-gray-800">Query Database</h2>
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700">Query Mode</label> <label class="block text-sm font-medium text-gray-700">Query Mode</label>
<select id="queryMode" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> <select id="queryMode" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<option value="hybrid">Hybrid</option> <option value="hybrid">Hybrid</option>
<option value="local">Local</option> <option value="local">Local</option>
<option value="global">Global</option> <option value="global">Global</option>
<option value="naive">Naive</option> <option value="naive">Naive</option>
</select> </select>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700">Query</label> <label class="block text-sm font-medium text-gray-700">Query</label>
<textarea id="queryInput" rows="4" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"></textarea> <textarea id="queryInput" rows="4" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"></textarea>
</div> </div>
<button id="queryBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"> <button id="queryBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
Send Query Send Query
</button> </button>
<div id="queryResult" class="mt-4 p-4 bg-white rounded-lg shadow"></div> <div id="queryResult" class="mt-4 p-4 bg-white rounded-lg shadow"></div>
</div> </div>
</div> </div>
`, `,
'knowledge-graph': () => ` 'knowledge-graph': () => `
<div class="flex items-center justify-center h-full"> <div class="flex items-center justify-center h-full">
<div class="text-center"> <div class="text-center">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
</svg> </svg>
<h3 class="mt-2 text-sm font-medium text-gray-900">Under Construction</h3> <h3 class="mt-2 text-sm font-medium text-gray-900">Under Construction</h3>
<p class="mt-1 text-sm text-gray-500">Knowledge graph visualization will be available in a future update.</p> <p class="mt-1 text-sm text-gray-500">Knowledge graph visualization will be available in a future update.</p>
</div> </div>
</div> </div>
`, `,
'status': () => ` 'status': () => `
<div class="space-y-6"> <div class="space-y-6">
<h2 class="text-2xl font-bold text-gray-800">System Status</h2> <h2 class="text-2xl font-bold text-gray-800">System Status</h2>
<div id="statusContent" class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div id="statusContent" class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="p-6 bg-white rounded-lg shadow-sm"> <div class="p-6 bg-white rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-4">System Health</h3> <h3 class="text-lg font-semibold mb-4">System Health</h3>
<div id="healthStatus"></div> <div id="healthStatus"></div>
</div> </div>
<div class="p-6 bg-white rounded-lg shadow-sm"> <div class="p-6 bg-white rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-4">Configuration</h3> <h3 class="text-lg font-semibold mb-4">Configuration</h3>
<div id="configStatus"></div> <div id="configStatus"></div>
</div> </div>
</div> </div>
</div> </div>
`, `,
'settings': () => ` 'settings': () => `
<div class="space-y-6"> <div class="space-y-6">
<h2 class="text-2xl font-bold text-gray-800">Settings</h2> <h2 class="text-2xl font-bold text-gray-800">Settings</h2>
<div class="max-w-xl"> <div class="max-w-xl">
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700">API Key</label> <label class="block text-sm font-medium text-gray-700">API Key</label>
<input type="password" id="apiKeyInput" value="${state.apiKey}" <input type="password" id="apiKeyInput" value="${state.apiKey}"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
</div> </div>
<button id="saveSettings" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"> <button id="saveSettings" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
Save Settings Save Settings
</button> </button>
</div> </div>
</div> </div>
</div> </div>
` `
}; };
// Page handlers // Page handlers
const handlers = { const handlers = {
'file-manager': () => { 'file-manager': () => {
const fileInput = document.getElementById('fileInput'); const fileInput = document.getElementById('fileInput');
const dropZone = fileInput.parentElement.parentElement; const dropZone = fileInput.parentElement.parentElement;
const fileList = document.querySelector('#fileList div'); const fileList = document.querySelector('#fileList div');
const indexedFiles = document.querySelector('#indexedFiles div'); const indexedFiles = document.querySelector('#indexedFiles div');
const uploadBtn = document.getElementById('uploadBtn'); const uploadBtn = document.getElementById('uploadBtn');
const updateFileList = () => { const updateFileList = () => {
fileList.innerHTML = state.files.map(file => ` fileList.innerHTML = state.files.map(file => `
<div class="flex items-center justify-between bg-white p-3 rounded-lg shadow-sm"> <div class="flex items-center justify-between bg-white p-3 rounded-lg shadow-sm">
<span>${file.name}</span> <span>${file.name}</span>
<button class="text-red-600 hover:text-red-700" onclick="removeFile('${file.name}')"> <button class="text-red-600 hover:text-red-700" onclick="removeFile('${file.name}')">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
</svg> </svg>
</button> </button>
</div> </div>
`).join(''); `).join('');
}; };
const updateIndexedFiles = async () => { const updateIndexedFiles = async () => {
const response = await fetchWithAuth('/health'); const response = await fetchWithAuth('/health');
const data = await response.json(); const data = await response.json();
indexedFiles.innerHTML = data.indexed_files.map(file => ` indexedFiles.innerHTML = data.indexed_files.map(file => `
<div class="flex items-center justify-between bg-white p-3 rounded-lg shadow-sm"> <div class="flex items-center justify-between bg-white p-3 rounded-lg shadow-sm">
<span>${file}</span> <span>${file}</span>
</div> </div>
`).join(''); `).join('');
}; };
dropZone.addEventListener('dragover', (e) => { dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); e.preventDefault();
dropZone.classList.add('border-blue-500'); dropZone.classList.add('border-blue-500');
}); });
dropZone.addEventListener('dragleave', () => { dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('border-blue-500'); dropZone.classList.remove('border-blue-500');
}); });
dropZone.addEventListener('drop', (e) => { dropZone.addEventListener('drop', (e) => {
e.preventDefault(); e.preventDefault();
dropZone.classList.remove('border-blue-500'); dropZone.classList.remove('border-blue-500');
const files = Array.from(e.dataTransfer.files); const files = Array.from(e.dataTransfer.files);
state.files.push(...files); state.files.push(...files);
updateFileList(); updateFileList();
}); });
fileInput.addEventListener('change', () => { fileInput.addEventListener('change', () => {
state.files.push(...Array.from(fileInput.files)); state.files.push(...Array.from(fileInput.files));
updateFileList(); updateFileList();
}); });
uploadBtn.addEventListener('click', async () => { uploadBtn.addEventListener('click', async () => {
if (state.files.length === 0) { if (state.files.length === 0) {
showToast('Please select files to upload'); showToast('Please select files to upload');
return; return;
} }
let apiKey = localStorage.getItem('apiKey') || ''; let apiKey = localStorage.getItem('apiKey') || '';
const progress = document.getElementById('uploadProgress'); const progress = document.getElementById('uploadProgress');
const progressBar = progress.querySelector('div'); const progressBar = progress.querySelector('div');
const statusText = document.getElementById('uploadStatus'); const statusText = document.getElementById('uploadStatus');
progress.classList.remove('hidden'); progress.classList.remove('hidden');
for (let i = 0; i < state.files.length; i++) { for (let i = 0; i < state.files.length; i++) {
const formData = new FormData(); const formData = new FormData();
formData.append('file', state.files[i]); formData.append('file', state.files[i]);
try { try {
await fetch('/documents/upload', { await fetch('/documents/upload', {
method: 'POST', method: 'POST',
headers: apiKey ? { 'Authorization': `Bearer ${apiKey}` } : {}, headers: apiKey ? { 'Authorization': `Bearer ${apiKey}` } : {},
body: formData body: formData
}); });
const percentage = ((i + 1) / state.files.length) * 100; const percentage = ((i + 1) / state.files.length) * 100;
progressBar.style.width = `${percentage}%`; progressBar.style.width = `${percentage}%`;
statusText.textContent = `${i + 1}/${state.files.length}`; statusText.textContent = `${i + 1}/${state.files.length}`;
} catch (error) { } catch (error) {
console.error('Upload error:', error); console.error('Upload error:', error);
} }
} }
progress.classList.add('hidden'); progress.classList.add('hidden');
}); });
rescanBtn.addEventListener('click', async () => {
let apiKey = localStorage.getItem('apiKey') || ''; rescanBtn.addEventListener('click', async () => {
const progress = document.getElementById('uploadProgress'); const progress = document.getElementById('uploadProgress');
const progressBar = progress.querySelector('div'); const progressBar = progress.querySelector('div');
const statusText = document.getElementById('uploadStatus'); const statusText = document.getElementById('uploadStatus');
progress.classList.remove('hidden'); progress.classList.remove('hidden');
try {
const scan_output = await fetch('/documents/scan', { try {
method: 'GET', // Start the scanning process
}); const scanResponse = await fetch('/documents/scan', {
statusText.textContent = scan_output.data; method: 'POST',
} catch (error) { });
console.error('Upload error:', error);
} if (!scanResponse.ok) {
progress.classList.add('hidden'); throw new Error('Scan failed to start');
}); }
updateIndexedFiles();
}, // Start polling for progress
const pollInterval = setInterval(async () => {
'query': () => { const progressResponse = await fetch('/documents/scan-progress');
const queryBtn = document.getElementById('queryBtn'); const progressData = await progressResponse.json();
const queryInput = document.getElementById('queryInput');
const queryMode = document.getElementById('queryMode'); // Update progress bar
const queryResult = document.getElementById('queryResult'); progressBar.style.width = `${progressData.progress}%`;
let apiKey = localStorage.getItem('apiKey') || ''; // Update status text
if (progressData.total_files > 0) {
queryBtn.addEventListener('click', async () => { statusText.textContent = `Processing ${progressData.current_file} (${progressData.indexed_count}/${progressData.total_files})`;
const query = queryInput.value.trim(); }
if (!query) {
showToast('Please enter a query'); // Check if scanning is complete
return; if (!progressData.is_scanning) {
} clearInterval(pollInterval);
progress.classList.add('hidden');
queryBtn.disabled = true; statusText.textContent = 'Scan complete!';
queryBtn.innerHTML = ` }
<svg class="animate-spin h-5 w-5 mr-3" viewBox="0 0 24 24"> }, 1000); // Poll every second
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/> } catch (error) {
</svg> console.error('Upload error:', error);
Processing... progress.classList.add('hidden');
`; statusText.textContent = 'Error during scanning process';
}
try { });
const response = await fetchWithAuth('/query', {
method: 'POST',
headers: { 'Content-Type': 'application/json' }, updateIndexedFiles();
body: JSON.stringify({ },
query,
mode: queryMode.value, 'query': () => {
stream: false, const queryBtn = document.getElementById('queryBtn');
only_need_context: false const queryInput = document.getElementById('queryInput');
}) const queryMode = document.getElementById('queryMode');
}); const queryResult = document.getElementById('queryResult');
const data = await response.json(); let apiKey = localStorage.getItem('apiKey') || '';
queryResult.innerHTML = marked.parse(data.response);
} catch (error) { queryBtn.addEventListener('click', async () => {
showToast('Error processing query'); const query = queryInput.value.trim();
} finally { if (!query) {
queryBtn.disabled = false; showToast('Please enter a query');
queryBtn.textContent = 'Send Query'; return;
} }
});
}, queryBtn.disabled = true;
queryBtn.innerHTML = `
'status': async () => { <svg class="animate-spin h-5 w-5 mr-3" viewBox="0 0 24 24">
const healthStatus = document.getElementById('healthStatus'); <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/>
const configStatus = document.getElementById('configStatus'); <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
</svg>
try { Processing...
const response = await fetchWithAuth('/health'); `;
const data = await response.json();
try {
healthStatus.innerHTML = ` const response = await fetchWithAuth('/query', {
<div class="space-y-2"> method: 'POST',
<div class="flex items-center"> headers: { 'Content-Type': 'application/json' },
<div class="w-3 h-3 rounded-full ${data.status === 'healthy' ? 'bg-green-500' : 'bg-red-500'} mr-2"></div> body: JSON.stringify({
<span class="font-medium">${data.status}</span> query,
</div> mode: queryMode.value,
<div> stream: false,
<p class="text-sm text-gray-600">Working Directory: ${data.working_directory}</p> only_need_context: false
<p class="text-sm text-gray-600">Input Directory: ${data.input_directory}</p> })
<p class="text-sm text-gray-600">Indexed Files: ${data.indexed_files_count}</p> });
</div>
</div> const data = await response.json();
`; queryResult.innerHTML = marked.parse(data.response);
} catch (error) {
configStatus.innerHTML = Object.entries(data.configuration) showToast('Error processing query');
.map(([key, value]) => ` } finally {
<div class="mb-2"> queryBtn.disabled = false;
<span class="text-sm font-medium text-gray-700">${key}:</span> queryBtn.textContent = 'Send Query';
<span class="text-sm text-gray-600 ml-2">${value}</span> }
</div> });
`).join(''); },
} catch (error) {
showToast('Error fetching status'); 'status': async () => {
} const healthStatus = document.getElementById('healthStatus');
}, const configStatus = document.getElementById('configStatus');
'settings': () => { try {
const saveBtn = document.getElementById('saveSettings'); const response = await fetchWithAuth('/health');
const apiKeyInput = document.getElementById('apiKeyInput'); const data = await response.json();
saveBtn.addEventListener('click', () => { healthStatus.innerHTML = `
state.apiKey = apiKeyInput.value; <div class="space-y-2">
localStorage.setItem('apiKey', state.apiKey); <div class="flex items-center">
showToast('Settings saved successfully'); <div class="w-3 h-3 rounded-full ${data.status === 'healthy' ? 'bg-green-500' : 'bg-red-500'} mr-2"></div>
}); <span class="font-medium">${data.status}</span>
} </div>
}; <div>
<p class="text-sm text-gray-600">Working Directory: ${data.working_directory}</p>
// Navigation handling <p class="text-sm text-gray-600">Input Directory: ${data.input_directory}</p>
document.querySelectorAll('.nav-item').forEach(item => { <p class="text-sm text-gray-600">Indexed Files: ${data.indexed_files_count}</p>
item.addEventListener('click', (e) => { </div>
e.preventDefault(); </div>
const page = item.dataset.page; `;
document.getElementById('content').innerHTML = pages[page]();
if (handlers[page]) handlers[page](); configStatus.innerHTML = Object.entries(data.configuration)
state.currentPage = page; .map(([key, value]) => `
}); <div class="mb-2">
}); <span class="text-sm font-medium text-gray-700">${key}:</span>
<span class="text-sm text-gray-600 ml-2">${value}</span>
// Initialize with file manager </div>
document.getElementById('content').innerHTML = pages['file-manager'](); `).join('');
handlers['file-manager'](); } catch (error) {
showToast('Error fetching status');
// Global functions }
window.removeFile = (fileName) => { },
state.files = state.files.filter(file => file.name !== fileName);
document.querySelector('#fileList div').innerHTML = state.files.map(file => ` 'settings': () => {
<div class="flex items-center justify-between bg-white p-3 rounded-lg shadow-sm"> const saveBtn = document.getElementById('saveSettings');
<span>${file.name}</span> const apiKeyInput = document.getElementById('apiKeyInput');
<button class="text-red-600 hover:text-red-700" onclick="removeFile('${file.name}')">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> saveBtn.addEventListener('click', () => {
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/> state.apiKey = apiKeyInput.value;
</svg> localStorage.setItem('apiKey', state.apiKey);
</button> showToast('Settings saved successfully');
</div> });
`).join(''); }
};
// Navigation handling
document.querySelectorAll('.nav-item').forEach(item => {
item.addEventListener('click', (e) => {
e.preventDefault();
const page = item.dataset.page;
document.getElementById('content').innerHTML = pages[page]();
if (handlers[page]) handlers[page]();
state.currentPage = page;
});
});
// Initialize with file manager
document.getElementById('content').innerHTML = pages['file-manager']();
handlers['file-manager']();
// Global functions
window.removeFile = (fileName) => {
state.files = state.files.filter(file => file.name !== fileName);
document.querySelector('#fileList div').innerHTML = state.files.map(file => `
<div class="flex items-center justify-between bg-white p-3 rounded-lg shadow-sm">
<span>${file.name}</span>
<button class="text-red-600 hover:text-red-700" onclick="removeFile('${file.name}')">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
</svg>
</button>
</div>
`).join('');
}; };