Membuat Bot Suara untuk Android dengan Dialogflow Essentials & Kepakan

1. Sebelum memulai

Dalam codelab ini, Anda akan mempelajari cara mengintegrasikan bot teks dan suara Dialogflow Essentials (ES) sederhana ke dalam aplikasi Flutter. Dialogflow ES adalah suite pengembangan untuk membangun UI percakapan. Jadi, chatbot, bot suara, gateway telepon. Anda semua dapat membangunnya dengan alat yang sama, dan Anda bahkan dapat mendukung beberapa saluran dalam lebih dari 20 bahasa yang berbeda. Dialogflow terintegrasi dengan banyak platform percakapan populer seperti Asisten Google, Slack, dan Facebook Messenger. Jika Anda ingin membuat agen untuk salah satu platform ini, Anda harus menggunakan salah satu dari banyak opsi integrasi. Namun, untuk membuat chatbot bagi perangkat seluler, Anda harus membuat integrasi kustom. Anda akan membuat intent dengan menentukan frasa pelatihan untuk melatih model machine learning yang mendasarinya.

Lab ini diurutkan untuk mencerminkan pengalaman developer cloud pada umumnya:

  1. Penyiapan Lingkungan
  • Dialogflow: Membuat agen Dialogflow ES baru
  • Dialogflow: Mengonfigurasi Dialogflow
  • Google Cloud: Membuat akun layanan
  1. Flutter: Membangun aplikasi chat
  • Membuat project Flutter
  • Mengonfigurasi setelan dan izin
  • Menambahkan dependensi
  • Menautkan ke akun layanan.
  • Menjalankan aplikasi di perangkat virtual atau perangkat fisik
  1. Flutter: Membangun antarmuka chat dengan dukungan Speech to Text
  • Membuat antarmuka chat
  • Menautkan antarmuka chat
  • Mengintegrasikan paket gRPC Dialogflow ke dalam aplikasi
  1. Dialogflow: Memodelkan agen Dialogflow
  • Mengonfigurasi maksud sambutan & penggantian
  • Memanfaatkan pusat informasi FAQ

Prasyarat

  • Pengalaman Dart/Flutter dasar
  • Pengalaman dasar Google Cloud Platform
  • Pengalaman dasar dengan Dialogflow ES

Yang akan Anda build

Codelab ini akan menunjukkan cara membuat bot FAQ seluler, yang dapat menjawab sebagian besar pertanyaan umum tentang alat Dialogflow. Pengguna akhir dapat berinteraksi dengan antarmuka teks atau melakukan streaming suara melalui mikrofon bawaan perangkat seluler untuk mendapatkan jawaban.

Yang akan Anda pelajari

  • Cara membuat chatbot dengan Dialogflow Essentials
  • Cara mengintegrasikan Dialogflow ke dalam aplikasi Flutter dengan paket gRPC Dialogflow
  • Cara mendeteksi maksud teks dengan Dialogflow
  • Cara melakukan streaming suara melalui mikrofon ke Dialogflow
  • Cara menggunakan konektor basis pengetahuan untuk mengimpor FAQ publik
  • Menguji chatbot melalui antarmuka teks dan suara di perangkat virtual atau fisik

Yang Anda butuhkan

  • Anda memerlukan alamat Gmail / Identitas Google untuk membuat agen Dialogflow.
  • Anda memerlukan akses ke Google Cloud Platform untuk mendownload akun layanan
  • Lingkungan pengembangan Flutter

Menyiapkan lingkungan pengembangan Flutter

  1. Pilih sistem operasi tempat Anda menginstal Flutter.
  1. Anda dapat mem-build aplikasi dengan Flutter menggunakan editor teks mana pun dan juga alat command line kami. Namun, workshop ini akan menggunakan Android Studio. Plugin Flutter dan Dart untuk Android Studio menyediakan penyelesaian kode, penyorotan sintaksis, bantuan pengeditan widget, dukungan jalankan & debug, dan lain-lain. Ikuti langkah-langkah di https://flutter.dev/docs/get-started/editor

2. Penyiapan Lingkungan

