Hugging Face's logo

Spaces:
NAITIVEAIAGENCY
/
ocr
Running

App Files Community
ocr / index.html
NAITIVEAIAGENCY's picture
NAITIVEAIAGENCY
undefined - Initial Deployment
ef239fa verified
raw
history blame contribute delete
56.4 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced OCR Processing System</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.split-view {
display: flex;
height: calc(100vh - 200px);
}
.split-pane {
flex: 1;
overflow: auto;
padding: 1rem;
border: 1px solid #e2e8f0;
}
.resize-handle {
width: 8px;
background: #e2e8f0;
cursor: col-resize;
}
.dropzone {
border: 2px dashed #cbd5e0;
border-radius: 0.5rem;
transition: all 0.3s ease;
}
.dropzone.active {
border-color: #4299e1;
background-color: #ebf8ff;
}
.markdown-table {
width: 100%;
border-collapse: collapse;
}
.markdown-table th, .markdown-table td {
border: 1px solid #e2e8f0;
padding: 0.5rem;
}
.markdown-table th {
background-color: #f7fafc;
}
.progress-bar {
height: 6px;
background-color: #e2e8f0;
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: #4299e1;
transition: width 0.3s ease;
}
.status-badge {
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
}
.status-approved {
background-color: #f0fff4;
color: #38a169;
}
.status-rejected {
background-color: #fff5f5;
color: #e53e3e;
}
.status-pending {
background-color: #fffaf0;
color: #dd6b20;
}
.status-escalated {
background-color: #ebf8ff;
color: #3182ce;
}
.pdf-viewer {
height: 100%;
width: 100%;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
}
.ws-status {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.ws-connected {
background-color: #48bb78;
}
.ws-disconnected {
background-color: #f56565;
}
.ws-connecting {
background-color: #ed8936;
}
</style>
</head>
<body class="bg-gray-50">
<div class="min-h-screen">
<!-- Header -->
<header class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-file-alt text-blue-500 text-2xl mr-3"></i>
<h1 class="text-xl font-bold text-gray-900">Advanced OCR Processing System</h1>
</div>
<div class="flex items-center space-x-4">
<div class="flex items-center">
<span class="ws-status ws-connected" id="ws-status"></span>
<span class="text-sm text-gray-500" id="ws-status-text">Connected</span>
</div>
<div class="relative">
<button class="flex items-center text-gray-500 hover:text-gray-700 focus:outline-none">
<i class="fas fa-bell"></i>
<span class="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-red-500 text-white text-xs flex items-center justify-center">3</span>
</button>
</div>
<div class="flex items-center">
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<span class="ml-2 text-sm font-medium text-gray-700">Admin User</span>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
<!-- Tabs Navigation -->
<div class="border-b border-gray-200">
<nav class="-mb-px flex space-x-8">
<button id="upload-tab" class="border-blue-500 text-blue-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Upload Documents</button>
<button id="processing-tab" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Processing Queue</button>
<button id="review-tab" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Human Review</button>
<button id="analytics-tab" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Analytics Dashboard</button>
</nav>
</div>
<!-- Tab Content -->
<div class="mt-6">
<!-- Upload Documents Tab -->
<div id="upload-content" class="tab-content">
<div class="bg-white shadow rounded-lg p-6">
<h2 class="text-lg font-medium text-gray-900 mb-4">Upload Documents for OCR Processing</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- File Upload Section -->
<div>
<div id="dropzone" class="dropzone p-8 text-center cursor-pointer">
<input type="file" id="file-upload" class="hidden" multiple accept=".pdf,.jpg,.jpeg,.png,.tiff">
<div class="flex flex-col items-center justify-center">
<i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-3"></i>
<p class="text-sm text-gray-600 mb-1">Drag & drop files here or click to browse</p>
<p class="text-xs text-gray-500">Supports PDF, JPG, JPEG, PNG, TIFF (Max 100MB each)</p>
</div>
</div>
<div id="file-list" class="mt-4 space-y-2 max-h-60 overflow-y-auto"></div>
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Processing Engine</label>
<select id="engine-select" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
<option value="auto">Auto-select (Best for document type)</option>
<option value="gemini">Gemini 2.5 Flash (Fastest)</option>
<option value="gpt4">GPT-4o (Most accurate)</option>
<option value="mistral">Mistral Pixtral-12B (Balanced)</option>
</select>
</div>
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Extraction Options</label>
<div class="space-y-2">
<div class="flex items-center">
<input id="include-marginalia" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="include-marginalia" class="ml-2 block text-sm text-gray-700">Include marginalia</label>
</div>
<div class="flex items-center">
<input id="include-metadata" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="include-metadata" class="ml-2 block text-sm text-gray-700">Include metadata in markdown</label>
</div>
</div>
</div>
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Fields Schema (JSON)</label>
<textarea id="fields-schema" rows="5" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder='{"type": "object", "properties": {"field1": {"type": "string"}, "field2": {"type": "string"}}, "required": ["field1", "field2"]}'>{"type": "object", "properties": {"field1": {"type": "string"}, "field2": {"type": "string"}}, "required": ["field1", "field2"]}</textarea>
</div>
<button id="start-processing" class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Start Processing
</button>
</div>
<!-- Batch Processing Instructions -->
<div>
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-info-circle text-blue-400"></i>
</div>
<div class="ml-3">
<p class="text-sm text-blue-700">
For batch processing, upload multiple files at once. The system will automatically parallelize processing for optimal performance.
</p>
</div>
</div>
</div>
<h3 class="text-md font-medium text-gray-900 mb-3">Processing Guidelines</h3>
<ul class="space-y-3 text-sm text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>For best results with handwritten documents, use the GPT-4o engine</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Table-heavy documents work well with Mistral Pixtral-12B</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Include marginalia for documents with side notes or annotations</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Define your fields schema carefully to ensure accurate extraction</span>
</li>
</ul>
<div class="mt-6 p-4 bg-gray-50 rounded-lg">
<h4 class="text-sm font-medium text-gray-900 mb-2">Sample Fields Schema</h4>
<pre class="text-xs bg-white p-2 rounded overflow-x-auto">{
"type": "object",
"properties": {
"invoice_number": {"type": "string"},
"date": {"type": "string"},
"total_amount": {"type": "number"},
"vendor_name": {"type": "string"}
},
"required": ["invoice_number", "date", "total_amount"]
}</pre>
</div>
</div>
</div>
</div>
</div>
<!-- Processing Queue Tab -->
<div id="processing-content" class="tab-content hidden">
<div class="bg-white shadow rounded-lg overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200">
<h2 class="text-lg font-medium text-gray-900">Processing Queue</h2>
<p class="mt-1 text-sm text-gray-500">Real-time status of all OCR processing jobs</p>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Job ID</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Filename</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Engine</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pages</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody id="processing-jobs" class="bg-white divide-y divide-gray-200">
<!-- Jobs will be added here dynamically -->
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-gray-200 bg-gray-50 text-right">
<button id="refresh-jobs" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<i class="fas fa-sync-alt mr-2"></i> Refresh
</button>
</div>
</div>
</div>
<!-- Human Review Tab -->
<div id="review-content" class="tab-content hidden">
<div class="bg-white shadow rounded-lg overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200">
<div class="flex justify-between items-center">
<div>
<h2 class="text-lg font-medium text-gray-900">Human Review</h2>
<p class="mt-1 text-sm text-gray-500">Review and validate extracted data</p>
</div>
<div class="flex space-x-3">
<select id="review-filter" class="mt-1 block pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
<option value="all">All Documents</option>
<option value="pending">Pending Review</option>
<option value="approved">Approved</option>
<option value="rejected">Rejected</option>
<option value="escalated">Escalated</option>
</select>
<button id="export-reviewed" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<i class="fas fa-download mr-2"></i> Export
</button>
</div>
</div>
</div>
<div class="split-view">
<div class="split-pane">
<div class="overflow-y-auto h-full">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50 sticky top-0">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Document</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reviewer</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Updated</th>
</tr>
</thead>
<tbody id="review-documents" class="bg-white divide-y divide-gray-200">
<!-- Documents will be added here dynamically -->
</tbody>
</table>
</div>
</div>
<div class="resize-handle"></div>
<div class="split-pane">
<div id="review-detail" class="h-full flex flex-col">
<div class="flex justify-between items-center mb-4">
<h3 class="text-md font-medium text-gray-900">Document Details</h3>
<div class="flex space-x-2">
<button id="approve-doc" class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
Approve
</button>
<button id="reject-doc" class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
Reject
</button>
<button id="escalate-doc" class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Escalate
</button>
</div>
</div>
<div class="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4 overflow-hidden">
<div class="border rounded-lg overflow-hidden">
<div class="bg-gray-50 px-4 py-2 border-b">
<h4 class="text-sm font-medium text-gray-900">Original Document</h4>
</div>
<div class="pdf-viewer">
<iframe id="pdf-preview" class="w-full h-full" src="about:blank"></iframe>
</div>
</div>
<div class="border rounded-lg overflow-hidden">
<div class="bg-gray-50 px-4 py-2 border-b">
<h4 class="text-sm font-medium text-gray-900">Extracted Data</h4>
</div>
<div class="p-4 overflow-y-auto h-full">
<div id="extracted-data" class="prose max-w-none">
<!-- Extracted data will be displayed here -->
<p class="text-gray-500 italic">Select a document to view extracted data</p>
</div>
</div>
</div>
</div>
<div class="mt-4">
<label for="review-notes" class="block text-sm font-medium text-gray-700">Review Notes</label>
<textarea id="review-notes" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Analytics Dashboard Tab -->
<div id="analytics-content" class="tab-content hidden">
<div class="bg-white shadow rounded-lg p-6">
<h2 class="text-lg font-medium text-gray-900 mb-4">OCR Processing Analytics</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div class="bg-blue-50 rounded-lg p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-blue-800">Documents Processed</p>
<p class="text-2xl font-semibold text-blue-900 mt-1">1,248</p>
</div>
<div class="bg-blue-100 p-3 rounded-full">
<i class="fas fa-file-alt text-blue-600"></i>
</div>
</div>
<div class="mt-2">
<span class="text-xs font-medium text-blue-700">+12% from last week</span>
</div>
</div>
<div class="bg-green-50 rounded-lg p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-green-800">Accuracy Rate</p>
<p class="text-2xl font-semibold text-green-900 mt-1">94.7%</p>
</div>
<div class="bg-green-100 p-3 rounded-full">
<i class="fas fa-check-circle text-green-600"></i>
</div>
</div>
<div class="mt-2">
<span class="text-xs font-medium text-green-700">+2.3% from last week</span>
</div>
</div>
<div class="bg-purple-50 rounded-lg p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-purple-800">Avg Processing Time</p>
<p class="text-2xl font-semibold text-purple-900 mt-1">3.2s</p>
</div>
<div class="bg-purple-100 p-3 rounded-full">
<i class="fas fa-clock text-purple-600"></i>
</div>
</div>
<div class="mt-2">
<span class="text-xs font-medium text-purple-700">-0.8s from last week</span>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h3 class="text-md font-medium text-gray-900 mb-4">Processing Volume by Day</h3>
<div class="h-64">
<canvas id="volume-chart"></canvas>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h3 class="text-md font-medium text-gray-900 mb-4">Engine Performance</h3>
<div class="h-64">
<canvas id="engine-chart"></canvas>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h3 class="text-md font-medium text-gray-900 mb-4">Document Types</h3>
<div class="h-64">
<canvas id="type-chart"></canvas>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h3 class="text-md font-medium text-gray-900 mb-4">Review Status</h3>
<div class="h-64">
<canvas id="review-chart"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Tab switching functionality
document.addEventListener('DOMContentLoaded', function() {
const tabs = {
'upload-tab': 'upload-content',
'processing-tab': 'processing-content',
'review-tab': 'review-content',
'analytics-tab': 'analytics-content'
};
// Initialize first tab as active
document.getElementById('upload-tab').classList.add('border-blue-500', 'text-blue-600');
document.getElementById('upload-content').classList.remove('hidden');
// Add click event listeners to all tabs
Object.keys(tabs).forEach(tabId => {
document.getElementById(tabId).addEventListener('click', function() {
// Remove active classes from all tabs and hide all content
Object.keys(tabs).forEach(id => {
document.getElementById(id).classList.remove('border-blue-500', 'text-blue-600');
document.getElementById(id).classList.add('border-transparent', 'text-gray-500');
document.getElementById(tabs[id]).classList.add('hidden');
});
// Add active classes to clicked tab and show its content
this.classList.remove('border-transparent', 'text-gray-500');
this.classList.add('border-blue-500', 'text-blue-600');
document.getElementById(tabs[tabId]).classList.remove('hidden');
// Initialize charts when analytics tab is shown
if (tabId === 'analytics-tab') {
initCharts();
}
});
});
// File upload functionality
const dropzone = document.getElementById('dropzone');
const fileInput = document.getElementById('file-upload');
const fileList = document.getElementById('file-list');
dropzone.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', handleFiles);
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropzone.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
dropzone.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
dropzone.addEventListener(eventName, unhighlight, false);
});
function highlight() {
dropzone.classList.add('active');
}
function unhighlight() {
dropzone.classList.remove('active');
}
dropzone.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
handleFiles({ target: { files } });
}
function handleFiles(e) {
const files = e.target.files;
if (files.length === 0) return;
fileList.innerHTML = '';
for (let i = 0; i < files.length; i++) {
const file = files[i];
const fileItem = document.createElement('div');
fileItem.className = 'flex items-center justify-between p-2 bg-gray-50 rounded';
fileItem.innerHTML = `
<div class="flex items-center truncate">
<i class="fas fa-file-alt text-gray-400 mr-2"></i>
<span class="text-sm truncate">${file.name}</span>
</div>
<div class="flex items-center">
<span class="text-xs text-gray-500 mr-2">${formatFileSize(file.size)}</span>
<button class="text-red-400 hover:text-red-600" data-file="${file.name}">
<i class="fas fa-times"></i>
</button>
</div>
`;
fileList.appendChild(fileItem);
}
// Add event listeners to remove buttons
document.querySelectorAll('#file-list button').forEach(button => {
button.addEventListener('click', function() {
const fileName = this.getAttribute('data-file');
// In a real app, we would remove the file from the FileList
this.parentNode.parentNode.remove();
});
});
}
function formatFileSize(bytes) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
// Start processing button
document.getElementById('start-processing').addEventListener('click', function() {
const files = fileInput.files;
if (files.length === 0) {
alert('Please select at least one file to process');
return;
}
const engine = document.getElementById('engine-select').value;
const includeMarginalia = document.getElementById('include-marginalia').checked;
const includeMetadata = document.getElementById('include-metadata').checked;
const fieldsSchema = document.getElementById('fields-schema').value;
try {
JSON.parse(fieldsSchema); // Validate JSON
} catch (e) {
alert('Invalid JSON in Fields Schema');
return;
}
// In a real app, we would send this to the server for processing
console.log('Starting processing with:', {
files: Array.from(files).map(f => f.name),
engine,
includeMarginalia,
includeMetadata,
fieldsSchema: JSON.parse(fieldsSchema)
});
// Simulate adding to processing queue
addProcessingJob(files[0].name, engine);
// Switch to processing tab
document.getElementById('processing-tab').click();
});
// Add sample processing jobs
function addProcessingJob(filename, engine) {
const jobsTable = document.getElementById('processing-jobs');
const jobId = 'job-' + Math.random().toString(36).substr(2, 8);
const row = document.createElement('tr');
row.innerHTML = `
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${jobId}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${filename}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${engine}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Processing</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="progress-bar">
<div class="progress-fill" style="width: 30%"></div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${Math.floor(Math.random() * 10) + 1}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button class="text-red-600 hover:text-red-900">Cancel</button>
</td>
`;
jobsTable.appendChild(row);
// Simulate progress
const progressFill = row.querySelector('.progress-fill');
let progress = 30;
const interval = setInterval(() => {
progress += Math.random() * 10;
if (progress >= 100) {
progress = 100;
clearInterval(interval);
row.querySelector('td:nth-child(4)').textContent = 'Completed';
row.querySelector('td:nth-child(4)').classList.add('text-green-600');
row.querySelector('td:nth-child(7) button').textContent = 'View';
// Add to review queue when complete
addReviewDocument(filename, jobId);
}
progressFill.style.width = `${progress}%`;
}, 1000);
}
// Add sample review documents
function addReviewDocument(filename, jobId) {
const statuses = ['pending', 'approved', 'rejected', 'escalated'];
const status = statuses[Math.floor(Math.random() * statuses.length)];
const reviewers = ['John Doe', 'Jane Smith', 'Mike Johnson', 'Sarah Williams'];
const reviewer = status === 'pending' ? '-' : reviewers[Math.floor(Math.random() * reviewers.length)];
const documentsTable = document.getElementById('review-documents');
const row = document.createElement('tr');
row.className = 'cursor-pointer hover:bg-gray-50';
row.dataset.filename = filename;
row.dataset.jobId = jobId;
row.dataset.status = status;
row.innerHTML = `
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<i class="fas fa-file-alt text-gray-400 mr-2"></i>
<div class="text-sm font-medium text-gray-900">${filename}</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="status-badge status-${status}">${status.charAt(0).toUpperCase() + status.slice(1)}</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${reviewer}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${new Date().toLocaleString()}</td>
`;
documentsTable.appendChild(row);
// Add click handler to show document details
row.addEventListener('click', function() {
showDocumentDetails(filename, jobId, status);
});
}
// Show document details in review panel
function showDocumentDetails(filename, jobId, status) {
// Highlight selected row
document.querySelectorAll('#review-documents tr').forEach(row => {
row.classList.remove('bg-blue-50');
});
event.currentTarget.classList.add('bg-blue-50');
// Update buttons based on status
document.getElementById('approve-doc').disabled = status !== 'pending';
document.getElementById('reject-doc').disabled = status !== 'pending';
document.getElementById('escalate-doc').disabled = status !== 'pending';
// Simulate loading PDF preview
document.getElementById('pdf-preview').src = 'about:blank';
// Simulate extracted data
const extractedData = document.getElementById('extracted-data');
extractedData.innerHTML = `
<h3>${filename}</h3>
<p class="text-sm text-gray-500">Job ID: ${jobId}</p>
<table class="markdown-table">
<thead>
<tr>
<th>Field</th>
<th>Extracted Value</th>
<th>Confidence</th>
</tr>
</thead>
<tbody>
<tr>
<td>Invoice Number</td>
<td contenteditable="true">INV-${Math.floor(Math.random() * 10000)}</td>
<td>${(Math.random() * 30 + 70).toFixed(1)}%</td>
</tr>
<tr>
<td>Date</td>
<td contenteditable="true">${new Date().toLocaleDateString()}</td>
<td>${(Math.random() * 30 + 70).toFixed(1)}%</td>
</tr>
<tr>
<td>Total Amount</td>
<td contenteditable="true">$${(Math.random() * 1000).toFixed(2)}</td>
<td>${(Math.random() * 30 + 70).toFixed(1)}%</td>
</tr>
<tr>
<td>Vendor Name</td>
<td contenteditable="true">Vendor ${Math.floor(Math.random() * 10) + 1}</td>
<td>${(Math.random() * 30 + 70).toFixed(1)}%</td>
</tr>
</tbody>
</table>
<div class="mt-4 p-3 bg-yellow-50 border-l-4 border-yellow-400">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-exclamation-triangle text-yellow-400"></i>
</div>
<div class="ml-3">
<p class="text-sm text-yellow-700">
Low confidence detected on field "Total Amount". Please verify.
</p>
</div>
</div>
</div>
`;
}
// Review action buttons
document.getElementById('approve-doc').addEventListener('click', function() {
updateDocumentStatus('approved');
});
document.getElementById('reject-doc').addEventListener('click', function() {
updateDocumentStatus('rejected');
});
document.getElementById('escalate-doc').addEventListener('click', function() {
updateDocumentStatus('escalated');
});
function updateDocumentStatus(newStatus) {
const selectedRow = document.querySelector('#review-documents tr.bg-blue-50');
if (!selectedRow) return;
const statusBadge = selectedRow.querySelector('.status-badge');
statusBadge.className = `status-badge status-${newStatus}`;
statusBadge.textContent = newStatus.charAt(0).toUpperCase() + newStatus.slice(1);
// Update reviewer and timestamp
const reviewers = ['John Doe', 'Jane Smith', 'Mike Johnson', 'Sarah Williams'];
selectedRow.cells[2].textContent = reviewers[Math.floor(Math.random() * reviewers.length)];
selectedRow.cells[3].textContent = new Date().toLocaleString();
// Disable buttons after status change
document.getElementById('approve-doc').disabled = true;
document.getElementById('reject-doc').disabled = true;
document.getElementById('escalate-doc').disabled = true;
// Save notes
const notes = document.getElementById('review-notes').value;
console.log(`Document ${selectedRow.dataset.filename} marked as ${newStatus} with notes: ${notes}`);
}
// Refresh jobs button
document.getElementById('refresh-jobs').addEventListener('click', function() {
// In a real app, this would fetch updated job statuses from the server
console.log('Refreshing job statuses...');
});
// Export reviewed documents
document.getElementById('export-reviewed').addEventListener('click', function() {
const format = prompt('Select export format (CSV, Excel, JSON, Markdown):', 'CSV');
if (format) {
alert(`Exporting reviewed documents in ${format} format...`);
}
});
// Filter review documents
document.getElementById('review-filter').addEventListener('change', function() {
const filter = this.value;
document.querySelectorAll('#review-documents tr').forEach(row => {
if (filter === 'all' || row.dataset.status === filter) {
row.style.display = '';
} else {
row.style.display = 'none';
}
});
});
// Initialize charts for analytics tab
function initCharts() {
// Volume chart
const volumeCtx = document.getElementById('volume-chart').getContext('2d');
new Chart(volumeCtx, {
type: 'line',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Documents Processed',
data: [45, 78, 62, 93, 105, 52, 30],
backgroundColor: 'rgba(66, 153, 225, 0.2)',
borderColor: 'rgba(66, 153, 225, 1)',
borderWidth: 2,
tension: 0.3
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Engine performance chart
const engineCtx = document.getElementById('engine-chart').getContext('2d');
new Chart(engineCtx, {
type: 'bar',
data: {
labels: ['Gemini 2.5 Flash', 'GPT-4o', 'Mistral Pixtral-12B'],
datasets: [{
label: 'Accuracy (%)',
data: [89.2, 96.5, 92.8],
backgroundColor: [
'rgba(102, 126, 234, 0.7)',
'rgba(237, 137, 54, 0.7)',
'rgba(72, 187, 120, 0.7)'
],
borderColor: [
'rgba(102, 126, 234, 1)',
'rgba(237, 137, 54, 1)',
'rgba(72, 187, 120, 1)'
],
borderWidth: 1
}, {
label: 'Speed (pages/sec)',
data: [12.4, 7.8, 9.6],
backgroundColor: [
'rgba(102, 126, 234, 0.4)',
'rgba(237, 137, 54, 0.4)',
'rgba(72, 187, 120, 0.4)'
],
borderColor: [
'rgba(102, 126, 234, 1)',
'rgba(237, 137, 54, 1)',
'rgba(72, 187, 120, 1)'
],
borderWidth: 1,
type: 'line',
yAxisID: 'y1'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Accuracy (%)'
}
},
y1: {
position: 'right',
beginAtZero: true,
title: {
display: true,
text: 'Speed (pages/sec)'
},
grid: {
drawOnChartArea: false
}
}
}
}
});
// Document types chart
const typeCtx = document.getElementById('type-chart').getContext('2d');
new Chart(typeCtx, {
type: 'doughnut',
data: {
labels: ['Invoices', 'Receipts', 'Forms', 'Contracts', 'Other'],
datasets: [{
data: [35, 25, 20, 15, 5],
backgroundColor: [
'rgba(66, 153, 225, 0.7)',
'rgba(102, 126, 234, 0.7)',
'rgba(237, 137, 54, 0.7)',
'rgba(72, 187, 120, 0.7)',
'rgba(224, 102, 102, 0.7)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
// Review status chart
const reviewCtx = document.getElementById('review-chart').getContext('2d');
new Chart(reviewCtx, {
type: 'polarArea',
data: {
labels: ['Approved', 'Rejected', 'Pending', 'Escalated'],
datasets: [{
data: [65, 10, 15, 10],
backgroundColor: [
'rgba(72, 187, 120, 0.7)',
'rgba(224, 102, 102, 0.7)',
'rgba(237, 137, 54, 0.7)',
'rgba(66, 153, 225, 0.7)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
}
// Simulate WebSocket connection
function simulateWebSocket() {
const statusElement = document.getElementById('ws-status');
const statusText = document.getElementById('ws-status-text');
// Start with connected
statusElement.className = 'ws-status ws-connected';
statusText.textContent = 'Connected';
// Randomly change status to simulate real-world conditions
setInterval(() => {
const states = [
{ class: 'ws-connected', text: 'Connected' },
{ class: 'ws-disconnected', text: 'Disconnected' },
{ class: 'ws-connecting', text: 'Connecting' }
];
const randomState = states[Math.floor(Math.random() * states.length)];
statusElement.className = 'ws-status ' + randomState.class;
statusText.textContent = randomState.text;
}, 10000);
}
simulateWebSocket();
// Add some sample data on load
for (let i = 0; i < 5; i++) {
const engines = ['Gemini 2.5 Flash', 'GPT-4o', 'Mistral Pixtral-12B'];
const engine = engines[Math.floor(Math.random() * engines.length)];
addProcessingJob(`document_${i+1}.pdf`, engine);
}
for (let i = 0; i < 8; i++) {
const engines = ['Gemini 2.5 Flash', 'GPT-4o', 'Mistral Pixtral-12B'];
const engine = engines[Math.floor(Math.random() * engines.length)];
const jobId = 'job-' + Math.random().toString(36).substr(2, 8);
addReviewDocument(`review_doc_${i+1}.pdf`, jobId);
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=NAITIVEAIAGENCY/ocr" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>