Image Web Interface Search And Review Tool

function processImage(originalImg, websiteUrl = "https://example.com/search-review", searchText = "Искать", reviewText = "Обзор", theme = "light") {
    // Generate an aesthetic web browser mockup wrapping the image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Configuration
    const padding = 40; // Space for the drop shadow
    const topBarHeight = 60;
    const cornerRadius = 10;
    
    // Enforce size limits to avoid performance issues
    const maxWidth = 1600;
    let imgWidth = originalImg.width;
    let imgHeight = originalImg.height;
    if (imgWidth > maxWidth) {
        imgHeight = imgHeight * (maxWidth / imgWidth);
        imgWidth = maxWidth;
    }
    
    const windowWidth = imgWidth;
    const windowHeight = imgHeight + topBarHeight;
    
    // Set true canvas dimensions including padding for shadows
    canvas.width = windowWidth + padding * 2;
    canvas.height = windowHeight + padding * 2;
    
    // Transparent background for PNG preservation
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Helper to draw a rounded rectangle
    const drawRoundRect = (ctx, x, y, width, height, radius) => {
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
        ctx.lineTo(x + width, y + height - radius);
        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        ctx.lineTo(x + radius, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.closePath();
    };

    // 1. Draw shadow and solid background of the mockup
    ctx.save();
    ctx.shadowColor = "rgba(0, 0, 0, 0.25)";
    ctx.shadowBlur = 25;
    ctx.shadowOffsetY = 10; // Offset shadow slightly downwards
    drawRoundRect(ctx, padding, padding, windowWidth, windowHeight, cornerRadius);
    ctx.fillStyle = theme === "dark" ? "#2B2B2B" : "#F6F6F6";
    ctx.fill();
    ctx.restore();

    // 2. Setup clip for the window contents to maintain rounded corners
    ctx.save();
    drawRoundRect(ctx, padding, padding, windowWidth, windowHeight, cornerRadius);
    ctx.clip();

    // 3. Draw top browser bar
    ctx.fillStyle = theme === "dark" ? "#2B2B2B" : "#F6F6F6";
    ctx.fillRect(padding, padding, windowWidth, topBarHeight);

    // 4. Draw Mac-style UI buttons (Red, Yellow, Green)
    const colors = ["#FF5F56", "#FFBD2E", "#27C93F"];
    for (let i = 0; i < 3; i++) {
        ctx.beginPath();
        ctx.arc(padding + 25 + i * 20, padding + topBarHeight / 2, 6, 0, Math.PI * 2);
        ctx.fillStyle = colors[i];
        ctx.fill();
    }

    // 5. Draw Address Bar
    const addressBarWidth = Math.min(windowWidth * 0.5, 600);
    const addressBarHeight = 32;
    const addressBarX = padding + (windowWidth - addressBarWidth) / 2;
    const addressBarY = padding + (topBarHeight - addressBarHeight) / 2;

    ctx.fillStyle = theme === "dark" ? "#1A1A1A" : "#FFFFFF";
    drawRoundRect(ctx, addressBarX, addressBarY, addressBarWidth, addressBarHeight, 6);
    ctx.fill();

    // 6. Draw URL Text & SSL Lock icon inside the Address Bar
    ctx.fillStyle = theme === "dark" ? "#CCCCCC" : "#666666";
    ctx.font = "14px 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
    ctx.textAlign = "left";
    ctx.textBaseline = "middle";

    const lockX = addressBarX + 15;
    const lockY = addressBarY + addressBarHeight / 2;
    ctx.beginPath();
    ctx.arc(lockX + 5, lockY - 1, 3, Math.PI, 0); // Lock loop
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = ctx.fillStyle;
    ctx.stroke();
    ctx.fillRect(lockX + 1, lockY, 8, 6); // Lock base

    // Append URL Text
    ctx.fillText(websiteUrl, addressBarX + 35, padding + topBarHeight / 2 + 1);

    // 7. Render contextual search & review labels on the extreme right of topbar
    ctx.textAlign = "right";
    ctx.font = "500 13px 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
    ctx.fillStyle = theme === "dark" ? "#AAAAAA" : "#555555";
    ctx.fillText(`${searchText}    ${reviewText}`, padding + windowWidth - 25, padding + topBarHeight / 2 + 1);

    // 8. Output original image below the simulated web interface
    ctx.drawImage(originalImg, padding, padding + topBarHeight, imgWidth, imgHeight);

    // Remove clipping bounds
    ctx.restore(); 
    
    // 9. Add a subtle crisp UI border to enhance presentation
    ctx.lineWidth = 1;
    ctx.strokeStyle = theme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.1)";
    drawRoundRect(ctx, padding, padding, windowWidth, windowHeight, cornerRadius);
    ctx.stroke();

    return canvas;
}