Prédire avant de mesurer

Où ira lepremier regard ?

AttentionAI estime les zones d’une interface qui attireront spontanément l’œil, avant même de lancer un test utilisateur.

Modèle de saillance visuelle

Affiche de location de voiture originale

Lecture immédiateLe titre et le prix captent l’œil. La marque reste périphérique.

01 · Interface

Tout commence par une capture d’écran.

L’utilisateur importe une page, une publicité ou une maquette, puis lance la prédiction depuis l’interface React.

PNG · JPG · capture complète

ATTENTION AI · WEB APP

Attention AI

Image originale Aperçu du fichier importé

car_rental.png

Générer la heatmap

Obtenir des insights

Heatmap

Analyse des zones d’attention…

02 · Orchestration cloud

Le calcul lourd reste invisible pour l’utilisateur.

L’API sécurise le fichier, crée un job asynchrone et interroge son statut jusqu’à ce que la prédiction soit prête.

JOB · 20250517–155528–3DD500

▣Interface ReactEnvoie le fichier et affiche l’état de traitement.Netlify

↗FastAPIValide la requête, attribue un identifiant unique.Cloud Run

◫StockageConserve l’entrée et recevra les sorties du modèle.Cloud Storage

⌁Custom JobDémarre le conteneur d’inférence à la demande.Vertex AI

✓RésultatRetourne la heatmap encodée à l’interface.Polling API

03 · Modèle de saillance

SAM apprend où l’œil humain a tendance à se poser.

Un réseau ResNet extrait les formes visuelles. Un ConvLSTM attentif affine la lecture, puis 16 priors gaussiens réintroduisent les biais spatiaux du regard.

SAM–ResNet240 × 3204 timesteps16 priors

Caractéristiques visuellesAttention récurrentePriors spatiaux

512

t = 1

t = 2

t = 3

t = 4

Attentive ConvLSTM · les régions utiles sont renforcées à chaque passe

Carte de densité

ATTENTION AI · RESULTS

✓ Prédiction terminée640 × 480 · heat_car_rental.png

04 · Décision UX

Une heatmap devient une décision.

L’objectif choisi donne un contexte à la lecture. L’assistant transforme alors les zones chaudes et froides en pistes d’amélioration concrètes.

01

02

03