Text Extraction From Pixar Animation Credits Image

async function processImage(originalImg, language = 'eng') {
    // Create a container to hold the extracted text and loading state
    const container = document.createElement('div');
    container.style.padding = '20px';
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '8px';
    container.style.backgroundColor = '#f9f9f9';
    container.style.color = '#333';
    container.style.maxWidth = '100%';
    container.style.boxSizing = 'border-box';

    // Create a status/loading indicator
    const statusText = document.createElement('div');
    statusText.innerText = 'Initializing optical character recognition (OCR)...';
    statusText.style.fontWeight = 'bold';
    statusText.style.marginBottom = '10px';
    container.appendChild(statusText);

    // Progress bar container
    const progressContainer = document.createElement('div');
    progressContainer.style.width = '100%';
    progressContainer.style.backgroundColor = '#ddd';
    progressContainer.style.borderRadius = '4px';
    progressContainer.style.height = '20px';
    progressContainer.style.marginBottom = '15px';
    progressContainer.style.overflow = 'hidden';

    const progressBar = document.createElement('div');
    progressBar.style.width = '0%';
    progressBar.style.height = '100%';
    progressBar.style.backgroundColor = '#4caf50';
    progressBar.style.transition = 'width 0.2s';
    progressContainer.appendChild(progressBar);
    
    container.appendChild(progressContainer);

    try {
        // Dynamically load Tesseract.js if it's not already available
        if (typeof Tesseract === 'undefined') {
            await new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@4.1.4/dist/tesseract.min.js';
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }

        // Draw the image onto a canvas to ensure it's in a format Tesseract easily handles
        const canvas = document.createElement('canvas');
        canvas.width = originalImg.naturalWidth || originalImg.width;
        canvas.height = originalImg.naturalHeight || originalImg.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(originalImg, 0, 0);

        // Run Tesseract.js to extract text
        const result = await Tesseract.recognize(canvas, language, {
            logger: m => {
                if (m.status === 'recognizing text') {
                    statusText.innerText = `Extracting text... ${Math.round(m.progress * 100)}%`;
                    progressBar.style.width = `${m.progress * 100}%`;
                } else {
                    statusText.innerText = `Status: ${m.status}...`;
                }
            }
        });

        // Clear the loading UI
        container.innerHTML = '';

        // Add a title
        const header = document.createElement('h3');
        header.innerText = 'Extracted Text';
        header.style.marginTop = '0';
        header.style.marginBottom = '10px';
        container.appendChild(header);

        // Display the extracted text
        const textOutput = document.createElement('pre');
        textOutput.style.padding = '15px';
        textOutput.style.backgroundColor = '#fff';
        textOutput.style.border = '1px solid #ccc';
        textOutput.style.borderRadius = '4px';
        textOutput.style.whiteSpace = 'pre-wrap';
        textOutput.style.wordWrap = 'break-word';
        textOutput.style.fontFamily = 'monospace';
        textOutput.style.fontSize = '14px';
        textOutput.style.color = '#111';
        textOutput.style.minHeight = '60px';
        
        textOutput.innerText = result.data.text.trim() || 'No text found in the image.';
        container.appendChild(textOutput);

    } catch (error) {
        // Handle any errors gracefully
        container.innerHTML = '';
        const errorMessage = document.createElement('div');
        errorMessage.style.color = '#d32f2f';
        errorMessage.style.fontWeight = 'bold';
        errorMessage.innerText = 'Error occurred during text extraction: ' + error.message;
        container.appendChild(errorMessage);
    }

    return container;
}