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 14:35:41 +01:00
|
|
|
<title>RAG WebUI</title>
|
2025-01-24 13:52:26 +01:00
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
2025-01-24 14:35:41 +01:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <!-- Include Marked.js -->
|
2025-01-24 13:52:26 +01:00
|
|
|
</head>
|
|
|
|
|
<body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
|
2025-01-24 14:02:12 +01:00
|
|
|
<div class="w-full max-w-4xl bg-white shadow-md rounded-lg p-6 relative">
|
|
|
|
|
<!-- Settings Button -->
|
|
|
|
|
<button id="settingsButton" class="absolute top-4 right-4 text-gray-600 hover:text-gray-800">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.104 0 2-.896 2-2s-.896-2-2-2-2 .896-2 2 .896 2 2 2zm0 4c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2zm0 8c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2z" />
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
2025-01-24 13:52:26 +01:00
|
|
|
|
2025-01-24 14:02:12 +01:00
|
|
|
<!-- Modal for Bearer Key -->
|
|
|
|
|
<div id="settingsModal" class="hidden fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center">
|
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
|
|
|
|
|
<h2 class="text-lg font-semibold text-gray-700 mb-4">Settings</h2>
|
|
|
|
|
<div class="flex flex-col gap-4">
|
|
|
|
|
<input type="text" id="bearerKeyInput" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter Bearer Key">
|
|
|
|
|
<button id="saveBearerKey" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Save Key</button>
|
|
|
|
|
<button id="closeSettings" class="text-gray-500 hover:text-gray-700 text-sm">Close</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="bearerKeyStatus" class="mt-2 text-sm text-gray-600"></div>
|
2025-01-24 14:01:06 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-01-24 14:02:12 +01:00
|
|
|
<!-- Main Content -->
|
|
|
|
|
<h1 class="text-2xl font-bold text-gray-800 mb-4">RAG WebUI</h1>
|
|
|
|
|
|
2025-01-24 13:52:26 +01:00
|
|
|
<!-- File Upload Section -->
|
|
|
|
|
<div class="mb-6">
|
|
|
|
|
<h2 class="text-lg font-semibold text-gray-700 mb-2">Upload Files</h2>
|
|
|
|
|
<form id="uploadForm" class="flex flex-col gap-4">
|
|
|
|
|
<input type="file" id="fileInput" multiple class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
|
|
|
|
|
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Upload</button>
|
|
|
|
|
</form>
|
|
|
|
|
<div id="uploadStatus" class="mt-2 text-sm text-gray-600"></div>
|
2025-01-24 14:35:41 +01:00
|
|
|
<div id="progressContainer" class="mt-4 hidden">
|
|
|
|
|
<div id="progressBar" class="w-full bg-gray-200 rounded h-4">
|
|
|
|
|
<div class="bg-blue-500 h-4 rounded" style="width: 0%;"></div>
|
|
|
|
|
</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 -->
|
|
|
|
|
<div class="mb-6">
|
|
|
|
|
<h2 class="text-lg font-semibold text-gray-700 mb-2">Query</h2>
|
|
|
|
|
<form id="queryForm" class="flex flex-col gap-4">
|
|
|
|
|
<textarea id="queryInput" rows="4" class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter your query here..."></textarea>
|
|
|
|
|
<button type="submit" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Submit Query</button>
|
|
|
|
|
</form>
|
|
|
|
|
<div id="queryResponse" class="mt-4 p-4 bg-gray-50 border rounded text-gray-700"></div>
|
|
|
|
|
</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 14:01:06 +01:00
|
|
|
// Bearer Key Handling
|
|
|
|
|
const bearerKeyInput = document.getElementById('bearerKeyInput');
|
|
|
|
|
const saveBearerKey = document.getElementById('saveBearerKey');
|
|
|
|
|
const bearerKeyStatus = document.getElementById('bearerKeyStatus');
|
|
|
|
|
|
|
|
|
|
// Load Bearer Key from localStorage on page load
|
|
|
|
|
const storedBearerKey = localStorage.getItem('bearerKey');
|
|
|
|
|
if (storedBearerKey) {
|
|
|
|
|
bearerKeyInput.value = storedBearerKey;
|
|
|
|
|
bearerKeyStatus.textContent = "Bearer Key loaded from local storage.";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Save Bearer Key to localStorage
|
|
|
|
|
saveBearerKey.addEventListener('click', () => {
|
|
|
|
|
const key = bearerKeyInput.value.trim();
|
|
|
|
|
if (key) {
|
|
|
|
|
localStorage.setItem('bearerKey', key);
|
|
|
|
|
bearerKeyStatus.textContent = "Bearer Key saved successfully.";
|
|
|
|
|
} else {
|
|
|
|
|
bearerKeyStatus.textContent = "Please enter a valid Bearer Key.";
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2025-01-24 13:52:26 +01:00
|
|
|
// File Upload Handler
|
|
|
|
|
const uploadForm = document.getElementById('uploadForm');
|
|
|
|
|
const fileInput = document.getElementById('fileInput');
|
|
|
|
|
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}`;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
