Comment tester la lisibilité d’une composition graphique avec un modèle d’IA ?

L’analyse d’image par réseaux de neurones

Avec les systèmes d’Intelligence Artificielle (‘IA’) du type “réseaux de neurones“, il est aujourd’hui possible de simuler l’importance visuelle des éléments d’une image, c’est-à-dire l’ordre et la durée avec laquelle les différentes parties  de l’image vont être perçues par un observateur lambda. On parle aussi de saillance visuelle, pour qualifier l’effet de sauter aux yeux.

L’intérêt de ces méthodes réside dans leur capacité à indiquer les éléments les plus lisibles d’une image, les plus saillants, donc sa hiérarchie visuelle :

• Pour vérifier que sa composition graphique (mise en page, planche de cartes…) est bien organisée et de manière efficace (du point de vue de la lisibilité, de la structuration et de la quantité d’information).
• Pour évaluer la lisibilité de choix esthétiques plus originaux, artistiques.

Ces outils peuvent ainsi simuler les réactions de perception visuelle humaine, si on les entraine sur un corpus d’images pré-analysées par des humains. Ainsi, l’algorithme va dégager des règles de perception de son corpus d’entraînement et pourra les reproduire sur de nouvelles images.

Pendant longtemps, ces algorithmes étaient utilisés pour guider des véhicules à partir d’images de caméras, car la demande est forte pour les véhicules autonomes. En 2020, des chercheurs du M.I.T et d’Adobe ont l’idée d’entraîner un réseau de neurones à partir d’images de composition graphique (graphic design) : des posters, des cartes, des tableaux de bord de données… 1000 images ont ainsi été étudiées par 250 personnes, à qui on a demandé de désigner les zones les plus importantes, dans l’ordre de lecture.

Le résultat, le modèle UMSI (Unified Model of Saliency and Importance), est très intéressant (dernière colonne de l’image ci-dessous), d’autant plus que l’article, le code et les données (le modèle résultat de l’analyse du corpus) ont été rendus disponibles (pour une utilisation non commerciale) :  predimportance.mit.edu

L’algorithme est ainsi utilisable via un carnet interactif Python, hébergé sur GitHub et mis à disposition via une machine virtuelle Binder, le tout gratuitement. Cette installation a été produite pour l’école thématique “TransCarto” du CNRS, en octobre 2021, pour illustrer une présentation sur les images cartographiques.

Comment utiliser librement cet outil ?

Pour l’école thématique TransCarto, un carnet interactif Python a été préparé, à partir du carnet source de l’article (fork). Il s’agit d’une page web interactive qui permet d’exécuter du code Python dans une machine virtuelle, à distance, et de récupérer les résultats des traitements. Ce carnet, de type Jupyter Notebook, est hébergé gratuitement dans le gestionnaire de code source GitHub de TransCarto, et il peut être exécuté tout aussi gratuitement via le service Binder.

1. Se rendre sur la page GitHub de TransCarto : github.com/transcarto
2. Choisir le dépôt “PredImportance-public” : ./transcarto/predimportance-public
3. Cliquer sur le bouton “Binder”

 

Le carnet Jupyter se lance au bout d’un moment plus ou moins long d’initialisation (plusieurs minutes la première fois, avec parfois des plantages, car c’est une ressource gratuite et partagée). Lorsqu’il est démarré, le carnet affiche la liste des fichiers du carnet, il faut choisir le fichier qui contient le notebook par un double-clic sur transcarto_umsi.ipynb

Ce carnet fonctionne suivant le principe général des carnets de code interactif : des cellules sont modifiables et exécutables (bouton flèche triangulaire en haut du carnet), on les édite (éventuellement), puis on les lance une à une pour dérouler l’algorithme petit à petit, du haut vers le bas.

Le fait que le code soit modifiable permet de :

• modifier les fichiers image à analyser (deux images sont fournies par défaut)
• modifier les réglages de l’algorithme (éventuellement, par exemple la palette de couleurs)

Les étapes du carnet

On va décrire ici les différents blocs de code du carnet, leur fonction et leur modification potentielle.

