Image Language Identifier

async function processImage(originalImg) {
    /**
     * Dynamically loads a script into the document head.
     * @param {string} url The URL of the script to load.
     * @returns {Promise<void>} A promise that resolves when the script is loaded.
     */
    const loadScript = (url) => {
        return new Promise((resolve, reject) => {
            // Check if the script is already loaded
            if (document.querySelector(`script[src="${url}"]`)) {
                resolve();
                return;
            }
            const script = document.createElement('script');
            script.src = url;
            script.onload = () => resolve();
            script.onerror = (err) => reject(new Error(`Failed to load script: ${url}`));
            document.head.appendChild(script);
        });
    };

    // Create a container for the output
    const resultDiv = document.createElement('div');
    resultDiv.style.fontFamily = 'Arial, sans-serif';
    resultDiv.style.padding = '15px';
    resultDiv.style.border = '1px solid #ccc';
    resultDiv.style.borderRadius = '5px';
    resultDiv.style.maxWidth = '100%';
    resultDiv.style.boxSizing = 'border-box';

    const statusP = document.createElement('p');
    statusP.textContent = 'Initializing...';
    resultDiv.appendChild(statusP);

    try {
        // Step 1: Load the Tesseract.js OCR library
        statusP.textContent = 'Loading OCR engine...';
        await loadScript('https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js');

        // Step 2: Perform Optical Character Recognition (OCR) on the image
        statusP.textContent = 'Recognizing text in the image... (This may take a moment)';
        
        // Create a Tesseract worker
        const worker = await Tesseract.createWorker();
        
        // Recognize text from the image object
        const {
            data: {
                text
            }
        } = await worker.recognize(originalImg);
        
        // Terminate the worker to free up resources
        await worker.terminate();

        if (!text || text.trim().length < 3) {
            statusP.textContent = 'Could not detect sufficient text in the image.';
            return resultDiv;
        }

        // Step 3: Load language detection libraries (Franc and language data)
        statusP.textContent = 'Loading language detection libraries...';
        // Use dynamic import() for ES Modules
        const { franc } = await import('https://cdn.jsdelivr.net/npm/franc@6/+esm');
        const { langs } = await import('https://cdn.jsdelivr.net/npm/langs@2/+esm');
        
        // Step 4: Detect the language from the extracted text
        statusP.textContent = 'Detecting language...';
        const langCode = franc(text); // e.g., 'eng'

        // Step 5: Display the results
        resultDiv.innerHTML = ''; // Clear status message

        const title = document.createElement('h3');
        title.textContent = 'Language Identification Result';
        title.style.margin = '0 0 10px 0';
        resultDiv.appendChild(title);

        const langResult = document.createElement('p');
        if (langCode === 'und') { // 'und' means undetermined
             langResult.innerHTML = `<strong>Detected Language:</strong> Could not be determined.`;
        } else {
            const langData = langs[langCode]; // Get language details {name, local, 639-1, 639-2, ...}
            const langName = langData ? `${langData.name} (Code: ${langCode})` : `Unknown (Code: ${langCode})`;
            langResult.innerHTML = `<strong>Detected Language:</strong> ${langName}`;
        }
        langResult.style.margin = '0 0 15px 0';
        resultDiv.appendChild(langResult);
        
        const textHeader = document.createElement('h4');
        textHeader.textContent = 'Extracted Text:';
        textHeader.style.margin = '0 0 5px 0';
        resultDiv.appendChild(textHeader);

        const extractedTextP = document.createElement('p');
        extractedTextP.textContent = text;
        extractedTextP.style.whiteSpace = 'pre-wrap';
        extractedTextP.style.border = '1px dashed #ddd';
        extractedTextP.style.padding = '10px';
        extractedTextP.style.maxHeight = '250px';
        extractedTextP.style.overflowY = 'auto';
        extractedTextP.style.backgroundColor = '#f9f9f9';
        extractedTextP.style.margin = '0';
        resultDiv.appendChild(extractedTextP);

    } catch (error) {
        console.error('Error during image language identification:', error);
        statusP.textContent = `An error occurred: ${error.message}. Please check the console.`;
        statusP.style.color = 'red';
    }

    return resultDiv;
}