💻 computer science

DiffSpot: Can VLMs Spot Fine-Grained Visual Differences in Web Interfaces?

Ce papier présente DiffSpot, un benchmark piloté par du code démontrant que même les modèles vision-langage les plus avancés peinent à détecter des différences visuelles fines dans les interfaces web, avec des taux de rappel faibles même pour des modifications simples, et montrant que la difficulté de détection varie considérablement selon la propriété CSS plutôt que selon l'ampleur des pixels ou la distance sémantique.

Auteurs originaux : Linhao Zhang, Aiwei Liu, Yuan Liu, Xiao Zhou

Publié 2026-05-29

📖 6 min de lecture🧠 Analyse approfondie

CC BY 4.0

Auteurs originaux : Linhao Zhang, Aiwei Liu, Yuan Liu, Xiao Zhou

Article original sous licence CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/). ✨ Ceci est une explication générée par l'IA de l'article ci-dessous. Elle n'a pas été rédigée ni approuvée par les auteurs. Pour une précision technique, consultez l'article original. Lire la clause de non-responsabilité complète

Imaginez que vous avez deux photos presque identiques d'une page web. Sur l'une, un bouton est bleu ; sur l'autre, il est d'un bleu légèrement plus clair. Ou peut-être que le texte est juste un tout petit peu plus gras. Pour un humain, repérer cela peut prendre une seconde de plissement des yeux. Mais pour une Intelligence Artificielle (IA) qui « voit » des images, c'est comme essayer de trouver un seul grain de sable qui a changé de couleur sur une plage.

Ce papier, intitulé DiffSpot, présente un nouveau test pour évaluer la capacité des modèles d'IA modernes à repérer ces changements minuscules et spécifiques sur les sites web. Voici le détail en termes simples :

1. Le Problème : L'IA est Excellente pour la Vue d'Ensemble, Mauvaise pour les Détails

Les modèles d'IA actuels (appelés Modèles Vision-Langage ou VLM) sont comme de brillants critiques d'art. Ils peuvent regarder une image et vous dire : « C'est une journée ensoleillée à la plage avec une famille qui joue ». Ils excellent à comprendre l'histoire générale.

Cependant, ils peinent avec les « petits caractères ». Si vous leur demandez : « La couleur de ce bouton spécifique est-elle passée du bleu foncé au bleu clair ? », ils le manquent souvent. Ils pourraient dire : « Non, tout semble pareil », ou ils pourraient inventer un changement qui ne s'est pas produit (comme dire que le texte a changé alors qu'il ne l'a pas fait).

2. La Solution : Créer un Jeu de « Trouver les Différences » avec des Règles

Les chercheurs voulaient tester cette capacité, mais ils ne pouvaient pas simplement demander à des humains de trouver des différences sur des sites web au hasard. Les humains sont biaisés ; ils remarquent les choses grandes et évidentes mais manquent les subtiles. De plus, trouver deux pages web qui sont exactement les mêmes sauf pour un tout petit détail est presque impossible sur le vrai internet.

Alors, l'équipe a construit DiffSpot, une suite de tests sur mesure. Pensez-y comme un concepteur de niveaux de jeu vidéo qui crée un puzzle parfait de « trouver les différences » à partir de zéro.

Comment ils l'ont construit : Au lieu de prendre des captures d'écran et d'espérer le meilleur, ils ont commencé par le code informatique (HTML/CSS) qui construit une page web.
La « Mutation » : Ils ont pris un morceau de code, changé un seul petit paramètre (comme rendre un bouton 5 % plus clair), puis ont régénéré l'image.
La « Porte d'Ancrage » : C'est une étape de contrôle qualité. Parfois, changer une ligne de code gâche accidentellement toute la mise en page de la page. Les chercheurs ont utilisé un « gardien » numérique pour vérifier : Le changement s'est-il produit exactement là où nous le voulions, et nulle part ailleurs ? Si le changement débordait sur d'autres parties de la page, ils rejetaient ce cas de test.

Le résultat est un ensemble de données de 4 400 paires d'images. Certaines ont un changement minuscule et spécifique (comme une police devenant légèrement plus grasse), et d'autres n'ont absolument aucun changement.

3. Le Test : Mettre 13 IA de Pointe au Défi

