Movie Identifier From Image Using IMDb

async function processImage(originalImg, openAIApiKey = "") {
    // Top-level container
    const container = document.createElement('div');
    container.style.fontFamily = "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
    container.style.maxWidth = "600px";
    container.style.margin = "0 auto";
    container.style.padding = "20px";
    container.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";
    container.style.borderRadius = "10px";
    container.style.backgroundColor = "#ffffff";
    container.style.textAlign = "center";
    container.style.color = "#333";

    const header = document.createElement('h2');
    header.textContent = "IMDb Movie Identifier";
    header.style.marginTop = "0";
    header.style.marginBottom = "20px";
    container.appendChild(header);

    // Scale down image for API restrictions and optimization
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const MAX_DIMENSION = 800; // Limit size to reduce API payload
    let width = originalImg.width;
    let height = originalImg.height;

    if (width > height && width > MAX_DIMENSION) {
        height = Math.round((height * MAX_DIMENSION) / width);
        width = MAX_DIMENSION;
    } else if (height > MAX_DIMENSION) {
        width = Math.round((width * MAX_DIMENSION) / height);
        height = MAX_DIMENSION;
    }

    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(originalImg, 0, 0, width, height);
    // Compress to JPEG for smaller data payload
    const dataUrl = canvas.toDataURL('image/jpeg', 0.7);

    // Image Preview Element
    const imgPreview = document.createElement('img');
    imgPreview.src = dataUrl;
    imgPreview.style.maxWidth = "100%";
    imgPreview.style.maxHeight = "350px";
    imgPreview.style.borderRadius = "8px";
    imgPreview.style.objectFit = "contain";
    imgPreview.style.backgroundColor = "#000";
    container.appendChild(imgPreview);

    // Control Panel setup
    const controlPanel = document.createElement('div');
    controlPanel.style.marginTop = "20px";
    container.appendChild(controlPanel);

    // Instructions
    const instructions = document.createElement('p');
    instructions.textContent = "This tool uses AI Vision to identify movies/TV shows. Since it relies on external AI, you'll need an OpenAI API key to process the image locally.";
    instructions.style.fontSize = "14px";
    instructions.style.color = "#666";
    instructions.style.textAlign = "left";
    controlPanel.appendChild(instructions);

    // API Key Input
    const keyInput = document.createElement('input');
    keyInput.type = "password";
    keyInput.placeholder = "sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
    keyInput.value = openAIApiKey;
    keyInput.style.padding = "10px";
    keyInput.style.width = "calc(100% - 22px)";
    keyInput.style.marginBottom = "15px";
    keyInput.style.borderRadius = "5px";
    keyInput.style.border = "1px solid #ccc";
    keyInput.style.fontSize = "14px";
    controlPanel.appendChild(keyInput);

    // Action Button
    const identifyBtn = document.createElement('button');
    identifyBtn.textContent = "Identify Movie";
    identifyBtn.style.padding = "12px 20px";
    identifyBtn.style.backgroundColor = "#f5c518"; // IMDb classic yellow
    identifyBtn.style.color = "#000000";
    identifyBtn.style.border = "none";
    identifyBtn.style.borderRadius = "5px";
    identifyBtn.style.fontWeight = "bold";
    identifyBtn.style.cursor = "pointer";
    identifyBtn.style.width = "100%";
    identifyBtn.style.fontSize = "16px";
    identifyBtn.style.transition = "background-color 0.2s";
    
    identifyBtn.onmouseover = () => { identifyBtn.style.backgroundColor = "#d4a910"; };
    identifyBtn.onmouseout = () => { identifyBtn.style.backgroundColor = "#f5c518"; };
    controlPanel.appendChild(identifyBtn);

    // Results container
    const resultDiv = document.createElement('div');
    resultDiv.style.marginTop = "25px";
    resultDiv.style.textAlign = "left";
    container.appendChild(resultDiv);

    // The Event Listener logic
    identifyBtn.addEventListener('click', async () => {
        const key = keyInput.value.trim();
        if (!key) {
            resultDiv.innerHTML = '<div style="padding: 10px; background-color: #ffebee; color: #c62828; border-radius: 5px;">Please enter your OpenAI API key to process the image.</div>';
            return;
        }

        // Set Loading state
        identifyBtn.disabled = true;
        identifyBtn.textContent = "Analyzing Scene...";
        identifyBtn.style.opacity = "0.7";
        keyInput.disabled = true;
        
        resultDiv.innerHTML = `
            <div style="text-align: center; padding: 20px;">
                <div style="display: inline-block; width: 30px; height: 30px; border: 3px solid #f3f3f3; border-top: 3px solid #f5c518; border-radius: 50%; animation: spin 1s linear infinite;"></div>
                <p style="margin-top: 10px; font-weight: bold;">Searching neural network...</p>
                <style>@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>
            </div>
        `;

        try {
            const response = await fetch('https://api.openai.com/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${key}`
                },
                body: JSON.stringify({
                    model: 'gpt-4o',
                    messages: [
                        {
                            role: 'user',
                            content: [
                                {
                                    type: 'text',
                                    text: 'You are an elite movie and TV show identification assistant. Look at this frame/image. Identify the movie or TV show. Respond ONLY with a raw JSON object and nothing else. The JSON format must be strictly: {"title": "Movie/Show Title", "year": "Release Year", "imdb_id": "IMDb ID (e.g. tt0111161)", "description": "A very brief 1-2 sentence description of what is happening in the scene or general synopsis."}. If you are completely unable to identify it or unsure, return: {"title": "Unknown", "year": "", "imdb_id": "", "description": "Could not identify the movie."}. Do not include markdown code block formatting such as `json`.'
                                },
                                {
                                    type: 'image_url',
                                    image_url: {
                                        url: dataUrl
                                    }
                                }
                            ]
                        }
                    ],
                    max_tokens: 300,
                    temperature: 0.1
                })
            });

            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.error?.message || 'Failed to communicate with OpenAI API');
            }

            const data = await response.json();
            let aiText = data.choices[0].message.content.trim();
            
            // Clean up possible markdown code block or quotes wrapper
            aiText = aiText.replace(/^(`{3}json)/i, "").replace(/(`{3})$/, "").trim();

            let movieData;
            try {
                movieData = JSON.parse(aiText);
            } catch (err) {
                throw new Error("Could not parse AI response into JSON. Raw response: " + aiText);
            }

            if (movieData.title && movieData.title !== "Unknown") {
                const imdbUrl = movieData.imdb_id ? `https://www.imdb.com/title/${movieData.imdb_id}/` : `https://www.imdb.com/find?q=${encodeURIComponent(movieData.title)}`;
                resultDiv.innerHTML = `
                    <div style="padding: 15px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #f9f9f9;">
                        <h3 style="margin: 0 0 10px 0;">🎉 Identified:</h3>
                        <p style="margin: 5px 0;"><strong>Title:</strong> ${movieData.title}</p>
                        <p style="margin: 5px 0;"><strong>Year:</strong> ${movieData.year}</p>
                        <p style="margin: 5px 0;"><strong>Description:</strong> ${movieData.description}</p>
                        <a href="${imdbUrl}" target="_blank" style="display: inline-block; margin-top: 15px; padding: 8px 15px; background-color: #f5c518; color: #000; text-decoration: none; border-radius: 5px; font-weight: bold;">View on IMDb</a>
                    </div>
                `;
            } else {
                resultDiv.innerHTML = `
                    <div style="padding: 15px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #fff3e0;">
                        <p style="margin: 0; color: #e65100;"><strong>Could not identify:</strong> ${movieData.description || 'The image may be too ambiguous or the AI does not recognize it.'}</p>
                    </div>
                `;
            }

        } catch (error) {
            resultDiv.innerHTML = `<div style="padding: 15px; border: 1px solid #ffcdd2; border-radius: 8px; background-color: #ffebee; color: #c62828;"><strong>Error:</strong> ${error.message}</div>`;
        } finally {
            identifyBtn.disabled = false;
            identifyBtn.textContent = "Identify Movie";
            identifyBtn.style.opacity = "1";
            keyInput.disabled = false;
        }
    });

    return container;
}