Dialogflow: Membuat agen Dialogflow ES baru

  1. Buka
  2. Di panel kiri, tepat di bawah logo, pilih "Create New Agent" di menu dropdown. (Catatan: Jangan klik dropdown yang bertuliskan "Global", kita akan memerlukan instance Dialogflow yang bersifat Global untuk menggunakan basis pengetahuan FAQ.)
  3. Tentukan nama agen yourname-dialogflow (gunakan nama Anda sendiri)
  4. Sebagai bahasa default, pilih Inggris - en.
  5. Sebagai zona waktu default, pilih zona waktu yang paling dekat dengan Anda.
  6. Jangan pilih Mega Agent. (Dengan fitur ini, Anda dapat membuat agen menyeluruh, yang dapat mengatur antar-agen "sub". Kita tidak membutuhkannya sekarang.)
  7. Klik Buat.

Layar buat project baru

Konfigurasi Dialogflow

  1. Klik ikon roda gigi di menu kiri, di samping nama project Anda.

Membuat dropdown project baru

  1. Masukkan deskripsi agen berikut: Dialogflow FAQ Chatbot
  2. Aktifkan fitur beta, lalu alihkan tombolnya.

Dialogflow Essentials V2Beta1

  1. Klik tab Ucapan, dan pastikan kotak Adaptasi Ucapan Otomatis aktif.
  2. Atau, Anda juga dapat membalikkan tombol pertama. Tindakan ini akan meningkatkan kualitas Model Ucapan, tetapi hanya tersedia saat Anda mengupgrade uji coba Dialogflow.
  3. Klik Simpan

Google Cloud: Mendapatkan akun layanan

Setelah membuat agen di Dialogflow, project Google Cloud harus dibuat di konsol Google Cloud.

  1. Buka Konsol Google Cloud:
  2. Pastikan Anda login dengan Akun Google yang sama seperti di Dialogflow dan pilih project: yourname-dialogflow di panel biru atas.
  3. Selanjutnya, telusuri Dialogflow API di toolbar atas dan klik hasil Dialogflow API di dropdown.

Aktifkan Dialogflow API

  1. Klik tombol Kelola berwarna biru, lalu klik Kredensial di menu kiri. (Jika Dialogflow belum diaktifkan, klik Enable terlebih dahulu)

Konsol GCP kredensial

  1. Klik Buat kredensial (di bagian atas layar) dan pilih Akun layanan.

Buat kredensial

  1. Tentukan nama akun layanan: flutter_dialogflow, ID, dan deskripsi, lalu klik Buat.

Membuat akun layanan

  1. Pada langkah 2, Anda harus memilih peran: Dialogflow API Admin, klik Lanjutkan, dan Selesai.
  2. Klik akun layanan flutter_dialogflow, klik tab Keys, lalu klik Add Key > Create new key

Buat kunci

  1. Buat kunci JSON. Ubah namanya menjadi credentials.json dan simpan di lokasi yang aman di hard drive Anda. Kita akan menggunakannya nanti.

Kunci JSON

Sempurna, semua alat yang kita butuhkan telah disiapkan dengan benar. Sekarang kita dapat mulai mengintegrasikan Dialogflow di aplikasi kita.

3. Flutter: Membangun Aplikasi Chat

Buat Aplikasi Boilerplate

  1. Buka Android Studio dan pilih Start a new Flutter project.
  2. Pilih Flutter Application sebagai jenis project. Setelah itu, klik Berikutnya.
  3. Verifikasi bahwa jalur Flutter SDK menentukan lokasi SDK (pilih Install SDK... jika kolom teks kosong).
  4. Masukkan nama project (misalnya, flutter_dialogflow_agent). Kemudian, klik Next.
  5. Ubah nama paket, lalu klik Selesai.

Membuat aplikasi Flutter baru

Tindakan ini akan membuat aplikasi contoh dengan Komponen Material.

Tunggu Android Studio menginstal SDK dan membuat project tersebut.

Setelan & Izin

  1. Library perekam audio sound_stream yang akan kita gunakan memerlukan minSdk minimal 21. Jadi, mari kita ubah ini di android/app/build.gradle dalam blok defaultConfig. (Perhatikan, ada 2 file build.gradle di folder android, tetapi yang ada di folder app adalah yang benar.)
