Image Delivery Information Extractor

/**
 * Extracts text from an image using OCR (Optical Character Recognition).
 * This function is designed to extract information, such as delivery details, from images.
 * It uses the Tesseract.js library, which is loaded dynamically.
 * Note: This function performs general text recognition. It does not specifically parse or understand
 * the content as "delivery information" but returns all detected text.
 *
 * @param {HTMLImageElement} originalImg The original image element from which to extract text.
 * @param {string} lang A comma-separated string of language codes (e.g., 'eng', 'rus', 'eng,rus') for Tesseract.js to use for recognition.
 * @returns {Promise<HTMLDivElement>} A promise that resolves to a div element containing the extracted text or status/error messages.
 */
async function processImage(originalImg, lang = 'eng,rus') {
    const TESSERACT_CDN = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';

    // Create a container to show progress and results
    const container = document.createElement('div');
    const statusP = document.createElement('p');
    statusP.style.fontFamily = 'sans-serif';
    statusP.style.fontSize = '14px';
    statusP.textContent = 'Initializing...';
    container.appendChild(statusP);

    // Helper function to dynamically load the Tesseract.js script
    const loadTesseract = () => {
        return new Promise((resolve, reject) => {
            if (window.Tesseract) {
                return resolve();
            }
            const script = document.createElement('script');
            script.src = TESSERACT_CDN;
            script.onload = () => resolve();
            script.onerror = (err) => reject(new Error('Failed to load Tesseract.js script.'));
            document.head.appendChild(script);
        });
    };

    // Logger for Tesseract.js progress
    const updateStatus = (statusUpdate) => {
        let message = statusUpdate.status;
        if (statusUpdate.progress) {
            message += ` (${(statusUpdate.progress * 100).toFixed(0)}%)`;
        }
        statusP.textContent = message.charAt(0).toUpperCase() + message.slice(1); // Capitalize first letter
    };

    try {
        updateStatus({ status: 'loading tesseract.js core' });
        await loadTesseract();

        updateStatus({ status: `creating worker` });
        const worker = await Tesseract.createWorker(lang.split(','), 1, {
            logger: updateStatus,
        });

        updateStatus({ status: `recognizing text` });
        const { data: { text } } = await worker.recognize(originalImg);
        
        statusP.textContent = 'Recognition complete. Terminating worker...';
        await worker.terminate();

        const resultHeader = document.createElement('h3');
        resultHeader.textContent = 'Extracted Text:';
        resultHeader.style.fontFamily = 'sans-serif';

        const resultPre = document.createElement('pre');
        resultPre.textContent = text || 'No text could be detected in the image.';
        resultPre.style.whiteSpace = 'pre-wrap';
        resultPre.style.wordWrap = 'break-word';
        resultPre.style.border = '1px solid #ccc';
        resultPre.style.padding = '10px';
        resultPre.style.backgroundColor = '#f9f9f9';
        resultPre.style.fontFamily = 'monospace';

        // Clear the container and add the final result
        container.innerHTML = '';
        container.appendChild(resultHeader);
        container.appendChild(resultPre);

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

    return container;
}