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 paket pengembangan untuk membangun UI percakapan. Jadi chatbot, bot suara, gateway ponsel. Anda semua dapat membuatnya dengan alat yang sama, dan bahkan mendukung banyak channel dalam lebih dari 20 bahasa yang berbeda. Dialogflow terintegrasi dengan banyak platform percakapan populer seperti Asisten Google, Slack, dan Facebook Messenger. Jika ingin membangun agen untuk salah satu platform ini, Anda harus menggunakan salah satu dari banyak opsi integrasi. Namun, untuk membuat chatbot di perangkat seluler, Anda harus membuat integrasi kustom. Anda akan membuat intent dengan menentukan frasa pelatihan untuk melatih model machine learning yang mendasarinya.
Lab ini disusun untuk mencerminkan pengalaman developer cloud pada umumnya:
- Penyiapan Lingkungan
- Dialogflow: Membuat agen Dialogflow ES baru
- Dialogflow: Mengonfigurasi Dialogflow
- Google Cloud: Membuat akun layanan
- Flutter: Membuat aplikasi chat
- Membuat project Flutter
- Mengonfigurasi setelan dan izin
- Menambahkan dependensi
- Menautkan ke akun layanan.
- Menjalankan aplikasi pada perangkat virtual atau perangkat fisik
- Flutter: Membangun antarmuka chat dengan dukungan Speech to Text
- Membuat antarmuka chat
- Menautkan antarmuka chat
- Mengintegrasikan paket Dialogflow gRPC ke dalam aplikasi
- Dialogflow: Pemodelan agen Dialogflow
- Konfigurasikan pesan sambutan & intent penggantian
- Memanfaatkan pusat informasi FAQ
Prasyarat
- Pengalaman Dart/Flutter dasar
- Pengalaman Google Cloud Platform dasar
- Pengalaman dasar dengan Dialogflow ES
Yang akan Anda build
Codelab ini akan menunjukkan cara membuat bot FAQ seluler, yang dapat menjawab pertanyaan paling 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 aplikasi Flutter dengan paket Dialogflow gRPC
- Cara mendeteksi intent teks dengan Dialogflow
- Cara melakukan streaming suara melalui mikrofon ke Dialogflow
- Cara memanfaatkan konektor basis pengetahuan untuk mengimpor FAQ publik
- Uji 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 dev Flutter
Menyiapkan lingkungan pengembangan Flutter Anda
- Pilih sistem operasi tempat Anda menginstal Flutter.
- Pengguna macOS: https://flutter.dev/docs/get-started/install/macos
- Windows: https://flutter.dev/docs/get-started/install/windows
- Linux: https://flutter.dev/docs/get-started/install/linux
- ChromeOS: https://flutter.dev/docs/get-started/install/chromeos
- Anda dapat membangun aplikasi dengan Flutter menggunakan editor teks apa pun yang dikombinasikan dengan 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, menjalankan & dukungan debug, dan lainnya. Ikuti langkah-langkah di https://flutter.dev/docs/get-started/editor
2. Penyiapan Lingkungan
Dialogflow: Membuat agen Dialogflow ES baru
- Buka
- Di panel kiri, tepat di bawah logo, pilih "Create New Agent" pada menu dropdown. (Perhatikan, jangan klik menu dropdown yang bertuliskan "Global". Kita memerlukan instance Dialogflow yang bersifat Global untuk memanfaatkan basis informasi FAQ.)
- Tentukan nama agen
yourname-dialogflow(gunakan nama Anda sendiri) - Sebagai bahasa default, pilih Bahasa Inggris - en.
- Sebagai zona waktu default, pilih zona waktu yang paling dekat dengan lokasi Anda.
- Jangan pilih Agen Besar. (Dengan fitur ini, Anda dapat membuat agen menyeluruh, yang dapat mengorkestrasi antara agen "sub". Kami tidak memerlukannya sekarang.)
- Klik Buat.
Mengonfigurasi Dialogflow
- Klik ikon roda gigi, di menu kiri, di samping nama project Anda.
- Masukkan deskripsi agen berikut: Dialogflow FAQ Chatbot
- Aktifkan fitur beta, tekan tombol.
- Klik tab Speech, dan pastikan kotak Adaptasi Ucapan Otomatis aktif.
- Atau, Anda juga dapat menggeser tombol pertama, yang akan meningkatkan kualitas Model Ucapan, tetapi hanya tersedia saat Anda mengupgrade uji coba Dialogflow.
- Klik Simpan
Google Cloud: Dapatkan akun layanan
Setelah membuat agen di Dialogflow, project Google Cloud akan dibuat di Konsol Google Cloud.
- Buka Konsol Google Cloud:
- Pastikan Anda login dengan Akun Google yang sama seperti di Dialogflow, lalu pilih project:
yourname-dialogflowdi panel biru atas. - Selanjutnya, telusuri
Dialogflow APIdi toolbar bagian atas dan klik hasil Dialogflow API di menu dropdown.
- Klik tombol Manage berwarna biru, lalu klik Credentials di panel menu kiri. (Jika Dialogflow belum diaktifkan, tekan Enable terlebih dahulu)
- Klik Create credentials (di bagian atas layar), lalu pilih Service account.
- Tentukan nama akun layanan:
flutter_dialogflow, ID dan deskripsi, lalu klik Buat.
- Di langkah 2, Anda harus memilih peran:
Dialogflow API Admin, klik Lanjutkan, dan Selesai. - Klik pada akun layanan
flutter_dialogflow, klik tab Keys dan tekan Add Key > Buat kunci baru
- Buat kunci JSON. Ganti namanya menjadi
credentials.jsondan simpan di lokasi yang aman pada hard drive Anda. Kita akan menggunakannya nanti.
Sempurna, semua alat yang kita butuhkan sudah disiapkan dengan benar. Sekarang kita dapat mulai dengan mengintegrasikan Dialogflow ke dalam aplikasi.
3. Flutter: Membangun Aplikasi Chat
Membuat Aplikasi Boilerplate
- Buka Android Studio, lalu pilih Start a new Flutter project.
- Pilih Flutter Application sebagai jenis project. Kemudian klik Berikutnya.
- Pastikan jalur Flutter SDK menentukan lokasi SDK (pilih Install SDK... jika kolom teks kosong).
- Masukkan nama project (misalnya,
flutter_dialogflow_agent). Kemudian, klik Next. - Ubah nama paket dan klik Finish.
Tindakan ini akan membuat aplikasi contoh dengan Komponen Material.
Tunggu Android Studio menginstal SDK dan membuat project tersebut.
Setelan & Izin Akses
- Library perekam audio sound_stream yang akan kita gunakan, memerlukan minSdk setidaknya 21. Jadi, mari kita ubah ini di android/app/build.gradle dalam blok defaultConfig. (Catatan, ada 2 file build.gradle di folder android, tetapi yang ada di folder aplikasi adalah yang benar.)
defaultConfig {
applicationId "com.myname.flutter_dialogflow_agent"
minSdkVersion 21
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
- Untuk memberikan izin ke mikrofon dan juga memungkinkan 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, tetapi Anda akan membutuhkannya di folder utama. Anda bisa 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.
- 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!
- 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!
- 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
- Di project Anda, buat direktori dan beri nama:
assets. - Pindahkan file credentials.json yang Anda download dari Google Cloud Console ke folder assets.
- 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 debug di perangkat. Ikuti langkah-langkah berikut, 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:
- Klik Tools> AVD Manager. (Atau pilih AVD Manager dari toolbar atas, dalam gambar di bawah ini disorot merah muda)
- 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.
- Di toolbar utama Android Studio, pilih perangkat Android sebagai target, melalui dropdown dan pastikan main.dart dipilih. Kemudian tekan tombol Run (segitiga hijau).
Di bagian bawah IDE, Anda akan melihat log di konsol. Anda akan melihat bahwa aplikasi tersebut menginstal Android dan aplikasi Flutter awal Anda. Proses ini memerlukan waktu beberapa menit setelah perangkat virtual siap, perubahan akan sangat cepat dilakukan. Setelah selesai, aplikasi Flutter awal akan terbuka.
- Mari aktifkan mikrofon untuk aplikasi chatbot kita. Klik tombol opsi pada perangkat virtual untuk membuka opsi. Di tab Mikrofon, aktifkan ketiga tombol akses.
- Mari kita coba Hot Reload, untuk menunjukkan seberapa cepat perubahan dapat dilakukan.
Di, lib/main.dart, ubah judul MyHomePage di class MyApp menjadi: Flutter Dialogflow Agent. Dan ubah primarySwatch menjadi Colors.orange.
Simpan file, atau klik ikon gerendel 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
- Buat file widget Flutter baru di folder lib. (klik kanan folder lib, New > Flutter Widget > Stateful widget), panggil file ini:
chat.dart
Tempel 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 tersebut akan menunjukkan, di mana kita nantinya akan mengintegrasikan 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),
),
);
}
}
Menelusuri di file chat.dart untuk Widget build. Ini akan membuat antarmuka chatbot, yang berisi:
- ListView yang berisi semua balon chat dari pengguna dan chatbot. Aplikasi ini memanfaatkan 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 mengirim streaming audio ke Dialogflow, yang mengubah status setelah ditekan.
Menautkan antarmuka chat
- Buka main.dart dan ubah
Widget build, sehingga hanya membuat instance antarmukaChat(). 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())
);
}
}
- Jalankan aplikasi. (Jika aplikasi dimulai sebelumnya. Hentikan perangkat virtual, dan 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.
- Coba gunakan tombol dan area teks. Saat mengetik kueri teks dan menekan enter, atau mengetuk tombol kirim, Anda akan melihat kueri teks yang dicatat dalam tab Run di Android Studio. Saat mengetuk tombol mikrofon dan menghentikannya, Anda akan melihat streaming audio yang dicatat di tab Run.
Bagus, sekarang kami siap mengintegrasikan aplikasi dengan Dialogflow.
Mengintegrasikan Aplikasi Flutter Anda dengan Dialogflow_gRPC
- 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';
- Di bagian atas file, tepat di bawah
// TODO DialogflowGrpcV2Beta1 class instance, tambahkan baris berikut, untuk menyimpan instance class Dialogflow:
DialogflowGrpcV2Beta1 dialogflow;
- Telusuri metode initPlugin(), dan 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 diotorisasi ke project Google Cloud Anda dengan akun layanan. (Pastikan Anda memiliki credentials.json di folder assets)
Sekali lagi, untuk tujuan demo tentang cara menggunakan Dialogflow gRPC, hal ini tidak masalah. Namun, untuk aplikasi produksi, Anda tidak ingin menyimpan file credentials.json di folder assets, karena dianggap tidak aman.
Melakukan panggilan detectIntent
- Sekarang temukan metode
handleSubmitted(), di sinilah keajaiban akan diperlukan. 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);
});
- Sekarang, tepat di bawah kode sebelumnya, kita akan membuat panggilan detectIntent, meneruskan teks dari input, dan languageCode. - Hasilnya (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);
});
}
- Mulai perangkat virtual, dan uji panggilan intent deteksi. Jenis:
hi. Anda akan disambut dengan pesan selamat datang default. Saat Anda mengetik hal lain, penggantian default akan ditampilkan kepada Anda.
Melakukan panggilan streamingDeteksiIntent
- Sekarang temukan metode
handleStream(), di sinilah keajaiban akan berguna untuk streaming audio. Pertama tepat di bawah TODO pertama, buat InputConfigV2beta1 audio dengan biasList untuk mencondongkan model suara. Karena kita menggunakan telepon (perangkat virtual), sampleHertznya adalah 16000 dan encoding-nya adalah Linear 16. Hal ini bergantung pada hardware / mikrofon komputer yang Anda gunakan. Untuk mikrofon Macbook internal saya, 16000 sudah bagus. (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]
);
- Selanjutnya, kita akan memanggil metode
streamingDetectIntentpada objekdialogflow, yang menyimpan sesi Dialogflow:
final responseStream = dialogflow.streamingDetectIntent(config, _audioStream);
- Dengan responseStream, akhirnya kita dapat mendengarkan transkrip yang masuk, kueri pengguna yang terdeteksi, dan respons intent yang cocok dan terdeteksi. Kita akan mencetaknya dalam
ChatMessagedi 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, dan Ucapkan: "Halo".
Tindakan ini akan memicu intent selamat datang default Dialogflow. Hasilnya akan dicetak di layar. Setelah Flutter berfungsi dengan baik dengan integrasi Dialogflow, kita dapat mulai mengerjakan percakapan chatbot.
5. Dialogflow: Pemodelan agen Dialogflow
Dialogflow Essentials adalah suite pengembangan untuk membangun UI percakapan. Jadi chatbot, bot suara, gateway ponsel. Anda semua dapat membuatnya dengan alat yang sama, dan bahkan mendukung banyak channel dalam lebih dari 20 bahasa yang berbeda. Desainer UX Dialogflow (pemodel agen, ahli bahasa) atau developer membuat intent dengan menentukan frasa pelatihan untuk melatih model machine learning yang mendasarinya.
Intent mengategorikan niat pengguna. Untuk setiap agen Dialogflow ES, Anda dapat menentukan banyak intent, yang mana intent gabungan Anda dapat menangani percakapan secara lengkap. Setiap intent dapat berisi parameter dan respons.
Mencocokkan intent juga dikenal sebagai klasifikasi intent atau pencocokan intent. Ini adalah konsep utama di Dialogflow ES. Setelah intent dicocokkan, intent dapat menampilkan respons, mengumpulkan parameter (ekstraksi entity) atau memicu kode webhook (fulfillment), misalnya, untuk mengambil data dari database.
Saat pengguna akhir menulis atau mengucapkan 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 dalam giliran ke-2 dan ke-3. Ini adalah cara untuk melacak ucapan pengguna sebelumnya.
Berikut informasi selengkapnya tentang Intent Dialogflow.
Memodifikasi Intent Selamat Datang Default
Saat Anda membuat agen Dialogflow baru, dua intent default akan dibuat secara otomatis. Intent Selamat Datang Default, adalah alur pertama yang Anda dapatkan saat memulai percakapan dengan agen. Intent Penggantian Default, adalah alur yang akan Anda dapatkan setelah agen tidak dapat memahami Anda atau tidak dapat mencocokkan intent dengan apa yang baru saja Anda ucapkan.
Berikut adalah pesan selamat datang untuk Intent Selamat Datang Default:
Pengguna | Agen |
Halo | "Halo, saya bot FAQ Dialogflow. Saya dapat menjawab pertanyaan tentang Dialogflow." |
- Klik Intent > Intent Selamat Datang Default
- Scroll ke bawah ke Respons.
- Hapus semua Respons Teks.
- Di tab default, buat 2 respons berikut:
- Halo, saya bot FAQ Dialogflow. Saya bisa menjawab pertanyaan tentang Dialogflow. Apa yang ingin Anda ketahui?
- Halo, saya bot FAQ Dialogflow. Apakah Anda memiliki pertanyaan tentang Dialogflow? Ada yang bisa dibantu?
Konfigurasinya akan mirip dengan screenshot ini.
- Klik Simpan
- Mari kita uji intent ini. Pertama, kita dapat mengujinya di Dialogflow Simulator.Type: Hello. Salah satu pesan ini akan ditampilkan:
- Halo, saya bot FAQ Dialogflow. Saya bisa menjawab pertanyaan tentang Dialogflow. Apa yang ingin Anda ketahui?
- Halo, saya bot FAQ Dialogflow. Apakah Anda memiliki pertanyaan tentang Dialogflow? Ada yang bisa dibantu?
Mengubah Intent Penggantian Default
- Klik Intent > Intent Penggantian Default
- Scroll ke bawah ke Respons.
- Hapus semua Respons Teks.
- Di tab default, buat respons berikut:
- Maaf, saya tidak tahu jawaban atas pertanyaan ini. Sudahkah Anda memeriksa situs kami? http://www.dialogflow.com?
- Klik Simpan
Menghubungkan ke Pusat Informasi online
Konektor pengetahuan melengkapi intent yang ditentukan. Alat ini menguraikan 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 Knowledge Connector.
Jadi, mari kita coba.
- Pilih Pengetahuan (beta) di menu.
- Klik tombol biru kanan: Create Knowledge Base
- Ketik sebagai nama Pusat Informasi; FAQ Dialogflow dan klik save.
- Klik link Buat yang pertama
- Tindakan ini akan membuka jendela.
Gunakan konfigurasi berikut:
Nama Dokumen: DialogflowFAQ Jenis Pengetahuan: FAQ Jenis Mime: text/html
- URL tempat kami memuat data adalah:
https://www.leeboonstra.dev/faqs/
- Klik Buat
Basis informasi telah dibuat:
- Scroll ke bawah ke bagian Respons lalu klik Tambahkan Respons
Buat jawaban berikut dan tekan simpan.
$Knowledge.Answer[1]
- Klik Lihat Detail
- Pilih Aktifkan Muat Ulang Otomatis untuk mengambil perubahan secara otomatis saat halaman FAQ diperbarui, dan tekan simpan.
Semua FAQ yang telah diimplementasikan di Dialogflow akan ditampilkan. Ini sangat mudah.
Perlu diketahui bahwa Anda juga dapat mengarahkan kursor ke situs HTML online yang berisi FAQ untuk mengimpor FAQ ke agen Anda. Anda bahkan dapat mengupload PDF dengan blok teks, dan Dialogflow akan memunculkan pertanyaan itu sendiri.
FAQ Now harus dilihat sebagai ‘tambahan' untuk ditambahkan ke agen, di sebelah alur intent Anda. FAQ Knowledge Base tidak dapat melatih model. Jadi, mengajukan pertanyaan dengan cara yang sama sekali berbeda mungkin tidak akan cocok karena tidak menggunakan Natural Language Understanding (model Machine Learning). Itulah sebabnya terkadang ada baiknya mengonversi FAQ menjadi intent.
- Uji pertanyaan di simulator di sebelah kanan.
- Setelah semuanya berfungsi, kembali ke aplikasi Flutter Anda, lalu uji chat dan bot suara Anda dengan konten baru ini. Ajukan pertanyaan yang telah Anda muat ke Dialogflow.
6. Selamat
Selamat, Anda berhasil membuat aplikasi Flutter pertama Anda dengan integrasi chatbot Dialogflow. Selamat!
Yang telah kita bahas
- Cara membuat chatbot dengan Dialogflow Essentials
- Cara mengintegrasikan Dialogflow ke aplikasi Flutter
- Cara mendeteksi intent teks dengan Dialogflow
- Cara melakukan streaming suara melalui mikrofon ke Dialogflow
- Cara memanfaatkan konektor pusat informasi
Apa langkah selanjutnya?
Suka dengan codelab ini? Mari kita lihat lab Dialogflow yang keren ini.
- Mengintegrasikan Dialogflow dengan Asisten Google
- Mengintegrasikan Dialogflow dengan Google Chat
- Membuat Tindakan untuk Asisten Google dengan Dialogflow (level 1)
- Memahami fulfillment dengan mengintegrasikan Dialogflow dengan Google Kalender +. Membangun Aplikasi Flutter Pertama Anda
Tertarik dengan cara saya membuat paket gRPC Dialogflow untuk Dart/Flutter?
- Lihat artikel blog saya yang berjudul Panduan Tersembunyi untuk menggunakan Google Cloud gRPC API