Image Web Page Finder

async function processImage(originalImg) {
    // Create the main container element
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.padding = '20px';
    container.style.textAlign = 'center';

    // Create a title
    const title = document.createElement('h2');
    title.textContent = 'Reverse Image Search';
    title.style.marginBottom = '10px';
    container.appendChild(title);

    // Create an explanation paragraph
    const explanation = document.createElement('p');
    explanation.style.fontSize = '14px';
    explanation.style.color = '#555';
    explanation.style.margin = '0 auto 25px auto';
    explanation.style.maxWidth = '500px';

    // Check if the image source is a publicly accessible URL
    const isPublicUrl = originalImg.src.startsWith('http');
    const encodedUrl = encodeURIComponent(originalImg.src);

    if (isPublicUrl) {
        explanation.innerHTML = 'Click a provider below to search for where this image appears on the web.';
    } else {
        explanation.innerHTML = 'Since this image is not from a public URL (e.g., uploaded from your device), you will need to manually upload it to the search engine. Click a provider below to visit their reverse image search page.';
    }
    container.appendChild(explanation);
    
    // Define the reverse image search providers
    const providers = [
        {
            name: 'Google Lens',
            searchUrl: isPublicUrl ? `https://lens.google.com/uploadbyurl?url=${encodedUrl}` : 'https://lens.google.com/',
            logo: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBmaWxsPSIjNDE4NUY0IiBkPSJNMTEuNSA5QzEwLjEyIDkgOSAxMC4xMiA5IDExLjVTMTAuMTIgMTQgMTEuNSAxNFMxNCAxMi44OCAxNCAxMS41UjkuNUgxMUMxMS4yOCA5IDExLjUgOS4yMiAxMS41IDlaIi8+PHBhdGggZmlsbD0iI0VBNDMzNSIgZD0iTTIgMTEuNUMyIDYuMjcgNi4yNyAyIDExLjUgMlYwQzUuMTYgMCAwIDUuMTYgMCAxMS41UzUuMTYgMjMgMTEuNSAyM1YyMUM2LjI3IDIxIDIgMTYuNzMgMiAxMS41WiIvPjxwYXRoIGZpbGw9IiNGQkJDMDQiIGQ9Ik0yMyAxMS41QzIzIDE3Ljg0IDE3Ljg0IDIzIDExLjUgMjNWMTguNUMxNS45MiAxOC41IDIwIDE0LjU4IDIwIDEwSDIzVjExLjVaIi8+PHBhdGggZmlsbD0iIzNBODUzIiBkPSJNMTEuNSAyQzE2LjczIDIgMjEgNi4yNyAyMSAxMS41SDI0QzI0IDUuMTYgMTcuODQgMCAxMS41IDBWMloiLz48L3N2Zz4=`
        },
        {
            name: 'Bing Visual Search',
            searchUrl: isPublicUrl ? `https://www.bing.com/images/search?view=detailv2&iss=sbi&q=imgurl:${encodedUrl}` : 'https://www.bing.com/visualsearch',
            logo: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBmaWxsPSIjMDA4NDA4IiBkPSJNMjAuMjA2LDM1LjQxNkw4LjMyNSwyNi4zODRsOS40NDQtMy43MjNMNC4xOTIsMTEuOTA3bDIwLjAxNCw4LjE1MyA4LjU5NC0yMC4xNzcgMy43MDMsOS41NTJ6Ii8+PHBhdGggZmlsbD0iIzAwODQwOCIgZD0iTTI2Ljg0Myw0Mi45MzJsLTE0LjYyMS02LjMyMmw2LjQ0LTE0LjQ5OWwxNS41MTksNi4wNjV6Ii8+PC9zdmc+`
        },
        {
            name: 'TinEye',
            searchUrl: isPublicUrl ? `https://tineye.com/search?url=${encodedUrl}` : 'https://tineye.com/',
            logo: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDA5Q0YwIiBkPSJNMTAuNSAxOGMtNC4zNCAwLTgtMy42Ni04LTggMC00LjM0IDMuNjYtOCA4LTggMi4zMSAwIDQuMzguOTMgNS44MyAyLjQ1YzEuMjEgMS4yNyAxLjk3IDMuMDYgMS45NyA1IDAgNC4zMy0zLjY2IDgtOC4wMyA4ek0xMSAyLjYyYzQuMDggMCA3LjM4IDMuMyA3LjM4IDcuMzggMCA0LjA4LTMuMyA3LjM4LTcuMzggNy4zOC00LjA4IDAtOC4wMS0zLjMtOC4wMS03LjM4QzIuOTkgNS45MiA2LjkyIDIuNjIgMTEgMi42MnptNyAxNy4zOGMtMi4zNCAwLTQuNS0uOTMtNi0yLjQ1LTEuMjEtMS4yNy0xLjk3LTMuMDYtMS45Ny01IDAtLjc4LjEyLTEuNTMuMzQtMi4yMy0uMTctLjA4LS4zNS0uMTItLjU0LS4xNC00LjA4IDAtNy4zOCAzLjMtNy4zOCA3LjM4IDAgNC4wOCAzLjMgOC4wMSA3LjM4IDguMDEgMS45OSAwIDMuODEtLjc4IDUuMTYtMi4wNWwxLjY0IDEuNjRjLjE4LjE4LjQxLjI3LjY0LjI3LjI0IDAgLjQ2LS4wOS42NC0uMjdsMi4zNC0yLjM0Yy4zNS0uMzYuMzUtLjkzIDAtMS4yOUwxOCAyMHptLTcuNjMtMi4wMWMtLjA1LS4wMy0uMDktLjA2LS4xMy0uMDlsLS4wNy0uMDVjLTEuMjQtLjg4LTMuOTQtMy4yLTUuNTItNC43Ni0uMDYtLjA2LS4xMS0uMTMtLjE2LS4xOS0uNDItLjQyLS42Ni0xLS42Ni0xLjYgMC0uNDkuMTQtLjk0LjQxLTEuMzQuNDQtLjYzIDEuMzktMS4wMyAyLjM2LTEuMDMgMS4yNCAwIDIuNzUgMS4wNSAzLjk5IDIuMjlsMy4wNSAzLjA1Yy4wMS4wMS4wMy4wMi4wNC4wNC42My42My45OSAxLjQ5Ljk5IDIuMzkgMCAuNi0uMjQgMS4xNi0uNjcgMS41OS0uMTkuMTktLjM5LjM2LS42LjUxLS42Ni40Ni0xLjczLjkyLTIuMy45Mi0uMjYgMC0uNTMtLjA0LS43OC0uMTItLjE3LS4wNS0uMzMtLjEzLS41LS4yMi0uMjUtLjE0LS40OS0uMjktLjcyLS40NEMxMS4yOSAxNy4zMSAxMS4xIDE3IDEwLjM3IDE3Ljk5eiIvPjwvc3ZnPg==`
        }
    ];

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

    // Create a styled link for each provider
    providers.forEach(provider => {
        const link = document.createElement('a');
        link.href = provider.searchUrl;
        link.target = '_blank'; // Open in a new tab
        link.rel = 'noopener noreferrer';
        link.style.display = 'flex';
        link.style.alignItems = 'center';
        link.style.padding = '10px 15px';
        link.style.border = '1px solid #ccc';
        link.style.borderRadius = '5px';
        link.style.textDecoration = 'none';
        link.style.color = '#333';
        link.style.backgroundColor = '#f9f9f9';
        link.style.transition = 'background-color 0.2s, box-shadow 0.2s';
        link.style.fontSize = '16px';
        
        link.onmouseover = () => {
             link.style.backgroundColor = '#f0f0f0';
             link.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
        };
        link.onmouseout = () => {
             link.style.backgroundColor = '#f9f9f9';
             link.style.boxShadow = 'none';
        };

        const logo = document.createElement('img');
        logo.src = provider.logo;
        logo.alt = `${provider.name} logo`;
        logo.style.width = '24px';
        logo.style.height = '24px';
        logo.style.marginRight = '8px';

        link.appendChild(logo);
        link.appendChild(document.createTextNode(provider.name));
        
        buttonContainer.appendChild(link);
    });
    
    container.appendChild(buttonContainer);

    // Return the single container element
    return container;
}