Introduction

Initialement, il s'agit d'un projet personnel réalisé durant un temps partiel annualisé. L'objectif était de créer un avatar pour un site de mathématiques capable de répondre en contexte à des questions pré-enregistrées.

Je n'avais pas vraiment repris le dessin à l'époque et il m'a fallu beaucoup de temps pour parvenir à ce résultat, sans compter la partie programmation monstrueuse car j'aime bien tout créer de zéro.

Le personnage se voulait rassurant et féminin, je pensais d'ailleurs l'appeler Maryam... Elle possède 5 postures, cligne des yeux et adapte le mouvement de ses lèvres au texte qu'elle prononce en suivant les voyelle (lipdub rudimentaire).

Vous pouvez la tester avec le petit scénario suivant, n'hésitez pas à explorer l'arbre de dialogue.

Je laisse ci-dessous un document pédagogique utilisé autour de ce personnage avec des propositions d'exercices et une documentation permettant aux élèves de s'approprier l'agent de dialogue afin de créer leurs propres dialogues (elle en a prononcé des c***eries cette pauvre Maryam !)

Le dossier !

En espérant que l'introduction vous ait plu, nous allons vous proposer dans ce projet de travailler sur un agent de dialogue web et de produire un dialogue interactif convivial pour des utilisateurs. Un agent de dialogue, agent conversationnel ou encore assistant virtuel est un personnage virtuel qui imite la conversation humaine.

Il s'agit d'une interface homme machine dont l'intelligence artificielle peut être plus ou moins profonde selon sa fonction (agent d'accueil, coach personnel, jeu vidéo, performances artistiques,...). On parle aussi parfois de chatbot. Un agent peut être intelligent dans le sens où il tentera de s'adapter à toute phrase entrée au clavier (avec plus ou moins de succés). Il en existe de nombreux exemples en ligne . L'intelligence d'un agent de dialogue est évaluée en lui faisant passer le fameux test de TuringCe test consiste à faire dialoguer des utilisateurs à l’aveugle avec un ordinateur et un autre humain. Si les utilisateurs échouent à différencier l'humain de l'ordinateur, les test de Turing est réussi. Aucun agent de dialogue n'a jamais réussi à passer ce test.

Un agent de dialogue est dit scripté si il suit un scénario pré-établi structuré par un arbre de dialogue.

Les choix de réponses et réponses sont alors limités. Une arbre très détaillé peut cependant donner l'illusion d'une certaine intelligence. L'introduction suivait bien sûr un script. Les personnages non joueurs (PNJ) d'un jeu vidéo sont généralement des agents scriptés dont l'arbre de dialogue est une simple boucle. Inutile d'attendre un échange riche avec ceux-là !

Structure d'un dialogue

Le XML (eXtensible Language Markup) est un langage de représentation de données balisé proche du HTML qui permet notamment de représenter des arbres de décision, et donc des dialogues. Un dialogue scripté peut être représenté par une structure d'arbre où les branches traduisent des choix : Prenons par exemple cet arbre représentant un court dialogue à choix multiples :

Une représentation textuelle, sous forme d'un fichier XML de ce dialogue pourrait ressembler à ceci :

Bonjour...

..comment allez-vous ?

Très bien et vous ?
Bof...

Cette représentation XML sera celle employée par la bibliothèque utilisée dans ce projet. Les balises <message>, <p>, <ul>, <li> représentent les noeufs de l'arbre :

<message> est la racine de l'arbre de dialogue.
<p> est un paragraphe qui apparaîtra comme une phrase simple dans le message.
<ul> ouvrira un menu de choix
<li> sera une option de choix possible pour l'utilisateur

L'attribut type peut avoir plusieurs valeurs. La valeur once signifie qu'un seul choix est possible pour cette question.

Consignes

Réaliser un dialogue entre un utilisateur et un agent de dialogue scripté. Le choix de la thématique du dialogue et sa scénarisation sont libres. Un exemple possible de projet : Agent d'accueil virtuel du lycée permettant :

D'aiguiller un élève de 3ème souhaitant poursuivre des études au lycée sur des questions d'orientation. Il faudrait alors présenter les parcours possibles et donner des conseils adaptés à la poursuite des études.
D'aider un nouvel élève de seconde à se repérer dans le lycée. Il faudrait l'orienter efficacement vers les personnes et les services susceptibles de l'aider en s'adaptant aux questions qu'il pourrait poser.

Même si il y a liberté importante dans la réalisation de ce projet, il y aura un cadre précis à respecter :

