Image To Text Converter

/**
 * Converts an image to text using Optical Character Recognition (OCR).
 * This function utilizes the Tesseract.js library, which will be loaded
 * dynamically from a CDN.
 *
 * @param {Image} originalImg The original JavaScript Image object to process.
 * @param {string} language The language of the text in the image. Defaults to 'eng' (English).
 *                          Examples: 'eng' (English), 'spa' (Spanish), 'fra' (French),
 *                          'deu' (German), 'chi_sim' (Simplified Chinese), 'ara' (Arabic).
 *                          A full list can be found in the Tesseract.js documentation.
 * @returns {Promise<HTMLDivElement>} A promise that resolves to a div element containing the recognized text.
 *                                    The div will show progress updates during the OCR process.
 */
async function processImage(originalImg, language = 'eng') {
    // 1. Create a container element to display progress and the final result.
    const resultContainer = document.createElement('div');
    resultContainer.style.fontFamily = 'monospace';
    resultContainer.style.whiteSpace = 'pre-wrap';
    resultContainer.style.wordBreak = 'break-word';
    resultContainer.style.padding = '15px';
    resultContainer.style.border = '1px solid #ccc';
    resultContainer.style.borderRadius = '5px';
    resultContainer.style.backgroundColor = '#f9f9f9';
    resultContainer.style.minHeight = '50px';
    resultContainer.textContent = 'Preparing for OCR...';

    const TESSERACT_CDN = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';

    // 2. Function to dynamically load the Tesseract.js library.
    const loadTesseract = () => {
        return new Promise((resolve, reject) => {
            // If Tesseract is already loaded, resolve immediately.
            if (window.Tesseract) {
                return resolve();
            }
            const script = document.createElement('script');
            script.src = TESSERACT_CDN;
            script.onload = () => {
                resultContainer.textContent = 'OCR library loaded.';
                resolve();
            };
            script.onerror = (err) => {
                reject(new Error('Failed to load Tesseract.js library from CDN.'));
            };
            document.head.appendChild(script);
            resultContainer.textContent = 'Loading OCR library...';
        });
    };

    try {
        // 3. Load the library and then perform OCR.
        await loadTesseract();

        const {
            createWorker
        } = window.Tesseract;
        
        // 4. Create a worker with a logger to show progress.
        const worker = await createWorker({
            logger: m => {
                let statusText = m.status.replace(/_/g, ' ');
                statusText = statusText.charAt(0).toUpperCase() + statusText.slice(1);
                let progressText = '';
                if (m.progress && m.progress > 0) {
                    progressText = `(${(m.progress * 100).toFixed(0)}%)`;
                }
                resultContainer.textContent = `${statusText} ${progressText}`;
            },
        });

        // 5. Load and initialize the specified language.
        await worker.loadLanguage(language);
        await worker.initialize(language);

        // 6. Recognize text from the image.
        const {
            data: {
                text
            }
        } = await worker.recognize(originalImg);

        // 7. Clean up by terminating the worker.
        await worker.terminate();

        // 8. Display the final recognized text.
        resultContainer.innerHTML = ''; // Clear progress messages
        const pre = document.createElement('pre');
        pre.style.margin = '0';
        pre.textContent = text || '[No text recognized]';
        resultContainer.appendChild(pre);

    } catch (error) {
        console.error('OCR process failed:', error);
        resultContainer.textContent = `Error: ${error.message || 'An unknown error occurred during OCR.'}`;
        resultContainer.style.color = 'red';
    }

    // 9. Return the container element.
    return resultContainer;
}