Tworzenie botów głosowych na Androida z użyciem Dialogflow Essentials i Skrzydełko

1. Zanim zaczniesz

W tym ćwiczeniu dowiesz się, jak zintegrować prostego bota tekstowego i głosowego Dialogflow Essentials (ES) z aplikacją Flutter. Dialogflow ES to pakiet narzędzi do tworzenia interfejsów konwersacyjnych. Dlatego czatboty, boty głosowe, bramki telefoniczne. Wszystkie te elementy możesz tworzyć za pomocą tego samego narzędzia, a nawet obsługiwać wiele kanałów w ponad 20 różnych językach. Dialogflow integruje się z wieloma popularnymi platformami do prowadzenia rozmów, takimi jak Asystent Google, Slack i Facebook Messenger. Jeśli chcesz utworzyć agenta na jednej z tych platform, skorzystaj z jednej z wielu opcji integracji. Aby jednak utworzyć chatbota na urządzenia mobilne, musisz utworzyć integrację niestandardową. Intencje utworzysz, określając frazy treningowe, które posłużą do wytrenowania bazowego modelu uczenia maszynowego.

Ćwiczenia w tym module są uporządkowane w taki sposób, aby odzwierciedlały typowe czynności podejmowane przez programistów poruszających się w środowisku chmurowym:

  1. Konfiguracja środowiska
  • Dialogflow: tworzenie nowego agenta Dialogflow ES
  • Dialogflow: konfigurowanie Dialogflow
  • Google Cloud: tworzenie konta usługi
  1. Flutter: tworzenie aplikacji do obsługi czatu
  • Tworzenie projektu Flutter
  • Konfigurowanie ustawień i uprawnień
  • Dodawanie zależności
  • połączenie z kontem usługi.
  • uruchamianie aplikacji na urządzeniu wirtualnym lub fizycznym
  1. Flutter: tworzenie interfejsu czatu z obsługą funkcji zamiany mowy na tekst
  • Tworzenie interfejsu czatu
  • Łączenie interfejsu czatu
  • Integracja pakietu gRPC Dialogflow z aplikacją
  1. Dialogflow: modelowanie agenta Dialogflow
  • Konfigurowanie intencji powitalnej i awaryjnej
  • Korzystanie z bazy wiedzy z najczęstszymi pytaniami

Warunek wstępny

  • Podstawowa znajomość języka Dart i platformy Flutter
  • Podstawowe doświadczenie z Google Cloud Platform
  • Podstawowe informacje o Dialogflow ES

Co utworzysz

W tym samouczku dowiesz się, jak utworzyć bota mobilnego z odpowiedziami na najczęstsze pytania, który może odpowiadać na najczęstsze pytania dotyczące narzędzia Dialogflow. Użytkownicy mogą wchodzić w interakcje z interfejsem tekstowym lub przesyłać strumieniowo głos za pomocą wbudowanego mikrofonu urządzenia mobilnego, aby uzyskać odpowiedzi.

Czego się nauczysz

  • Tworzenie czatbota za pomocą Dialogflow Essentials
  • Integracja Dialogflow z aplikacją Flutter za pomocą pakietu gRPC Dialogflow
  • Wykrywanie intencji tekstowych za pomocą Dialogflow
  • Jak przesyłać strumieniowo głos przez mikrofon do Dialogflow
  • Jak używać oprogramowania sprzęgającego bazy wiedzy do importowania publicznych pytań i odpowiedzi
  • Testowanie czatbota za pomocą interfejsu tekstowego i głosowego na urządzeniu wirtualnym lub fizycznym

Czego potrzebujesz

  • Aby utworzyć agenta Dialogflow, musisz mieć tożsamość Google lub adres Gmail.
  • Aby pobrać konto usługi, musisz mieć dostęp do Google Cloud Platform.
  • Środowisko deweloperskie Fluttera