defaultConfig {
   applicationId "com.myname.flutter_dialogflow_agent"
   minSdkVersion 21
   targetSdkVersion 30
   versionCode flutterVersionCode.toInteger()
   versionName flutterVersionName
}
  1. Untuk memberikan izin ke mikrofon dan juga mengizinkan aplikasi menghubungi agen Dialogflow yang berjalan di cloud, kita harus menambahkan izin INTERNET dan RECORD_AUDIO ke file app/src/main/AndroidManifest.xml. Ada beberapa file AndroidManifest.xml di project Flutter Anda, tetapi Anda akan memerlukan file yang ada di folder utama. Anda dapat menambahkan baris langsung di dalam tag manifes.
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />

Menambahkan dependensi

Kita akan menggunakan paket sound_stream, rxdart, dan dialogflow_grpc.

  1. Menambahkan dependensi 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. Menambahkan dependensi 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. Menambahkan dependensi 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!

Memuat informasi akun layanan dan project Google Cloud

  1. Di project Anda, buat direktori dan beri nama: assets.
  2. Pindahkan file credentials.json yang Anda download dari konsol Google Cloud ke folder assets.
  3. Buka pubspec.yaml dan tambahkan akun layanan ke blok flutter.
flutter:
  uses-material-design: true
  assets:
    - assets/credentials.json

Menjalankan aplikasi di perangkat fisik

Jika memiliki perangkat Android, Anda dapat mencolokkan ponsel melalui kabel USB dan melakukan proses debug di perangkat. Ikuti langkah-langkah ini untuk menyiapkannya melalui layar Opsi Developer di perangkat Android Anda.

Menjalankan aplikasi di perangkat virtual

Jika Anda ingin menjalankan aplikasi di perangkat virtual, gunakan langkah-langkah berikut:

  1. Klik Tools> AVD Manager. (Atau pilih AVD Manager dari toolbar atas, pada gambar di bawah, AVD Manager ditandai dengan warna merah muda)

Toolbar atas Android Studio

  1. Kita akan membuat perangkat virtual Android target, sehingga kita dapat menguji aplikasi tanpa perangkat fisik. Untuk mengetahui detailnya, lihat Mengelola AVD. Setelah memilih perangkat virtual baru, Anda dapat mengklik dua kali untuk memulainya.

Mengelola AVD

Perangkat Virtual

  1. Di toolbar utama Android Studio, pilih perangkat Android sebagai target, melalui dropdown dan pastikan main.dart dipilih. Kemudian, tekan tombol Jalankan (segitiga hijau).

Di bagian bawah IDE, Anda akan melihat log di konsol. Anda akan melihat bahwa Android dan aplikasi Flutter starter Anda sedang diinstal. Proses ini akan memakan waktu satu menit. Setelah perangkat virtual siap, perubahan akan dilakukan dengan sangat cepat. Setelah selesai, aplikasi Flutter awal akan terbuka.

Aplikasi Boilerplate

  1. Aktifkan mikrofon untuk aplikasi chatbot kita. Klik tombol options pada perangkat virtual untuk membuka opsi. Di tab Mikrofon, aktifkan ketiga tombol.

Opsi AVD

  1. Mari kita coba Hot Reload untuk mendemonstrasikan seberapa cepat perubahan dapat dilakukan.

Di lib/main.dart, ubah judul MyHomePage di class MyApp menjadi: Flutter Dialogflow Agent. Ubah primarySwatch menjadi Colors.orange.

Kode pertama

Simpan file, atau klik ikon petir di Toolbar Android Studio. Anda akan melihat perubahan yang dibuat langsung di perangkat virtual.

4. Flutter: Membangun antarmuka Chat dengan dukungan STT

Membuat antarmuka chat

  1. Buat file widget Flutter baru di folder lib. (klik kanan folder lib, New > Flutter Widget > Stateful widget), panggil file ini: chat.dart

Tempelkan kode berikut ke dalam file ini. File dart ini membuat antarmuka chat. Dialogflow belum berfungsi, hanya tata letak semua komponen, dan integrasi komponen mikrofon untuk mengizinkan streaming. Komentar dalam file akan menunjukkan tempat kita akan mengintegrasikan Dialogflow nanti.

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

Telusuri Widget build di file chat.dart. Widget ini membangun antarmuka chatbot, yang berisi:

  • ListView yang berisi semua balon chat dari pengguna dan chatbot. Kode ini menggunakan class ChatMessage, yang membuat pesan chat dengan avatar dan teks.
  • TextField untuk memasukkan kueri teks
  • IconButton dengan ikon kirim, untuk mengirim kueri teks ke Dialogflow
  • IconButton dengan mikrofon untuk mengirimkan aliran audio ke Dialogflow, yang mengubah status setelah ditekan.

