Image To Movie Details Finder

function processImage(originalImg, languageCode = 'eng') {
    // Create the main container
    const container = document.createElement('div');
    const containerId = 'movie-finder-' + Math.random().toString(36).substr(2, 9);
    container.id = containerId;
    container.style.fontFamily = '"Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.padding = '25px';
    container.style.maxWidth = '850px';
    container.style.margin = '0 auto';
    container.style.backgroundColor = '#121212';
    container.style.color = '#e0e0e0';
    container.style.borderRadius = '12px';
    container.style.boxShadow = '0 8px 16px rgba(0,0,0,0.6)';
    container.style.boxSizing = 'border-box';

    // Inject styles for loading spinner and scrollbar
    const style = document.createElement('style');
    style.textContent = `
        @keyframes spin-${containerId} { 100% { transform: rotate(360deg); } }
        .spinner-${containerId} { 
            border: 4px solid #2a2a2a; 
            border-top: 4px solid #f1c40f; 
            border-radius: 50%; 
            width: 50px; 
            height: 50px; 
            animation: spin-${containerId} 1s linear infinite; 
            margin: 0 auto 20px auto; 
        }
        .content-scroll-${containerId}::-webkit-scrollbar { width: 8px; }
        .content-scroll-${containerId}::-webkit-scrollbar-track { background: #1e1e1e; border-radius: 4px; }
        .content-scroll-${containerId}::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
        .content-scroll-${containerId}::-webkit-scrollbar-thumb:hover { background: #777; }
    `;
    container.appendChild(style);

    const contentDiv = document.createElement('div');
    container.appendChild(contentDiv);

    // Initial Loading State
    contentDiv.innerHTML = `
        <div style="text-align:center; padding: 50px 20px;">
            <div class="spinner-${containerId}"></div>
            <h3 style="margin: 0 0 10px 0; color: #f1c40f;">Analyzing Image...</h3>
            <p style="margin: 0; color: #aaa; font-size: 15px;">Scanning for text to search movie databases.</p>
        </div>
    `;

    // Asynchronous processing function
    (async () => {
        try {
            // 1. Load Tesseract.js dynamically
            if (typeof Tesseract === 'undefined') {
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js';
                    script.onload = resolve;
                    script.onerror = () => reject(new Error("Failed to load OCR engine (Tesseract.js)."));
                    document.head.appendChild(script);
                });
            }

            // 2. Prepare image for OCR (scale down if too large to prevent long processing times)
            const MAX_DIMENSION = 900;
            let imgW = originalImg.naturalWidth || originalImg.width;
            let imgH = originalImg.naturalHeight || originalImg.height;
            
            if (imgW === 0 || imgH === 0) {
                throw new Error("Invalid image data provided.");
            }

            if (imgW > MAX_DIMENSION || imgH > MAX_DIMENSION) {
                if (imgW > imgH) {
                    imgH = Math.floor(imgH * (MAX_DIMENSION / imgW));
                    imgW = MAX_DIMENSION;
                } else {
                    imgW = Math.floor(imgW * (MAX_DIMENSION / imgH));
                    imgH = MAX_DIMENSION;
                }
            }

            const ocrCanvas = document.createElement('canvas');
            ocrCanvas.width = imgW;
            ocrCanvas.height = imgH;
            const ocrCtx = ocrCanvas.getContext('2d');
            ocrCtx.drawImage(originalImg, 0, 0, imgW, imgH);

            contentDiv.innerHTML = `
                <div style="text-align:center; padding: 50px 20px;">
                    <div class="spinner-${containerId}"></div>
                    <h3 style="margin: 0 0 10px 0; color: #f1c40f;">Reading Text...</h3>
                    <p style="margin: 0; color: #aaa; font-size: 15px;">Extracting titles from the image.</p>
                </div>
            `;

            // 3. Run OCR
            const worker = await Tesseract.createWorker(languageCode);
            const { data } = await worker.recognize(ocrCanvas);
            await worker.terminate();

            const lines = data.lines;
            if (!lines || lines.length === 0) {
                throw new Error("No text could be found in the image. Please upload a clear movie poster or distinct title frame.");
            }

            // 4. Process text to find the most prominent text (likely the title)
            let processedLines = lines.map(line => {
                const height = line.bbox.y1 - line.bbox.y0;
                // Keep alphanumeric and basic punctuation
                const text = line.text.trim().replace(/[^a-zA-Z0-9\s-':&]/g, '').trim();
                return { text, height };
            }).filter(line => line.text.length > 2); // Ignore very short fragments

            if (processedLines.length === 0) {
                throw new Error("Extracted text was not recognizable as a title. Please try another image.");
            }

            // Sort lines by physical height (larger text = more likely the title)
            processedLines.sort((a, b) => b.height - a.height);

            // Construct search query from largest text lines
            let searchQuery = processedLines[0].text;
            // If the largest word is very short, append the second largest
            if (searchQuery.length < 5 && processedLines.length > 1) {
                searchQuery += " " + processedLines[1].text;
            }
            
            searchQuery = searchQuery.slice(0, 60).trim();

            contentDiv.innerHTML = `
                <div style="text-align:center; padding: 50px 20px;">
                    <div class="spinner-${containerId}"></div>
                    <h3 style="margin: 0 0 10px 0; color: #f1c40f;">Searching Database...</h3>
                    <p style="margin: 0; color: #aaa; font-size: 15px;">Looking up: "${searchQuery}"</p>
                </div>
            `;

            // 5. Search Wikipedia (used as a proxy for open movie knowledge)
            // Appending ' film' helps bias results towards movies
            const searchUrl = `https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${encodeURIComponent(searchQuery + ' film')}&utf8=&format=json&origin=*`;
            const searchRes = await fetch(searchUrl);
            const searchData = await searchRes.json();

            if (!searchData.query || !searchData.query.search || searchData.query.search.length === 0) {
                throw new Error(`Could not find a matching film for the extracted text: "${searchQuery}".`);
            }

            // Get the title of the closest match
            const bestMatchTitle = searchData.query.search[0].title;

            // 6. Fetch Full Extracted Details
            const detailsUrl = `https://en.wikipedia.org/w/api.php?action=query&prop=extracts&exintro&explaintext&redirects=1&titles=${encodeURIComponent(bestMatchTitle)}&format=json&origin=*`;
            const detailsRes = await fetch(detailsUrl);
            const detailsData = await detailsRes.json();
            
            const pages = detailsData.query.pages;
            const pageId = Object.keys(pages)[0];
            const pageInfo = pages[pageId];

            const summary = pageInfo.extract || "No detailed summary available for this title.";

            // 7. Render Final UI
            contentDiv.innerHTML = '';
            
            const header = document.createElement('h2');
            header.textContent = bestMatchTitle;
            header.style.margin = '0 0 20px 0';
            header.style.color = '#f1c40f';
            header.style.fontSize = '28px';
            header.style.textShadow = '1px 1px 2px rgba(0,0,0,0.5)';
            header.style.lineHeight = '1.2';
            contentDiv.appendChild(header);

            const layoutFlex = document.createElement('div');
            layoutFlex.style.display = 'flex';
            layoutFlex.style.flexWrap = 'wrap';
            layoutFlex.style.gap = '25px';
            
            // Left Column: Original uploaded image (rendered on canvas)
            const leftCol = document.createElement('div');
            leftCol.style.flex = '1 1 250px';
            leftCol.style.display = 'flex';
            leftCol.style.flexDirection = 'column';
            leftCol.style.gap = '8px';

            const uiCanvas = document.createElement('canvas');
            const maxUiWidth = 300;
            const origW = originalImg.naturalWidth || originalImg.width;
            const origH = originalImg.naturalHeight || originalImg.height;
            const scaleFac = Math.min(1, maxUiWidth / origW);
            
            uiCanvas.width = origW * scaleFac;
            uiCanvas.height = origH * scaleFac;
            const uiCtx = uiCanvas.getContext('2d');
            uiCtx.drawImage(originalImg, 0, 0, uiCanvas.width, uiCanvas.height);
            
            uiCanvas.style.borderRadius = '8px';
            uiCanvas.style.backgroundColor = '#000';
            uiCanvas.style.border = '1px solid #333';
            uiCanvas.style.width = '100%';
            uiCanvas.style.height = 'auto';
            leftCol.appendChild(uiCanvas);

            const textBadge = document.createElement('div');
            textBadge.style.backgroundColor = '#1e1e1e';
            textBadge.style.border = '1px solid #333';
            textBadge.style.borderRadius = '6px';
            textBadge.style.padding = '10px';
            textBadge.style.marginTop = '10px';
            textBadge.innerHTML = `<div style="font-size:11px; text-transform:uppercase; color:#888; margin-bottom:4px; letter-spacing:1px;">Detected Title</div><div style="font-family:monospace; color:#ccc; word-break:break-all;">"${searchQuery}"</div>`;
            leftCol.appendChild(textBadge);

            // Right Column: Summary text
            const rightCol = document.createElement('div');
            rightCol.style.flex = '2 1 350px';
            rightCol.style.display = 'flex';
            rightCol.style.flexDirection = 'column';

            const summaryDiv = document.createElement('div');
            summaryDiv.className = `content-scroll-${containerId}`;
            summaryDiv.style.backgroundColor = '#1e1e1e';
            summaryDiv.style.padding = '20px';
            summaryDiv.style.borderRadius = '8px';
            summaryDiv.style.border = '1px solid #333';
            summaryDiv.style.lineHeight = '1.7';
            summaryDiv.style.fontSize = '15px';
            summaryDiv.style.maxHeight = '350px';
            summaryDiv.style.overflowY = 'auto';
            
            // Format paragraphs
            const paragraphs = summary.split('\n').filter(p => p.trim().length > 0);
            paragraphs.forEach(p => {
                const pEl = document.createElement('p');
                pEl.textContent = p;
                pEl.style.marginTop = '0';
                pEl.style.marginBottom = '15px';
                summaryDiv.appendChild(pEl);
            });
            // Remove last bottom margin
            if (summaryDiv.lastChild) summaryDiv.lastChild.style.marginBottom = '0';
            
            rightCol.appendChild(summaryDiv);

            const linkBox = document.createElement('div');
            linkBox.style.marginTop = '15px';
            linkBox.innerHTML = `<a href="https://en.wikipedia.org/wiki/${encodeURIComponent(bestMatchTitle.replace(/ /g, '_'))}" target="_blank" style="display:inline-block; padding: 10px 20px; background-color: #3498db; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 14px; transition: background 0.2s;">Read Full Wiki Article ↗</a>`;
            rightCol.appendChild(linkBox);

            layoutFlex.appendChild(leftCol);
            layoutFlex.appendChild(rightCol);
            contentDiv.appendChild(layoutFlex);

        } catch (error) {
            contentDiv.innerHTML = `
                <div style="text-align:center; padding: 40px 20px; background-color: #2c1010; border: 1px solid #e74c3c; border-radius: 8px;">
                    <h3 style="margin: 0 0 15px 0; color: #e74c3c;">Analysis failed</h3>
                    <p style="margin: 0 0 10px 0; color: #eee;">${error.message}</p>
                    <p style="margin: 0; font-size: 13px; color: #aaa;">Tip: Posters with clear, prominent, rigid English typography work best. Images without text cannot be processed.</p>
                </div>
            `;
        }
    })();

    return container;
}