Konfigurowanie środowiska programistycznego Fluttera

  1. Wybierz system operacyjny, w którym instalujesz Fluttera.
  1. Aplikacje w Flutterze możesz tworzyć w dowolnym edytorze tekstu w połączeniu z naszymi narzędziami wiersza poleceń. W tych warsztatach będziemy jednak korzystać z Androida Studio. Wtyczki Flutter i Dart do Android Studio zapewniają uzupełnianie kodu, podświetlanie składni, pomoc w edycji widżetów, obsługę uruchamiania i debugowania oraz inne funkcje. Postępuj zgodnie z instrukcjami na stronie https://flutter.dev/docs/get-started/editor

2. Konfiguracja środowiska

Dialogflow: tworzenie nowego agenta Dialogflow ES

  1. Otwórz .
  2. Na pasku po lewej stronie, tuż pod logo, kliknij „Utwórz nowego agenta” w menu. (Uwaga: nie klikaj menu „Global”. Aby korzystać z bazy wiedzy z odpowiedziami na najczęstsze pytania, potrzebujemy instancji Dialogflow, która jest globalna).
  3. Podaj nazwę agentayourname-dialogflow (użyj własnego imienia i nazwiska).
  4. Jako język domyślny wybierz English - en.
  5. Jako domyślną strefę czasową wybierz strefę, która znajduje się najbliżej Ciebie.
  6. Nie wybieraj opcji Mega Agent. (Dzięki tej funkcji możesz utworzyć nadrzędnego agenta, który może koordynować działania agentów „podrzędnych”. Nie potrzebujemy tego teraz).
  7. Kliknij Utwórz.

Ekran tworzenia nowego projektu

Konfigurowanie Dialogflow

  1. W menu po lewej stronie kliknij ikonę koła zębatego obok nazwy projektu.

Menu Utwórz nowy projekt

  1. Wpisz ten opis agenta: Dialogflow FAQ Chatbot
  2. Włącz funkcje wersji beta, a następnie przesuń przełącznik.

Dialogflow Essentials w wersji 2Beta1

  1. Kliknij kartę Mowa i upewnij się, że pole Automatyczna adaptacja mowy jest aktywne.
  2. Opcjonalnie możesz też włączyć pierwszy przełącznik. Poprawi to model mowy, ale jest to możliwe tylko po przejściu na wyższą wersję próbną Dialogflow.
  3. Kliknij Zapisz.

Google Cloud: pobieranie konta usługi

Po utworzeniu agenta w Dialogflow w konsoli Google Cloud należy utworzyć projekt Google Cloud.

  1. Otwórz konsolę Google Cloud:
  2. Sprawdź, czy używasz tego samego konta Google co w Dialogflow, i wybierz projekt: yourname-dialogflow na niebieskim pasku u góry.
  3. Następnie na pasku narzędzi u góry wyszukaj Dialogflow API i w menu kliknij Dialogflow API.

Włączanie interfejsu Dialogflow API

  1. Kliknij niebieski przycisk Zarządzaj, a następnie w menu po lewej stronie kliknij Dane logowania. (Jeśli Dialogflow nie jest jeszcze włączony, najpierw kliknij Włącz).

Dane logowania w konsoli GCP

  1. Kliknij Utwórz dane logowania (u góry ekranu) i wybierz Konto usługi.

Utwórz dane logowania

  1. Podaj nazwę konta usługi: flutter_dialogflow, identyfikator i opis, a następnie kliknij Utwórz.

Tworzenie konta usługi

  1. W kroku 2 musisz wybrać rolę: Dialogflow API Admin, kliknąć Dalej i Gotowe.
  2. Kliknij flutter_dialogflow konto usługi, wybierz kartę Klucze i kliknij Dodaj klucz > Utwórz nowy klucz.

Utwórz klucz

  1. Utwórz klucz JSON. Zmień jego nazwę na credentials.json i zapisz go w bezpiecznym miejscu na dysku twardym. Będzie on potrzebny później.

Klucz JSON

Świetnie, wszystkie potrzebne narzędzia są prawidłowo skonfigurowane. Możemy teraz rozpocząć integrację Dialogflow z naszą aplikacją.

