À propos de l'auteur

Edoardo est un développeur Web chez Chialab. Il a développé ses intérêts pour la typographie et l'accessibilité en travaillant sur divers produits EdTech et certains institutionnels…
En savoir plus sur
Edoardo
…

Les concepteurs Web sont toujours à la recherche de nouvelles façons d'améliorer la présentation du contenu d'une page. Parfois, cela peut conduire à des solutions ingénieuses ou à interagir avec des technologies souvent tenues à l'écart du domaine de la conception. Dans cet article, nous mettrons la typographie en contact avec l'intelligence artificielle, en utilisant l'apprentissage automatique pour détecter des choses telles que la proximité du visage de l'utilisateur afin d'améliorer la lisibilité du texte.

Nous expérimenterons sur comment utiliser la reconnaissance faciale avec Tensorflow afin d'extraire certaines informations de la caméra, telles que la distance entre l'écran et le visage de l'utilisateur ou le nombre de personnes lisant la page. Ensuite, nous transmettrons ces données au CSS afin d'adapter la typographie et d'ajuster la mise en page.

Qu'est-ce que Tensorflow?

Tensorflow est une plate-forme open-source de Google pour le Machine Learning. L'apprentissage automatique est un domaine de l'informatique qui étudie les algorithmes qui apprennent à reconnaître des relations complexes et des modèles récurrents à partir d'images, de pistes audio, de séries chronologiques, de texte naturel et de données en général. Ces algorithmes génèrent des modèles mathématiques (également appelés modèles entraînés), qui sont une sorte de schéma qui peut être utilisé pour prendre des décisions basées sur des données d'entrée. Si vous souhaitez aborder le sujet, Charlie Gerard a écrit sur le ML pour les développeurs frontend ici sur Smashing Mag .

Tensorflow fournit de nombreux outils pour les développeurs d'IA, les data scientists, les mathématiciens, mais ne le faites pas. t paniquez si l'analyse des données n'est pas votre pain quotidien! La bonne nouvelle est que vous ne devez pas être un expert pour l'utiliser, tant que vous utilisez des modèles pré-construits, comme nous allons le faire.

Les modèles Tensorflow sont disponibles pour être utilisés sur le Web avec leur JavaScript SDK .

Setup

Pour commencer à utiliser les algorithmes de reconnaissance faciale, nous devons suivre quelques étapes:

• chargez le SDK Tensorflow.
• chargez la bibliothèque Facemesh qui contient le modèle mathématique.
• accéder à la caméra de l'utilisateur et la diffuser dans un élément vidéo HTML. Facemesh analysera les images de la balise vidéo pour détecter la présence de visages.

Dans ce projet, nous allons utiliser Tensorflow via CDN, mais il est également disponible sur NPM si vous préférez le bundler:

Tensorflow fait ne pas faire le tour lui-même, nous devons donc ajouter Facemesh une bibliothèque qui est construite sur le dessus du framework ML et fournit un modèle déjà entraîné pour la reconnaissance faciale:

La prochaine étape consiste à configurer la bibliothèque Facemesh afin de charger le modèle entraîné et de définir la fonction qui évaluera les données de visage à partir d'un flux vidéo:

 // créer et placer la vidéo
const video = document.createElement ('vidéo');
document.body.appendChild (vidéo);

// configuration du facemesh
modèle const = attendre facemesh.load ({
    backend: 'wasm',
    maxFaces: 1,
});

fonction asynchrone detectFaces () {
    const faces = attendre model.estimateFaces (vidéo);
    console.log (visages);

    // détecter récursivement les visages
    requestAnimationFrame (detectFaces);
} 

Nous sommes maintenant prêts à demander à l'utilisateur l'autorisation d'accéder à son flux de caméra en utilisant une balise vidéo:

 // activer la lecture automatique
video.setAttribute ('lecture automatique', '');
video.setAttribute ('muet', '');
video.setAttribute ('joue en ligne', '');
// démarrer la détection de visage une fois prêt
video.addEventListener ('canplaythrough', detectFaces);
// diffuser la caméra
video.srcObject = attendre navigator.mediaDevices.getUserMedia ({
    audio: faux,
    vidéo: {
        faceMode: 'utilisateur',
    },
});
// Allons-y!
video.play (); 

La méthode navigator.mediaDevices.getUserMedia demandera l'autorisation et commencera à diffuser la caméra dans l'élément vidéo. Une fois acceptée, la caméra commencera à diffuser sur la balise vidéo, tandis que la console du navigateur enregistrera les informations de visage détectées par Facemesh.

Veuillez noter que les autorisations de la caméra nécessitent une connexion https sécurisée ou localhost: vous ne pouvez pas simplement ouvrir l'index. fichier html. Si vous ne savez pas comment configurer un serveur local checkout http-server pour Node ou suivez ce guide pour Python ou celui-ci pour PHP .

] Cas 1. Ajuster la typographie à l'aide de l'appareil photo du smartphone