Menautkan antarmuka chat

  1. Buka main.dart dan ubah Widget build, sehingga hanya membuat instance antarmuka Chat(). Semua kode demo lainnya dapat dihapus.
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. Jalankan aplikasi. (Jika aplikasi sudah dimulai sebelumnya. Hentikan perangkat virtual, lalu jalankan kembali main.dart). Saat Anda menjalankan aplikasi dengan antarmuka chat untuk pertama kalinya. Anda akan mendapatkan pop-up izin, yang menanyakan apakah Anda ingin mengizinkan mikrofon. Klik: Saat aplikasi digunakan.

Izin

  1. Bereksperimenlah dengan area teks dan tombol. Saat Anda mengetik kueri teks dan menekan enter, atau mengetuk tombol kirim, Anda akan melihat kueri teks yang dicatat di tab Run Android Studio. Saat Anda mengetuk tombol mikrofon dan menghentikannya, Anda akan melihat aliran audio yang dicatat di tab Run.

Log Streaming Audio

Bagus, sekarang kita siap mengintegrasikan aplikasi dengan Dialogflow.

Mengintegrasikan Aplikasi Flutter Anda dengan Dialogflow_gRPC

  1. Buka chat.dart dan tambahkan impor berikut:
import 'package:dialogflow_grpc/dialogflow_grpc.dart';
import 'package:dialogflow_grpc/generated/google/cloud/dialogflow/v2beta1/session.pb.dart';
  1. Di bagian atas file, tepat di bawah // TODO DialogflowGrpcV2Beta1 class instance, tambahkan baris berikut untuk menyimpan instance class Dialogflow:
DialogflowGrpcV2Beta1 dialogflow;
  1. Telusuri metode initPlugin(), lalu tambahkan kode berikut, tepat di bawah komentar TODO:
    // Get a Service account
    final serviceAccount = ServiceAccount.fromString(
        '${(await rootBundle.loadString('assets/credentials.json'))}');
    // Create a DialogflowGrpc Instance
    dialogflow = DialogflowGrpcV2Beta1.viaServiceAccount(serviceAccount);

Tindakan ini akan membuat instance Dialogflow yang diberi otorisasi ke project Google Cloud Anda dengan akun layanan. (Pastikan Anda memiliki credentials.json di folder assets.)

Sekali lagi, untuk tujuan demo tentang cara menggunakan gRPC Dialogflow, hal ini tidak masalah, tetapi untuk aplikasi produksi, Anda tidak boleh menyimpan file credentials.json di folder aset, karena hal ini tidak dianggap aman.

Melakukan panggilan detectIntent

  1. Sekarang temukan metode handleSubmitted(), di sinilah keajaiban terjadi. Tepat di bawah komentar TODO, tambahkan kode berikut.Kode ini akan menambahkan pesan yang diketik pengguna ke ListView:
ChatMessage message = ChatMessage(
 text: text,
 name: "You",
 type: true,
);

setState(() {
 _messages.insert(0, message);
});
  1. Sekarang, tepat di bawah kode sebelumnya, kita akan melakukan panggilan detectIntent, kita akan meneruskan teks dari input, dan languageCode. - Hasil (dalam data.queryResult.fulfillment) akan dicetak di 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);
  });
}
  1. Mulai perangkat virtual, dan uji panggilan deteksi maksud. Jenis: hi. Anda akan disambut dengan pesan selamat datang default. Saat Anda mengetik sesuatu yang lain, respons fallback default akan ditampilkan.

Melakukan panggilan streamingDetectIntent

  1. Sekarang temukan metode handleStream(), di sinilah keajaiban streaming audio terjadi. Pertama, tepat di bawah TODO pertama, buat InputConfigV2beta1 audio dengan biasList untuk memengaruhi model suara. Karena kita menggunakan ponsel (perangkat virtual), sampleHertz akan menjadi 16000 dan encoding akan menjadi Linear 16. Hal ini bergantung pada hardware komputer / mikrofon yang Anda gunakan. Untuk mikrofon internal Macbook saya, 16000 sudah cukup. (Lihat info 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. Selanjutnya, kita akan memanggil metode streamingDetectIntent pada objek dialogflow, yang menyimpan sesi Dialogflow kita:
final responseStream = dialogflow.streamingDetectIntent(config, _audioStream);
  1. Dengan responseStream, kita akhirnya dapat memproses transkrip yang masuk, kueri pengguna yang terdeteksi, dan respons intent yang cocok yang terdeteksi. Kita akan mencetak ini dalam ChatMessage di layar:
// 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');
});

