Image Identifier Tool For Address Recognition

/**
 * Identifies text from an image, presumably to find an address, using OCR.
 * This function uses the Tesseract.js library, which will be loaded dynamically.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {string} languages A string of languages for Tesseract.js to use, separated by '+'. E.g., 'eng+rus'.
 * @returns {Promise<HTMLElement>} A promise that resolves to a div element containing the recognized text and progress updates.
 */
async function processImage(originalImg, languages = 'rus+eng') {
    // This function returns a div that updates its content to show the OCR progress.
    const resultContainer = document.createElement('div');
    resultContainer.style.fontFamily = 'monospace';
    resultContainer.style.whiteSpace = 'pre-wrap';
    resultContainer.style.padding = '1em';
    resultContainer.style.border = '1px solid #ccc';
    resultContainer.style.borderRadius = '5px';
    resultContainer.style.backgroundColor = '#f9f9f9';
    resultContainer.textContent = 'Preparing OCR engine...';

    // Helper function to dynamically load the Tesseract.js script
    const loadTesseract = () => {
        return new Promise((resolve, reject) => {
            // Check if the script is already loaded
            if (window.Tesseract) {
                return resolve();
            }
            const script = document.createElement('script');
            // Using a specific version for stability
            script.src = 'https://unpkg.com/tesseract.js@5.0.0/dist/tesseract.min.js';
            script.onload = () => resolve();
            script.onerror = () => reject(new Error('Failed to load Tesseract.js script.'));
            document.head.appendChild(script);
        });
    };

    let worker;
    try {
        await loadTesseract();
        resultContainer.textContent = 'Tesseract.js loaded. Creating worker...';

        // Create a Tesseract worker. The logger option provides progress updates.
        worker = await Tesseract.createWorker({
            logger: m => {
                let progressText = `Status: ${m.status}`;
                if (m.status === 'recognizing text' && m.progress) {
                    progressText = `Recognizing text: ${Math.round(m.progress * 100)}%`;
                }
                resultContainer.textContent = progressText;
                console.log(m); // Log progress to the console for debugging
            }
        });

        resultContainer.textContent = `Loading language models (${languages})...`;
        await worker.loadLanguage(languages);
        await worker.initialize(languages);

        resultContainer.textContent = 'Performing recognition...';
        // Recognize text from the provided image object
        const {
            data: {
                text
            }
        } = await worker.recognize(originalImg);

        const outputText = text || 'No text could be identified.';

        // Clear progress text and display the final result
        resultContainer.innerHTML = '';

        const title = document.createElement('strong');
        title.textContent = 'Recognized Text / Address:';

        const content = document.createElement('pre');
        content.style.marginTop = '10px';
        content.style.padding = '10px';
        content.style.backgroundColor = '#f0f0f0';
        content.style.border = '1px dashed #ddd';
        content.style.maxHeight = '300px';
        content.style.overflowY = 'auto';
        content.textContent = outputText;

        resultContainer.appendChild(title);
        resultContainer.appendChild(content);

    } catch (error) {
        console.error('OCR Error:', error);
        resultContainer.style.color = 'red';
        resultContainer.textContent = `An error occurred during OCR processing: ${error.message}`;
    } finally {
        // Terminate the worker to free up resources
        if (worker) {
            await worker.terminate();
            console.log('Tesseract worker terminated.');
        }
    }

    return resultContainer;
}