Webpage Icon Search Tool For AI Services Topic

function processImage(originalImg, topicText = "Другие ИИ Сервисы", iconSize = 512) {
    const canvas = document.createElement('canvas');
    canvas.width = iconSize;
    canvas.height = iconSize;
    const ctx = canvas.getContext('2d');

    // 1. Create a rounded corner clipping path for a "Webpage Icon" / "App Icon" look
    ctx.beginPath();
    const radius = iconSize * 0.18; 
    ctx.moveTo(radius, 0);
    ctx.lineTo(iconSize - radius, 0);
    ctx.quadraticCurveTo(iconSize, 0, iconSize, radius);
    ctx.lineTo(iconSize, iconSize - radius);
    ctx.quadraticCurveTo(iconSize, iconSize, iconSize - radius, iconSize);
    ctx.lineTo(radius, iconSize);
    ctx.quadraticCurveTo(0, iconSize, 0, iconSize - radius);
    ctx.lineTo(0, radius);
    ctx.quadraticCurveTo(0, 0, radius, 0);
    ctx.closePath();
    ctx.clip();

    // 2. Draw and center the original image (mimicking CSS object-fit: cover)
    const scale = Math.max(iconSize / originalImg.width, iconSize / originalImg.height);
    const w = originalImg.width * scale;
    const h = originalImg.height * scale;
    const x = (iconSize - w) / 2;
    const y = (iconSize - h) / 2;
    ctx.drawImage(originalImg, x, y, w, h);

    // 3. Apply an "AI-themed" dark purple/cyan gradient overlay to make text pop
    const grad = ctx.createLinearGradient(0, 0, 0, iconSize);
    grad.addColorStop(0, 'rgba(20, 20, 40, 0.4)');
    grad.addColorStop(1, 'rgba(35, 10, 65, 0.9)');
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, iconSize, iconSize);

    // 4. Draw a "Search" Magnifying Glass Icon in the center with a glowing effect
    ctx.save();
    const centerX = iconSize * 0.5;
    const centerY = iconSize * 0.42;
    
    // AI Neon Glow
    ctx.shadowColor = '#00f0ff';
    ctx.shadowBlur = iconSize * 0.05;
    
    ctx.strokeStyle = "#ffffff";
    ctx.lineWidth = iconSize * 0.045;
    ctx.lineCap = "round";

    // Magnifying glass circle
    ctx.beginPath();
    const glassRadius = iconSize * 0.12;
    ctx.arc(centerX - glassRadius * 0.3, centerY - glassRadius * 0.3, glassRadius, 0, Math.PI * 2);
    ctx.stroke();

    // Magnifying glass handle
    ctx.beginPath();
    ctx.moveTo(centerX + glassRadius * 0.5, centerY + glassRadius * 0.5);
    ctx.lineTo(centerX + glassRadius * 1.5, centerY + glassRadius * 1.5);
    ctx.stroke();
    ctx.restore();

    // 5. Draw the topic text ("Другие ИИ Сервисы" by default)
    ctx.fillStyle = "#ffffff";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.font = `bold ${iconSize * 0.08}px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`;
    
    // Text drop shadow for legibility
    ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
    ctx.shadowBlur = iconSize * 0.02;
    ctx.shadowOffsetY = iconSize * 0.005;

    // Limit text width to 90% of the icon width
    ctx.fillText(topicText, iconSize / 2, iconSize * 0.82, iconSize * 0.9);

    // 6. Draw a subtle inner glossy border overlay
    ctx.shadowColor = 'transparent';
    ctx.beginPath();
    ctx.moveTo(radius, 0);
    ctx.lineTo(iconSize - radius, 0);
    ctx.quadraticCurveTo(iconSize, 0, iconSize, radius);
    ctx.lineTo(iconSize, iconSize - radius);
    ctx.quadraticCurveTo(iconSize, iconSize, iconSize - radius, iconSize);
    ctx.lineTo(radius, iconSize);
    ctx.quadraticCurveTo(0, iconSize, 0, iconSize - radius);
    ctx.lineTo(0, radius);
    ctx.quadraticCurveTo(0, 0, radius, 0);
    ctx.closePath();
    ctx.strokeStyle = "rgba(255, 255, 255, 0.25)";
    ctx.lineWidth = iconSize * 0.03;
    ctx.stroke(); 
    
    return canvas;
}