Intégrer des appels téléphoniques à un Chatbot Dialogflow via WebSockets

Introduction

Ce tutoriel vous montrera comment passer un appel téléphonique à un agent Dialogflow en utilisant Dialogflow Essentials et une intégration Vonage WebSockets.

Le diagramme ci-dessous donne un aperçu de l'architecture.

Diagram of the call

Pré-requis

Pour effectuer les actions décrites dans les étapes suivantes, vous devez créer :

1. A Compte Dialogflow

2. A Compte API Vonage

Créer un agent Dialogflow

Dialogflow est un logiciel en tant que service (SaaS) et une plateforme de compréhension du langage naturel utilisée pour créer des interfaces utilisateur conversationnelles.

Un agent est une instance Dialogflow, que vous pouvez considérer comme votre application de chatbot. Il vous permet de prendre ce que les utilisateurs disent, de le mettre en correspondance avec des intentions et de leur fournir des réponses.

Suivez les étapes

1. Ouvrir la console console dialogflow

2. Créez un agent en lui donnant un nom, en définissant la langue par défaut, en choisissant le fuseau horaire et en cliquant sur le bouton de création d'un agent. Le bouton peut être affiché sous la forme Create ou Create Agent

3. Dans le menu de gauche, cliquez sur l'icône de l'engrenage.

4. Sous Google Project, cliquez sur le nom de l'identifiant du projet. Par exemple, VonageDF Vous accéderez ainsi à la console Google Cloud

Gif showing the steps to create the dialogflow Agent

Créer un Account de service sur la Google Cloud Console

Nous allons utiliser l'interface utilisateur graphique pour gérer notre projet Google Cloud et nos ressources via la console Google Cloud en utilisant le même projet créé dans Dialogflow. Dans les étapes suivantes, nous allons créer un Account de service pour le contrôle d'accès et l'authentification.

Suivez les étapes

1. Depuis la console Google Cloudcliquez sur Go to project settings

2. Dans le menu de gauche, cliquez sur Service accounts

3. Dans la barre supérieure, cliquez sur + Create Service Account

4. Donnez-lui un nom de compte de service dont vous vous souviendrez, par exemple VonageDF

5. Ajouter une description de compte de service

6. Cliquez sur Create and Continue

7. Sous Grant this service account access to projectFiltrer et sélectionner le rôle Dialogflow API Admin

Gif showing the seven above steps while creating the Service Account

Vous revenez à la page Comptes de service.

1. Cliquez sur les trois points situés sous action

2. Cliquez sur Manage keys

3. Cliquez sur Add Key

4. Cliquez sur Create new Key

5. Sélectionner JSON

6. Cliquez sur Create

7. Vous pouvez voir qu'un .json a été téléchargé. Nous allons ajouter ce fichier au dépôt GitHub de Dialogflow Reference Connection GitHub que nous clonerons dans l'étape suivante

Gif showing the above steps to generate the keys

Configuration de la connexion à la référence Dialogflow

La connexion de référence Dialogflow utilise la fonctionnalité WebSockets de l'API Voice de Vonage. Lorsqu'un appel vocal est établi, une application Voice API déclenche une connexion WebSocket à la connexion de référence Dialogflow. Dialogflow-reference-connection. Elle transmet l'audio vers et depuis l'appel vocal en temps réel.

Dans les étapes suivantes, nous allons donner deux options à titre d'exemple. Utiliser ngrok pour tunneliser le serveur de connexion, qui interagit avec notre agent Dialogflow et le déployer sur Heroku.

Suivez les étapes

1. Cloner le référentiel référentiel dialogflow-reference-connection depuis GitHub et modifiez le répertoire git clone https://github.com/nexmo-community/dialogflow-reference-connection && cd dialogflow-reference-connection

2. Ouvrez le code dans votre IDE ou éditeur de texte préféré

3. Ajoutez le fichier .json qui vient d'être téléchargé à la racine du projet

4. Créer un fichier .env à partir du fichier .env.example

5. Renseignez les variables d'environnement : GCLOUD_PROJECT_ID=<TheProjectIdFoundOnDialogflow> GOOGLE_CLOUD_CREDENTIALS=<TheJSONFileYouDownloaded.json> Depuis le terminal :

6. Installer les dépendances npm install

7. Exécuter le fichier Dialogflow en connectant le serveur node df-connecting-server.js Il existe de nombreux types de déploiement, tels que App Engine, Heroku, Cloud Run.

