Image Identifier And Language Alphabet Screenshot Tool

async function processImage(originalImg) {
    /**
     * Dynamically loads a script if it's not already on the page.
     * @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 (window.Tesseract && url.includes('tesseract')) {
                return resolve();
            }
            if (document.querySelector(`script[src="${url}"]`)) {
                // If another call is already loading it, wait for it to finish
                const existingScript = document.querySelector(`script[src="${url}"]`);
                if (existingScript.dataset.loading === 'true') {
                    existingScript.addEventListener('load', () => resolve());
                    existingScript.addEventListener('error', () => reject(new Error(`Failed to load script: ${url}`)));
                } else {
                    resolve(); // Already loaded
                }
                return;
            }
            
            const script = document.createElement('script');
            script.src = url;
            script.dataset.loading = 'true';
            script.onload = () => {
                script.dataset.loading = 'false';
                resolve();
            };
            script.onerror = () => {
                 script.dataset.loading = 'false';
                reject(new Error(`Failed to load script: ${url}`));
            };
            document.head.appendChild(script);
        });
    };

    /**
     * Maps a script name identified by Tesseract.js to a language code for recognition.
     * This is a simplified mapping; many scripts are used by multiple languages.
     * @param {string} script The script name (e.g., 'Latin', 'Cyrillic').
     * @returns {string|null} The corresponding language code or null if not found.
     */
    const getLangCodeFromScript = (script) => {
        const scriptToLangMap = {
            'Latin': 'eng', // English
            'Cyrillic': 'rus', // Russian
            'Arabic': 'ara', // Arabic
            'Devanagari': 'hin', // Hindi
            'Japanese': 'jpn', // Japanese
            'Korean': 'kor', // Korean
            'Hangul': 'kor', // Korean
            'Han': 'chi_sim', // Simplified Chinese
            'Hebrew': 'heb', // Hebrew
            'Greek': 'ell', // Greek
            'Thai': 'tha', // Thai
            'Vietnamese': 'vie' // Vietnamese
        };
        return scriptToLangMap[script] || null;
    };

    // Create a container for the results. This is returned immediately.
    const resultContainer = document.createElement('div');
    resultContainer.style.fontFamily = 'Arial, sans-serif';
    resultContainer.style.padding = '20px';
    resultContainer.style.border = '1px solid #ccc';
    resultContainer.style.borderRadius = '8px';
    resultContainer.style.backgroundColor = '#f9f9f9';
    resultContainer.style.maxWidth = '800px';
    resultContainer.style.color = '#333';
    
    // Display the original image for reference
    const previewImg = originalImg.cloneNode();
    previewImg.style.maxWidth = '100%';
    previewImg.style.maxHeight = '300px';
    previewImg.style.marginBottom = '15px';
    previewImg.style.border = '1px solid #ddd';
    previewImg.style.objectFit = 'contain';
    resultContainer.appendChild(previewImg);
    
    // Status element to show progress to the user
    const statusElement = document.createElement('p');
    statusElement.style.margin = '0';
    statusElement.style.padding = '10px';
    statusElement.style.backgroundColor = '#eef';
    statusElement.style.borderLeft = '4px solid #4a90e2';
    resultContainer.appendChild(statusElement);

    // This async IIFE runs the OCR process and updates the container's content.
    (async () => {
        try {
            statusElement.innerHTML = 'Loading OCR engine...';
            // Use Tesseract.js v5 for better performance and accuracy
            await loadScript('https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js');
            statusElement.innerHTML = 'OCR engine loaded. Creating worker...';

            const worker = await Tesseract.createWorker({
                logger: m => {
                    // Update status text based on Tesseract's logs
                    let progress = m.progress ? ` (${Math.round(m.progress * 100)}%)` : '';
                    let statusText = m.status.replace(/_/g, ' ');
                    statusElement.innerHTML = `Status: ${statusText}${progress}`;
                }
            });

            // Step 1: Detect the language script
            await worker.loadLanguage('osd'); // osd = Orientation and Script Detection
            await worker.initialize('osd');
            const { data: detectionData } = await worker.detect(originalImg);
            
            const infoDiv = document.createElement('div');
            infoDiv.style.marginTop = '15px';
            infoDiv.innerHTML = `
                <h3 style="margin-top: 0; border-bottom: 2px solid #4a90e2; padding-bottom: 5px;">Language Identification</h3>
                <p><strong>Detected Script:</strong> ${detectionData.script} (${detectionData.script_confidence.toFixed(2)}% confidence)</p>
            `;
            resultContainer.appendChild(infoDiv);

            // Step 2: Try to recognize text based on the detected script
            const langCode = getLangCodeFromScript(detectionData.script);
            if (langCode) {
                infoDiv.innerHTML += `<p><strong>Mapped Language for OCR:</strong> ${langCode}</p>`;
                
                await worker.loadLanguage(langCode);
                await worker.initialize(langCode);
                
                const { data: recognizeData } = await worker.recognize(originalImg);

                infoDiv.innerHTML += `<p><strong>Text Recognition Confidence:</strong> ${recognizeData.confidence.toFixed(2)}%</p>`;
                
                const ocrTitle = document.createElement('h3');
                ocrTitle.innerText = 'Recognized Text';
                ocrTitle.style.borderBottom = '2px solid #4a90e2';
                ocrTitle.style.paddingBottom = '5px';
                
                const textContainer = document.createElement('pre');
                textContainer.textContent = recognizeData.text || '(No text recognized)';
                textContainer.style.whiteSpace = 'pre-wrap';
                textContainer.style.wordWrap = 'break-word';
                textContainer.style.padding = '15px';
                textContainer.style.border = '1px dashed #999';
                textContainer.style.backgroundColor = '#fff';
                textContainer.style.maxHeight = '300px';
                textContainer.style.overflowY = 'auto';
                
                resultContainer.appendChild(ocrTitle);
                resultContainer.appendChild(textContainer);

            } else {
                infoDiv.innerHTML += `<p><strong>Unsupported Script:</strong> Could not map "${detectionData.script}" to a language for text recognition.</p>`;
            }

            // Clean up: remove the status element and terminate the worker
            statusElement.remove();
            await worker.terminate();

        } catch (error) {
            console.error('OCR Error:', error);
            statusElement.innerHTML = `<strong style="color: red;">An error occurred:</strong> ${error.message}`;
            statusElement.style.whiteSpace = 'pre-wrap';
            statusElement.style.borderLeftColor = 'red';
            statusElement.style.backgroundColor = '#fee';
        }
    })();

    return resultContainer;
}