Movie Name Scanner From Image

async function processImage(originalImg, language = 'eng') {
    // Create a container to hold the UI
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.padding = '20px';
    container.style.backgroundColor = '#1e1e24';
    container.style.color = '#fff';
    container.style.borderRadius = '12px';
    container.style.boxShadow = '0px 8px 16px rgba(0,0,0,0.3)';
    container.style.maxWidth = '100%';

    // Canvas to draw and read the image
    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);

    canvas.style.maxWidth = '100%';
    canvas.style.maxHeight = '400px';
    canvas.style.objectFit = 'contain';
    canvas.style.borderRadius = '8px';
    canvas.style.border = '2px solid #444';
    container.appendChild(canvas);

    // Status label
    const statusLabel = document.createElement('div');
    statusLabel.innerText = "Loading Optical Character Recognition (OCR) Engine...";
    statusLabel.style.margin = '20px 0 10px 0';
    statusLabel.style.fontSize = '1.1em';
    statusLabel.style.fontWeight = '500';
    statusLabel.style.color = '#ffcc00';
    container.appendChild(statusLabel);

    // Progress Bar container
    const progressContainer = document.createElement('div');
    progressContainer.style.width = '100%';
    progressContainer.style.maxWidth = '500px';
    progressContainer.style.height = '10px';
    progressContainer.style.backgroundColor = '#444';
    progressContainer.style.borderRadius = '5px';
    progressContainer.style.overflow = 'hidden';
    progressContainer.style.marginBottom = '20px';

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

    // Result box
    const resultBox = document.createElement('div');
    resultBox.style.padding = '20px';
    resultBox.style.background = '#2b2b36';
    resultBox.style.border = '1px solid #555';
    resultBox.style.borderRadius = '8px';
    resultBox.style.width = '100%';
    resultBox.style.maxWidth = '500px';
    resultBox.style.minHeight = '60px';
    resultBox.style.whiteSpace = 'pre-wrap';
    resultBox.style.wordBreak = 'break-word';
    resultBox.style.fontSize = '1.2em';
    resultBox.style.textAlign = 'center';
    resultBox.style.color = '#eee';
    resultBox.innerText = "Waiting for scan...";
    container.appendChild(resultBox);

    // Helper to dynamically load Tesseract.js
    const loadTesseract = () => {
        return new Promise((resolve, reject) => {
            if (window.Tesseract) {
                resolve(window.Tesseract);
                return;
            }
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js';
            script.onload = () => resolve(window.Tesseract);
            script.onerror = () => reject(new Error('Failed to load Tesseract.js'));
            document.head.appendChild(script);
        });
    };

    // Helper to clean up OCR text to look more like movie titles
    const cleanMovieTitleText = (text) => {
        return text
            .split('\n')
            .map(line => line.trim())
            .filter(line => line.length > 2) // Remove small artifact lines
            .join('\n');
    };

    // Run recognition process asynchronously
    (async () => {
        try {
            const Tesseract = await loadTesseract();
            statusLabel.innerText = "Initializing Scanner...";

            const worker = await Tesseract.createWorker({
                logger: m => {
                    if (m.status === 'recognizing text') {
                        const pct = Math.round(m.progress * 100);
                        statusLabel.innerText = `Scanning for Movie Names: ${pct}%`;
                        progressBar.style.width = `${pct}%`;
                    } else {
                        statusLabel.innerText = m.status.charAt(0).toUpperCase() + m.status.slice(1) + "...";
                    }
                }
            });

            await worker.loadLanguage(language);
            await worker.initialize(language);

            // Pass canvas to tesseract
            const { data: { text } } = await worker.recognize(canvas);

            statusLabel.innerText = "Scan Complete";
            statusLabel.style.color = '#4ade80'; 
            progressBar.style.backgroundColor = '#4ade80';

            const cleanedText = cleanMovieTitleText(text);

            if (cleanedText) {
                resultBox.style.fontWeight = 'bold';
                resultBox.innerText = cleanedText;
            } else {
                resultBox.innerText = "No movie references or readable titles found in the image.";
            }

            await worker.terminate();
        } catch (error) {
            statusLabel.innerText = "Error scanning image.";
            statusLabel.style.color = '#ff6b6b';
            progressBar.style.backgroundColor = '#ff6b6b';
            resultBox.innerText = error.toString();
        }
    })();

    // Always return an element wrapper
    return container;
}