Dans ce tutoriel, nous montrerons des exemples utilisant l'outil ngrok tunneling. Voici un lien expliquant plus en détail ngrok et Heroku.

Option 1 : Exemple avec ngrok

1. Exécuter ngrok http 5000

2. Notez l'URL trouvée dans la console (par ex. xxxx.ngrok.io). Nous ajouterons cette information dans la partie DF_CONNECTING_SERVER l'argument de la mise en place de l'application Dialogflow Voice API Sample Application' du tutoriel

The ngrok URL highlighted on the IDE

Option 2 : Exemple avec Heroku

1. Installer git

2. Installer Ligne de commande Heroku et connectez-vous à votre Account Heroku

3. Si vous n'avez pas encore de dépôt git local, créez-en un : git init

4. Commencez par créer cette application sur Heroku à partir de la ligne de commande en utilisant le CLI Heroku. Note : Dans la commande ci-dessous, remplacez thisappname par un nom unique sur l'ensemble de la plateforme Heroku. heroku create thisappname

5. Sur votre tableau de bord Heroku où la page de votre application est affichée, cliquez sur le bouton Settings et ajoutez les éléments suivants Config Vars et définissez-les avec leurs valeurs respectives :

1. Déployer l'application git push heroku master ou git push heroku main en fonction du nom de votre branche.

2. Notez l'URL trouvée dans la console (par ex. thisappname.herokuapp.com). Nous ajouterons cette information dans l'argument de la partie 'Configurer l'exemple d'application Dialogflow Voice API' du tutoriel. DF_CONNECTING_SERVER de la partie 'Configurer l'exemple d'application Dialogflow Voice API' du tutoriel.

Configurer les informations d'identification et le numéro de téléphone de votre application Vonage Voice API

Suivez les étapes

1. Créer une application à partir du tableau de bord de l tableau de bord de l'API de Vonage

2. Donnez un nom à l'application, par exemple VonageDF

3. Cliquez sur le bouton pour générer une clé publique et une clé privée. private.key sera téléchargé. Nous l'ajouterons à l'application d'exemple Dialogflow Voice API dans la prochaine section de ce tutoriel.

4. Associez un numéro de téléphone à cette application. Si vous n'en avez pas encore, dans le menu de gauche, cliquez sur Numbers puis sur Buy Numbers et suivez les étapes pour l'acheter

Nous allons configurer l'application Dialogflow Voice API Sample et nous reviendrons bientôt sur le tableau de bord de l'application Vonage pour y ajouter d'autres informations.

Configuration de l'exemple d'application Dialogflow Voice API

Cet exemple d'application utilise l'API Voice Voice de Vonage pour répondre aux appels vocaux entrants et établir une connexion WebSocket pour diffuser de l'audio vers et depuis la connexion de référence Dialogflow pour chaque appel.

La connexion de référence connexion de référence dialogflow sera :

• Envoyer de l'audio à l'agent Dialogflow à partir de la voix de l'appelant,

• Diffusion en continu des réponses audio de l'agent Dialogflow à l'appelant via le WebSocket,

• Afficher en temps réel les transcriptions et les scores de sentiment de l'appelant via des webhooks qui renvoient à cette API. Exemple d'application de l'API Voice.

Une fois cette application lancée, vous appellerez le numéro de téléphone lié à votre application pour interagir par la voix avec votre agent Dialogflow.

Nous allons utiliser ngrok pour tunneliser le serveur de connexion qui interagit avec notre agent Dialogflow, mais si vous souhaitez voir un exemple utilisant Heroku, vous pouvez suivre les étapes suivantes Exemple d'application Dialogflow Voice API sur GitHub.

Suivez les étapes

1. Depuis votre terminal, clonez l'application Dialogflow Voice API Exemple d'Applications de GitHub et changez le répertoire git clone https://github.com/nexmo-community/dialogflow-sample-voice-application && cd dialogflow-sample-voice-application Vous pouvez continuer à suivre l'explication des étapes ci-dessous ou à partir du fichier readme de l'application Dialogflow Voice API Sample Application de GitHub. Dialogflow Voice API Sample Application

2. Ajoutez le fichier private.key généré à partir du tableau de bord de Vonage et téléchargé sur votre machine à la racine du projet

3. A partir de la .env.example créer un .env fichier

4. Remplir les variables d'environnement avec les informations présentes sur le tableau de bord de l'API Vonage. tableau de bord de l'API Vonage

