AI Powered Image Text Search By Creator Tool

async function processImage(originalImg, languages = 'eng+rus') {
    // Create main container
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.gap = '15px';
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.width = '100%';
    container.style.boxSizing = 'border-box';

    // Create status banner
    const statusDiv = document.createElement('div');
    statusDiv.style.padding = '12px';
    statusDiv.style.borderRadius = '6px';
    statusDiv.style.backgroundColor = '#e0f7fa';
    statusDiv.style.color = '#006064';
    statusDiv.style.fontWeight = 'bold';
    statusDiv.style.textAlign = 'center';
    statusDiv.textContent = 'Loading AI OCR Model...';

    // Create search bar container
    const searchContainer = document.createElement('div');
    searchContainer.style.display = 'none';
    searchContainer.style.gap = '10px';
    searchContainer.style.alignItems = 'center';
    searchContainer.style.flexWrap = 'wrap';

    const searchInput = document.createElement('input');
    searchInput.type = 'text';
    searchInput.placeholder = 'Search within image... (Type here to highlight)';
    searchInput.style.padding = '10px';
    searchInput.style.border = '1px solid #ccc';
    searchInput.style.borderRadius = '4px';
    searchInput.style.flexGrow = '1';
    searchInput.style.minWidth = '200px';

    const matchInfo = document.createElement('span');
    matchInfo.style.fontSize = '0.95em';
    matchInfo.style.color = '#333';
    matchInfo.style.fontWeight = '500';

    searchContainer.appendChild(searchInput);
    searchContainer.appendChild(matchInfo);

    // Create canvas to draw image and highlights
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.border = '1px solid #ddd';
    canvas.style.borderRadius = '6px';
    canvas.style.boxShadow = '0 2px 4px rgba(0,0,0,0.05)';

    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    // Create text area for the raw extracted text
    const textAreaLabel = document.createElement('label');
    textAreaLabel.textContent = 'Extracted Text';
    textAreaLabel.style.fontWeight = 'bold';
    textAreaLabel.style.marginTop = '10px';
    textAreaLabel.style.display = 'none';

    const textArea = document.createElement('textarea');
    textArea.style.width = '100%';
    textArea.style.minHeight = '150px';
    textArea.style.padding = '12px';
    textArea.style.border = '1px solid #ccc';
    textArea.style.borderRadius = '6px';
    textArea.style.resize = 'vertical';
    textArea.style.display = 'none';
    textArea.style.boxSizing = 'border-box';
    textArea.readOnly = true;

    // Append all elements to main container
    container.appendChild(statusDiv);
    container.appendChild(searchContainer);
    container.appendChild(canvas);
    container.appendChild(textAreaLabel);
    container.appendChild(textArea);

    let ocrWords = [];

    // Helper to dynamically load Tesseract.js
    const loadTesseract = async () => {
        if (window.Tesseract) return;
        return 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);
        });
    };

    // Run the AI processing asynchronously
    setTimeout(async () => {
        try {
            await loadTesseract();
            statusDiv.textContent = 'AI is visually analyzing the image...';

            const result = await window.Tesseract.recognize(canvas, languages, {
                logger: m => {
                    if (m.status === 'recognizing text') {
                        const progress = Math.round(m.progress * 100);
                        statusDiv.textContent = `Analyzing image text: ${progress}%`;
                    } else if (m.status === 'loading language traineddata') {
                        statusDiv.textContent = 'Loading AI language models...';
                    }
                }
            });

            // Analysis complete, hide status and reveal results interface
            statusDiv.style.display = 'none';
            searchContainer.style.display = 'flex';
            textAreaLabel.style.display = 'block';
            textArea.style.display = 'block';
            
            // Set extracted text result
            textArea.value = result.data.text.trim() || 'No text found in the image.';
            
            // Save words details for the search function
            ocrWords = result.data.words;

        } catch (error) {
            statusDiv.textContent = 'Error during AI analysis: ' + error.message;
            statusDiv.style.backgroundColor = '#ffebee';
            statusDiv.style.color = '#c62828';
        }
    }, 100);

    // Filter and highlight text visually when user searches
    searchInput.addEventListener('input', (e) => {
        const query = e.target.value.toLowerCase().trim();
        
        // Reset Canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(originalImg, 0, 0);
        
        if (!query) {
            matchInfo.textContent = '';
            return;
        }

        let matchCount = 0;
        
        // Visual search highlight styling
        ctx.fillStyle = 'rgba(255, 235, 59, 0.45)'; // Semi-transparent yellow
        ctx.strokeStyle = '#f57f17'; // Darker orange border
        ctx.lineWidth = Math.max(2, canvas.width / 500); 

        ocrWords.forEach(w => {
            if (w.text.toLowerCase().includes(query)) {
                matchCount++;
                const { x0, y0, x1, y1 } = w.bbox;
                
                // Draw bounding boxes on found matching text
                ctx.fillRect(x0, y0, x1 - x0, y1 - y0);
                ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
            }
        });

        matchInfo.textContent = matchCount > 0 
            ? `Found ${matchCount} match${matchCount > 1 ? 'es' : ''}.` 
            : 'No matches found.';
    });

    return container;
}