3. Flutter: tworzenie aplikacji do obsługi czatu

Tworzenie aplikacji Boilerplate

  1. Otwórz Android Studio i kliknij Start a new Flutter project (Rozpocznij nowy projekt Fluttera).
  2. Jako typ projektu wybierz Flutter Application (Aplikacja Flutter). Następnie kliknij Dalej.
  3. Sprawdź, czy ścieżka pakietu Flutter SDK wskazuje lokalizację pakietu SDK (jeśli pole tekstowe jest puste, wybierz Zainstaluj pakiet SDK...).
  4. Wpisz nazwę projektu (np. flutter_dialogflow_agent), a potem kliknij Dalej.
  5. Zmień nazwę pakietu i kliknij Zakończ.

Tworzenie nowej aplikacji Flutter

Spowoduje to utworzenie przykładowej aplikacji z komponentami Material.

Poczekaj, aż Android Studio zainstaluje pakiet SDK i utworzy projekt.

Ustawienia i uprawnienia

  1. Biblioteka rejestratora dźwięku sound_stream, której będziemy używać, wymaga minimalnej wersji pakietu SDK 21. Zmieńmy to w pliku android/app/build.gradle w bloku defaultConfig. (Uwaga: w folderze android znajdują się 2 pliki build.gradle, ale właściwy jest ten w folderze app).
defaultConfig {
   applicationId "com.myname.flutter_dialogflow_agent"
   minSdkVersion 21
   targetSdkVersion 30
   versionCode flutterVersionCode.toInteger()
   versionName flutterVersionName
}
  1. Aby przyznać uprawnienia do mikrofonu i umożliwić aplikacji kontaktowanie się z agentem Dialogflow działającym w chmurze, musimy dodać uprawnienia INTERNET i RECORD_AUDIO do pliku app/src/main/AndroidManifest.xml. W projekcie Flutter znajduje się kilka plików AndroidManifest.xml, ale potrzebny jest ten w głównym folderze. Możesz dodać wiersze bezpośrednio w tagach pliku manifestu.
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />

Dodawanie zależności

Będziemy korzystać z pakietów sound_stream, rxdart i dialogflow_grpc.

  1. Dodaj zależność 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!
  1. Dodaj zależność 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!
  1. Dodaj zależność 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!

Wczytywanie informacji o koncie usługi i projekcie w chmurze Google Cloud

  1. W projekcie utwórz katalog i nadaj mu nazwę: assets.
  2. Przenieś plik credentials.json pobrany z konsoli Google Cloud do folderu assets.
  3. Otwórz plik pubspec.yaml i dodaj konto usługi do bloku flutter.
flutter:
  uses-material-design: true
  assets:
    - assets/credentials.json

Uruchamianie aplikacji na urządzeniu fizycznym

Jeśli masz urządzenie z Androidem, możesz podłączyć telefon za pomocą kabla USB i przeprowadzić debugowanie na urządzeniu. Aby skonfigurować tę opcję na ekranie Opcje programisty na urządzeniu z Androidem, wykonaj te czynności.

Uruchamianie aplikacji na urządzeniu wirtualnym

Jeśli chcesz uruchomić aplikację na urządzeniu wirtualnym, wykonaj te czynności:

  1. Kliknij Narzędzia> Menedżer AVD. (Możesz też wybrać AVD Manager na pasku narzędzi u góry. Na poniższym rysunku jest on zaznaczony na różowo).

Górny pasek narzędzi Android Studio

  1. Utworzymy docelowe wirtualne urządzenie z Androidem, aby móc testować aplikację bez urządzenia fizycznego. Więcej informacji znajdziesz w artykule Zarządzanie AVD. Po wybraniu nowego urządzenia wirtualnego możesz kliknąć je dwukrotnie, aby je uruchomić.

Zarządzanie AVD

Urządzenie wirtualne

  1. Na głównym pasku narzędzi Android Studio wybierz urządzenie z Androidem jako cel w menu i upewnij się, że wybrano plik main.dart. Następnie naciśnij przycisk Uruchom (zielony trójkąt).

