Image Alphabet Finder

async function processImage(originalImg, highlightColor = 'rgba(255, 0, 0, 0.7)', minConfidence = 60) {
    /**
     * Dynamically loads the Tesseract.js script from a CDN.
     * This function ensures that the script is loaded only once.
     * @returns {Promise<void>} A promise that resolves when the script is loaded.
     */
    const loadTesseract = () => {
        return new Promise((resolve, reject) => {
            // Check if Tesseract is already loaded on the window object
            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.'));
            document.head.appendChild(script);
        });
    };

    // Create a canvas to draw the output image with highlights
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    const ctx = canvas.getContext('2d');
    
    // Draw the original image onto the canvas as the base layer
    ctx.drawImage(originalImg, 0, 0);

    // Create a container to hold the canvas and a status display.
    // This allows returning a single element for easy display, as requested.
    const container = document.createElement('div');
    container.style.position = 'relative'; // Needed for absolute positioning of the child status div
    container.style.display = 'inline-block'; // To make the container wrap the canvas size
    container.appendChild(canvas);

    // Create a status display element to provide feedback during the OCR process
    const statusDiv = document.createElement('div');
    statusDiv.style.position = 'absolute';
    statusDiv.style.top = '10px';
    statusDiv.style.left = '10px';
    statusDiv.style.padding = '8px 12px';
    statusDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.75)';
    statusDiv.style.color = 'white';
    statusDiv.style.fontFamily = 'Arial, sans-serif'; // Web-safe font
    statusDiv.style.fontSize = '14px';
    statusDiv.style.borderRadius = '5px';
    statusDiv.textContent = 'Loading OCR engine...';
    container.appendChild(statusDiv);

    try {
        // Dynamically load the Tesseract.js library
        await loadTesseract();
        
        statusDiv.textContent = 'Initializing OCR worker...';
        
        // Create an OCR worker for the English language
        const worker = await Tesseract.createWorker('eng', 1, {
             logger: m => {
                // Update the status message with recognition progress for better UX
                if (m.status === 'recognizing text') {
                    const progress = (m.progress * 100).toFixed(0);
                    statusDiv.textContent = `Recognizing text... ${progress}%`;
                }
             }
        });

        // Perform OCR on the image to get detailed results, including individual symbols
        const { data: { symbols } } = await worker.recognize(originalImg);
        
        statusDiv.textContent = 'Highlighting letters...';

        // Regex to match single English alphabet letters (case-insensitive)
        const alphabetRegex = /^[a-zA-Z]$/;
        let foundCount = 0;

        // Set up drawing style for the highlight boxes
        ctx.strokeStyle = highlightColor;
        // Make line width responsive to image size for better visibility
        ctx.lineWidth = Math.max(1, Math.round(canvas.width / 400));

        // Iterate over each recognized symbol from the OCR result
        symbols.forEach(symbol => {
            // Check if the symbol is a single letter and if the confidence is above the threshold
            if (alphabetRegex.test(symbol.text) && symbol.confidence >= minConfidence) {
                const bbox = symbol.bbox;
                // Draw a rectangle around the found letter using its bounding box coordinates
                ctx.strokeRect(bbox.x0, bbox.y0, bbox.x1 - bbox.x0, bbox.y1 - bbox.y0);
                foundCount++;
            }
        });
        
        // Terminate the worker to free up browser resources
        await worker.terminate();

        statusDiv.textContent = `Found ${foundCount} alphabet letters.`;

        // Fade out and remove the status message after a few seconds for a clean final output
        setTimeout(() => {
            statusDiv.style.transition = 'opacity 0.5s ease-out';
            statusDiv.style.opacity = '0';
        }, 3000);
         setTimeout(() => {
            if (container.contains(statusDiv)) {
                 container.removeChild(statusDiv);
            }
        }, 3500);

        // Return the container element, which holds the final canvas
        return container;

    } catch (error) {
        console.error('OCR process failed:', error);
        // In case of an error, return a dedicated error element for display
        const errorDiv = document.createElement('div');
        errorDiv.style.color = 'red';
        errorDiv.style.fontFamily = 'Arial, sans-serif';
        errorDiv.style.padding = '20px';
        errorDiv.style.border = '1px solid red';
        errorDiv.style.display = 'inline-block';
        errorDiv.textContent = `An error occurred: ${error.message}`;
        return errorDiv;
    }
}