Google Image Search Tool

function processImage(originalImg) {
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.justifyContent = 'center';
    container.style.width = '100%';
    container.style.padding = '20px';
    container.style.boxSizing = 'border-box';
    container.style.fontFamily = 'Arial, sans-serif';

    // Create a canvas to preview the image and prepare it for upload
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Scale image down if it's too large to save bandwidth and upload time
    const MAX_DIMENSION = 1200;
    let width = originalImg.width;
    let height = originalImg.height;
    
    if (width > MAX_DIMENSION || height > MAX_DIMENSION) {
        if (width > height) {
            height = Math.round((height * MAX_DIMENSION) / width);
            width = MAX_DIMENSION;
        } else {
            width = Math.round((width * MAX_DIMENSION) / height);
            height = MAX_DIMENSION;
        }
    }
    
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    canvas.style.maxWidth = '100%';
    canvas.style.maxHeight = '400px';
    canvas.style.objectFit = 'contain';
    canvas.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
    canvas.style.borderRadius = '8px';
    canvas.style.marginBottom = '20px';
    
    // Create the search button
    const searchBtn = document.createElement('button');
    searchBtn.innerText = 'Search on Google';
    searchBtn.style.padding = '12px 24px';
    searchBtn.style.fontSize = '16px';
    searchBtn.style.fontWeight = 'bold';
    searchBtn.style.color = '#ffffff';
    searchBtn.style.backgroundColor = '#4285F4'; // Google Blue
    searchBtn.style.border = 'none';
    searchBtn.style.borderRadius = '24px';
    searchBtn.style.cursor = 'pointer';
    searchBtn.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
    searchBtn.style.transition = 'background-color 0.2s';
    
    searchBtn.onmouseover = () => {
        searchBtn.style.backgroundColor = '#3367D6';
    };
    searchBtn.onmouseout = () => {
        searchBtn.style.backgroundColor = '#4285F4';
    };

    const statusText = document.createElement('div');
    statusText.style.marginTop = '15px';
    statusText.style.fontSize = '14px';
    statusText.style.color = '#555';
    statusText.style.display = 'none';

    // Handle form creation and submission
    searchBtn.onclick = () => {
        statusText.style.display = 'block';
        statusText.innerText = 'Preparing image for Google...';
        searchBtn.disabled = true;
        searchBtn.style.opacity = '0.7';
        searchBtn.style.cursor = 'not-allowed';

        canvas.toBlob((blob) => {
            // Create a hidden form that targets a new tab
            const form = document.createElement('form');
            form.method = 'POST';
            // Google Lens image upload endpoint
            form.action = 'https://lens.google.com/upload';
            form.enctype = 'multipart/form-data';
            form.target = '_blank';
            form.style.display = 'none';

            // Create a file input element for the form
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.name = 'encoded_image'; // This is the expected field name for Google image search

            try {
                // Use DataTransfer to programmatically attach the client-generated Blob as a File
                const dataTransfer = new DataTransfer();
                const file = new File([blob], 'search_image.jpg', { type: 'image/jpeg' });
                dataTransfer.items.add(file);
                fileInput.files = dataTransfer.files;
            } catch (err) {
                console.error("DataTransfer error (Browser may not support programmatic file lists):", err);
                statusText.innerText = 'Error: Your browser does not support programmatic file uploads.';
                statusText.style.color = '#d93025';
                searchBtn.disabled = false;
                searchBtn.style.opacity = '1';
                searchBtn.style.cursor = 'pointer';
                return;
            }

            form.appendChild(fileInput);
            document.body.appendChild(form);
            form.submit();
            
            // Clean up the DOM
            setTimeout(() => {
                document.body.removeChild(form);
                statusText.innerText = 'Opened in new tab!';
                statusText.style.color = '#0f9d58'; // Google Green
                searchBtn.disabled = false;
                searchBtn.style.opacity = '1';
                searchBtn.style.cursor = 'pointer';
                
                // Hide success message after a few seconds
                setTimeout(() => {
                    statusText.style.display = 'none';
                    statusText.style.color = '#555';
                }, 4000);
            }, 500);

        }, 'image/jpeg', 0.9);
    };

    container.appendChild(canvas);
    container.appendChild(searchBtn);
    container.appendChild(statusText);

    return container;
}