Image Based Movie Topic Search Tool

function processImage(originalImg, searchEngine = 'imdb') {
    // Determine the average color to establish the "mood" of the image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 64;
    canvas.height = 64;
    
    // Draw and shrink image to easily calculate average color
    ctx.drawImage(originalImg, 0, 0, 64, 64);
    
    let data;
    try {
        data = ctx.getImageData(0, 0, 64, 64).data;
    } catch (e) {
        // Fallback for missing cross-origin permissions
        data = new Uint8ClampedArray(64 * 64 * 4);
        for(let i = 0; i < data.length; i += 4) {
            data[i] = 120;     // R
            data[i+1] = 120;   // G
            data[i+2] = 120;   // B
            data[i+3] = 255;   // Alpha
        }
    }

    let r = 0, g = 0, b = 0, count = 0;
    
    for (let i = 0; i < data.length; i += 4) {
        if (data[i + 3] > 128) { // Ignore mostly transparent pixels
            r += data[i];
            g += data[i + 1];
            b += data[i + 2];
            count++;
        }
    }
    
    if (count > 0) {
        r = Math.floor(r / count);
        g = Math.floor(g / count);
        b = Math.floor(b / count);
    } else {
        r = 255; g = 255; b = 255;
    }

    // Convert RGB to HSL for semantic mood mapping
    let r_norm = r / 255, g_norm = g / 255, b_norm = b / 255;
    let max = Math.max(r_norm, g_norm, b_norm);
    let min = Math.min(r_norm, g_norm, b_norm);
    let h, s, l = (max + min) / 2;

    if (max === min) {
        h = s = 0; // Achromatic
    } else {
        let d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch (max) {
            case r_norm: h = (g_norm - b_norm) / d + (g_norm < b_norm ? 6 : 0); break;
            case g_norm: h = (b_norm - r_norm) / d + 2; break;
            case b_norm: h = (r_norm - g_norm) / d + 4; break;
        }
        h /= 6;
    }

    // Map the HSL mood combination to corresponding official Movie Genres
    let genres = [];
    if (l < 0.25) {
        // Dark colors (Horror, Thriller, Mystery)
        genres = ['Horror', 'Thriller', 'Mystery'];
    } else if (l > 0.85) {
        // Very bright colors (Comedy, Family, Animation)
        genres = ['Comedy', 'Family', 'Animation'];
    } else if (s < 0.15) {
        // Desaturated/Gray colors (Drama, Film-Noir, Biography)
        genres = ['Drama', 'Film-Noir', 'Biography'];
    } else {
        // Hue specific genres
        if (h < 0.08 || h > 0.92) {
            // Reds
            genres = ['Action', 'Romance', 'War'];
        } else if (h >= 0.08 && h < 0.18) {
            // Oranges/Yellows
            genres = ['Adventure', 'Comedy', 'Western'];
        } else if (h >= 0.18 && h < 0.45) {
            // Greens
            genres = ['Documentary', 'Fantasy', 'History'];
        } else if (h >= 0.45 && h < 0.75) {
            // Blues
            genres = ['Sci-Fi', 'Drama', 'Mystery'];
        } else if (h >= 0.75 && h <= 0.92) {
            // Purples/Pinks
            genres = ['Fantasy', 'Musical', 'Romance'];
        }
    }

    // Build the UI Container
    const container = document.createElement('div');
    container.style.fontFamily = "'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.backgroundColor = '#121212';
    container.style.color = '#ffffff';
    container.style.padding = '30px';
    container.style.borderRadius = '12px';
    container.style.maxWidth = '600px';
    container.style.border = '1px solid #333';
    container.style.boxShadow = '0 10px 30px rgba(0,0,0,0.7)';
    container.style.margin = '20px auto';
    container.style.textAlign = 'center';
    container.style.boxSizing = 'border-box';

    const header = document.createElement('h1');
    header.innerText = 'Image Topic > Movie Search';
    header.style.margin = '0 0 20px 0';
    header.style.fontSize = '24px';
    header.style.letterSpacing = '1px';
    container.appendChild(header);

    const imgPreview = document.createElement('img');
    imgPreview.src = originalImg.src;
    imgPreview.style.maxWidth = '100%';
    imgPreview.style.maxHeight = '300px';
    imgPreview.style.objectFit = 'contain';
    imgPreview.style.borderRadius = '8px';
    imgPreview.style.marginBottom = '20px';
    imgPreview.style.backgroundColor = '#000';
    imgPreview.style.boxShadow = '0 4px 12px rgba(0,0,0,0.5)';
    container.appendChild(imgPreview);

    const colorDiv = document.createElement('div');
    colorDiv.style.display = 'flex';
    colorDiv.style.alignItems = 'center';
    colorDiv.style.marginBottom = '25px';
    colorDiv.style.padding = '10px 20px';
    colorDiv.style.backgroundColor = '#2a2a2a';
    colorDiv.style.borderRadius = '30px';

    const colorSwatch = document.createElement('span');
    colorSwatch.style.display = 'inline-block';
    colorSwatch.style.width = '30px';
    colorSwatch.style.height = '30px';
    colorSwatch.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
    colorSwatch.style.borderRadius = '50%';
    colorSwatch.style.marginRight = '15px';
    colorSwatch.style.border = '2px solid #fff';
    colorSwatch.style.boxShadow = '0 0 8px rgba(255,255,255,0.2)';

    const colorText = document.createElement('span');
    let hueStr = Math.round(h * 360) + '°';
    let satStr = Math.round(s * 100) + '%';
    let lumStr = Math.round(l * 100) + '%';
    colorText.innerText = `Detected Image Mood (HSL: ${hueStr}, ${satStr}, ${lumStr})`;
    colorText.style.fontSize = '14px';

    colorDiv.appendChild(colorSwatch);
    colorDiv.appendChild(colorText);
    container.appendChild(colorDiv);

    const subHeader = document.createElement('h2');
    subHeader.innerText = 'Suggested Movie Topics / Genres';
    subHeader.style.margin = '0 0 15px 0';
    subHeader.style.fontSize = '18px';
    subHeader.style.color = '#e50914';
    container.appendChild(subHeader);

    const genresContainer = document.createElement('div');
    genresContainer.style.display = 'flex';
    genresContainer.style.gap = '12px';
    genresContainer.style.flexWrap = 'wrap';
    genresContainer.style.justifyContent = 'center';

    genres.forEach(genre => {
        const btn = document.createElement('a');
        
        let searchUrl;
        if (searchEngine.toLowerCase() === 'tmdb') {
            searchUrl = `https://www.themoviedb.org/search?query=${genre.toLowerCase()}`;
        } else if (searchEngine.toLowerCase() === 'google') {
            searchUrl = `https://www.google.com/search?q=${genre}+movies`;
        } else {
            // Default to IMDB advanced title search mapped to genre categories
            searchUrl = `https://www.imdb.com/search/title/?genres=${genre.toLowerCase()}`;
        }
        
        btn.href = searchUrl;
        btn.target = '_blank';
        btn.rel = 'noopener noreferrer';
        btn.innerText = "🔍 " + genre;
        btn.style.padding = '8px 18px';
        btn.style.backgroundColor = '#e50914';
        btn.style.color = 'white';
        btn.style.textDecoration = 'none';
        btn.style.borderRadius = '20px';
        btn.style.fontSize = '15px';
        btn.style.fontWeight = 'bold';
        btn.style.transition = 'background-color 0.2s ease, transform 0.2s ease';
        
        btn.onmouseover = () => {
            btn.style.backgroundColor = '#b20710';
            btn.style.transform = 'scale(1.05)';
        };
        btn.onmouseout = () => {
            btn.style.backgroundColor = '#e50914';
            btn.style.transform = 'scale(1)';
        };

        genresContainer.appendChild(btn);
    });

    container.appendChild(genresContainer);

    const footer = document.createElement('p');
    footer.innerText = `Click any genre above to explore related movies on ${searchEngine.toUpperCase()}.`;
    footer.style.fontSize = '13px';
    footer.style.color = '#888888';
    footer.style.marginTop = '25px';
    footer.style.marginBottom = '0';
    container.appendChild(footer);

    return container;
}