Image Text And Name Recognition Tool

function processImage(originalImg, language = 'eng') {
    // Create the main container
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.padding = '20px';
    container.style.border = '1px solid #ddd';
    container.style.borderRadius = '8px';
    container.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
    container.style.backgroundColor = '#fdfdfd';
    container.style.maxWidth = '600px';
    container.style.margin = '0 auto';
    container.style.boxSizing = 'border-box';

    // Create Title
    const title = document.createElement('h3');
    title.textContent = 'Image Text & Name Recognition';
    title.style.marginTop = '0';
    title.style.color = '#333';
    title.style.borderBottom = '2px solid #007bff';
    title.style.display = 'inline-block';
    title.style.paddingBottom = '5px';
    container.appendChild(title);

    // Create Image Preview
    const imgPreview = new Image();
    imgPreview.src = originalImg.src;
    imgPreview.style.width = '100%';
    imgPreview.style.maxHeight = '250px';
    imgPreview.style.objectFit = 'contain';
    imgPreview.style.backgroundColor = '#eee';
    imgPreview.style.borderRadius = '4px';
    imgPreview.style.marginBottom = '15px';
    container.appendChild(imgPreview);

    // Create Status and Progress UI
    const statusContainer = document.createElement('div');
    statusContainer.style.marginBottom = '15px';
    
    const statusText = document.createElement('div');
    statusText.textContent = 'Initializing engine...';
    statusText.style.fontSize = '14px';
    statusText.style.fontWeight = '500';
    statusText.style.color = '#555';
    statusText.style.marginBottom = '5px';
    
    const progressBar = document.createElement('div');
    progressBar.style.width = '100%';
    progressBar.style.height = '10px';
    progressBar.style.backgroundColor = '#e0e0e0';
    progressBar.style.borderRadius = '5px';
    progressBar.style.overflow = 'hidden';

    const progressFill = document.createElement('div');
    progressFill.style.height = '100%';
    progressFill.style.width = '0%';
    progressFill.style.backgroundColor = '#007bff';
    progressFill.style.transition = 'width 0.2s ease, background-color 0.2s ease';

    progressBar.appendChild(progressFill);
    statusContainer.appendChild(statusText);
    statusContainer.appendChild(progressBar);
    container.appendChild(statusContainer);

    // Create Text Output Area
    const textOutput = document.createElement('textarea');
    textOutput.style.width = '100%';
    textOutput.style.boxSizing = 'border-box';
    textOutput.style.minHeight = '180px';
    textOutput.style.padding = '12px';
    textOutput.style.border = '1px solid #ccc';
    textOutput.style.borderRadius = '4px';
    textOutput.style.fontSize = '14px';
    textOutput.style.lineHeight = '1.5';
    textOutput.style.resize = 'vertical';
    textOutput.readOnly = true;
    textOutput.placeholder = 'Extracted text will appear here...';
    container.appendChild(textOutput);

    // Background OCR Process
    (async () => {
        try {
            // Wait for the image to be fully loaded
            await new Promise((resolve) => {
                if (originalImg.complete && originalImg.naturalHeight !== 0) resolve();
                else originalImg.onload = resolve;
            });

            // Dynamically import Tesseract.js if it doesn't exist
            if (typeof window.Tesseract === 'undefined') {
                statusText.textContent = 'Loading Tesseract OCR engine (this may take a moment)...';
                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 library.'));
                    document.head.appendChild(script);
                });
            }

            // Render original image on canvas to avoid referencing potential memory/blob issues natively
            const canvas = document.createElement('canvas');
            canvas.width = originalImg.naturalWidth || originalImg.width;
            canvas.height = originalImg.naturalHeight || originalImg.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

            statusText.textContent = 'Preparing image...';

            // Run Tesseract background worker to extract text
            const result = await window.Tesseract.recognize(
                canvas,
                language,
                {
                    logger: m => {
                        if (m.status === 'recognizing text') {
                            const percent = Math.round(m.progress * 100);
                            statusText.textContent = `Recognizing text & names: ${percent}%`;
                            progressFill.style.width = `${percent}%`;
                        } else {
                            statusText.textContent = `Status: ${m.status}`;
                            // Add slight subjective progress for standard stages before "recognizing text"
                            if (m.status.includes('loading')) progressFill.style.width = '10%';
                            if (m.status.includes('initializing')) progressFill.style.width = '20%';
                        }
                    }
                }
            );

            // Output Handling
            statusText.textContent = 'Recognition complete.';
            statusText.style.color = '#28a745';
            progressFill.style.backgroundColor = '#28a745';
            progressFill.style.width = '100%';
            
            const extractedText = result.data.text.trim();
            textOutput.value = extractedText || 'No clear text or names could be found in the image.';
            
        } catch (err) {
            statusText.textContent = 'Error: ' + err.message;
            statusText.style.color = '#dc3545';
            progressFill.style.backgroundColor = '#dc3545';
            progressFill.style.width = '100%';
            textOutput.value = 'An error occurred during optical character recognition.\n\nDetails: ' + err.message;
            console.error('OCR Process failed:', err);
        }
    })();

    // Synchronously return the container immediately so the user can see real-time progress
    return container;
}