City Photo Search Tool By Topic

async function processImage(originalImg, topic = "Tokyo") {
    // Create canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set Dimensions (Split view layout: Original | Search Result)
    const sideWidth = 600;
    const sideHeight = 600;
    const headerHeight = 80;
    const footerHeight = 40;
    
    canvas.width = sideWidth * 2;
    canvas.height = sideHeight + headerHeight;
    
    // Draw base aesthetic background
    ctx.fillStyle = '#121212';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Draw Header
    ctx.fillStyle = '#ffffff';
    ctx.font = 'bold 36px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(`City Search View: ${topic}`, canvas.width / 2, headerHeight / 2);
    
    // Helper function to draw image matching 'object-fit: cover' behavior
    function drawCover(imgObj, x, y, w, h) {
        const imgRatio = imgObj.width / imgObj.height;
        const targetRatio = w / h;
        let drawW, drawH, drawX, drawY;

        if (imgRatio > targetRatio) {
           drawH = h;
           drawW = h * imgRatio;
           drawX = x - (drawW - w) / 2;
           drawY = y;
        } else {
           drawW = w;
           drawH = w / imgRatio;
           drawX = x;
           drawY = y - (drawH - h) / 2;
        }
        
        ctx.save();
        ctx.beginPath();
        ctx.rect(x, y, w, h);
        ctx.clip();
        ctx.drawImage(imgObj, drawX, drawY, drawW, drawH);
        ctx.restore();
    }
    
    // 1. Draw Original Image on the Left Side
    if (originalImg && originalImg.width > 0) {
        drawCover(originalImg, 0, headerHeight, sideWidth, sideHeight);
    } else {
        ctx.fillStyle = '#222222';
        ctx.fillRect(0, headerHeight, sideWidth, sideHeight);
    }
    
    // Original Side Footer Label
    ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';
    ctx.fillRect(0, canvas.height - footerHeight, sideWidth, footerHeight);
    ctx.fillStyle = '#aaaaaa';
    ctx.font = '18px sans-serif';
    ctx.fillText('Original Image', sideWidth / 2, canvas.height - (footerHeight / 2));

    // 2. Fetch and Draw Searched City Topic on the Right Side
    try {
        // We use the Wikipedia API as a reliable open-access web search for photo endpoints with CORS support
        const url = `https://en.wikipedia.org/w/api.php?action=query&origin=*&format=json&generator=search&gsrsearch=${encodeURIComponent(topic)}&gsrlimit=5&prop=pageimages&pithumbsize=1000`;
        const response = await fetch(url);
        const data = await response.json();
        
        let imageUrl = null;
        const pages = data.query?.pages;
        
        // Find the first matching relevant thumbnail returned by the metadata
        if (pages) {
            for (const key in pages) {
                if (pages[key].thumbnail?.source) {
                    imageUrl = pages[key].thumbnail.source;
                    break;
                }
            }
        }
        
        if (imageUrl) {
            const searchImg = new Image();
            searchImg.crossOrigin = "Anonymous";
            
            // Wait for dynamically fetched graphic to load
            await new Promise((resolve, reject) => {
                searchImg.onload = resolve;
                searchImg.onerror = reject;
                searchImg.src = imageUrl;
            });
            
            // Display Fetched Result
            drawCover(searchImg, sideWidth, headerHeight, sideWidth, sideHeight);
            
            // Result Side Footer Label
            ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';
            ctx.fillRect(sideWidth, canvas.height - footerHeight, sideWidth, footerHeight);
            ctx.fillStyle = '#4CAF50';
            ctx.fillText(`Wikipedia Extracted Image`, sideWidth + (sideWidth / 2), canvas.height - (footerHeight / 2));
            
        } else {
             // Handle no graphic payload discovered
             ctx.fillStyle = '#1e242b';
             ctx.fillRect(sideWidth, headerHeight, sideWidth, sideHeight);
             ctx.fillStyle = '#e0e0e0';
             ctx.font = '20px sans-serif';
             ctx.fillText('No open-source photo found for this topic.', sideWidth + (sideWidth / 2), headerHeight + (sideHeight / 2));
        }
    } catch (e) {
        // Handle network and search constraint failures gracefully
        ctx.fillStyle = '#2c1e1e';
        ctx.fillRect(sideWidth, headerHeight, sideWidth, sideHeight);
        ctx.fillStyle = '#ff6b6b';
        ctx.font = '20px sans-serif';
        ctx.fillText('Network error extracting search results.', sideWidth + (sideWidth / 2), headerHeight + (sideHeight / 2));
    }
    
    // Draw Center Decorative Divider
    ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
    ctx.fillRect(sideWidth - 3, headerHeight, 6, sideHeight);
    
    return canvas;
}