Sprachbots für Android mit Dialogflow Essentials erstellen & Flattern

1. Hinweis

In diesem Codelab erfahren Sie, wie Sie einen einfachen Text- und Sprachbot für Dialogflow Essentials (ES) in eine Flutter-Anwendung einbinden. Dialogflow ES ist eine Entwicklungssuite zum Erstellen von Konversations-UIs. also Chatbots, Sprach-Bots, Telefonie-Gateways. Du kannst alle mit demselben Tool erstellen und sogar mehrere Kanäle in über 20 verschiedenen Sprachen unterstützen. Dialogflow lässt sich in viele beliebte Unterhaltungsplattformen wie Google Assistant, Slack und Facebook Messenger einbinden. Wenn Sie einen Agent für eine dieser Plattformen erstellen möchten, sollten Sie eine der vielen Einbindungsoptionen verwenden. Wenn Sie jedoch einen Chatbot für Mobilgeräte erstellen möchten, müssen Sie eine benutzerdefinierte Integration erstellen. Zum Erstellen von Intents geben Sie Trainingsformulierungen an, um ein zugrunde liegendes Modell für maschinelles Lernen zu trainieren.

Die Reihenfolge dieses Labs entspricht einer gängigen Vorgehensweise in der Cloud-Entwicklung:

  1. Umgebung einrichten
  • Dialogflow: Neuen Dialogflow ES-Agent erstellen
  • Dialogflow: Dialogflow konfigurieren
  • Google Cloud: Dienstkonto erstellen
  1. Flutter: Chatanwendung erstellen
  • Flutter-Projekt erstellen
  • Einstellungen und Berechtigungen konfigurieren
  • Abhängigkeiten hinzufügen
  • Verknüpfung mit dem Dienstkonto
  • Anwendung auf einem virtuellen Gerät oder einem physischen Gerät ausführen
  1. Flutter: Chatoberfläche mit Speech-to-Text-Unterstützung erstellen
  • Chatoberfläche erstellen
  • Chatoberfläche verknüpfen
  • Dialogflow-gRPC-Paket in die Anwendung einbinden
  1. Dialogflow: Modellierung des Dialogflow-Agents
  • Willkommens- und Fallback-Intents
  • Wissensdatenbank zu häufig gestellten Fragen nutzen

Vorbereitung

  • Grundlegendes Dart/Flutter-Erlebnis
  • Grundlegendes zur Google Cloud Platform
  • Grundkenntnisse in Dialogflow ES

Aufgaben

In diesem Codelab erfahren Sie, wie Sie einen FAQ-Bot für Mobilgeräte erstellen, der die häufigsten Fragen zum Tool Dialogflow beantworten kann. Endnutzer können über das integrierte Mikrofon eines Mobilgeräts mit der Textoberfläche interagieren oder eine Stimme streamen, um Antworten zu erhalten.

Lerninhalte

  • Chatbot mit Dialogflow Essentials erstellen
  • Dialogflow mit dem gRPC-Paket von Dialogflow in eine Flutter-Anwendung einbinden
  • Text-Intents mit Dialogflow erkennen
  • Stimme über das Mikrofon zu Dialogflow streamen
  • Verwenden des Knowledge Base-Connectors, um öffentliche FAQs zu importieren
  • Chatbot über die Text- und Sprachschnittstelle auf einem virtuellen oder physischen Gerät testen

Voraussetzungen

  • Sie benötigen eine Google Identity-/Gmail-Adresse, um einen Dialogflow-Agent zu erstellen.
  • Sie benötigen Zugriff auf die Google Cloud Platform, um ein Dienstkonto herunterladen zu können
  • Eine Flutter-Entwicklungsumgebung

Flutter-Entwicklungsumgebung einrichten

  1. Wählen Sie das Betriebssystem aus, auf dem Sie Flutter installieren möchten.
  1. Sie können Apps mit Flutter mithilfe eines beliebigen Texteditors, der mit unseren Befehlszeilentools kombiniert ist, erstellen. In diesem Workshop wird jedoch Android Studio genutzt. Die Flutter- und Dart-Plug-ins für Android Studio bieten Codevervollständigung, Syntaxhervorhebung, Widget-Bearbeitungsfunktionen, Run- und Unterstützung zur Fehlerbehebung und vieles mehr. Folge der Anleitung unter https://flutter.dev/docs/get-started/editor

