index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice OCR Extractor</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>
        .dropzone {
            border: 2px dashed #ccc;
            transition: all 0.3s ease;
        }
        .dropzone.active {
            border-color: #4f46e5;
            background-color: #f0f7ff;
        }
        .progress-bar {
            transition: width 0.3s ease;
        }
        .invoice-item:hover {
            background-color: #f8fafc;
            transform: translateY(-2px);
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <!-- Header -->
        <header class="mb-8 text-center">
            <h1 class="text-3xl font-bold text-indigo-700 mb-2">Invoice OCR Extractor</h1>
            <p class="text-gray-600">Upload an invoice image to extract key information automatically</p>
        </header>

        <!-- Main Content -->
        <div class="max-w-4xl mx-auto">
            <!-- Upload Section -->
            <div class="bg-white rounded-lg shadow-md p-6 mb-8">
                <div id="upload-container">
                    <div class="dropzone rounded-lg p-8 text-center cursor-pointer" id="dropzone">
                        <div class="flex flex-col items-center justify-center">
                            <i class="fas fa-file-invoice text-5xl text-indigo-500 mb-4"></i>
                            <h3 class="text-xl font-semibold text-gray-800 mb-2">Drag & Drop Invoice Image</h3>
                            <p class="text-gray-500 mb-4">or click to browse files</p>
                            <input type="file" id="file-input" class="hidden" accept="image/*">
                            <button id="browse-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-md transition">
                                Select File
                            </button>
                        </div>
                    </div>
                    <div id="progress-container" class="mt-4 hidden">
                        <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-gray-700">0%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                            <div id="progress-bar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Results Section -->
            <div id="results-container" class="hidden fade-in">
                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                    <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                        <i class="fas fa-file-alt text-indigo-500 mr-3"></i>
                        Extracted Invoice Information
                    </h2>
                    
                    <!-- Basic Info -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                        <div class="bg-indigo-50 p-4 rounded-lg">
                            <h3 class="text-sm font-medium text-indigo-700 mb-1">Invoice Number</h3>
                            <p id="invoice-number" class="text-xl font-semibold text-gray-800">INV-2023-001</p>
                        </div>
                        <div class="bg-indigo-50 p-4 rounded-lg">
                            <h3 class="text-sm font-medium text-indigo-700 mb-1">Invoice Date</h3>
                            <p id="invoice-date" class="text-xl font-semibold text-gray-800">15 May 2023</p>
                        </div>
                        <div class="bg-indigo-50 p-4 rounded-lg">
                            <h3 class="text-sm font-medium text-indigo-700 mb-1">Total Amount</h3>
                            <p id="invoice-total" class="text-xl font-semibold text-gray-800">$1,245.00</p>
                        </div>
                    </div>
                    
                    <!-- Vendor & Customer Info -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                        <div class="border border-gray-200 p-4 rounded-lg">
                            <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-building text-indigo-500 mr-2"></i>
                                Vendor
                            </h3>
                            <div id="vendor-info">
                                <p class="font-medium text-gray-800">ABC Corporation</p>
                                <p class="text-gray-600">123 Business Ave, Suite 100</p>
                                <p class="text-gray-600">New York, NY 10001</p>
                                <p class="text-gray-600">Tax ID: 12-3456789</p>
                            </div>
                        </div>
                        <div class="border border-gray-200 p-4 rounded-lg">
                            <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-user-tie text-indigo-500 mr-2"></i>
                                Customer
                            </h3>
                            <div id="customer-info">
                                <p class="font-medium text-gray-800">XYZ Enterprises</p>
                                <p class="text-gray-600">456 Client Street</p>
                                <p class="text-gray-600">Boston, MA 02108</p>
                                <p class="text-gray-600">PO #: PO-2023-456</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Invoice Items -->
                    <div class="mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                            <i class="fas fa-list-ul text-indigo-500 mr-2"></i>
                            Invoice Items
                        </h3>
                        <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">Description</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Unit Price</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                                    </tr>
                                </thead>
                                <tbody id="invoice-items" class="bg-white divide-y divide-gray-200">
                                    <!-- Items will be added here dynamically -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- Summary -->
                    <div class="flex justify-end">
                        <div class="w-full md:w-1/3">
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <div class="flex justify-between py-2 border-b border-gray-200">
                                    <span class="text-gray-600">Subtotal</span>
                                    <span id="subtotal" class="font-medium">$1,200.00</span>
                                </div>
                                <div class="flex justify-between py-2 border-b border-gray-200">
                                    <span class="text-gray-600">Tax (5%)</span>
                                    <span id="tax" class="font-medium">$45.00</span>
                                </div>
                                <div class="flex justify-between py-2">
                                    <span class="text-gray-600 font-semibold">Total</span>
                                    <span id="total" class="font-bold text-indigo-600">$1,245.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Preview Section -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                        <i class="fas fa-image text-indigo-500 mr-3"></i>
                        Invoice Preview
                    </h2>
                    <div class="flex justify-center">
                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                            <img id="invoice-preview" src="" alt="Uploaded invoice" class="max-w-full h-auto max-h-96">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dropzone = document.getElementById('dropzone');
            const fileInput = document.getElementById('file-input');
            const browseBtn = document.getElementById('browse-btn');
            const progressContainer = document.getElementById('progress-container');
            const progressBar = document.getElementById('progress-bar');
            const progressPercent = document.getElementById('progress-percent');
            const resultsContainer = document.getElementById('results-container');
            const invoiceItems = document.getElementById('invoice-items');
            
            // Sample invoice data (in a real app, this would come from OCR processing)
            const sampleInvoice = {
                invoiceNumber: "INV-2023-001",
                invoiceDate: "15 May 2023",
                totalAmount: "$1,245.00",
                vendor: {
                    name: "ABC Corporation",
                    address: "123 Business Ave, Suite 100",
                    cityState: "New York, NY 10001",
                    taxId: "Tax ID: 12-3456789"
                },
                customer: {
                    name: "XYZ Enterprises",
                    address: "456 Client Street",
                    cityState: "Boston, MA 02108",
                    poNumber: "PO #: PO-2023-456"
                },
                items: [
                    { description: "Web Development Services", quantity: "40", unitPrice: "$50.00", amount: "$2,000.00" },
                    { description: "UI/UX Design", quantity: "20", unitPrice: "$75.00", amount: "$1,500.00" },
                    { description: "Consulting Hours", quantity: "10", unitPrice: "$120.00", amount: "$1,200.00" }
                ],
                subtotal: "$4,700.00",
                tax: "$235.00",
                total: "$4,935.00"
            };
            
            // Drag and drop functionality
            ['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(files);
            }
            
            browseBtn.addEventListener('click', () => {
                fileInput.click();
            });
            
            fileInput.addEventListener('change', function() {
                if (this.files.length) {
                    handleFiles(this.files);
                }
            });
            
            function handleFiles(files) {
                const file = files[0];
                if (!file.type.match('image.*')) {
                    alert('Please upload an image file');
                    return;
                }
                
                // Show progress bar
                progressContainer.classList.remove('hidden');
                
                // Simulate OCR processing with progress
                let progress = 0;
                const interval = setInterval(() => {
                    progress += Math.random() * 10;
                    if (progress > 100) progress = 100;
                    
                    progressBar.style.width = `${progress}%`;
                    progressPercent.textContent = `${Math.round(progress)}%`;
                    
                    if (progress === 100) {
                        clearInterval(interval);
                        setTimeout(() => {
                            processInvoice(file);
                        }, 500);
                    }
                }, 200);
            }
            
            function processInvoice(file) {
                // In a real app, you would send the image to an OCR API here
                // For this demo, we'll use the sample data and create a preview
                
                // Create preview
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('invoice-preview').src = e.target.result;
                    
                    // Populate the invoice data
                    populateInvoiceData(sampleInvoice);
                    
                    // Show results
                    progressContainer.classList.add('hidden');
                    resultsContainer.classList.remove('hidden');
                };
                reader.readAsDataURL(file);
            }
            
            function populateInvoiceData(invoice) {
                document.getElementById('invoice-number').textContent = invoice.invoiceNumber;
                document.getElementById('invoice-date').textContent = invoice.invoiceDate;
                document.getElementById('invoice-total').textContent = invoice.totalAmount;
                
                // Vendor info
                const vendorInfo = document.getElementById('vendor-info');
                vendorInfo.innerHTML = `
                    <p class="font-medium text-gray-800">${invoice.vendor.name}</p>
                    <p class="text-gray-600">${invoice.vendor.address}</p>
                    <p class="text-gray-600">${invoice.vendor.cityState}</p>
                    <p class="text-gray-600">${invoice.vendor.taxId}</p>
                `;
                
                // Customer info
                const customerInfo = document.getElementById('customer-info');
                customerInfo.innerHTML = `
                    <p class="font-medium text-gray-800">${invoice.customer.name}</p>
                    <p class="text-gray-600">${invoice.customer.address}</p>
                    <p class="text-gray-600">${invoice.customer.cityState}</p>
                    <p class="text-gray-600">${invoice.customer.poNumber}</p>
                `;
                
                // Invoice items
                invoiceItems.innerHTML = '';
                invoice.items.forEach(item => {
                    const tr = document.createElement('tr');
                    tr.className = 'invoice-item hover:bg-gray-50 transition';
                    tr.innerHTML = `
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">${item.description}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.quantity}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.unitPrice}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800">${item.amount}</td>
                    `;
                    invoiceItems.appendChild(tr);
                });
                
                // Summary
                document.getElementById('subtotal').textContent = invoice.subtotal;
                document.getElementById('tax').textContent = invoice.tax;
                document.getElementById('total').textContent = invoice.total;
            }
        });
    </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=jitkasem/ocr-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>