Nous naviguons sur le Web partout avec notre smartphone. Il fut un temps, il n'y a pas si longtemps, où nous prenions des trains ou des bus bondés et nous gardions le smartphone très près de nos yeux car il n'y avait pas de place. Dans de nombreux moments et lieux de notre journée, nous changeons souvent la position et l'inclinaison du smartphone, même si nous regardons le même site. La distance entre les yeux et le smartphone affecte nos capacités de lecture. En évaluant cette distance, nous pouvons ajuster la microtypographie afin d'optimiser les glyphes pour une lecture plus proche ou plus éloignée.

La détection de visage signifie, bien sûr, la détection de la position des yeux aussi. Nous pouvons utiliser les données fournies par Facemesh pour calculer la taille de notre visage par rapport à l'ensemble de l'image capturée par la caméra. Nous pouvons supposer que plus notre visage est grand, plus nous sommes proches de l'écran. Nous pouvons mettre en place une échelle de 0 (un bras éloigné l'un de l'autre – le visage occupe environ la moitié de la caméra) à 1 (collé à l'écran) et détecter la valeur actuelle avec une division de segments:

 fonction async detectFaces ( ) {
    faces const = attendre model.estimateFaces (vidéo);
    if (faces.length === 0) {
        // y a quelqu'un là-bas?
        return requestAnimationFrame (detectFaces);
    }

    const [face] = visages;

    // extraire les coins de la surface du visage
    let {bottomRight, topLeft} = face.boundingBox;

    // calculer la taille de la surface du visage
    let width = bottomRight [0] - topLeft [0];
    let height = bottomRight [1] - topLeft [1];
    laissez videoWidth = video.videoWidth;
    laissez videoHeight = video.videoHeight;
    laissez ajusterWidth = videoWidth / 2;
    laissez ajusterHeight = videoHeight / 2;

    // détecte le rapport entre le visage et l'image complète de la caméra
    let widthRatio = Math.max (Math.min ((width - AdjustWidth) / (videoWidth - AdjustWidth), 1), 0);
    laissez heightRatio = Math.max (Math.min ((height - AdjustHeight) / (videoHeight - AdjustHeight), 1), 0);
    let ratio = Math.max (widthRatio, heightRatio);


    // détecter récursivement les visages
    requestAnimationFrame (detectFaces);
} 

Maintenant que nous avons calculé le ratio il est temps de faire de la magie, en passant la valeur à la feuille de style:

 document.documentElement.style .setProperty ('- distance-utilisateur', ratio);

Avec cette valeur et un peu de calcul, nous pourrions facilement appliquer de légères modifications à l'épaisseur de la police, à la taille et peut-être aussi au style, mais nous pouvons faire encore mieux. En utilisant une police variable une police qui a paramétré les formes et les espaces des glyphes, nous pouvons ajuster la perception de chaque glyphe en mettant à jour sa variation de taille optique.

Puisque chaque police variable utilise sa propre échelle pour valeurs de taille optique, nous devons relier notre valeur de rapport à cette échelle. De plus, nous pouvons vouloir nous déplacer juste entre un sous-ensemble de taille optique disponible, afin de fournir juste de petites améliorations.

 .main-text {
    --min-opsz: 10;
    - max-opsz: 15;
    --opsz: calc (var (- min-opsz) + (var (- distance-utilisateur) * (var (- max-opsz) - var (- min-opsz))));

    ...
    famille de polices: 'Amstelvar', serif;
    font-variation-settings: 'opsz' var (- opsz);
} 

Vous pouvez le voir en direct ici . Veuillez noter que cet exemple n'est qu'une démonstration du fonctionnement de la technologie. Les changements typographiques devraient être presque imperceptibles aux yeux de l'utilisateur afin de vraiment offrir une meilleure expérience de lecture. Ici, nous avons exploité les formes de glyphes, mais utiliser des couleurs pour augmenter ou diminuer les contrastes n'est qu'une autre bonne solution à essayer. Une autre expérience consistait à détecter l'angle du visage afin de calculer la perspective de la lecture, en modifiant les ascendeurs, les descendants et la hauteur des lettres:

Cas n ° 2: Ajustement de A Mise en page lorsque le nombre de personnes qui regardent change

Dans ce second cas, nous allons modifier la mise en page en fonction du nombre de personnes qui regardent l'écran. On peut imaginer un essai affiché sur le tableau blanc interactif dans le contexte d'une classe de lycée. Ce scénario est discrètement différent de celui détecté par la requête de média de projection obsolète puisque nous voulons ajuster la mise en page de la page si le nombre d'élèves qui regardent est plus petit ou plus grand que le 10. Quand juste quelques étudiants sont dans la salle de classe, ils peuvent s'approcher du tableau en toute sécurité, mais si toute la classe est présente, l'espace n'est probablement pas suffisant et nous devons changer la disposition pour montrer moins de choses (et plus grandes).

Nous avons juste besoin de quelques les modifications apportées au script précédent afin de détecter correctement le nombre de visages à regarder sur le tableau blanc. Tout d'abord, nous devons demander à Facemesh de détecter plusieurs visages:

 const model = await facemesh.load ({
    backend: 'wasm',
    maxFaces: 30,
}); 

