1. Avant de commencer
Dans cet atelier de programmation, vous allez apprendre à intégrer un bot vocal et textuel Dialogflow Essentials (ES) simple dans une application Flutter. Dialogflow ES est une suite de développement permettant de créer des UI conversationnelles. Il s'agit donc des chatbots, des bots vocaux et des passerelles téléphoniques. Vous pouvez tous créer votre chaîne avec le même outil et même prendre en charge plusieurs chaînes dans plus de 20 langues différentes. Dialogflow s'intègre avec de nombreuses plates-formes de conversation, telles que l'Assistant Google, Slack et Facebook Messenger. Pour créer un agent destiné à l'une de ces plates-formes, vous disposez d'un large choix d'options d'intégration. Toutefois, pour créer un chatbot pour les appareils mobiles, vous devrez créer une intégration personnalisée. Vous allez créer des intents en spécifiant des expressions d'entraînement pour entraîner un modèle de machine learning sous-jacent.
Cet atelier est organisé de façon à refléter une démarche classique en termes de développement cloud :
- Configurer l'environnement
- Dialogflow : créer un agent Dialogflow ES
- Dialogflow : configurer Dialogflow
- Google Cloud : créer un compte de service
- Flutter : créer une application de chat
- Créer un projet Flutter
- Configurer les paramètres et les autorisations
- Ajouter les dépendances
- Associez-le au compte de service.
- Exécuter l'application sur un appareil virtuel ou physique
- Flutter : créer l'interface de chat avec la reconnaissance vocale
- Créer l'interface de chat
- Associer l'interface de chat
- Intégrer le package gRPC Dialogflow à l'application
- Dialogflow : modéliser l'agent Dialogflow
- Configurer les intents de bienvenue et de remplacement
- Utiliser une base de connaissances de questions fréquentes
Conditions préalables
- Expérience de base avec Dart/Flutter
- Expérience de base avec Google Cloud Platform
- Expérience de base avec Dialogflow ES
Ce que vous allez faire
Cet atelier de programmation vous explique comment créer un bot mobile de questions fréquentes, capable de répondre aux questions les plus courantes sur l'outil Dialogflow. Les utilisateurs finaux peuvent interagir avec l'interface textuelle ou diffuser une voix via le micro intégré d'un appareil mobile pour obtenir des réponses. |
|
Points abordés
- Créer un chatbot avec Dialogflow Essentials
- Intégrer Dialogflow à une application Flutter avec le package gRPC Dialogflow
- Détecter des intents de texte avec Dialogflow
- Diffuser une voix via le micro vers Dialogflow
- Utiliser le connecteur de base de connaissances pour importer des questions fréquentes publiques
- Tester le chatbot via l'interface texte et vocale sur un appareil virtuel ou physique
Prérequis
- Vous aurez besoin d'une identité Google ou d'une adresse Gmail pour créer un agent Dialogflow.
- Vous devez avoir accès à Google Cloud Platform pour télécharger un compte de service.
- Un environnement de développement Flutter
Configurer votre environnement de développement Flutter
- Sélectionnez le système d'exploitation sur lequel vous installez Flutter.
- Utilisateurs de macOS : https://flutter.dev/docs/get-started/install/macos
- Windows : https://flutter.dev/docs/get-started/install/windows
- Linux : https://flutter.dev/docs/get-started/install/linux
- ChromeOS : https://flutter.dev/docs/get-started/install/chromeos
- Vous pouvez créer des applications avec Flutter avec n'importe quel éditeur de texte associé à nos outils de ligne de commande. Toutefois, cet atelier utilisera Android Studio. Les plug-ins Flutter et Dart pour Android Studio incluent des options de saisie automatique de code, de mise en surbrillance syntaxique, ainsi qu'une assistance pour la modification des widgets, l'exécution et le débogage, etc. Suivez les étapes sur https://flutter.dev/docs/get-started/editor.
2. Configuration de l'environnement
Dialogflow : créer un agent Dialogflow ES
- Ouvrez la .
- Dans la barre de gauche, juste en dessous du logo, sélectionnez Create New Agent (Créer un agent) dans le menu déroulant. (Remarque : ne cliquez pas sur le menu déroulant "Global". Nous aurons besoin d'une instance Dialogflow globale pour utiliser la base de connaissances des questions fréquentes.)
- Spécifiez un nom d'agent
yourname-dialogflow(utilisez votre propre nom). - Choisissez English - en comme langue par défaut.
- Choisissez le fuseau horaire le plus proche de vous comme fuseau horaire par défaut.
- Ne sélectionnez pas "Méga-agent". (Cette fonctionnalité vous permet de créer un agent global, qui peut orchestrer les sous-agents. Nous n'en avons pas besoin pour le moment.)
- Cliquez sur Créer.
Configurer Dialogflow
- Dans le menu de gauche, cliquez sur l'icône en forme de roue dentée à côté du nom de votre projet.
- Saisissez la description d'agent suivante : Chatbot de questions fréquentes Dialogflow.
- Activez les fonctionnalités en version bêta.
- Cliquez sur l'onglet Voix et assurez-vous que la case Adaptation vocale automatique est cochée.
- Vous pouvez également activer le premier bouton bascule pour améliorer le modèle vocal, mais cette option n'est disponible que lorsque vous passez à la version supérieure de l'essai Dialogflow.
- Cliquez sur Enregistrer.
Google Cloud : obtenir un compte de service
Après avoir créé un agent dans Dialogflow, un projet Google Cloud doit être créé dans la console Google Cloud.
- Ouvrez la console Google Cloud : .
- Assurez-vous d'être connecté avec le même compte Google que sur Dialogflow, puis sélectionnez le projet
yourname-dialogflowdans la barre bleue en haut de l'écran. - Ensuite, recherchez
Dialogflow APIdans la barre d'outils supérieure, puis cliquez sur le résultat API Dialogflow dans le menu déroulant.
- Cliquez sur le bouton bleu Gérer, puis sur Identifiants dans la barre de menu de gauche. (Si Dialogflow n'est pas encore activé, cliquez d'abord sur Activer.)
- Cliquez sur Créer des identifiants (en haut de l'écran), puis sélectionnez Compte de service.
- Spécifiez un nom de compte de service (
flutter_dialogflow), un ID et une description, puis cliquez sur Créer.
- À l'étape 2, vous devrez sélectionner le rôle
Dialogflow API Admin, puis cliquer sur Continuer et OK. - Cliquez sur le compte de service
flutter_dialogflow, puis sur l'onglet Clés et sur Ajouter une clé > Créer une clé.
- Créez une clé JSON. Renommez-le
credentials.jsonet stockez-le dans un emplacement sécurisé de votre disque dur. Nous l'utiliserons plus tard.
Parfait, tous les outils dont nous avons besoin sont correctement configurés. Nous pouvons maintenant commencer à intégrer Dialogflow dans notre application.
3. Flutter : créer l'application de chat
Créer l'application Boilerplate
- Ouvrez Android Studio, puis sélectionnez Start a new Flutter project (Démarrer un nouveau projet Flutter).
- Sélectionnez Flutter Application (Application Flutter) comme type de projet. Cliquez ensuite sur "Suivant".
- Vérifiez que le chemin d'accès au SDK Flutter spécifie l'emplacement du SDK (sélectionnez "Install SDK..." (Installer le SDK…) si le champ de texte est vide).
- Saisissez un nom de projet (par exemple,
flutter_dialogflow_agent), puis cliquez sur Suivant. - Modifiez le nom du package, puis cliquez sur Terminer.
Cela créera un exemple d'application avec Material Components.
Attendez qu'Android Studio installe le SDK et crée le projet.
Paramètres et autorisations
- La bibliothèque d'enregistreur audio sound_stream que nous allons utiliser nécessite un minSdk d'au moins 21. Modifions cela dans android/app/build.gradle dans le bloc defaultConfig. (Notez qu'il existe deux fichiers build.gradle dans le dossier Android, mais celui qui se trouve dans le dossier de l'application est le bon.)
defaultConfig {
applicationId "com.myname.flutter_dialogflow_agent"
minSdkVersion 21
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
- Pour accorder des autorisations au micro et permettre à l'application de contacter l'agent Dialogflow qui s'exécute dans le cloud, nous devons ajouter les autorisations INTERNET et RECORD_AUDIO au fichier app/src/main/AndroidManifest.xml. Votre projet Flutter contient plusieurs fichiers AndroidManifest.xml, mais vous aurez besoin de celui qui se trouve dans le dossier principal. Vous pouvez ajouter les lignes directement dans les balises du fichier manifeste.
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />
Ajouter les dépendances
Nous allons utiliser les packages sound_stream, rxdart et dialogflow_grpc.
- Ajouter la dépendance
sound_stream
$ flutter pub add sound_stream Resolving dependencies... async 2.8.1 (2.8.2 available) characters 1.1.0 (1.2.0 available) matcher 0.12.10 (0.12.11 available) + sound_stream 0.3.0 test_api 0.4.2 (0.4.5 available) vector_math 2.1.0 (2.1.1 available) Downloading sound_stream 0.3.0... Changed 1 dependency!
- Ajouter la dépendance
dialogflow_grpc
flutter pub add dialogflow_grpc Resolving dependencies... + archive 3.1.5 async 2.8.1 (2.8.2 available) characters 1.1.0 (1.2.0 available) + crypto 3.0.1 + dialogflow_grpc 0.2.9 + fixnum 1.0.0 + googleapis_auth 1.1.0 + grpc 3.0.2 + http 0.13.4 + http2 2.0.0 + http_parser 4.0.0 matcher 0.12.10 (0.12.11 available) + protobuf 2.0.0 test_api 0.4.2 (0.4.5 available) + uuid 3.0.4 vector_math 2.1.0 (2.1.1 available) Downloading dialogflow_grpc 0.2.9... Downloading grpc 3.0.2... Downloading http 0.13.4... Downloading archive 3.1.5... Changed 11 dependencies!
- Ajouter la dépendance
rxdart
$ flutter pub add rxdart Resolving dependencies... async 2.8.1 (2.8.2 available) characters 1.1.0 (1.2.0 available) matcher 0.12.10 (0.12.11 available) + rxdart 0.27.2 test_api 0.4.2 (0.4.5 available) vector_math 2.1.0 (2.1.1 available) Downloading rxdart 0.27.2... Changed 1 dependency!
Chargement des informations sur le compte de service et le projet Google Cloud
- Dans votre projet, créez un répertoire et nommez-le
assets. - Déplacez le fichier credentials.json que vous avez téléchargé depuis la console Google Cloud dans le dossier assets.
- Ouvrez pubspec.yaml et ajoutez le compte de service au bloc Flutter.
flutter:
uses-material-design: true
assets:
- assets/credentials.json
Exécuter l'application sur un appareil physique
Si vous possédez un appareil Android, vous pouvez brancher votre téléphone à l'aide d'un câble USB et déboguer sur l'appareil. Suivez ces étapes pour configurer cette fonctionnalité sur l'écran Options pour les développeurs de votre appareil Android.
Exécuter l'application sur un appareil virtuel
Si vous souhaitez exécuter l'application sur un appareil virtuel, procédez comme suit :
- Cliquez sur Tools > AVD Manager (Outils > AVD Manager). (Vous pouvez également sélectionner le Gestionnaire d'AVD dans la barre d'outils supérieure. Dans la figure ci-dessous, il est mis en surbrillance en rose.)
- Nous allons créer un appareil virtuel Android cible afin de pouvoir tester notre application sans appareil physique. Pour en savoir plus, consultez Gérer les AVD. Une fois que vous avez sélectionné un nouvel appareil virtuel, vous pouvez double-cliquer dessus pour le démarrer.
- Dans la barre d'outils principale d'Android Studio, sélectionnez un appareil Android comme cible dans le menu déroulant et assurez-vous que main.dart est sélectionné. Appuyez ensuite sur le bouton Exécuter (triangle vert).
En bas de l'IDE, vous verrez les journaux dans la console. Vous remarquerez qu'Android et votre application Flutter de départ sont en cours d'installation. Cela prendra une minute. Une fois l'appareil virtuel prêt, les modifications seront très rapides. Une fois que vous avez terminé, l'application Flutter de démarrage s'ouvre.
- Activons le micro pour notre application de chatbot. Cliquez sur le bouton Options de l'appareil virtuel pour ouvrir les options. Dans l'onglet "Microphone", activez les trois boutons.
- Essayons l'actualisation à chaud pour montrer à quelle vitesse les modifications peuvent être apportées.
Dans lib/main.dart, remplacez le titre de MyHomePage dans la classe MyApp par Flutter Dialogflow Agent. Modifiez primarySwatch en Colors.orange.
Enregistrez le fichier ou cliquez sur l'icône en forme d'éclair dans la barre d'outils Android Studio. Vous devriez voir la modification directement dans l'appareil virtuel.
4. Flutter : créer l'interface de chat avec la reconnaissance vocale
Créer l'interface de chat
- Créez un fichier widget Flutter dans le dossier lib. (effectuez un clic droit sur le dossier lib, Nouveau > Widget Flutter > Widget avec état), appelez ce fichier :
chat.dart
Collez le code suivant dans ce fichier. Ce fichier Dart crée l'interface de chat. Dialogflow ne fonctionnera pas encore. Il s'agit simplement de la mise en page de tous les composants et de l'intégration du composant du micro pour autoriser les flux. Les commentaires du fichier indiqueront où nous intégrerons Dialogflow par la suite.
// Copyright 2021 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rxdart/rxdart.dart';
import 'package:sound_stream/sound_stream.dart';
// TODO import Dialogflow
class Chat extends StatefulWidget {
Chat({Key key}) : super(key: key);
@override
_ChatState createState() => _ChatState();
}
class _ChatState extends State<Chat> {
final List<ChatMessage> _messages = <ChatMessage>[];
final TextEditingController _textController = TextEditingController();
bool _isRecording = false;
RecorderStream _recorder = RecorderStream();
StreamSubscription _recorderStatus;
StreamSubscription<List<int>> _audioStreamSubscription;
BehaviorSubject<List<int>> _audioStream;
// TODO DialogflowGrpc class instance
@override
void initState() {
super.initState();
initPlugin();
}
@override
void dispose() {
_recorderStatus?.cancel();
_audioStreamSubscription?.cancel();
super.dispose();
}
// Platform messages are asynchronous, so we initialize in an async method.
Future<void> initPlugin() async {
_recorderStatus = _recorder.status.listen((status) {
if (mounted)
setState(() {
_isRecording = status == SoundStreamStatus.Playing;
});
});
await Future.wait([
_recorder.initialize()
]);
// TODO Get a Service account
}
void stopStream() async {
await _recorder.stop();
await _audioStreamSubscription?.cancel();
await _audioStream?.close();
}
void handleSubmitted(text) async {
print(text);
_textController.clear();
//TODO Dialogflow Code
}
void handleStream() async {
_recorder.start();
_audioStream = BehaviorSubject<List<int>>();
_audioStreamSubscription = _recorder.audioStream.listen((data) {
print(data);
_audioStream.add(data);
});
// TODO Create SpeechContexts
// Create an audio InputConfig
// TODO Make the streamingDetectIntent call, with the InputConfig and the audioStream
// TODO Get the transcript and detectedIntent and show on screen
}
// The chat interface
//
//------------------------------------------------------------------------------------
@override
Widget build(BuildContext context) {
return Column(children: <Widget>[
Flexible(
child: ListView.builder(
padding: EdgeInsets.all(8.0),
reverse: true,
itemBuilder: (_, int index) => _messages[index],
itemCount: _messages.length,
)),
Divider(height: 1.0),
Container(
decoration: BoxDecoration(color: Theme.of(context).cardColor),
child: IconTheme(
data: IconThemeData(color: Theme.of(context).accentColor),
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
children: <Widget>[
Flexible(
child: TextField(
controller: _textController,
onSubmitted: handleSubmitted,
decoration: InputDecoration.collapsed(hintText: "Send a message"),
),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 4.0),
child: IconButton(
icon: Icon(Icons.send),
onPressed: () => handleSubmitted(_textController.text),
),
),
IconButton(
iconSize: 30.0,
icon: Icon(_isRecording ? Icons.mic_off : Icons.mic),
onPressed: _isRecording ? stopStream : handleStream,
),
],
),
),
)
),
]);
}
}
//------------------------------------------------------------------------------------
// The chat message balloon
//
//------------------------------------------------------------------------------------
class ChatMessage extends StatelessWidget {
ChatMessage({this.text, this.name, this.type});
final String text;
final String name;
final bool type;
List<Widget> otherMessage(context) {
return <Widget>[
new Container(
margin: const EdgeInsets.only(right: 16.0),
child: CircleAvatar(child: new Text('B')),
),
new Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(this.name,
style: TextStyle(fontWeight: FontWeight.bold)),
Container(
margin: const EdgeInsets.only(top: 5.0),
child: Text(text),
),
],
),
),
];
}
List<Widget> myMessage(context) {
return <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(this.name, style: Theme.of(context).textTheme.subtitle1),
Container(
margin: const EdgeInsets.only(top: 5.0),
child: Text(text),
),
],
),
),
Container(
margin: const EdgeInsets.only(left: 16.0),
child: CircleAvatar(
child: Text(
this.name[0],
style: TextStyle(fontWeight: FontWeight.bold),
)),
),
];
}
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 10.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: this.type ? myMessage(context) : otherMessage(context),
),
);
}
}
Dans le fichier chat.dart, recherchez Widget build. Il crée l'interface du chatbot, qui contient :
- ListView qui contient toutes les bulles de chat de l'utilisateur et du chatbot. Il utilise la classe ChatMessage, qui crée des messages de chat avec un avatar et du texte.
- TextField pour saisir des requêtes textuelles
- IconButton avec l'icône d'envoi, pour envoyer des requêtes textuelles à Dialogflow
- IconButton avec un micro pour envoyer des flux audio à Dialogflow, qui change d'état une fois qu'il est appuyé.
Associer l'interface de chat
- Ouvrez main.dart et modifiez
Widget buildpour qu'il n'instancie que l'interfaceChat(). Tous les autres codes de démonstration peuvent être supprimés.
import 'package:flutter/material.dart';
import 'chat.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.orange,
),
home: MyHomePage(title: 'Flutter Dialogflow Agent'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Chat())
);
}
}
- Exécutez l'application. (Si l'application a déjà été lancée. Arrêtez l'appareil virtuel et réexécutez main.dart). Lorsque vous exécutez votre application avec l'interface de chat pour la première fois. Un pop-up d'autorisation s'affiche, vous demandant si vous souhaitez autoriser l'accès au micro. Cliquez sur Lorsque vous utilisez l'appli.
- Jouez avec la zone de texte et les boutons. Lorsque vous saisissez une requête textuelle et appuyez sur Entrée ou sur le bouton d'envoi, la requête textuelle est enregistrée dans l'onglet Exécuter d'Android Studio. Lorsque vous appuyez sur le bouton du micro et que vous l'arrêtez, le flux audio est enregistré dans l'onglet Exécuter.
Parfait, nous sommes maintenant prêts à intégrer l'application à Dialogflow.
Intégrer votre application Flutter à Dialogflow_gRPC
- Ouvrez chat.dart et ajoutez les importations suivantes :
import 'package:dialogflow_grpc/dialogflow_grpc.dart';
import 'package:dialogflow_grpc/generated/google/cloud/dialogflow/v2beta1/session.pb.dart';
- En haut du fichier, juste en dessous de
// TODO DialogflowGrpcV2Beta1 class instance, ajoutez la ligne suivante pour contenir l'instance de classe Dialogflow :
DialogflowGrpcV2Beta1 dialogflow;
- Recherchez la méthode initPlugin() et ajoutez le code suivant juste en dessous du commentaire TODO :
// Get a Service account
final serviceAccount = ServiceAccount.fromString(
'${(await rootBundle.loadString('assets/credentials.json'))}');
// Create a DialogflowGrpc Instance
dialogflow = DialogflowGrpcV2Beta1.viaServiceAccount(serviceAccount);
Cela créera une instance Dialogflow autorisée pour votre projet Google Cloud avec le compte de service. (Assurez-vous que le fichier credentials.json se trouve dans le dossier assets.)
Encore une fois, pour la démonstration de l'utilisation de Dialogflow gRPC, cela convient, mais pour les applications de production, il est préférable de ne pas stocker le fichier credentials.json dans le dossier des ressources, car cela n'est pas considéré comme sécurisé.
Effectuer un appel detectIntent
- Recherchez maintenant la méthode
handleSubmitted(). C'est là que la magie opère. Juste en dessous du commentaire TODO, ajoutez le code suivant.Ce code ajoutera le message saisi par l'utilisateur à la ListView :
ChatMessage message = ChatMessage(
text: text,
name: "You",
type: true,
);
setState(() {
_messages.insert(0, message);
});
- Maintenant, juste en dessous du code précédent, nous allons effectuer l'appel detectIntent, en transmettant le texte de l'entrée et un languageCode. - Le résultat (dans
data.queryResult.fulfillment) sera imprimé dans la ListView :
DetectIntentResponse data = await dialogflow.detectIntent(text, 'en-US');
String fulfillmentText = data.queryResult.fulfillmentText;
if(fulfillmentText.isNotEmpty) {
ChatMessage botMessage = ChatMessage(
text: fulfillmentText,
name: "Bot",
type: false,
);
setState(() {
_messages.insert(0, botMessage);
});
}
- Démarrez l'appareil virtuel et testez l'appel "detect intent". Type :
hi. Il devrait vous accueillir avec le message de bienvenue par défaut. Si vous saisissez autre chose, la réponse par défaut vous sera renvoyée.
Effectuer un appel streamingDetectIntent
- Recherchez la méthode
handleStream(), qui est la clé de la diffusion audio. Juste en dessous du premier TODO, créez une InputConfigV2beta1 audio avec une biasList pour orienter le modèle vocal. Étant donné que nous utilisons un téléphone (appareil virtuel), sampleHertz sera défini sur 16 000 et l'encodage sur Linear 16. Cela dépend de votre matériel et du micro que vous utilisez. Pour le micro interne de mon MacBook, 16 000 était une bonne valeur. (Consultez les informations du package https://pub.dev/packages/sound_stream.)
var biasList = SpeechContextV2Beta1(
phrases: [
'Dialogflow CX',
'Dialogflow Essentials',
'Action Builder',
'HIPAA'
],
boost: 20.0
);
// See: https://cloud.google.com/dialogflow/es/docs/reference/rpc/google.cloud.dialogflow.v2#google.cloud.dialogflow.v2.InputAudioConfig
var config = InputConfigV2beta1(
encoding: 'AUDIO_ENCODING_LINEAR_16',
languageCode: 'en-US',
sampleRateHertz: 16000,
singleUtterance: false,
speechContexts: [biasList]
);
- Nous allons ensuite appeler la méthode
streamingDetectIntentsur l'objetdialogflow, qui contient notre session Dialogflow :
final responseStream = dialogflow.streamingDetectIntent(config, _audioStream);
- Avec responseStream, nous pouvons enfin écouter la transcription entrante, la requête utilisateur détectée et la réponse d'intent correspondante détectée. Nous allons l'afficher dans un
ChatMessageà l'écran :
// Get the transcript and detectedIntent and show on screen
responseStream.listen((data) {
//print('----');
setState(() {
//print(data);
String transcript = data.recognitionResult.transcript;
String queryText = data.queryResult.queryText;
String fulfillmentText = data.queryResult.fulfillmentText;
if(fulfillmentText.isNotEmpty) {
ChatMessage message = new ChatMessage(
text: queryText,
name: "You",
type: true,
);
ChatMessage botMessage = new ChatMessage(
text: fulfillmentText,
name: "Bot",
type: false,
);
_messages.insert(0, message);
_textController.clear();
_messages.insert(0, botMessage);
}
if(transcript.isNotEmpty) {
_textController.text = transcript;
}
});
},onError: (e){
//print(e);
},onDone: () {
//print('done');
});
C'est tout. Démarrez votre application et testez-la sur l'appareil virtuel. Appuyez sur le bouton du micro et dites "Bonjour".
L'intent de bienvenue par défaut de Dialogflow sera alors déclenché. Les résultats s'affichent à l'écran. Maintenant que Flutter fonctionne parfaitement avec l'intégration Dialogflow, nous pouvons commencer à travailler sur la conversation de notre chatbot.
5. Dialogflow : modéliser l'agent Dialogflow
Dialogflow Essentials est une suite de développement permettant de créer des UI conversationnelles. Il s'agit donc des chatbots, des bots vocaux et des passerelles téléphoniques. Vous pouvez tous créer votre chaîne avec le même outil et même prendre en charge plusieurs chaînes dans plus de 20 langues différentes. Les concepteurs UX Dialogflow (modélisateurs d'agents, linguistes) ou les développeurs créent des intents en spécifiant des phrases d'entraînement pour entraîner un modèle de machine learning sous-jacent.
Un intent permet de catégoriser l'intention d'un utilisateur. Pour chaque agent Dialogflow ES, vous pouvez définir un grand nombre d'intents, sachant que l'ensemble de ces intents combinés permet de traiter une conversation complète. Chaque intention peut contenir des paramètres et des réponses.
La mise en correspondance des intents est également appelée "classification des intents" ou "mise en correspondance des intents". Il s'agit du concept principal de Dialogflow ES. Lorsqu'un intent est mis en correspondance, il peut renvoyer une réponse, collecter des paramètres (extraction d'entités) ou déclencher du code de webhook (fulfillment), par exemple pour extraire des données d'une base de données.
Lorsqu'un utilisateur final écrit ou dit quelque chose dans un chatbot (expression ou énoncé de l'utilisateur), Dialogflow ES fait correspondre l'expression à l'intent le plus pertinent de votre agent Dialogflow, en fonction des phrases d'entraînement. Le modèle de machine learning Dialogflow ES sous-jacent a été entraîné sur ces expressions d'entraînement.
Dialogflow ES fonctionne avec un concept appelé "contexte". Tout comme un humain, Dialogflow ES peut se souvenir du contexte lors du deuxième et du troisième tour de parole. C'est ainsi qu'il peut suivre les énoncés précédents de l'utilisateur.
En savoir plus sur les intents Dialogflow
Modifier l'intent d'accueil par défaut
Lorsque vous créez un agent Dialogflow, deux intents par défaut sont créés automatiquement. L'intent d'accueil par défaut est le premier flux auquel vous accédez lorsque vous entamez une conversation avec l'agent. L'intent de remplacement par défaut est le flux que vous obtenez lorsque l'agent ne vous comprend pas ou ne peut pas faire correspondre un intent à ce que vous venez de dire.
Voici le message de bienvenue pour l'intent d'accueil par défaut :
Utilisateur | Agent |
Bonjour, | "Bonjour, je suis le bot de questions fréquentes Dialogflow. Je peux répondre à vos questions sur Dialogflow." |
- Cliquez sur Intents > Default Welcome Intent (Intents > Intent d'accueil par défaut).
- Faites défiler la page jusqu'à Réponses.
- Effacez toutes les réponses textuelles.
- Dans l'onglet par défaut, créez les deux réponses suivantes :
- Bonjour, je suis le robot de questions fréquentes Dialogflow. Je peux répondre à vos questions sur Dialogflow. Que souhaitez-vous savoir ?
- Bonjour, je suis le robot de questions fréquentes Dialogflow. Avez-vous des questions sur Dialogflow ? Que puis-je faire pour vous aider ?
La configuration doit ressembler à celle de cette capture d'écran.
- Cliquez sur Enregistrer.
- Testons cet intent. Nous pouvons d'abord le tester dans le simulateur Dialogflow.Saisissez Bonjour. L'un des messages suivants devrait s'afficher :
- Bonjour, je suis le robot de questions fréquentes Dialogflow. Je peux répondre à vos questions sur Dialogflow. Que souhaitez-vous savoir ?
- Bonjour, je suis le robot de questions fréquentes Dialogflow. Avez-vous des questions sur Dialogflow ? Que puis-je faire pour vous aider ?
Modifier l'intent de remplacement par défaut
- Cliquez sur Intents > Intent de remplacement par défaut.
- Faites défiler la page jusqu'à Réponses.
- Effacez toutes les réponses textuelles.
- Dans l'onglet par défaut, créez la réponse suivante :
- Malheureusement, je ne connais pas la réponse à cette question. Avez-vous consulté notre site Web ? http://www.dialogflow.com?
- Cliquez sur Enregistrer.
Se connecter à une base de connaissances en ligne
Les connecteurs de connaissances complètent les intents définis. Ils analysent des documents de base de connaissances pour trouver des réponses automatisées. (par exemple, des questions fréquentes ou des articles provenant de fichiers CSV, de sites Web ou même de fichiers PDF). Pour les configurer, définissez une ou plusieurs bases de connaissances, qui sont des collections de documents de base de connaissances.
En savoir plus sur les connecteurs de connaissances
Faisons un essai.
- Sélectionnez Connaissances (bêta) dans le menu.
- Cliquez sur le bouton bleu à droite : Créer une base de connaissances.
- Saisissez le nom de la base de connaissances : Questions fréquentes Dialogflow, puis cliquez sur Enregistrer.
- Cliquez sur le lien Créer le premier.
- Une fenêtre s'ouvre.
Utilisez la configuration suivante :
Nom du document : DialogflowFAQ Type de connaissances : FAQ Type MIME : text/html
- L'URL à partir de laquelle nous chargeons les données est la suivante :
https://www.leeboonstra.dev/faqs/
- Cliquez sur Créer.
Une base de connaissances a été créée :
- Faites défiler la page jusqu'à la section "Réponses", puis cliquez sur Ajouter une réponse.
Créez les réponses suivantes, puis cliquez sur Enregistrer.
$Knowledge.Answer[1]
- Cliquez sur Afficher les détails.
- Sélectionnez Activer le rechargement automatique pour récupérer automatiquement les modifications lorsque la page Web des questions fréquentes est mise à jour, puis cliquez sur Enregistrer.
Toutes les questions fréquentes que vous avez implémentées dans Dialogflow s'affichent.C'est aussi simple que ça !
Sachez que vous pouvez également pointer vers un site Web HTML en ligne contenant des questions fréquentes pour les importer dans votre agent. Vous pouvez même importer un PDF contenant un bloc de texte, et Dialogflow trouvera lui-même des questions.
Les questions fréquentes doivent désormais être considérées comme des "extras" à ajouter à vos agents, à côté de vos flux d'intentions. Les questions fréquentes de la base de connaissances ne peuvent pas entraîner le modèle. Par conséquent, si vous posez des questions d'une manière complètement différente, vous risquez de ne pas obtenir de correspondance, car vous n'utilisez pas la compréhension du langage naturel (modèles de machine learning). C'est pourquoi il est parfois intéressant de convertir vos questions fréquentes en intentions.
- Testez les questions dans le simulateur à droite.
- Lorsque tout fonctionne, revenez à votre application Flutter et testez votre chatbot vocal et de discussion avec ce nouveau contenu. Posez les questions que vous avez chargées dans Dialogflow.
6. Félicitations
Félicitations, vous venez de créer votre première application Flutter avec une intégration de chatbot Dialogflow. Bravo !
Points abordés
- Créer un chatbot avec Dialogflow Essentials
- Intégrer Dialogflow à une application Flutter
- Détecter des intents de texte avec Dialogflow
- Diffuser une voix via le micro vers Dialogflow
- Utiliser le connecteur de base de connaissances
Étape suivante
Cet atelier de programmation vous a plu ? Découvrez ces excellents ateliers Dialogflow !
- Intégrer Dialogflow à l'Assistant Google
- Intégrer Dialogflow à Google Chat
- Créer des actions pour l'Assistant Google avec Dialogflow (niveau 1)
- Comprendre l'exécution en intégrant Dialogflow à Google Agenda +. Créer votre première application Flutter
Vous souhaitez savoir comment j'ai créé le package gRPC Dialogflow pour Dart/Flutter ?
- Consultez mon article de blog The Hidden Manual for working with the Google Cloud gRPC APIs (Manuel caché pour travailler avec les API gRPC Google Cloud).