Movie And Film Identifier Finder From Image

function processImage(originalImg, lang = "eng", styleVibeFallback = "Neuromancer") {
    // 1. Create the Main Wrapper Container
    const container = document.createElement('div');
    const shadowVibe = Math.random() > 0.5 ? 'rgba(0,0,0,0.8)' : 'rgba(10, 10, 10, 0.9)';
    
    // Inject Styles using inline HTML for the whole block
    container.innerHTML = `
      <style>
        .imdb-tool-container {
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background: #111;
            color: #ccc;
            padding: 24px;
            border-radius: 12px;
            max-width: 750px;
            margin: 0 auto;
            box-shadow: 0 10px 30px ${shadowVibe};
            border: 1px solid #333;
            overflow: hidden;
        }
        .imdb-tool-header {
            color: #f5c518;
            border-bottom: 2px solid #333;
            padding-bottom: 15px;
            margin-bottom: 18px;
            font-size: 26px;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 12px;
            letter-spacing: -0.5px;
        }
        .imdb-tool-image-wrapper {
            position: relative;
            background: #000;
            border-radius: 8px;
            padding: 4px;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            border: 1px solid #444;
        }
        .imdb-tool-image {
            max-width: 100%;
            height: auto;
            max-height: 400px;
            border-radius: 4px;
            object-fit: contain;
        }
        .imdb-tool-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 20px;
        }
        .imdb-tool-card {
            background: #1a1a1a;
            padding: 16px;
            border-radius: 8px;
            border-left: 4px solid #f5c518;
            transition: transform 0.2s;
        }
        .imdb-tool-card:hover {
            transform: translateY(-2px);
        }
        .imdb-tool-card h4 {
            margin: 0 0 10px 0;
            color: #fff;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .imdb-tool-card p {
            margin: 0;
            color: #e0e0e0;
            font-size: 16px;
            font-weight: 500;
        }
        .imdb-ocr-box {
            background: #1a1a1a;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #333;
        }
        .imdb-action-btn {
            display: block;
            width: 100%;
            background: #f5c518;
            color: #000;
            padding: 14px 24px;
            text-decoration: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
            box-sizing: border-box;
            border: none;
        }
        .imdb-action-btn:hover {
            background: #d4a910;
        }
        @keyframes pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }
        .scanning-text {
            animation: pulse 1.5s infinite ease-in-out;
            color: #f5c518;
        }
      </style>
      
      <div class="imdb-tool-container">
        <div class="imdb-tool-header">
            <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#f5c518" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
                <line x1="7" y1="2" x2="7" y2="22"></line>
                <line x1="17" y1="2" x2="17" y2="22"></line>
                <line x1="2" y1="12" x2="22" y2="12"></line>
                <line x1="2" y1="7" x2="7" y2="7"></line>
                <line x1="2" y1="17" x2="7" y2="17"></line>
                <line x1="17" y1="17" x2="22" y2="17"></line>
                <line x1="17" y1="7" x2="22" y2="7"></line>
            </svg>
            FilmStudio Image & Movie Finder
        </div>
        
        <div class="imdb-tool-image-wrapper">
            <img class="imdb-tool-image" src="${originalImg.src}" alt="Movie Frame Input">
        </div>
        
        <div class="imdb-tool-grid">
            <div class="imdb-tool-card">
                <h4>Cinematic Format</h4>
                <p id="movie-format">Analyzing Ratio...</p>
                <p id="movie-ratio-text" style="font-size:12px; color:#888; margin-top:6px;"></p>
            </div>
            <div class="imdb-tool-card">
                <h4>Visual Atmosphere</h4>
                <p id="movie-vibe">Scanning Colors...</p>
                <p id="movie-vibe-rgb" style="font-size:12px; color:#888; margin-top:6px;"></p>
            </div>
        </div>

        <div class="imdb-ocr-box">
            <h4 style="margin:0 0 10px 0; color:#fff; font-size: 13px; text-transform: uppercase;">Subtitle & Scene Text Extractor</h4>
            <div id="ocr-status" class="scanning-text" style="font-size: 15px;">Initializing OCR engine...</div>
            <div id="ocr-result" style="display:none; background:#111; padding:15px; border-radius:6px; border:1px solid #444; margin-top:12px;"></div>
        </div>

        <a id="imdb-link" href="https://www.imdb.com/search/title/" target="_blank" class="imdb-action-btn" style="pointer-events: none; opacity: 0.5;">
            Wait... Analyzing Film Components
        </a>
      </div>
    `;

    // 2. Setup Dimensions Logic (Aspect Ratio calculation)
    setTimeout(() => {
        const w = originalImg.naturalWidth || originalImg.width || 1920;
        const h = originalImg.naturalHeight || originalImg.height || 1080;
        const ratio = (w / h).toFixed(2);
        
        let format = "Unknown Format";
        const numRatio = parseFloat(ratio);
        
        if (numRatio >= 2.35 && numRatio <= 2.40) format = "Anamorphic (Epic / Blockbuster)";
        else if (numRatio >= 1.85 && numRatio < 2.00) format = "1.85:1 (Theatrical Standard)";
        else if (numRatio >= 1.76 && numRatio <= 1.78) format = "16:9 (HDTV / Web Release)";
        else if (numRatio >= 1.33 && numRatio <= 1.35) format = "4:3 (Classic Film / Director's Cut)";
        else format = "Custom Theatrical Ratio";
        
        const rEl = container.querySelector('#movie-format');
        const rtEl = container.querySelector('#movie-ratio-text');
        if(rEl) rEl.innerText = format;
        if(rtEl) rtEl.innerText = `Dimensions: ${w}x${h} (${ratio}:1)`;

        // 3. Cinematic Color / Atmosphere Extraction
        let vibe = styleVibeFallback;
        let rV = 0, gV = 0, bV = 0;
        try {
            const canvas = document.createElement('canvas');
            canvas.width = w; canvas.height = h;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(originalImg, 0, 0);
            
            const imgData = ctx.getImageData(0, 0, w, h).data;
            let rSum = 0, gSum = 0, bSum = 0;
            const step = 4 * 15; // sample every 15th pixel for performance
            let count = 0;
            
            for (let i = 0; i < imgData.length; i += step) {
               rSum += imgData[i];
               gSum += imgData[i+1];
               bSum += imgData[i+2];
               count++;
            }
            if (count > 0) {
                rV = Math.floor(rSum / count);
                gV = Math.floor(gSum / count);
                bV = Math.floor(bSum / count);
                
                if (gV > rV + 15 && gV > bV + 15) vibe = "Matrix Green / Dystopian";
                else if (bV > rV + 15 && bV > gV + 15) vibe = "Cool Blue / Thriller / Sci-Fi";
                else if (rV > bV + 20 && gV > bV + 15) vibe = "Warm / Orange & Teal / Action";
                else if (rV > gV + 15 && rV > bV + 15) vibe = "Deep Red / Horror / Tension";
                else vibe = "Neutral / Natural Lighting";
            }
        } catch (e) {
            vibe = "Restricted Tone Details (Cross-Origin)";
        }

        const vEl = container.querySelector('#movie-vibe');
        const vtEl = container.querySelector('#movie-vibe-rgb');
        if(vEl) vEl.innerText = vibe;
        if(vtEl) vtEl.innerText = `RGB: (${rV}, ${gV}, ${bV})`;
    }, 100);

    // 4. Background Tesseract.js Injection to Extract Dialogues/Subtitles/Titles
    (async () => {
        try {
            // Helper to dynamically inject Script
            const loadScript = url => new Promise((resolve, reject) => {
                if (document.querySelector(`script[src="${url}"]`)) return resolve();
                const script = document.createElement('script');
                script.src = url;
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });

            await loadScript('https://unpkg.com/tesseract.js@4.1.3/dist/tesseract.min.js');

            const statusEl = container.querySelector('#ocr-status');
            const resultEl = container.querySelector('#ocr-result');
            const linkEl = container.querySelector('#imdb-link');

            // Initialize Tesseract Engine
            const worker = await Tesseract.createWorker({
                logger: m => {
                    if (m.status === 'recognizing text') {
                        const pct = Math.floor(m.progress * 100);
                        if(statusEl) statusEl.innerText = `Scanning for frame subtitles... ${pct}%`;
                    }
                }
            });

            await worker.loadLanguage(lang);
            await worker.initialize(lang);
            const { data: { text } } = await worker.recognize(originalImg);
            await worker.terminate();

            // Process text results
            let cleanText = text.replace(/\n|\||<|>/g, ' ').replace(/\s+/g, ' ').trim();
            
            statusEl.classList.remove('scanning-text');
            
            if (cleanText.length > 3) {
                statusEl.innerText = "Match found in image text (Keywords / Subtitles):";
                statusEl.style.color = "#aaa";
                resultEl.innerText = `"${cleanText}"`;
                resultEl.style.display = 'block';
                resultEl.style.color = '#fff';
                resultEl.style.fontStyle = 'italic';
                
                linkEl.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:text-bottom; margin-right:6px;"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> Search Exact Quote on IMDb`;
                linkEl.href = "https://www.imdb.com/find/?q=" + encodeURIComponent(cleanText);
            } else {
                statusEl.innerText = "No readable subtitles or title cards detected in this frame.";
                statusEl.style.color = "#aaa";
                linkEl.innerHTML = `🌐 Open Advanced IMDb Keyword Search`;
                linkEl.href = "https://www.imdb.com/search/title/";
            }
            
            // Enable Button
            linkEl.style.pointerEvents = "auto";
            linkEl.style.opacity = "1";

        } catch (err) {
            console.error("OCR or Setup failed:", err);
            const statusEl = container.querySelector('#ocr-status');
            const linkEl = container.querySelector('#imdb-link');
            
            if(statusEl) {
                statusEl.classList.remove('scanning-text');
                statusEl.innerText = "Text detection unavailable for this image structure. Resorting to visual cues.";
                statusEl.style.color = "#aaa";
            }
            if(linkEl) {
                linkEl.innerHTML = `🌐 Manually Look Up on IMDb`;
                linkEl.style.pointerEvents = "auto";
                linkEl.style.opacity = "1";
            }
        }
    })();

    // Return the built component directly
    return container;
}