Image Language Alphabet Identifier

/**
 * Identifies the language script (alphabet) used in an image using OCR.
 * This function utilizes the Tesseract.js library to perform Optical Character Recognition
 * and language detection directly in the browser.
 *
 * @param {Image} originalImg The original image object to be processed.
 * @returns {Promise<HTMLDivElement>} A promise that resolves to a div element containing the detected script name and confidence score.
 */
async function processImage(originalImg) {
    // URL for the Tesseract.js library from a CDN
    const TESSERACT_CDN_URL = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';

    // Create a container element to display progress and results
    const resultContainer = document.createElement('div');
    resultContainer.style.fontFamily = 'Arial, sans-serif';
    resultContainer.style.padding = '20px';
    resultContainer.style.textAlign = 'center';
    resultContainer.style.maxWidth = '400px';
    resultContainer.style.margin = 'auto';


    const statusElement = document.createElement('p');
    statusElement.innerText = 'Loading resources...';
    resultContainer.appendChild(statusElement);

    /**
     * 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 or rejects on error.
     */
    const loadScript = (url) => {
        return new Promise((resolve, reject) => {
            // Check if the script's global object already exists
            if (window.Tesseract) {
                return resolve();
            }
            const script = document.createElement('script');
            script.src = url;
            script.onload = () => resolve();
            script.onerror = () => reject(new Error('Failed to load Tesseract.js library from CDN.'));
            document.head.appendChild(script);
        });
    };

    let worker;

    try {
        // 1. Load the Tesseract.js library
        await loadScript(TESSERACT_CDN_URL);

        // 2. Initialize the Tesseract worker
        statusElement.innerText = 'Initializing OCR engine...';
        worker = await Tesseract.createWorker({
            logger: m => {
                // Provide real-time progress updates to the user
                let statusText = m.status.replace(/_/g, ' ');
                statusText = statusText.charAt(0).toUpperCase() + statusText.slice(1);
                if (m.progress) {
                    statusText += ` (${Math.round(m.progress * 100)}%)`;
                }
                statusElement.innerText = statusText;
            }
        });

        // 3. Perform language detection on the provided image
        const {
            data
        } = await worker.detect(originalImg);

        // 4. Format and display the results
        resultContainer.innerHTML = ''; // Clear status message

        if (data && data.script) {
            const title = document.createElement('h3');
            title.innerText = 'Detected Alphabet Information';
            title.style.margin = '0 0 15px 0';
            resultContainer.appendChild(title);

            const infoDiv = document.createElement('div');
            infoDiv.style.display = 'inline-block';
            infoDiv.style.textAlign = 'left';
            infoDiv.style.border = '1px solid #ccc';
            infoDiv.style.borderRadius = '8px';
            infoDiv.style.padding = '15px';
            infoDiv.style.backgroundColor = '#f9f9f9';

            infoDiv.innerHTML = `
                <p style="margin: 5px 0;"><strong>Script:</strong> ${data.script}</p>
                <p style="margin: 5px 0;"><strong>Confidence:</strong> ${data.confidence.toFixed(2)}%</p>
                ${data.orientation_degrees !== undefined ? `<p style="margin: 5px 0;"><strong>Orientation:</strong> ${data.orientation_degrees}°</p>` : ''}
            `;
            resultContainer.appendChild(infoDiv);

        } else {
            const noResultElement = document.createElement('p');
            noResultElement.innerText = 'Could not identify any specific language or script in the image.';
            resultContainer.appendChild(noResultElement);
        }

    } catch (error) {
        console.error('Image language detection error:', error);
        resultContainer.innerHTML = `<p style="color: red; font-weight: bold;">An error occurred:</p><p style="color: red;">${error.message}</p>`;
    } finally {
        // 5. Terminate the worker to free up system resources
        if (worker) {
            await worker.terminate();
        }
    }

    return resultContainer;
}