Image Scanner Language Finder

function processImage(originalImg) {
    const container = document.createElement('div');
    container.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.maxWidth = '450px';
    container.style.margin = '0 auto';
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '12px';
    container.style.overflow = 'hidden';
    container.style.boxShadow = '0 6px 12px rgba(0,0,0,0.08)';
    container.style.backgroundColor = '#ffffff';

    const header = document.createElement('div');
    header.style.backgroundColor = '#f8f9fa';
    header.style.padding = '16px';
    header.style.borderBottom = '1px solid #e0e0e0';
    header.style.textAlign = 'center';
    
    const title = document.createElement('h3');
    title.textContent = 'Scanner Language Finder';
    title.style.margin = '0';
    title.style.color = '#333';
    title.style.fontSize = '18px';
    header.appendChild(title);
    container.appendChild(header);

    const imgContainer = document.createElement('div');
    imgContainer.style.width = '100%';
    imgContainer.style.backgroundColor = '#ededed';
    imgContainer.style.display = 'flex';
    imgContainer.style.justifyContent = 'center';
    imgContainer.style.alignItems = 'center';
    imgContainer.style.minHeight = '150px';
    imgContainer.style.padding = '15px';
    imgContainer.style.boxSizing = 'border-box';

    const displayImg = document.createElement('img');
    displayImg.src = originalImg.src;
    displayImg.style.maxWidth = '100%';
    displayImg.style.maxHeight = '250px';
    displayImg.style.borderRadius = '4px';
    displayImg.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
    imgContainer.appendChild(displayImg);
    container.appendChild(imgContainer);

    const content = document.createElement('div');
    content.style.padding = '20px';
    container.appendChild(content);

    const statusP = document.createElement('p');
    statusP.textContent = 'Loading detection engine...';
    statusP.style.color = '#0066cc';
    statusP.style.fontSize = '14px';
    statusP.style.textAlign = 'center';
    statusP.style.fontWeight = '500';
    statusP.style.margin = '0';
    content.appendChild(statusP);

    const loadScript = (url) => new Promise((resolve, reject) => {
        if (window.Tesseract) return resolve();
        const script = document.createElement('script');
        script.src = url;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });

    const run = async () => {
        try {
            await loadScript('https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js');

            const canvas = document.createElement('canvas');
            canvas.width = originalImg.naturalWidth || originalImg.width;
            canvas.height = originalImg.naturalHeight || originalImg.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(originalImg, 0, 0);

            statusP.textContent = 'Initializing worker...';

            let worker;
            try {
                // Attempt to use V5 Syntax
                worker = await Tesseract.createWorker('osd', 1, {
                    logger: m => {
                        if (m.status) {
                            const progress = m.progress ? ` (${(m.progress * 100).toFixed(0)}%)` : '';
                            statusP.textContent = `${m.status}${progress}`;
                        }
                    }
                });
                if (typeof worker.detect !== 'function') throw new Error('v4 fallback');
            } catch (e) {
                // Fallback to V4 Syntax
                worker = await Tesseract.createWorker({
                    logger: m => {
                        if (m.status) {
                            const progress = m.progress ? ` (${(m.progress * 100).toFixed(0)}%)` : '';
                            statusP.textContent = `${m.status}${progress}`;
                        }
                    }
                });
                await worker.loadLanguage('osd');
                await worker.initialize('osd');
            }

            statusP.textContent = 'Detecting script and orientation...';

            const { data } = await worker.detect(canvas);
            await worker.terminate();

            content.innerHTML = '';

            const createRow = (label, value) => {
                const row = document.createElement('div');
                row.style.display = 'flex';
                row.style.justifyContent = 'space-between';
                row.style.padding = '10px 0';
                row.style.borderBottom = '1px solid #f0f0f0';
                
                const labelEl = document.createElement('span');
                labelEl.textContent = label;
                labelEl.style.color = '#555';
                labelEl.style.fontSize = '14px';
                
                const valEl = document.createElement('span');
                valEl.textContent = value;
                valEl.style.color = '#111';
                valEl.style.fontWeight = '600';
                valEl.style.fontSize = '14px';

                row.appendChild(labelEl);
                row.appendChild(valEl);
                return row;
            };

            const formatPercent = (val) => {
                if (val === null || val === undefined) return 'N/A';
                const num = Number(val);
                return isNaN(num) ? val : `${num.toFixed(2)}%`;
            };

            if (data && data.script) {
                content.appendChild(createRow('Detected Script', data.script));
                content.appendChild(createRow('Script Confidence', formatPercent(data.script_conf)));
                content.appendChild(createRow('Text Orientation', `${data.orientation_degrees ?? 0}°`));
                content.appendChild(createRow('Orientation Confidence', formatPercent(data.orientation_conf)));
            } else {
                throw new Error("Could not detect any text script in this scan.");
            }

        } catch (err) {
            content.innerHTML = '';
            const errorMsg = document.createElement('div');
            errorMsg.textContent = `Error: ${err.message || 'Analysis failed. Please try a clearer scanned image.'}`;
            errorMsg.style.color = '#d32f2f';
            errorMsg.style.backgroundColor = '#ffebee';
            errorMsg.style.padding = '12px';
            errorMsg.style.borderRadius = '6px';
            errorMsg.style.fontSize = '14px';
            errorMsg.style.textAlign = 'center';
            content.appendChild(errorMsg);
        }
    };

    if (originalImg.complete) {
        run();
    } else {
        originalImg.addEventListener('load', run);
    }

    return container;
}