Un système guidé par la recherche qui prédit où le regard est susceptible de se poser sur une interface à partir d’une simple capture — pour transformer l’attention visuelle en signal de design exploitable.
RESEARCH→MODEL→PRODUCT
01 — LE DÉFI
Un modèle utile commence par la bonne question.
L’eye-tracking fournit des preuves précises, mais reste coûteux et lent à mobiliser au quotidien. L’objectif était de transformer l’état de l’art scientifique sur l’attention en un outil UX immédiat et accessible.
Anatomie du projet
De la capture d’écran aux zones d’attention probables.
Le système orchestre une inférence de saillance visuelle asynchrone, puis transforme la prédiction en heatmap et en recommandations UX contextualisées.
Pipeline principal
Sélectionnez une étape pour comprendre la transformation des données.
Étape sélectionnée
L’utilisateur importe une capture d’écran et précise l’objectif d’attention qu’il souhaite évaluer.
Fonctionnalités réelles
Les capacités visibles sont reliées aux briques techniques qui les rendent possibles.
01
Analyse depuis une capture
Import d’une interface web ou applicative sans instrumentation préalable.
02
Inférence CPU ou GPU
Sélection du conteneur d’exécution en fonction du niveau de calcul disponible.
03
Suivi asynchrone
Le frontend interroge le statut du job puis récupère le résultat dès qu’il est disponible.
04
Heatmap superposée
Visualisation directe de la densité d’attention sur l’écran analysé.
05
Objectif UX contextualisé
L’analyse tient compte de l’élément que l’équipe souhaite réellement rendre visible.
06
Résultats par job
Entrées, prédictions et synthèses restent organisées autour d’un identifiant commun.
Stack par responsabilité
Chaque technologie est replacée dans son rôle au sein du système.
01
React · Netlify
Import, suivi du calcul et restitution visuelle.
02
FastAPI
Validation des requêtes et orchestration des jobs.
03
Google Cloud Storage
Échange des images et résultats entre les services.
04
Vertex AI
Exécution asynchrone des conteneurs CPU ou GPU.
05
TensorFlow · Keras
SAM-ResNet, fonctions de perte de saillance et inférence.
06
OpenCV · OpenAI
Composition de la heatmap et interprétation UX contextualisée.
Pipeline de computer visionArchitecture issue du code actuel · Représentation simplifiée
De la technique à l’usage
Observez comment une interface devient une carte d’attention.
La séquence ci-dessous reprend les moments clés du produit : analyse de la capture, construction de la heatmap et lecture des zones qui concentrent probablement le regard.
Démonstration pédagogique : les données sont locales et certains calculs sont simulés ou accélérés.
“Un démonstrateur orienté produit qui permet d’importer une interface et d’identifier ses zones d’attention probables avant de conduire une étude utilisateur.”