Image File Search Topic Drag And Drop Interface

function processImage(originalImg, topic = "Visual Search") {
    // Create the main container div
    const container = document.createElement('div');
    container.style.position = 'relative';
    container.style.display = 'inline-block';
    container.style.width = Math.max(originalImg.width, 300) + 'px';
    container.style.height = Math.max(originalImg.height, 200) + 'px';
    container.style.fontFamily = '"Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.overflow = 'hidden';
    container.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
    container.style.borderRadius = '8px';
    container.style.backgroundColor = '#f8f9fa';

    // Keep the original image as a background
    const bgImg = new Image();
    bgImg.src = originalImg.src;
    bgImg.style.position = 'absolute';
    bgImg.style.top = '0';
    bgImg.style.left = '0';
    bgImg.style.width = '100%';
    bgImg.style.height = '100%';
    bgImg.style.objectFit = 'cover';
    bgImg.style.opacity = '0.4';
    bgImg.style.filter = 'blur(3px)';
    container.appendChild(bgImg);

    // Create the drag and drop dropzone overlay
    const dropzone = document.createElement('div');
    dropzone.style.position = 'absolute';
    dropzone.style.top = '10%';
    dropzone.style.left = '10%';
    dropzone.style.width = '80%';
    dropzone.style.height = '80%';
    dropzone.style.backgroundColor = 'rgba(255, 255, 255, 0.85)';
    dropzone.style.border = '3px dashed #007bff';
    dropzone.style.borderRadius = '12px';
    dropzone.style.display = 'flex';
    dropzone.style.flexDirection = 'column';
    dropzone.style.alignItems = 'center';
    dropzone.style.justifyContent = 'center';
    dropzone.style.cursor = 'pointer';
    dropzone.style.transition = 'all 0.3s ease';
    dropzone.style.padding = '20px';
    dropzone.style.boxSizing = 'border-box';

    // Icon
    const icon = document.createElement('div');
    icon.innerHTML = '📁'; // Folder icon
    icon.style.fontSize = '48px';
    icon.style.marginBottom = '15px';
    icon.style.pointerEvents = 'none';

    // Topic Title
    const title = document.createElement('h2');
    title.innerText = `Topic: ${topic}`;
    title.style.fontSize = '22px';
    title.style.fontWeight = 'bold';
    title.style.color = '#333';
    title.style.margin = '0 0 10px 0';
    title.style.textAlign = 'center';
    title.style.pointerEvents = 'none';

    // Subtitle instruction
    const subtitle = document.createElement('p');
    subtitle.innerText = 'Drag & Drop your image file here to search';
    subtitle.style.fontSize = '16px';
    subtitle.style.color = '#666';
    subtitle.style.margin = '0';
    subtitle.style.textAlign = 'center';
    subtitle.style.pointerEvents = 'none';

    // Result or file display area
    const statusText = document.createElement('p');
    statusText.style.fontSize = '14px';
    statusText.style.color = '#28a745';
    statusText.style.marginTop = '15px';
    statusText.style.fontWeight = '500';
    statusText.style.textAlign = 'center';
    statusText.innerText = '';

    // Append elements
    dropzone.appendChild(icon);
    dropzone.appendChild(title);
    dropzone.appendChild(subtitle);
    dropzone.appendChild(statusText);
    container.appendChild(dropzone);

    // Event listeners to handle the drag and drop interaction mechanics
    dropzone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropzone.style.backgroundColor = 'rgba(230, 242, 255, 0.95)';
        dropzone.style.borderColor = '#0056b3';
        dropzone.style.transform = 'scale(1.02)';
    });

    dropzone.addEventListener('dragleave', (e) => {
        e.preventDefault();
        dropzone.style.backgroundColor = 'rgba(255, 255, 255, 0.85)';
        dropzone.style.borderColor = '#007bff';
        dropzone.style.transform = 'scale(1)';
    });

    dropzone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropzone.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
        dropzone.style.borderColor = '#28a745';
        dropzone.style.transform = 'scale(1)';
        
        if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
            const file = e.dataTransfer.files[0];
            icon.innerHTML = '🔍'; // Magnifying glass icon
            subtitle.innerText = 'File selected:';
            statusText.innerText = `${file.name}\n(Initiating search...)`;
        }
    });

    // Handle click as alternative to drag-and-drop
    dropzone.addEventListener('click', () => {
        const fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.accept = 'image/*';
        fileInput.onchange = (e) => {
            if (e.target.files && e.target.files.length > 0) {
                const file = e.target.files[0];
                icon.innerHTML = '🔍'; // Magnifying glass icon
                subtitle.innerText = 'File selected:';
                statusText.innerText = `${file.name}\n(Initiating search...)`;
                dropzone.style.borderColor = '#28a745';
            }
        };
        fileInput.click();
    });

    return container;
}