U dołu środowiska IDE zobaczysz logi w konsoli. Zauważysz, że instaluje Androida i aplikację startową Flutter. Zajmie to minutę. Gdy urządzenie wirtualne będzie gotowe, wprowadzanie zmian będzie bardzo szybkie. Po zakończeniu otworzy się początkowa aplikacja Flutter.

Aplikacja Boilerplate

  1. Włączmy mikrofon w aplikacji chatbota. Kliknij przycisk opcji urządzenia wirtualnego, aby otworzyć opcje. Na karcie Mikrofon włącz wszystkie 3 przełączniki.

Opcje AVD

  1. Wypróbujmy szybkie przeładowanie, aby pokazać, jak szybko można wprowadzać zmiany.

W pliku lib/main.dart zmień tytuł MyHomePage w klasie MyApp na: Flutter Dialogflow Agent. Zmień primarySwatch na Colors.orange.

Pierwszy kod

Zapisz plik lub kliknij ikonę błyskawicy na pasku narzędzi Android Studio. Zmiana powinna być widoczna bezpośrednio na urządzeniu wirtualnym.

4. Flutter: tworzenie interfejsu czatu z obsługą STT

Tworzenie interfejsu czatu

  1. Utwórz nowy plik widżetu Fluttera w folderze lib. (kliknij prawym przyciskiem myszy folder lib, Nowy > Widżet Fluttera > Widżet z zachowywaniem stanu), nazwij ten plik: chat.dart

Wklej do tego pliku ten kod. Ten plik Dart tworzy interfejs czatu. Dialogflow jeszcze nie działa. To tylko układ wszystkich komponentów i integracja komponentu mikrofonu, aby umożliwić przesyłanie strumieniowe. Komentarze w pliku wskażą miejsca, w których później zintegrujemy 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),
      ),
    );
  }
}

W pliku chat.dart wyszukaj Widget build. Tworzy on interfejs czatbota, który zawiera:

  • ListView, która zawiera wszystkie dymki czatu użytkownika i czatbota. Korzysta z klasy ChatMessage, która tworzy wiadomości na czacie z awatarem i tekstem.
  • TextField do wpisywania zapytań tekstowych
  • IconButton z ikoną wysyłania, służący do wysyłania zapytań tekstowych do Dialogflow
  • IconButton z mikrofonem do wysyłania strumieni audio do Dialogflow, który zmienia stan po naciśnięciu.

Łączenie interfejsu czatu

  1. Otwórz plik main.dart i zmień Widget build, aby tworzył instancję tylko interfejsu Chat(). Pozostałe kody demonstracyjne można usunąć.
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. Uruchom aplikację. (Jeśli aplikacja została wcześniej uruchomiona. Zatrzymaj urządzenie wirtualne i ponownie uruchom plik main.dart). Gdy po raz pierwszy uruchomisz aplikację z interfejsem czatu. Pojawi się wyskakujące okienko z prośbą o zezwolenie na dostęp do mikrofonu. Kliknij Podczas używania aplikacji.

Uprawnienia

  1. Wypróbuj obszar tekstowy i przyciski. Gdy wpiszesz zapytanie tekstowe i naciśniesz Enter lub klikniesz przycisk wysyłania, zapytanie tekstowe zostanie zarejestrowane na karcie Uruchom w Android Studio. Gdy dotkniesz przycisku mikrofonu i zatrzymasz nagrywanie, strumień audio pojawi się na karcie Uruchom.

Dziennik strumienia audio

Świetnie, możemy teraz zintegrować aplikację z Dialogflow.

Integracja aplikacji Flutter z Dialogflow_gRPC

  1. Otwórz plik chat.dart i dodaj te instrukcje importu:
import 'package:dialogflow_grpc/dialogflow_grpc.dart';
import 'package:dialogflow_grpc/generated/google/cloud/dialogflow/v2beta1/session.pb.dart';
  1. U góry pliku, tuż pod // TODO DialogflowGrpcV2Beta1 class instance, dodaj ten wiersz, aby przechowywać instancję klasy Dialogflow:
