Image Scene Translator Identifier

/**
 * Identifies and extracts text from an image scene using OCR.
 * This function dynamically loads and uses the Tesseract.js library.
 * It returns a <div> element containing the image with identified text
 * highlighted, and a <pre> block with the extracted text below it.
 *
 * @param {Image} originalImg The original Image object to process.
 * @param {string} [language='eng'] The language code for OCR (e.g., 'eng', 'spa', 'fra').
 * @param {string} [rectColor='red'] The color of the rectangle drawn around detected text.
 * @param {number} [rectLineWidth=2] The line width of the rectangle drawn around detected text.
 * @returns {Promise<HTMLElement>} A promise that resolves to a single HTML <div> element containing the result.
 */
async function processImage(originalImg, language = 'eng', rectColor = 'red', rectLineWidth = 2) {
    // Dynamically import Tesseract.js if not already available.
    // This prevents loading the library until it's actually needed.
    if (typeof Tesseract === 'undefined') {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
        script.integrity = 'sha384-N1uJpCsl2yMRompt24Uvp51e04fC0uR2t0weI0/XlqV2iTfQXpTAhF1+nLrQ+kP1';
        script.crossOrigin = 'anonymous';
        document.head.appendChild(script);

        try {
            await new Promise((resolve, reject) => {
                script.onload = resolve;
                script.onerror = () => reject(new Error('Failed to load Tesseract.js script.'));
            });
        } catch (error) {
            console.error(error);
            const errorElement = document.createElement('div');
            errorElement.textContent = `Error: Could not load the required text recognition library. Please check your network connection.`;
            errorElement.style.color = 'red';
            errorElement.style.padding = '10px';
            return errorElement;
        }
    }
    
    // We'll return a container with the canvas and the recognized text.
    const container = document.createElement('div');

    try {
        // Create a canvas and draw the image onto it.
        const canvas = document.createElement('canvas');
        canvas.width = originalImg.naturalWidth;
        canvas.height = originalImg.naturalHeight;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(originalImg, 0, 0);

        // Create a Tesseract worker and perform OCR.
        // The logger can be used to show progress in a UI if needed.
        const worker = await Tesseract.createWorker(language);
        const { data } = await worker.recognize(canvas);
        
        // Draw bounding boxes on the canvas for each recognized word.
        ctx.strokeStyle = rectColor;
        ctx.lineWidth = rectLineWidth;
        data.words.forEach(word => {
            const { bbox } = word;
            ctx.strokeRect(bbox.x0, bbox.y0, bbox.x1 - bbox.x0, bbox.y1 - bbox.y0);
        });

        // Add the processed canvas to our container.
        container.appendChild(canvas);

        // Create an element to display the recognized text.
        if (data.text && data.text.trim() !== '') {
            const textOutput = document.createElement('pre');
            textOutput.textContent = data.text;
            textOutput.style.marginTop = '15px';
            textOutput.style.padding = '10px';
            textOutput.style.border = '1px solid #ccc';
            textOutput.style.backgroundColor = '#f9f9f9';
            textOutput.style.whiteSpace = 'pre-wrap';
            textOutput.style.wordWrap = 'break-word';
            textOutput.style.textAlign = 'left';
            textOutput.style.fontFamily = 'monospace';
            container.appendChild(textOutput);
        } else {
             const noTextOutput = document.createElement('p');
             noTextOutput.textContent = 'No text found in the image.';
             noTextOutput.style.marginTop = '15px';
             noTextOutput.style.textAlign = 'center';
             container.appendChild(noTextOutput);
        }

        // Terminate the worker to free up resources.
        await worker.terminate();

    } catch (error) {
        console.error('OCR Error:', error);
        container.innerHTML = 'An error occurred during image analysis. Please check the console for details.';
        container.style.color = 'red';
        container.style.padding = '10px';
    }

    // Return the container with the canvas and text output.
    return container;
}