Image Language Identification Tool

async function processImage(originalImg) {
    /**
     * Dynamically loads a script and returns a promise that resolves when the script is loaded.
     * Prevents re-loading the same script if called multiple times.
     * @param {string} src The URL of the script to load.
     * @returns {Promise<void>}
     */
    const loadScript = (src) => {
        return new Promise((resolve, reject) => {
            // Check if the script's global object (Tesseract) is already available
            if (window.Tesseract) {
                return resolve();
            }
            // Check if the script tag is already in the DOM
            let script = document.querySelector(`script[src="${src}"]`);
            if (!script) {
                script = document.createElement('script');
                script.src = src;
                document.head.appendChild(script);
            }
            
            script.addEventListener('load', () => resolve());
            script.addEventListener('error', () => reject(new Error(`Failed to load script: ${src}`)));
        });
    };

    // Create a container for the output, including progress updates
    const resultContainer = document.createElement('div');
    resultContainer.style.fontFamily = 'Arial, sans-serif';
    resultContainer.style.padding = '20px';
    resultContainer.style.border = '1px solid #ddd';
    resultContainer.style.borderRadius = '8px';
    resultContainer.style.textAlign = 'center';
    resultContainer.style.maxWidth = '100%';
    resultContainer.style.boxSizing = 'border-box';


    const statusP = document.createElement('p');
    statusP.textContent = 'Initializing language identification engine...';
    resultContainer.appendChild(statusP);

    try {
        // 1. Dynamically load the Tesseract.js library from a CDN
        await loadScript('https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js');

        // 2. Define the set of languages to detect and a map for user-friendly names.
        // This is a trade-off: more languages provide better coverage but increase initial load time.
        const languages = 'eng+chi_sim+jpn+kor+fra+deu+spa+rus+hin+ara';
        const langNameMap = {
            eng: 'English',
            chi_sim: 'Chinese (Simplified)',
            jpn: 'Japanese',
            kor: 'Korean',
            fra: 'French',
            deu: 'German',
            spa: 'Spanish',
            rus: 'Russian',
            hin: 'Hindi',
            ara: 'Arabic',
        };

        // 3. Create a Tesseract worker. The logger provides real-time progress updates.
        statusP.textContent = 'Preparing OCR worker... (This may take a moment on first run)';
        const worker = await Tesseract.createWorker(languages, 1, {
            logger: m => {
                if (m.status === 'recognizing text') {
                    const progress = (m.progress * 100).toFixed(1);
                    statusP.textContent = `Analyzing Image: ${progress}%`;
                } else if(m.status === 'loading language model') {
                    statusP.textContent = 'Loading language data...';
                }
                 else {
                    statusP.textContent = `Status: ${m.status.replace(/_/g, ' ')}`;
                }
            },
        });

        // 4. Perform OCR and language detection on the input image
        const { data } = await worker.recognize(originalImg);
        
        // 5. Terminate the worker to release resources
        await worker.terminate();

        // 6. Format the results for display
        const detectedLangCode = data.lang;
        const detectedLangName = langNameMap[detectedLangCode] || `Unknown (${detectedLangCode})`;
        const confidence = data.confidence;
        
        // Clear the status message and build the final output
        resultContainer.innerHTML = ''; 

        const title = document.createElement('h3');
        title.textContent = `Detected Language: ${detectedLangName}`;
        title.style.marginBottom = '8px';
        title.style.color = '#333';

        const confidenceP = document.createElement('p');
        confidenceP.textContent = `Confidence: ${confidence.toFixed(2)}%`;
        confidenceP.style.margin = '0 0 20px 0';
        confidenceP.style.color = '#666';
        confidenceP.style.fontSize = '0.9em';

        const textHeader = document.createElement('p');
        textHeader.innerHTML = '<strong>Extracted Text:</strong>';
        textHeader.style.textAlign = 'left';
        textHeader.style.margin = '15px 0 5px 0';

        const textPreview = document.createElement('pre');
        textPreview.textContent = data.text.trim() || '(No text detected)';
        textPreview.style.whiteSpace = 'pre-wrap';
        textPreview.style.wordWrap = 'break-word';
        textPreview.style.padding = '12px';
        textPreview.style.border = '1px solid #ccc';
        textPreview.style.borderRadius = '4px';
        textPreview.style.backgroundColor = '#f9f9f9';
        textPreview.style.maxHeight = '250px';
        textPreview.style.overflowY = 'auto';
        textPreview.style.textAlign = 'left';
        textPreview.style.fontFamily = 'monospace';

        resultContainer.appendChild(title);
        resultContainer.appendChild(confidenceP);
        resultContainer.appendChild(textHeader);
        resultContainer.appendChild(textPreview);

    } catch (error) {
        console.error('Image language identification failed:', error);
        statusP.textContent = `An error occurred: ${error.message || 'Please try again.'}`;
        statusP.style.color = 'red';
    }

    // 7. Return the self-contained result element
    return resultContainer;
}