Определение возраста и пола

Для работы с библиотекой ml5.js в проекте необходимо подключить саму библиотеку. Самый простой способ — использовать CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ml5/0.12.2/ml5.min.js"></script>

Библиотека ml5.js строится поверх TensorFlow.js, поэтому её возможности тесно связаны с ней. Для корректной работы не требуется отдельная установка TensorFlow.js, так как ml5.js автоматически включает необходимый функционал.

Основные модели для определения возраста и пола

В ml5.js используется модель FaceApi, которая позволяет работать с распознаванием лиц, определением эмоций, пола и возраста. Основные возможности модели:

  • Определение местоположения лица на изображении или видео.
  • Предсказание пола и возраста.
  • Определение эмоций (дополнительно).

Для загрузки модели используется следующий синтаксис:

const faceApiOptions = {
  withLandmarks: true,
  withDescriptors: false,
  withExpressions: true
};

const faceapi = ml5.faceApi(videoElement, faceApiOptions, modelReady);

Здесь videoElement — элемент <video> на странице, через который будет поступать изображение. Функция modelReady вызывается после успешной загрузки модели.

Работа с видео и изображениями

Для определения возраста и пола модель может работать с:

  1. Видеопотоком с камеры
  2. Статическими изображениями

Пример подключения камеры:

const video = document.getElementById('videoInput');
navigator.mediaDevices.getUserMedia({ video: {} })
  .then(stream => {
    video.srcObject = stream;
    video.play();
  });

После начала воспроизведения видео можно передавать кадры в модель FaceApi для анализа.

Предсказание возраста и пола

Для получения данных о возрасте и поле используется метод detectSingle или detect, в зависимости от того, обрабатывается одно лицо или несколько:

function detectFace() {
  faceapi.detectSingle(video, (err, result) => {
    if (err) {
      console.error(err);
      return;
    }
    if (result) {
      const { age, gender, genderProbability } = result;
      console.log(`Возраст: ${age.toFixed(0)}, Пол: ${gender}, Уверенность: ${genderProbability.toFixed(2)}`);
    }
    requestAnimationFrame(detectFace);
  });
}

Ключевые моменты:

  • age возвращается в виде числа с десятичной частью, рекомендуется округлять.
  • gender принимает значения "male" или "female".
  • genderProbability показывает уверенность модели в предсказании пола (от 0 до 1).

Настройка параметров модели

FaceApi позволяет гибко настраивать параметры для улучшения точности:

  • withLandmarks — определяет наличие точек лица (для дальнейшей визуализации).
  • withExpressions — включает предсказание эмоций.
  • inputSize — размер входного изображения, влияет на скорость и точность. Большие изображения дают более точные результаты, но требуют больше ресурсов.

Пример:

const options = {
  withLandmarks: true,
  withExpressions: false,
  inputSize: 224
};

const faceapi = ml5.faceApi(video, options, modelReady);

Визуализация результатов

Для отображения результатов на экране используется <canvas>, совмещённый с видео:

function drawBox(result) {
  const canvas = document.getElementById('overlay');
  const context = canvas.getContext('2d');
  canvas.width = video.width;
  canvas.height = video.height;

  context.clearRect(0, 0, canvas.width, canvas.height);

  if (result) {
    const { alignedRect, age, gender } = result;
    const { _x, _y, _width, _height } = alignedRect._box;

    context.strokeStyle = 'red';
    context.lineWidth = 2;
    context.strokeRect(_x, _y, _width, _height);

    context.fillStyle = 'red';
    context.font = '16px Arial';
    context.fillText(`Возраст: ${age.toFixed(0)}`, _x, _y - 20);
    context.fillText(`Пол: ${gender}`, _x, _y - 5);
  }
}

Оптимизация производительности

  • Использовать уменьшенное разрешение видео (video.width и video.height) для ускорения обработки.
  • Вызов requestAnimationFrame вместо таймера для синхронизации с рендерингом браузера.
  • Для статических изображений вызывать предсказание один раз, а не в цикле.

Обработка нескольких лиц

Для распознавания нескольких лиц используется метод detect:

faceapi.detect(video, (err, results) => {
  if (results) {
    results.forEach(result => drawBox(result));
  }
  requestAnimationFrame(() => faceapi.detect(video, arguments.callee));
});

В results содержится массив объектов с информацией о возрасте, поле, эмоциях и расположении каждого лица.

Поддержка современных браузеров

FaceApi в ml5.js требует браузеры с поддержкой:

  • WebRTC (getUserMedia)
  • Canvas API
  • ES6 функций (стрелочные функции, const, let)

Для мобильных устройств рекомендуется уменьшать inputSize для ускорения анализа без значительной потери точности.

Тонкости предсказания возраста и пола

  • Модель может давать неточные результаты при плохом освещении или резком угле лица.
  • Уверенность предсказания пола (genderProbability) стоит использовать для фильтрации сомнительных результатов.
  • Возраст оценивается по визуальным признакам, поэтому реальный возраст может отличаться на ±5–10 лет.

Интеграция с другими проектами

ml5.js позволяет комбинировать FaceApi с другими моделями, например:

  • PoseNet — для анализа поз и движений.
  • ImageClassifier — для классификации объектов на фоне.
  • SoundClassifier — для триггеров по аудио.

Такое сочетание открывает возможности для интерактивных приложений, например, динамическая адаптация интерфейса по возрасту или полу пользователя.

Оглавление