Image Number Extractor

async function processImage(originalImg) {
    /**
     * Dynamically loads the Tesseract.js script if it's not already loaded.
     * @returns {Promise<void>} A promise that resolves when the script is loaded.
     */
    const loadTesseractScript = () => {
        return new Promise((resolve, reject) => {
            // Check if Tesseract is already available
            if (window.Tesseract) {
                return resolve();
            }
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
            script.onload = () => resolve();
            script.onerror = (err) => reject(new Error('Failed to load Tesseract.js script. Please check your internet connection.'));
            document.head.appendChild(script);
        });
    };

    // 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.padding = '10px';
    resultContainer.style.border = '1px solid #ccc';
    resultContainer.style.borderRadius = '5px';
    resultContainer.textContent = 'Initializing OCR engine...';

    let worker;

    try {
        // 1. Ensure the Tesseract.js library is loaded.
        await loadTesseractScript();

        // 2. Create a Tesseract worker.
        // The logger object provides progress updates, which we display to the user.
        worker = await Tesseract.createWorker('eng', 1, {
            logger: m => {
                let statusText = m.status;
                if (m.status === 'recognizing text') {
                    statusText += ` (${Math.round(m.progress * 100)}%)`;
                }
                resultContainer.textContent = `Processing: ${statusText}`;
            },
        });

        // 3. Set parameters to only recognize digits for better accuracy and speed.
        await worker.setParameters({
            tessedit_char_whitelist: '0123456789.-', // Whitelist digits, decimal points, and minus signs
        });

        // 4. Perform OCR on the provided image object.
        const {
            data: {
                text
            }
        } = await worker.recognize(originalImg);

        // 5. Process the extracted text find all number-like sequences.
        const numbers = text.match(/-?\d+(\.\d+)?/g);

        // 6. Format and display the final result.
        if (numbers && numbers.length > 0) {
            resultContainer.innerHTML = `<strong>Extracted Numbers:</strong>\n\n${numbers.join('\n')}`;
        } else {
            resultContainer.textContent = 'No numbers could be found in the image.';
        }

    } catch (error) {
        console.error('Image number extraction failed:', error);
        resultContainer.textContent = `An error occurred during processing: ${error.message || error}`;
    } finally {
        // 7. Terminate the worker to free up resources, regardless of success or failure.
        if (worker) {
            await worker.terminate();
        }
    }

    // 8. Return the container element with the result.
    return resultContainer;
}