Movie Photo Studio Company And Year Extractor

function processImage(originalImg, language = 'eng') {
    // Create the main container
    const container = document.createElement('div');
    container.style.cssText = "font-family: system-ui, -apple-system, sans-serif; text-align: center; max-width: 600px; margin: 0 auto; padding: 20px; background: #fafafa; border-radius: 12px; border: 1px solid #ddd; box-shadow: 0 4px 15px rgba(0,0,0,0.05);";

    // Header
    const header = document.createElement('h2');
    header.textContent = "Movie Photo Studio & Year Extractor";
    header.style.cssText = "margin-top: 0; color: #333;";
    container.appendChild(header);

    // Display original image
    const imgElement = document.createElement('img');
    imgElement.src = originalImg.src;
    imgElement.style.cssText = "max-width: 100%; max-height: 400px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 20px;";
    container.appendChild(imgElement);

    // Info area
    const infoDiv = document.createElement('div');
    infoDiv.innerHTML = `
        <div style="display: flex; align-items: center; justify-content: center; gap: 10px; color: #666;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="animation: spin 2s linear infinite;"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>
            <p style="margin: 0; font-size: 16px;">Loading OCR Engine & Analysing. Please wait...</p>
            <style>@keyframes spin { 100% { transform: rotate(360deg); } }</style>
        </div>
    `;
    container.appendChild(infoDiv);

    // OCR function logic
    const performOCR = async () => {
        try {
            // Draw image to a canvas to ensure compatibility with Tesseract
            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
            const result = await Tesseract.recognize(canvas, language, {
                logger: m => {
                    if (m.status === 'recognizing text') {
                        infoDiv.innerHTML = `<p style="color:#555;">Analyzing text: ${Math.round(m.progress * 100)}%</p>`;
                    }
                }
            });

            const text = result.data.text;

            // 1. Extract Year (1890 - 2030)
            const yearMatch = text.match(/\b(189\d|19\d{2}|20[0-2]\d)\b/);
            const extractedYear = yearMatch ? yearMatch[0] : 'Unknown';

            // 2. Extract Studio / Company
            let extractedStudio = 'Unknown';
            const strictStudioRegex = /(20th Century Fox|Warner Bros|Universal(?: Pictures| Studios)?|Paramount(?: Pictures)?|Columbia Pictures|Walt Disney(?: Pictures| Studios)?|DreamWorks|Lionsgate|Metro-Goldwyn-Mayer|MGM|A24|Marvel Studios|Pixar|Lucasfilm|New Line Cinema|Tristar Pictures|Sony Pictures|Searchlight Pictures)/i;
            
            const strictMatch = text.match(strictStudioRegex);
            if (strictMatch) {
                // If a well-known studio is matched explicitly
                extractedStudio = strictMatch[1].replace(/\n/g, ' ').trim();
            } else {
                // Fallback: look for lines containing typical studio keywords
                const studioKeywords = ['studios', 'pictures', 'productions', 'entertainment', 'films'];
                const lines = text.split('\n');
                
                for (let line of lines) {
                    const lowerLine = line.toLowerCase();
                    if (studioKeywords.some(keyword => lowerLine.includes(keyword)) && line.length < 50) {
                        extractedStudio = line.trim();
                        break;
                    }
                }
            }

            // Display Results safely
            infoDiv.innerHTML = `
                <div style="background: #eef2ff; border: 1px solid #c7d2fe; padding: 20px; border-radius: 8px; text-align: left; display: inline-block; min-width: 250px;">
                    <div style="margin-bottom: 12px;">
                        <span style="font-size: 12px; font-weight: bold; text-transform: uppercase; color: #4f46e5;">Studio / Company</span><br>
                        <span style="font-size: 20px; color: #1e1b4b;">${extractedStudio}</span>
                    </div>
                    <div>
                        <span style="font-size: 12px; font-weight: bold; text-transform: uppercase; color: #4f46e5;">Release Year</span><br>
                        <span style="font-size: 20px; color: #1e1b4b;">${extractedYear}</span>
                    </div>
                </div>
            `;

        } catch (err) {
            infoDiv.innerHTML = `
                <div style="padding: 15px; border-radius: 8px; background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b;">
                    <p style="margin: 0; font-weight: bold;">Failed to extract information.</p>
                    <p style="margin: 5px 0 0 0; font-size: 14px;">This typically happens if the image is unreadable or restricted by browser CORS policies.</p>
                    <p style="margin: 5px 0 0 0; font-size: 12px; opacity: 0.8;">Error: ${err.message}</p>
                </div>
            `;
        }
    };

    // Dynamically load Tesseract.js if not already present
    if (window.Tesseract) {
        performOCR();
    } else {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
        script.onload = performOCR;
        script.onerror = () => {
            infoDiv.innerHTML = '<p style="color: red; font-weight: bold;">Error: Failed to load the OCR Engine (tesseract.js) from CDN.</p>';
        };
        document.head.appendChild(script);
    }

    // Immediately return the container. 
    // It will be updated asynchronously once the OCR runs.
    return container;
}