Ils ont pris 13 des modèles d'IA les plus intelligents disponibles aujourd'hui (y compris des modèles de Google, OpenAI, Anthropic et d'autres) et leur ont demandé de regarder ces paires et de lister les différences. Ils n'ont donné aucune indication ni exemple à l'IA ; c'était un « test à l'aveugle ».

Les Résultats : L'IA Éprouve des Difficultés
Même les meilleurs modèles d'IA ont échoué à repérer la majorité des changements.

Le Score : Le modèle le plus performant n'a trouvé que environ 41 % des changements réels. Cela signifie qu'il a manqué environ 6 changements sur 10.
Le Mode Difficile : Lorsque les changements étaient très subtils (le niveau « Difficile »), les modèles ont encore moins bien réussi, trouvant moins de 23 % des changements.
Le Problème d'Hallucination : Certains modèles étaient si avides de trouver une différence qu'ils ont inventé des choses. Ils ont affirmé qu'un bouton avait changé de couleur alors qu'il ne l'avait pas fait. D'autres étaient si prudents qu'ils disaient « aucun changement » même lorsqu'il y en avait un.

4. La Découverte Surprenante : Il S'agit de Ce Qui a Changé, Pas de Où

Les chercheurs s'attendaient à ce que la difficulté dépende du type de site web (par exemple, peut-être que les sites de shopping sont plus difficiles que les sites d'actualités). Ils avaient tort.

Le « Quoi » Compte : La difficulté dépendait entièrement de la propriété qui a été changée.
- Si l'IA devait repérer un changement dans le texte ou la position (déplacer un élément), elle s'en sortait bien.
- Si l'IA devait repérer un changement dans les dégradés (mélanges de couleurs) ou la hauteur de ligne (espacement entre les lignes de texte), elle s'en sortait terriblement, même si la différence visuelle était énorme.
Le « Où » N'a Pas d'Importance : Peu importait que le changement se trouvât sur un site financier ou un blog de voyage. La capacité de l'IA à repérer le changement était constante sur tous les sujets.

5. Pourquoi Cela Compte (Selon le Papier)

Le papier conclut que, bien que l'IA s'améliore pour comprendre les images en général, elle reste « aveugle » aux détails spécifiques et fins qui constituent une interface utilisateur.

La taille des pixels n'est pas la réponse : Vous pourriez penser : « Si le changement est assez grand, l'IA le verra ». L'étude a montré que ce n'est pas vrai. Même de grands changements de pixels dans certaines catégories (comme les dégradés) ont été manqués, tandis que de petits changements dans d'autres (comme le texte) ont été détectés.
La « Magie » manque : L'IA ne se contente pas d'échouer à voir les pixels ; elle échoue à comprendre le concept du changement (par exemple, « ce texte est plus gras »).

En Résumé :
DiffSpot est un test rigoureux de « trouver les différences » pour l'IA. Il révèle que même les modèles d'IA les plus intelligents d'aujourd'hui sont comme une personne essayant de lire un menu dans une pièce sombre : ils peuvent vous dire qu'il y a un restaurant, mais ils ne peuvent pas vous dire de manière fiable si le prix de la soupe a changé de quelques centimes. Le papier prouve que pour que l'IA maîtrise vraiment les interfaces web, elle doit devenir beaucoup meilleure pour remarquer les détails minuscules et spécifiques.

Résumé Technique : DiffSpot

Énoncé du Problème

Les modèles vision-langage (VLM) ont réalisé des progrès significatifs dans l'alignement image-texte de haut niveau et le raisonnement guidé par le langage. Cependant, leur capacité à percevoir les différences visuelles fines reste limitée. Cette limitation est critique pour les systèmes opérant sur des interfaces web rendues, tels que les agents d'interface graphique (GUI) et les outils de conception, qui doivent vérifier non seulement qu'un écran a changé, mais exactement quelle propriété visuelle a changé, où elle a changé, et si le changement s'est confiné à l'élément prévu.

Les benchmarks existants pour les VLM manquent largement d'un régime dédié de « repérer la différence » pour les interfaces web. Les approches actuelles font face à deux goulots d'étranglement :

Pénurie de données : Les pages web réelles fournissent rarement des captures d'écran avant/après quasi identiques ne différant que par une seule petite propriété d'interface utilisateur, avec une couverture équilibrée à travers les éléments, les propriétés et les niveaux de difficulté.
Biais d'annotation : Le marquage humain est sélectif et dépendant de l'attention, sur-représentant souvent les changements saillants ou sémantiquement significatifs tout en manquant les différences visuelles subtiles au niveau des propriétés.

