Détection de l'attention avec l'API Video de Vonage

Cet article a été rédigé en collaboration avec Talha Ahsan

Introduction

Dans le monde d'aujourd'hui, de plus en plus d'interactions se font en ligne. Au cours des dernières années, les cours et les réunions en ligne sont devenus monnaie courante. Si cette transition a eu de nombreux avantages, elle a aussi créé des problèmes intéressants à résoudre. L'une d'entre elles consiste à garantir l'attention de l'utilisateur.

L'utilisation de la technologie de détection de l'attention peut avoir un impact important dans des domaines tels que l'éducation ou les réunions en ligne. Elle peut permettre aux présentateurs de comprendre comment l'intérêt des participants fluctue au cours de certaines parties de leurs réunions ou conférences. Elle peut également aider les enseignants à s'assurer que les élèves sont attentifs.

Aujourd'hui, nous allons créer une application de vidéoconférence avec l'API Video de Vonage qui exploite la détection des points de repère des visages pour calculer le score d'attention d'un participant.

Conditions préalables

• Clé et secret de l'API de Vonage

• Node 8.6.2+

• Le gestionnaire de paquets Node (npm)

Pour installer l'application sur votre machine, clonez d'abord le dépôt :

git clone https://github.com/hamzanasir/attention-detection.git

C'est parfait ! Maintenant, allez dans le dépôt et installez les paquets associés via :

npm install

Nous devons maintenant configurer la clé et le secret de l'API de Vonage. Commençons par copier le modèle env :

cp .envcopy .env

Il ne vous reste plus qu'à remplacer les TOKBOX_API_KEY et TOKBOX_SECRET dans le fichier .env par vos informations d'identification. Vous pouvez trouver votre clé API et votre secret sur la page de projet de votre Video API de Vonage. Account.

Vous pouvez démarrer l'application en cliquant sur :

npm start

Tout le code dont nous parlons dans ce blog se trouve dans le fichier `public/js/app.js`.

Fonctionnement de la détection de l'attention

Pour calculer l'attention de l'utilisateur, nous devons d'abord obtenir les points de repère du visage de l'utilisateur dans l'espace tridimensionnel. Une fois que nous les avons obtenus, nous pouvons calculer la position du visage de l'utilisateur en trois dimensions, c'est-à-dire calculer le lacet, le tangage et le roulis (voir le diagramme ci-dessous) du visage de l'utilisateur à l'aide d'un peu de trigonométrie. Pour des raisons de simplicité, nous ne nous intéresserons qu'au lacet et au tangage.

The yaw, pitch and roll angles in the human head motion

Sur la base de ces deux angles, nous pouvons fournir aux utilisateurs un score d'attention global.

Obtention des repères du visage

Nous utiliserons le mode de détection de visage MediaPipe de TensorFlow de TensorFlow pour la détection des visagesl de TensorFlow pour obtenir les points de repère du visage. La raison pour laquelle nous utilisons MediaPipe est qu'il fournit des points de repère tridimensionnels dès le départ, en utilisant l'apprentissage automatique pour déduire la profondeur de la surface du visage sans avoir besoin d'un capteur de profondeur.

Face landmarks visualization from MediaPipe

Pour en savoir plus sur MediaPipe ici

Calcul du tangage et du lacet

Pour calculer la hauteur, nous utilisons les 468 points de repère faciaux (fournis par la bibliothèque de maillages faciaux) correspondant au haut et au bas du visage de l'utilisateur dans les plans y et z. De même, pour le lacet, nous utilisons les points de repère correspondant aux coins extérieurs des yeux de l'utilisateur dans les plans x et z.

Dans les deux cas, nous calculons le point central entre ces deux points et l'angle par rapport à la caméra de l'utilisateur à l'aide de la fonction atan2 (tangente inverse) qui calcule l'angle dans le sens inverse des aiguilles d'une montre entre l'axe des x et le point qui nous intéresse. Vous pouvez voir l'exemple de code ci-dessous :

const radians = (a1, a2, b1, b2) => Math.atan2(y: b2-a2, x: b1-a1);
const angle = {
  yaw: radians(mesh[33][0], mesh[33][2], mesh[263][0], mesh[263][2]),
  pitch: radians(mesh[10][1], mesh[10][2], mesh[152][1], mesh[152][2])
};

Attirer l'attention des utilisateurs

Nous devons maintenant utiliser le tangage et le lacet que nous avons calculés pour attribuer une sorte de score d'attention à l'utilisateur. L'approche que nous utiliserons dans notre cas est influencée par "Attention Span Prediction Using Head-Pose Estimation With Deep Neural Networks"publié dans IEEE Access.

Essentiellement, nous attribuerons un score de 0 à 2 (0 étant un score d'attention faible et 2 un score d'attention plus élevé) sur la base de la valeur calculée pour chacun des angles. Nous attribuons une note avec la fonction suivante getScore basée sur l'article de l'IEEE Access :

const getScore = (degree) => {
  degree = Math.abs(radiansToDegrees(degree));
  if (degree < 10) {
    return 2;
  }
  if (degree < 30) {
    const adjust = (degree - 10) * 0.05;
    return 2.0 - adjust;
  }
  return 0;
};