Le dialogue réalisé devra respecter le cahier des charges ci-dessous.
Une bibliothèqueUne bibliothèque ou librairie (mauvaise traduction de l'anglais) est un ensemble de modules et fonctions (ici en langage JavaScript) prêts à être utilisés dans un programme informatique pour un but précis. est mise à disposition dans la section "mise en oeuvre" ci-dessous afin d'intégrer un agent de dialogue à une page web, comme dans l'introduction de cette page.

Afin de préciser la démarche, remarquons que :

Il n'est donc pas question ici de créer un agent de dialogue, mais d'en utiliser un existant (dans la bibliothèque) pour réaliser votre propre dialogue.
Pour celà, il sera plus simple de partir d'un script de dialogue existant, d'essayer de comprendre ses mécanismes, et de le modifier : autrement dit "hacker" Le terme "hacker", à la base ne signifie rien de plus que "bidouiller", très loin des connotations illégales qu'il peut parfois avoir, à tort..

Veillez à bien respecter le cahier des charges : le projet est évalué à partir de celui-ci.

Le dialogue devra présenter les caractéristiques suivantes :

Les trois formes de choix devront être présentes (une seule réponse, réponses disparaissent, réponses toujours présentes) et bien évidemment adaptées au dialogue proposé.
Il faudra que certains dialogues soient profonds : c'est à dire qu'une suite de choix puisse entraîner une nouvelle suite de sous-choix.
Certaines diapos derrière le personnage devront contenir des images et mettre en valeur le propos.
Pas de boucles infinies ou de dialogues sans sortie possible : un début et une fin (ou plusieurs fins!).
Utilisez des variables pour qu'un choix fait à un moment du dialogue ait des conséquences un peu plus loin.
Le dialogue ne devra pas être linéaire, et contenir par exemple des retours en arrières ou des sauts en avant (voir l'instruction goto dans le tutoriel).
Utiliser la CSS pour donner un style personnel à vos diapos (elles doivent rester assez courtes tout de même).

Mise en oeuvre

Nous mettons une bibliothèque d'agent de dialogue web à disposition pour ce projet :

Téléchargez cette archive dans votre dossier personnel.
Décompressez l'archive dans un nouveau dossier de travail.
Le fichier index.html est une présentation du fonctionnement de la bibliothèque (faite par l'agent de dialogue). Vous pouvez l'ouvrir avec Notepad++ pour le visualiser et le modifier.
L'élément <xml> contient la structure du dialogue.

La présentation de la librairie est aussi disponible en ligne (cliquez sur l'apperçu ci-dessous) :

Quelques conseils avant de démarrer dans le projet :

Copier le dossier décompressé et lui donner le nom de votre projet afin de le modifier tout en gardant intact le tutoriel
Regarder une première fois la présentation sans aller lire le fichier .xml du dialogue scripté
Regarder ensuite la présentation en essayant de retrouver les étapes du dialogue dans le fichier scene-demo.xml.
Identifier les balises et les attributs du fichier de dialogue en comprenant leurs rôles respectifs (prendre des notes).
Séparer les difficultés : écrire le dialogue sous forme d'arbre sur une feuille, et le programmer ensuite.

Le dialogue n'a pas besoin d'être excessivement long. N'hésitez pas à jouer le jeu de rôle, vous pourrez vous montrer familier, mais évitez la grossièreté et soignez votre orthographe.

Manuel librairie agent-dialogue

La présentation interactive illustre et détaille la syntaxe que le tableau ci-dessous résume :

Balise	Attributs/Valeurs
`<diapo>`	`transition` : `stay` : la diapo reste affichée jusqu'à la prochaine diapo `fade` : disparaît progressivement au bout de quelques secondes
`<agentDialogue>`	`name` : `ava` : charge le personnage Ava (seule disponible) `transition` : idem que pour les diapos Peut contenir les balises <p> (paragraphes) ou <ul> (choix de dialogues)
`<message>`	`dt` : temps de défilement entre deux caractères Peut contenir les balises <p> (paragraphes) ou <ul> (choix de dialogues)
`<message> <p>`	Peut contenir les balises d'humeur `<neutre/>`, `<explique/>` etc., qui animent l'agent de dialogue
`<message> <ul>`	`type` : `once` : une seule réponse admise parmi toutes DOIT contenir les balises <li> (choix)
`<message> <ul> <li>`	`type` : `once` : la réponse disparaît des choix après lecture `quit` : réponse de sortie ("au revoir") peut contenir d'autres balises <ul> (choix)
`<set>`	`var` : le nom de la variable à modifier (exemple : "x") `val` : la valeur à donner (exemple : "0", "true", "x+1", etc.)
`<goto>`	target : redirige le dialogue vers la cible (par exemple target="#id1" si id1 est l'id d'uun élément de la scene)
`<if>`	`condition` : un test (ex : "x==1") peut contenir <then> et <else>
`<while>`	`condition` : un test. Attention si il reste vrai, la boucle peut être infinie Attention, if et while* ne fonctionnent pas dans une diapo.*
`tout élément`	id : un identifiant unique (id="1", id="reponse3") condition : une condition