Blog de Hinault Romaric (.NET Core, ASP.NET Core, Azure, DevOps)

Après quelques semaines d’absence pour des vacances bien mérités, je reviens gonflé a bloc et encore plus motivé à partager avec vous l’expérience et les connaissances acquises au travers de mes multiples projets.

Dans ce nouveau billet de blog, nous verrons comment exploiter les Hero Card pour améliorer le rendu de nos agents conversationnels.

Ce billet suppose que vous avez des connaissances avec le Bot Framework et QnA Maker.

Le Bot Framework embarque huit différentes cartes riches pour permettre aux développeurs d’offrir diverses expériences à leurs utilisateurs.

Il s’agit entre autres de :

• Adaptative Card : carte personnalisable pouvant contenir toute combinaison de texte, images, boutons, audio, etc ;
• Animation Card : carte pouvant jouer une courte vidéo ou une image animée (Gif) ;
• Audio Card : carte pouvant jouer un fichier audio ;
• Hero Card : simple carte pouvant contenir une image, un ou plusieurs boutons et du texte ;
• Thumbnail Card : simple carte pouvant contenir une image Thumbnail, un ou plusieurs boutons et du texte ;
• Receipt Card : carte pouvant être utilisée par un bot pour générer un reçu. Cette carte contient couramment la liste des items commandés, le montant, les taxes, le total et autres informations de facturation ;
• SignIn Card : carte pouvant être implémentée dans un bot pour demander à l’utilisateur de s’identifier. Il contient couramment du texte et un ou plusieurs boutons sur lesquel l’utilisateur peut cliquer pour démarrer un processus de connexion ;
• Video Card : carte permettant de jouer un fichier vidéo.

Dans cet exemple, je souhaite que certaines questions posées au bot, ce dernier soit en mesure de fournir une réponse avec une image illustrative, du texte et un lien pour ceux qui veulent en savoir plus.

Pour atteindre un tel résultat, la première chose à faire sera de formater les données de votre base de connaissances (vos questions/réponses) au format JSON :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
{
  "Title": "Poutine",
  "Description": "La poutine est un mets de cuisine québécoise composé, dans sa forme classique, de trois éléments : des frites, du fromage et de la sauce brune.",
  "Image": "http://rdonfack.developpez.com/images/poutine.jpg",
  "Url": "https://en.wikipedia.org/wiki/Poutine",
  "BoutonText": "En savoir plus..."
}

Ensuite créer l’entité correspondante :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
public class FormattedAnswer
 
	    {
	        public string Title { get; set; }
	        public string Description { get; set; }
	        public string Image { get; set; }
	        public string Url { get; set; }
	        public string BoutonText { get; set; }
	    }

Puis overrider la méthode RespondFromQnAMakerResultAsync de la classe QnAMakerDialog pour formater les données qui sont au format JSON avant de les affichées via des Hero Card :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
[Serializable]
    public class QnaDialog : QnAMakerDialog
    {
        public QnaDialog() : base(new QnAMakerService(new QnAMakerAttribute(ConfigurationManager.AppSettings["QnaSubscriptionKey"],
            ConfigurationManager.AppSettings["QnaKnowledgebaseId"], "Désolé, je n'ai pas trouvé une reponse à cette question", 0.5)))
        { }
 
        protected override async Task RespondFromQnAMakerResultAsync(IDialogContext context, IMessageActivity message, QnAMakerResults result)
        {
 
            var answer = result.Answers.First().Answer;
 
            Activity reply = ((Activity)context.Activity).CreateReply();
 
            try
            {
 
                var response = JsonConvert.DeserializeObject<FormattedAnswer>(answer);
 
                HeroCard card = new HeroCard
                {
                    Title = response.Title,
                    Subtitle = response.Description,
                    Buttons = new List<CardAction>
                         {
                             new CardAction(ActionTypes.OpenUrl, response.BoutonText, value: response.Url)
                         },
                    Images = new List<CardImage>
                        {
                             new CardImage(url:response.Image)
                        }
                };
 
                reply.Attachments.Add(card.ToAttachment());
 
            }
            catch(JsonReaderException)
            { 
            reply.Text = answer;
            }
            await context.PostAsync(reply);
 
        }
    }

Ce qui produit le résultat suivant :

Pour en savoir plus, vous pouvez consulter les liens suivants :

• Add rich card attachments to messages
• QnA Maker
• Mon GitHub sur Bot Framework et QnA Maker