Image Translation Selector

function processImage(originalImg, services = 'google,yandex,bing') {
    // Main container for the canvas, buttons, and text
    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 = '20px';
    container.style.boxSizing = 'border-box';
    container.style.width = '100%';

    // Create a canvas to display the original image, scaling it down if necessary
    const canvas = document.createElement('canvas');
    const MAX_DIMENSION = 500;
    const scale = Math.min(MAX_DIMENSION / originalImg.naturalWidth, MAX_DIMENSION / originalImg.naturalHeight, 1);
    canvas.width = originalImg.naturalWidth * scale;
    canvas.height = originalImg.naturalHeight * scale;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.borderRadius = '8px';
    canvas.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
    container.appendChild(canvas);

    // Add spacing
    const spacer = document.createElement('div');
    spacer.style.height = '20px';
    container.appendChild(spacer);

    // Add instructional text
    const title = document.createElement('p');
    title.textContent = 'Select a service to translate the image:';
    title.style.margin = '0 0 15px 0';
    title.style.fontSize = '18px';
    title.style.fontWeight = 'bold';
    title.style.color = '#333';
    container.appendChild(title);

    // Container for the service buttons
    const buttonContainer = document.createElement('div');
    buttonContainer.style.display = 'flex';
    buttonContainer.style.gap = '15px';
    buttonContainer.style.flexWrap = 'wrap';
    buttonContainer.style.justifyContent = 'center';

    // Map of available services with their details
    const availableServices = {
        google: {
            name: 'Google Translate',
            url: 'https://translate.google.com/?op=images',
            logoSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="margin-right:8px;"><path fill="#4285F4" d="M20.283 10.356h-8.327v3.451h4.792c-.446 2.193-2.313 3.453-4.792 3.453a5.27 5.27 0 0 1-5.279-5.28 5.27 5.27 0 0 1 5.279-5.279c1.455 0 2.791.543 3.822 1.5l2.755-2.755A8.973 8.973 0 0 0 11.956 3a8.994 8.994 0 0 0-8.994 8.994A8.994 8.994 0 0 0 11.956 21c4.97 0 8.994-4.025 8.994-8.994 0-.6-.056-1.183-.167-1.65z"></path></svg>`
        },
        yandex: {
            name: 'Yandex Translate',
            url: 'https://translate.yandex.com/ocr',
            logoSvg: `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="margin-right:8px;"><path d="M10.211 4H12.75V11.895L16.216 4H18.75L13.784 12L18.75 20H16.216L12.75 13.105V20H10.211V13.105L6.746 20H4.211L9.177 12L4.211 4H6.746L10.211 11.895V4Z" fill="#ff0000"/></svg>`
        },
        bing: {
            name: 'Bing Translator',
            url: 'https://www.bing.com/translator',
            logoSvg: `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="margin-right:8px;"><path d="M7 3H14.16C18.03 3 19.95 4.8 19.95 8.79V8.79C19.95 12.78 18.03 14.58 14.16 14.58H9.3V21H7V3ZM14.16 5.58H9.3V12H14.16C16.29 12 17.37 11.07 17.37 8.79V8.79C17.37 6.51 16.29 5.58 14.16 5.58Z" fill="#008373"/></svg>`
        }
    };

    // Parse the services parameter and create a button for each valid service
    const serviceList = services.toLowerCase().split(',').map(s => s.trim());

    serviceList.forEach(serviceKey => {
        if (availableServices[serviceKey]) {
            const service = availableServices[serviceKey];
            const link = document.createElement('a');
            link.href = service.url;
            link.target = '_blank';
            link.rel = 'noopener noreferrer';
            link.title = `Translate with ${service.name}`;

            // Style the link to look like a modern button
            link.style.display = 'inline-flex';
            link.style.alignItems = 'center';
            link.style.padding = '10px 20px';
            link.style.backgroundColor = '#ffffff';
            link.style.border = '1px solid #ddd';
            link.style.borderRadius = '25px';
            link.style.textDecoration = 'none';
            link.style.color = '#333';
            link.style.fontSize = '15px';
            link.style.fontWeight = '500';
            link.style.transition = 'all 0.2s ease-in-out';
            link.style.boxShadow = '0 2px 4px rgba(0,0,0,0.05)';

            // Add hover effect
            link.onmouseover = () => {
                link.style.transform = 'translateY(-2px)';
                link.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
            };
            link.onmouseout = () => {
                link.style.transform = 'translateY(0)';
                link.style.boxShadow = '0 2px 4px rgba(0,0,0,0.05)';
            };

            // Add the service logo and name
            link.innerHTML = `${service.logoSvg} ${service.name}`;

            buttonContainer.appendChild(link);
        }
    });

    // Add the button container to the main container
    container.appendChild(buttonContainer);

    // Add a disclaimer note at the bottom
    const note = document.createElement('p');
    note.innerHTML = '<strong>Note:</strong> You will need to upload your image on the translator\'s website. This tool provides a convenient way to access these services.';
    note.style.fontSize = '13px';
    note.style.color = '#555';
    note.style.marginTop = '25px';
    note.style.maxWidth = '500px';
    note.style.textAlign = 'center';
    note.style.lineHeight = '1.5';
    container.appendChild(note);

    // Return the final UI element
    return container;
}