Movie Studio Name And Year Image Scanner Identifier

async function processImage(originalImg, studioKeywords = "Warner Bros, Universal, Paramount, 20th Century, Disney, Columbia, Metro-Goldwyn-Mayer, MGM, DreamWorks, Lionsgate, Pixar, Marvel, Lucasfilm, New Line Cinema, TriStar, Miramax, Touchstone, Orion, A24, Legendary, Amblin, Focus Features, Searchlight, RKO, United Artists, Castle Rock, Studio Ghibli, Illumination, Sony Pictures, Regency") {
    
    // Create the main container div
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.fontFamily = 'system-ui, -apple-system, Arial, sans-serif';
    container.style.width = '100%';
    container.style.maxWidth = '800px';
    container.style.boxSizing = 'border-box';
    container.style.margin = '0 auto';

    // Draw the image onto a canvas
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    // Style the canvas for display
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.border = '1px solid #ccc';
    canvas.style.borderRadius = '8px';
    canvas.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
    container.appendChild(canvas);

    // Create a loading state text
    const statusText = document.createElement('div');
    statusText.style.marginTop = '20px';
    statusText.style.padding = '10px 20px';
    statusText.style.backgroundColor = '#e7f3fe';
    statusText.style.color = '#00529b';
    statusText.style.borderRadius = '20px';
    statusText.style.fontSize = '14px';
    statusText.innerHTML = '<strong>⏳ Scanning...</strong> Analyzing image for text and studio identifiers.';
    container.appendChild(statusText);

    // Create a results container (hidden initially)
    const resultsContainer = document.createElement('div');
    resultsContainer.style.width = '100%';
    resultsContainer.style.marginTop = '20px';
    resultsContainer.style.padding = '20px';
    resultsContainer.style.backgroundColor = '#f8f9fa';
    resultsContainer.style.border = '1px solid #e9ecef';
    resultsContainer.style.borderRadius = '8px';
    resultsContainer.style.boxSizing = 'border-box';
    
    // Dynamically load Tesseract.js if not already present
    await new Promise((resolve, reject) => {
        if (window.Tesseract) {
            resolve();
        } else {
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
            script.onload = resolve;
            script.onerror = () => reject(new Error("Failed to load OCR Engine."));
            document.head.appendChild(script);
        }
    });

    try {
        // Run OCR on the image canvas
        const { data: { text } } = await window.Tesseract.recognize(canvas, 'eng');
        
        // Remove the scanning status text
        if (statusText.parentNode === container) {
            container.removeChild(statusText);
        }

        // Parse Studios
        const parsedStudios = studioKeywords
            .split(',')
            .map(s => s.trim())
            .filter(s => s.length > 0);
            
        const detectedStudios = new Set();
        const upperText = text.toUpperCase();

        for (const studio of parsedStudios) {
            if (upperText.includes(studio.toUpperCase())) {
                detectedStudios.add(studio);
            }
        }

        // Parse Years (Extracts 4-digit numbers from 1890 to 2099)
        const yearRegex = /\b(189\d|19\d{2}|20\d{2})\b/g;
        const detectedYears = new Set();
        let match;
        while ((match = yearRegex.exec(text)) !== null) {
            detectedYears.add(match[1]);
        }

        const studioArray = Array.from(detectedStudios).sort();
        const yearArray = Array.from(detectedYears).sort((a, b) => b - a);

        // Build HTML for Results
        const studioHtml = studioArray.length > 0
            ? `<div style="display:flex; flex-wrap:wrap; gap:8px;">${studioArray.map(s => `<span style="background:#28a745; color:white; padding:4px 10px; border-radius:12px; font-size:14px; font-weight:bold;">${s}</span>`).join('')}</div>`
            : `<p style="margin: 0; color: #6c757d; font-style: italic;">No known studio names detected.</p>`;

        const yearHtml = yearArray.length > 0
            ? `<div style="display:flex; flex-wrap:wrap; gap:8px;">${yearArray.map(y => `<span style="background:#007bff; color:white; padding:4px 10px; border-radius:12px; font-size:14px; font-weight:bold;">${y}</span>`).join('')}</div>`
            : `<p style="margin: 0; color: #6c757d; font-style: italic;">No years detected.</p>`;

        resultsContainer.innerHTML = `
            <h3 style="margin-top: 0; margin-bottom: 20px; color: #212529; border-bottom: 2px solid #dee2e6; padding-bottom: 10px;">Scan Complete</h3>
            
            <div style="margin-bottom: 20px;">
                <h4 style="margin: 0 0 10px 0; color: #495057;">🎞️ Identified Studios:</h4>
                ${studioHtml}
            </div>
            
            <div style="margin-bottom: 20px;">
                <h4 style="margin: 0 0 10px 0; color: #495057;">📅 Identified Years:</h4>
                ${yearHtml}
            </div>
            
            <details style="margin-top: 20px; border-top: 1px solid #ced4da; padding-top: 15px;">
                <summary style="cursor: pointer; font-weight: bold; color: #495057; user-select: none;">Show Raw Scanned Text</summary>
                <div style="background: #ffffff; border: 1px solid #dee2e6; border-radius: 4px; padding: 12px; margin-top: 10px; font-family: monospace; font-size: 13px; color: #343a40; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto;">${text.trim() ? text.trim() : '<i>No text found</i>'}</div>
            </details>
        `;
        
        container.appendChild(resultsContainer);

    } catch (err) {
        statusText.style.backgroundColor = '#f8d7da';
        statusText.style.color = '#721c24';
        statusText.innerHTML = `<strong>❌ Scanning Error:</strong> ${err.message}`;
    }

    return container;
}