2025-01-24 13:52:26 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2025-01-24 16:17:20 +01:00
|
|
|
<title>LightRag</title>
|
2025-01-24 13:52:26 +01:00
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
2025-01-24 16:17:20 +01:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
|
|
|
<style>
|
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
|
|
|
body {
|
|
|
|
|
font-family: 'Inter', sans-serif;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2025-01-24 13:52:26 +01:00
|
|
|
</head>
|
2025-01-24 16:17:20 +01:00
|
|
|
<body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center p-4">
|
|
|
|
|
<div class="w-full max-w-4xl bg-white shadow-lg rounded-xl p-8 relative">
|
2025-01-24 14:02:12 +01:00
|
|
|
<!-- Settings Button -->
|
2025-01-24 16:17:20 +01:00
|
|
|
<button id="settingsButton" class="absolute top-6 right-6 text-gray-600 hover:text-gray-800 transition-colors">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
|
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15a3 3 0 100-6 3 3 0 000 6z"/>
|
2025-01-24 14:02:12 +01:00
|
|
|
</svg>
|
|
|
|
|
</button>
|
2025-01-24 13:52:26 +01:00
|
|
|
|
2025-01-24 16:05:20 +01:00
|
|
|
<!-- Health Check Button -->
|
2025-01-24 16:17:20 +01:00
|
|
|
<button id="healthCheckButton" class="absolute top-6 left-6 text-gray-600 hover:text-gray-800 transition-colors">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m-6-8h6M5 5h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2z"/>
|
2025-01-24 16:05:20 +01:00
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
|
2025-01-24 14:02:12 +01:00
|
|
|
<!-- Main Content -->
|
2025-01-24 16:17:20 +01:00
|
|
|
<div class="text-center mb-8">
|
|
|
|
|
<h1 class="text-3xl font-bold text-gray-900 mb-2">LightRag</h1>
|
|
|
|
|
<p class="text-gray-600">Lightweight RAG System Interface</p>
|
|
|
|
|
</div>
|
2025-01-24 14:02:12 +01:00
|
|
|
|
2025-01-24 13:52:26 +01:00
|
|
|
<!-- File Upload Section -->
|
2025-01-24 16:17:20 +01:00
|
|
|
<div class="mb-8 bg-gray-50 p-6 rounded-lg">
|
|
|
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-4">Document Upload</h2>
|
|
|
|
|
<form id="uploadForm" class="space-y-4">
|
|
|
|
|
<div class="flex items-center justify-center w-full">
|
|
|
|
|
<label class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition-colors">
|
|
|
|
|
<div class="flex flex-col items-center justify-center pt-5 pb-6">
|
|
|
|
|
<svg class="w-8 h-8 mb-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
|
|
|
<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>
|
|
|
|
|
<p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Click to upload</span> or drag and drop</p>
|
|
|
|
|
<p class="text-xs text-gray-500">PDF, TXT, DOC, DOCX (MAX. 10MB)</p>
|
|
|
|
|
</div>
|
|
|
|
|
<input type="file" id="fileInput" class="hidden" multiple />
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Selected Files Preview -->
|
|
|
|
|
<div id="selectedFiles" class="space-y-2"></div>
|
|
|
|
|
|
|
|
|
|
<button type="submit" class="w-full bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
|
|
|
|
|
Upload Documents
|
|
|
|
|
</button>
|
2025-01-24 13:52:26 +01:00
|
|
|
</form>
|
2025-01-24 16:17:20 +01:00
|
|
|
<div id="uploadStatus" class="mt-4 text-sm text-gray-600"></div>
|
2025-01-24 14:35:41 +01:00
|
|
|
<div id="progressContainer" class="mt-4 hidden">
|
2025-01-24 16:17:20 +01:00
|
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
|
|
|
<div id="progressBar" class="bg-blue-600 h-2 rounded-full transition-all duration-300"></div>
|
2025-01-24 14:35:41 +01:00
|
|
|
</div>
|
|
|
|
|
<p id="progressText" class="text-sm text-gray-600 mt-2"></p>
|
|
|
|
|
</div>
|
2025-01-24 13:52:26 +01:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Query Section -->
|
2025-01-24 16:17:20 +01:00
|
|
|
<div class="bg-gray-50 p-6 rounded-lg">
|
|
|
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-4">Query Documents</h2>
|
|
|
|
|
<form id="queryForm" class="space-y-4">
|
|
|
|
|
<textarea
|
|
|
|
|
id="queryInput"
|
|
|
|
|
rows="4"
|
|
|
|
|
class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
|
|
|
|
|
placeholder="Enter your query here..."
|
|
|
|
|
></textarea>
|
|
|
|
|
<button type="submit" class="w-full bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">
|
|
|
|
|
Submit Query
|
|
|
|
|
</button>
|
2025-01-24 13:52:26 +01:00
|
|
|
</form>
|
2025-01-24 16:17:20 +01:00
|
|
|
<div id="queryResponse" class="mt-6 p-4 bg-white border rounded-lg text-gray-700 prose max-w-none"></div>
|
2025-01-24 13:52:26 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
2025-01-24 14:02:12 +01:00
|
|
|
// Modal Handling
|
|
|
|
|
const settingsButton = document.getElementById('settingsButton');
|
|
|
|
|
const settingsModal = document.getElementById('settingsModal');
|
|
|
|
|
const closeSettings = document.getElementById('closeSettings');
|
|
|
|
|
|
|
|
|
|
settingsButton.addEventListener('click', () => {
|
|
|
|
|
settingsModal.classList.remove('hidden');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
closeSettings.addEventListener('click', () => {
|
|
|
|
|
settingsModal.classList.add('hidden');
|
|
|
|
|
});
|
|
|
|
|
|
2025-01-24 16:05:20 +01:00
|
|
|
// Health Check Modal Handling
|
|
|
|
|
const healthCheckButton = document.getElementById('healthCheckButton');
|
|
|
|
|
const healthModal = document.getElementById('healthModal');
|
|
|
|
|
const closeHealth = document.getElementById('closeHealth');
|
|
|
|
|
const healthInfo = document.getElementById('healthInfo');
|
2025-01-24 14:01:06 +01:00
|
|
|
|
2025-01-24 16:05:20 +01:00
|
|
|
healthCheckButton.addEventListener('click', async () => {
|
|
|
|
|
healthModal.classList.remove('hidden');
|
|
|
|
|
healthInfo.textContent = "Fetching system health...";
|
|
|
|
|
try {
|
|
|
|
|
const response = await fetch('/health', {
|
|
|
|
|
method: 'GET',
|
|
|
|
|
headers: {
|
|
|
|
|
'Authorization': `Bearer ${localStorage.getItem('bearerKey') || ''}`
|
|
|
|
|
}
|
|
|
|
|
});
|
2025-01-24 14:01:06 +01:00
|
|
|
|
2025-01-24 16:05:20 +01:00
|
|
|
if (response.ok) {
|
|
|
|
|
const data = await response.json();
|
|
|
|
|
healthInfo.innerHTML = `
|
|
|
|
|
<p><strong>Status:</strong> ${data.status}</p>
|
|
|
|
|
<p><strong>Working Directory:</strong> ${data.working_directory}</p>
|
|
|
|
|
<p><strong>Input Directory:</strong> ${data.input_directory}</p>
|
|
|
|
|
<p><strong>Indexed Files:</strong> ${data.indexed_files}</p>
|
|
|
|
|
<p><strong>Configuration:</strong></p>
|
|
|
|
|
<ul class="list-disc ml-6">
|
|
|
|
|
<li><strong>LLM Binding:</strong> ${data.configuration.llm_binding}</li>
|
|
|
|
|
<li><strong>LLM Host:</strong> ${data.configuration.llm_binding_host}</li>
|
|
|
|
|
<li><strong>LLM Model:</strong> ${data.configuration.llm_model}</li>
|
|
|
|
|
<li><strong>Embedding Binding:</strong> ${data.configuration.embedding_binding}</li>
|
|
|
|
|
<li><strong>Embedding Host:</strong> ${data.configuration.embedding_binding_host}</li>
|
|
|
|
|
<li><strong>Embedding Model:</strong> ${data.configuration.embedding_model}</li>
|
|
|
|
|
<li><strong>Max Tokens:</strong> ${data.configuration.max_tokens}</li>
|
|
|
|
|
</ul>
|
|
|
|
|
`;
|
|
|
|
|
} else {
|
|
|
|
|
const error = await response.json();
|
|
|
|
|
healthInfo.textContent = `Error: ${error.detail}`;
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {
|
|
|
|
|
healthInfo.textContent = `Error: ${err.message}`;
|
2025-01-24 14:01:06 +01:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2025-01-24 16:05:20 +01:00
|
|
|
closeHealth.addEventListener('click', () => {
|
|
|
|
|
healthModal.classList.add('hidden');
|
|
|
|
|
});
|
|
|
|
|
|
2025-01-24 13:52:26 +01:00
|
|
|
// File Upload Handler
|
|
|
|
|
const uploadForm = document.getElementById('uploadForm');
|
|
|
|
|
const fileInput = document.getElementById('fileInput');
|
2025-01-24 16:17:20 +01:00
|
|
|
const selectedFiles = document.getElementById('selectedFiles');
|
|
|
|
|
|
2025-01-24 13:52:26 +01:00
|
|
|
const uploadStatus = document.getElementById('uploadStatus');
|
2025-01-24 14:35:41 +01:00
|
|
|
const progressContainer = document.getElementById('progressContainer');
|
|
|
|
|
const progressBar = document.getElementById('progressBar').firstElementChild;
|
|
|
|
|
const progressText = document.getElementById('progressText');
|
2025-01-24 13:52:26 +01:00
|
|
|
|
|
|
|
|
uploadForm.addEventListener('submit', async (e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
const files = fileInput.files;
|
|
|
|
|
if (files.length === 0) {
|
|
|
|
|
uploadStatus.textContent = "Please select at least one file.";
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2025-01-24 14:35:41 +01:00
|
|
|
progressContainer.classList.remove('hidden');
|
|
|
|
|
uploadStatus.textContent = "Uploading files...";
|
|
|
|
|
let uploadedCount = 0;
|
|
|
|
|
|
|
|
|
|
for (const [index, file] of Array.from(files).entries()) {
|
|
|
|
|
const formData = new FormData();
|
2025-01-24 13:52:26 +01:00
|
|
|
formData.append('file', file);
|
|
|
|
|
|
2025-01-24 14:35:41 +01:00
|
|
|
try {
|
|
|
|
|
const response = await fetch('/documents/upload', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
body: formData,
|
|
|
|
|
headers: {
|
|
|
|
|
'Authorization': `Bearer ${localStorage.getItem('bearerKey') || ''}`
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
uploadedCount++;
|
|
|
|
|
const progress = Math.round((uploadedCount / files.length) * 100);
|
|
|
|
|
progressBar.style.width = `${progress}%`;
|
|
|
|
|
progressText.textContent = `Uploading file ${index + 1} of ${files.length} (${progress}%)`;
|
|
|
|
|
} else {
|
|
|
|
|
const error = await response.json();
|
|
|
|
|
uploadStatus.textContent = `Error uploading file ${file.name}: ${error.detail}`;
|
|
|
|
|
break;
|
2025-01-24 14:01:06 +01:00
|
|
|
}
|
2025-01-24 14:35:41 +01:00
|
|
|
} catch (err) {
|
|
|
|
|
uploadStatus.textContent = `Error uploading file ${file.name}: ${err.message}`;
|
|
|
|
|
break;
|
2025-01-24 13:52:26 +01:00
|
|
|
}
|
|
|
|
|
}
|
2025-01-24 14:35:41 +01:00
|
|
|
|
|
|
|
|
if (uploadedCount === files.length) {
|
|
|
|
|
uploadStatus.textContent = "All files uploaded successfully!";
|
|
|
|
|
} else {
|
|
|
|
|
uploadStatus.textContent = "File upload interrupted.";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
progressContainer.classList.add('hidden');
|
2025-01-24 13:52:26 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Query Handler
|
|
|
|
|
const queryForm = document.getElementById('queryForm');
|
|
|
|
|
const queryInput = document.getElementById('queryInput');
|
|
|
|
|
const queryResponse = document.getElementById('queryResponse');
|
|
|
|
|
|
|
|
|
|
queryForm.addEventListener('submit', async (e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
const query = queryInput.value.trim();
|
|
|
|
|
if (!query) {
|
|
|
|
|
queryResponse.textContent = "Please enter a query.";
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
queryResponse.textContent = "Processing...";
|
|
|
|
|
try {
|
|
|
|
|
const response = await fetch('/query', {
|
|
|
|
|
method: 'POST',
|
2025-01-24 14:01:06 +01:00
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
'Authorization': `Bearer ${localStorage.getItem('bearerKey') || ''}`
|
|
|
|
|
},
|
|
|
|
|
body: JSON.stringify({ query })
|
2025-01-24 13:52:26 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
const data = await response.json();
|
2025-01-24 14:35:41 +01:00
|
|
|
queryResponse.innerHTML = marked(data.response); // Render Markdown as HTML
|
2025-01-24 13:52:26 +01:00
|
|
|
} else {
|
|
|
|
|
const error = await response.json();
|
|
|
|
|
queryResponse.textContent = `Error: ${error.detail}`;
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {
|
|
|
|
|
queryResponse.textContent = `Error: ${err.message}`;
|
|
|
|
|
}
|
|
|
|
|
});
|
2025-01-24 16:17:20 +01:00
|
|
|
|
|
|
|
|
// File preview functionality
|
|
|
|
|
fileInput.addEventListener('change', () => {
|
|
|
|
|
selectedFiles.innerHTML = '';
|
|
|
|
|
Array.from(fileInput.files).forEach((file, index) => {
|
|
|
|
|
const fileDiv = document.createElement('div');
|
|
|
|
|
fileDiv.className = 'flex items-center justify-between p-2 bg-white rounded border';
|
|
|
|
|
fileDiv.innerHTML = `
|
|
|
|
|
<span class="text-sm text-gray-600">${file.name} (${(file.size / 1024).toFixed(1)} KB)</span>
|
|
|
|
|
<button type="button" class="text-red-500 hover:text-red-700 transition-colors" data-index="${index}">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
|
|
|
|
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
`;
|
|
|
|
|
selectedFiles.appendChild(fileDiv);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Remove file functionality
|
|
|
|
|
selectedFiles.addEventListener('click', (e) => {
|
|
|
|
|
if (e.target.closest('button')) {
|
|
|
|
|
const index = e.target.closest('button').dataset.index;
|
|
|
|
|
const dt = new DataTransfer();
|
|
|
|
|
const files = fileInput.files;
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < files.length; i++) {
|
|
|
|
|
if (i != index) dt.items.add(files[i]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
fileInput.files = dt.files;
|
|
|
|
|
e.target.closest('div').remove();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2025-01-24 13:52:26 +01:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