2. Umgebung einrichten

Dialogflow: Neuen Dialogflow ES-Agent erstellen

  1. Öffnen Sie die .
  2. Wählen Sie in der linken Leiste direkt unter dem Logo Create New Agent (Neuen Agent erstellen) aus. aus. Hinweis: Klicken Sie nicht auf das Drop-down-Menü mit der Bezeichnung „Global“. Wir benötigen eine globale Dialogflow-Instanz, um die Wissensdatenbank „FAQs“ nutzen zu können.
  3. Geben Sie einen Agent-Namen an: yourname-dialogflow (verwenden Sie Ihren eigenen Namen)
  4. Wählen Sie als Standardsprache Englisch – en aus.
  5. Wählen Sie als Standardzeitzone die nächstgelegene Zeitzone aus.
  6. Wählen Sie nicht Mega Agent aus. (Mit dieser Funktion können Sie einen übergreifenden Agent erstellen, der zwischen „Unter“-Agents orchestrieren kann. Das ist jetzt nicht mehr nötig.)
  7. Klicken Sie auf Erstellen.

Bildschirm „Neues Projekt erstellen“

Dialogflow konfigurieren

  1. Klicken Sie im linken Menü neben dem Projektnamen auf das Zahnradsymbol.

Drop-down-Menü zum Erstellen eines neuen Projekts

  1. Geben Sie die folgende Agent-Beschreibung ein: Dialogflow FAQ Chatbot (Dialogflow-FAQ-Chatbot)
  2. Aktivieren Sie die Betafunktionen und drehen Sie den Schalter um.

Dialogflow Essentials V2Beta1

  1. Klicken Sie auf den Tab Sprache und prüfen Sie, ob das Kästchen Automatische Sprachanpassung aktiviert ist.
  2. Optional können Sie auch den ersten Schalter umlegen. Dadurch wird das Sprachmodell verbessert. Es ist jedoch nur verfügbar, wenn Sie die Dialogflow-Testversion upgraden.
  3. Klicken Sie auf Speichern.

Google Cloud: Dienstkonto abrufen

Nachdem Sie einen Agent in Dialogflow erstellt haben, sollte in der Google Cloud Console ein Google Cloud-Projekt erstellt werden.

  1. Öffnen Sie die Google Cloud Console: .
  2. Achten Sie darauf, dass Sie mit demselben Google-Konto wie in Dialogflow angemeldet sind, und wählen Sie in der oberen blauen Leiste das Projekt yourname-dialogflow aus.
  3. Suchen Sie dann in der oberen Symbolleiste nach Dialogflow API und klicken Sie im Drop-down-Menü auf das Ergebnis der Dialogflow API.

Dialogflow API aktivieren

  1. Klicken Sie auf die blaue Schaltfläche Verwalten und dann in der linken Menüleiste auf Anmeldedaten. (Wenn Dialogflow noch nicht aktiviert ist, klicken Sie zuerst auf Aktivieren.)

Anmeldedaten für die GCP Console

  1. Klicken Sie oben auf dem Bildschirm auf Anmeldedaten erstellen und wählen Sie Dienstkonto aus.

Anmeldedaten erstellen

  1. Geben Sie einen Dienstkontonamen (flutter_dialogflow), eine ID und eine Beschreibung an und klicken Sie auf Erstellen.

Dienstkonto erstellen

  1. In Schritt 2 müssen Sie die Rolle auswählen: Dialogflow API Admin, klicken Sie auf Weiter und Fertig.
  2. Klicken Sie auf das Dienstkonto flutter_dialogflow, dann auf den Tab Keys und dann auf Add Key > Neuen Schlüssel erstellen

Schlüssel erstellen

  1. Erstellen Sie einen JSON-Schlüssel. Benennen Sie ihn in credentials.json um und speichern Sie ihn an einem sicheren Ort auf Ihrer Festplatte. Wir werden sie später verwenden.

JSON-Schlüssel

Perfekt. Alle erforderlichen Tools sind richtig eingerichtet. Jetzt können wir mit der Integration von Dialogflow in unsere Anwendung beginnen.

3. Flutter: Chatanwendung erstellen

