Image Linguistics Query Input Tool

/**
 * Creates an interactive UI component for linguistic annotation of an image.
 * This tool displays the original image along with input fields for a title,
 * linguistic queries, and a language code.
 *
 * @param {Image} originalImg The original javascript Image object to be displayed.
 * @param {string} title The default title or name for the linguistic entry.
 * @param {string} queries The default text for the linguistic queries textarea.
 * @param {string} languageCode The default language code (e.g., 'en', 'es', 'ru').
 * @returns {HTMLDivElement} A div element containing the image and the input form, ready to be displayed.
 */
function processImage(originalImg, title = "Linguistics", queries = "", languageCode = "en") {
    // Create the main container for the tool
    const container = document.createElement('div');
    container.style.fontFamily = "Arial, sans-serif";
    container.style.border = "1px solid #ccc";
    container.style.borderRadius = "8px";
    container.style.padding = "16px";
    container.style.maxWidth = "500px";
    container.style.boxShadow = "0 4px 8px rgba(0,0,0,0.1)";
    container.style.display = "flex";
    container.style.flexDirection = "column";
    container.style.gap = "16px";
    container.style.backgroundColor = "#f9f9f9";

    // Create a canvas to display the image, ensuring it fits within the container
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Calculate dimensions to fit the image while maintaining aspect ratio
    const maxWidth = 468; // Max width inside the container (500px - 2*16px padding)
    const scale = Math.min(1, maxWidth / originalImg.width);
    canvas.width = originalImg.width * scale;
    canvas.height = originalImg.height * scale;
    canvas.style.maxWidth = "100%";
    canvas.style.height = "auto";
    canvas.style.display = "block";
    canvas.style.borderRadius = "4px";

    // Draw the image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    container.appendChild(canvas);

    // Create the form for linguistic inputs
    const form = document.createElement('form');
    form.style.display = 'flex';
    form.style.flexDirection = 'column';
    form.style.gap = '12px';
    // Prevent form submission from reloading the page
    form.addEventListener('submit', (e) => e.preventDefault());

    // Helper function to create labeled input fields
    const createField = (labelText, inputType, defaultValue) => {
        const fieldContainer = document.createElement('div');
        
        const label = document.createElement('label');
        label.textContent = labelText;
        label.style.display = 'block';
        label.style.marginBottom = '4px';
        label.style.fontWeight = 'bold';
        label.style.color = '#333';

        let input;
        if (inputType === 'textarea') {
            input = document.createElement('textarea');
            input.rows = 4;
            input.style.resize = 'vertical';
        } else {
            input = document.createElement('input');
            input.type = inputType;
        }
        
        input.value = defaultValue;
        input.style.width = '100%';
        input.style.padding = '8px';
        input.style.border = '1px solid #ccc';
        input.style.borderRadius = '4px';
        input.style.boxSizing = 'border-box';
        input.style.fontSize = '1em';

        fieldContainer.appendChild(label);
        fieldContainer.appendChild(input);
        return fieldContainer;
    };

    // Create and append the input fields using the helper
    const titleField = createField("Linguistics Name:", "text", title);
    const queriesField = createField("Enter Queries:", "textarea", queries);
    const langField = createField("Language Code:", "text", languageCode);
    langField.querySelector('input').style.width = '80px'; // Language codes are short

    form.appendChild(titleField);
    form.appendChild(queriesField);
    form.appendChild(langField);
    
    container.appendChild(form);

    return container;
}