Image Based Advanced Movie Identifier Search Tool

async function processImage(originalImg, language = 'eng') {
    // Main Container
    const container = document.createElement('div');
    container.style.fontFamily = '"Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.backgroundColor = '#12121c';
    container.style.color = '#e0e0e0';
    container.style.padding = '20px';
    container.style.borderRadius = '12px';
    container.style.display = 'flex';
    container.style.flexDirection = 'row';
    container.style.flexWrap = 'wrap';
    container.style.gap = '20px';
    container.style.width = '100%';
    container.style.boxSizing = 'border-box';
    container.style.boxShadow = '0 10px 30px rgba(0,0,0,0.6)';

    // Global styles for hovers inside this component
    const styleId = 'movie-identifier-styles';
    if (!document.getElementById(styleId)) {
        const style = document.createElement('style');
        style.id = styleId;
        style.textContent = `
            .movie-id-btn {
                flex: 1; padding: 12px; border: none; border-radius: 6px; 
                cursor: pointer; font-weight: bold; font-size: 14px;
                transition: transform 0.2s, opacity 0.2s;
                color: #fff; text-align: center; text-decoration: none; display: block;
            }
            .movie-id-btn:hover { transform: translateY(-2px); opacity: 0.9; }
            .btn-lens { background: linear-gradient(45deg, #4285f4, #ea4335, #fbbc05, #34a853); }
            .btn-yandex { background: #ff0000; }
            .btn-bing { background: #007DAA; }
            .btn-tmdb { background: #01b4e4; }
            .btn-google { background: #555; }
        `;
        document.head.appendChild(style);
    }

    // Left Panel (Image Display)
    const leftPanel = document.createElement('div');
    leftPanel.style.flex = '1 1 400px';
    leftPanel.style.display = 'flex';
    leftPanel.style.flexDirection = 'column';
    leftPanel.style.gap = '10px';

    const reqLabel = document.createElement('h3');
    reqLabel.innerText = 'Analyzed Frame';
    reqLabel.style.margin = '0';
    reqLabel.style.color = '#a682ff';
    leftPanel.appendChild(reqLabel);

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    
    // Scale image for processing
    const MAX_DIM = 1200;
    let w = originalImg.naturalWidth || originalImg.width;
    let h = originalImg.naturalHeight || originalImg.height;
    if (w > MAX_DIM || h > MAX_DIM) {
        const ratio = Math.min(MAX_DIM / w, MAX_DIM / h);
        w = Math.round(w * ratio);
        h = Math.round(h * ratio);
    }
    canvas.width = w;
    canvas.height = h;
    ctx.drawImage(originalImg, 0, 0, w, h);
    
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.borderRadius = '8px';
    canvas.style.border = '1px solid #333';
    canvas.style.backgroundColor = '#000';
    leftPanel.appendChild(canvas);

    // Check for canvas taint (CORS)
    let isTainted = false;
    try {
        ctx.getImageData(0, 0, 1, 1);
    } catch (e) {
        isTainted = true;
    }

    // Right Panel (Tools & Analytics)
    const rightPanel = document.createElement('div');
    rightPanel.style.flex = '1 1 400px';
    rightPanel.style.display = 'flex';
    rightPanel.style.flexDirection = 'column';
    rightPanel.style.gap = '20px';

    // Container 1: Cinematic Analysis
    const analysisBox = document.createElement('div');
    analysisBox.style.background = '#1e1e2d';
    analysisBox.style.padding = '20px';
    analysisBox.style.borderRadius = '8px';
    analysisBox.style.borderLeft = '4px solid #a682ff';

    let ratioText = "Unknown";
    let calculatedRatio = (w / h).toFixed(2);
    let trueRatioText = "";

    if (!isTainted) {
        // Detect true aspect ratio by checking for letterboxing (black bars)
        const imgData = ctx.getImageData(0, 0, w, h).data;
        let topY = 0, bottomY = h - 1;
        const threshold = 30; // Max RGB sum for "black"

        for (let y = 0; y < h; y++) {
            let isBlack = true;
            for (let x = 0; x < w; x += 10) {
                const i = (y * w + x) * 4;
                if (imgData[i] + imgData[i+1] + imgData[i+2] > threshold) {
                    isBlack = false; break;
                }
            }
            if (!isBlack) { topY = y; break; }
        }

        for (let y = h - 1; y >= 0; y--) {
            let isBlack = true;
            for (let x = 0; x < w; x += 10) {
                const i = (y * w + x) * 4;
                if (imgData[i] + imgData[i+1] + imgData[i+2] > threshold) {
                    isBlack = false; break;
                }
            }
            if (!isBlack) { bottomY = y; break; }
        }

        const trueHeight = Math.max(1, bottomY - topY + 1);
        const trueRatio = (w / trueHeight).toFixed(2);
        
        if (trueHeight < h - 10) {
            trueRatioText = ` <br><span style="color:#a682ff; font-size: 0.9em;">(Letterbox detected. Content Aspect Ratio: <b>${trueRatio}:1</b>)</span>`;
            calculatedRatio = trueRatio;
        }
    }

    const ratioNum = parseFloat(calculatedRatio);
    if (ratioNum >= 2.30) ratioText = "Cinematic Scope (Anamorphic)";
    else if (ratioNum >= 1.70 && ratioNum <= 1.90) ratioText = "Widescreen (Standard)";
    else if (ratioNum >= 1.25 && ratioNum <= 1.45) ratioText = "Classic/Academy (4:3)";
    else ratioText = "Custom/Other";

    analysisBox.innerHTML = `
        <h3 style="margin:0 0 15px 0; font-size:18px; color:#fff;">Cinematic Profile</h3>
        <p style="margin:5px 0;"><strong>Original Resolution:</strong> ${originalImg.naturalWidth} x ${originalImg.naturalHeight}</p>
        <p style="margin:5px 0;"><strong>Image Aspect Ratio:</strong> ${(w/h).toFixed(2)}:1 
        ${trueRatioText}</p>
        <p style="margin:5px 0;"><strong>Format Estimate:</strong> ${ratioText}</p>
        ${isTainted ? '<p style="color:#ff6b6b; font-size:12px; margin-top:10px;">Note: Cross-origin image detected. Advanced scanning disabled.</p>' : ''}
    `;
    rightPanel.appendChild(analysisBox);

    // Container 2: Subtitle / Title OCR Search
    const ocrBox = document.createElement('div');
    ocrBox.style.background = '#1e1e2d';
    ocrBox.style.padding = '20px';
    ocrBox.style.borderRadius = '8px';
    ocrBox.style.borderLeft = '4px solid #01b4e4';
    
    ocrBox.innerHTML = `
        <h3 style="margin:0 0 10px 0; font-size:18px; color:#fff;">Text & Subtitle Extraction</h3>
        <div id="ocrStatus" style="font-size:14px; color:#aaa;">${isTainted ? 'OCR Unavailable (CORS)' : 'Loading OCR engine...'}</div>
        <div id="ocrResult" style="margin-top:10px; font-weight:bold; font-size:16px; color:#fff;"></div>
        <div id="searchLinks" style="margin-top:15px; display:none; gap:10px; flex-wrap:wrap;"></div>
    `;
    rightPanel.appendChild(ocrBox);

    // Container 3: Reverse Image Search Identifier
    const searchBox = document.createElement('div');
    searchBox.style.background = '#1e1e2d';
    searchBox.style.padding = '20px';
    searchBox.style.borderRadius = '8px';
    searchBox.style.borderLeft = '4px solid #fbbc05';

    searchBox.innerHTML = `
        <h3 style="margin:0 0 10px 0; font-size:18px; color:#fff;">Reverse Image Search Identifier</h3>
        <p style="margin:0 0 15px 0; font-size:13px; color:#aaa;">Identify this frame using advanced visual search engines.</p>
        <div style="display:flex; gap:10px; flex-wrap:wrap;">
            <button id="btnLens" class="movie-id-btn btn-lens">Search Google Lens</button>
            <button id="btnYandex" class="movie-id-btn btn-yandex">Search Yandex</button>
            <button id="btnBing" class="movie-id-btn btn-bing">Search Bing</button>
        </div>
    `;
    rightPanel.appendChild(searchBox);

    container.appendChild(leftPanel);
    container.appendChild(rightPanel);

    // Form Submission Wrapper for Reverse Visual Search
    const submitImageToService = (targetUrl, paramName) => {
        canvas.toBlob((blob) => {
            const form = document.createElement('form');
            form.action = targetUrl;
            form.method = 'POST';
            form.enctype = 'multipart/form-data';
            form.target = '_blank';
            form.style.display = 'none';

            const dt = new DataTransfer();
            const file = new File([blob], "movie_frame.jpg", { type: "image/jpeg" });
            dt.items.add(file);

            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.name = paramName;
            fileInput.files = dt.files;

            form.appendChild(fileInput);
            document.body.appendChild(form);
            form.submit();
            setTimeout(() => document.body.removeChild(form), 1000);
        }, 'image/jpeg');
    };

    // Attach Reverse Search logic to buttons
    setTimeout(() => {
        container.querySelector('#btnLens').onclick = () => {
            submitImageToService('https://lens.google.com/upload', 'encoded_image');
        };
        container.querySelector('#btnYandex').onclick = () => {
            submitImageToService('https://yandex.com/images/search?rpt=imageview', 'upfile');
        };
        container.querySelector('#btnBing').onclick = () => {
            submitImageToService('https://www.bing.com/images/search?view=detailv2&iss=sbi', 'imageBin');
        };
    }, 0);

    // OCR Logic with Tesseract.js (Extracts Titles or Subtitles for movie searches)
    if (!isTainted) {
        setTimeout(async () => {
            const ocrStatus = container.querySelector('#ocrStatus');
            const ocrResult = container.querySelector('#ocrResult');
            const searchLinks = container.querySelector('#searchLinks');

            try {
                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.onload = resolve;
                        script.onerror = reject;
                        document.head.appendChild(script);
                    });
                }

                ocrStatus.innerText = "Scanning frame for subtitles or exact titles...";

                const worker = await Tesseract.createWorker(language);
                const ret = await worker.recognize(canvas);
                const text = ret.data.text.trim().replace(/\n/g, ' ');
                await worker.terminate();

                if (text && text.length > 2) {
                    ocrStatus.innerText = "Extracted Text:";
                    ocrResult.innerText = `"${text}"`;

                    const tmdbBtn = document.createElement('a');
                    tmdbBtn.href = `https://www.themoviedb.org/search?query=${encodeURIComponent(text)}`;
                    tmdbBtn.target = '_blank';
                    tmdbBtn.innerText = 'TMDB Lookup';
                    tmdbBtn.className = 'movie-id-btn btn-tmdb';

                    const googleTxtBtn = document.createElement('a');
                    googleTxtBtn.href = `https://www.google.com/search?q=${encodeURIComponent('movie "' + text + '"')}`;
                    googleTxtBtn.target = '_blank';
                    googleTxtBtn.innerText = 'Google Text Search';
                    googleTxtBtn.className = 'movie-id-btn btn-google';

                    searchLinks.appendChild(tmdbBtn);
                    searchLinks.appendChild(googleTxtBtn);
                    searchLinks.style.display = 'flex';
                } else {
                    ocrStatus.innerText = "No readable subtitles or titles found in this frame.";
                }
            } catch (err) {
                console.error(err);
                ocrStatus.innerText = "Text detection failed or was blocked.";
            }
        }, 100);
    }

    return container;
}