Méthodologie : Le Pipeline DiffSpot

Les auteurs introduisent DiffSpot, un benchmark piloté par le code pour des tâches de repérage de différences à champ ouvert sur les interfaces web. L'idée centrale est de déplacer la construction des différences de l'espace image vers l'espace code. Puisque les interfaces web sont des artefacts programmatiques générés à partir de HTML/CSS, les différences visuelles peuvent être définies et contrôlées avant le rendu.

Le pipeline de construction se compose de cinq étapes :

Curration du Corpus :
- Les graines sont tirées du Chrome User Experience Report et des domaines Majestic Top-1M (2M de domaines).
- Les URL sont étendues via des sitemaps et filtrées par des empreintes de structure HTML pour assurer l'unicité structurelle.
- Les pages sont rendues dans Chromium sans interface (1280×800 viewport) et appariées à du HTML autonome régénéré par un LLM pour supprimer les dépendances tierces.
- Les paires sont filtrées par similarité CLIP (≥0,70) pour garantir que le HTML régénéré correspond à la structure visuelle originale.
Mutation Programmatique :
- Le système applique des mutations atomiques et localisées à une seule propriété CSS d'un seul élément cible.
- 13 opérateurs de propriété CSS sont définis répartis en quatre familles : Typographie (font_weight, font_size, letter_spacing, line_height, text), Couleur (color, opacity, gradient), Mise en page (position, spacing, justify) et Forme (border, rounded).
- Les mutations sont exécutées via des échanges de classes Tailwind CSS ou des remplacements de styles en ligne.
- Stratification de la Difficulté : Chaque opérateur est divisé en niveaux Facile, Moyen et Difficile basé sur l'ampleur du changement (par exemple, étapes de l'échelle Tailwind pour les propriétés discrètes, décalages en em pour les propriétés continues).
Validation par Porte d'Ancrage (Grounding Gate) :
- Pour garantir que la mutation correspond à un changement visuel propre et localisé, une « porte d'ancrage » valide le résultat rendu.
- Elle vérifie trois prédicats :
  1. Efficacité : Le changement de pixels à l'intérieur de la boîte englobante (bbox) cible est non nul.
  2. Localité : Le changement de pixels à l'extérieur de la bbox cible est nul (aucune contamination par réflow de mise en page).
  3. Résolution du Sélecteur : L'élément cible doit se résoudre correctement dans le DOM.
- Seules les paires passant tous les prédicats sont conservées.
Polissage et Filtrage :
- Les enregistrements de mutation structurés sont convertis en descriptions en langage naturel utilisant un LLM.
- Des filtres de contenu éliminent les cas avec troncation de texte, débordement de viewport ou problèmes de rendu de police.
Échantillonnage Stratifié et Contrôle « Pas de Différence » :
- Le jeu de données final contient 4 400 paires d'images :
  - 3 900 paires « avec-diff » : 100 paires par cellule répartis sur 13 opérateurs × 3 niveaux de difficulté.
  - 500 paires « sans-diff » : Captures d'écran identiques rendues deux fois pour mesurer les taux d'hallucination.

Configuration de l'Évaluation

Modèles : 13 VLM de pointe ont été évalués en zéro-shot, incluant des API propriétaires (Gemini 3.1 Pro, GPT-5.4, Claude Opus 4.7) et des modèles à poids ouverts (Kimi K2.5, Qwen3.5-VL, GLM-4.6V, InternVL3.5).
Tâche : Les modèles reçoivent des captures d'écran avant/après et sont invités à lister toutes les différences visuelles observées sans exemples ni indices.
Métriques :
- Précision : (VP + VN) / Total.
- Rappel : Pourcentage de vraies mutations identifiées (décomposé par niveau de difficulté).
- Précision « Pas de Différence » (Spécificité) : Pourcentage de paires inchangées correctement identifiées comme n'ayant aucun changement (1 - taux d'hallucination).
Jugement : Les réponses sont évaluées par un juge LLM (gpt-oss-120b) utilisant une grille d'évaluation d'équivalence d'effet visuel qui tolère le paraphrase. Des vérifications de robustesse avec deux autres juges ont confirmé la stabilité du classement.

Résultats Clés

1. Plafond Bas sur la Perception Fine

Même le modèle le mieux performant, Gemini 3.1 Pro, n'a atteint qu'un Rappel de 40,7 % sur les changements visuels réels.