Boilerplate-Anwendung erstellen

  1. Öffnen Sie Android Studio und wählen Sie Start a new Flutter project (Neues Flutter-Projekt starten) aus.
  2. Wählen Sie als Projekttyp Flutter Application (Flutter-Anwendung) aus. Klicken Sie dann auf „Weiter“.
  3. Prüfen Sie, ob der Flutter SDK-Pfad den Speicherort des SDKs angibt. Wählen Sie „SDK installieren...“ aus, wenn das Textfeld leer ist.
  4. Geben Sie einen Projektnamen ein (z. B. flutter_dialogflow_agent). Klicken Sie dann auf Weiter.
  5. Ändern Sie den Paketnamen und klicken Sie auf Fertigstellen.

Neue Flutter-Anwendung erstellen

Dadurch wird eine Beispielanwendung mit Material Components erstellt.

Warten Sie, bis Android Studio das SDK installiert und das Projekt erstellt hat.

Einstellungen und Berechtigungen

  1. Die von uns verwendete Bibliothek sound_stream für Audiorekorder erfordert ein minSdk von mindestens 21. Ändern wir dies also in android/app/build.gradle im Block „defaultConfig“. Hinweis: Im Android-Ordner befinden sich zwei build.gradle-Dateien, aber die Datei im App-Ordner ist die richtige.
defaultConfig {
   applicationId "com.myname.flutter_dialogflow_agent"
   minSdkVersion 21
   targetSdkVersion 30
   versionCode flutterVersionCode.toInteger()
   versionName flutterVersionName
}
  1. Um Berechtigungen für das Mikrofon zu erteilen und die App außerdem mit dem in der Cloud ausgeführten Dialogflow-Agent in Verbindung zu setzen, müssen Sie der Datei app/src/main/AndroidManifest.xml die Berechtigungen INTERNET und RECORD_AUDIO hinzufügen. In Ihrem Flutter-Projekt gibt es mehrere AndroidManifest.xml-Dateien. Sie benötigen jedoch die Datei AndroidManifest.xml im Hauptordner. Sie können die Zeilen direkt in die Manifest-Tags einfügen.
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />

Abhängigkeiten hinzufügen

Wir verwenden die Pakete sound_stream, rxdart und dialogflow_grpc.

  1. sound_stream-Abhängigkeit hinzufügen
$ 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!
  1. dialogflow_grpc-Abhängigkeit hinzufügen
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!
  1. rxdart-Abhängigkeit hinzufügen
$ 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!

Dienstkonto und Google Cloud-Projektinformationen laden

  1. Erstellen Sie in Ihrem Projekt ein Verzeichnis und nennen Sie es assets.
  2. Verschieben Sie die Datei credentials.json, die Sie aus der Google Cloud Console heruntergeladen haben, in den Ordner assets.
  3. Öffnen Sie pubspec.yaml und fügen Sie das Dienstkonto dem Flutter-Block hinzu.
flutter:
  uses-material-design: true
  assets:
    - assets/credentials.json

Anwendung auf einem physischen Gerät ausführen

Wenn Sie ein Android-Gerät haben, können Sie es über ein USB-Kabel anschließen und auf dem Gerät Fehler beheben. Folgen Sie dieser Anleitung, um die Einrichtung über den Bildschirm Entwickleroptionen auf Ihrem Android-Gerät durchzuführen.

Anwendung auf einem virtuellen Gerät ausführen

Wenn Sie die Anwendung auf einem virtuellen Gerät ausführen möchten, gehen Sie so vor:

  1. Klicken Sie auf Tools > AVD-Manager (Oder wählen Sie den AVD Manager in der oberen Symbolleiste aus, in der Abbildung unten ist er rosa hervorgehoben.)

Android Studio-Symbolleiste oben

  1. Wir erstellen ein virtuelles Android-Zielgerät, damit wir unsere App ohne ein physisches Gerät testen können. Weitere Informationen finden Sie unter AVDs verwalten. Nachdem Sie ein neues virtuelles Gerät ausgewählt haben, können Sie es mit einem Doppelklick starten.

AVDs verwalten

Virtuelles Gerät

  1. Wählen Sie in der Hauptsymbolleiste von Android Studio über das Drop-down-Menü ein Android-Gerät als Ziel aus und achten Sie darauf, dass main.dart ausgewählt ist. Klicken Sie dann auf die Schaltfläche Ausführen (grünes Dreieck).

