Image Online Character Identifier

/**
 * Identifies characters in an image using Optical Character Recognition (OCR).
 * This function dynamically loads the Tesseract.js library to perform OCR.
 * It returns a div element containing a canvas with the original image
 * and bounding boxes around detected words, along with a <pre> block
 * containing the full recognized text.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} lang The language code for OCR (e.g., 'eng' for English, 'rus' for Russian, 'eng+rus' for both). Tesseract.js supports over 100 languages.
 * @returns {Promise<HTMLDivElement>} A promise that resolves to a div element containing the visual and text results.
 */
async function processImage(originalImg, lang = 'eng') {
    const container = document.createElement('div');
    const statusDisplay = document.createElement('p');
    statusDisplay.style.fontFamily = 'Arial, sans-serif';
    statusDisplay.textContent = 'Initializing OCR engine...';
    container.appendChild(statusDisplay);

    // Helper function to dynamically load a script and wait for it to be ready
    const loadScript = (src) => {
        return new Promise((resolve, reject) => {
            // Resolve immediately if the script is already loaded
            if (window.Tesseract) {
                return resolve();
            }
            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);
        });
    };

    let worker;

    try {
        // 1. Load the Tesseract.js library from a CDN
        await loadScript('https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js');
        
        statusDisplay.textContent = 'Creating OCR worker...';

        // 2. Create a Tesseract worker. This will download language data on the first run.
        worker = await Tesseract.createWorker(lang, 1, {
            logger: m => {
                let statusText = m.status;
                if (m.status === 'recognizing text') {
                    statusText += ` (${Math.round(m.progress * 100)}%)`;
                }
                statusDisplay.textContent = `Status: ${statusText}`;
                console.log(m);
            },
        });

        // 3. Perform OCR on the image
        const { data } = await worker.recognize(originalImg);
        
        // 4. Prepare the output canvas
        const canvas = document.createElement('canvas');
        canvas.width = originalImg.naturalWidth;
        canvas.height = originalImg.naturalHeight;
        canvas.style.maxWidth = '100%';
        canvas.style.height = 'auto';
        const ctx = canvas.getContext('2d');
        
        // Draw the original image onto the canvas
        ctx.drawImage(originalImg, 0, 0);

        // 5. Draw bounding boxes for each recognized word
        data.words.forEach(word => {
            const { x0, y0, x1, y1 } = word.bbox;
            ctx.strokeStyle = 'rgba(255, 0, 0, 0.7)'; // Red, semi-transparent
            ctx.lineWidth = 2;
            ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
        });

        // 6. Assemble the final result element
        container.innerHTML = ''; // Clear status messages

        const canvasTitle = document.createElement('h3');
        canvasTitle.textContent = 'Identified Text Regions';
        container.appendChild(canvasTitle);
        container.appendChild(canvas);

        const textTitle = document.createElement('h3');
        textTitle.style.marginTop = '20px';
        textTitle.textContent = 'Full Recognized Text';
        container.appendChild(textTitle);

        const textOutput = document.createElement('pre');
        textOutput.textContent = data.text;
        textOutput.style.whiteSpace = 'pre-wrap';
        textOutput.style.wordWrap = 'break-word';
        textOutput.style.border = '1px solid #ccc';
        textOutput.style.padding = '10px';
        textOutput.style.backgroundColor = '#f9f9f9';
        textOutput.style.maxHeight = '300px';
        textOutput.style.overflowY = 'auto';
        container.appendChild(textOutput);

    } catch (error) {
        console.error('OCR process failed:', error);
        container.innerHTML = `<p style="color: red;">An error occurred during character recognition: ${error.message}</p>`;
    } finally {
        // 7. Terminate the worker to free up resources
        if (worker) {
            await worker.terminate();
            console.log('Tesseract worker terminated.');
        }
    }

    return container;
}