Image Missing Word Finder

function processImage(originalImg, targetWord = "слово", action = "highlight", language = "rus+eng") {
    // Create a container to hold the canvas and a loading overlay
    const container = document.createElement('div');
    container.style.position = 'relative';
    container.style.display = 'inline-block';
    container.style.maxWidth = '100%';

    // Create the canvas and set up its context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.display = 'block';
    
    // Draw the original image immediately
    ctx.drawImage(originalImg, 0, 0);
    container.appendChild(canvas);

    // Create a loading overlay for visual feedback during OCR analysis
    const overlay = document.createElement('div');
    overlay.style.position = 'absolute';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.width = '100%';
    overlay.style.height = '100%';
    overlay.style.backgroundColor = 'rgba(0,0,0,0.7)';
    overlay.style.color = '#ffffff';
    overlay.style.display = 'flex';
    overlay.style.flexDirection = 'column';
    overlay.style.alignItems = 'center';
    overlay.style.justifyContent = 'center';
    overlay.style.fontFamily = 'Arial, sans-serif';
    overlay.style.fontSize = '20px';
    overlay.style.textAlign = 'center';
    overlay.style.padding = '20px';
    overlay.style.boxSizing = 'border-box';
    overlay.innerHTML = 'Analyzing text using OCR...<br><span style="font-size:14px; margin-top:10px;">This might take a few seconds.</span>';
    container.appendChild(overlay);

    // Execute Optical Character Recognition (OCR) asynchronously
    (async () => {
        try {
            // Dynamically load Tesseract.js if it's not already in window
            if (!window.Tesseract) {
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://unpkg.com/tesseract.js@v5.0.3/dist/tesseract.min.js';
                    script.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);
                });
            }

            // Initialize the Tesseract worker
            const worker = await Tesseract.createWorker(String(language));
            
            // Perform text recognition
            const { data } = await worker.recognize(originalImg);
            await worker.terminate();

            const words = data.words || [];
            const searchLower = String(targetWord).toLowerCase().trim();
            let foundCount = 0;

            // Redraw the clean image in case we need to re-render
            ctx.drawImage(originalImg, 0, 0);

            // Iterate through recognized words to find a match
            words.forEach(word => {
                // Remove punctuation and convert to lowercase for accurate matching
                const textLower = word.text.toLowerCase().replace(/[.,!?;:()[\]"']/g, '').trim();
                
                if (textLower === searchLower) {
                    foundCount++;
                    const { x0, y0, x1, y1 } = word.bbox;
                    const w = x1 - x0;
                    const h = y1 - y0;

                    // Pad the bounding box slightly for better visual appearance
                    const padding = h * 0.1;
                    const drawX = x0 - padding;
                    const drawY = y0 - padding;
                    const drawW = w + (padding * 2);
                    const drawH = h + (padding * 2);

                    if (String(action).toLowerCase() === "hide") {
                        // Create a "missing word" blank space
                        ctx.fillStyle = '#ffffff';
                        ctx.fillRect(drawX, drawY, drawW, drawH);
                        ctx.strokeStyle = '#000000';
                        ctx.lineWidth = Math.max(1, h * 0.05);
                        ctx.strokeRect(drawX, drawY, drawW, drawH);
                    } else { 
                        // Highlight the found word
                        ctx.fillStyle = 'rgba(255, 255, 0, 0.4)'; // Transparent yellow
                        ctx.fillRect(drawX, drawY, drawW, drawH);
                        ctx.strokeStyle = '#ff0000';
                        ctx.lineWidth = Math.max(2, h * 0.05);
                        ctx.strokeRect(drawX, drawY, drawW, drawH);
                    }
                }
            });

            // Update UI based on results
            if (foundCount === 0) {
                overlay.style.backgroundColor = 'rgba(200, 0, 0, 0.8)';
                overlay.innerHTML = `Word '<strong>${targetWord}</strong>' not found in the image.`;
                setTimeout(() => {
                    if(container.contains(overlay)) overlay.remove();
                }, 4000);
            } else {
                // Remove loading overlay if successfully found
                if(container.contains(overlay)) overlay.remove();
            }

        } catch (err) {
            console.error("OCR Processing Error:", err);
            overlay.style.backgroundColor = 'rgba(200, 0, 0, 0.8)';
            overlay.innerHTML = 'An error occurred during text recognition.';
            setTimeout(() => {
                if(container.contains(overlay)) overlay.remove();
            }, 4000);
        }
    })();

    return container;
}