Unten in der IDE sehen Sie die Protokolle in der Konsole. Sie sehen, dass Android und die Flutter-Start-App installiert werden. Dies dauert einen Moment. Sobald das virtuelle Gerät bereit ist, lassen sich Änderungen blitzschnell vornehmen. Wenn Sie fertig sind, wird die Flutter App für den Auslöser geöffnet.

Textbaustein-App

  1. Aktivieren wir das Mikrofon für die Chatbot-App. Klicken Sie auf die Schaltfläche Options (Optionen) des virtuellen Geräts, um die Optionen zu öffnen. Aktivieren Sie auf dem Tab Mikrofon alle drei Schalter.

AVD-Optionen

  1. Testen wir nun Hot Refresh, um zu zeigen, wie schnell Änderungen vorgenommen werden können.

Ändern Sie in lib/main.dart den MyHomePage title in der MyApp-Klasse in Flutter Dialogflow Agent. Ändern Sie primarySwatch in „Colors.orange“.

Erster Code

Speichern Sie die Datei oder klicken Sie in der Android Studio-Symbolleiste auf das Blitzsymbol. Sie sollten die Änderung sehen, die direkt auf dem virtuellen Gerät vorgenommen wurde.

4. Flutter: Chatoberfläche mit STT-Unterstützung erstellen

Chatoberfläche erstellen

  1. Erstellen Sie im Ordner lib eine neue Datei mit dem Flutter-Widget. Klicken Sie mit der rechten Maustaste auf den lib-Ordner Neu > Flutter-Widget > Zustandsorientiertes Widget. Rufen Sie diese Datei auf: chat.dart.

Fügen Sie den folgenden Code in diese Datei ein. Diese Dart-Datei erstellt die Chat-Oberfläche. Dialogflow funktioniert noch nicht. Es geht nur um das Layout aller Komponenten und die Integration der Mikrofonkomponente, um Streams zuzulassen. Die Kommentare in der Datei weisen darauf hin, wo später Dialogflow eingebunden wird.

// 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),
      ),
    );
  }
}

Suchen Sie in der Datei chat.dart nach dem Widget-Build. Dadurch wird die Chatbot-Oberfläche erstellt, die Folgendes enthält:

  • ListView, die alle Info-Pop-ups des Nutzers und des Chatbots enthält. Sie nutzt die ChatMessage-Klasse, die Chatnachrichten mit einem Avatar und Text erstellt.
  • TextField zum Eingeben von Textabfragen
  • IconButton mit dem Symbol „Senden“ zum Senden von Textabfragen an Dialogflow
  • IconButton mit einem Mikrofon zum Senden von Audiostreams an Dialogflow, das den Status beim Drücken ändert

Chatoberfläche verknüpfen

  1. Öffnen Sie main.dart und ändern Sie Widget build, sodass nur die Chat()-Oberfläche instanziiert wird. Alle anderen Democodes können entfernt werden.
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())
    );
  }
}
  1. Führen Sie die Anwendung aus: Falls die App schon einmal gestartet wurde. Beenden Sie das virtuelle Gerät und führen Sie "main.dart" noch einmal aus. Wenn Sie Ihre App zum ersten Mal über die Chat-Oberfläche ausführen Es wird ein Pop-up-Fenster mit den Berechtigungen angezeigt, in dem Sie gefragt werden, ob Sie das Mikrofon zulassen möchten. Klicken Sie auf Bei Nutzung der App.

Berechtigungen

  1. Experimentieren Sie mit dem Textbereich und den Schaltflächen. Wenn Sie eine Textabfrage eingeben und die Eingabetaste drücken oder auf die Schaltfläche „Senden“ tippen, wird die Textabfrage auf dem Tab Ausführen von Android Studio protokolliert. Wenn Sie auf die Mikrofonschaltfläche tippen und es anhalten, sehen Sie den Audiostream auf dem Tab Ausführen protokolliert.

Audiostream-Protokoll

Jetzt kann die Anwendung in Dialogflow integriert werden.

Flutter-Anwendung in Dialogflow_gRPC einbinden

  1. Öffnen Sie chat.dart und fügen Sie die folgenden Importe hinzu:
