Image Search Keyword Text Finder

async function processImage(originalImg, keyword = "text", highlightColor = "rgba(255, 255, 0, 0.5)", borderColor = "#ff0000", matchCase = "false") {
    // Create a new canvas to draw the image and highlights
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // If no keyword provided, return the unprocessed canvas early
    if (!keyword || keyword.trim() === "") {
        return canvas;
    }

    // Dynamically load Tesseract.js if it's not already available in the environment
    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.crossOrigin = 'anonymous';
            script.onload = () => {
                // Short timeout to guarantee initialization
                setTimeout(resolve, 100);
            };
            script.onerror = () => reject(new Error('Failed to load Tesseract.js'));
            document.head.appendChild(script);
        });
    }

    try {
        // Run OCR on the canvas
        // Tesseract handles the extraction of text, lines, words, and bounding boxes
        const result = await window.Tesseract.recognize(canvas, 'eng');
        const words = result.data.words;

        // Parse search logic based on parameters
        const isCaseSensitive = matchCase.toLowerCase() === 'true';
        
        // Split keyword into multiple search terms by spaces (ignoring empty strings)
        let searchTerms = keyword.split(/\s+/).filter(w => w.length > 0);
        if (!isCaseSensitive) {
            searchTerms = searchTerms.map(term => term.toLowerCase());
        }

        // Configure bounding box styles
        ctx.fillStyle = highlightColor;
        ctx.strokeStyle = borderColor;
        ctx.lineWidth = Math.max(1, Math.floor(canvas.width / 500)); // Responsive line width

        // Iterate through all recognized words from OCR
        for (const word of words) {
            const wordText = isCaseSensitive ? word.text : word.text.toLowerCase();
            
            // Checking if the recognized word contains any of the search terms
            const isMatch = searchTerms.some(term => wordText.includes(term));

            if (isMatch) {
                // Extract bounding box coordinates for the word
                // coordinates are x0 (left), y0 (top), x1 (right), y1 (bottom)
                const { x0, y0, x1, y1 } = word.bbox;
                const width = x1 - x0;
                const height = y1 - y0;
                
                // Draw fill highlight
                if (highlightColor && highlightColor !== 'transparent') {
                    ctx.fillRect(x0, y0, width, height);
                }
                
                // Draw border highlight
                if (borderColor && borderColor !== 'transparent' && borderColor !== 'none') {
                    ctx.strokeRect(x0, y0, width, height);
                }
            }
        }
    } catch (error) {
        console.error('OCR Processing Error:', error);
        
        // Draw an error message directly on the canvas as a fallback
        ctx.fillStyle = 'rgba(255, 255, 255, 0.85)';
        ctx.fillRect(0, 0, canvas.width, 40);
        ctx.fillStyle = 'red';
        ctx.font = '20px Arial';
        ctx.fillText('OCR Failed: ' + error.message, 10, 28);
    }

    return canvas;
}