Image ID Scanner Tool

function processImage(originalImg, language = 'rus+eng') {
    // Create the main container
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
    container.style.padding = '20px';
    container.style.maxWidth = '700px';
    container.style.margin = '0 auto';
    container.style.boxShadow = '0 4px 15px rgba(0,0,0,0.05)';
    container.style.borderRadius = '12px';
    container.style.backgroundColor = '#ffffff';

    const header = document.createElement('h2');
    header.textContent = 'Image ID Scanner Result';
    header.style.marginTop = '0';
    header.style.color = '#1a202c';
    container.appendChild(header);

    // Limit maximum dimension to prevent browser memory issues with very large images
    const maxDim = 1500;
    let width = originalImg.width;
    let height = originalImg.height;
    
    if (width > maxDim || height > maxDim) {
        if (width > height) {
            height = Math.round((height * maxDim) / width);
            width = maxDim;
        } else {
            width = Math.round((width * maxDim) / height);
            height = maxDim;
        }
    }

    // Process image through a canvas
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0, width, height);

    const previewContainer = document.createElement('div');
    previewContainer.style.background = '#f7fafc';
    previewContainer.style.padding = '10px';
    previewContainer.style.borderRadius = '8px';
    previewContainer.style.marginBottom = '20px';
    
    const previewImg = document.createElement('img');
    previewImg.src = canvas.toDataURL();
    previewImg.style.width = '100%';
    previewImg.style.maxHeight = '350px';
    previewImg.style.objectFit = 'contain';
    previewImg.style.borderRadius = '6px';
    previewImg.style.border = '1px solid #e2e8f0';
    previewContainer.appendChild(previewImg);
    container.appendChild(previewContainer);

    // Status Panel for Loading and Progress
    const statusPanel = document.createElement('div');
    statusPanel.style.padding = '15px';
    statusPanel.style.backgroundColor = '#ebf8ff';
    statusPanel.style.color = '#2b6cb0';
    statusPanel.style.borderRadius = '8px';
    statusPanel.style.fontWeight = '500';
    statusPanel.style.display = 'flex';
    statusPanel.style.alignItems = 'center';
    statusPanel.style.gap = '10px';
    
    const spinner = document.createElement('div');
    spinner.style.border = '3px solid #bce3ff';
    spinner.style.borderTop = '3px solid #2b6cb0';
    spinner.style.borderRadius = '50%';
    spinner.style.width = '20px';
    spinner.style.height = '20px';
    spinner.style.animation = 'id-scanner-spin 1s linear infinite';
    
    const style = document.createElement('style');
    style.textContent = '@keyframes id-scanner-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }';
    container.appendChild(style);
    
    statusPanel.appendChild(spinner);
    
    const statusText = document.createElement('span');
    statusText.textContent = 'Initializing OCR Engine...';
    statusPanel.appendChild(statusText);
    container.appendChild(statusPanel);

    const resultsPanel = document.createElement('div');
    resultsPanel.style.display = 'none';
    container.appendChild(resultsPanel);

    // Heuristics parser to locate useful ID information
    const parseIDInfo = (text) => {
        const info = [];
        
        // Detect dates (e.g. 12.05.1990)
        const dates = [...new Set(text.match(/\b\d{2}[\.\-\/]\d{2}[\.\-\/]\d{4}\b/g))];
        if (dates && dates.length > 0) info.push({ label: 'Dates Detected', value: dates.join(', ') });

        // Common ID/Passport Document Number formattings
        const ruPass = text.match(/\b\d{2}\s\d{2}\s\d{6}\b|\b\d{4}\s\d{6}\b/g);
        if (ruPass) info.push({ label: 'Document Number Pattern', value: ruPass[0] });

        // MRZ Match (Machine Readable Zone)
        const mrzLines = text.split('\n')
            .map(l => l.replace(/\s+/g, '').toUpperCase())
            .filter(l => l.length >= 30 && l.length <= 44 && /^[A-Z0-9<]+$/.test(l) && l.includes('<') && (l.startsWith('P') || l.startsWith('V') || l.startsWith('I') || l.startsWith('A') || l.startsWith('C') || l.includes('<<')));
        
        if (mrzLines.length > 0) {
            info.push({ label: 'MRZ Area Data', value: mrzLines.join('\n') });
        }

        if (info.length > 0) {
            const infoPanel = document.createElement('div');
            infoPanel.style.marginBottom = '20px';
            infoPanel.style.padding = '20px';
            infoPanel.style.backgroundColor = '#f0fff4';
            infoPanel.style.border = '1px solid #c6f6d5';
            infoPanel.style.borderRadius = '8px';
            
            const infoHeader = document.createElement('h4');
            infoHeader.textContent = 'Identified Structured Data';
            infoHeader.style.marginTop = '0';
            infoHeader.style.color = '#22543d';
            infoPanel.appendChild(infoHeader);

            info.forEach(item => {
                const row = document.createElement('div');
                row.style.marginBottom = '10px';
                row.style.wordBreak = 'break-all';
                row.innerHTML = `<span style="font-weight: 600; color: #276749; display: block; margin-bottom: 2px;">${item.label}</span> <span style="font-family: monospace; font-size: 1.1em; color: #2d3748;">${item.value.replace(/\n/g, '<br>')}</span>`;
                infoPanel.appendChild(row);
            });
            resultsPanel.appendChild(infoPanel);
        }
    };

    const rawTextPanel = document.createElement('div');
    const rawTextLabel = document.createElement('h4');
    rawTextLabel.textContent = 'Raw Extracted Text View';
    rawTextLabel.style.marginTop = '0';
    rawTextLabel.style.color = '#334155';
    rawTextPanel.appendChild(rawTextLabel);

    const rawTextContent = document.createElement('div');
    rawTextContent.style.whiteSpace = 'pre-wrap';
    rawTextContent.style.padding = '15px';
    rawTextContent.style.backgroundColor = '#f8fafc';
    rawTextContent.style.border = '1px solid #e2e8f0';
    rawTextContent.style.borderRadius = '8px';
    rawTextContent.style.fontSize = '14px';
    rawTextContent.style.color = '#475569';
    rawTextContent.style.minHeight = '100px';
    rawTextPanel.appendChild(rawTextContent);
    resultsPanel.appendChild(rawTextPanel);

    // Initialize and run Tesseract backgroundly
    (async () => {
        try {
            if (typeof window.Tesseract === 'undefined') {
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://unpkg.com/tesseract.js@v4.1.1/dist/tesseract.min.js';
                    script.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);
                });
            }

            const worker = await window.Tesseract.createWorker({
                logger: m => {
                    if (m.status === 'recognizing text') {
                        statusText.textContent = `Scanning document: ${Math.round(m.progress * 100)}%`;
                    } else if (m.status === 'loading tesseract core' || m.status === 'initializing api') {
                        statusText.textContent = `Loading core engine components...`;
                    } else if (m.status === 'loading language traineddata') {
                        statusText.textContent = `Loading language model for OCR...`;
                    } else {
                        statusText.textContent = m.status;
                    }
                }
            });

            await worker.loadLanguage(language);
            await worker.initialize(language);
            
            // Execute optical character recognition using the optimized canvas
            const { data: { text } } = await worker.recognize(canvas);
            
            statusPanel.style.display = 'none';
            resultsPanel.style.display = 'block';
            rawTextContent.textContent = text.trim() || '[No recognizable typography found]';
            
            parseIDInfo(text);

            await worker.terminate();

        } catch (error) {
            console.error('OCR Error:', error);
            spinner.style.display = 'none';
            statusText.textContent = 'Failed to scan the image. Ensure the image is readable and try again.';
            statusPanel.style.backgroundColor = '#fff5f5';
            statusPanel.style.color = '#c53030';
        }
    })();

    return container;
}