Image Text Search Finder

async function processImage(originalImg, searchText = "the", highlightColor = "rgba(255, 255, 0, 0.5)") {
    // Create a canvas and draw the original image onto it
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    // If there is no search text, simply return the unmodified image canvas
    if (!searchText || searchText.trim() === "") {
        return canvas;
    }

    // Load Tesseract.js dynamically if it isn't already loaded
    if (typeof window.Tesseract === 'undefined') {
        await new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }

    try {
        // Initialize the Tesseract worker (v5 syntax)
        const worker = await window.Tesseract.createWorker('eng');
        
        // Perform OCR on the original image
        const { data } = await worker.recognize(originalImg);
        
        // Terminate worker to free up memory
        await worker.terminate();

        // Extract and normalize the target search words
        const searchWords = searchText
            .toLowerCase()
            .split(/\s+/)
            .filter(w => w.length > 0);

        if (data && data.words) {
            data.words.forEach(word => {
                const wordText = word.text.toLowerCase();
                const cleanWordText = wordText.replace(/[.,!?;:'"()]/g, ''); // strip outer punctuation for exact checks

                // Determine if the OCR word matches any of our search keywords
                const isMatch = searchWords.some(searchWord => {
                    // For very short words, require a strict match to prevent highlighting every word containing an 'a' or 'is'
                    if (searchWord.length <= 2) {
                        return cleanWordText === searchWord || wordText === searchWord;
                    }
                    // For longer words, a substring match is useful
                    return wordText.includes(searchWord);
                });

                if (isMatch) {
                    const bbox = word.bbox;
                    const x = bbox.x0;
                    const y = bbox.y0;
                    const w = bbox.x1 - bbox.x0;
                    const h = bbox.y1 - bbox.y0;

                    // Draw the highlight background
                    ctx.fillStyle = highlightColor;
                    ctx.fillRect(x, y, w, h);
                    
                    // Draw a red bounding box outline for extra clarity
                    ctx.strokeStyle = "red";
                    ctx.lineWidth = Math.max(1, Math.min(canvas.width, canvas.height) * 0.003);
                    ctx.strokeRect(x, y, w, h);
                }
            });
        }
    } catch (error) {
        console.error("Image Text Search Finder Error during OCR:", error);
    }

    return canvas;
}