Comment un modèle voit une page

Un modèle de langage ne voit pas une page web. Il en reçoit une description, et la forme de cette description décide de ce qu’il peut faire ou non.

La page ci-dessous est l’accueil de ce site. Rien n’a été mis en scène pour la démonstration : les trois vues viennent d’une seule commande, lancée sur une page que vous pouvez ouvrir vous-même à l’instant.

Un — telle que vous la voyez

Deux — telle qu'elle est numérotée

Les numéros reviennent dans le JSON, à côté de l’image :

{"elements_som": [
  {"id": 1, "tag": "A", "texte": "Diwall"},
  {"id": 2, "tag": "SUMMARY", "texte": "Français"},
  {"id": 7, "tag": "A", "texte": "Perception"}
]}

Cliquer sur Perception, c’est donc {"type": "cliquer_som", "id": 7}. Aucun sélecteur, aucune description, aucune ambiguïté sur l’élément visé. Tout le mécanisme est là.

Trois — telle qu'elle se lit

La même page encore, en texte — l’arbre d’accessibilité que le navigateur construit lui-même, celui qu’utilise un lecteur d’écran :

- link "Aller au contenu":
  - /url: "#contenu"
- banner:
  - heading "Diwall" [level=1]:
    - link "Diwall":
      - /url: /fr/
  - group: Français
  - button "Basculer entre thème clair et thème sombre"
  - group: Télécharger 1.24.4 ▾
- navigation "Diwall":
  - link "Guides":
    - /url: /fr/guides/
  - link "Recettes":
    - /url: /fr/recettes/
  - link "Perception":
    - /url: /fr/perception/
  - link "Cas d'usage":
    - /url: /fr/cas-d-usage/
  - link "Architecture":
    - /url: /fr/architecture/
  - link "Journal":
    - /url: /fr/journal/
  - link "Agents":
    - /url: /fr/agents/
  - link "Le projet":
    - /url: /fr/projet/
- main:
  - paragraph: Vous décrivez l’écran à votre modèle. Il répond avec…

Cette vue ne coûte presque rien en tokens et porte la structure qu’une image ne peut pas porter : ce qui est un titre, ce qui est une navigation, où mène chaque lien. C’est aussi la vue qui révèle ce qu’une image dissimule.

Ce sur quoi les trois vues ne s'accordent pas

Regardez le menu de langue. Sur la capture, c’est un bouton. Sur la vue numérotée, c’est l’élément 2. Sur la vue texte, c’est group: Français — et les quatre langues qu’il contient sont absentes des trois.

Elles sont pourtant dans le HTML. Elles sont simplement fermées : le menu est un élément <details> natif, et un navigateur ne rend pas ce qui n’est pas ouvert. Une personne clique et les voit. Un agent doit cliquer d’abord, lui aussi, puis regarder de nouveau.

Ce n’est pas un défaut à cacher, c’est la réponse honnête à la question que pose cette page. Ce qu’un modèle perçoit, c’est ce qui est rendu, pas ce qui existe dans le fichier. Celui qui écrit la page décide lequel des deux un agent reçoit.

La première version de cette page l’a prouvé à la dure. Le menu était fermé mais restait mesurable : Diwall a donc numéroté quatre éléments sans le moindre texte — {"id": 10, "texte": ""}, quatre fois. Inutilisables pour un agent, invisibles pour un humain, et repérés seulement parce que nous avons pointé l’outil sur notre propre page. Une ligne de CSS l’a corrigé, et la capture ci-dessus est celle d’après.

Refaites-le

diwall-shot --url https://diwall.davalan.fr/fr/ --som --a11y --guide-version 1.3

Une seule commande renvoie les trois : la capture, la surcouche numérotée et l’arbre d’accessibilité. Les images de cette page en sont la sortie, sans retouche — la capture ordinaire est recadrée au même cadre que la capture numérotée, qui saisit la fenêtre visible et non la page entière.