Image Information Extractor For Movie Details

function processImage(originalImg, language = 'eng') {
    // Create main container
    const wrapper = document.createElement('div');
    wrapper.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
    wrapper.style.maxWidth = '800px';
    wrapper.style.margin = '0 auto';
    wrapper.style.padding = '24px';
    wrapper.style.boxSizing = 'border-box';
    wrapper.style.backgroundColor = '#ffffff';
    wrapper.style.borderRadius = '12px';
    wrapper.style.boxShadow = '0 8px 24px rgba(0,0,0,0.12)';
    wrapper.style.color = '#333';

    // Header
    const header = document.createElement('h2');
    header.textContent = 'Movie Details Extractor';
    header.style.textAlign = 'center';
    header.style.marginTop = '0';
    header.style.marginBottom = '20px';
    wrapper.appendChild(header);

    // Canvas for Preview
    const canvas = document.createElement('canvas');
    canvas.style.width = '100%';
    canvas.style.maxHeight = '350px';
    canvas.style.objectFit = 'contain';
    canvas.style.borderRadius = '8px';
    canvas.style.marginBottom = '20px';
    canvas.style.backgroundColor = '#f1f3f5';
    
    // Draw original image on canvas
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    ctx.drawImage(originalImg, 0, 0);
    wrapper.appendChild(canvas);

    // Initial Loading Status Area
    const statusArea = document.createElement('div');
    statusArea.style.padding = '16px';
    statusArea.style.backgroundColor = '#f8f9fa';
    statusArea.style.borderRadius = '8px';
    statusArea.style.border = '1px solid #dee2e6';
    
    const statusText = document.createElement('div');
    statusText.textContent = 'Initializing Optical Character Recognition (OCR)...';
    statusText.style.fontWeight = '600';
    statusText.style.color = '#0d6efd';
    statusText.style.marginBottom = '12px';
    statusArea.appendChild(statusText);

    // Progress bar
    const progressContainer = document.createElement('div');
    progressContainer.style.width = '100%';
    progressContainer.style.height = '12px';
    progressContainer.style.backgroundColor = '#e9ecef';
    progressContainer.style.borderRadius = '6px';
    progressContainer.style.overflow = 'hidden';
    
    const progressBar = document.createElement('div');
    progressBar.style.width = '0%';
    progressBar.style.height = '100%';
    progressBar.style.backgroundColor = '#0d6efd';
    progressBar.style.transition = 'width 0.2s linear';
    progressContainer.appendChild(progressBar);
    statusArea.appendChild(progressContainer);

    wrapper.appendChild(statusArea);

    // Result Output Area (Hidden initially)
    const resultArea = document.createElement('div');
    resultArea.style.display = 'none';
    resultArea.style.marginTop = '20px';
    wrapper.appendChild(resultArea);

    // Extract details visually through badges
    const createBadge = (label, val) => {
        const badge = document.createElement('div');
        badge.style.padding = '8px 16px';
        badge.style.backgroundColor = '#e9ecef';
        badge.style.borderRadius = '6px';
        badge.style.fontSize = '14px';
        badge.style.border = '1px solid #ced4da';
        badge.innerHTML = `<strong style="color:#495057;">${label}:</strong> <span style="color:#212529">${val}</span>`;
        return badge;
    };

    // Execute Tesseract OCR processing asynchronously
    const executeExtraction = async () => {
        try {
            // Dynamically import Tesseract.js if not available
            if (!window.Tesseract) {
                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.crossOrigin = 'anonymous';
                    script.onload = () => resolve();
                    script.onerror = () => reject(new Error('Failed to load Tesseract.js'));
                    document.head.appendChild(script);
                });
            }

            statusText.textContent = 'Analyzing image...';

            const { data: { text } } = await Tesseract.recognize(originalImg, language, {
                logger: m => {
                    if (m.status === 'recognizing text') {
                        const progress = Math.round(m.progress * 100);
                        progressBar.style.width = `${progress}%`;
                        statusText.textContent = `Extracting movie details... ${progress}%`;
                    } else {
                        statusText.textContent = `Status: ${m.status}...`;
                    }
                }
            });

            // Hide loading area, show results
            statusArea.style.display = 'none';
            resultArea.style.display = 'block';

            // Attempt to parse standard movie details (Year, Runtime, Rating)
            const parsedData = {
                year: 'Unknown',
                rating: 'Unknown',
                runtime: 'Unknown'
            };

            const yearMatch = text.match(/\b(19\d{2}|20\d{2})\b/);
            if (yearMatch) parsedData.year = yearMatch[1];
            
            const runtimeMatch = text.match(/\b(\d{1,2}\s*h(ours?)?(\s*\d{1,2}\s*m(in(ute)?)?s?)?|\d{2,3}\s*m(in(ute)?)?s?)\b/i);
            if (runtimeMatch) parsedData.runtime = runtimeMatch[0];

            const ratingMatch = text.match(/\b(G|PG|PG-13|R|NC-17|TV-Y|TV-Y7|TV-G|TV-PG|TV-14|TV-MA|NR)\b/);
            if (ratingMatch) parsedData.rating = ratingMatch[1];

            // Render Parsed Data
            const parseSection = document.createElement('div');
            parseSection.style.display = 'flex';
            parseSection.style.gap = '12px';
            parseSection.style.flexWrap = 'wrap';
            parseSection.style.marginBottom = '20px';

            parseSection.appendChild(createBadge('Release Year', parsedData.year));
            parseSection.appendChild(createBadge('Rating', parsedData.rating));
            parseSection.appendChild(createBadge('Runtime', parsedData.runtime));
            
            resultArea.appendChild(parseSection);

            // Render Raw Extracted Text
            const resultTitle = document.createElement('h3');
            resultTitle.textContent = 'Raw Extracted Text (Metadata):';
            resultTitle.style.marginTop = '0';
            resultTitle.style.fontSize = '16px';
            resultTitle.style.marginBottom = '10px';
            resultArea.appendChild(resultTitle);

            const textArea = document.createElement('textarea');
            textArea.value = text.trim() || 'No detectable text found in the image.';
            textArea.readOnly = true;
            textArea.style.width = '100%';
            textArea.style.height = '140px';
            textArea.style.padding = '12px';
            textArea.style.boxSizing = 'border-box';
            textArea.style.borderRadius = '6px';
            textArea.style.border = '1px solid #ced4da';
            textArea.style.fontFamily = 'Consolas, Monaco, "Courier New", monospace';
            textArea.style.fontSize = '14px';
            textArea.style.resize = 'vertical';
            textArea.style.backgroundColor = '#f8f9fa';
            resultArea.appendChild(textArea);

            // Basic Image info box
            const infoBox = document.createElement('div');
            infoBox.style.marginTop = '15px';
            infoBox.style.fontSize = '13px';
            infoBox.style.color = '#6c757d';
            infoBox.innerHTML = `<strong>Image Properties:</strong> ${originalImg.width} x ${originalImg.height} pixels`;
            resultArea.appendChild(infoBox);

        } catch (error) {
            statusText.textContent = 'Error extracting details.';
            statusText.style.color = '#dc3545';
            progressBar.style.backgroundColor = '#dc3545';
            
            const errDiv = document.createElement('div');
            errDiv.textContent = error.message || 'An unknown error occurred.';
            errDiv.style.color = '#dc3545';
            errDiv.style.fontWeight = '500';
            errDiv.style.fontSize = '14px';
            errDiv.style.marginTop = '12px';
            statusArea.appendChild(errDiv);
        }
    };

    // Begin extracting immediately
    executeExtraction();

    return wrapper;
}