Image Text Search By Topic Finder

async function processImage(originalImg, topic = 'important, urgent') {
    // Create canvas and draw the original image
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    // Load Tesseract.js dynamically if not already available
    if (typeof window.Tesseract === 'undefined') {
        await new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = 'https://unpkg.com/tesseract.js@4.1.1/dist/tesseract.min.js';
            script.onload = resolve;
            script.onerror = () => reject(new Error('Failed to load Tesseract.js'));
            document.head.appendChild(script);
        });
    }

    try {
        // Run OCR on the image
        const { data } = await window.Tesseract.recognize(canvas, 'eng');
        
        // Parse the topic words or phrases (comma separated list)
        const keywords = topic.split(',')
            .map(t => t.trim().toLowerCase())
            .filter(t => t.length > 0);
            
        // Differentiate between single word searches and multi-word phrase searches
        const singleWords = keywords.filter(k => !k.includes(' '));
        const phrases = keywords.filter(k => k.includes(' '));

        // Style for highlighting found text
        ctx.lineWidth = Math.max(2, Math.floor(Math.min(canvas.width, canvas.height) / 250));
        ctx.strokeStyle = '#ff0000'; // Red border
        ctx.fillStyle = 'rgba(255, 255, 0, 0.4)'; // Yellow translucent fill

        // Helper function to draw a highlight box over matching text
        function drawHighlightBox(bbox) {
            const { x0, y0, x1, y1 } = bbox;
            ctx.beginPath();
            ctx.rect(x0, y0, x1 - x0, y1 - y0);
            ctx.fill();
            ctx.stroke();
        }

        // Highlight matching single words
        if (data && data.words) {
            for (const word of data.words) {
                const text = word.text.toLowerCase();
                for (const kw of singleWords) {
                    if (text.includes(kw)) {
                        drawHighlightBox(word.bbox);
                        break;
                    }
                }
            }
        }

        // Highlight matching full lines if searching for phrases
        if (data && data.lines && phrases.length > 0) {
            for (const line of data.lines) {
                const text = line.text.toLowerCase();
                for (const ph of phrases) {
                    if (text.includes(ph)) {
                        drawHighlightBox(line.bbox);
                        break;
                    }
                }
            }
        }

    } catch (error) {
        console.error("Text Processing OCR Error: ", error);
        
        // Providing visual feedback if it failed
        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        ctx.fillRect(0, 0, canvas.width, 50);
        ctx.fillStyle = '#ff5555';
        ctx.font = '20px sans-serif';
        ctx.fillText('OCR failed to execute. Check console logs.', 10, 30);
    }

    return canvas;
}