• Le SERVICE_NUMBER est le numéro virtuel que vous avez acheté. N'oubliez pas d'ajouter au préalable l'indicatif du pays sans 00 ni +.

• Le DF_CONNECTING_SERVER est le serveur de la référence Dialogflow que vous avez déjà en cours d'exécution (celui dont vous avez pris note précédemment)

1. Installer les dépendances npm install

2. Exécuter le df-application.js node df-application.js Vous trouverez ci-dessous les étapes suivantes pour ngrok et pour Heroku :

   Option 1 : Voici les étapes à suivre pour utiliser ngrok

3. Dans un autre onglet du terminal, exécutez ngrok http 8000 Retournez au site Web du tableau de bord de Vonage et sous capacités :

4. Basculer Voice pour activer cette capacité

5. Ajouter l'URL de ngrok fonctionnant sur dialogflow-sample-voice-application suivie de /answer à l'URL de la réponse. Assurez-vous que l'option HTTP GET est sélectionnée.

6. Ajouter l'URL de ngrok fonctionnant sur dialogflow-sample-voice-application suivie de /event dans l'URL de l'événement. Assurez-vous que l'option HTTP POST est sélectionnée.

7. Cliquez sur Enregistrer les modifications

Vonage Dashboard

Option 2 : Étapes ci-dessous avec Heroku

1. Dans un autre terminal, si vous n'avez pas encore de dépôt git local, créez-en un : git init

2. Commencez par créer cette application sur Heroku à partir de la ligne de commande en utilisant le CLI Heroku. Note : Dans la commande, remplacez myappname par un nom unique sur l'ensemble de la plateforme Heroku. heroku create myappname

3. Sur votre tableau de bord Heroku où la page de votre application est affichée, cliquez sur le bouton Settings et ajoutez les éléments suivants Config Vars et définissez-les avec leurs valeurs respectives trouvées dans votre fichier .env fichier.

Ajoutez également le paramètre PRIVATE_KEY_FILE avec la valeur ./private.key

1. Sur votre tableau de bord Heroku où la page de votre application est affichée, cliquez sur le bouton Open App et copiez l'URL

2. Maintenant, déployons l'application. Retournez sur le site Web de Vonage Dashboard et cliquez sur capabilities (capacités) :

3. Basculer Voice pour activer cette capacité

4. Ce nom d'hôte (l'URL que vous venez de copier de Heroku) sera utilisé suivi de /answer dans l'URL de réponse. Assurez-vous que l'option HTTP GET est sélectionnée

5. Faites de même pour /event dans l'URL de l'événement. Assurez-vous que l'option HTTP POST est sélectionnée

6. Cliquez sur Enregistrer les modifications

Vonage Dashboard

Amélioration de l'agent Dialogflow

Si vous essayez d'appeler le numéro de téléphone à ce stade du didacticiel, vous pourrez interagir avec le point de départ de la conversation du point de vue de Dialogflow, la balise Default Welcome Intent.

Un message sera renvoyé à l'appelant à partir de la liste des réponses de l'utilisateur. Mais la conversation ne prendrait pas de tour car nous n'avons pas d'autres données formées pour d'autres tours de conversation.

Prenons un peu de recul et explorons certains des concepts de Dialogflow pour ajouter les énoncés que les utilisateurs pourraient prononcer, leur fournir une réponse et ajouter la fin de la conversation, de sorte que vous puissiez voir une conversation complète se dérouler à tour de rôle.

Une fois que vous avez créé un agent, vous créez des intentions qui gèrent et façonnent la conversation.

En cas d'énonciation par l'utilisateur, Dialogflow fait correspondre ce qui est dit à une intention, qui est basée sur le NLP et les phrases d'entraînement qu'un utilisateur pourrait potentiellement dire pour correspondre à cette intention. Une fois la classification de l'intention effectuée, une réponse est envoyée à l'utilisateur.

Les entités sont les types d'informations que nous allons extraire de la conversation. Dans le cas d'utilisation que nous verrons ci-dessous, nous réservons une table par téléphone. Les informations que nous allons extraire de la conversation sont person, date et time.

Améliorons l'intention de bienvenue par défaut, créons une intention, décrivons les entités, ajoutons une fin à la conversation et testons-la.

Suivez les étapes

1. Ouvrir la console console dialogflow et assurez-vous que vous êtes dans le bon agent pour ce tutoriel

