integrate OCR in the admin dashboard for records uploading. I found this https://huggingface.co/reducto/RolmOCR option can you integrate this model

dashboard.html

@@ -44,11 +44,11 @@
                             <i data-feather="map" class="h-4 w-4"></i>
                             <span>Plot Maps</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="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">
+                            <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>
@@ -256,9 +256,64 @@
                         </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">&#8203;</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">
+            <!-- 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>
@@ -364,9 +419,151 @@
             </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>