DialogflowGrpcV2Beta1 dialogflow;
  1. Wyszukaj metodę initPlugin() i dodaj ten kod bezpośrednio pod komentarzem TODO:
    // Get a Service account
    final serviceAccount = ServiceAccount.fromString(
        '${(await rootBundle.loadString('assets/credentials.json'))}');
    // Create a DialogflowGrpc Instance
    dialogflow = DialogflowGrpcV2Beta1.viaServiceAccount(serviceAccount);

Spowoduje to utworzenie instancji Dialogflow autoryzowanej w Twoim projekcie Google Cloud za pomocą konta usługi. (Upewnij się, że plik credentials.json znajduje się w folderze assets).

Powtarzamy, że w przypadku wersji demonstracyjnej pokazującej, jak korzystać z Dialogflow gRPC, jest to dopuszczalne, ale w przypadku aplikacji produkcyjnych nie należy przechowywać pliku credentials.json w folderze zasobów, ponieważ nie jest to bezpieczne.

Wykonywanie wywołania detectIntent

  1. Teraz znajdź metodę handleSubmitted() – tutaj zaczyna się magia. Bezpośrednio pod komentarzem TODO dodaj ten kod.Spowoduje on dodanie wpisanej przez użytkownika wiadomości do widoku ListView:
ChatMessage message = ChatMessage(
 text: text,
 name: "You",
 type: true,
);

setState(() {
 _messages.insert(0, message);
});
  1. Teraz, tuż pod poprzednim kodem, wywołamy funkcję detectIntent, przekazując tekst z danych wejściowych i kod języka. – Wynik (w data.queryResult.fulfillment) zostanie wydrukowany w widoku listy:
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. Uruchom urządzenie wirtualne i przetestuj wywołanie wykrywania intencji. Typ: hi. Powinna powitać Cię domyślną wiadomością powitalną. Gdy wpiszesz coś innego, zwróci domyślny tekst zastępczy.

Wykonywanie wywołania streamingDetectIntent

  1. Teraz znajdź metodę handleStream(). To tutaj zaczyna się magia strumieniowania dźwięku. Najpierw tuż pod pierwszym komentarzem TODO utwórz obiekt audio InputConfigV2beta1 z listą biasList, aby dostosować model głosu. Ponieważ korzystamy z telefonu (urządzenia wirtualnego), wartość sampleHertz wyniesie 16000, a kodowanie będzie liniowe 16. Zależy to od sprzętu komputera lub używanego mikrofonu. W przypadku mikrofonu wewnętrznego MacBooka wartość 16000 była odpowiednia. (Zobacz informacje o pakiecie 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. Następnie wywołamy metodę streamingDetectIntent na obiekcie dialogflow, który zawiera naszą sesję Dialogflow:
final responseStream = dialogflow.streamingDetectIntent(config, _audioStream);
  1. Za pomocą responseStream możemy wreszcie nasłuchiwać przychodzącego transkryptu, wykrytego zapytania użytkownika i wykrytej odpowiedzi na pasujący zamiar. Na ekranie zostanie wyświetlony ten znak: ChatMessage
// 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');
});

To wszystko. Uruchom aplikację i przetestuj ją na urządzeniu wirtualnym. Naciśnij przycisk mikrofonu i powiedz „Hello”.

Spowoduje to wywołanie domyślnej intencji powitalnej Dialogflow. Wyniki zostaną wyświetlone na ekranie. Teraz, gdy Flutter świetnie współpracuje z integracją Dialogflow, możemy zacząć pracować nad rozmową z chatbotem.

5. Dialogflow: modelowanie agenta Dialogflow

