Image Textbox Overview And ID Scanner Tool

function processImage(originalImg, language = 'rus+eng', outlineColor = '#ff2222', outlineWidth = 2) {
    // Create the main container that will be returned synchronously
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.width = '100%';
    container.style.boxSizing = 'border-box';

    // Create the image/canvas wrapper
    const imageContainer = document.createElement('div');
    imageContainer.style.position = 'relative';
    imageContainer.style.display = 'inline-block';
    imageContainer.style.width = '100%';
    
    // Create canvas to draw the image and upcoming bounding boxes
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.display = 'block';
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    
    imageContainer.appendChild(canvas);

    // Create a loading overlay for visual feedback during processing
    const overlay = document.createElement('div');
    overlay.style.position = 'absolute';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.width = '100%';
    overlay.style.height = '100%';
    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.75)';
    overlay.style.color = '#fff';
    overlay.style.display = 'flex';
    overlay.style.alignItems = 'center';
    overlay.style.justifyContent = 'center';
    overlay.style.fontSize = '18px';
    overlay.style.textAlign = 'center';
    overlay.style.padding = '20px';
    overlay.style.boxSizing = 'border-box';
    overlay.style.zIndex = '10';
    overlay.innerHTML = `Starting Identifier Scan...<br><span style="font-size:14px; opacity:0.8; margin-top:8px; display:block;">(Downloading OCR language data if necessary)</span>`;
    imageContainer.appendChild(overlay);

    container.appendChild(imageContainer);

    // Create results panel (hidden initially)
    const resultsPanel = document.createElement('div');
    resultsPanel.style.marginTop = '20px';
    resultsPanel.style.padding = '15px';
    resultsPanel.style.backgroundColor = '#f8f9fa';
    resultsPanel.style.border = '1px solid #dee2e6';
    resultsPanel.style.borderRadius = '6px';
    resultsPanel.style.display = 'none';
    container.appendChild(resultsPanel);

    // Initiate asynchronous scanning and highlighting process
    (async () => {
        try {
            let barcodeData = [];
            
            // 1. Scan for Barcodes/QRs natives to browser (applicable for ID Scanner aspect)
            if ('BarcodeDetector' in window) {
                try {
                    const detector = new window.BarcodeDetector();
                    barcodeData = await detector.detect(originalImg);
                } catch (e) {
                    console.warn('BarcodeDetector failed natively. Proceeding with OCR only.', e);
                }
            }

            // 2. Load Tesseract.js dynamically for Text Overview and OCR
            const tesseractUrl = 'https://esm.sh/tesseract.js@5.0.3';
            const tesseractModule = await import(tesseractUrl);
            const Tesseract = tesseractModule.default || tesseractModule;

            overlay.innerHTML = 'Extracting Textboxes...';
            
            // Initialize OCR worker and run
            const worker = await Tesseract.createWorker(language);
            const ret = await worker.recognize(canvas);
            await worker.terminate();

            // Hide the loading overlay
            overlay.style.display = 'none';

            // 3. Draw bounding boxes around detected components
            ctx.lineWidth = Number(outlineWidth);
            
            // Draw text bounding boxes
            if (ret.data && ret.data.words) {
                ctx.strokeStyle = outlineColor;
                ctx.fillStyle = 'rgba(255, 0, 0, 0.15)';
                ret.data.words.forEach(word => {
                    const bbox = word.bbox;
                    ctx.strokeRect(bbox.x0, bbox.y0, bbox.x1 - bbox.x0, bbox.y1 - bbox.y0);
                    ctx.fillRect(bbox.x0, bbox.y0, bbox.x1 - bbox.x0, bbox.y1 - bbox.y0);
                });
            }

            // Draw identifier (barcode) bounding boxes if found
            if (barcodeData.length > 0) {
                ctx.strokeStyle = '#28a745'; // Green for ID identifiers
                ctx.fillStyle = 'rgba(40, 167, 69, 0.2)';
                barcodeData.forEach(barcode => {
                    const { x, y, width, height } = barcode.boundingBox;
                    ctx.strokeRect(x, y, width, height);
                    ctx.fillRect(x, y, width, height);
                    // Label the Barcode
                    ctx.font = `${Math.max(14, width / 12)}px sans-serif`;
                    ctx.fillStyle = '#28a745';
                    ctx.fillText(barcode.format, x, y > 15 ? y - 5 : y + height + 15);
                });
            }

            // 4. Populate Results Panel UI
            resultsPanel.style.display = 'block';

            // Add Barcode Result Data
            if (barcodeData.length > 0) {
                const bcSection = document.createElement('div');
                bcSection.style.marginBottom = '20px';
                bcSection.innerHTML = '<h3 style="margin: 0 0 10px 0; color: #198754; font-size:16px;">Detected Machine Identifiers</h3>';
                const bcList = document.createElement('ul');
                bcList.style.margin = '0';
                bcList.style.paddingLeft = '20px';
                barcodeData.forEach(bc => {
                    const li = document.createElement('li');
                    li.style.wordBreak = 'break-all';
                    li.style.fontSize = '14px';
                    li.innerHTML = `<strong>${bc.format}</strong>: ${bc.rawValue}`;
                    bcList.appendChild(li);
                });
                bcSection.appendChild(bcList);
                resultsPanel.appendChild(bcSection);
            }

            // Add OCR Text Result Data
            const ocrSection = document.createElement('div');
            ocrSection.innerHTML = `<h3 style="margin: 0 0 10px 0; color: #0d6efd; font-size:16px;">Extracted Free Text</h3>`;
            
            const fullText = ret.data.text || '';
            
            // MRZ Recognition Checker (Machine Readable Zone in IDs / Passports)
            const mrzPattern = /[A-Z0-9<]{15,}/;
            const mrzLines = fullText.split('\n').filter(line => line.includes('<') && line.length > 15 && mrzPattern.test(line));
            
            if (mrzLines.length > 0) {
                const mrzBox = document.createElement('div');
                mrzBox.style.padding = '12px';
                mrzBox.style.backgroundColor = '#e7f1ff';
                mrzBox.style.borderLeft = '4px solid #0d6efd';
                mrzBox.style.marginBottom = '15px';
                mrzBox.style.fontFamily = 'monospace';
                mrzBox.style.wordBreak = 'break-all';
                mrzBox.style.fontSize = '14px';
                mrzBox.innerHTML = '<strong style="color:#0a58ca;">ID Document Scanner (MRZ Match):</strong><br><br>' + mrzLines.join('<br>');
                ocrSection.appendChild(mrzBox);
            }

            // Display standard full extracted text
            const textArea = document.createElement('textarea');
            textArea.style.width = '100%';
            textArea.style.height = '180px';
            textArea.style.boxSizing = 'border-box';
            textArea.style.padding = '10px';
            textArea.style.border = '1px solid #ced4da';
            textArea.style.borderRadius = '4px';
            textArea.style.resize = 'vertical';
            textArea.style.fontFamily = 'sans-serif';
            textArea.style.fontSize = '14px';
            textArea.readOnly = true;
            textArea.value = fullText.trim() !== '' ? fullText : 'No text parsed...';
            
            ocrSection.appendChild(textArea);
            resultsPanel.appendChild(ocrSection);

        } catch (err) {
            overlay.style.backgroundColor = 'rgba(220, 53, 69, 0.9)';
            overlay.innerHTML = `<strong>Error processing image:</strong><br><span style="font-size:14px; opacity:0.9; margin-top:5px; display:inline-block;">${err.message}</span>`;
            console.error('Image Scan Error:', err);
        }
    })();

    // Synchronously returned container element for robust DOM inclusion
    return container;
}