1. Prima di iniziare
In questo codelab, imparerai a integrare un semplice bot vocale e di testo Dialogflow Essentials (ES) in un'app Flutter. Dialogflow ES è una suite di sviluppo per la creazione di interfacce utente conversazionali. Pertanto, chatbot, bot vocali, gateway telefonici. Potete creare tutti i contenuti con lo stesso strumento e potete anche supportare più canali in oltre 20 lingue diverse. Dialogflow si integra con molte piattaforme di conversazione popolari come Assistente Google, Slack e Facebook Messenger. Se vuoi creare un agente per una di queste piattaforme, devi utilizzare una delle numerose opzioni di integrazione. Tuttavia, per creare un chatbot per i dispositivi mobili, dovrai creare un'integrazione personalizzata. Creerai intent specificando frasi di addestramento per addestrare un modello di machine learning sottostante.
L'ordine degli esercizi di questo lab rispecchia l'esperienza comune di un cloud developer:
- Configurazione dell'ambiente
- Dialogflow: crea un nuovo agente Dialogflow ES
- Dialogflow: configura Dialogflow
- Google Cloud: crea un service account
- Flutter: Building a chat application
- Creare un progetto Flutter
- Configurazione delle impostazioni e delle autorizzazioni
- Aggiunta delle dipendenze
- Collegamento al service account.
- Esecuzione dell'applicazione su un dispositivo virtuale o fisico
- Flutter: creazione dell'interfaccia di chat con il supporto della funzionalità Text-to-Speech
- Creazione dell'interfaccia di chat
- Collegamento dell'interfaccia di chat
- Integrazione del pacchetto gRPC Dialogflow nell'app
- Dialogflow: Modeling the Dialogflow agent
- Configura gli intent di benvenuto e di riserva
- Utilizzare una knowledge base delle domande frequenti
Prerequisito
- Esperienza di base con Dart/Flutter
- Esperienza di base con Google Cloud Platform
- Esperienza di base con Dialogflow ES
Cosa creerai
Questo codelab ti mostrerà come creare un bot mobile per le domande frequenti, in grado di rispondere alle domande più comuni sullo strumento Dialogflow. Gli utenti finali possono interagire con l'interfaccia di testo o riprodurre in streaming una voce tramite il microfono integrato di un dispositivo mobile per ottenere risposte. |
|
Obiettivi didattici
- Come creare un chatbot con Dialogflow Essentials
- Come integrare Dialogflow in un'app Flutter con il pacchetto gRPC di Dialogflow
- Come rilevare gli intent di testo con Dialogflow
- Come trasmettere una voce tramite il microfono a Dialogflow
- Come utilizzare il connettore della knowledge base per importare le domande frequenti pubbliche
- Testare il chatbot tramite l'interfaccia di testo e vocale in un dispositivo virtuale o fisico
Che cosa ti serve
- Per creare un agente Dialogflow, ti servirà un indirizzo Google Identity / Gmail.
- Per scaricare un service account, devi avere accesso a Google Cloud.
- Un ambiente di sviluppo Flutter
Configurare l'ambiente di sviluppo Flutter
- Seleziona il sistema operativo su cui stai installando Flutter.
- Utenti 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
- Puoi creare app con Flutter utilizzando qualsiasi editor di testo in combinazione con i nostri strumenti a riga di comando. Tuttavia, questo workshop utilizzerà Android Studio. I plug-in Flutter e Dart per Android Studio forniscono il completamento del codice, l'evidenziazione della sintassi, l'assistenza per la modifica dei widget, il supporto per l'esecuzione e il debug e altro ancora. Segui i passaggi su https://flutter.dev/docs/get-started/editor
2. Configurazione dell'ambiente
Dialogflow: crea un nuovo agente Dialogflow ES
- Apri la .
- Nella barra a sinistra, subito sotto il logo, seleziona "Crea nuovo agente" nel menu a discesa. (Nota: non fare clic sul menu a discesa con la dicitura "Globale", avremo bisogno di un'istanza Dialogflow globale per utilizzare la knowledge base delle domande frequenti.)
- Specifica un nome dell'agente
yourname-dialogflow(utilizza il tuo nome) - Come lingua predefinita, scegli Inglese - en.
- Come fuso orario predefinito, scegli quello più vicino a te.
- Non selezionare Mega-agente. Con questa funzionalità puoi creare un agente principale, che può coordinare gli agenti "secondari". Non ne abbiamo bisogno ora.)
- Fai clic su Crea.
Configurare Dialogflow
- Fai clic sull'icona a forma di ingranaggio nel menu a sinistra, accanto al nome del progetto.
- Inserisci la seguente descrizione dell'agente: Chatbot per le domande frequenti di Dialogflow
- Attiva le funzionalità beta spostando il cursore.
- Fai clic sulla scheda Sintesi vocale e assicurati che la casella Adattamento automatico della voce sia attiva.
- Se vuoi, puoi anche attivare il primo interruttore per migliorare il modello vocale, ma questa opzione è disponibile solo quando esegui l'upgrade della prova di Dialogflow.
- Fai clic su Salva.
Google Cloud: recupera un service account
Dopo aver creato un agente in Dialogflow, nella console Google Cloud deve essere creato un progetto Google Cloud.
- Apri la console Google Cloud:
- Assicurati di aver eseguito l'accesso con lo stesso Account Google di Dialogflow e seleziona il progetto:
yourname-dialogflownella barra blu in alto. - Successivamente, cerca
Dialogflow APInella barra degli strumenti in alto e fai clic sul risultato API Dialogflow nel menu a discesa.
- Fai clic sul pulsante blu Gestisci e poi su Credenziali nella barra del menu a sinistra. Se Dialogflow non è ancora abilitato, fai clic prima su Abilita.
- Fai clic su Crea credenziali (nella parte superiore dello schermo) e scegli Service account.
- Specifica un nome per il service account:
flutter_dialogflow, ID e descrizione, quindi fai clic su Crea.
- Nel passaggio 2, dovrai selezionare il ruolo
Dialogflow API Admin, fare clic su Continua e poi su Fine. - Fai clic sull'account di servizio
flutter_dialogflow, sulla scheda Chiavi e su Aggiungi chiave > Crea nuova chiave.
- Crea una chiave JSON. Rinominalo in
credentials.jsone archivialo in una posizione sicura del disco rigido. Lo utilizzeremo in seguito.
Perfetto, tutti gli strumenti di cui abbiamo bisogno sono configurati correttamente. Ora possiamo iniziare a integrare Dialogflow nella nostra app.
3. Flutter: creazione dell'applicazione di chat
Crea l'app boilerplate
- Apri Android Studio e seleziona Avvia un nuovo progetto Flutter.
- Seleziona Applicazione Flutter come tipo di progetto. Poi fai clic su Avanti.
- Verifica che il percorso dell'SDK Flutter specifichi la posizione dell'SDK (se il campo di testo è vuoto, seleziona Installa SDK…).
- Inserisci un nome del progetto (ad esempio
flutter_dialogflow_agent), poi fai clic su Avanti. - Modifica il nome del pacchetto e fai clic su Fine.
In questo modo verrà creata un'applicazione di esempio con Material Components.
Attendi che Android Studio installi l'SDK e crei il progetto.
Impostazioni e autorizzazioni
- La libreria di registrazione audio sound_stream che utilizzeremo richiede una minSdk di almeno 21. Modifichiamo questo valore in android/app/build.gradle nel blocco defaultConfig. Tieni presente che nella cartella Android sono presenti due file build.gradle, ma quello nella cartella app è quello corretto.
defaultConfig {
applicationId "com.myname.flutter_dialogflow_agent"
minSdkVersion 21
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
- Per concedere le autorizzazioni al microfono e consentire all'app di contattare l'agente Dialogflow in esecuzione nel cloud, dobbiamo aggiungere le autorizzazioni INTERNET e RECORD_AUDIO al file app/src/main/AndroidManifest.xml. Nel tuo progetto Flutter sono presenti più file AndroidManifest.xml, ma ti servirà quello nella cartella principale. Puoi aggiungere le righe direttamente all'interno dei tag manifest.
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />
Aggiunta delle dipendenze
Utilizzeremo i pacchetti sound_stream, rxdart e dialogflow_grpc.
- Aggiungi la dipendenza
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!
- Aggiungi la dipendenza
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!
- Aggiungi la dipendenza
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!
Caricamento delle informazioni sul service account e sul progetto Google Cloud
- Nel tuo progetto crea una directory e chiamala
assets. - Sposta il file credentials.json che hai scaricato dalla console Google Cloud nella cartella assets.
- Apri pubspec.yaml e aggiungi il service account al blocco flutter.
flutter:
uses-material-design: true
assets:
- assets/credentials.json
Esecuzione dell'applicazione su un dispositivo fisico
Se hai un dispositivo Android, puoi collegare lo smartphone tramite un cavo USB ed eseguire il debug sul dispositivo. Segui questi passaggi per configurare la funzionalità tramite la schermata Opzioni sviluppatore sul tuo dispositivo Android.
Esecuzione dell'applicazione su un dispositivo virtuale
Se vuoi eseguire l'applicazione su un dispositivo virtuale, segui questi passaggi:
- Fai clic su Strumenti> AVD Manager. In alternativa, seleziona AVD Manager dalla barra degli strumenti in alto (nell'immagine sotto è evidenziato in rosa).
- Creeremo un dispositivo virtuale Android di destinazione, in modo da poter testare la nostra applicazione senza un dispositivo fisico. Per maggiori dettagli, vedi Gestire gli AVD. Dopo aver selezionato un nuovo dispositivo virtuale, puoi fare doppio clic per avviarlo.
- Nella barra degli strumenti principale di Android Studio, seleziona un dispositivo Android come target tramite il menu a discesa e assicurati che sia selezionato main.dart. Quindi premi il pulsante Esegui (triangolo verde).
Nella parte inferiore dell'IDE, vedrai i log nella console. Noterai che sta installando Android e la tua app Flutter iniziale. L'operazione richiede un minuto. Una volta pronto il dispositivo virtuale, apportare modifiche sarà molto veloce. Al termine, si aprirà l'app Flutter iniziale.
- Attiviamo il microfono per la nostra app chatbot. Fai clic sul pulsante Opzioni del dispositivo virtuale per aprire le opzioni. Nella scheda Microfono, attiva tutti e tre i pulsanti.
- Proviamo Hot Reload per dimostrare la velocità con cui è possibile apportare modifiche.
In lib/main.dart, modifica il titolo di MyHomePage nella classe MyApp in: Flutter Dialogflow Agent. e modifica primarySwatch in Colors.orange.
Salva il file o fai clic sull'icona del fulmine nella barra degli strumenti di Android Studio. Dovresti visualizzare la modifica apportata direttamente nel dispositivo virtuale.
4. Flutter: creazione dell'interfaccia di chat con supporto STT
Creazione dell'interfaccia di chat
- Crea un nuovo file widget Flutter nella cartella lib. (fai clic con il tasto destro del mouse sulla cartella lib, Nuovo > Widget Flutter > Widget con stato), chiama questo file:
chat.dart
Incolla il seguente codice in questo file. Questo file Dart crea l'interfaccia di chat. Dialogflow non funzionerà ancora, si tratta solo del layout di tutti i componenti e dell'integrazione del componente microfono per consentire gli stream. I commenti nel file indicheranno dove verrà integrato Dialogflow in un secondo momento.
// 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),
),
);
}
}
Cerca in chat.dart la build di Widget. Questa crea l'interfaccia del chatbot, che contiene:
- ListView che contiene tutti i fumetti di chat dell'utente e del chatbot. Utilizza la classe ChatMessage, che crea messaggi di chat con un avatar e un testo.
- TextField per inserire query di testo
- IconButton con l'icona di invio, per inviare query di testo a Dialogflow
- IconButton con un microfono per l'invio di flussi audio a Dialogflow, che cambia stato una volta premuto.
Collegamento dell'interfaccia di chat
- Apri main.dart e modifica
Widget buildin modo che venga creata un'istanza solo dell'interfacciaChat(). Tutti gli altri codici demo possono essere rimossi.
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())
);
}
}
- Esegui l'applicazione. (Se l'app è stata avviata in precedenza. Arresta il dispositivo virtuale ed esegui di nuovo main.dart). Quando esegui la tua app con l'interfaccia di chat per la prima volta. Verrà visualizzato un popup di autorizzazione che ti chiede se vuoi consentire l'accesso al microfono. Fai clic su Mentre usi l'app.
- Gioca con l'area di testo e i pulsanti. Quando digiti una query di testo e premi Invio o tocchi il pulsante Invia, la query di testo viene registrata nella scheda Esegui di Android Studio. Quando tocchi il pulsante del microfono e lo interrompi, vedrai lo stream audio registrato nella scheda Corsa.
Ottimo, ora possiamo integrare l'applicazione con Dialogflow.
Integrazione dell'app Flutter con Dialogflow_gRPC
- Apri chat.dart e aggiungi le seguenti importazioni:
import 'package:dialogflow_grpc/dialogflow_grpc.dart';
import 'package:dialogflow_grpc/generated/google/cloud/dialogflow/v2beta1/session.pb.dart';
- Nella parte superiore del file, subito sotto
// TODO DialogflowGrpcV2Beta1 class instance, aggiungi la seguente riga per contenere l'istanza della classe Dialogflow:
DialogflowGrpcV2Beta1 dialogflow;
- Cerca il metodo initPlugin() e aggiungi il seguente codice subito sotto il commento TODO:
// Get a Service account
final serviceAccount = ServiceAccount.fromString(
'${(await rootBundle.loadString('assets/credentials.json'))}');
// Create a DialogflowGrpc Instance
dialogflow = DialogflowGrpcV2Beta1.viaServiceAccount(serviceAccount);
In questo modo verrà creata un'istanza di Dialogflow autorizzata per il tuo progetto Google Cloud con il service account. Assicurati di avere il file credentials.json nella cartella assets.
Ancora una volta, per scopi dimostrativi su come utilizzare gRPC di Dialogflow, va bene, ma per le app di produzione non è consigliabile archiviare il file credentials.json nella cartella assets, in quanto non è considerato sicuro.
Effettuare una chiamata detectIntent
- Ora trova il metodo
handleSubmitted(). È qui che avviene la magia. Subito sotto il commento TODO, aggiungi il seguente codice.Questo codice aggiungerà il messaggio digitato dall'utente a ListView:
ChatMessage message = ChatMessage(
text: text,
name: "You",
type: true,
);
setState(() {
_messages.insert(0, message);
});
- Ora, subito sotto il codice precedente, effettueremo la chiamata detectIntent, passeremo il testo dell'input e un languageCode. - Il risultato (entro
data.queryResult.fulfillment) verrà stampato nella 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);
});
}
- Avvia il dispositivo virtuale e testa la chiamata di rilevamento dell'intent. Tipo:
hi. Dovrebbe salutarti con il messaggio di benvenuto predefinito. Quando digiti qualcos'altro, ti verrà restituito il fallback predefinito.
Effettuare una chiamata streamingDetectIntent
- Ora trova il metodo
handleStream(). È qui che entra in gioco la magia dello streaming audio. Subito sotto il primo TODO, crea un InputConfigV2beta1 audio con un biasList per orientare il modello vocale. Poiché utilizziamo uno smartphone (dispositivo virtuale), sampleHertz sarà 16000 e la codifica sarà Linear 16. Dipende dall'hardware / microfono del computer che utilizzi. Per il microfono interno del mio MacBook, 16000 era un buon valore. (Consulta le informazioni del pacchetto 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]
);
- A questo punto, chiameremo il metodo
streamingDetectIntentsull'oggettodialogflow, che contiene la nostra sessione Dialogflow:
final responseStream = dialogflow.streamingDetectIntent(config, _audioStream);
- Con responseStream, possiamo finalmente ascoltare la trascrizione in arrivo, la query dell'utente rilevata e la risposta all'intent corrispondente rilevato. Stamperemo questo messaggio in un
ChatMessagesullo schermo:
// 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');
});
È tutto. Avvia l'applicazione, testala sul dispositivo virtuale, premi il pulsante del microfono e di' "Hello".
Verrà attivato l'intent di benvenuto predefinito di Dialogflow. I risultati verranno stampati sullo schermo. Ora che Flutter funziona perfettamente con l'integrazione di Dialogflow, possiamo iniziare a lavorare sulla conversazione del nostro chatbot.
5. Dialogflow: Modeling the Dialogflow agent
Dialogflow Essentials è una suite di sviluppo per la creazione di interfacce utente conversazionali. Pertanto, chatbot, bot vocali, gateway telefonici. Potete creare tutti i contenuti con lo stesso strumento e potete anche supportare più canali in oltre 20 lingue diverse. I progettisti dell'esperienza utente di Dialogflow (modellatori di agenti, linguisti) o gli sviluppatori creano intent specificando frasi di addestramento per addestrare un modello di machine learning sottostante.
Un intent classifica l'intenzione di un utente. Per ogni agente Dialogflow ES, puoi definire molti intent, dove gli intent combinati possono gestire una conversazione completa. Ogni intent può contenere parametri e risposte.
La corrispondenza di un intento è nota anche come classificazione o corrispondenza dell'intent. Questo è il concetto principale di Dialogflow ES. Una volta che una finalità viene abbinata, può restituire una risposta, raccogliere parametri (estrazione di entità) o attivare il codice webhook (fulfillment), ad esempio per recuperare dati da un database.
Quando un utente finale scrive o dice qualcosa in un chatbot, chiamata espressione o frase dell'utente, Dialogflow ES associa l'espressione all'intent migliore dell'agente Dialogflow, in base alle frasi di addestramento. Il modello di machine learning di Dialogflow ES è stato addestrato su queste frasi di addestramento.
Dialogflow ES funziona con un concetto chiamato contesto. Proprio come un essere umano, Dialogflow ES può ricordare il contesto al secondo e al terzo turno. In questo modo può tenere traccia delle espressioni precedenti dell'utente.
Scopri di più sugli intent di Dialogflow.
Modificare l'intent di benvenuto predefinito
Quando crei un nuovo agente Dialogflow, vengono creati automaticamente due intent predefiniti. L'intent di benvenuto predefinito è il primo flusso che visualizzi quando avvii una conversazione con l'agente. L'intent di riserva predefinito è il flusso che riceverai quando l'agente non riesce a capirti o ad associare un intent a ciò che hai appena detto.
Ecco il messaggio di benvenuto per l'intent di benvenuto predefinito:
Utente | Agent |
Un saluto da Google | "Ciao, sono il bot delle domande frequenti di Dialogflow e posso rispondere a domande su Dialogflow". |
- Fai clic su Intent > Intent di benvenuto predefinito.
- Scorri verso il basso fino a Risposte.
- Cancella tutte le risposte di testo.
- Nella scheda predefinita, crea le seguenti due risposte:
- Ciao, sono il bot delle domande frequenti di Dialogflow e posso rispondere a domande su Dialogflow. Che cosa vorresti sapere?
- Salve, sono il bot delle domande frequenti di Dialogflow. Hai domande su Dialogflow? Come posso aiutarti?
La configurazione dovrebbe essere simile a questo screenshot.
- Fai clic su Salva.
- Proviamo questo intent. Per prima cosa, possiamo testarlo in Dialogflow Simulator.Digita: Hello. Dovrebbe restituire uno di questi messaggi:
- Ciao, sono il bot delle domande frequenti di Dialogflow e posso rispondere a domande su Dialogflow. Che cosa vorresti sapere?
- Ciao, sono il bot delle domande frequenti di Dialogflow. Hai domande su Dialogflow? Come posso aiutarti?
Modificare l'intent di fallback predefinito
- Fai clic su Intent > Default Fallback Intent
- Scorri verso il basso fino a Risposte.
- Cancella tutte le risposte di testo.
- Nella scheda predefinita, crea la seguente risposta:
- Purtroppo non conosco la risposta a questa domanda. Hai visitato il nostro sito web? http://www.dialogflow.com?
- Fai clic su Salva.
Connessione a una knowledge base online
I connettori di conoscenza completano gli intent definiti. Analizzano i documenti della knowledge base per trovare risposte automatiche. (ad esempio, domande frequenti o articoli da file CSV, siti web online o persino file PDF). Per configurarle, definisci una o più knowledge base, ovvero raccolte di documenti di conoscenza.
Scopri di più su Knowledge Connectors.
Proviamo.
- Seleziona Knowledge (beta) nel menu.
- Fai clic sul pulsante blu a destra: Crea knowledge base.
- Digita Domande frequenti di Dialogflow come nome della knowledge base e fai clic su Salva.
- Fai clic sul link Crea il primo.
- Si aprirà una finestra.
Utilizza la seguente configurazione:
Nome documento: DialogflowFAQ Tipo di conoscenza: FAQ Tipo MIME: text/html
- L'URL da cui carichiamo i dati è:
https://www.leeboonstra.dev/faqs/
- Fai clic su Crea
È stata creata una knowledge base:
- Scorri verso il basso fino alla sezione Risposte e fai clic su Aggiungi risposta.
Crea le seguenti risposte e fai clic su Salva.
$Knowledge.Answer[1]
- Fai clic su Visualizza dettagli.
- Seleziona Attiva ricaricamento automatico per recuperare automaticamente le modifiche quando la pagina web delle domande frequenti viene aggiornata e fai clic su Salva.
Verranno visualizzate tutte le domande frequenti che hai implementato in Dialogflow. È facile.
Tieni presente che puoi anche indirizzare un sito web HTML online con domande frequenti per importarle nel tuo agente. È anche possibile caricare un PDF con un blocco di testo e Dialogflow creerà le domande.
Ora le domande frequenti devono essere considerate come "extra" da aggiungere agli agenti, accanto ai flussi di intent. Le domande frequenti della knowledge base non possono addestrare il modello. Pertanto, porre domande in modo completamente diverso potrebbe non trovare una corrispondenza perché non utilizza la comprensione del linguaggio naturale (modelli di machine learning). Per questo motivo, a volte vale la pena convertire le domande frequenti in intent.
- Prova le domande nel simulatore a destra.
- Quando tutto funziona, torna alla tua app Flutter e prova il bot di chat e vocale con questi nuovi contenuti. Fare le domande che hai caricato in Dialogflow.
6. Complimenti
Congratulazioni, hai creato la tua prima app Flutter con un'integrazione del chatbot Dialogflow. Ottimo lavoro.
Argomenti trattati
- Come creare un chatbot con Dialogflow Essentials
- Come integrare Dialogflow in un'app Flutter
- Come rilevare gli intent di testo con Dialogflow
- Come trasmettere una voce tramite il microfono a Dialogflow
- Come utilizzare il connettore della knowledge base
Passaggi successivi
Ti è piaciuto questo codelab? Dai un'occhiata a questi fantastici lab di Dialogflow.
- Integrazione di Dialogflow con l'Assistente Google
- Integrazione di Dialogflow con Google Chat
- Build Actions for the Google Assistant with Dialogflow (livello 1)
- Understanding fulfillment by integrating Dialogflow with Google Calendar +. Build your First Flutter App
Ti interessa sapere come ho creato il pacchetto gRPC di Dialogflow per Dart/Flutter?
- Dai un'occhiata al mio articolo del blog The Hidden Manual for working with the Google Cloud gRPC APIs