Nous prenons ensuite le produit des deux scores pour obtenir le score d'attention final de l'utilisateur. Une fois que nous avons obtenu le score d'attention global, nous classons l'attention par catégorie pour permettre aux utilisateurs de visualiser facilement leur niveau d'attention. Nous décomposons cette catégorisation en 4 catégories différentes allant de l'absence de concentration à une concentration élevée. Vous pouvez consulter la procédure de calcul du niveau d'attention global :

Pseudocode for our function to evaluate concentration level.

Les catégories d'attention sont indiquées ci-dessous :

Attention score categorization

Il est important de noter que ces diagrammes représentent un algorithme théorique pour calculer le score d'attention. En réalité, il se peut que vous souhaitiez modifier certains éléments tels que les catégories du score d'attention. L'une des modifications que nous avons apportées à notre application est la suivante : au lieu d'ajouter les champs yaw_score et le pitch_score nous avons choisi de les multiplier pour obtenir une belle progression linéaire du score d'attention.

Intégration avec l'API Video de Vonage

Pour économiser le CPU/GPU de chaque participant, au lieu que chaque participant exécute l'analyse du maillage du visage pour chaque participant sur sa machine, chaque participant à l'appel sera responsable de sa propre mesure du score d'attention. Nous allons donc initialiser l'algorithme dans le point de terminaison session.publish endpoint :

session.publish(publisher, async (err) => {
  if (err) {
    console.log('Error', err);
  } else {
    const publisherElement = document.getElementById('publisher');
    streamId = publisher.stream.id;
    const webcam = publisherElement.querySelector('video');
    await runFacemesh(webcam);
  }
});

Examinons de plus près la runFacemesh méthode :

const runFacemesh = async (webcamRef) => {
  const net = await faceLandmarksDetection.load(faceLandmarksDetection.SupportedPackages.mediapipeFacemesh, { maxFaces: 1 });

  setInterval(() => {
    detect(net, webcamRef);
  }, 500);
};

Nous utilisons la fonction de détection, que nous devrons construire, mais essentiellement le nombre de fois que nous exécutons cette fonction, nous obtiendrons un score d'attention pour l'image qui est rendue par votre caméra. Le nombre de fois que nous exécutons cette fonction par seconde détermine le nombre d'images par seconde de notre analyse de la mesure de l'attention. Actuellement, cette fonction est exécutée toutes les 500 millisecondes, ce qui signifie que le nombre d'images par seconde est de 2. Cette valeur peut être modifiée en fonction de votre cas d'utilisation.

Examinons maintenant la partie la plus importante de notre algorithme, qui est responsable de la génération d'un score et de la transmission de ce score à tous les autres participants :

// This runs face landmark model
const face = await net.estimateFaces({ input: video, predictIrises: true });

// Getting points from the model
const { mesh } = face[0];
const radians = (a1, a2, b1, b2) => Math.atan2(b2 - a2, b1 - a1);

// Generating angles between points and axis
const angle = {
  yaw: radians(mesh[33][0], mesh[33][2], mesh[263][0], mesh[263][2]),
  pitch: radians(mesh[10][1], mesh[10][2], mesh[152][1], mesh[152][2]),
};

// Calculating attention score
const score = getScore(angle.yaw) * getScore(angle.pitch);
const signalScore = { attention: score, streamId };


// Sending attention score to all other participants in call 
session.signal(
  {
    type: 'attentionScore',
    data: JSON.stringify(signalScore)
  },
  function(error) {
    if (error) {
      console.log("signal error ("+ error.name+ "): " + error.message);
    }
  }
);

Ce morceau de code peut sembler intimidant, mais en réalité, tout ce que nous faisons est d'exécuter la bibliothèque de repères faciaux sur l'image actuelle de l'éditeur, d'exécuter notre algorithme sur les angles entre certains points du visage détecté, puis de diffuser le score d'attention à tous les participants. getScore algorithme sur les angles entre certains points du visage détecté, puis de diffuser le score d'attention à tous les participants.

Une fois que le score d'attention est signalé, nous devons nous assurer que nous le traitons du côté de la réception et que nous en faisons ce que nous voulons. Vous pouvez l'afficher sous forme d'interface utilisateur en temps réel (comme nous l'avons fait dans ce projet) ou le stocker dans une base de données qui peut être utilisée pour cartographier les mesures d'attention sur la durée de l'appel. Les possibilités sont infinies !

Conclusion

L'attention est un facteur clé pour évaluer les conversations, les discours, les conférences et à peu près toutes les interactions entre personnes. Nous avons maintenant appris à l'estimer grâce à l'analyse du maillage des visages et à l'intégrer dans nos appels vidéo. Cette estimation peut être encore améliorée grâce à d'autres sources de données telles que le mouvement de l'iris, la reconnaissance de visages multiples, etc.

Vous trouverez une version entièrement fonctionnelle de cette application sur GitHub

Faites-nous savoir si vous avez réussi à faire fonctionner la détection de l'attention ! Rejoignez-nous sur la communauté Slack des développeurs de Vonage Communauté Slack ou envoyez-nous un tweet à VonageDev.