Image Binary String Table To Numeric Table Converter

async function processImage(originalImg) {
    /**
     * Dynamically loads a script and returns a promise that resolves when the script is loaded.
     * Prevents re-loading the same script if it's already on the page.
     * @param {string} src The URL of the script to load.
     * @returns {Promise<void>}
     */
    const loadScript = (src) => {
        return new Promise((resolve, reject) => {
            // Check if the script is already included
            if (document.querySelector(`script[src="${src}"]`)) {
                // If Tesseract is already loaded, resolve immediately
                if (typeof Tesseract !== 'undefined') {
                    resolve();
                } else {
                    // If script tag exists but Tesseract is not ready, wait for it
                    const interval = setInterval(() => {
                        if (typeof Tesseract !== 'undefined') {
                            clearInterval(interval);
                            resolve();
                        }
                    }, 100);
                }
                return;
            }
            const script = document.createElement('script');
            script.src = src;
            script.onload = () => resolve();
            script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
            document.head.appendChild(script);
        });
    };

    // Create a canvas to work with. This will be the final returned element.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Draw the original image onto the canvas. This preserves the table structure,
    // lines, and any non-textual elements.
    ctx.drawImage(originalImg, 0, 0);

    // Dynamically load the Tesseract.js library for OCR.
    try {
        await loadScript('https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js');
    } catch (error) {
        console.error(error);
        ctx.fillStyle = 'red';
        ctx.font = '16px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('Error: Could not load the OCR library.', canvas.width / 2, canvas.height / 2);
        return canvas;
    }

    // Create a Tesseract worker to perform the text recognition.
    const worker = await Tesseract.createWorker('eng');

    try {
        // Recognize words in the image. This provides both the text and its location (bounding box).
        const { data: { words } } = await worker.recognize(canvas);

        // Iterate over each word found by the OCR.
        for (const word of words) {
            const text = word.text.trim();

            // Check if the recognized text is a valid binary string (contains only '0's and '1's).
            // We also check if its length > 1 to avoid converting single digits that might be row numbers.
            if (/^[01]+$/.test(text) && text.length > 1) {
                const bbox = word.bbox;
                const x = bbox.x0;
                const y = bbox.y0;
                const width = bbox.x1 - bbox.x0;
                const height = bbox.y1 - bbox.y0;

                // 1. Erase the old binary string from the canvas by drawing a rectangle over it.
                // We default to a white background, which is common for tables.
                ctx.fillStyle = 'white';
                ctx.fillRect(x, y, width, height);

                // 2. Convert the binary string to its decimal equivalent.
                const decimalValue = parseInt(text, 2).toString();

                // 3. Draw the new decimal number in the same location.
                // We estimate a good font size based on the height of the bounding box.
                const fontSize = height * 0.8; // 80% of the box height.
                ctx.font = `bold ${fontSize}px Arial, sans-serif`;
                ctx.fillStyle = 'black'; // Assuming black text.
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';

                // Calculate the center of the bounding box to draw the text.
                const centerX = x + width / 2;
                const centerY = y + height / 2;
                ctx.fillText(decimalValue, centerX, centerY);
            }
        }
    } catch (ocrError) {
        console.error("OCR process failed:", ocrError);
        ctx.fillStyle = 'rgba(255, 0, 0, 0.7)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'white';
        ctx.font = '16px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('An error occurred during image recognition.', canvas.width / 2, canvas.height / 2);
    } finally {
        // Important: Terminate the worker to free up browser resources.
        await worker.terminate();
    }

    // Return the modified canvas element.
    return canvas;
}