Google Lens Image Search Tool

function processImage(originalImg, buttonText = "Найти в Google Объективе (Google Lens)", uploadUrl = "https://lens.google.com/upload") {
    // Create the main container
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.justifyContent = 'center';
    container.style.padding = '24px';
    container.style.gap = '20px';
    container.style.background = '#ffffff';
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '16px';
    container.style.boxShadow = '0 2px 10px rgba(0,0,0,0.05)';
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.maxWidth = '100%';
    container.style.boxSizing = 'border-box';

    // Title
    const titleContainer = document.createElement('div');
    titleContainer.style.display = 'flex';
    titleContainer.style.alignItems = 'center';
    titleContainer.style.gap = '10px';
    
    const title = document.createElement('h3');
    title.innerText = "Google Lens Image Search";
    title.style.margin = '0';
    title.style.color = '#202124';
    
    titleContainer.appendChild(title);
    container.appendChild(titleContainer);

    // Preview image setup
    const preview = document.createElement('img');
    preview.src = originalImg.src;
    preview.style.maxWidth = '100%';
    preview.style.maxHeight = '350px';
    preview.style.objectFit = 'contain';
    preview.style.borderRadius = '8px';
    preview.style.border = '1px solid #dadce0';
    preview.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)';
    container.appendChild(preview);

    // Hidden form for Google Lens upload
    // Google Lens uses multipart/form-data POST requests to receive images
    const form = document.createElement('form');
    form.action = uploadUrl;
    form.method = 'POST';
    form.enctype = 'multipart/form-data';
    form.target = '_blank'; // Automatically opens results in a new tab
    form.style.display = 'none';

    // File input required by Google Lens endpoint
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.name = 'encoded_image';
    form.appendChild(fileInput);
    container.appendChild(form);

    // Error message container for handling CORS or Blob errors
    const errMsg = document.createElement('p');
    errMsg.style.color = '#d93025';
    errMsg.style.fontSize = '14px';
    errMsg.style.margin = '0';
    errMsg.style.display = 'none';
    errMsg.style.textAlign = 'center';
    container.appendChild(errMsg);

    // Action Submit Button
    const button = document.createElement('button');
    button.innerText = buttonText;
    button.style.padding = '12px 24px';
    button.style.fontSize = '15px';
    button.style.fontWeight = '500';
    button.style.color = '#ffffff';
    button.style.backgroundColor = '#1a73e8';
    button.style.border = 'none';
    button.style.borderRadius = '24px';
    button.style.cursor = 'pointer';
    button.style.transition = 'background-color 0.2s, box-shadow 0.2s';
    
    button.onmouseover = () => {
        button.style.backgroundColor = '#1b66c9';
        button.style.boxShadow = '0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15)';
    };
    button.onmouseout = () => {
        button.style.backgroundColor = '#1a73e8';
        button.style.boxShadow = 'none';
    };

    // Handle Image submission
    button.onclick = () => {
        errMsg.style.display = 'none';
        button.innerText = 'Preparing...';
        button.disabled = true;
        button.style.opacity = '0.7';
        button.style.cursor = 'wait';

        try {
            // Draw original image to canvas to safely extract it as a Blob
            const canvas = document.createElement('canvas');
            canvas.width = originalImg.naturalWidth || originalImg.width;
            canvas.height = originalImg.naturalHeight || originalImg.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(originalImg, 0, 0);

            // Convert canvas content to PNG Blob
            canvas.toBlob((blob) => {
                if (blob) {
                    try {
                        // Create a file from the blob
                        const file = new File([blob], 'search_image.png', { type: 'image/png' });
                        
                        // Utilize DataTransfer API to safely attach the JS file to our hidden HTML input
                        const dataTransfer = new DataTransfer();
                        dataTransfer.items.add(file);
                        fileInput.files = dataTransfer.files;
                        
                        // Submit the hidden form securely mapped to google lens
                        form.submit();
                    } catch (err) {
                        errMsg.innerText = "Error creating file: " + err.message;
                        errMsg.style.display = 'block';
                    }
                } else {
                    errMsg.innerText = "Error: Could not extract image data. Please ensure the image is fully loaded.";
                    errMsg.style.display = 'block';
                }
                
                // Reset button visual state
                button.innerText = buttonText;
                button.disabled = false;
                button.style.opacity = '1';
                button.style.cursor = 'pointer';
            }, 'image/png');
            
        } catch (err) {
            // Usually happens if the `originalImg` originates from a strictly restricted cross-origin link
            errMsg.innerText = "Security Error: Cannot read image data. Ensure the image is uploaded locally or has properly configured CORS.";
            errMsg.style.display = 'block';
            
            button.innerText = buttonText;
            button.disabled = false;
            button.style.opacity = '1';
            button.style.cursor = 'pointer';
        }
    };

    container.appendChild(button);

    return container;
}