Image Text Finder Tool

function processImage(originalImg, language = 'eng+rus') {
    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';
    container.style.padding = '15px';
    container.style.backgroundColor = '#f9fafb';
    container.style.borderRadius = '8px';
    container.style.border = '1px solid #e5e7eb';
    container.style.boxShadow = '0 2px 4px rgba(0,0,0,0.05)';

    const header = document.createElement('div');
    header.style.display = 'flex';
    header.style.justifyContent = 'space-between';
    header.style.alignItems = 'center';
    
    const title = document.createElement('h3');
    title.textContent = 'Image Text Finder (OCR)';
    title.style.margin = '0';
    title.style.fontSize = '18px';
    title.style.color = '#111827';
    header.appendChild(title);

    const statusBadge = document.createElement('span');
    statusBadge.textContent = 'Preparing...';
    statusBadge.style.padding = '4px 10px';
    statusBadge.style.borderRadius = '12px';
    statusBadge.style.fontSize = '12px';
    statusBadge.style.fontWeight = '600';
    statusBadge.style.backgroundColor = '#fef3c7';
    statusBadge.style.color = '#92400e';
    header.appendChild(statusBadge);
    
    container.appendChild(header);
    
    const progressBarContainer = document.createElement('div');
    progressBarContainer.style.width = '100%';
    progressBarContainer.style.height = '6px';
    progressBarContainer.style.backgroundColor = '#e5e7eb';
    progressBarContainer.style.borderRadius = '3px';
    progressBarContainer.style.overflow = 'hidden';
    
    const progressBar = document.createElement('div');
    progressBar.style.width = '0%';
    progressBar.style.height = '100%';
    progressBar.style.backgroundColor = '#3b82f6';
    progressBar.style.transition = 'width 0.2s ease';
    progressBarContainer.appendChild(progressBar);
    container.appendChild(progressBarContainer);

    const contentDiv = document.createElement('div');
    contentDiv.style.display = 'flex';
    contentDiv.style.flexDirection = 'column';
    contentDiv.style.gap = '15px';
    
    const textArea = document.createElement('textarea');
    textArea.style.width = '100%';
    textArea.style.height = '150px';
    textArea.style.padding = '12px';
    textArea.style.boxSizing = 'border-box';
    textArea.style.border = '1px solid #d1d5db';
    textArea.style.borderRadius = '6px';
    textArea.style.fontSize = '14px';
    textArea.style.lineHeight = '1.5';
    textArea.style.resize = 'vertical';
    textArea.style.backgroundColor = '#f3f4f6';
    textArea.placeholder = 'Extracted text will appear here...';
    textArea.readOnly = true;
    contentDiv.appendChild(textArea);

    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 #d1d5db';
    canvas.style.borderRadius = '6px';
    canvas.style.backgroundColor = '#fff';
    canvas.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)';
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    contentDiv.appendChild(canvas);
    
    container.appendChild(contentDiv);

    // Initialise OCR process asynchronously to not block the main thread and UI
    (async () => {
        try {
            if (!window.Tesseract) {
                statusBadge.textContent = 'Loading Engine...';
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@4.1.2/dist/tesseract.min.js';
                    script.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);
                });
            }

            statusBadge.textContent = 'Initializing...';
            
            const worker = await Tesseract.createWorker({
                logger: m => {
                    if (m.status === 'recognizing text') {
                        const progress = Math.round(m.progress * 100);
                        statusBadge.textContent = `Recognizing: ${progress}%`;
                        progressBar.style.width = `${progress}%`;
                    } else if (m.status.includes('download')) {
                        statusBadge.textContent = 'Downloading language data...';
                    } else if (m.status.includes('load')) {
                        statusBadge.textContent = 'Loading...';
                    } else {
                        statusBadge.textContent = m.status;
                    }
                }
            });
            
            await worker.loadLanguage(language);
            await worker.initialize(language);
            
            const { data } = await worker.recognize(canvas);
            await worker.terminate();
            
            statusBadge.textContent = 'Completed!';
            statusBadge.style.backgroundColor = '#d1fae5';
            statusBadge.style.color = '#065f46';
            progressBar.style.width = '100%';
            progressBar.style.backgroundColor = '#10b981';
            
            const detectedText = data.text.trim();
            textArea.value = detectedText || 'No text found in the image.';
            textArea.style.backgroundColor = '#ffffff';
            textArea.readOnly = false; // Allow users to edit or copy easily
            
            // Highlight found words with bounding boxes
            if (data && data.words && data.words.length > 0) {
                ctx.lineWidth = Math.max(1, originalImg.width / 500);
                ctx.strokeStyle = '#ef4444'; // Red borders
                ctx.fillStyle = 'rgba(253, 224, 71, 0.3)'; // Yellow fill highlight
                
                for (const word of data.words) {
                    if (word && word.bbox) {
                        const { x0, y0, x1, y1 } = word.bbox;
                        const w = x1 - x0;
                        const h = y1 - y0;
                        ctx.fillRect(x0, y0, w, h);
                        ctx.strokeRect(x0, y0, w, h);
                    }
                }
            }
        } catch (err) {
            statusBadge.textContent = 'Error';
            statusBadge.style.backgroundColor = '#fee2e2';
            statusBadge.style.color = '#991b1b';
            textArea.value = `Error during OCR processing: ${err.message}`;
            progressBar.style.backgroundColor = '#ef4444';
            progressBar.style.width = '100%';
            console.error(err);
        }
    })();
    
    return container;
}