import 'package:dialogflow_grpc/dialogflow_grpc.dart';
import 'package:dialogflow_grpc/generated/google/cloud/dialogflow/v2beta1/session.pb.dart';
  1. Fügen Sie am Anfang der Datei direkt unter // TODO DialogflowGrpcV2Beta1 class instance die folgende Zeile für die Dialogflow-Klasseninstanz ein:
DialogflowGrpcV2Beta1 dialogflow;
  1. Suchen Sie nach der Methode initPlugin() und fügen Sie direkt unter dem TODO-Kommentar den folgenden Code ein:
    // Get a Service account
    final serviceAccount = ServiceAccount.fromString(
        '${(await rootBundle.loadString('assets/credentials.json'))}');
    // Create a DialogflowGrpc Instance
    dialogflow = DialogflowGrpcV2Beta1.viaServiceAccount(serviceAccount);

Dadurch wird eine Dialogflow-Instanz erstellt, die für Ihr Google Cloud-Projekt mit dem Dienstkonto autorisiert ist. Achten Sie darauf, dass sich die Datei credentials.json im Ordner assets befindet.

Für Demonstrationszwecke zur Arbeit mit Dialogflow gRPC ist dies in Ordnung, aber für Produktionsanwendungen sollten Sie die Datei "credentials.json" nicht im Ordner "Assets" speichern, da diese Datei nicht als sicher gilt.

detectIntent-Aufruf ausführen

  1. Suchen Sie jetzt nach der Methode handleSubmitted(). Hier kommt die Magie ins Spiel. Fügen Sie direkt unter dem TODO-Kommentar den folgenden Code ein.Durch diesen Code wird die vom Nutzer eingegebene Nachricht zur ListView hinzugefügt:
ChatMessage message = ChatMessage(
 text: text,
 name: "You",
 type: true,
);

setState(() {
 _messages.insert(0, message);
});
  1. Direkt unter dem vorherigen Code führen wir den detectIntent-Aufruf aus, übergeben den Text aus der Eingabe und einen languageCode. - Das Ergebnis (in data.queryResult.fulfillment) wird in der Listenansicht ausgegeben:
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);
  });
}
  1. Starten Sie das virtuelle Gerät und testen Sie den Aufruf zur Intent-Erkennung. Typ: hi. Sie sollten mit der standardmäßigen Willkommensnachricht begrüßt werden. Wenn Sie etwas anderes eingeben, wird das Standard-Fallback verwendet.

StreamingDetectIntent-Aufruf ausführen

  1. Suchen Sie jetzt nach der Methode handleStream(). Hier kommt die Magie des Audiostreamings ins Spiel. Erstellen Sie zunächst direkt unter der ersten Aufgabe eine Audio-InputConfigV2beta1 mit einer biasList, um das Sprachmodell zu beeinflussen. Da wir ein Telefon (virtuelles Gerät) verwenden, liegt das Sample Hertz bei 16.000 und die Codierung ist Linear 16. Das hängt davon ab, welche Hardware bzw. welches Mikrofon Sie verwenden. Für mein internes Macbook-Mikrofon war 16000 gut. Weitere Informationen zum Paket 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]
);
  1. Als Nächstes rufen wir die Methode streamingDetectIntent für das dialogflow-Objekt auf, das die Dialogflow-Sitzung enthält:
final responseStream = dialogflow.streamingDetectIntent(config, _audioStream);
  1. Mit dem responseStream können wir endlich das eingehende Transkript, die erkannte Nutzeranfrage und die erkannte übereinstimmende Intent-Antwort anhören. Wir geben das als ChatMessage auf dem Bildschirm aus:
// 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');
});

Das war's. Starten Sie Ihre Anwendung und testen Sie sie auf dem virtuellen Gerät. Drücken Sie dann die Mikrofontaste und wählen Sie "Hallo" aus.

Dadurch wird der Standard-Begrüßungs-Intent von Dialogflow ausgelöst. Die Ergebnisse werden auf dem Bildschirm angezeigt. Da Flutter jetzt hervorragend mit der Dialogflow-Integration funktioniert, können wir mit der Arbeit an der Chatbot-Unterhaltung beginnen.

5. Dialogflow: Dialogflow-Agent modellieren