• 1°) Le premier bloc est constitué de commentaires sur les prérequis à l’utilisation du code en local. Dans l’image Binder, les pré-requis ont été fournis par le fichier requirements.txt du dépôt (qui sera mis à jour régulièrement pour tenir compte des versions des modules accessibles par Binder, qui évoluent selon les mises à jour de sécurité).
• 2°) Le deuxième bloc réalise les imports du carnet, c’est à dire le chargement des bibliothèques de fonctions utiles, notamment TensorFlow/Keras qui gère le modèle de réseau de neurones. Lors de l’exécution de ce bloc, des messages s’affichent dans la zone de résultat du bloc, ce sont des informations non bloquantes pour la suite du processus.
• 3°) Le troisième bloc contient les fonctions auxiliaires (ouverture et adaptation des images), qui sont appelées par le code principal (bloc 6 – Predict Maps).
• 4°) Le quatrième bloc va télécharger (dans l’image Binder) le (gros) fichier du modèle UMSI, c’est à dire le réseau de neurones et les pondérations issues de l’expérience des 250 participants sur les 1000 images. Ce fichier est stocké sur un serveur externe, car sa taille (115Mo) dépasse le volume autorisé par GitHub en accès gratuit. À l’exécution, ce bloc produit lui aussi des messages d’information non bloquants (chargement, erreurs/problèmes de configuration matérielle).
• 5°) Le cinquième bloc est celui qui permet de choisir ses propres images JPEG à analyser, en fournissant une ou deux URLs vers ces images. Une fois exécuté, il affiche les images et leur éventuel redimensionnement (bandes noires).

image1_url = ‘https://www.geotests.net/depot/160_Afrique_Ctg%202000-2050_Pop%20Agee.jpg’
image2_url = ‘https://www.geotests.net/depot/winds.jpg’

• 6°) Le sixième bloc ne contient qu’une seule ligne, mais c’est celle qui lance le traitement des images, en appelant les fonctions auxiliaires évoquées plus haut.
• 7°) Enfin, le septième bloc produit les images de résultat : images source, “carte” de saillance selon une palette bleu/vert/jaune (viridis), et superposition en transparence des deux.
  -> Il est possible de les télécharger par un shift+clic droit.

On peut générer une image de résultat (carte de saillance) en utilisant le bloc de code vide en bas du carnet.

Il faut pour cela saisir la ligne de code suivante, en utilisant les numéros des images (0 et 1) :

plt.imshow(pred_batch[0])

Le choix de la palette de couleurs de la carte de saillance peut se faire parmi les palettes disponibles dans la bibliothèque de fonctions MatPlotLib. Il faut préciser le nom de la palette dans la ligne de code suivante du bloc 7, en remplacement de “viridis” :

# Overlay heatmap on image
res = heatmap_overlay(im,pred_batch[i],’viridis’);

Enfin, comme le code source du carnet est librement accessible, on peut en télécharger une version pour l’exécuter en local sur sa machine, à la condition d’avoir installé les différents prérequis (Python 3.7, TensorFlow, etc.) et de posséder le matériel compatible pour les calculs (GPU vidéo de marque Nvidia).

Interpréter les résultats

Les résultats s’interprètent selon la palette de couleur.

Les parties en jaune vif de l’image résultat sont considérées par l’outil comme étant saillantes, c’est à dire qu’elles correspondent à des régions et à des couleurs qui ont été repérées par les sujets qui ont entraîné le modèle. Elles seront donc généralement vues en premier et attireront le plus l’attention.

À partir de ce constat, on peut comparer la “carte” de saillance avec l’image d’origine et sa structure, sa hiérarchie d’information, pour voir si ces zones correspondent :

• Est-ce que les zones les plus saillantes de la carte de saillance (en jaune) sont aussi celles qui sont intéressantes pour commencer la lecture progressive de l’image et bien en comprendre le contenu ? (titre, légende, parties importantes de la carte)
• Réciproquement, il faut se demander si les zones de la carte d’origine que l’on considère importantes pour la compréhension sont bien saillantes sur l’image générée par l’outil.

Logiquement, le titre principal, bien lisible (position, taille de la police, isolement et contraste), est bien repéré comme saillant visuellement (partie horizontale jaune en haut de la carte de saillance). Ensuite, les zones saillantes sont localisées de manière moins interprétable, sur l’Europe de l’ouest dans la carte de gauche et sur la mer Rouge dans la carte de droite de la planche d’origine. Une explication pourrait être la position des “taches” rouges contrastées (sur fond blanc) dans l’ordre de lecture gauche-droite puis haut-bas. C’est peut-être un biais de cet outil de simulation, à vérifier en comparant avec d’autres analyses de compositions graphiques. 

On remarque aussi des valeurs faibles de saillance qui sont intéressantes, notamment sur les légendes (qui devraient pourtant être saillantes pour une bonne compréhension des images), et sur les pays en rouge du haut de la carte de droite (où le phénomène de vieillissement est important). Les dates des deux images ne sont pas saillantes du tout, ce qui rend la compréhension de la planche complexe.

En conséquence, pour améliorer l’efficacité de cette planche cartographique, on pourrait tester :

• une réorganisation de la mise en page (pour placer les cartes verticalement)
• un changement de la palette de couleurs des cartes ?
• une augmentation de la visibilité des légendes
• une augmentation de la visibilité des dates des deux cartes

Il restera à tester l’analyse sur ces nouvelles versions !

 

---

---