now how can i connect it with my back end to give real results ?

index.html

@@ -410,96 +410,78 @@
                     feather.replace();
                 }
             }
-            
-            function extractInformation() {
-                // Simulate extraction (in a real app, this would be an API call)
+            async function extractInformation() {
                 emptyState.classList.add('hidden');
                 resultsContainer.classList.remove('hidden');
-                
-                // Generate mock data for demonstration
-                extractionResults = files.map(file => ({
-                    name: file.name,
-                    type: file.type,
-                    preview: generateDocumentPreview(file.name),
-                    entities: generateMockEntities(file.name)
-                }));
-                
-                currentDocIndex = 0;
-                updateDocumentView();
+                extractBtn.disabled = true;
+                extractBtn.innerHTML = '<i data-feather="loader" class="w-5 h-5 mr-2 animate-spin"></i> Processing...';
+                feather.replace();
+
+                try {
+                    // Create FormData to send files
+                    const formData = new FormData();
+                    files.forEach(file => formData.append('documents', file));
+                    
+                    // Add extraction options
+                    const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
+                    const entitiesToExtract = Array.from(checkboxes).map(cb => cb.nextElementSibling.textContent);
+                    formData.append('entities', JSON.stringify(entitiesToExtract));
+                    
+                    // Add custom keywords if any
+                    if (customKeywords.length > 0) {
+                        formData.append('keywords', JSON.stringify(customKeywords));
+                    }
+
+                    // Call your backend API (replace with your actual endpoint)
+                    const response = await fetch('/api/extract', {
+                        method: 'POST',
+                        body: formData
+                    });
+
+                    if (!response.ok) {
+                        throw new Error(`Error: ${response.status}`);
+                    }
+
+                    extractionResults = await response.json();
+                    currentDocIndex = 0;
+                    updateDocumentView();
+                    
+                } catch (error) {
+                    console.error('Extraction failed:', error);
+                    alert('Extraction failed. Please try again.');
+                } finally {
+                    extractBtn.disabled = false;
+                    extractBtn.innerHTML = '<i data-feather="search" class="w-5 h-5 mr-2"></i> Extract Information';
+                    feather.replace();
+                }
             }
-            
-            function generateDocumentPreview(filename) {
-                // In a real app, you'd parse the actual document content
-                const ext = filename.split('.').pop().toLowerCase();
-                
-                if (ext === 'pdf') {
-                    return `PDF document preview for ${filename}. This would show the first page of the PDF in a real implementation.\n\nSample content:\n\nCONFIDENTIAL\nBusiness Proposal for Acme Corp\n\nPrepared by: John Smith\nEmail: john.smith@example.com\nPhone: (555) 123-4567\n\nAttachments:\n- Financial_Projections.xlsx\n- Market_Analysis.docx`;
-                } else if (ext === 'msg') {
-                    return `Email content preview for ${filename}\n\nFrom: sarah.johnson@business.com\nTo: jane.doe@example.com\nSubject: Meeting about partnership\n\nHi Jane,\n\nI wanted to follow up on our conversation about the potential partnership between Johnson & Associates and your company. Let me know when you'd be available for a call next week.\n\nBest regards,\nSarah Johnson\nCEO, Johnson & Associates\nPhone: (555) 987-6543`;
-                } else if (ext === 'txt') {
-                    return `Text file content for ${filename}\n\nCustomer Information:\nName: Michael Brown\nCompany: Brown Technologies\nAddress: 123 Business Ave, Suite 400, New York, NY 10001\nPhone: (212) 555-6789\nEmail: michael@browntech.com\n\nProject Details:\n- Budget: $50,000\n- Timeline: 3 months\n- Key Contacts: Alice Wilson (Project Manager)`;
-                } else if (ext === 'xlsx' || ext === 'xls') {
-                    return `Spreadsheet preview for ${filename}\n\nThis would show a table of data in a real implementation.\n\nSample data:\n\nName,Position,Company,Email,Phone\nJohn Smith,Director,Acme Corp,john.smith@example.com,555-123-4567\nJane Doe,Manager,Globex Inc,jane.doe@globex.com,555-987-6543\nRobert Johnson,CEO,Johnson & Associates,robert@johnson.com,555-456-7890`;
-                } else {
-                    return `Document content for ${filename}\n\nThis would show the actual document content in a real implementation.`;
+            function generateDocumentPreview(content) {
+                // If content is a string (from backend), use it directly
+                if (typeof content === 'string') {
+                    return content;
                 }
+                // Fallback if no preview content is available
+                return `Preview not available for this document. Extracted entities are shown below.`;
             }
-            
-            function generateMockEntities(filename) {
-                // Generate mock entities based on document type
-                const entities = {
-                    people: [],
-                    companies: [],
-                    emails: [],
-                    phones: [],
-                    addresses: [],
-                    custom: []
-                };
-                
-                // Always add some basic entities
-                entities.people.push(
-                    { name: 'John Smith', context: 'mentioned as Director of Acme Corp' },
-                    { name: 'Sarah Johnson', context: 'CEO of Johnson & Associates' },
-                    { name: 'Michael Brown', context: 'customer from Brown Technologies' }
-                );
-                
-                entities.companies.push(
-                    { name: 'Acme Corp', context: 'mentioned in business proposal' },
-                    { name: 'Johnson & Associates', context: 'potential partner' },
-                    { name: 'Brown Technologies', context: 'customer company' }
-                );
+            function updateDocumentView() {
+                if (extractionResults.length === 0) return;
                 
-                entities.emails.push(
-                    { value: 'john.smith@example.com', context: 'contact for Acme Corp' },
-                    { value: 'sarah.johnson@business.com', context: 'CEO email' },
-                    { value: 'michael@browntech.com', context: 'customer email' }
-                );
+                const currentDoc = extractionResults[currentDocIndex];
                 
-                entities.phones.push(
-                    { value: '(555) 123-4567', context: 'John Smith\'s phone' },
-                    { value: '(555) 987-6543', context: 'Sarah Johnson\'s phone' },
-                    { value: '(212) 555-6789', context: 'Michael Brown\'s office' }
-                );
+                // Update document preview
+                documentPreview.textContent = generateDocumentPreview(currentDoc.preview || currentDoc.content);
                 
-                entities.addresses.push(
-                    { value: '123 Business Ave, Suite 400, New York, NY 10001', context: 'Brown Technologies HQ' }
-                );
+                // Update document counter
+                docCounter.textContent = `${currentDocIndex + 1}/${extractionResults.length}`;
                 
-                // Add custom keyword matches if any
-                customKeywords.forEach(keyword => {
-                    const randomCount = Math.floor(Math.random() * 3) + 1;
-                    for (let i = 0; i < randomCount; i++) {
-                        entities.custom.push({
-                            keyword: keyword,
-                            context: `found in ${filename} related to ${['project', 'meeting', 'proposal', 'contract'][Math.floor(Math.random() * 4)]}`
-                        });
-                    }
-                });
+                // Update navigation buttons
+                prevDocBtn.disabled = currentDocIndex === 0;
+                nextDocBtn.disabled = currentDocIndex === extractionResults.length - 1;
                 
-                return entities;
+                // Update extracted entities (assumes backend returns entities in same format)
+                updateEntitiesDisplay(currentDoc.entities || {});
             }
-            
-            function updateDocumentView() {
+function updateDocumentView() {
                 if (extractionResults.length === 0) return;
                 
                 const currentDoc = extractionResults[currentDocIndex];
@@ -634,12 +616,39 @@
                 emptyState.classList.remove('hidden');
                 resultsContainer.classList.add('hidden');
             }
-            
-            function exportResults() {
-                // In a real app, this would generate a downloadable file
-                alert('In a real implementation, this would export the extracted data as a CSV or JSON file.');
+            async function exportResults() {
+                try {
+                    const response = await fetch('/api/export', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({
+                            results: extractionResults,
+                            format: 'csv' // or 'json' based on user selection
+                        })
+                    });
+
+                    if (!response.ok) {
+                        throw new Error(`Export failed: ${response.status}`);
+                    }
+
+                    const blob = await response.blob();
+                    const url = window.URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = `extracted_data_${new Date().toISOString().slice(0,10)}.csv`;
+                    document.body.appendChild(a);
+                    a.click();
+                    window.URL.revokeObjectURL(url);
+                    a.remove();
+
+                } catch (error) {
+                    console.error('Export failed:', error);
+                    alert('Export failed. Please try again.');
+                }
             }
-        });
+});
     </script>
 </body>
 </html>