Dialogflow Essentials to pakiet narzędzi do tworzenia konwersacyjnych interfejsów użytkownika. Dlatego czatboty, boty głosowe, bramki telefoniczne. Wszystkie te elementy możesz tworzyć za pomocą tego samego narzędzia, a nawet obsługiwać wiele kanałów w ponad 20 różnych językach. Projektanci UX Dialogflow (modelarze agentów, lingwiści) lub programiści tworzą intencje, określając frazy treningowe, aby wytrenować bazowy model uczenia maszynowego.

Intencja określa zamiar użytkownika. Dla każdego agenta Dialogflow ES możesz zdefiniować wiele intencji, które razem mogą obsługiwać całą rozmowę. Każdy zamiar może zawierać parametry i odpowiedzi.

Dopasowywanie intencji jest też nazywane klasyfikacją intencji lub dopasowywaniem intencji. Jest to główne pojęcie w Dialogflow ES. Gdy intencja zostanie dopasowana, może zwrócić odpowiedź, zebrać parametry (ekstrakcja jednostek) lub wywołać kod webhooka (realizacja), np. aby pobrać dane z bazy danych.

Gdy użytkownik napisze lub powie coś w chatbotcie (tzw. wyrażenie lub wypowiedź użytkownika), Dialogflow ES dopasuje to wyrażenie do najlepszej intencji agenta Dialogflow na podstawie fraz treningowych. Model uczenia maszynowego Dialogflow ES w tle został wytrenowany na podstawie tych fraz treningowych.

Dialogflow ES korzysta z koncepcji kontekstu. Podobnie jak człowiek, Dialogflow ES może zapamiętać kontekst w 2 i 3 turze rozmowy. W ten sposób może śledzić poprzednie wypowiedzi użytkownika.

Więcej informacji o intencjach Dialogflow

Modyfikowanie domyślnej intencji powitalnej

Gdy utworzysz nowego agenta Dialogflow, automatycznie utworzą się 2 domyślne intencje. Domyślna intencja powitalna to pierwszy przepływ, który pojawia się po rozpoczęciu rozmowy z agentem. Domyślny zamiar rezerwowy to ścieżka, którą otrzymasz, gdy agent nie będzie w stanie Cię zrozumieć lub dopasować zamiaru do tego, co właśnie powiedziałeś(-aś).

Oto wiadomość powitalna dla domyślnej intencji powitalnej:

Użytkownik

Agent

Cześć

„Cześć, jestem botem z sekcji najczęstszych pytań dotyczących Dialogflow. Mogę odpowiadać na pytania dotyczące tej usługi”.

„O co chcesz zapytać?”

  1. Kliknij Intencje > Domyślna intencja powitalna.
  2. Przewiń w dół do sekcji Odpowiedzi.
  3. Usuń wszystkie odpowiedzi tekstowe.
  4. Na karcie domyślnej utwórz te 2 odpowiedzi:
  • Cześć, jestem botem z odpowiedziami na najczęstsze pytania dotyczące Dialogflow. Mogę odpowiadać na pytania dotyczące tej usługi. Czego chcesz się dowiedzieć?
  • Cześć, jestem botem z najczęstszymi pytaniami dotyczącymi Dialogflow. Masz pytania o Dialogflow? Jak mogę pomóc?

Konfiguracja powinna być podobna do tej na zrzucie ekranu.

Edytowanie domyślnej intencji powitalnej

  1. Kliknij Zapisz.
  2. Przetestujmy ten zamiar. Najpierw możemy przetestować go w symulatorze Dialogflow.Wpisz: Hello. Powinien zwrócić jeden z tych komunikatów:
  • Cześć, jestem botem z odpowiedziami na najczęstsze pytania dotyczące Dialogflow. Mogę odpowiadać na pytania dotyczące tej usługi. Czego chcesz się dowiedzieć?
  • Cześć, jestem botem z najczęstszymi pytaniami dotyczącymi Dialogflow. Masz pytania o Dialogflow? Jak mogę pomóc?

