Movie Studio Film Company Year Scanner

function processImage(originalImg, languages = "eng+rus") {
    // Escape HTML tool to prevent injection from OCR text
    function escapeHtml(str) {
        if (!str) return "";
        return str
            .replace(/&/g, "&")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");
    }

    // Main container
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.background = '#1e1e1e';
    container.style.color = '#fff';
    container.style.borderRadius = '8px';
    container.style.overflow = 'hidden';
    container.style.boxShadow = '0 4px 12px rgba(0,0,0,0.5)';
    container.style.maxWidth = '600px';
    container.style.margin = '0 auto';
    container.style.position = 'relative';

    // Top: Image display
    const imgWrapper = document.createElement('div');
    imgWrapper.style.backgroundColor = '#000';
    imgWrapper.style.display = 'flex';
    imgWrapper.style.justifyContent = 'center';
    imgWrapper.style.borderBottom = '1px solid #333';
    
    const cloneImg = new Image();
    cloneImg.src = originalImg.src;
    cloneImg.style.display = 'block';
    cloneImg.style.maxWidth = '100%';
    cloneImg.style.maxHeight = '350px';
    cloneImg.style.objectFit = 'contain';
    imgWrapper.appendChild(cloneImg);
    container.appendChild(imgWrapper);

    // Bottom: Results panel
    const resultsPanel = document.createElement('div');
    resultsPanel.style.padding = '20px';
    container.appendChild(resultsPanel);

    // Initial Loading State
    resultsPanel.innerHTML = `
        <div style="display: flex; align-items: center; gap: 12px;">
            <div class="ocr-loader" style="width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: ocr-spin 1s ease-in-out infinite;"></div>
            <h3 style="margin: 0; font-size: 16px; font-weight: 500;">Scanning for Studio and Year...</h3>
        </div>
        <style>
            @keyframes ocr-spin { to { transform: rotate(360deg); } }
        </style>
    `;

    // Dynamically load Tesseract.js
    const loadTesseract = () => new Promise((resolve, reject) => {
        if (window.Tesseract) {
            resolve(window.Tesseract);
        } else {
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
            script.onload = () => resolve(window.Tesseract);
            script.onerror = () => reject(new Error("Failed to load Tesseract.js library from CDN."));
            document.head.appendChild(script);
        }
    });

    // Start background processing
    (async () => {
        try {
            const Tesseract = await loadTesseract();
            
            // Output status updates
            const worker = await Tesseract.createWorker(languages);
            
            // Execute OCR recognition
            const ret = await worker.recognize(originalImg);
            await worker.terminate();
            
            const text = ret.data.text || "";
            
            // Extract the attributes from the OCR result
            const lines = text.split('\n').map(l => l.trim()).filter(l => l.length > 0);
            let detectedYear = "Not found";
            let detectedStudio = "Not found";

            // Find Year (between 1800 and 2099)
            const yearMatch = text.match(/\b(18\d{2}|19\d{2}|20\d{2})\b/);
            if (yearMatch) {
                detectedYear = yearMatch[1];
            }

            // Find Studio/Company Keywords (English & Russian equivalents)
            const studioKeywords = /(studio|pictures|productions|company|bros|brother|entertainment|films|television|inc\b|llc|ltd|студия|кинокомпания|фильм|продакшн|пикчерз)/i;
            for (let line of lines) {
                if (studioKeywords.test(line)) {
                    detectedStudio = line;
                    break;
                }
            }

            // Fallback: If no keyword is found, make an educated guess using the first line
            if (detectedStudio === "Not found" && lines.length > 0) {
                detectedStudio = lines[0] + " (Guess)";
            }

            // Prepare safe output text
            const cleanRawText = escapeHtml(text);
            const safeYear = escapeHtml(detectedYear);
            const safeStudio = escapeHtml(detectedStudio);

            // Render final result
            resultsPanel.innerHTML = `
                <h3 style="margin: 0 0 15px 0; color: #4CAF50; font-size: 18px; display: flex; align-items: center; gap: 8px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                    Scan Complete
                </h3>
                <div style="background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 15px;">
                    <div style="display: flex; flex-direction: column; gap: 12px;">
                        <div>
                            <span style="color: #aaa; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600;">Detected Year</span>
                            <div style="font-size: 22px; font-weight: bold; margin-top: 2px;">${safeYear}</div>
                        </div>
                        <div>
                            <span style="color: #aaa; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600;">Detected Studio / Company</span>
                            <div style="font-size: 17px; font-weight: bold; margin-top: 2px; color: #64B5F6;">${safeStudio}</div>
                        </div>
                    </div>
                    <hr style="border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 15px 0;">
                    <div>
                        <span style="color: #aaa; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600;">Raw Read Text</span>
                        <div style="font-size: 13px; margin-top: 6px; color: #ccc; white-space: pre-wrap; font-family: monospace; background: rgba(0,0,0,0.4); padding: 10px; border-radius: 4px; max-height: 150px; overflow-y: auto;">${cleanRawText || "No text detected."}</div>
                    </div>
                </div>
            `;

        } catch (err) {
            resultsPanel.innerHTML = `
                <div style="color: #f44336; border: 1px solid rgba(244, 67, 54, 0.3); background: rgba(244, 67, 54, 0.1); padding: 15px; border-radius: 6px;">
                    <h3 style="margin: 0 0 8px 0; font-size: 16px; display: flex; align-items: center; gap: 6px;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                        Error Scanning Image
                    </h3>
                    <p style="margin: 0; font-size: 14px; color: #ffcdd2;">${escapeHtml(err.message)}</p>
                </div>
            `;
        }
    })();

    return container;
}