Image Address Text Extractor

async function processImage(originalImg) {
    /**
     * Dynamically loads the Tesseract.js library from a CDN.
     * To avoid reloading the script on subsequent calls, it uses a static promise 
     * on the function itself to ensure the script is fetched and appended only once.
     * @returns {Promise<Tesseract>} A promise that resolves with the global Tesseract object.
     */
    const loadTesseract = () => {
        // Use a static property on the function to store the promise, ensuring it's loaded only once.
        if (!processImage.tesseractPromise) {
            processImage.tesseractPromise = new Promise((resolve, reject) => {
                // Check if the Tesseract object is already available (e.g., script already included).
                if (window.Tesseract) {
                    return resolve(window.Tesseract);
                }
                const script = document.createElement('script');
                script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
                script.onload = () => resolve(window.Tesseract);
                script.onerror = () => {
                    // Reset promise on failure to allow retrying on a subsequent call.
                    processImage.tesseractPromise = null;
                    reject(new Error('Failed to load Tesseract.js script. Check your network connection.'));
                };
                document.head.appendChild(script);
            });
        }
        return processImage.tesseractPromise;
    };

    try {
        const Tesseract = await loadTesseract();

        // The 'recognize' function is a high-level API that handles worker creation,
        // job processing, and worker termination automatically. It's the simplest way to get results.
        // We pass a logger callback to log the progress to the browser's console.
        console.log('Starting text extraction process...');
        const {
            data: {
                text
            }
        } = await Tesseract.recognize(
            originalImg,
            'eng', // Specify English as the language for OCR.
            {
                logger: m => console.log(m)
            } // Log progress updates (e.g., { status: 'recognizing text', progress: 0.5 }).
        );

        // Create a styled <pre> element to display the extracted text nicely.
        const resultElement = document.createElement('pre');
        resultElement.style.whiteSpace = 'pre-wrap';
        resultElement.style.wordBreak = 'break-word';
        resultElement.style.fontFamily = 'Consolas, "Courier New", monospace';
        resultElement.style.fontSize = '14px';
        resultElement.style.lineHeight = '1.6';
        resultElement.style.padding = '15px';
        resultElement.style.margin = '0';
        resultElement.style.border = '1px solid #ddd';
        resultElement.style.borderRadius = '5px';
        resultElement.style.backgroundColor = '#f8f9fa';
        resultElement.style.boxShadow = '0 2px 5px rgba(0,0,0,0.05)';
        resultElement.style.textAlign = 'left';
        resultElement.style.color = '#333';

        const extractedText = text.trim();
        resultElement.textContent = extractedText ? extractedText : "No text could be extracted from the image.";

        return resultElement;

    } catch (error) {
        console.error('Image text extraction failed:', error);

        // In case of an error, return a clearly styled error message element.
        const errorElement = document.createElement('div');
        errorElement.style.padding = '15px';
        errorElement.style.border = '1px solid #e57373';
        errorElement.style.borderRadius = '5px';
        errorElement.style.backgroundColor = '#ffebee';
        errorElement.style.color = '#c62828';
        errorElement.style.fontFamily = 'Consolas, "Courier New", monospace';
        errorElement.style.lineHeight = '1.5';
        errorElement.textContent = `An error occurred during text extraction: ${error.message}`;

        return errorElement;
    }
}