Image Search Engine Translator

async function processImage(originalImg, searchEngines = 'google,bing,yandex,tineye,baidu') {
    // --- 1. Create main container and apply some basic styling ---
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.padding = '20px';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '8px';
    container.style.maxWidth = '600px';
    container.style.lineHeight = '1.6';
    container.style.backgroundColor = '#f9f9f9';

    // --- 2. Create title and description ---
    const title = document.createElement('h2');
    title.textContent = 'Image Search Engine Helper';
    title.style.marginTop = '0';
    container.appendChild(title);
    
    const description = document.createElement('p');
    description.textContent = 'This tool helps you perform a reverse image search on multiple search engines. Since we cannot search automatically due to browser security, please follow the steps below.';
    description.style.borderBottom = '1px solid #eee';
    description.style.paddingBottom = '15px';
    description.style.marginBottom = '15px';
    container.appendChild(description);


    // --- 3. Attempt to process the image and get a downloadable Data URL ---
    let dataUrl = null;
    let processingError = null;

    try {
        // Wait for the image to be fully loaded before using its dimensions
        await new Promise((resolve, reject) => {
            if (originalImg.complete && originalImg.naturalWidth > 0) {
                return resolve();
            }
            originalImg.onload = () => resolve();
            originalImg.onerror = () => reject(new Error('The provided image could not be loaded.'));
        });

        // Attempt to draw the image to a canvas to get its data.
        // This will fail if the image is from a different origin (CORS).
        const canvas = document.createElement('canvas');
        canvas.width = originalImg.naturalWidth;
        canvas.height = originalImg.naturalHeight;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(originalImg, 0, 0);
        dataUrl = canvas.toDataURL('image/png');

    } catch (e) {
        console.error("Image processing error:", e);
        if (e.name === 'SecurityError') {
            processingError = `<strong>Step 1: Could not process the image automatically.</strong> This is because it's from another website with security policies (CORS). Please <strong>right-click the original image and save it</strong> to your computer.`;
        } else {
            processingError = `An error occurred while loading the image: ${e.message}`;
        }
    }

    // --- 4. Build the UI based on whether the image was accessible ---
    if (processingError) {
        const errorMsg = document.createElement('p');
        errorMsg.innerHTML = processingError;
        errorMsg.style.color = '#d9534f';
        errorMsg.style.backgroundColor = '#f2dede';
        errorMsg.style.border = '1px solid #ebccd1';
        errorMsg.style.padding = '10px';
        errorMsg.style.borderRadius = '4px';
        container.appendChild(errorMsg);
    } else {
        // Create a nice layout with the image preview and download button
        const instructionsDiv = document.createElement('div');
        instructionsDiv.style.display = 'flex';
        instructionsDiv.style.gap = '20px';
        instructionsDiv.style.alignItems = 'center';

        const previewImg = new Image();
        previewImg.src = dataUrl;
        previewImg.style.maxWidth = '150px';
        previewImg.style.maxHeight = '150px';
        previewImg.style.border = '1px solid #ddd';
        previewImg.style.borderRadius = '4px';
        previewImg.style.objectFit = 'contain';
        instructionsDiv.appendChild(previewImg);

        const textAndButtonDiv = document.createElement('div');
        const instructions = document.createElement('p');
        instructions.innerHTML = `<strong>Step 1: Download the image.</strong>`;
        
        const downloadLink = document.createElement('a');
        downloadLink.href = dataUrl;
        downloadLink.download = 'image-for-search.png';
        downloadLink.textContent = 'Download Image';
        downloadLink.style.display = 'inline-block';
        downloadLink.style.padding = '10px 15px';
        downloadLink.style.backgroundColor = '#28a745';
        downloadLink.style.color = 'white';
        downloadLink.style.textDecoration = 'none';
        downloadLink.style.borderRadius = '4px';
        downloadLink.style.fontWeight = 'bold';

        textAndButtonDiv.appendChild(instructions);
        textAndButtonDiv.appendChild(downloadLink);
        instructionsDiv.appendChild(textAndButtonDiv);
        container.appendChild(instructionsDiv);
    }

    // --- 5. Always show the search engine links ---
    const linksTitle = document.createElement('h3');
    linksTitle.innerHTML = '<strong>Step 2:</strong> Go to a search engine and upload the image.';
    linksTitle.style.marginTop = '20px';
    linksTitle.style.borderTop = '1px solid #eee';
    linksTitle.style.paddingTop = '15px';
    container.appendChild(linksTitle);

    const linksContainer = document.createElement('div');
    linksContainer.style.display = 'flex';
    linksContainer.style.gap = '10px';
    linksContainer.style.flexWrap = 'wrap';

    const engineMap = {
        'google': { name: 'Google Images', url: 'https://lens.google.com/upload' },
        'bing': { name: 'Bing Visual Search', url: 'https://www.bing.com/visualsearch' },
        'yandex': { name: 'Yandex Images', url: 'https://yandex.com/images/' },
        'tineye': { name: 'TinEye', url: 'https://tineye.com/' },
        'baidu': { name: 'Baidu 识图', url: 'https://image.baidu.com/?fr=shitu' } // 识图 means "image search"
    };

    const requestedEngines = searchEngines.split(',').map(e => e.trim().toLowerCase()).filter(e => e);

    if (requestedEngines.length === 0) {
        linksContainer.textContent = 'No search engines specified.';
    } else {
        requestedEngines.forEach(engineKey => {
            if (engineMap[engineKey]) {
                const engineInfo = engineMap[engineKey];
                const link = document.createElement('a');
                link.href = engineInfo.url;
                link.textContent = engineInfo.name;
                link.target = '_blank'; // Open in a new tab
                link.rel = 'noopener noreferrer';
                link.style.display = 'inline-block';
                link.style.padding = '10px 15px';
                link.style.backgroundColor = '#f0f0f0';
                link.style.color = '#333';
                link.style.textDecoration = 'none';
                link.style.borderRadius = '4px';
                link.style.border = '1px solid #ccc';
                link.style.transition = 'background-color 0.2s, border-color 0.2s';
                link.onmouseover = () => { link.style.backgroundColor = '#007bff'; link.style.color = 'white'; link.style.borderColor = '#0056b3' };
                link.onmouseout = () => { link.style.backgroundColor = '#f0f0f0'; link.style.color = '#333'; link.style.borderColor = '#ccc' };
                linksContainer.appendChild(link);
            }
        });
    }

    container.appendChild(linksContainer);

    // --- 6. Return the final, fully constructed element ---
    return container;
}