Modyfikowanie domyślnej intencji rezerwowej

  1. Kliknij Intencje > Domyślna intencja rezerwowa.
  2. Przewiń w dół do sekcji Odpowiedzi.
  3. Usuń wszystkie odpowiedzi tekstowe.
  4. Na karcie domyślnej utwórz tę odpowiedź:
  • Niestety nie znam odpowiedzi na to pytanie. Czy odwiedziłeś(-aś) naszą stronę internetową http://www.dialogflow.com?
  1. Kliknij Zapisz.

Łączenie z internetową bazą wiedzy

Agregatory wiedzy uzupełniają zdefiniowane intencje. Analizują dokumenty z wiedzą, aby znaleźć automatyczne odpowiedzi. (np. odpowiedzi na najczęstsze pytania lub artykuły z plików CSV, stron internetowych lub nawet plików PDF). Aby je skonfigurować, musisz zdefiniować co najmniej 1 bazę wiedzy, czyli zbiór dokumentów zawierających informacje.

Więcej informacji o oprogramowaniu sprzęgającym wiedzę

Spróbujmy.

  1. W menu wybierz Wiedza (beta).

Baza wiedzy

  1. Kliknij niebieski przycisk po prawej stronie: Utwórz bazę wiedzy.
  2. Wpisz nazwę bazy wiedzy: Dialogflow FAQ i kliknij Zapisz.
  3. Kliknij link Utwórz pierwszy.

Baza wiedzy – pierwszy

  1. Otworzy się okno.

Użyj tej konfiguracji:

Nazwa dokumentu: DialogflowFAQ Typ wiedzy: FAQ Typ MIME: text/html

  1. Adres URL, z którego wczytujemy dane, to:

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

  1. Kliknij Utwórz.

Utworzono bazę wiedzy:

Utworzono bazę wiedzy

  1. Przewiń w dół do sekcji Odpowiedzi i kliknij Dodaj odpowiedź.

Utwórz te odpowiedzi i kliknij Zapisz.

$Knowledge.Answer[1]
  1. Kliknij Wyświetl szczegóły.

Wyświetl szczegóły

  1. Wybierz Włącz automatyczne ponowne ładowanie, aby automatycznie pobierać zmiany, gdy strona z najczęstszymi pytaniami zostanie zaktualizowana, a następnie kliknij Zapisz.

Wyświetlą się wszystkie pytania i odpowiedzi, które zostały wdrożone w Dialogflow.To proste!

Pamiętaj, że możesz też wskazać stronę internetową HTML z najczęstszymi pytaniami, aby zaimportować je do agenta. Możesz nawet przesłać plik PDF z blokiem tekstu, a Dialogflow sam zaproponuje pytania.

Obecnie najczęstsze pytania i odpowiedzi należy traktować jako „dodatki” do agentów, obok przepływów intencji. Odpowiedzi na najczęstsze pytania w bazie wiedzy nie mogą trenować modelu. Zadawanie pytań w zupełnie inny sposób może nie przynieść dopasowania, ponieważ nie wykorzystuje rozumienia języka naturalnego (modeli uczenia maszynowego). Dlatego czasami warto przekształcić najczęstsze pytania w intencje.

  1. Przetestuj pytania w symulatorze po prawej stronie.
  2. Gdy wszystko będzie działać, wróć do aplikacji Flutter i przetestuj bota do czatu i bota głosowego z nowymi treściami. zadawać pytania, które zostały wczytane do Dialogflow;

Wynik

6. Gratulacje

Gratulujemy utworzenia pierwszej aplikacji Flutter z integracją z chatbotem Dialogflow.

Omówione zagadnienia

  • Tworzenie czatbota za pomocą Dialogflow Essentials
  • Jak zintegrować Dialogflow z aplikacją Flutter
  • Wykrywanie intencji tekstowych za pomocą Dialogflow
  • Jak przesyłać strumieniowo głos przez mikrofon do Dialogflow
  • Jak korzystać z konektora bazy wiedzy

Co dalej?

Podobało Ci się to laboratorium? Zapoznaj się z tymi świetnymi modułami dotyczącymi Dialogflow.

Chcesz wiedzieć, jak powstał pakiet gRPC Dialogflow dla Dart/Flutter?