Et puis, nous devons passer ce numéro à la feuille de style:

 fonction async detectFaces () {
    faces const = attendre model.estimateFaces (vidéo);
    document.documentElement.style.setProperty ('- regarder', faces.length);

    // détecter récursivement les visages
    requestAnimationFrame (detectFace);
} 

Encore une fois, nous pourrions utiliser cette valeur pour simplement augmenter la taille de la police, mais notre objectif est de fournir une mise en page complètement différente. Les dispositions de grille CSS peuvent nous aider dans cette mission. Ce document projeté est une forme longue avec un côté qui contient des images liées:

    

        
 ... 
        
 ... 
        
 ... 
    
    
 

Et voici sa mise en page par défaut:

 section {
    affichage: grille;
    grille-modèle-colonnes: répétition (12, 1fr);
    grille-colonne-espace: 1em;
    largeur: 120ch;
    largeur max: 100%;
    rembourrage: 1em;
}

article de section {
    grille-colonne: 1 / -5;
}

section de côté {
    grille-colonne: 7 / -1;
} 

Lorsqu'un grand nombre de personnes regardent, nous devons privilégier le contexte de lecture longue durée, en donnant plus d'espace à la colonne principale, en augmentant sa taille de police et en supprimant les éléments dérangeants . Pour ce faire, nous augmentons le nombre de colonnes étendues, en les déplaçant sous le texte principal.

: root {
    - visionnage: 10;
}

section {
    / ** Le nombre maximum de personnes qui regardent la mise en page par défaut * /
    - interrupteur: 10;
    / ** Le nombre de colonnes par défaut pour le texte * /
    - texte: 8;
    / ** Le nombre de colonnes par défaut pour le côté * /
    -side: 4;

    grille-modèle-colonnes: répéter (calc (var (- texte) + var (- côté)), 1fr);
}

article de section {
    / **
     * Un calcul magique.
     * Lorsque le nombre de personnes qui regardent est inférieur à --switch, il renvoie -2
     * Lorsque le nombre de personnes qui regardent est supérieur à --switch, il renvoie -1
     * Nous allons utiliser ce nombre pour le calcul de la portée négative
     * /
    - présentation: calc (min (2, (max (var (- commutateur), var (- regarder)) - var (- commutateur) + 1)) - 3);
    / **
     * Calculez la position de la colonne de fin.
     * Lorsque --layout vaut -1, le calcul renvoie simplement -1
     * Lorsque --layout vaut -2, le calcul est inférieur à -1
     * /
    --layout-span: calc ((var (- de côté) * var (- disposition)) + var (- de côté) - 1);
    / **
     * Calculer l'indice maximum de la dernière colonne (celle "avant" la mise à l'écart)
     * /
    --max-span: calc (-1 * var (- de côté) - 1);
    / **
     * obtenir le maximum entre --layout-span et le dernier index de colonne.
     * -1 signifie pleine largeur
     * --max-span signifie la disposition par défaut
     * /
    --span: max (var (- max-span), var (- span));

    grille-colonne-début: 1;
    grille-colonne-fin: var (- span);
} 

Vice-versa, lorsqu'un petit groupe d'étudiants expérimente le texte près du tableau, nous pourrions donner plus de détails, comme les fichiers multimédias et les déclencheurs d'action interactifs.

Beyond Face Recognition

Les cas auxquels nous avons été confrontés (😉 ) ne sont que deux exemples de la façon dont nous pouvons utiliser la technologie de reconnaissance faciale pour la mise en page ou les portées typographiques. Tensorflow fournit d'autres modèles et bibliothèques qui peuvent transformer le flux de la caméra en variables pour nos pages. De plus, il ne faut pas oublier que dans nos smartphones il y a beaucoup d'autres capteurs que nous pourrions exploiter en utilisant les Sensor APIs : GPS, accéléromètre, lumière ambiante, etc.

Puisque l'humeur influence la façon dont nous lire, étudier et rechercher des informations, avec l'apprentissage automatique, nous pouvons également analyser les expressions de l'utilisateur pour passer d'une mise en page minimale à une mise en page détaillée en fonction de son humeur. Cependant, la taille de la fenêtre n'est qu'une des variables de l'expérience utilisateur. Récemment, un nouveau type de requête média conçu pour respecter les préférences de l'utilisateur a atterri dans les navigateurs, comme le prefers-color-scheme et prefer-reduction-motion . Cela donne aux concepteurs et aux développeurs un moyen de faire un pas en avant dans les pratiques de conception Web, permettant à la page Web de s'adapter à l'ensemble de l'environnement au lieu de se limiter à l'appareil de l'utilisateur. À l'ère du big data, nous avons l'opportunité d'aller au-delà de la conception réactive et adaptative. Nos pages Web peuvent enfin «quitter l'écran» et faire partie de l'expérience globale de l'utilisateur. La conception d'interaction va impliquer toutes ces possibilités, donc continuer à expérimenter les combinaisons possibles entre la technologie et la conception de sites Web sera crucial dans les années suivantes.

(ra, yk, il)