Image Gender Classifier

async function processImage(originalImg, colorMale = '#007bff', colorFemale = '#e83e8c') {
    // Create a container to hold the canvas and loading overlay
    const container = document.createElement('div');
    container.style.position = 'relative';
    container.style.display = 'inline-block';
    container.style.fontFamily = 'Arial, sans-serif';

    // Create and setup the canvas
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    container.appendChild(canvas);

    // Create a loading overlay
    const overlay = document.createElement('div');
    overlay.style.position = 'absolute';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.width = '100%';
    overlay.style.height = '100%';
    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
    overlay.style.color = '#ffffff';
    overlay.style.display = 'flex';
    overlay.style.flexDirection = 'column';
    overlay.style.alignItems = 'center';
    overlay.style.justifyContent = 'center';
    overlay.style.fontSize = '20px';
    overlay.style.fontWeight = 'bold';
    overlay.style.zIndex = '10';
    
    const spinner = document.createElement('div');
    spinner.style.border = '4px solid rgba(255, 255, 255, 0.3)';
    spinner.style.borderTop = '4px solid #fff';
    spinner.style.borderRadius = '50%';
    spinner.style.width = '40px';
    spinner.style.height = '40px';
    spinner.style.marginBottom = '15px';
    spinner.style.animation = 'spin 1s linear infinite';
    
    // Add spinner animation keyframes if not exists
    if (!document.getElementById('face-api-spinner-style')) {
        const style = document.createElement('style');
        style.id = 'face-api-spinner-style';
        style.innerHTML = `@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`;
        document.head.appendChild(style);
    }

    const statusText = document.createElement('span');
    statusText.innerText = 'Загрузка ИИ-моделей...';
    
    overlay.appendChild(spinner);
    overlay.appendChild(statusText);
    container.appendChild(overlay);

    try {
        // Dynamically load face-api.js library if it's not already in window
        if (!window.faceapi) {
            await new Promise((resolve, reject) => {
                const script = document.createElement('script');
                // Using Vlad Mandic's active fork of face-api
                script.src = 'https://cdn.jsdelivr.net/npm/@vladmandic/face-api/dist/face-api.min.js';
                script.onload = resolve;
                script.onerror = () => reject(new Error('Failed to load face-api.js library'));
                document.head.appendChild(script);
            });
        }

        statusText.innerText = 'Инициализация распознавания...';

        // Load models for face detection and gender recognition
        const MODEL_URL = 'https://vladmandic.github.io/face-api/model/';
        await Promise.all([
            faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
            faceapi.nets.ageGenderNet.loadFromUri(MODEL_URL)
        ]);

        statusText.innerText = 'Анализ изображения...';

        // Perform face detection and gender prediction
        const detections = await faceapi.detectAllFaces(canvas, new faceapi.TinyFaceDetectorOptions()).withAgeAndGender();

        // End of loading phase
        overlay.style.display = 'none';

        if (detections.length === 0) {
            // No faces detected message
            ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
            ctx.fillRect(0, 0, canvas.width, 50);
            ctx.fillStyle = '#ffffff';
            ctx.font = '22px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('Лица не обнаружены', canvas.width / 2, 25);
        } else {
            // Draw boxes and text
            detections.forEach(result => {
                const { gender, genderProbability, detection } = result;
                const { x, y, width, height } = detection.box;
                
                const isMale = gender === 'male';
                const boxColor = isMale ? colorMale : colorFemale;
                const labelText = isMale ? 'Мужчина' : 'Женщина';
                const confidenceText = `${Math.round(genderProbability * 100)}%`;
                const fullText = `${labelText} (${confidenceText})`;

                // Highlight box
                ctx.strokeStyle = boxColor;
                ctx.lineWidth = 4;
                ctx.strokeRect(x, y, width, height);

                // Text styling setup
                ctx.font = 'bold 18px Arial';
                const textMetrics = ctx.measureText(fullText);
                const textWidth = textMetrics.width;
                const textHeight = 24;

                // Adjust text position if it goes off-screen at the top
                const isTopOff = y - textHeight - 10 < 0;
                const textBgY = isTopOff ? y + height : y - textHeight - 8;
                const textY = isTopOff ? y + height + textHeight / 1.3 : y - 10;

                // Draw Text Background
                ctx.fillStyle = boxColor;
                ctx.fillRect(x - 2, textBgY, textWidth + 14, textHeight + 8);

                // Draw Text
                ctx.fillStyle = '#ffffff';
                ctx.textAlign = 'left';
                ctx.textBaseline = 'alphabetic';
                ctx.fillText(fullText, x + 5, textY);
            });
        }
    } catch (error) {
        console.error('Error in Image Gender Classifier:', error);
        spinner.style.display = 'none';
        statusText.innerText = 'Ошибка обработки: ' + error.message;
        statusText.style.color = '#ff4444';
    }

    return container;
}