Photo Non-Paper Mood Glasses Filter

async function processImage(
    originalImg, 
    glassesWidthPercent = '45', 
    xPercent = '50', 
    yPercent = '40', 
    rotation = '0', 
    blackColor = "#000000",
    glareColor = "#FFFFFF",
    forceManual = '0'
) {
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    
    // Draw original image onto canvas
    ctx.drawImage(originalImg, 0, 0);
    
    // Pixelated "Deal with it" / Cool glasses pattern
    // Designed as a minimalist 30 width x 8 height grid
    const glassesPattern = [
        "111111111111111111111111111111",
        "111111111111111111111111111111",
        "111221111111111111112211111111",
        "112211111111111111112211111111",
        "011111111111000000111111111110",
        "001111111110000000011111111100",
        "000111111100000000001111111000",
        "000011111000000000000111110000"
    ];
    
    // Helper function to draw pixel glasses at defined coordinates and angles
    const drawGlasses = (cx, cy, w, angleDegrees) => {
        ctx.save();
        ctx.translate(cx, cy);
        ctx.rotate(angleDegrees * Math.PI / 180);

        const cols = 30;
        const rows = 8;
        const pixelSize = w / cols;
        const h = rows * pixelSize;

        const startX = -w / 2;
        const startY = -h / 2;

        for (let r = 0; r < rows; r++) {
            for (let c = 0; c < cols; c++) {
                const p = glassesPattern[r][c];
                // Render slightly larger pixels (-0.5 / +1) to avoid anti-aliasing gaps
                if (p === '1') {
                    ctx.fillStyle = blackColor;
                    ctx.fillRect(startX + c * pixelSize - 0.5, startY + r * pixelSize - 0.5, pixelSize + 1, pixelSize + 1); 
                } else if (p === '2') {
                    ctx.fillStyle = glareColor;
                    ctx.fillRect(startX + c * pixelSize - 0.5, startY + r * pixelSize - 0.5, pixelSize + 1, pixelSize + 1);
                }
            }
        }
        ctx.restore();
    };

    let faceHandled = false;
    
    // Attempt automatic face detection if native browser support exists (e.g., experimental Chrome flags or Android WebView)
    if (forceManual !== '1' && 'FaceDetector' in window) {
        try {
            const faceDetector = new window.FaceDetector({ fastMode: true });
            const faces = await faceDetector.detect(originalImg);
            
            if (faces && faces.length > 0) {
                // Add glasses over all detected faces dynamically!
                for (const face of faces) {
                    const box = face.boundingBox;
                    const gw = box.width * 0.9; // Scale roughly to 90% of bounding box width
                    const gx = box.x + box.width / 2; // Center horizontally on the face
                    const gy = box.y + box.height * 0.35; // Approximate eye level height
                    
                    let angle = 0;
                    if (face.landmarks) {
                        const eyes = face.landmarks.filter(l => l.type === 'eye');
                        if (eyes.length >= 2) {
                            let e1 = eyes[0].locations[0];
                            let e2 = eyes[1].locations[0];
                            // Ensure proper left-to-right calculation
                            if (e1.x > e2.x) {
                                [e1, e2] = [e2, e1]; 
                            }
                            const dx = e2.x - e1.x;
                            const dy = e2.y - e1.y;
                            angle = Math.atan2(dy, dx) * 180 / Math.PI;
                        }
                    }
                    drawGlasses(gx, gy, gw, angle);
                }
                faceHandled = true;
            }
        } catch(e) {
            console.warn("FaceDetector API check failed. Falling back to manual positioning.", e);
        }
    }
    
    // Fallback placement (manual sliders provided as parameters) if no face is detected
    if (!faceHandled) {
        const cx = canvas.width * parseFloat(xPercent) / 100;
        const cy = canvas.height * parseFloat(yPercent) / 100;
        const w = canvas.width * parseFloat(glassesWidthPercent) / 100;
        const angle = parseFloat(rotation);
        
        drawGlasses(cx, cy, w, angle);
    }
    
    return canvas;
}