Une démo enregistrée en vidéo ne survit pas aux changements de l'interface. Or notre produit existe en deux thèmes et huit langues, et son interface change chaque semaine. C'est pourquoi nous enregistrons les actions de l'opérateur, puis nous les rejouons dans la véritable application.
Deux thèmes, huit langues, seize rendus
Prenez une démo d'une minute : un contrat ouvert dans la Bibliothèque, un clic sur Détecter, un passage par Réviser, puis Encoder et le téléchargement. Or le produit existe en huit langues, pour l'application, le site et le blog. Il faut donc montrer cette minute dans chacune d'elles. Un avocat lyonnais à qui l'on montre l'interface en anglais en conclut que la version française est secondaire.
Le produit existe aussi en deux thèmes, clair et sombre. Une vidéo tournée en thème clair détonne sur une page sombre. Deux thèmes multipliés par huit langues donnent ainsi seize rendus pour une seule minute.
Nous donnons les deux facteurs, car le total en dépend : avec le polonais, huitième langue, il est passé de quatorze à seize. À cela s'ajoute le rythme des versions. Un libellé allemand est raccourci, un écran de réglages gagne une rubrique, et une démo enregistrée en images devient fausse dans ses seize versions à la fois.
Ce que suppose la capture d'écran
Arcade, Storylane, Supademo, Trupeer : ces outils connus partagent une même approche, la capture. L'opérateur parcourt l'interface, l'outil enregistre ce qui s'affiche, puis viennent les annotations et la publication. Pour un produit en une langue et un thème, à l'interface stable, la méthode convient. Nous n'en avons lu que la documentation, et ne jugeons ici que leur approche.
Nous avons d'ailleurs commencé par là : un outil tout fait, une session de tournage, une démo sur la page d'accueil. Cela a cessé de fonctionner au premier changement sérieux de l'interface. En effet, une capture ne connaît que l'image. Si vous changez un libellé, la démo continue d'afficher l'ancien devant chaque visiteur. Il faut alors tout tourner à nouveau, seize fois.
Enregistrer les actions plutôt que l'écran
Nous enregistrons donc ce que l'opérateur a fait, et non ce que l'écran montrait. Ouvrir tel document, lancer Détecter, accepter une valeur dans Réviser, Encoder, télécharger : la démo devient un script d'actions. Ce script est ensuite rejoué dans l'application elle-même.
Ce changement règle les deux problèmes à la fois. Le thème et la langue deviennent de simples paramètres du rendu : Demo Studio, notre outil interne, les fait varier sur un même script. Quant à un changement d'interface, il ne demande plus de tournage. Il suffit d'un nouveau rendu, lancé par la machine.
La démo ne peut pas non plus s'écarter du produit, puisqu'elle n'existe pas en dehors de lui. Elle affiche l'application telle qu'elle est livrée au moment du rendu.
La véritable interface, dans un navigateur
Restait à faire tourner l'application dans un navigateur. La page /demo du site charge pour cela la véritable interface de l'application de bureau. La configuration webpack du site, sous Next.js, déclare un alias, @desktop, qui pointe vers les sources de ce frontend. La démo importe ainsi les mêmes composants React, les mêmes styles et les mêmes traductions.
Ce qui ne peut pas tourner dans un navigateur est remplacé à la compilation. Le NormalModuleReplacementPlugin de webpack remplace le module d'API, qui dialogue d'ordinaire avec le moteur local, par un module qui renvoie des réponses simulées. Les appels à Tauri, la couche native de l'application, aboutissent à des bouchons sans effet. Les PDF, eux, sont rendus côté client par pdf.js.
Un changement de l'interface de bureau atteint donc la démo à la compilation suivante, sans copie manuelle. Personne n'a à se souvenir de la mettre à jour. Dans une petite structure, c'est la seule garantie qui tienne.
Une précision s'impose : /demo n'est pas l'endroit où un prospect essaie le produit. Ce rôle revient à l'application web gratuite, sur app.promptshield.ca, qui traite vos propres fichiers sans que le document quitte votre machine. La page /demo est celle sur laquelle Demo Studio rejoue ses scripts, avec des données simulées.
Des dossiers inventés
Un logiciel d'anonymisation se montre sur des pièces qui ont l'air sensibles : un contrat, un état financier, avec un numéro de sécurité sociale, un IBAN ou un RIB. Tourner sur un vrai dossier serait plus convaincant, mais aussi plus risqué.
En effet, une démo tournée sur des données réelles, puis hébergée chez un éditeur tiers, confie à cet éditeur tout ce qui s'affichait à l'écran. Or un NIR filmé reste une donnée personnelle.
Le prestataire qui héberge la vidéo pour vous devient donc un sous-traitant au sens de l'article 28 du RGPD, avec le contrat et les garanties que la CNIL attend. Pour un avocat ou un expert-comptable, le secret professionnel pose la question avant même le RGPD.
C'est pourquoi nos documents de démonstration sont fabriqués, langue par langue : un contrat et un état financier en PDF, plus quelques fichiers bureautiques pour la Bibliothèque. Leurs identifiants ont la forme des vrais, mais n'appartiennent à personne. Les valeurs surlignées, elles, viennent de la vraie détection, lancée sur ces fichiers avec les paramètres de chaque langue, puis figée.
La démo montre donc ce que le moteur a réellement relevé. L'étape Réviser y garde sa place, car aucun modèle local ne relève tous les identifiants, et le produit ne prétend pas le contraire.
Acheter un outil ou développer le sien
Avec la capture, le coût d'une démo suit l'interface. Chaque changement visible demande un nouveau tournage, multiplié par le nombre de variantes. Avec seize variantes et une interface qui change chaque semaine, on finit par renoncer à entretenir la démo.
Avec un script d'actions, l'essentiel du coût est payé au départ : il faut écrire l'outil et le script une fois. Ensuite, chaque rendu se paie en temps machine. Un changement d'interface ne coûte alors que la compilation qu'il déclenche de toute façon.
Nous avons donc payé en temps plutôt qu'en abonnement. Demo Studio a été écrit en quelques jours par une seule personne. promptShield n'a en effet aucun salarié : le fondateur travaille avec des modèles d'IA, comme l'indique notre page Équipe.
Ces quelques jours n'ont suffi que parce que les bases existaient déjà. L'interface de bureau était déjà écrite en React et traduite en sept langues. Elle était aussi séparée de ses appels natifs par une couche d'API remplaçable. Sans cela, louer un outil aurait été plus raisonnable.
Prenez donc un outil du marché si votre démo n'a qu'une langue, un thème et une interface stable. Développez le vôtre si le nombre de variantes multiplie le prix de chaque changement. Nous avons fait le même choix pour le moteur de détection, c'est-à-dire pour le produit que nous vendons.
Ce que nous en retenons
Une démo doit être exacte, puisqu'elle présente le produit à ceux qui ne l'ont pas encore installé. Ici, cette exactitude ne dépend de la vigilance de personne : une démo qui rejoue l'application ne peut montrer qu'elle. Avant de choisir un outil, demandez-vous donc ce que vous enregistrez : l'image d'un instant, ou la suite des actions.
Questions fréquentes
Pourquoi ne pas utiliser un outil de capture d'écran ?
Pour beaucoup de produits, c'est le bon choix : avec une langue, un thème et une interface stable, la capture donne une démo propre en un après-midi. Notre cas, lui, cumule deux thèmes, huit langues et des versions fréquentes. Chaque changement visible se paierait seize fois.
Que se passe-t-il quand l'interface change ?
La démo suit à la compilation suivante, puisqu'elle affiche le frontend réel et ses traductions. Si une étape du script décrit une action qui n'existe plus, comme un bouton retiré, il faut réécrire cette étape. Cette correction, faite une seule fois, vaut pour toutes les variantes.
Comment garder huit langues synchronisées ?
La démo n'a aucune traduction propre : elle lit les fichiers de traduction de l'application. Or chaque texte ajouté à l'interface est saisi dans les huit fichiers à la fois. Les documents de démonstration sont, eux, définis par langue, pour qu'un visiteur allemand voie un contrat allemand.