Image Topic Search And Generator Creator

function processImage(originalImg, search = "Topic", generator = "Creator") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Maintain original image dimensions
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    // Draw the original image as background
    ctx.drawImage(originalImg, 0, 0);
    
    // Calculate adaptive sizes based on image dimensions
    const minDim = Math.min(canvas.width, canvas.height);
    const searchBarHeight = Math.max(Math.min(minDim * 0.12, 80), 36);
    const barWidth = Math.min(canvas.width * 0.9, searchBarHeight * 15);
    const marginX = (canvas.width - barWidth) / 2;
    const marginY = searchBarHeight * 0.8;
    const radius = searchBarHeight / 2;
    
    // --- Draw Search Bar ---
    // Shadow for depth
    ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
    ctx.shadowBlur = 12;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 4;
    
    ctx.fillStyle = "rgba(255, 255, 255, 0.96)";
    ctx.strokeStyle = "rgba(220, 220, 220, 1)";
    ctx.lineWidth = 1;
    
    // Rounded rectangle path
    ctx.beginPath();
    ctx.moveTo(marginX + radius, marginY);
    ctx.lineTo(marginX + barWidth - radius, marginY);
    ctx.quadraticCurveTo(marginX + barWidth, marginY, marginX + barWidth, marginY + radius);
    ctx.lineTo(marginX + barWidth, marginY + searchBarHeight - radius);
    ctx.quadraticCurveTo(marginX + barWidth, marginY + searchBarHeight, marginX + barWidth - radius, marginY + searchBarHeight);
    ctx.lineTo(marginX + radius, marginY + searchBarHeight);
    ctx.quadraticCurveTo(marginX, marginY + searchBarHeight, marginX, marginY + searchBarHeight - radius);
    ctx.lineTo(marginX, marginY + radius);
    ctx.quadraticCurveTo(marginX, marginY, marginX + radius, marginY);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    
    // Reset shadow for internal elements
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    
    // --- Draw Magnifying Glass (Search Icon) ---
    const iconCenterY = marginY + searchBarHeight / 2;
    const iconCenterX = marginX + searchBarHeight / 2 + (searchBarHeight * 0.1);
    const iconSize = searchBarHeight * 0.18;
    
    ctx.lineCap = "round";
    ctx.strokeStyle = "#888";
    ctx.lineWidth = Math.max(searchBarHeight * 0.05, 2);
    ctx.beginPath();
    ctx.arc(iconCenterX, iconCenterY, iconSize, 0, Math.PI * 2);
    ctx.moveTo(iconCenterX + iconSize * 0.7, iconCenterY + iconSize * 0.7);
    ctx.lineTo(iconCenterX + iconSize * 1.5, iconCenterY + iconSize * 1.5);
    ctx.stroke();
    
    // --- Draw "Search" Action Button ---
    const btnWidth = searchBarHeight * 1.8;
    const btnHeight = searchBarHeight * 0.75;
    const btnX = marginX + barWidth - btnWidth - (searchBarHeight * 0.125);
    const btnY = marginY + (searchBarHeight - btnHeight) / 2;
    const btnRadius = btnHeight / 2;
    
    ctx.fillStyle = "#4285f4"; // recognizable action blue
    ctx.beginPath();
    ctx.moveTo(btnX + btnRadius, btnY);
    ctx.lineTo(btnX + btnWidth - btnRadius, btnY);
    ctx.quadraticCurveTo(btnX + btnWidth, btnY, btnX + btnWidth, btnY + btnRadius);
    ctx.lineTo(btnX + btnWidth, btnY + btnHeight - btnRadius);
    ctx.quadraticCurveTo(btnX + btnWidth, btnY + btnHeight, btnX + btnWidth - btnRadius, btnY + btnHeight);
    ctx.lineTo(btnX + btnRadius, btnY + btnHeight);
    ctx.quadraticCurveTo(btnX, btnY + btnHeight, btnX, btnY + btnHeight - btnRadius);
    ctx.lineTo(btnX, btnY + btnRadius);
    ctx.quadraticCurveTo(btnX, btnY, btnX + btnRadius, btnY);
    ctx.closePath();
    ctx.fill();
    
    // Button Text
    const btnFontSize = btnHeight * 0.45;
    ctx.font = `bold ${btnFontSize}px sans-serif`;
    ctx.fillStyle = "#ffffff";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("Search", btnX + btnWidth / 2, btnY + btnHeight / 2);

    // --- Draw Topic Text Inside Bar ---
    const fontSize = searchBarHeight * 0.45;
    ctx.font = `${fontSize}px sans-serif`;
    ctx.fillStyle = "#202124";
    ctx.textAlign = "left";
    
    const textX = iconCenterX + iconSize * 2.5;
    // Constrain max width so it doesn't overlap the blue button
    const maxTextWidth = (btnX) - textX - (searchBarHeight * 0.2); 
    
    ctx.fillText(search, textX, iconCenterY, maxTextWidth);
    
    // --- Draw Generator/Creator Footer ---
    const watermarkFontSize = Math.max(Math.min(minDim * 0.04, 30), 12);
    ctx.font = `bold ${watermarkFontSize}px sans-serif`;
    ctx.textAlign = "right";
    ctx.textBaseline = "bottom";
    
    const watermarkX = canvas.width - (canvas.width * 0.03);
    const watermarkY = canvas.height - (canvas.height * 0.03);
    
    const watermarkText = `Generator: ${generator}`;
    
    // Add text stroke to ensure legibility on any image background
    ctx.strokeStyle = '#000000';
    ctx.lineWidth = Math.max(watermarkFontSize * 0.15, 2);
    ctx.lineJoin = "round";
    ctx.strokeText(watermarkText, watermarkX, watermarkY);
    
    ctx.fillStyle = '#ffffff';
    ctx.fillText(watermarkText, watermarkX, watermarkY);
    
    return canvas;
}