Voir le flux RSS

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

[Actualité] Bot Framework & QnA Maker : utiliser les Hero Card dans son bot

Noter ce billet
par , 04/08/2018 à 18h18 (305 Affichages)
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 :

Nom : img1.PNG
Affichages : 738
Taille : 20,7 Ko

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 :

Nom : img2.PNG
Affichages : 840
Taille : 149,3 Ko

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

Envoyer le billet « Bot Framework & QnA Maker : utiliser les Hero Card dans son bot » dans le blog Viadeo Envoyer le billet « Bot Framework & QnA Maker : utiliser les Hero Card dans son bot » dans le blog Twitter Envoyer le billet « Bot Framework & QnA Maker : utiliser les Hero Card dans son bot » dans le blog Google Envoyer le billet « Bot Framework & QnA Maker : utiliser les Hero Card dans son bot » dans le blog Facebook Envoyer le billet « Bot Framework & QnA Maker : utiliser les Hero Card dans son bot » dans le blog Digg Envoyer le billet « Bot Framework & QnA Maker : utiliser les Hero Card dans son bot » dans le blog Delicious Envoyer le billet « Bot Framework & QnA Maker : utiliser les Hero Card dans son bot » dans le blog MySpace Envoyer le billet « Bot Framework & QnA Maker : utiliser les Hero Card dans son bot » dans le blog Yahoo

Commentaires