IMDb Movie Photo And Similar Film Identifier Search Tool

function processImage(originalImg, language = 'eng') {
    // Create the main wrapper container
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.backgroundColor = '#121212';
    container.style.color = '#ffffff';
    container.style.padding = '20px';
    container.style.borderRadius = '8px';
    container.style.maxWidth = '600px';
    container.style.margin = '0 auto';
    container.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.5)';

    // Embedded CSS for animations and layout
    const style = document.createElement('style');
    style.innerHTML = `
        @keyframes scan {
            0% { top: 0; }
            100% { top: calc(100% - 2px); }
        }
        .imdb-btn {
            display: inline-block;
            background-color: #f5c518;
            color: #000000;
            padding: 8px 14px;
            border: none;
            border-radius: 4px;
            text-decoration: none;
            font-weight: bold;
            font-size: 14px;
            margin: 5px 5px 0 0;
            cursor: pointer;
            transition: background-color 0.2s, transform 0.1s;
        }
        .imdb-btn:hover {
            background-color: #e0b416;
            transform: translateY(-1px);
        }
        .imdb-btn:active {
            transform: translateY(0);
        }
        .res-item {
            background-color: #222;
            padding: 15px;
            margin-top: 15px;
            border-left: 4px solid #f5c518;
            border-radius: 4px;
        }
        .status-box {
            background-color: #333;
            color: #ccc;
            padding: 10px;
            text-align: center;
            border-radius: 4px;
            margin-bottom: 15px;
            font-size: 14px;
        }
    `;
    container.appendChild(style);

    // Tool Header
    const header = document.createElement('h2');
    header.innerText = 'IMDb Movie Photo Identifier';
    header.style.color = '#f5c518';
    header.style.textAlign = 'center';
    header.style.marginTop = '0';
    container.appendChild(header);

    // Image preview area
    const imgContainer = document.createElement('div');
    imgContainer.style.position = 'relative';
    imgContainer.style.overflow = 'hidden';
    imgContainer.style.borderRadius = '4px';
    imgContainer.style.marginBottom = '15px';
    imgContainer.style.backgroundColor = '#000';

    // Draw the image on a canvas to normalize format and size
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const MAX_WIDTH = 560;
    let scale = 1;

    if (originalImg.width > MAX_WIDTH) {
        scale = MAX_WIDTH / originalImg.width;
    }
    canvas.width = originalImg.width * scale;
    canvas.height = originalImg.height * scale;
    
    // Fill with black just in case of transparency
    ctx.fillStyle = '#000000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    canvas.style.display = 'block';
    canvas.style.width = '100%';
    canvas.style.height = 'auto';
    imgContainer.appendChild(canvas);

    // Visual scanner line
    const scanner = document.createElement('div');
    scanner.style.position = 'absolute';
    scanner.style.top = '0';
    scanner.style.left = '0';
    scanner.style.width = '100%';
    scanner.style.height = '2px';
    scanner.style.backgroundColor = '#f5c518';
    scanner.style.boxShadow = '0 0 10px #f5c518, 0 0 20px #f5c518';
    scanner.style.animation = 'scan 2s infinite linear alternate';
    imgContainer.appendChild(scanner);

    container.appendChild(imgContainer);

    // Status / Progress indicator
    const statusBox = document.createElement('div');
    statusBox.className = 'status-box';
    statusBox.innerText = 'Initializing analysis engine...';
    container.appendChild(statusBox);

    // Main Results Area
    const resultsBox = document.createElement('div');
    container.appendChild(resultsBox);

    // Process logic: Async execution without blocking element return
    (async () => {
        try {
            // Dynamically load Tesseract.js if not available
            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(new Error('Failed to load OCR library.'));
                    document.head.appendChild(script);
                });
            }

            statusBox.innerText = 'Scanning image for text, actors, or movie titles...';
            
            // Extract to base64 to pass comfortably to Tesseract
            const imgDataUrl = canvas.toDataURL('image/png');

            // Run OCR
            const tesseractResult = await window.Tesseract.recognize(imgDataUrl, language, {
                logger: m => {
                    if (m.status === 'recognizing text') {
                        const progress = Math.round(m.progress * 100);
                        statusBox.innerText = `Analyzing visual data... ${progress}%`;
                    }
                }
            });

            // Cleanup scanning animations once done
            scanner.style.display = 'none';
            statusBox.style.display = 'none';

            const text = tesseractResult.data.text.trim();
            // Filter meaningless short strings or noise typical of OCR
            const lines = text.split('\n')
                .map(l => l.trim().replace(/[^a-zA-Z0-9А-Яа-я ,.?'"!:-]+/g, ''))
                .filter(l => l.length > 3);

            // Present text/title findings
            if (lines.length > 0) {
                const info = document.createElement('p');
                info.innerText = 'Title / Subtitles detected. Search to find the movie:';
                info.style.fontWeight = 'bold';
                resultsBox.appendChild(info);

                // Use a Set to ensure we don't display duplicate lines
                const uniqueLines = [...new Set(lines)].slice(0, 5); // Limit to top 5 results

                uniqueLines.forEach(line => {
                    const row = document.createElement('div');
                    row.className = 'res-item';
                    
                    const textSpan = document.createElement('strong');
                    textSpan.innerText = `"${line}"`;
                    textSpan.style.display = 'block';
                    textSpan.style.marginBottom = '10px';
                    textSpan.style.fontSize = '1.1em';
                    row.appendChild(textSpan);

                    const imdbLink = document.createElement('a');
                    imdbLink.href = `https://www.imdb.com/find/?q=${encodeURIComponent(line)}`;
                    imdbLink.target = '_blank';
                    imdbLink.className = 'imdb-btn';
                    imdbLink.innerText = '🔎 Search on IMDb';
                    row.appendChild(imdbLink);

                    const searchAllBtn = document.createElement('a');
                    searchAllBtn.href = `https://www.google.com/search?q=${encodeURIComponent('movie "' + line + '"')}`;
                    searchAllBtn.target = '_blank';
                    searchAllBtn.className = 'imdb-btn';
                    searchAllBtn.style.backgroundColor = '#ecf0f1';
                    searchAllBtn.innerText = 'Google Search';
                    row.appendChild(searchAllBtn);

                    resultsBox.appendChild(row);
                });
            } else {
                const noText = document.createElement('div');
                noText.className = 'res-item';
                noText.style.borderLeftColor = '#e74c3c';
                noText.innerHTML = '<strong>No readable text/titles detected.</strong><br/>For pure image-based finding, use the Reverse Image Search tools below.';
                resultsBox.appendChild(noText);
            }

            // Provide universal Reverse Image Search options for "Similar Films / Photo Identifiers"
            const revImageWrapper = document.createElement('div');
            revImageWrapper.className = 'res-item';
            revImageWrapper.style.marginTop = '20px';
            revImageWrapper.style.borderLeftColor = '#3498db';
            
            const riTitle = document.createElement('p');
            riTitle.innerText = 'Alternatively, Identify Film via Reverse Image Search:';
            riTitle.style.marginBottom = '15px';
            riTitle.style.marginTop = '0';
            riTitle.style.fontWeight = 'bold';
            revImageWrapper.appendChild(riTitle);

            // DL Link to make copying easy for Lens/Yandex
            const dlBtn = document.createElement('a');
            dlBtn.href = imgDataUrl;
            dlBtn.download = 'movie_screenshot.png';
            dlBtn.className = 'imdb-btn';
            dlBtn.style.backgroundColor = '#2ecc71';
            dlBtn.style.color = '#fff';
            dlBtn.innerText = '⬇️ Save Image Form';
            revImageWrapper.appendChild(dlBtn);

            const yandexLink = document.createElement('a');
            yandexLink.href = 'https://yandex.com/images/';
            yandexLink.target = '_blank';
            yandexLink.className = 'imdb-btn';
            yandexLink.style.backgroundColor = '#ffcc00';
            yandexLink.innerText = 'Yandex Images';
            revImageWrapper.appendChild(yandexLink);

            const googleLens = document.createElement('a');
            googleLens.href = 'https://lens.google.com/';
            googleLens.target = '_blank';
            googleLens.className = 'imdb-btn';
            googleLens.style.backgroundColor = '#fff';
            googleLens.style.color = '#4285f4';
            googleLens.innerText = 'Google Lens';
            revImageWrapper.appendChild(googleLens);

            resultsBox.appendChild(revImageWrapper);

        } catch (err) {
            console.error(err);
            scanner.style.display = 'none';
            statusBox.style.display = 'block';
            statusBox.style.backgroundColor = '#c0392b';
            statusBox.innerText = 'Error analyzing image. Note that identifying local images may require downloading it and using Reverse Image Search manually.';
        }
    })();

    // Immediately return DOM structure
    return container;
}