Image Search Tool

function processImage(originalImg, buttonText = "Найти в Google") {
    // Create the main container div
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.padding = '25px';
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '12px';
    container.style.maxWidth = '450px';
    container.style.margin = '20px auto';
    container.style.backgroundColor = '#ffffff';
    container.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.05)';

    // Create a canvas for user to preview the image
    const previewCanvas = document.createElement('canvas');
    const MAX_DIMENSION = 300;
    const scale = Math.min(MAX_DIMENSION / originalImg.width, MAX_DIMENSION / originalImg.height, 1);
    previewCanvas.width = originalImg.width * scale;
    previewCanvas.height = originalImg.height * scale;
    
    const ctx = previewCanvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0, previewCanvas.width, previewCanvas.height);
    
    previewCanvas.style.marginBottom = '20px';
    previewCanvas.style.borderRadius = '8px';
    previewCanvas.style.border = '1px solid #ccc';
    previewCanvas.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';

    // Create a button to trigger the Google search
    const button = document.createElement('button');
    button.textContent = buttonText;
    button.style.padding = '12px 24px';
    button.style.backgroundColor = '#4285F4'; // Google Blue
    button.style.color = '#ffffff';
    button.style.border = 'none';
    button.style.borderRadius = '6px';
    button.style.cursor = 'pointer';
    button.style.fontSize = '16px';
    button.style.fontWeight = 'bold';
    button.style.transition = 'background-color 0.2s';
    
    button.onmouseover = () => button.style.backgroundColor = '#357ae8';
    button.onmouseout = () => button.style.backgroundColor = '#4285F4';

    // Handle the search action
    button.addEventListener('click', () => {
        const originalText = button.textContent;
        button.textContent = 'Обработка...';
        button.disabled = true;
        button.style.backgroundColor = '#8ebdff';

        // Get the full original image to a blob
        const fullCanvas = document.createElement('canvas');
        fullCanvas.width = originalImg.width;
        fullCanvas.height = originalImg.height;
        const fullCtx = fullCanvas.getContext('2d');
        fullCtx.drawImage(originalImg, 0, 0);

        fullCanvas.toBlob((blob) => {
            try {
                // Programmatically construct a File upload for Google's search endpoint
                const dt = new DataTransfer();
                const file = new File([blob], 'image.jpg', { type: 'image/jpeg' });
                dt.items.add(file);

                // Create a hidden form pointing to Google's Search by Image upload
                const form = document.createElement('form');
                form.action = 'https://images.google.com/searchbyimage/upload';
                form.method = 'POST';
                form.enctype = 'multipart/form-data';
                form.target = '_blank';
                form.style.display = 'none';

                // Input for the image file
                const input = document.createElement('input');
                input.type = 'file';
                input.name = 'encoded_image'; // This field name is what Google expects
                input.files = dt.files;

                form.appendChild(input);
                document.body.appendChild(form);
                
                // Submit form directly to a new tab
                form.submit();
                
                // Cleanup
                document.body.removeChild(form);
            } catch (err) {
                console.error("Error creating search request:", err);
                alert("Your browser does not support this operation.");
            } finally {
                // Restoring button state
                button.textContent = originalText;
                button.disabled = false;
                button.style.backgroundColor = '#4285F4';
            }
        }, 'image/jpeg', 0.95);
    });

    // Assemble components
    container.appendChild(previewCanvas);
    container.appendChild(button);

    return container;
}