2. Cliquez sur l'icône Default Welcome Intent

3. Faites défiler vers le bas, effacez les réponses et ajoutez-les : Welcome to our Demonstration Restaurant. When and for whom would you like to book a table?

4. Cliquez sur Enregistrer

5. Cliquez sur l'élément de menu Intents

6. Cliquez sur le bouton Nouvelle intention

7. Donnez-lui le nom de Table Booker

8. Sous Phrases d'entraînement, ajoutez les phrases d'entraînement suivantes

   • Une table pour Nicole le 10 à 13h00, s'il vous plaît.

   • Puis-je réserver un créneau à 14h00 le 10/12/2021 pour Joseph ?

   • Je voudrais réserver une table le 10/09/2020 à 16:00 pour Amanda Vous remarquerez qu'au fur et à mesure que vous tapez ces phrases, certains mots seront surlignés en couleur, assurez-vous de double-cliquer sur les mots et de vérifier qu'ils utilisent les entités correctes. @sys.person, @sys.date et @sys.time.

9. Sous Actions et paramètres, cochez required pour person, date et time

10. Ajoutez des invites pour chacun des paramètres, car au cas où ils n'auraient pas dit cet élément d'information spécifique au cours de la conversation, ils seront invités à l'ajouter.

Training phrases examples

1. Dans la réponse, vous pouvez ajouter ce qui suit : Table booked for $person at $time on $date. Thank you!

2. Bascule Set this intent as end of conversation, ci-dessous les réponses

3. Cliquez sur Enregistrer

Table Booker Intent Overview

Interagir par Voice avec l'agent Dialogflow

Maintenant que tous les éléments sont en place, il est temps d'appeler votre numéro de téléphone virtuel et de le tester. Voyons ce qui se passe et suivons la dernière étape pour passer l'appel !

Une fois que vous avez appelé le numéro de téléphone lié à votre application Voice API pour interagir avec l'agent Dialogflow Vous entendrez le message de confirmation : Connecting your call, please wait.. Ce texte vocal de la plateforme API de Vonage est joué dès que la plateforme répond à votre appel.

Une fois la liaison WebSocket établie, la plateforme API de Vonage joue la synthèse vocale à l'agent Dialogflow (vous ne l'entendez pas en tant qu'appelant). Hello à l'agent Dialogflow (en tant qu'appelant, vous ne l'entendrez pas).

Vous venez de mettre en place la lecture par l'agent Dialogflow.

À ce stade, vous allez interagir avec les intentions que vous avez définies dans la section précédente de ce didacticiel pour réserver une table.

Vous verrez les transcriptions sur la console d'application de la connexion de référence Dialogflow et également sur la console d'application de l'API vocale de l'échantillon Dialogflow.

Si vous souhaitez voir les résultats de l'analyse des sentiments, vous devez activer l'API Cloud Natural à partir de la console Google Cloud. Si elle n'est pas activée, vous obtiendrez une erreur similaire à la suivante PERMISSION_DENIED: Cloud Natural Language API has not been used in project xxxx before or it is disabled.

Passons à l'étape finale et voyons tous les éléments en action !

Suivez les étapes

1. Appelez le numéro de téléphone lié à votre application Voice API et interagissez avec l'agent Dialogflow.

2. Voici une façon potentielle de tester la conversation :

   1. Vonage Websocket : Connexion de votre appel, veuillez patienter.

   2. Bot : Bienvenue dans notre restaurant de démonstration. Quand et pour qui souhaitez-vous réserver une table ?

   3. Vous : Je souhaite réserver une table à 10h00 le 01/09/2022 pour Tanya

   4. Réponse du bot : Table réservée pour Tanya à 10:00 le 01/09/2022. Nous vous remercions de votre attention.

   Fin de l'appel

Félicitations

Vous avez terminé ce tutoriel sur les appels téléphoniques à un agent Dialogflow en utilisant une intégration Vonage WebSockets.

Ressources

Vous pouvez trouver l'exemple de Exemple de référence Dialogflow et Exemple d'application Voice sur Github.

Consultez le Guide de référence des WebSockets.

Vérifier le Un article de blog expliquant ngrok.

Vous pouvez également consulter un exemple similaire utilisant un Amazon Lex Bot.

J'espère que vous avez apprécié. N'hésitez pas à me contacter sur Twitter ou rejoignez notre canal Slack de la communauté.