Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Dashboard - Eternal Records</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s; | |
| } | |
| .dashboard-card { | |
| transition: transform 0.2s; | |
| } | |
| .dashboard-card:hover { | |
| transform: translateY(-2px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans antialiased"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-blue-800 text-white w-64 flex-shrink-0"> | |
| <div class="p-4 border-b border-blue-700"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="map" class="h-6 w-6"></i> | |
| <span class="text-xl font-semibold">Eternal Records</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <nav> | |
| <div class="space-y-1"> | |
| <a href="#" class="flex items-center space-x-3 bg-blue-700 px-3 py-2 rounded-md text-sm font-medium"> | |
| <i data-feather="home" class="h-4 w-4"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium"> | |
| <i data-feather="book" class="h-4 w-4"></i> | |
| <span>Records</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium"> | |
| <i data-feather="map" class="h-4 w-4"></i> | |
| <span>Plot Maps</span> | |
| </a> | |
| <a href="#ocr-import" class="flex items-center space-x-3 hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium"> | |
| <i data-feather="upload" class="h-4 w-4"></i> | |
| <span>OCR Import</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium"> | |
| <i data-feather="users" class="h-4 w-4"></i> | |
| <span>Staff</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium"> | |
| <i data-feather="settings" class="h-4 w-4"></i> | |
| <span>Settings</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 hover:bg-blue-700 px-3 py-2 rounded-md text-sm font-medium"> | |
| <i data-feather="credit-card" class="h-4 w-4"></i> | |
| <span>Billing</span> | |
| </a> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Top navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center"> | |
| <h1 class="text-lg font-semibold text-gray-900">Dashboard</h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| <div class="relative"> | |
| <i data-feather="bell" class="h-5 w-5 text-gray-500"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/7" alt="User"> | |
| <span class="text-sm font-medium">Admin User</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard content --> | |
| <main class="p-4 sm:p-6 lg:p-8"> | |
| <!-- Stats --> | |
| <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8"> | |
| <div class="dashboard-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i data-feather="database" class="h-6 w-6 text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Total Records</dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900">1,248</div> | |
| <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600"> | |
| <i data-feather="arrow-up" class="h-4 w-4"></i> | |
| <span class="sr-only">Increased by</span> | |
| 12% | |
| </div> | |
| </dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> | |
| <i data-feather="map" class="h-6 w-6 text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Plots Mapped</dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900">856</div> | |
| <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600"> | |
| <i data-feather="arrow-up" class="h-4 w-4"></i> | |
| <span class="sr-only">Increased by</span> | |
| 5% | |
| </div> | |
| </dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3"> | |
| <i data-feather="users" class="h-6 w-6 text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Active Staff</dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900">8</div> | |
| <div class="ml-2 flex items-baseline text-sm font-semibold text-red-600"> | |
| <i data-feather="arrow-down" class="h-4 w-4"></i> | |
| <span class="sr-only">Decreased by</span> | |
| 2% | |
| </div> | |
| </dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i data-feather="eye" class="h-6 w-6 text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Portal Visits</dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900">1,024</div> | |
| <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600"> | |
| <i data-feather="arrow-up" class="h-4 w-4"></i> | |
| <span class="sr-only">Increased by</span> | |
| 20% | |
| </div> | |
| </dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity & Quick Actions --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Recent Activity --> | |
| <div class="lg:col-span-2 bg-white shadow overflow-hidden sm:rounded-lg"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Recent Activity</h3> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="px-4 py-4 sm:px-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-md p-2"> | |
| <i data-feather="edit" class="h-5 w-5 text-blue-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Record updated</p> | |
| <p class="text-sm text-gray-500">John Doe's burial record was updated by Sarah Johnson</p> | |
| <p class="text-xs text-gray-400 mt-1">2 hours ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-4 py-4 sm:px-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-100 rounded-md p-2"> | |
| <i data-feather="upload" class="h-5 w-5 text-green-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">New OCR import</p> | |
| <p class="text-sm text-gray-500">45 records imported from scanned 1920 ledger</p> | |
| <p class="text-xs text-gray-400 mt-1">5 hours ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-4 py-4 sm:px-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-100 rounded-md p-2"> | |
| <i data-feather="clipboard" class="h-5 w-5 text-purple-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Task completed</p> | |
| <p class="text-sm text-gray-500">"Verify plot B-12 inscription" marked complete by Michael Wilson</p> | |
| <p class="text-xs text-gray-400 mt-1">1 day ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="bg-white shadow overflow-hidden sm:rounded-lg"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Quick Actions</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <a href="#" class="dashboard-card flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-blue-50 hover:border-blue-200"> | |
| <div class="bg-blue-100 p-3 rounded-full"> | |
| <i data-feather="plus" class="h-6 w-6 text-blue-600"></i> | |
| </div> | |
| <span class="mt-2 text-sm font-medium text-gray-700">Add Record</span> | |
| </a> | |
| <a href="#" class="dashboard-card flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-green-50 hover:border-green-200"> | |
| <div class="bg-green-100 p-3 rounded-full"> | |
| <i data-feather="upload" class="h-6 w-6 text-green-600"></i> | |
| </div> | |
| <span class="mt-2 text-sm font-medium text-gray-700">Import Data</span> | |
| </a> | |
| <a href="#" class="dashboard-card flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-yellow-50 hover:border-yellow-200"> | |
| <div class="bg-yellow-100 p-3 rounded-full"> | |
| <i data-feather="map" class="h-6 w-6 text-yellow-600"></i> | |
| </div> | |
| <span class="mt-2 text-sm font-medium text-gray-700">Edit Map</span> | |
| </a> | |
| <a href="#" class="dashboard-card flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-purple-50 hover:border-purple-200"> | |
| <div class="bg-purple-100 p-3 rounded-full"> | |
| <i data-feather="file-text" class="h-6 w-6 text-purple-600"></i> | |
| </div> | |
| <span class="mt-2 text-sm font-medium text-gray-700">Generate Report</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- OCR Import Modal --> | |
| <div id="ocr-import" class="fixed z-50 inset-0 overflow-y-auto hidden"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">OCR Document Import</h3> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Upload Document</label> | |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"> | |
| <div class="space-y-1 text-center"> | |
| <div class="flex text-sm text-gray-600"> | |
| <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none"> | |
| <span>Upload a file</span> | |
| <input id="file-upload" name="file-upload" type="file" class="sr-only" accept=".pdf,.jpg,.jpeg,.png,.tiff"> | |
| </label> | |
| <p class="pl-1">or drag and drop</p> | |
| </div> | |
| <p class="text-xs text-gray-500">PDF, JPG, PNG, TIFF up to 10MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Document Type</label> | |
| <select id="doc-type" 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="burial">Burial Record</option> | |
| <option value="plot">Plot Map</option> | |
| <option value="ledger">Ledger Page</option> | |
| </select> | |
| </div> | |
| <div id="ocr-progress" class="hidden mb-4"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Processing...</span> | |
| <span id="progress-percent" class="text-sm font-medium text-blue-600">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="progress-bar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div id="ocr-result" class="hidden border border-gray-200 rounded-md p-4 bg-gray-50"></div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button id="process-ocr" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Process Document | |
| </button> | |
| <button id="close-ocr" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Records --> | |
| <div class="bg-white shadow overflow-hidden sm:rounded-lg"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Recent Burial Records</h3> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View All</a> | |
| </div> | |
| </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">Name</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Birth/Death</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Updated</th> | |
| <th scope="col" class="relative px-6 py-3"> | |
| <span class="sr-only">Actions</span> | |
| </th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center"> | |
| <i data-feather="user" class="h-5 w-5 text-gray-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Margaret Johnson</div> | |
| <div class="text-sm text-gray-500">1925-2021</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Mar 15, 1925 - Jan 22, 2021</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Section B, Row 12, Plot 5</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">2 days ago</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center"> | |
| <i data-feather="user" class="h-5 w-5 text-gray-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Robert Williams</div> | |
| <div class="text-sm text-gray-500">1942-2020</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Aug 3, 1942 - Dec 10, 2020</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Section C, Row 8, Plot 17</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">1 week ago</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center"> | |
| <i data-feather="user" class="h-5 w-5 text-gray-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Eleanor Davis</div> | |
| <div class="text-sm text-gray-500">1930-2019</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Nov 21, 1930 - Sep 5, 2019</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Section A, Row 4, Plot 9</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">2 weeks ago</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // OCR Modal Handling | |
| const ocrModal = document.getElementById('ocr-import'); | |
| const closeBtn = document.getElementById('close-ocr'); | |
| const processBtn = document.getElementById('process-ocr'); | |
| const fileInput = document.getElementById('file-upload'); | |
| const ocrProgress = document.getElementById('ocr-progress'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const progressPercent = document.getElementById('progress-percent'); | |
| const ocrResult = document.getElementById('ocr-result'); | |
| // Show modal when OCR Import is clicked in sidebar | |
| document.querySelector('a[href="#ocr-import"]').addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| ocrModal.classList.remove('hidden'); | |
| }); | |
| // Close modal | |
| closeBtn.addEventListener('click', () => { | |
| ocrModal.classList.add('hidden'); | |
| resetOCRForm(); | |
| }); | |
| // Reset form | |
| function resetOCRForm() { | |
| fileInput.value = ''; | |
| ocrProgress.classList.add('hidden'); | |
| ocrResult.classList.add('hidden'); | |
| ocrResult.innerHTML = ''; | |
| progressBar.style.width = '0%'; | |
| progressPercent.textContent = '0%'; | |
| } | |
| // Process OCR | |
| processBtn.addEventListener('click', async () => { | |
| const file = fileInput.files[0]; | |
| if (!file) { | |
| alert('Please select a file first'); | |
| return; | |
| } | |
| ocrProgress.classList.remove('hidden'); | |
| processBtn.disabled = true; | |
| // Simulate progress | |
| let progress = 0; | |
| const progressInterval = setInterval(() => { | |
| progress += 10; | |
| progressBar.style.width = `${progress}%`; | |
| progressPercent.textContent = `${progress}%`; | |
| if (progress >= 100) { | |
| clearInterval(progressInterval); | |
| processOCRFile(file); | |
| } | |
| }, 300); | |
| }); | |
| // Call RolmOCR API | |
| async function processOCRFile(file) { | |
| const formData = new FormData(); | |
| formData.append('file', file); | |
| formData.append('doc_type', document.getElementById('doc-type').value); | |
| try { | |
| const response = await fetch('https://api-inference.huggingface.co/models/reducto/RolmOCR', { | |
| method: 'POST', | |
| headers: { | |
| 'Authorization': 'Bearer YOUR_HUGGINGFACE_API_KEY', | |
| }, | |
| body: formData | |
| }); | |
| const result = await response.json(); | |
| if (response.ok) { | |
| displayOCRResults(result); | |
| } else { | |
| throw new Error(result.error || 'OCR processing failed'); | |
| } | |
| } catch (error) { | |
| console.error('OCR Error:', error); | |
| alert(`Error processing document: ${error.message}`); | |
| } finally { | |
| processBtn.disabled = false; | |
| } | |
| } | |
| // Display OCR results | |
| function displayOCRResults(data) { | |
| ocrResult.classList.remove('hidden'); | |
| if (data.text) { | |
| // Simple display - you might want to parse and format this better | |
| ocrResult.innerHTML = ` | |
| <h4 class="font-medium text-gray-900 mb-2">Extracted Text:</h4> | |
| <div class="text-sm text-gray-700 whitespace-pre-line">${data.text}</div> | |
| <div class="mt-4"> | |
| <button class="bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-700"> | |
| Import to Records | |
| </button> | |
| </div> | |
| `; | |
| } else { | |
| ocrResult.innerHTML = '<p class="text-red-500">No text could be extracted from this document.</p>'; | |
| } | |
| } | |
| // Drag and drop functionality | |
| const dropArea = document.querySelector('.border-dashed'); | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dropArea.classList.add('border-blue-500'); | |
| } | |
| function unhighlight() { | |
| dropArea.classList.remove('border-blue-500'); | |
| } | |
| dropArea.addEventListener('drop', handleDrop, false); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| fileInput.files = files; | |
| } | |
| </script> | |
| </body> | |
| </html> | |