Image Text Search And Topic Extraction Tool

function processImage(originalImg, searchTopic = "text") {
    // Create the main container
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.gap = '15px';
    container.style.width = '100%';

    // Create the canvas and draw the original image
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    canvas.style.maxWidth = '100%';
    canvas.style.border = '1px solid #e0e0e0';
    canvas.style.borderRadius = '4px';
    canvas.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    
    container.appendChild(canvas);

    // Create a status panel for progress and logs
    const statusPanel = document.createElement('div');
    statusPanel.style.padding = '12px';
    statusPanel.style.backgroundColor = '#f8f9fa';
    statusPanel.style.border = '1px solid #dee2e6';
    statusPanel.style.borderRadius = '4px';
    statusPanel.style.color = '#495057';
    statusPanel.style.fontWeight = '500';
    statusPanel.textContent = 'Initializing OCR engine...';
    container.appendChild(statusPanel);

    // Create a panel for displaying extracted text
    const resultPanel = document.createElement('div');
    resultPanel.style.maxHeight = '300px';
    resultPanel.style.overflowY = 'auto';
    resultPanel.style.padding = '12px';
    resultPanel.style.border = '1px solid #dee2e6';
    resultPanel.style.borderRadius = '4px';
    resultPanel.style.backgroundColor = '#ffffff';
    resultPanel.style.display = 'none';
    container.appendChild(resultPanel);

    // Load Tesseract and process asynchronously
    (async () => {
        try {
            // Dynamically load Tesseract.js if not already present
            let Tesseract = window.Tesseract;
            if (!Tesseract) {
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://unpkg.com/tesseract.js@4.1.2/dist/tesseract.min.js';
                    script.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);
                });
                Tesseract = window.Tesseract;
            }

            statusPanel.textContent = 'Preprocessing image and analyzing text...';

            // Run OCR
            const result = await Tesseract.recognize(canvas, 'eng', {
                logger: m => {
                    if (m.status === 'recognizing text') {
                        statusPanel.textContent = `Scanning image for text: ${(m.progress * 100).toFixed(0)}%`;
                    } else {
                        statusPanel.textContent = `Status: ${m.status}...`;
                    }
                }
            });

            const words = result.data.words;
            const searchTermTrimmed = String(searchTopic).trim();
            const searchLower = searchTermTrimmed.toLowerCase();
            let matchCount = 0;

            // Prepare highlight styles
            ctx.lineWidth = 3;
            ctx.strokeStyle = '#e74c3c';
            ctx.fillStyle = 'rgba(241, 196, 15, 0.4)';

            // Iterate through every detected word
            words.forEach(word => {
                if (searchTermTrimmed !== "" && word.text.toLowerCase().includes(searchLower)) {
                    matchCount++;
                    const { x0, y0, x1, y1 } = word.bbox;
                    
                    // Draw highlight background and border
                    ctx.fillRect(x0, y0, x1 - x0, y1 - y0);
                    ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
                }
            });

            // Update status panel with results
            if (searchTermTrimmed === "") {
                statusPanel.textContent = `Extraction complete. Extracted ${words.length} words (No search topic provided).`;
                statusPanel.style.backgroundColor = '#e2e3e5';
                statusPanel.style.color = '#383d41';
            } else if (matchCount > 0) {
                statusPanel.textContent = `Search Complete. Found ${matchCount} matches for "${searchTopic}".`;
                statusPanel.style.backgroundColor = '#d4edda';
                statusPanel.style.color = '#155724';
                statusPanel.style.borderColor = '#c3e6cb';
            } else {
                statusPanel.textContent = `Search Complete. No matches found for "${searchTopic}".`;
                statusPanel.style.backgroundColor = '#f8d7da';
                statusPanel.style.color = '#721c24';
                statusPanel.style.borderColor = '#f5c6cb';
            }

            // Display raw text result
            resultPanel.style.display = 'block';
            
            const rawTextHeading = document.createElement('h4');
            rawTextHeading.style.margin = '0 0 10px 0';
            rawTextHeading.style.color = '#212529';
            rawTextHeading.textContent = 'Extracted Text content:';
            resultPanel.appendChild(rawTextHeading);

            const preElement = document.createElement('pre');
            preElement.style.whiteSpace = 'pre-wrap';
            preElement.style.fontFamily = 'inherit';
            preElement.style.margin = '0';
            preElement.style.color = '#495057';
            
            // Highlight text output if matched
            if (searchTermTrimmed !== "") {
                const regex = new RegExp(`(${searchTermTrimmed})`, 'gi');
                preElement.innerHTML = result.data.text.replace(regex, '<mark style="background-color: #ffeeba; border-radius: 2px;">$1</mark>');
            } else {
                preElement.textContent = result.data.text;
            }
            
            resultPanel.appendChild(preElement);

        } catch (err) {
            console.error(err);
            statusPanel.textContent = `Error: Failed to process image (${err.message})`;
            statusPanel.style.backgroundColor = '#f8d7da';
            statusPanel.style.color = '#721c24';
            statusPanel.style.borderColor = '#f5c6cb';
        }
    })();

    // Returns immediately while processing happens async, so UI updates live
    return container;
}