Essentiel•10–16 heures

Interface de production pour assistant IA

Construisez un frontend d’assistant IA prêt pour la production avec streaming, citations, approbations, annulation, états d’erreur et accessibilité.

UI en streaminggestion d’étatapprobationsaccessibilitérendu sécurisé

Scénario

Tâche

Un utilisateur travaille avec un assistant IA qui diffuse sa réponse, affiche ses sources et peut proposer une action risquée. L’interface doit expliquer son état, permettre l’annulation et exiger une confirmation explicite.

Exécution pas à pas

1. Concevoir le modèle d’état

Résultat: L’UI possède des états explicites idle, loading, streaming, error et approval.

Tâches

→Décrire la machine à états
→Ajouter l’annulation
→Séparer le contenu des commandes

Vérifications

✓Aucun état de transition caché
✓Un submit répété ne duplique pas la requête

2. Implémenter le streaming et les citations

Résultat: La réponse se met à jour de façon stable et expose ses preuves.

Tâches

→Traiter les chunks
→Ajouter des cartes de sources
→Ajouter un état d’abstention

Vérifications

✓Les chunks désordonnés ne cassent pas l’UI
✓Une citation inconnue n’est pas affichée comme valide

3. Ajouter l’UX d’approbation

Résultat: Les actions risquées ne sont pas exécutées sans consentement.

Tâches

→Afficher les conséquences
→Ajouter confirmer et refuser
→Ajouter un résumé d’audit

Vérifications

✓Aucune auto-confirmation
✓L’utilisateur voit l’action exacte avant exécution

4. Vérifier l’accessibilité et les pannes

Résultat: L’interface est accessible et récupère après les erreurs.

Tâches

→Tester le clavier
→Vérifier les annonces du lecteur d’écran
→Simuler une panne réseau

Vérifications

✓Le focus n’est pas perdu
✓Chaque erreur propose un retry ou une sortie sûre

Critères d’acceptation

Le streaming peut être annulé
Les citations sont validées
Les actions risquées exigent une approbation
L’UI passe le parcours clavier
Une preuve des états d’échec existe

Grille d’évaluation

Comment le résultat est évalué

Score de réussite: 72/100 · Distinction: 90/100

Modèle d’état de l’UI

Les états de streaming, erreur, annulation et approbation sont explicites.

25 points

Insuffisant

Les états sont mélangés ou des race conditions subsistent.

Compétent

Les états principaux sont explicites et testés.

Solide

Replay déterministe, tests de concurrence et chemins de récupération sont implémentés.

Preuves requises

✓ Lien vers l’artefact ou le code
✓ README avec décisions et compromis
✓ Preuve des vérifications exécutées
✓ Diagramme d’état ou table de transitions

Citations et rendu sécurisé

Les sources sont validées et le contenu non fiable ne peut pas devenir une commande.

25 points

Insuffisant

Une source inconnue est affichée comme valide.

Compétent

Les citations sont validées et disposent d’un fallback.

Solide

Provenance, validation de schéma et tests de sécurité sont implémentés.

Preuves requises

✓ Lien vers l’artefact ou le code
✓ README avec décisions et compromis
✓ Preuve des vérifications exécutées
✓ Exemple de citation valide et invalide

UX d’approbation

Les actions risquées exposent le contexte, confirmer/refuser et une trace d’audit.

25 points

Insuffisant

Une action peut être exécutée sans consentement explicite.

Compétent

L’approbation bloque l’exécution et montre les conséquences.

Solide

Undo, approbation déléguée et audit trail durable sont implémentés.

Preuves requises

✓ Lien vers l’artefact ou le code
✓ README avec décisions et compromis
✓ Preuve des vérifications exécutées
✓ Enregistrement du flux d’approbation

Accessibilité et récupération après échec

Clavier, focus, annonces et retry fonctionnent de façon fiable.

25 points

Insuffisant

Le focus est perdu ou les mises à jour de streaming ne sont pas annoncées.

Compétent

Le parcours principal est accessible et récupérable.

Solide

Des tests d’accessibilité automatisés et la progressive disclosure sont implémentés.

Preuves requises

✓ Lien vers l’artefact ou le code
✓ README avec décisions et compromis
✓ Preuve des vérifications exécutées
✓ Checklist clavier et lecteur d’écran