Selesai, mulai aplikasi Anda, dan uji di perangkat virtual, tekan tombol mikrofon, lalu Ucapkan: "Halo".

Tindakan ini akan memicu intent sambutan default Dialogflow. Hasilnya akan dicetak di layar. Sekarang setelah Flutter berfungsi dengan baik dengan integrasi Dialogflow, kita dapat mulai mengerjakan percakapan chatbot.

5. Dialogflow: Memodelkan agen Dialogflow

Dialogflow Essentials adalah rangkaian pengembangan untuk membangun UI percakapan. Jadi, chatbot, bot suara, gateway telepon. Anda semua dapat membangunnya dengan alat yang sama, dan Anda bahkan dapat mendukung beberapa saluran dalam lebih dari 20 bahasa yang berbeda. Desainer UX (pemodel agen, ahli bahasa) atau developer Dialogflow membuat intent dengan menentukan frasa pelatihan untuk melatih model machine learning yang mendasarinya.

Maksud mengategorikan niat pengguna. Untuk setiap agen Dialogflow ES, Anda dapat menentukan banyak intent, yang jika digabungkan dapat menangani percakapan lengkap. Setiap intent dapat berisi parameter dan respons.

Mencocokkan maksud juga dikenal sebagai klasifikasi maksud atau pencocokan maksud. Ini adalah konsep utama di Dialogflow ES. Setelah intent dicocokkan, intent dapat menampilkan respons, mengumpulkan parameter (ekstraksi entity), atau memicu kode webhook (pemenuhan), misalnya, untuk mengambil data dari database.

Saat pengguna akhir menulis atau mengatakan sesuatu di chatbot, yang disebut sebagai ekspresi atau ucapan pengguna, Dialogflow ES akan mencocokkan ekspresi tersebut dengan intent terbaik agen Dialogflow Anda, berdasarkan frasa pelatihan. Model Machine Learning Dialogflow ES di balik layar dilatih dengan frasa pelatihan tersebut.

Dialogflow ES bekerja dengan konsep yang disebut konteks. Sama seperti manusia, Dialogflow ES dapat mengingat konteks pada giliran ke-2 dan ke-3. Dengan cara ini, LLM dapat melacak ucapan pengguna sebelumnya.

Berikut informasi selengkapnya tentang Maksud Dialogflow.

Mengubah Maksud Selamat Datang Default

Saat Anda membuat agen Dialogflow baru, dua intent default akan dibuat secara otomatis. Default Welcome Intent adalah alur pertama yang Anda dapatkan saat memulai percakapan dengan agen. Default Fallback Intent adalah alur yang akan Anda dapatkan setelah agen tidak dapat memahami Anda atau tidak dapat mencocokkan intent dengan apa yang baru saja Anda katakan.

Berikut pesan selamat datang untuk Default Welcome Intent:

Pengguna

Agent

Pengguna yang terhormat,

"Halo, saya bot FAQ Dialogflow, saya dapat menjawab pertanyaan tentang Dialogflow."

"Apa yang ingin Anda ketahui?"

  1. Klik Intents > Default Welcome Intent
  2. Scroll ke bawah ke Respons.
  3. Hapus semua Respons Teks.
  4. Di tab default, buat 2 respons berikut:
  • Hai, saya bot FAQ Dialogflow, saya dapat menjawab pertanyaan tentang Dialogflow. Apa yang ingin Anda ketahui?
  • Halo, saya bot FAQ Dialogflow. Apakah ada pertanyaan tentang Dialogflow? Ada yang bisa dibantu?

Konfigurasinya akan mirip dengan screenshot ini.

