Image Translator Identifier

/**
 * Analyzes an image to identify the script of the text it contains.
 * This function uses the Tesseract.js library to perform Optical Script Recognition.
 * It dynamically loads the library if it's not already available.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @returns {Promise<HTMLDivElement>} A promise that resolves to a div element containing the original image and the detection results.
 */
async function processImage(originalImg) {
    // Create a container element to hold the output
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.textAlign = 'center';
    container.style.padding = '10px';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '8px';
    container.style.display = 'inline-block';

    // Create a canvas to display the image. Using a canvas is necessary for Tesseract.js.
    const canvas = document.createElement('canvas');
    // To avoid issues with high-resolution displays, we set the canvas dimensions explicitly.
    const maxWidth = 500;
    const scale = Math.min(1, maxWidth / originalImg.naturalWidth);
    canvas.width = originalImg.naturalWidth * scale;
    canvas.height = originalImg.naturalHeight * scale;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    container.appendChild(canvas);

    // Create a div to display status messages and the final result
    const resultDiv = document.createElement('div');
    resultDiv.style.marginTop = '15px';
    resultDiv.style.fontSize = '1em';
    resultDiv.innerHTML = 'Initializing...';
    container.appendChild(resultDiv);

    // Dynamically load the Tesseract.js library if it's not already on the page
    if (typeof Tesseract === 'undefined') {
        resultDiv.textContent = 'Loading OCR Engine...';
        await new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }

    let worker;
    try {
        // Create a Tesseract worker. The logger provides real-time feedback to the user.
        worker = await Tesseract.createWorker({
            logger: m => {
                let statusText = m.status.replace(/_/g, ' '); // Make status more readable
                statusText = statusText.charAt(0).toUpperCase() + statusText.slice(1);
                if (m.progress) {
                    statusText += ` (${Math.round(m.progress * 100)}%)`;
                }
                resultDiv.innerHTML = `<i>${statusText}...</i>`;
            }
        });

        // Use Tesseract's 'detect' method to identify the script
        const {
            data
        } = await worker.detect(canvas);

        // Display the results
        if (data && data.script) {
            resultDiv.innerHTML = `
                <div style="text-align: left; display: inline-block;">
                    <p style="margin: 5px 0;"><strong>Detected Script:</strong> ${data.script}</p>
                    <p style="margin: 5px 0;"><strong>Confidence:</strong> ${data.confidence.toFixed(2)}%</p>
                </div>
                <p style="font-size: 0.8em; color: #666; margin-top: 10px;">
                    Note: This identifies the writing system (e.g., Latin, Cyrillic), not a specific language (e.g., English, Russian).
                </p>
            `;
        } else {
            resultDiv.textContent = 'Could not detect any script in the image.';
        }

    } catch (error) {
        console.error('Script detection error:', error);
        resultDiv.innerHTML = '<span style="color: red;">An error occurred during script detection. Please check the console for details.</span>';
    } finally {
        // Terminate the worker to free up resources
        if (worker) {
            await worker.terminate();
        }
    }

    return container;
}