1. Prima di iniziare
In questo codelab imparerai a integrare un semplice bot di testo e voce di Dialogflow Essentials (ES) in un'app Flutter. Dialogflow ES è una suite di sviluppo per la creazione di UI conversazionali. come chatbot, bot vocali, gateway telefonici. Tutti possono realizzarla con lo stesso strumento e puoi persino 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 dispositivi mobili, devi creare un'integrazione personalizzata. Creerai intent specificando frasi di addestramento per addestrare un modello di machine learning sottostante.
L'ordine di questo lab rispecchia un'esperienza di sviluppo cloud comune:
- Configurazione dell'ambiente
- Dialogflow: crea un nuovo agente Dialogflow ES
- Dialogflow: configurare Dialogflow
- Google Cloud: creare un account di servizio
- Flutter: creazione di un'applicazione di chat
- Creazione di un progetto Flutter
- Configurazione delle impostazioni e delle autorizzazioni
- Aggiungi le dipendenze
- Collegamento all'account di servizio in corso...
- Esecuzione dell'applicazione su un dispositivo virtuale o fisico
- Flutter: creazione dell'interfaccia di chat con il supporto della conversione della voce in testo
- Creazione dell'interfaccia di chat
- Collegamento dell'interfaccia della chat
- Integrazione del pacchetto gRPC Dialogflow nell'app
- Dialogflow: modellazione dell'agente Dialogflow
- Configura il pulsante di benvenuto e intent di fallback
- Utilizzare una knowledge base sulle domande frequenti
Prerequisito
- Esperienza base Dart/Flutter
- Esperienza di base con la piattaforma Google Cloud
- Esperienza di base con Dialogflow ES
Cosa creerai
Questo codelab ti mostrerà come creare un bot per domande frequenti per dispositivi mobili 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 ricevere risposte. |
|
Obiettivi didattici
- Creare un chatbot con Dialogflow Essentials
- Come integrare Dialogflow in un'app Flutter con il pacchetto gRPC Dialogflow
- Come rilevare intent di testo con Dialogflow
- Come trasmettere in streaming una voce tramite microfono a Dialogflow
- Come utilizzare il connettore della knowledge base per importare domande frequenti pubbliche
- Testa il chatbot tramite l'interfaccia vocale e di testo su un dispositivo virtuale o fisico
Che cosa ti serve
- Per creare un agente Dialogflow, avrai bisogno di un indirizzo Google Identity o Gmail.
- Per scaricare un account di servizio, devi disporre dell'accesso a Google Cloud
- Un ambiente di sviluppo Flutter
Configura il tuo 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 combinato con i nostri strumenti a riga di comando. Tuttavia, questo workshop utilizzerà Android Studio. I plug-in Flutter e Dart per Android Studio offrono funzionalità di completamento del codice, evidenziazione della sintassi, assistenza per la modifica del widget, esecuzione e supporto al debug e altro. 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, proprio sotto il logo, seleziona "Create New Agent" (Crea nuovo agente) nel menu a discesa. (Nota: non fare clic sul menu a discesa "Globale"; avremo bisogno di un'istanza Dialogflow globale per utilizzare la knowledge base delle domande frequenti.)
- Specifica il nome di un agente
yourname-dialogflow(utilizza il tuo nome) - Come lingua predefinita, scegli Italiano - en.
- Come fuso orario predefinito, scegli il fuso orario più vicino a te.
- Non selezionare Mega Agent. (Con questa funzionalità puoi creare un agente generale in grado di orchestrare gli agenti "sub". Al momento non è più necessario.)
- Fai clic su Crea.
Configura Dialogflow
- Fai clic sull'icona dell'ingranaggio nel menu a sinistra, accanto al nome del progetto.
- Inserisci la seguente descrizione dell'agente: Chatbot FAQ su Dialogflow
- Attiva le funzionalità beta, premi l'opzione.
- Fai clic sulla scheda Voce e assicurati che la casella Adattamento vocale automatico sia attiva.
- Facoltativamente, puoi anche premere la prima opzione per migliorare il modello vocale, ma è disponibile solo quando esegui l'upgrade della prova di Dialogflow.
- Fai clic su Salva.
Google Cloud: ottieni un account di servizio
Dopo aver creato un agente in Dialogflow, è necessario creare un progetto Google Cloud nella console 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. - Quindi, cerca
Dialogflow APInella barra degli strumenti superiore e fai clic sul risultato dell'API Dialogflow nel menu a discesa.
- Fai clic sul pulsante blu Gestisci e poi su Credenziali nella barra dei menu a sinistra. (Quando Dialogflow non è ancora abilitato, fai prima clic su Abilita).
- Fai clic su Crea credenziali (nella parte superiore dello schermo) e scegli Account di servizio.
- Specifica un nome per l'account di servizio (
flutter_dialogflow), l'ID e la descrizione, poi fai clic su Crea.
- Nel passaggio 2, devi selezionare il ruolo:
Dialogflow API Admin, fare clic su Continua e quindi su Fine. - Fai clic sull'account di servizio
flutter_dialogflow, fai clic sulla scheda Chiavi e seleziona Aggiungi chiave > Crea nuova chiave
- Crea una chiave JSON. Rinominalo in
credentials.jsone memorizzalo in un luogo sicuro sul disco rigido. Lo utilizzeremo in seguito.
Perfetto, tutti gli strumenti di cui abbiamo bisogno sono configurati correttamente. Possiamo iniziare con l'integrazione di Dialogflow nella nostra app.
3. Flutter: creare l'applicazione di Chat
Crea l'app Boilerplate
- Apri Android Studio e seleziona Avvia un nuovo progetto Flutter.
- Seleziona Flutter Application (Applicazione Flutter) come tipo di progetto. Quindi, fai clic su Avanti.
- Verifica che il percorso dell'SDK Flutter specifichi la posizione dell'SDK (seleziona Installa SDK... se il campo di testo è vuoto).
- Inserisci un nome per il progetto (ad esempio,
flutter_dialogflow_agent). Quindi, fai clic su Avanti. - Modifica il nome del pacchetto e fai clic su Fine.
Verrà creata un'applicazione di esempio con Componenti Material.
Attendi che Android Studio installi l'SDK e crei il progetto.
Impostazioni e Autorizzazioni
- La libreria di registratori audio sound_stream che utilizzeremo richiede un valore minSdk di almeno 21. Ora modifico questa impostazione in android/app/build.gradle nel blocco defaultConfig. Tieni presente che nella cartella Android ci sono due file build.gradle, ma quello nella cartella dell'app è quello giusto.
defaultConfig {
applicationId "com.myname.flutter_dialogflow_agent"
minSdkVersion 21
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
- Per concedere le autorizzazioni al microfono e anche per consentire all'app di contattare l'agente Dialogflow che viene eseguito nel cloud, dovremo aggiungere le autorizzazioni INTERNET e RECORD_AUDIO al file app/src/main/AndroidManifest.xml. Il tuo progetto Flutter contiene più file AndroidManifest.xml, ma te ne servirà uno 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" />
Aggiungi le dipendenze
Utilizzeremo i pacchetti sound_stream, rxarrow 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 dell'account di servizio e delle informazioni del progetto Google Cloud in corso...
- Nel tuo progetto crea una directory e assegnale il nome
assets. - Sposta il file credentials.json che hai scaricato dalla console Google Cloud nella cartella assets.
- Apri pubspec.yaml e aggiungi l'account di servizio 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 con un cavo USB ed eseguire il debug sul dispositivo. Segui questi passaggi per configurare questa funzionalità nella 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> Gestione AVD. In alternativa, seleziona Gestione AVD dalla barra degli strumenti superiore; nella figura sottostante è evidenziata in rosa.
- Creeremo un dispositivo virtuale Android di destinazione per poter testare la nostra applicazione senza un dispositivo fisico. Per maggiori dettagli, consulta Gestione della durata di visualizzazione media. Dopo aver selezionato un nuovo dispositivo virtuale, puoi fare doppio clic sul dispositivo per avviarlo.
- Nella barra degli strumenti principale di Android Studio, seleziona un dispositivo Android come target tramite il menu a discesa e assicurati che main.arrow sia selezionato. Poi premi il pulsante Esegui (triangolo verde).
Nella parte inferiore dell'IDE vedrai i log nella console. Noterai che sta installando Android e l'app Flutter iniziale. Ci vorrà un minuto, quando il dispositivo virtuale sarà pronto, apportare modifiche sarà super veloce. Al termine, si aprirà l'app Flutter iniziale.
- Attiva il microfono per la nostra app di chatbot. Fai clic sul pulsante opzioni del dispositivo virtuale per aprire le opzioni. Nella scheda Microfono, attiva tutti e tre i sensori.
- Proviamo la funzione Hot Reload per mostrare la velocità delle modifiche.
In lib/main.dart, modifica il lib/main.dart della classe MyApp in: Flutter Dialogflow Agent. E cambia primarySwatch in Colors.orange.
Salva il file o fai clic sull'icona a forma di lucchetto nella barra degli strumenti di Android Studio. Dovresti vedere la modifica apportata direttamente nel dispositivo virtuale.
4. Flutter: creare l'interfaccia di Chat con il supporto STT
Creazione dell'interfaccia di chat
- Crea un nuovo file del widget Flutter nella cartella lib. (fai clic con il tasto destro del mouse sulla cartella lib, Nuovo > Widget Flutter > Widget stateful), chiama questo file:
chat.dart
Incolla il codice riportato di seguito in questo file. Questo file Dart crea l'interfaccia di chat. Dialogflow non funziona ancora, si tratta solo del layout di tutti i componenti e dell'integrazione del componente microfono per consentire i flussi. I commenti nel file risulteranno in evidenza, dove in seguito integreremo Dialogflow.
// 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 nel file chat.ARROW la build del widget Questa opzione crea l'interfaccia del chatbot, che contiene:
- ListView, che contiene tutti i fumetti dell'utente e del chatbot. Utilizza la classe ChatMessage, che crea messaggi di chat con un avatar e un testo.
- TextField per l'inserimento di query di testo.
- IconButton con l'icona di invio, per inviare query di testo a Dialogflow
- IconButton con un microfono per inviare stream audio a Dialogflow, che cambia lo stato quando viene premuto.
Collegamento dell'interfaccia della chat
- Apri main.dart e modifica
Widget build, in modo che crei un'istanza solo per l'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. Interrompi il dispositivo virtuale ed esegui di nuovo main.ARROW). Quando esegui l'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.
- Prova l'area di testo e i pulsanti. Quando digiti una query di testo e premi Invio oppure tocchi il pulsante di invio, la query di testo viene visualizzata nella scheda Esegui di Android Studio. Quando tocchi il pulsante del microfono e lo interrompi, lo stream audio verrà registrato nella scheda Esegui.
Ottimo, ora siamo pronti per 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, proprio 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, proprio 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);
Verrà creata un'istanza Dialogflow autorizzata per il tuo progetto Google Cloud con l'account di servizio. Assicurati di avere il file credentials.json nella cartella assets.
Ricordo ancora una volta, a scopo dimostrativo, su come lavorare con Dialogflow gRPC, ma per le app di produzione non conviene archiviare il file credentials.json nella cartella degli asset, perché non è considerato sicuro.
Chiamata a detectIntent in corso...
- Ora trova il metodo
handleSubmitted(). È qui che entra in gioco la magia. Proprio sotto il commento TODO, aggiungi il seguente codice.Questo codice aggiungerà il messaggio digitato dell'utente alla ListView:
ChatMessage message = ChatMessage(
text: text,
name: "You",
type: true,
);
setState(() {
_messages.insert(0, message);
});
- Ora, proprio sotto il codice precedente, effettueremo la chiamata detectIntent, passiamo il testo dall'input e un languageCode. - Il risultato (all'interno di
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'intento. Tipo:
hi. Dovrebbe salutarti con il messaggio di benvenuto predefinito. Quando digiti qualcosa, ti viene restituito il fallback predefinito.
Esecuzione di una chiamata streamingDetectIntent
- Ora trova il metodo
handleStream(). È qui che entra in gioco la magia per lo streaming audio. Innanzitutto, proprio sotto il primo TODO, crea un audio InputConfigV2beta1 con un biasList per bilanciare il modello vocale. Dato che stiamo usando un telefono (dispositivo virtuale), l'Hertz di campionamento sarà 16000 e la codifica sarà Lineare 16. Dipende dall'hardware o dal microfono della macchina che utilizzi. Per il mio microfono interno Macbook, 16000 era un buon risultato. (visualizza 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]
);
- Successivamente, chiameremo il metodo
streamingDetectIntentsull'oggettodialogflow, che contiene la 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 di intent corrispondente rilevata. Stamperemo questo 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 e testala sul dispositivo virtuale, premi il pulsante del microfono e Di': "Ciao".
Verrà attivato l'intent di benvenuto predefinito di Dialogflow. I risultati verranno stampati sullo schermo. Ora che Flutter funziona al meglio con l'integrazione Dialogflow, possiamo iniziare a lavorare alla conversazione con il chatbot.
5. Dialogflow: modellazione dell'agente Dialogflow
Dialogflow Essentials è una suite di sviluppo per la creazione di UI conversazionali. come chatbot, bot vocali, gateway telefonici. Tutti possono realizzarla con lo stesso strumento e puoi persino supportare più canali in oltre 20 lingue diverse. I designer UX di Dialogflow (creatori di modelli di agenti, linguisti) o 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, nei quali quelli combinati possono gestire una conversazione completa. Ogni intent può contenere parametri e risposte.
La corrispondenza di un intent è nota anche come classificazione dell'intent o corrispondenza dell'intento. Questo è il concetto principale in Dialogflow ES. Una volta trovato un intent, questo può restituire una risposta, raccogliere parametri (estrazione di entità) o attivare codice webhook (fulfillment), ad esempio per recuperare i dati da un database.
Quando un utente finale scrive o dice qualcosa in un chatbot, denominato espressione utente o frase, Dialogflow ES abbina l'espressione all'intento migliore dell'agente Dialogflow, in base alle frasi di addestramento. Il modello di machine learning Dialogflow ES "in background" è stato addestrato su queste frasi di addestramento.
Dialogflow ES utilizza un concetto chiamato contesto. Proprio come un essere umano, Dialogflow ES può ricordare il contesto in una seconda e terza svolta a turno. In questo modo può tenere traccia delle frasi precedenti dell'utente.
Ecco ulteriori informazioni sugli intent Dialogflow.
Modifica dell'intent di benvenuto predefinito
Quando crei un nuovo agente Dialogflow, vengono creati automaticamente due intent predefiniti. L'intent di benvenuto predefinito è il primo flusso a cui accedi quando inizi una conversazione con l'agente. L'intent di riserva predefinito è il flusso che segui quando l'agente non è in grado di capirti o non riesce ad associare un intent a ciò che hai appena detto.
Ecco il messaggio di benvenuto per l'intent di benvenuto predefinito:
Utente | Agente |
Un saluto da Google | "Ciao, sono il bot delle domande frequenti su Dialogflow. Posso rispondere alle domande su Dialogflow." |
- Fai clic su Intent > Intent di benvenuto predefinito
- Scorri verso il basso fino a Risposte.
- Cancella tutte le risposte testuali.
- Nella scheda predefinita, crea le due risposte seguenti:
- Ciao, sono il bot di Dialogflow per le domande frequenti e posso rispondere alle domande su Dialogflow. Cosa vorresti sapere?
- Ciao, sono il bot di Dialogflow per le domande frequenti. Avete domande su Dialogflow? Come posso aiutarti?
La configurazione dovrebbe essere simile a quella in questo screenshot.
- Fai clic su Salva.
- Proviamo questo intent. Innanzitutto, possiamo testarlo nel simulatore di Dialogflow.Type: Hello. Dovrebbe essere restituito uno dei seguenti messaggi:
- Ciao, sono il bot di Dialogflow per le domande frequenti e posso rispondere alle domande su Dialogflow. Cosa vorresti sapere?
- Ciao, sono il bot di Dialogflow per le domande frequenti. Avete domande su Dialogflow? Come posso aiutarti?
Modifica dell'intent di fallback predefinito
- Fai clic su Intent > Intent di fallback predefinito
- Scorri verso il basso fino a Risposte.
- Cancella tutte le risposte testuali.
- 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 integrano gli intent definiti. Analizzano i documenti informativi 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ù sui connettori di conoscenza.
Proviamo.
- Seleziona Knowledge (beta) nel menu.
- Fai clic sul pulsante blu a destra: Crea Knowledge Base
- Digita come nome della Knowledge Base; Domande frequenti su Dialogflow e fai clic su Salva.
- Fai clic sul link Crea il primo
- Si aprirà una finestra.
Utilizza la seguente configurazione:
Nome del 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 dettaglio.
- Seleziona Abilita ricaricamento automatico per recuperare automaticamente le modifiche quando la pagina web delle domande frequenti viene aggiornata, quindi premi Salva.
Verranno visualizzate tutte le domande frequenti che hai implementato in Dialogflow. È facile.
Ricorda che puoi anche puntare a un sito web HTML online contenente le domande frequenti per importare le domande frequenti nel tuo agente. È persino possibile caricare un PDF con un blocco di testo e Dialogflow troverà delle domande.
Le domande frequenti dovrebbero essere viste come "extra" da aggiungere ai tuoi agenti, accanto ai flussi di intent. Le domande frequenti sulla knowledge base non consentono di addestrare il modello. Di conseguenza, porre domande in un modo completamente diverso potrebbe non ottenere una corrispondenza perché non utilizza la comprensione del linguaggio naturale (modelli di machine learning). Ecco perché a volte vale la pena convertire le domande frequenti in intent.
- Testa le domande nel simulatore a destra.
- Al termine, torna all'app Flutter e testa il bot di chat e vocale con questi nuovi contenuti. Poni le domande che hai caricato in Dialogflow.
6. Complimenti
Complimenti, hai creato la tua prima app Flutter con l'integrazione del chatbot Dialogflow. Ottimo lavoro.
Argomenti trattati
- Creare un chatbot con Dialogflow Essentials
- Come integrare Dialogflow in un'app Flutter
- Come rilevare intent di testo con Dialogflow
- Come trasmettere in streaming una voce tramite 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
- Creare Azioni per l'Assistente Google con Dialogflow (livello 1)
- Comprendere il fulfillment integrando Dialogflow con Google Calendar +. Crea la tua prima app Flutter
Ti interessa sapere come ho creato il pacchetto gRPC Dialogflow per Dart/Flutter?
- Consulta l'articolo del mio blog Il manuale nascosto per lavorare con le API gRPC di Google Cloud