Yandex Image Search Tool

function processImage(originalImg, tld = "com") {
    // Create the main container for the UI element
    const container = document.createElement('div');
    container.style.cssText = `
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px;
        font-family: Arial, sans-serif;
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        max-width: 400px;
        margin: 20px auto;
        box-sizing: border-box;
    `;

    // Title
    const header = document.createElement('h3');
    header.textContent = 'Yandex Reverse Image Search';
    header.style.cssText = 'margin-top: 0; margin-bottom: 20px; color: #333; font-size: 18px; text-align: center;';
    container.appendChild(header);

    // Draw the original image to a canvas
    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);

    // Generate a preview image
    const preview = document.createElement('img');
    preview.src = canvas.toDataURL('image/jpeg');
    preview.style.cssText = `
        max-width: 100%;
        max-height: 250px;
        object-fit: contain;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        margin-bottom: 24px;
        background-color: #f9f9f9;
    `;
    container.appendChild(preview);

    // Form to submit the image directly to Yandex Image Search endpoint
    const form = document.createElement('form');
    // Important: Target _blank ensures we open the search result in a new tab without CORS/navigation issues
    form.target = '_blank';
    form.method = 'POST';
    form.action = `https://yandex.${tld}/images/search?rpt=imageview`;
    form.enctype = 'multipart/form-data';
    form.style.cssText = 'display: flex; flex-direction: column; align-items: center; width: 100%;';

    // Hidden file input required by Yandex
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.name = 'upfile'; // The standard parameter Yandex uses for file uploads
    fileInput.style.display = 'none';

    // Submit Button
    const searchBtn = document.createElement('button');
    searchBtn.type = 'submit';
    searchBtn.disabled = true;
    searchBtn.textContent = 'Preparing Image...';
    searchBtn.style.cssText = `
        padding: 12px 24px;
        font-size: 16px;
        font-weight: bold;
        background-color: #e0e0e0;
        color: #666;
        border: none;
        border-radius: 4px;
        width: 100%;
        transition: all 0.2s ease-in-out;
    `;

    // Append form elements
    form.appendChild(fileInput);
    form.appendChild(searchBtn);
    container.appendChild(form);

    // Convert the canvas to a Blob to inject into the form data for automatic submission
    canvas.toBlob((blob) => {
        if (blob) {
            try {
                // Create a File object and attach it to the hidden input using DataTransfer
                const file = new File([blob], 'search_image.jpg', { type: 'image/jpeg' });
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                fileInput.files = dataTransfer.files;

                // Update UI upon successful packaging
                searchBtn.disabled = false;
                searchBtn.textContent = 'Search on Yandex (Яндекс)';
                
                // Set native Yandex styling
                searchBtn.style.backgroundColor = '#ffcc00'; // Yandex Yellow
                searchBtn.style.color = '#000000';
                searchBtn.style.cursor = 'pointer';

                // Add hover effect
                searchBtn.onmouseover = () => { searchBtn.style.backgroundColor = '#f5c400'; };
                searchBtn.onmouseout = () => { searchBtn.style.backgroundColor = '#ffcc00'; };

            } catch (err) {
                // Feature failsafe for older browsers strictly regarding the File/DataTransfer constructors
                searchBtn.textContent = 'Unsupported in this browser';
                searchBtn.style.backgroundColor = '#ff4444';
                searchBtn.style.color = '#fff';
            }
        } else {
            searchBtn.textContent = 'Failed to process image';
            searchBtn.style.backgroundColor = '#ff4444';
            searchBtn.style.color = '#fff';
        }
    }, 'image/jpeg', 0.9);

    return container;
}