Le Rappel niveau Difficile était inférieur à 23 % pour chaque modèle évalué.
Sept des 13 modèles sont tombés en dessous de 30 % de précision globale.
Certains modèles (par exemple InternVL3.5) ont à peine dépassé la base triviale « toujours-pas-de-diff », indiquant un échec à détecter les changements plutôt qu'une simple mauvaise précision.

2. Modes d'Échec Spécifiques aux Propriétés

La performance dépend fortement de ce qui a changé, et non de où cela est apparu.

Opérateurs à Haut Rappel : justify (87,0 % pour Gemini 3.1 Pro), text (70,3 % pour Claude Opus 4.7) et opacity (58,3 % pour Kimi K2.5) sont plus facilement détectés.
Opérateurs à Faible Rappel : gradient (max 26,7 %), line_height (médiane 4,0 %) et rounded (médiane 13,3 %) restent extrêmement difficiles.
Indépendance de Domaine : Le rappel a varié minimalement à travers 15 domaines sources (différence max 7,1 points de pourcentage), tandis que la variation entre opérateurs était significative. Cela suggère que l'écart de capacité est spécifique à la propriété, et non spécifique au domaine.

3. L'Amplitude Visuelle ne Prédit Pas la Difficulté

L'article démontre que ni l'ampleur des pixels ni la distance CLIP ne prédisent de manière fiable la performance des modèles :

Changement de Pixels : Les opérateurs avec de grands changements de pixels (par exemple gradient, line_height) ont souvent un faible rappel, tandis que ceux avec de petits changements de pixels (par exemple text, position) ont un rappel élevé. Correlation $r \approx -0,08$ .
Distance CLIP : Les distances d'encodage CLIP sont compressées et montrent une corrélation proche de zéro avec le rappel ( $r \approx +0,06$ ).
Conclusion : Les modèles peinent à percevoir et nommer des propriétés visuelles spécifiques au niveau CSS, plutôt que de simplement échouer à détecter de grandes différences d'image.

4. Compromis Sensibilité–Contrainte

Les paires « sans-diff » ont révélé un compromis critique :

Rapporteurs Agressifs : Des modèles comme GLM-4.6V-Flash ont halluciné des changements dans 24,2 % des paires sans-diff.
Trop Conservateurs : Des modèles comme InternVL3.5 n'ont presque rien rapporté, atteignant 100 % de spécificité mais un rappel proche de zéro.
Frontière de Pareto : Seuls trois modèles propriétaires (Gemini 3.1 Pro, Claude Opus 4.7, GPT-5.4) ont atteint la région « précis et restreint » (Rappel ≥30 %, hallucination ≤5 %). Aucun modèle à poids ouvert n'a atteint cet équilibre.

5. Mise à l'Échelle et Raisonnement

Mode de Raisonnement : Pour la famille Qwen3-VL, le passage au mode « Thinking » a considérablement amélioré les performances uniquement à plus grande échelle (235B paramètres), et non à 30B.
Mise à l'Échelle : Augmenter uniquement la taille des paramètres (par exemple Qwen3-VL de 30B à 235B en mode Instruct) n'a pas amélioré les performances, suggérant que l'échelle sans ajustements architecturaux ou d'entraînement spécifiques est insuffisante pour cette tâche.

Importance et Revendications

L'article revendique que DiffSpot est le premier benchmark pour le repérage de différences à champ ouvert sur des interfaces web rendues. Son importance réside dans :

Changement Méthodologique : Passer de paires d'images annotées par des humains à des mutations programmatiques pilotées par le code garantit une vérité terrain contrôlée, équilibrée et exempte de biais.
Précision Diagnostique : Il révèle que les VLM actuels sont fragiles face à la perception visuelle fine, avec des performances fortement dictées par la propriété CSS spécifique étant mutée.
Pertinence Pratique : Le benchmark répond directement aux besoins des agents d'interface graphique et des outils de conception, soulignant que les modèles actuels ne peuvent pas vérifier de manière fiable les changements d'interface utilisateur localisés.
Rigueur de l'Évaluation : En incluant des contrôles « sans-diff », il dissocie la sensibilité visuelle réelle de l'hallucination, exposant un compromis sensibilité-contrainte que les métriques agrégées cachent souvent.

Les auteurs concluent que la détection de différences visuelles fines sur les interfaces web est « loin d'être résolue », les modèles les plus puissants manquant environ trois changements visuels réels sur cinq, en particulier dans les scénarios de niveau difficile.