Mengedit Maksud Selamat Datang Default

  1. Klik Simpan
  2. Mari kita uji maksud ini. Pertama, kita dapat mengujinya di Simulator Dialogflow.Ketik: Halo. API ini akan menampilkan salah satu pesan berikut:
  • Hai, saya bot FAQ Dialogflow, saya dapat menjawab pertanyaan tentang Dialogflow. Apa yang ingin Anda ketahui?
  • Halo, saya bot FAQ Dialogflow. Apakah ada pertanyaan tentang Dialogflow? Ada yang bisa dibantu?

Mengubah Maksud Pengganti Default

  1. Klik Intents > Default Fallback Intent
  2. Scroll ke bawah ke Respons.
  3. Hapus semua Respons Teks.
  4. Di tab default, buat respons berikut:
  • Sayangnya, saya tidak tahu jawaban atas pertanyaan ini. Sudahkah Anda memeriksa situs kami? http://www.dialogflow.com?
  1. Klik Simpan

Menghubungkan ke Pusat Informasi online

Konektor jawaban melengkapi maksud yang ditentukan. Mereka mengurai dokumen pengetahuan untuk menemukan respons otomatis. (misalnya, FAQ atau artikel dari file CSV, situs online,atau bahkan file PDF!) Untuk mengonfigurasinya, Anda menentukan satu atau beberapa pusat informasi, yang merupakan kumpulan dokumen pengetahuan.

Baca selengkapnya tentang Konektor Pengetahuan.

Mari kita coba.

  1. Pilih Pengetahuan (beta) di menu.

Pusat Informasi

  1. Klik tombol biru di sebelah kanan: Buat Pusat Informasi
  2. Ketik sebagai nama Pusat Informasi; FAQ Dialogflow, lalu klik simpan.
  3. Klik link Buat yang pertama

Basis Pengetahuan pertama

  1. Tindakan ini akan membuka jendela.

Gunakan konfigurasi berikut:

Nama Dokumen: DialogflowFAQ Jenis Pengetahuan: FAQ Jenis MIME: text/html

  1. URL tempat kita memuat data adalah:

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

  1. Klik Buat

Pusat informasi telah dibuat:

Basis Pengetahuan dibuat

  1. Scroll ke bawah ke bagian Respons, lalu klik Tambahkan Respons

Buat jawaban berikut, lalu klik simpan.

$Knowledge.Answer[1]
  1. Klik Lihat Detail

Lihat Detail

  1. Pilih Aktifkan Pemuatan Ulang Otomatis untuk otomatis mengambil perubahan saat halaman web FAQ diperbarui, lalu klik simpan.

Tindakan ini akan menampilkan semua FAQ yang telah Anda terapkan di Dialogflow.Mudah, bukan?

Ketahui bahwa Anda juga dapat mengarahkan ke situs HTML online dengan FAQ untuk mengimpor FAQ ke agen Anda. Anda bahkan dapat mengupload PDF dengan blok teks, dan Dialogflow akan membuat pertanyaan sendiri.

Sekarang FAQ harus dilihat sebagai 'ekstra' yang ditambahkan ke agen Anda, di samping alur maksud Anda. FAQ Pusat Informasi tidak dapat melatih model. Jadi, mengajukan pertanyaan dengan cara yang sama sekali berbeda, mungkin tidak akan mendapatkan kecocokan karena tidak menggunakan Natural Language Understanding (model Machine Learning). Itulah sebabnya terkadang Anda perlu mengonversi FAQ menjadi maksud.

  1. Uji pertanyaan di simulator di sebelah kanan.
  2. Setelah semuanya berfungsi, kembali ke aplikasi Flutter Anda, dan uji bot chat dan suara Anda dengan konten baru ini. Ajukan pertanyaan yang Anda muat ke Dialogflow.

Hasil

6. Selamat

Selamat, Anda telah berhasil membuat aplikasi Flutter pertama dengan integrasi chatbot Dialogflow. Selamat!

Yang telah kita bahas

  • Cara membuat chatbot dengan Dialogflow Essentials
  • Cara mengintegrasikan Dialogflow ke dalam aplikasi Flutter
  • Cara mendeteksi maksud teks dengan Dialogflow
  • Cara melakukan streaming suara melalui mikrofon ke Dialogflow
  • Cara memanfaatkan konektor pusat informasi

Apa langkah selanjutnya?

Menyukai lab kode ini? Lihat lab Dialogflow yang menarik ini.

Ingin tahu cara saya membuat paket gRPC Dialogflow untuk Dart/Flutter?