842 lines
29 KiB
HTML
842 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LightRAG Production System</title>
|
|
<style>
|
|
:root {
|
|
--primary-color: #2563eb;
|
|
--secondary-color: #64748b;
|
|
--success-color: #10b981;
|
|
--warning-color: #f59e0b;
|
|
--error-color: #ef4444;
|
|
--bg-color: #f8fafc;
|
|
--card-bg: #ffffff;
|
|
--text-color: #1e293b;
|
|
--border-color: #e2e8f0;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
header {
|
|
background: var(--card-bg);
|
|
padding: 1rem 0;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.auth-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--secondary-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-success {
|
|
background: var(--success-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn:hover {
|
|
opacity: 0.9;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.card {
|
|
background: var(--card-bg);
|
|
border-radius: 0.5rem;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.card-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.card h2 {
|
|
margin-bottom: 1rem;
|
|
color: var(--primary-color);
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.375rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
|
}
|
|
|
|
.file-upload {
|
|
border: 2px dashed var(--border-color);
|
|
padding: 2rem;
|
|
text-align: center;
|
|
border-radius: 0.375rem;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.file-upload:hover {
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.file-upload input {
|
|
display: none;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.status-online {
|
|
background: var(--success-color);
|
|
}
|
|
|
|
.status-offline {
|
|
background: var(--error-color);
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.stat-card {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
background: var(--bg-color);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.75rem;
|
|
color: var(--secondary-color);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.search-results {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.375rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.result-item {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.result-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.result-title {
|
|
font-weight: 500;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.result-content {
|
|
font-size: 0.875rem;
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
.result-meta {
|
|
font-size: 0.75rem;
|
|
color: var(--secondary-color);
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.document-list {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.document-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.document-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.document-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.document-status {
|
|
font-size: 0.75rem;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 1rem;
|
|
background: var(--bg-color);
|
|
}
|
|
|
|
.status-processing {
|
|
background: var(--warning-color);
|
|
color: white;
|
|
}
|
|
|
|
.status-completed {
|
|
background: var(--success-color);
|
|
color: white;
|
|
}
|
|
|
|
.status-error {
|
|
background: var(--error-color);
|
|
color: white;
|
|
}
|
|
|
|
.loading {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #f3f3f3;
|
|
border-top: 2px solid var(--primary-color);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.alert {
|
|
padding: 1rem;
|
|
border-radius: 0.375rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.alert-success {
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
border: 1px solid #a7f3d0;
|
|
}
|
|
|
|
.alert-error {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
border: 1px solid #fca5a5;
|
|
}
|
|
|
|
.login-container {
|
|
max-width: 400px;
|
|
margin: 100px auto;
|
|
padding: 2rem;
|
|
background: var(--card-bg);
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.login-container h1 {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
color: var(--primary-color);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Login Screen -->
|
|
<div id="loginScreen" class="login-container">
|
|
<h1>LightRAG System</h1>
|
|
<div class="form-group">
|
|
<label for="username">Username</label>
|
|
<input type="text" id="username" class="form-control" value="admin">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<input type="password" id="password" class="form-control" value="jleu1212">
|
|
</div>
|
|
<button id="loginBtn" class="btn btn-primary" style="width: 100%;">Login</button>
|
|
<div id="loginMessage" class="alert alert-error hidden" style="margin-top: 1rem;"></div>
|
|
</div>
|
|
|
|
<!-- Main Application -->
|
|
<div id="app" class="hidden">
|
|
<header>
|
|
<div class="container">
|
|
<div class="header-content">
|
|
<div class="logo">LightRAG Production System</div>
|
|
<div class="auth-section">
|
|
<span id="serverStatus">
|
|
<span class="status-indicator status-offline"></span>
|
|
Server Offline
|
|
</span>
|
|
<button id="logoutBtn" class="btn btn-secondary">Logout</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<!-- System Status -->
|
|
<div class="card card-full">
|
|
<h2>System Status</h2>
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="docCount">0</div>
|
|
<div class="stat-label">Documents</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="processedCount">0</div>
|
|
<div class="stat-label">Processed</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="errorCount">0</div>
|
|
<div class="stat-label">Errors</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="searchCount">0</div>
|
|
<div class="stat-label">Searches</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<!-- Document Upload -->
|
|
<div class="card">
|
|
<h2>Document Upload</h2>
|
|
<div class="form-group">
|
|
<label>Supported formats: PDF, DOCX, XLSX, PPTX, TXT, Images</label>
|
|
<div class="file-upload" id="fileUploadArea">
|
|
<input type="file" id="fileInput" multiple>
|
|
<p>Click to upload documents or drag and drop</p>
|
|
<p style="font-size: 0.75rem; color: var(--secondary-color); margin-top: 0.5rem;">
|
|
Max file size: 100MB
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div id="uploadProgress" class="hidden">
|
|
<div class="loading"></div>
|
|
<span>Uploading...</span>
|
|
</div>
|
|
<div id="uploadMessage" class="alert hidden"></div>
|
|
</div>
|
|
|
|
<!-- Search Interface -->
|
|
<div class="card">
|
|
<h2>Search Documents</h2>
|
|
<div class="form-group">
|
|
<input type="text" id="searchQuery" class="form-control" placeholder="Enter your search query...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="topK">Number of results:</label>
|
|
<select id="topK" class="form-control">
|
|
<option value="5">5</option>
|
|
<option value="10" selected>10</option>
|
|
<option value="20">20</option>
|
|
<option value="50">50</option>
|
|
</select>
|
|
</div>
|
|
<button id="searchBtn" class="btn btn-primary">Search</button>
|
|
<div id="searchResults" class="search-results hidden">
|
|
<!-- Search results will be populated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Document Management -->
|
|
<div class="card card-full">
|
|
<h2>Document Management</h2>
|
|
<button id="refreshDocsBtn" class="btn btn-secondary">Refresh List</button>
|
|
<div id="documentList" class="document-list">
|
|
<!-- Document list will be populated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let authToken = null;
|
|
let serverStatusInterval = null;
|
|
|
|
// DOM Elements
|
|
const loginScreen = document.getElementById('loginScreen');
|
|
const app = document.getElementById('app');
|
|
const loginBtn = document.getElementById('loginBtn');
|
|
const logoutBtn = document.getElementById('logoutBtn');
|
|
const fileUploadArea = document.getElementById('fileUploadArea');
|
|
const fileInput = document.getElementById('fileInput');
|
|
const uploadProgress = document.getElementById('uploadProgress');
|
|
const uploadMessage = document.getElementById('uploadMessage');
|
|
const searchBtn = document.getElementById('searchBtn');
|
|
const refreshDocsBtn = document.getElementById('refreshDocsBtn');
|
|
const serverStatus = document.getElementById('serverStatus');
|
|
|
|
// Login functionality
|
|
loginBtn.addEventListener('click', async () => {
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
const message = document.getElementById('loginMessage');
|
|
|
|
try {
|
|
const formData = new URLSearchParams();
|
|
formData.append('username', username);
|
|
formData.append('password', password);
|
|
|
|
const response = await fetch('http://localhost:3015/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: formData
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
authToken = data.access_token;
|
|
loginScreen.classList.add('hidden');
|
|
app.classList.remove('hidden');
|
|
startServerMonitoring();
|
|
loadDocuments();
|
|
message.classList.add('hidden');
|
|
} else {
|
|
message.textContent = 'Login failed. Check credentials.';
|
|
message.classList.remove('hidden');
|
|
message.classList.add('alert-error');
|
|
}
|
|
} catch (error) {
|
|
message.textContent = 'Connection error. Make sure server is running.';
|
|
message.classList.remove('hidden');
|
|
message.classList.add('alert-error');
|
|
}
|
|
});
|
|
|
|
// Logout functionality
|
|
logoutBtn.addEventListener('click', () => {
|
|
authToken = null;
|
|
app.classList.add('hidden');
|
|
loginScreen.classList.remove('hidden');
|
|
stopServerMonitoring();
|
|
});
|
|
|
|
// File upload functionality
|
|
fileUploadArea.addEventListener('click', () => {
|
|
fileInput.click();
|
|
});
|
|
|
|
fileUploadArea.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
fileUploadArea.style.borderColor = 'var(--primary-color)';
|
|
});
|
|
|
|
fileUploadArea.addEventListener('dragleave', () => {
|
|
fileUploadArea.style.borderColor = 'var(--border-color)';
|
|
});
|
|
|
|
fileUploadArea.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
fileUploadArea.style.borderColor = 'var(--border-color)';
|
|
if (e.dataTransfer.files.length > 0) {
|
|
uploadFiles(e.dataTransfer.files);
|
|
}
|
|
});
|
|
|
|
fileInput.addEventListener('change', (e) => {
|
|
if (e.target.files.length > 0) {
|
|
uploadFiles(e.target.files);
|
|
}
|
|
});
|
|
|
|
async function uploadFiles(files) {
|
|
if (!authToken) {
|
|
showMessage('Please login first', 'error');
|
|
return;
|
|
}
|
|
|
|
uploadProgress.classList.remove('hidden');
|
|
uploadMessage.classList.add('hidden');
|
|
|
|
for (let file of files) {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
try {
|
|
const response = await fetch('http://localhost:3015/upload', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${authToken}`
|
|
},
|
|
body: formData
|
|
});
|
|
|
|
if (response.ok) {
|
|
showMessage(`File "${file.name}" uploaded successfully`, 'success');
|
|
loadDocuments(); // Refresh document list
|
|
} else {
|
|
showMessage(`Failed to upload "${file.name}"`, 'error');
|
|
}
|
|
} catch (error) {
|
|
showMessage(`Error uploading "${file.name}": ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
uploadProgress.classList.add('hidden');
|
|
fileInput.value = ''; // Reset file input
|
|
}
|
|
|
|
// Search functionality
|
|
searchBtn.addEventListener('click', async () => {
|
|
const query = document.getElementById('searchQuery').value.trim();
|
|
const topK = document.getElementById('topK').value;
|
|
|
|
if (!query) {
|
|
showMessage('Please enter a search query', 'error');
|
|
return;
|
|
}
|
|
|
|
if (!authToken) {
|
|
showMessage('Please login first', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('http://localhost:3015/search', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${authToken}`
|
|
},
|
|
body: JSON.stringify({
|
|
query: query,
|
|
top_k: parseInt(topK)
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
const results = await response.json();
|
|
displaySearchResults(results);
|
|
updateSearchCount();
|
|
} else {
|
|
showMessage('Search failed', 'error');
|
|
}
|
|
} catch (error) {
|
|
showMessage(`Search error: ${error.message}`, 'error');
|
|
}
|
|
});
|
|
|
|
// Document management
|
|
refreshDocsBtn.addEventListener('click', loadDocuments);
|
|
|
|
async function loadDocuments() {
|
|
if (!authToken) return;
|
|
|
|
try {
|
|
// Note: This endpoint might need to be implemented in the LightRAG server
|
|
const response = await fetch('http://localhost:3015/documents', {
|
|
headers: {
|
|
'Authorization': `Bearer ${authToken}`
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const documents = await response.json();
|
|
displayDocuments(documents);
|
|
updateDocumentStats(documents);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading documents:', error);
|
|
}
|
|
}
|
|
|
|
function displayDocuments(documents) {
|
|
const container = document.getElementById('documentList');
|
|
container.innerHTML = '';
|
|
|
|
if (!documents || documents.length === 0) {
|
|
container.innerHTML = '<p style="text-align: center; color: var(--secondary-color); padding: 2rem;">No documents found</p>';
|
|
return;
|
|
}
|
|
|
|
documents.forEach(doc => {
|
|
const item = document.createElement('div');
|
|
item.className = 'document-item';
|
|
|
|
const statusClass = doc.status === 'processed' ? 'status-completed' :
|
|
doc.status === 'processing' ? 'status-processing' : 'status-error';
|
|
|
|
item.innerHTML = `
|
|
<div class="document-name">${doc.name || doc.filename}</div>
|
|
<div class="document-status ${statusClass}">${doc.status || 'unknown'}</div>
|
|
`;
|
|
|
|
container.appendChild(item);
|
|
});
|
|
}
|
|
|
|
function displaySearchResults(results) {
|
|
const container = document.getElementById('searchResults');
|
|
container.innerHTML = '';
|
|
container.classList.remove('hidden');
|
|
|
|
if (!results || results.length === 0) {
|
|
container.innerHTML = '<p style="text-align: center; padding: 2rem; color: var(--secondary-color);">No results found</p>';
|
|
return;
|
|
}
|
|
|
|
// Track unique document sources for references section
|
|
const documentSources = new Map();
|
|
|
|
results.forEach((result, index) => {
|
|
const item = document.createElement('div');
|
|
item.className = 'result-item';
|
|
|
|
// Extract document source from metadata
|
|
const source = result.metadata?.source || result.source || 'Unknown';
|
|
const documentId = result.metadata?.document_id || `doc_${index}`;
|
|
const page = result.metadata?.page || 1;
|
|
|
|
// Store document source for references section
|
|
if (source !== 'Unknown' && !documentSources.has(source)) {
|
|
documentSources.set(source, {
|
|
documentId,
|
|
page,
|
|
score: result.score || 0
|
|
});
|
|
}
|
|
|
|
// Create clickable source link
|
|
const sourceLink = source !== 'Unknown'
|
|
? `<a href="http://localhost:3015/api/documents/download/${encodeURIComponent(source)}" target="_blank" style="color: var(--primary-color); text-decoration: none;">${source}</a>`
|
|
: source;
|
|
|
|
item.innerHTML = `
|
|
<div class="result-title">Result ${index + 1}</div>
|
|
<div class="result-content">${result.content || result.text || 'No content available'}</div>
|
|
<div class="result-meta">
|
|
Source: ${sourceLink} |
|
|
Page: ${page} |
|
|
Score: ${result.score ? result.score.toFixed(3) : 'N/A'} |
|
|
Type: ${result.type || 'chunk'}
|
|
</div>
|
|
`;
|
|
|
|
container.appendChild(item);
|
|
});
|
|
|
|
// Add references section at the bottom
|
|
if (documentSources.size > 0) {
|
|
const referencesSection = document.createElement('div');
|
|
referencesSection.className = 'result-item';
|
|
referencesSection.style.backgroundColor = 'var(--bg-color)';
|
|
referencesSection.style.borderTop = '2px solid var(--border-color)';
|
|
referencesSection.style.marginTop = '1rem';
|
|
referencesSection.style.paddingTop = '1rem';
|
|
|
|
let referencesHtml = '<div class="result-title">📚 Document References</div>';
|
|
referencesHtml += '<div class="result-content" style="font-size: 0.875rem;">';
|
|
referencesHtml += '<p>Click on document names to download:</p>';
|
|
referencesHtml += '<ul style="margin-top: 0.5rem; padding-left: 1.5rem;">';
|
|
|
|
documentSources.forEach((info, source) => {
|
|
const downloadUrl = `http://localhost:3015/api/documents/download/${encodeURIComponent(source)}`;
|
|
referencesHtml += `
|
|
<li style="margin-bottom: 0.25rem;">
|
|
<a href="${downloadUrl}" target="_blank"
|
|
style="color: var(--primary-color); text-decoration: none; font-weight: 500;">
|
|
📄 ${source}
|
|
</a>
|
|
<span style="font-size: 0.75rem; color: var(--secondary-color); margin-left: 0.5rem;">
|
|
(Page ${info.page}, Score: ${info.score.toFixed(3)})
|
|
</span>
|
|
<button onclick="downloadDocument('${source}')"
|
|
style="margin-left: 0.5rem; padding: 0.125rem 0.5rem; font-size: 0.75rem;
|
|
background: var(--primary-color); color: white; border: none;
|
|
border-radius: 0.25rem; cursor: pointer;">
|
|
Download
|
|
</button>
|
|
</li>
|
|
`;
|
|
});
|
|
|
|
referencesHtml += '</ul></div>';
|
|
referencesSection.innerHTML = referencesHtml;
|
|
container.appendChild(referencesSection);
|
|
}
|
|
}
|
|
|
|
// Function to download document
|
|
async function downloadDocument(filename) {
|
|
if (!authToken) {
|
|
showMessage('Please login first', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`http://localhost:3015/api/documents/download/${encodeURIComponent(filename)}`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${authToken}`
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
// Create download link
|
|
const blob = await response.blob();
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = filename;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
document.body.removeChild(a);
|
|
|
|
showMessage(`Download started: ${filename}`, 'success');
|
|
} else {
|
|
showMessage(`Failed to download: ${filename}`, 'error');
|
|
}
|
|
} catch (error) {
|
|
showMessage(`Download error: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
// Server monitoring
|
|
function startServerMonitoring() {
|
|
checkServerStatus();
|
|
serverStatusInterval = setInterval(checkServerStatus, 30000); // Check every 30 seconds
|
|
}
|
|
|
|
function stopServerMonitoring() {
|
|
if (serverStatusInterval) {
|
|
clearInterval(serverStatusInterval);
|
|
serverStatusInterval = null;
|
|
}
|
|
}
|
|
|
|
async function checkServerStatus() {
|
|
try {
|
|
const response = await fetch('http://localhost:3015/health');
|
|
if (response.ok) {
|
|
serverStatus.innerHTML = '<span class="status-indicator status-online"></span> Server Online';
|
|
} else {
|
|
serverStatus.innerHTML = '<span class="status-indicator status-offline"></span> Server Error';
|
|
}
|
|
} catch (error) {
|
|
serverStatus.innerHTML = '<span class="status-indicator status-offline"></span> Server Offline';
|
|
}
|
|
}
|
|
|
|
// Utility functions
|
|
function showMessage(text, type) {
|
|
uploadMessage.textContent = text;
|
|
uploadMessage.className = `alert alert-${type}`;
|
|
uploadMessage.classList.remove('hidden');
|
|
|
|
setTimeout(() => {
|
|
uploadMessage.classList.add('hidden');
|
|
}, 5000);
|
|
}
|
|
|
|
function updateDocumentStats(documents) {
|
|
const total = documents.length;
|
|
const processed = documents.filter(d => d.status === 'processed').length;
|
|
const errors = documents.filter(d => d.status === 'error').length;
|
|
|
|
document.getElementById('docCount').textContent = total;
|
|
document.getElementById('processedCount').textContent = processed;
|
|
document.getElementById('errorCount').textContent = errors;
|
|
}
|
|
|
|
function updateSearchCount() {
|
|
const current = parseInt(document.getElementById('searchCount').textContent);
|
|
document.getElementById('searchCount').textContent = current + 1;
|
|
}
|
|
|
|
// Initialize
|
|
checkServerStatus();
|
|
</script>
|
|
</body>
|
|
</html> |