Dialogflow Essentials ist eine Entwicklungssuite zum Erstellen dialogorientierter UIs. also Chatbots, Sprach-Bots, Telefonie-Gateways. Du kannst alle mit demselben Tool erstellen und sogar mehrere Kanäle in über 20 verschiedenen Sprachen unterstützen. Dialogflow-UX-Designer (Agent-Modellentwickler, Linguisten) oder Entwickler erstellen Intents, indem sie Trainingsformulierungen zum Trainieren eines zugrunde liegenden Modells für maschinelles Lernen angeben.

Ein Intent kategorisiert die Absicht eines Nutzers. Sie können für jeden Dialogflow ES-Agent mehrere Intents definieren, mit denen die kombinierten Intents eine vollständige Unterhaltung verarbeiten können. Jeder Intent kann Parameter und Antworten enthalten.

Der Abgleich eines Intents wird auch als Intent-Klassifizierung oder Intent-Abgleich bezeichnet. Dies ist das Hauptkonzept in Dialogflow ES. Nachdem ein Intent zugeordnet wurde, kann er eine Antwort zurückgeben, Parameter erfassen (Entitätsextraktion) oder Webhook-Code (Auftragsausführung) auslösen, z. B. um Daten aus einer Datenbank abzurufen.

Wenn ein Endnutzer etwas in einen Chatbot schreibt oder sagt, wird dies als Nutzerausdruck oder Äußerung bezeichnet. Dialogflow ES gleicht den Ausdruck anhand der Trainingsformulierungen mit dem besten Intent des Dialogflow-Agents ab. Das zugrunde liegende Modell für maschinelles Lernen von Dialogflow ES wurde anhand dieser Trainingsformulierungen trainiert.

Dialogflow ES arbeitet mit einem Konzept namens Kontext. Genau wie ein Mensch kann sich Dialogflow ES den Kontext in einer zweiten und dritten Runde merken. So lassen sich frühere Nutzeräußerungen nachverfolgen.

Weitere Informationen zu Dialogflow-Intents

Standard-Begrüßungs-Intent ändern

Wenn Sie einen neuen Dialogflow-Agent erstellen, werden automatisch zwei Standard-Intents erstellt. Der Standard-Begrüßungs-Intent ist der erste Ablauf, den Sie aufrufen, wenn Sie eine Unterhaltung mit dem Agent starten. Der Standard-Fallback-Intent ist der Ablauf, den Sie erhalten, wenn der Agent Sie nicht verstehen oder einen Intent nicht dem gerade Gesagten zuordnen kann.

Hier ist die Begrüßungsnachricht für den Standard-Begrüßungs-Intent:

Nutzer

Kundenservicemitarbeiter

Hallo

„Hallo, ich bin der FAQ-Bot von Dialogflow und kann Fragen zu Dialogflow beantworten.“

„Was möchten Sie wissen?“

  1. Klicken Sie auf Intents > Standard-Begrüßungs-Intent
  2. Scrollen Sie nach unten zu Antworten.
  3. Alle Textantworten löschen.
  4. Erstellen Sie auf dem Standardtab die folgenden zwei Antworten:
  • Hallo, ich bin der FAQ-Bot von Dialogflow und kann Fragen zu Dialogflow beantworten. Was möchten Sie wissen?
  • Hallo, ich bin der FAQ-Bot von Dialogflow. Haben Sie Fragen zu Dialogflow? Wie kann ich Ihnen helfen?

Die Konfiguration sollte diesem Screenshot ähneln.

Standard-Begrüßungs-Intent bearbeiten

  1. Klicken Sie auf Speichern.
  2. Lassen Sie uns diesen Intent testen. Zuerst können wir es im Dialogflow-Simulator testen.Geben Sie Hello ein. Es sollte eine der folgenden Meldungen zurückgegeben werden:
  • Hallo, ich bin der FAQ-Bot von Dialogflow und kann Fragen zu Dialogflow beantworten. Was möchten Sie wissen?
  • Hallo, ich bin der FAQ-Bot von Dialogflow. Haben Sie Fragen zu Dialogflow? Wie kann ich Ihnen helfen?

