Add 2 files

index.html

@@ -7,6 +7,8 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pdf-lib.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .dropzone {
@@ -138,7 +140,7 @@
                     </div>
 
                     <!-- Upload source document -->
-                    <div class="bg-white rounded-lg shadow p-6 mb-8">
+                    <div id="sourceUploadSection" class="bg-white rounded-lg shadow p-6 mb-8">
                         <h3 class="text-lg font-medium text-gray-900 mb-4">Upload Source Document</h3>
                         <p class="text-sm text-gray-500 mb-6">Upload a completed invoice, form, or PDF document that contains the data you want to extract.</p>
                         
@@ -214,7 +216,7 @@
                                 <div class="p-4">
                                     <div class="document-preview bg-gray-100 rounded-lg overflow-hidden relative">
                                         <div class="absolute top-0 left-0 right-0 bg-gray-800 text-white py-1 px-3 text-sm flex justify-between items-center">
-                                            <span>source_document.pdf</span>
+                                            <span id="sourceFileName">source_document.pdf</span>
                                             <div class="flex space-x-2">
                                                 <button class="text-gray-300 hover:text-white">
                                                     <i class="fas fa-search-plus"></i>
@@ -229,11 +231,11 @@
                                         </div>
                                         <div class="absolute bottom-0 left-0 right-0 bg-gray-100 py-2 px-4 flex justify-between items-center border-t border-gray-200">
                                             <button id="prevPage" class="text-gray-600 hover:text-blue-600 disabled:text-gray-300">
-                                                <i class="fas fa-chevron-left"></i> Previous
+                                                <i class="fas fa-chevron-left mr-1"></i> Previous
                                             </button>
                                             <span class="text-sm text-gray-600">Page <span id="currentPage">1</span> of <span id="totalPages">3</span></span>
                                             <button id="nextPage" class="text-gray-600 hover:text-blue-600 disabled:text-gray-300">
-                                                Next <i class="fas fa-chevron-right"></i>
+                                                Next <i class="fas fa-chevron-right ml-1"></i>
                                             </button>
                                         </div>
                                     </div>
@@ -377,7 +379,7 @@
                                 <h4 class="font-medium text-gray-900 mb-3">Completed Document Preview</h4>
                                 <div class="document-preview bg-gray-100 rounded-lg overflow-hidden relative">
                                     <div class="absolute top-0 left-0 right-0 bg-gray-800 text-white py-1 px-3 text-sm flex justify-between items-center">
-                                        <span>completed_document.pdf</span>
+                                        <span id="completedDocumentName">completed_document.pdf</span>
                                         <div class="flex space-x-2">
                                             <button class="text-gray-300 hover:text-white">
                                                 <i class="fas fa-search-plus"></i>
@@ -392,11 +394,11 @@
                                     </div>
                                     <div class="absolute bottom-0 left-0 right-0 bg-gray-100 py-2 px-4 flex justify-between items-center border-t border-gray-200">
                                         <button id="prevCompletedPage" class="text-gray-600 hover:text-blue-600 disabled:text-gray-300">
-                                            <i class="fas fa-chevron-left"></i> Previous
+                                            <i class="fas fa-chevron-left mr-1"></i> Previous
                                         </button>
                                         <span class="text-sm text-gray-600">Page <span id="currentCompletedPage">1</span> of <span id="totalCompletedPages">3</span></span>
                                         <button id="nextCompletedPage" class="text-gray-600 hover:text-blue-600 disabled:text-gray-300">
-                                            Next <i class="fas fa-chevron-right"></i>
+                                            Next <i class="fas fa-chevron-right ml-1"></i>
                                         </button>
                                     </div>
                                 </div>
@@ -536,6 +538,8 @@
         let totalPages = 3;
         let currentCompletedPage = 1;
         let totalCompletedPages = 3;
+        let sourceFileName = '';
+        let templateFileName = '';
 
         // DOM elements
         const sourceDropzone = document.getElementById('sourceDropzone');
@@ -564,6 +568,12 @@
         const showingStartSpan = document.getElementById('showingStart');
         const showingEndSpan = document.getElementById('showingEnd');
         const totalFieldsSpan = document.getElementById('totalFields');
+        const sourceFileNameSpan = document.getElementById('sourceFileName');
+        const completedDocumentNameSpan = document.getElementById('completedDocumentName');
+        const sourceUploadSection = document.getElementById('sourceUploadSection');
+        const downloadPdfButton = document.getElementById('downloadPdf');
+        const downloadJsonButton = document.getElementById('downloadJson');
+        const downloadCsvButton = document.getElementById('downloadCsv');
 
         // Initialize the app
         function init() {
@@ -601,6 +611,11 @@
             // Disable previous page buttons initially
             prevPageButton.disabled = true;
             prevCompletedPageButton.disabled = true;
+            
+            // Set up export buttons
+            downloadPdfButton.addEventListener('click', exportPdf);
+            downloadJsonButton.addEventListener('click', exportJson);
+            downloadCsvButton.addEventListener('click', exportCsv);
         }
 
         // Set up drag and drop functionality
@@ -633,10 +648,13 @@
         function handleSourceFileUpload() {
             if (sourceFileInput.files.length) {
                 const file = sourceFileInput.files[0];
+                sourceFileName = file.name;
+                sourceFileNameSpan.textContent = sourceFileName;
                 console.log('Source file uploaded:', file.name);
                 
                 // Show processing status
                 processingStatus.classList.remove('hidden');
+                sourceUploadSection.classList.add('hidden');
                 
                 // Simulate processing
                 setTimeout(() => {
@@ -644,6 +662,9 @@
                     extractedDataPreview.classList.remove('hidden');
                     populateExtractedFieldsTable();
                     updateProcessSteps(2);
+                    
+                    // Enable template upload section
+                    templateUploadSection.classList.remove('hidden');
                 }, 3000);
             }
         }
@@ -652,6 +673,8 @@
         function handleTemplateFileUpload() {
             if (templateFileInput.files.length) {
                 const file = templateFileInput.files[0];
+                templateFileName = file.name;
+                completedDocumentNameSpan.textContent = `filled_${templateFileName}`;
                 console.log('Template file uploaded:', file.name);
                 
                 // Show field mapping section
@@ -865,8 +888,11 @@
         // Edit field
         function editField(fieldId) {
             const field = extractedFields.find(f => f.id === fieldId);
-            alert(`Editing field: ${field.name}\nCurrent value: ${field.value}`);
-            // In a real app, you would show a modal or inline editor
+            const newValue = prompt(`Edit field: ${field.name}\nCurrent value: ${field.value}`, field.value);
+            if (newValue !== null) {
+                field.value = newValue;
+                populateExtractedFieldsTable();
+            }
         }
 
         // Delete field
@@ -937,9 +963,7 @@
         function handleNextStep() {
             if (currentStep === 1) {
                 // From upload source to upload template
-                templateUploadSection.classList.remove('hidden');
-                nextButton.textContent = 'Continue';
-                backButton.classList.remove('hidden');
+                // This is now handled automatically after source file processing
             } else if (currentStep === 2) {
                 // From upload template to field mapping (handled in upload handler)
             } else if (currentStep === 3) {
@@ -947,6 +971,7 @@
                 fieldMappingSection.classList.add('hidden');
                 finalOutputSection.classList.remove('hidden');
                 nextButton.textContent = 'Finish';
+                updateProcessSteps(4);
             } else if (currentStep === 4) {
                 // Finish the process
                 alert('Document processing completed!');
@@ -959,20 +984,23 @@
             if (currentStep === 2) {
                 // From upload template back to upload source
                 templateUploadSection.classList.add('hidden');
+                extractedDataPreview.classList.add('hidden');
+                sourceUploadSection.classList.remove('hidden');
                 backButton.classList.add('hidden');
                 nextButton.textContent = 'Continue';
+                updateProcessSteps(1);
             } else if (currentStep === 3) {
                 // From field mapping back to upload template
                 fieldMappingSection.classList.add('hidden');
                 templateUploadSection.classList.remove('hidden');
+                updateProcessSteps(2);
             } else if (currentStep === 4) {
                 // From final output back to field mapping
                 finalOutputSection.classList.add('hidden');
                 fieldMappingSection.classList.remove('hidden');
                 nextButton.textContent = 'Continue';
+                updateProcessSteps(3);
             }
-            
-            updateProcessSteps(currentStep - 1);
         }
 
         // Update process steps UI
@@ -1015,6 +1043,97 @@
             } else {
                 nextButton.textContent = 'Continue';
             }
+            
+            // Update back button visibility
+            if (step > 1) {
+                backButton.classList.remove('hidden');
+            } else {
+                backButton.classList.add('hidden');
+            }
+        }
+
+        // Export PDF
+        function exportPdf() {
+            // In a real app, this would use PDF-lib to create a filled PDF
+            // For demo purposes, we'll create a simple PDF with the data
+            
+            // Create a JSON representation of the mapped data
+            const mappedData = {};
+            templateFields.forEach(templateField => {
+                if (templateField.mappedTo) {
+                    const sourceField = extractedFields.find(f => f.id === templateField.mappedTo);
+                    mappedData[templateField.name] = sourceField.value;
+                }
+            });
+            
+            // Create a simple PDF (simulated)
+            const { jsPDF } = window.jspdf;
+            const doc = new jsPDF();
+            
+            // Add title
+            doc.setFontSize(20);
+            doc.text('Completed Document', 105, 20, { align: 'center' });
+            
+            // Add fields
+            doc.setFontSize(12);
+            let y = 40;
+            templateFields.forEach(templateField => {
+                if (templateField.mappedTo) {
+                    const sourceField = extractedFields.find(f => f.id === templateField.mappedTo);
+                    doc.text(`${templateField.name}: ${sourceField.value}`, 20, y);
+                    y += 10;
+                }
+            });
+            
+            // Save the PDF
+            doc.save(`filled_${templateFileName || 'document'}.pdf`);
+            
+            alert('PDF document generated successfully!');
+        }
+
+        // Export JSON
+        function exportJson() {
+            // Create a JSON representation of the mapped data
+            const mappedData = {};
+            templateFields.forEach(templateField => {
+                if (templateField.mappedTo) {
+                    const sourceField = extractedFields.find(f => f.id === templateField.mappedTo);
+                    mappedData[templateField.name] = {
+                        value: sourceField.value,
+                        confidence: templateField.confidence,
+                        sourceField: sourceField.name
+                    };
+                }
+            });
+            
+            // Create JSON string
+            const jsonStr = JSON.stringify(mappedData, null, 2);
+            
+            // Create blob and download
+            const blob = new Blob([jsonStr], { type: 'application/json' });
+            saveAs(blob, `document_data_${new Date().toISOString().slice(0, 10)}.json`);
+            
+            alert('JSON data exported successfully!');
+        }
+
+        // Export CSV
+        function exportCsv() {
+            // Create CSV header
+            let csv = 'Field Name,Value,Confidence,Source Field\n';
+            
+            // Add rows for each mapped field
+            templateFields.forEach(templateField => {
+                if (templateField.mappedTo) {
+                    const sourceField = extractedFields.find(f => f.id === templateField.mappedTo);
+                    csv += `"${templateField.name}","${sourceField.value}",${templateField.confidence},"${sourceField.name}"\n`;
+                }
+            });
+            
+            // Create blob and download
+            const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+            saveAs(blob, `document_data_${new Date().toISOString().slice(0, 10)}.csv`);
+            
+            alert('CSV data exported successfully!');
         }
 
         // Initialize the app when DOM is loaded

prompts.txt

@@ -1 +1,2 @@
-Design and implement a full-stack intelligent document automation system functionally analogous to the application available at git clone https://huggingface.co/spaces/seamoors/wealthsync-ad. The application shall enable users to upload a fully completed invoice, form, or PDF document, which will then be programmatically parsed using a suite of Python-based OCR (e.g., Tesseract), PDF parsing (e.g., PyMuPDF, pdfplumber, or PyPDF2), and machine learning techniques for semantic field recognition and structured data extraction.  The core functionality must support:  Field Extraction & Analysis: Upon uploading a completed form, the application must utilize OCR, visual layout analysis, and NLP-driven entity recognition to extract both labeled and inferred field data with high accuracy. All extracted values should be normalized into a unified schema for downstream processing.  Template-Agnostic Form Filling: The user will subsequently upload a second PDF — a blank or partially completed template form that may differ in structure or layout from the original. The system must intelligently map and propagate values from the original form to this new document, using semantic similarity (e.g., cosine similarity on embedded field names, BERT-based field name matching, or fuzzy logic heuristics). It must robustly handle field remapping, layout discrepancies, and varying form structures.  Output Formats & Data Export:  Render a real-time, user-visible preview of the completed PDF document within the UI.  Enable export in three formats:  A downloadable filled-in PDF document.  A structured and semantically accurate JSON representation of the data.  A CSV file conforming to normalized tabular output specifications.  Architecture & Stack Requirements:  Backend: Python with FastAPI or Flask.  Frontend: React or Streamlit (if rapid prototyping is preferred).  ML/AI: Integrate document layout models (e.g., LayoutLMv3), OCR engines (e.g., Tesseract or EasyOCR), and optional fine-tuned transformer models for field matching.  Data Persistence: Optional use of a document database (e.g., MongoDB) for session persistence or audit logs.  Include robust error handling, field confidence scoring, and preview customization.  Deliverables:  Fully functional application with modular, maintainable code.  Inline documentation for all components.  README with installation, usage, and architecture overview.  Exportable build (e.g., Dockerized container or deployment instructions).  Constraints:  Must support varying form formats without relying on static template matching.  Ensure data privacy and sandboxed file handling.  Prioritize high field fidelity, semantic consistency, and UI responsiveness.
+Design and implement a full-stack intelligent document automation system functionally analogous to the application available at git clone https://huggingface.co/spaces/seamoors/wealthsync-ad. The application shall enable users to upload a fully completed invoice, form, or PDF document, which will then be programmatically parsed using a suite of Python-based OCR (e.g., Tesseract), PDF parsing (e.g., PyMuPDF, pdfplumber, or PyPDF2), and machine learning techniques for semantic field recognition and structured data extraction.  The core functionality must support:  Field Extraction & Analysis: Upon uploading a completed form, the application must utilize OCR, visual layout analysis, and NLP-driven entity recognition to extract both labeled and inferred field data with high accuracy. All extracted values should be normalized into a unified schema for downstream processing.  Template-Agnostic Form Filling: The user will subsequently upload a second PDF — a blank or partially completed template form that may differ in structure or layout from the original. The system must intelligently map and propagate values from the original form to this new document, using semantic similarity (e.g., cosine similarity on embedded field names, BERT-based field name matching, or fuzzy logic heuristics). It must robustly handle field remapping, layout discrepancies, and varying form structures.  Output Formats & Data Export:  Render a real-time, user-visible preview of the completed PDF document within the UI.  Enable export in three formats:  A downloadable filled-in PDF document.  A structured and semantically accurate JSON representation of the data.  A CSV file conforming to normalized tabular output specifications.  Architecture & Stack Requirements:  Backend: Python with FastAPI or Flask.  Frontend: React or Streamlit (if rapid prototyping is preferred).  ML/AI: Integrate document layout models (e.g., LayoutLMv3), OCR engines (e.g., Tesseract or EasyOCR), and optional fine-tuned transformer models for field matching.  Data Persistence: Optional use of a document database (e.g., MongoDB) for session persistence or audit logs.  Include robust error handling, field confidence scoring, and preview customization.  Deliverables:  Fully functional application with modular, maintainable code.  Inline documentation for all components.  README with installation, usage, and architecture overview.  Exportable build (e.g., Dockerized container or deployment instructions).  Constraints:  Must support varying form formats without relying on static template matching.  Ensure data privacy and sandboxed file handling.  Prioritize high field fidelity, semantic consistency, and UI responsiveness.
+That works - almost, except the upload template step 2 does not activate after uploading a source and the final output is not exporting PDF JSON or CSV with the auto filled fields that I require it to or downloading to the users computer