ID Document Scanner And Text Extractor

function processImage(originalImg, language = 'eng+rus') {
    // Create the main container
    const container = document.createElement('div');
    container.style.cssText = 'position: relative; display: flex; flex-direction: column; gap: 15px; font-family: system-ui, -apple-system, sans-serif; background: #fdfdfd; padding: 20px; border-radius: 8px; border: 1px solid #e5e5e5; max-width: 100%; box-sizing: border-box; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);';

    // Title
    const title = document.createElement('h3');
    title.textContent = 'ID Scanner & Text Extractor';
    title.style.cssText = 'margin: 0; padding: 0; color: #111; font-size: 1.25rem; font-weight: 600; text-align: center;';
    container.appendChild(title);

    // Canvas Wrapper
    const canvasWrapper = document.createElement('div');
    canvasWrapper.style.cssText = 'position: relative; width: 100%; display: flex; justify-content: center; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden;';
    
    // Canvas to display image and bounding boxes
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    canvas.style.cssText = 'max-width: 100%; height: auto; display: block;';
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    canvasWrapper.appendChild(canvas);
    container.appendChild(canvasWrapper);

    // Status Indicator Box
    const statusBox = document.createElement('div');
    statusBox.style.cssText = 'padding: 12px; background: #e0f2fe; color: #0369a1; border-radius: 6px; font-weight: 500; font-size: 14px; text-align: center; border: 1px solid #bae6fd; transition: all 0.3s ease;';
    statusBox.textContent = 'Loading OCR Engine (Tesseract.js)...';
    container.appendChild(statusBox);

    // Text Area for extraction results
    const textArea = document.createElement('textarea');
    textArea.style.cssText = 'width: 100%; height: 200px; padding: 12px; border: 1px solid #d1d5db; border-radius: 6px; font-family: ui-monospace, monospace; font-size: 14px; box-sizing: border-box; resize: vertical; display: none; background: #ffffff; color: #1f2937; line-height: 1.5;';
    textArea.readOnly = true;
    textArea.placeholder = 'Extracted text will appear here...';
    container.appendChild(textArea);

    // Asynchronous Execution for OCR
    (async () => {
        try {
            // Dynamically load Tesseract.js if not already present
            if (!window.Tesseract) {
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
                    script.onload = resolve;
                    script.onerror = () => reject(new Error('Failed to load Tesseract.js from CDN.'));
                    document.head.appendChild(script);
                });
            }

            statusBox.textContent = 'Initializing scanner...';

            // Perform Document Text Recognition
            const result = await window.Tesseract.recognize(
                canvas,
                language,
                {
                    logger: m => {
                        if (m.status === 'recognizing text') {
                            const progress = Math.round(m.progress * 100);
                            statusBox.textContent = `Scanning Document: ${progress}%`;
                            // Add a subtle visual progress to background
                            statusBox.style.background = `linear-gradient(90deg, #bae6fd ${progress}%, #e0f2fe ${progress}%)`;
                        } else {
                            statusBox.textContent = `Status: ${m.status}...`;
                        }
                    }
                }
            );

            // Notify user of completion
            statusBox.style.background = '#dcfce7';
            statusBox.style.color = '#166534';
            statusBox.style.borderColor = '#bbf7d0';
            statusBox.textContent = 'Scan Complete! Textboxes detected.';

            // Populate and show the extracted text
            textArea.style.display = 'block';
            textArea.value = result.data.text.trim() || 'No text found in this document.';

            // Draw bounding boxes on canvas for identified words/textboxes
            const boxThickness = Math.max(2, Math.floor(originalImg.width / 400));
            ctx.strokeStyle = '#ef4444'; // Red borders for recognized text
            ctx.lineWidth = boxThickness;
            ctx.fillStyle = 'rgba(239, 68, 68, 0.15)'; // Semi-transparent red fill for bounding boxes

            if (result.data && result.data.words) {
                result.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);
                });
            }

        } catch (error) {
            console.error('OCR Error:', error);
            statusBox.style.background = '#fee2e2';
            statusBox.style.color = '#991b1b';
            statusBox.style.borderColor = '#fecaca';
            statusBox.textContent = `Error: ${error.message}`;
        }
    })();

    // Immediately return the created UI element while OCR processes asynchronously
    return container;
}