Standard-Fallback-Intent ändern

  1. Klicken Sie auf Intents > Standard-Fallback-Intent
  2. Scrollen Sie nach unten zu Antworten.
  3. Alle Textantworten löschen.
  4. Erstellen Sie im Standardtab die folgende Antwort:
  • Leider kenne ich die Antwort auf diese Frage nicht. Haben Sie auf unserer Website nachgesehen? http://www.dialogflow.com?
  1. Klicken Sie auf Speichern.

Verbindung zu einer Online-Wissensdatenbank herstellen

Wissensconnectors ergänzen definierte Intents. Sie parsen Wissensdokumente, um automatisierte Antworten zu finden. z. B. häufig gestellte Fragen, Artikel aus CSV-Dateien, Online-Websites oder sogar PDF-Dateien. Um sie zu konfigurieren, definieren Sie eine oder mehrere Wissensdatenbanken, bei denen es sich um Sammlungen von Wissensdokumenten handelt.

Weitere Informationen zu Wissensconnectors

Probieren wir es aus.

  1. Wählen Sie im Menü Wissen (Beta) aus.

Knowledge Base

  1. Klicke auf die rechte blaue Schaltfläche: Wissensdatenbank erstellen
  2. Gib einen Namen in der Wissensdatenbank ein. FAQs zu Dialogflow und klicken Sie auf Save (Speichern).
  3. Klicken Sie auf Ersten Link erstellen.

Wissensdatenbank zuerst

  1. Dadurch wird ein Fenster geöffnet.

Verwenden Sie die folgende Konfiguration:

Dokumentname: DialogflowFAQ Wissenstyp: FAQ MIME-Typ: text/html

  1. Die URL, von der die Daten geladen werden, lautet:

https://www.leeboonstra.dev/faqs/

  1. Klicken Sie auf Erstellen.

Es wurde eine Wissensdatenbank erstellt:

Wissensdatenbank erstellt

  1. Scrollen Sie nach unten zum Abschnitt „Responses“ (Antworten) und klicken Sie auf Add Response (Antwort hinzufügen).

Erstelle die folgenden Antworten und klicke auf Speichern.

$Knowledge.Answer[1]
  1. Klicken Sie auf Details ansehen.

Details ansehen

  1. Wählen Sie Automatische Aktualisierung aktivieren aus, damit Änderungen automatisch abgerufen werden, wenn die FAQ-Webseite aktualisiert wird, und klicken Sie auf Speichern.

Daraufhin werden alle FAQs angezeigt, die Sie in Dialogflow implementiert haben. Das ist ganz einfach.

Sie können auch auf eine Online-HTML-Website mit FAQs verweisen, um diese in Ihren Agent zu importieren. Es ist sogar möglich, eine PDF-Datei mit einem Textblock hochzuladen. Dialogflow stellt dann selbst Fragen.

FAQs sind jetzt „Extras“. die Sie Ihren Agents hinzufügen möchten. Das Modell kann in den häufig gestellten Fragen der Wissensdatenbank nicht trainiert werden. Wenn Sie Fragen also auf ganz andere Weise stellen, erhalten Sie möglicherweise keine Übereinstimmung, da dabei Natural Language Understanding (Modelle für maschinelles Lernen) nicht verwendet wird. Deshalb lohnt es sich manchmal, häufig gestellte Fragen in Intents umzuwandeln.

  1. Testen Sie die Fragen im Simulator rechts.
  2. Wenn alles funktioniert, kehre zur Flutter-App zurück und teste deinen Chat- und Sprachbot mit diesen neuen Inhalten. Stellen Sie die Fragen, die Sie in Dialogflow geladen haben.

Ergebnis

6. Glückwunsch

Herzlichen Glückwunsch! Sie haben Ihre erste Flutter-Anwendung mit einer Dialogflow-Chatbot-Integration erstellt. Gut gemacht!

Behandelte Themen

  • Chatbot mit Dialogflow Essentials erstellen
  • Dialogflow in eine Flutter-Anwendung einbinden
  • Text-Intents mit Dialogflow erkennen
  • Stimme über das Mikrofon zu Dialogflow streamen
  • Verwendung des Knowledge Base-Connectors

Nächste Schritte

Hat Ihnen dieses Code-Lab gefallen? Sehen Sie sich diese großartigen Dialogflow-Labs an.

Möchten Sie wissen, wie ich das Dialogflow-gRPC-Paket für Dart/Flutter erstellt habe?