Image Search By Studio Company Year Tool

function processImage(originalImg, topic = "Studio Company Year", showOverlay = 1) {
    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.backgroundColor = '#f4f7f6';
    container.style.borderRadius = '10px';
    container.style.boxShadow = '0 4px 10px rgba(0,0,0,0.1)';
    container.style.width = '100%';
    container.style.maxWidth = '800px';
    container.style.boxSizing = 'border-box';
    container.style.margin = '0 auto';

    const header = document.createElement('h3');
    header.innerText = 'Image Search By Topic Tool';
    header.style.marginTop = '0';
    header.style.color = '#333';
    container.appendChild(header);

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.style.maxWidth = '100%';
    canvas.style.border = '2px solid #ddd';
    canvas.style.borderRadius = '6px';
    canvas.style.marginBottom = '20px';
    container.appendChild(canvas);

    let currentTopic = topic;

    function drawCanvas() {
        let width = originalImg.width || 800;
        let height = originalImg.height || 600;

        const MAX_WIDTH = 800;
        const MAX_HEIGHT = 600;

        if (width > MAX_WIDTH) {
            height = Math.round(height * (MAX_WIDTH / width));
            width = MAX_WIDTH;
        }
        if (height > MAX_HEIGHT) {
            width = Math.round(width * (MAX_HEIGHT / height));
            height = MAX_HEIGHT;
        }

        canvas.width = width;
        canvas.height = height;

        ctx.clearRect(0, 0, width, height);
        ctx.drawImage(originalImg, 0, 0, width, height);

        if (showOverlay === 1 || showOverlay === "1") {
            const barHeight = Math.max(40, height * 0.1);
            ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
            ctx.fillRect(0, height - barHeight, width, barHeight);

            ctx.fillStyle = "#ffffff";
            const fontSize = Math.max(14, barHeight * 0.45);
            ctx.font = `bold ${fontSize}px Arial, sans-serif`;
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillText(`Search Topic: ${currentTopic}`, width / 2, height - (barHeight / 2));
        }
    }

    // Draw initially
    drawCanvas();

    const controls = document.createElement('div');
    controls.style.display = 'flex';
    controls.style.gap = '10px';
    controls.style.width = '100%';
    controls.style.flexWrap = 'wrap';
    controls.style.justifyContent = 'center';

    const input = document.createElement('input');
    input.type = 'text';
    input.value = currentTopic;
    input.placeholder = 'Search Topic (e.g., Studio Company Year)';
    input.style.flex = '1 1 200px';
    input.style.padding = '12px';
    input.style.border = '1px solid #ccc';
    input.style.borderRadius = '6px';
    input.style.fontSize = '16px';

    input.addEventListener('input', (e) => {
        currentTopic = e.target.value;
        drawCanvas();
    });

    const searchBtn = document.createElement('button');
    searchBtn.innerText = 'Search Images';
    searchBtn.style.padding = '12px 20px';
    searchBtn.style.border = 'none';
    searchBtn.style.borderRadius = '6px';
    searchBtn.style.backgroundColor = '#4285F4';
    searchBtn.style.color = 'white';
    searchBtn.style.fontSize = '16px';
    searchBtn.style.cursor = 'pointer';
    searchBtn.style.transition = 'background-color 0.2s';
    searchBtn.style.fontWeight = 'bold';
    searchBtn.style.whiteSpace = 'nowrap';
    
    searchBtn.onmouseover = () => searchBtn.style.backgroundColor = '#3367D6';
    searchBtn.onmouseout = () => searchBtn.style.backgroundColor = '#4285F4';

    searchBtn.onclick = () => {
         // Perform a web image search based on the updated topic
         const query = encodeURIComponent(currentTopic);
         window.open(`https://www.google.com/search?tbm=isch&q=${query}`, '_blank');
    };

    const downloadBtn = document.createElement('button');
    downloadBtn.innerText = 'Save Image';
    downloadBtn.style.padding = '12px 20px';
    downloadBtn.style.border = 'none';
    downloadBtn.style.borderRadius = '6px';
    downloadBtn.style.backgroundColor = '#34A853';
    downloadBtn.style.color = 'white';
    downloadBtn.style.fontSize = '16px';
    downloadBtn.style.cursor = 'pointer';
    downloadBtn.style.transition = 'background-color 0.2s';
    downloadBtn.style.fontWeight = 'bold';
    downloadBtn.style.whiteSpace = 'nowrap';

    downloadBtn.onmouseover = () => downloadBtn.style.backgroundColor = '#2D8C45';
    downloadBtn.onmouseout = () => downloadBtn.style.backgroundColor = '#34A853';

    downloadBtn.onclick = () => {
        const link = document.createElement('a');
        link.download = `topic-search-${currentTopic.replace(/[\W_]+/g, '-').toLowerCase()}.png`;
        link.href = canvas.toDataURL('image/png');
        link.click();
    };

    controls.appendChild(input);
    controls.appendChild(searchBtn);
    controls.appendChild(downloadBtn);
    
    container.appendChild(controls);

    return container;
}