Tạo Bot Voice cho Android thông qua Dialogflow Essentials & Xoè

1. Trước khi bắt đầu

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách tích hợp một bot văn bản và giọng nói đơn giản của Dialogflow Essentials (ES) vào một ứng dụng Flutter. Dialogflow ES là một bộ công cụ phát triển để tạo giao diện người dùng đàm thoại. Do đó, các chatbot, bot thoại, cổng điện thoại. Tất cả các nhà phát triển đều có thể tạo ứng dụng bằng cùng một công cụ, thậm chí có thể hỗ trợ nhiều kênh bằng hơn 20 ngôn ngữ. Dialogflow tích hợp với nhiều nền tảng đàm thoại phổ biến như Trợ lý Google, Slack và Facebook Messenger. Nếu muốn tạo một tác nhân cho một trong các nền tảng này, bạn nên sử dụng một trong nhiều lựa chọn tích hợp. Tuy nhiên, để tạo một chatbot cho thiết bị di động, bạn sẽ phải tạo một chế độ tích hợp tuỳ chỉnh. Bạn sẽ tạo ý định bằng cách chỉ định các cụm từ huấn luyện để huấn luyện một mô hình học máy cơ bản.

Phòng thí nghiệm này được sắp xếp để phản ánh trải nghiệm thường thấy của nhà phát triển trên đám mây:

  1. Thiết lập môi trường
  • Dialogflow: Tạo một nhân viên hỗ trợ Dialogflow ES mới
  • Dialogflow: Định cấu hình Dialogflow
  • Google Cloud: Tạo tài khoản dịch vụ
  1. Flutter: Xây dựng ứng dụng nhắn tin
  • Tạo dự án Flutter
  • Định cấu hình các quyền và chế độ cài đặt
  • Thêm các phần phụ thuộc
  • Liên kết với tài khoản dịch vụ.
  • Chạy ứng dụng trên thiết bị ảo hoặc thiết bị thực
  1. Flutter: Xây dựng giao diện trò chuyện có hỗ trợ tính năng Chuyển lời nói thành văn bản
  • Tạo giao diện trò chuyện
  • Liên kết giao diện trò chuyện
  • Tích hợp gói Dialogflow gRPC vào ứng dụng
  1. Dialogflow: Mô hình hoá tác nhân Dialogflow
  • Định cấu hình ý định chào mừng và dự phòng
  • Sử dụng cơ sở kiến thức về câu hỏi thường gặp

Điều kiện tiên quyết

  • Kinh nghiệm cơ bản về Dart/Flutter
  • Trải nghiệm cơ bản về Google Cloud Platform
  • Có kinh nghiệm cơ bản với Dialogflow ES

Sản phẩm bạn sẽ tạo ra

Lớp học lập trình này sẽ hướng dẫn bạn cách tạo một bot Câu hỏi thường gặp trên thiết bị di động. Bot này có thể trả lời hầu hết các câu hỏi thường gặp về công cụ Dialogflow. Người dùng cuối có thể tương tác với giao diện văn bản hoặc truyền trực tuyến giọng nói qua micrô tích hợp của thiết bị di động để nhận câu trả lời.

Kiến thức bạn sẽ học được

  • Cách tạo chatbot bằng Dialogflow Essentials
  • Cách tích hợp Dialogflow vào một ứng dụng Flutter bằng gói Dialogflow gRPC
  • Cách phát hiện ý định dạng văn bản bằng Dialogflow
  • Cách truyền trực tuyến giọng nói qua micrô đến Dialogflow
  • Cách sử dụng trình kết nối cơ sở kiến thức để nhập câu hỏi thường gặp công khai
  • Kiểm thử chatbot thông qua giao diện văn bản và giọng nói trên thiết bị ảo hoặc thiết bị thực

Bạn cần có

  • Bạn cần có một Tài khoản Google / địa chỉ Gmail để tạo một đặc vụ Dialogflow.
  • Bạn cần có quyền truy cập vào Google Cloud Platform để tải tài khoản dịch vụ xuống
  • Môi trường phát triển Flutter

Thiết lập môi trường phát triển Flutter

  1. Chọn hệ điều hành mà bạn đang cài đặt Flutter.
  1. Bạn có thể tạo ứng dụng bằng Flutter bằng cách sử dụng bất kỳ trình chỉnh sửa văn bản nào kết hợp với các công cụ dòng lệnh của chúng tôi. Tuy nhiên, hội thảo này sẽ sử dụng Android Studio. Các trình bổ trợ Flutter và Dart cho Android Studio cung cấp cho bạn tính năng hoàn thành mã, làm nổi bật cú pháp, hỗ trợ chỉnh sửa tiện ích, hỗ trợ chạy và gỡ lỗi, v.v. Làm theo các bước trên https://flutter.dev/docs/get-started/editor

2. Thiết lập môi trường

Dialogflow: Tạo một nhân viên hỗ trợ Dialogflow ES mới

  1. Mở
  2. Trong thanh bên trái, ngay bên dưới biểu trưng, hãy chọn "Tạo tác nhân mới" trong trình đơn thả xuống. (Lưu ý: đừng nhấp vào trình đơn thả xuống có nội dung "Global" (Toàn cầu), chúng ta sẽ cần một phiên bản Dialogflow có phạm vi Toàn cầu để sử dụng cơ sở kiến thức về Câu hỏi thường gặp.)
  3. Chỉ định tên nhân viên hỗ trợ yourname-dialogflow (sử dụng tên của bạn)
  4. Chọn Tiếng Anh – en làm ngôn ngữ mặc định.
  5. Chọn múi giờ gần bạn nhất làm múi giờ mặc định.
  6. Đừng chọn Mega Agent. (Với tính năng này, bạn có thể tạo một nhân viên hỗ trợ bao quát, có thể điều phối giữa các nhân viên hỗ trợ "phụ". Chúng ta không cần đến nó vào lúc này.)
  7. Nhấp vào Tạo.

Màn hình tạo dự án mới

Định cấu hình Dialogflow

  1. Nhấp vào biểu tượng bánh răng trong trình đơn bên trái, bên cạnh tên dự án của bạn.

Tạo trình đơn thả xuống dự án mới

  1. Nhập nội dung mô tả sau cho nhân viên hỗ trợ: Chatbot hỏi đáp của Dialogflow
  2. Bật các tính năng thử nghiệm bằng cách bật nút chuyển.

Dialogflow Essentials V2Beta1

  1. Nhấp vào thẻ Lời nói và đảm bảo hộp Tự động điều chỉnh lời nói đang hoạt động.
  2. Ngoài ra, bạn cũng có thể bật công tắc đầu tiên. Việc này sẽ cải thiện Mô hình lời nói, nhưng chỉ có thể thực hiện khi bạn nâng cấp bản dùng thử Dialogflow.
  3. Nhấp vào Lưu

Google Cloud: Lấy tài khoản dịch vụ

Sau khi tạo một tác nhân trong Dialogflow, bạn nên tạo một dự án trên đám mây trong bảng điều khiển Cloud.

  1. Mở Google Cloud Console:
  2. Đảm bảo bạn đã đăng nhập bằng chính Tài khoản Google như trên Dialogflow và chọn dự án: yourname-dialogflow trong thanh màu xanh dương ở trên cùng.
  3. Tiếp theo, hãy tìm Dialogflow API trong thanh công cụ trên cùng rồi nhấp vào kết quả API Dialogflow trong trình đơn thả xuống.

Bật API Dialogflow

  1. Nhấp vào nút Quản lý màu xanh dương, rồi nhấp vào Thông tin đăng nhập trong thanh trình đơn bên trái. (Nếu bạn chưa bật Dialogflow, hãy nhấn vào Bật trước)

Bảng điều khiển GCP về thông tin đăng nhập

  1. Nhấp vào Tạo thông tin xác thực (ở đầu màn hình) rồi chọn Tài khoản dịch vụ.

Tạo thông tin đăng nhập

  1. Chỉ định tên tài khoản dịch vụ: flutter_dialogflow, mã nhận dạng và nội dung mô tả, rồi nhấn vào Tạo.

Tạo một tài khoản dịch vụ

  1. Ở bước 2, bạn cần chọn vai trò: Dialogflow API Admin, nhấp vào Tiếp tục và Xong.
  2. Nhấp vào tài khoản dịch vụ flutter_dialogflow, nhấp vào thẻ Khoá rồi nhấn vào Thêm khoá > Tạo khoá mới

Tạo khoá

  1. Tạo khoá JSON. Đổi tên thành credentials.json và lưu trữ ở một vị trí an toàn trên ổ đĩa cứng. Chúng ta sẽ dùng nó sau.

Khoá JSON

Tuyệt vời, tất cả các công cụ chúng ta cần đều được thiết lập đúng cách. Giờ đây, chúng ta có thể bắt đầu tích hợp Dialogflow vào ứng dụng của mình!

3. Flutter: Xây dựng ứng dụng Chat

Tạo ứng dụng mẫu

  1. Mở Android Studio rồi chọn Start a new Flutter project (Bắt đầu một dự án Flutter mới).
  2. Chọn Ứng dụng Flutter làm loại dự án. Sau đó, hãy nhấp vào Tiếp theo.
  3. Xác minh đường dẫn SDK Flutter chỉ định vị trí của SDK (chọn Install SDK... (Cài đặt SDK...) nếu trường văn bản trống).
  4. Nhập tên dự án (ví dụ: flutter_dialogflow_agent), sau đó nhấp vào Next (Tiếp theo).
  5. Sửa đổi tên gói rồi nhấp vào Hoàn tất.

Tạo ứng dụng Flutter mới

Thao tác này sẽ tạo một ứng dụng mẫu bằng Material Components.

Chờ Android Studio cài đặt SDK và tạo dự án.

Cài đặt và quyền

  1. Thư viện trình ghi âm sound_stream mà chúng ta sẽ sử dụng yêu cầu minSdk tối thiểu là 21. Vì vậy, hãy thay đổi phần này trong android/app/build.gradle trong khối defaultConfig. (Lưu ý: có 2 tệp build.gradle trong thư mục android, nhưng tệp trong thư mục ứng dụng mới là tệp chính xác.)
defaultConfig {
   applicationId "com.myname.flutter_dialogflow_agent"
   minSdkVersion 21
   targetSdkVersion 30
   versionCode flutterVersionCode.toInteger()
   versionName flutterVersionName
}
  1. Để cấp quyền cho micrô và cho phép ứng dụng liên hệ với tác nhân Dialogflow chạy trên đám mây, chúng ta sẽ phải thêm các quyền INTERNET và RECORD_AUDIO vào tệp app/src/main/AndroidManifest.xml. Có nhiều tệp AndroidManifest.xml trong dự án Flutter của bạn, nhưng bạn sẽ cần tệp trong thư mục chính. Bạn có thể thêm các dòng ngay bên trong thẻ kê khai.
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />

Thêm các phần phụ thuộc

Chúng ta sẽ sử dụng các gói sound_stream, rxdart và dialogflow_grpc.

  1. Thêm phần phụ thuộc 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. Thêm phần phụ thuộc 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. Thêm phần phụ thuộc 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!

Đang tải thông tin tài khoản dịch vụ và dự án trên đám mây của Google Cloud

  1. Trong dự án của bạn, hãy tạo một thư mục và đặt tên là: assets.
  2. Di chuyển tệp credentials.json mà bạn đã tải xuống từ bảng điều khiển Cloud vào thư mục assets.
  3. Mở pubspec.yaml rồi thêm tài khoản dịch vụ vào khối flutter.
flutter:
  uses-material-design: true
  assets:
    - assets/credentials.json

Chạy ứng dụng trên một thiết bị thực

Khi có thiết bị Android, bạn có thể cắm điện thoại qua cáp USB và gỡ lỗi trên thiết bị. Làm theo các bước này để thiết lập thông qua màn hình Tuỳ chọn cho nhà phát triển trên thiết bị Android.

Chạy ứng dụng trên thiết bị ảo

Trong trường hợp bạn muốn chạy ứng dụng trên một thiết bị ảo, hãy làm theo các bước sau:

  1. Nhấp vào Tools > AVD Manager (Công cụ > Trình quản lý thiết bị Android ảo). (Hoặc chọn Trình quản lý thiết bị Android ảo trên thanh công cụ trên cùng. Trong hình bên dưới, Trình quản lý thiết bị Android ảo được đánh dấu màu hồng)

Thanh công cụ trên cùng của Android Studio

  1. Chúng ta sẽ tạo một thiết bị ảo Android mục tiêu để có thể kiểm thử ứng dụng mà không cần thiết bị thực. Để biết thông tin chi tiết, hãy xem phần Quản lý AVD. Sau khi chọn một thiết bị ảo mới, bạn có thể nhấp đúp vào thiết bị đó để khởi động.

Quản lý AVD

Thiết bị ảo

  1. Trong thanh công cụ chính của Android Studio, hãy chọn một thiết bị Android làm mục tiêu thông qua trình đơn thả xuống và đảm bảo bạn đã chọn main.dart. Sau đó, nhấn nút Run (Chạy) (hình tam giác màu xanh lục).

Ở cuối IDE, bạn sẽ thấy nhật ký trong bảng điều khiển. Bạn sẽ thấy quá trình cài đặt Android và ứng dụng Flutter khởi động. Quá trình này sẽ mất một phút. Sau khi thiết bị ảo sẵn sàng, việc thực hiện các thay đổi sẽ diễn ra cực kỳ nhanh chóng. Khi bạn hoàn tất, ứng dụng này sẽ mở ứng dụng Flutter khởi động.

Ứng dụng nguyên mẫu

  1. Hãy bật micrô cho ứng dụng chatbot của chúng ta. Nhấp vào nút options (lựa chọn) của thiết bị ảo để mở các lựa chọn. Trong thẻ Micrô, hãy bật cả 3 nút chuyển.

Các lựa chọn AVD

  1. Hãy thử tính năng Tải lại nhanh để minh hoạ tốc độ thực hiện các thay đổi.

Trong lib/main.dart, hãy thay đổi tiêu đề MyHomePage trong lớp MyApp thành: Flutter Dialogflow Agent. Và thay đổi primarySwatch thành Colors.orange.

Mã đầu tiên

Lưu tệp hoặc nhấp vào biểu tượng tia sét trên Thanh công cụ của Android Studio. Bạn sẽ thấy thay đổi được thực hiện trực tiếp trong thiết bị ảo.

4. Flutter: Xây dựng giao diện Chat có hỗ trợ STT

Tạo giao diện trò chuyện

  1. Tạo một tệp tiện ích Flutter mới trong thư mục lib. (nhấp chuột phải vào thư mục lib, New > Flutter Widget > Stateful widget (Mới > Tiện ích Flutter > Tiện ích có trạng thái)), gọi tệp này là: chat.dart

Dán mã sau vào tệp này. Tệp dart này tạo giao diện trò chuyện. Dialogflow chưa hoạt động, đây chỉ là bố cục của tất cả các thành phần và việc tích hợp thành phần micrô để cho phép truyền phát. Các nhận xét trong tệp sẽ chỉ ra nơi chúng ta sẽ tích hợp Dialogflow sau này.

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

Tìm Widget build trong tệp chat.dart. Widget này tạo giao diện của chatbot, bao gồm:

  • ListView chứa tất cả các bong bóng trò chuyện của người dùng và chatbot. Thành phần này sử dụng lớp ChatMessage, tạo tin nhắn trò chuyện có hình đại diện và văn bản.
  • TextField để nhập cụm từ tìm kiếm bằng văn bản
  • IconButton có biểu tượng gửi, dùng để gửi cụm từ tìm kiếm đến Dialogflow
  • IconButton có micrô để gửi luồng âm thanh đến Dialogflow, thay đổi trạng thái khi được nhấn.

Liên kết giao diện trò chuyện

  1. Mở main.dart và thay đổi Widget build để chỉ khởi tạo giao diện Chat(). Bạn có thể xoá tất cả mã minh hoạ khác.
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. Chạy ứng dụng. (Nếu ứng dụng đã được khởi động trước đó. Dừng thiết bị ảo và chạy lại main.dart). Khi bạn chạy ứng dụng có giao diện trò chuyện lần đầu tiên. Bạn sẽ thấy một cửa sổ bật lên yêu cầu cấp quyền, hỏi xem bạn có muốn cho phép sử dụng micrô hay không. Nhấp vào: Trong khi dùng ứng dụng.

Quyền

  1. Chơi với vùng văn bản và các nút. Khi nhập một cụm từ tìm kiếm bằng văn bản rồi nhấn phím Enter hoặc nhấn vào nút gửi, bạn sẽ thấy cụm từ tìm kiếm bằng văn bản được ghi lại trong thẻ Run (Chạy) của Android Studio. Khi nhấn nút micrô rồi dừng, bạn sẽ thấy luồng âm thanh được ghi lại trong thẻ Run (Chạy).

Nhật ký luồng âm thanh

Tuyệt vời! Giờ đây, chúng ta đã sẵn sàng tích hợp ứng dụng với Dialogflow!

Tích hợp ứng dụng Flutter với Dialogflow_gRPC

  1. Mở chat.dart rồi thêm các mục nhập sau:
import 'package:dialogflow_grpc/dialogflow_grpc.dart';
import 'package:dialogflow_grpc/generated/google/cloud/dialogflow/v2beta1/session.pb.dart';
  1. Ở đầu tệp, ngay bên dưới // TODO DialogflowGrpcV2Beta1 class instance, hãy thêm dòng sau để giữ phiên bản lớp Dialogflow:
DialogflowGrpcV2Beta1 dialogflow;
  1. Tìm phương thức initPlugin() rồi thêm mã sau ngay bên dưới dòng nhận xét TODO:
    // Get a Service account
    final serviceAccount = ServiceAccount.fromString(
        '${(await rootBundle.loadString('assets/credentials.json'))}');
    // Create a DialogflowGrpc Instance
    dialogflow = DialogflowGrpcV2Beta1.viaServiceAccount(serviceAccount);

Thao tác này sẽ tạo một phiên bản Dialogflow được uỷ quyền cho dự án trên đám mây của bạn bằng tài khoản dịch vụ. (Đảm bảo rằng bạn có credentials.json trong thư mục assets!)

Một lần nữa, đối với mục đích minh hoạ cách sử dụng Dialogflow gRPC, điều này là chấp nhận được. Tuy nhiên, đối với các ứng dụng sản xuất, bạn không nên lưu trữ tệp credentials.json trong thư mục tài sản vì điều này không được coi là an toàn.

Gọi detectIntent

  1. Bây giờ, hãy tìm phương thức handleSubmitted(), đây là nơi diễn ra điều kỳ diệu. Ngay bên dưới chú thích TODO, hãy thêm mã sau.Mã này sẽ thêm thông báo mà người dùng nhập vào ListView:
ChatMessage message = ChatMessage(
 text: text,
 name: "You",
 type: true,
);

setState(() {
 _messages.insert(0, message);
});
  1. Bây giờ, ngay bên dưới đoạn mã trước, chúng ta sẽ thực hiện lệnh gọi detectIntent, truyền văn bản từ đầu vào và một languageCode. – Kết quả (trong data.queryResult.fulfillment) sẽ được in trong 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. Khởi động thiết bị ảo và kiểm thử lệnh gọi phát hiện ý định. Loại: hi. Ứng dụng sẽ chào bạn bằng thông điệp chào mừng mặc định. Khi bạn nhập nội dung khác, hệ thống sẽ trả về giá trị dự phòng mặc định cho bạn.

Thực hiện lệnh gọi streamingDetectIntent

  1. Bây giờ, hãy tìm phương thức handleStream(). Đây là nơi diễn ra quá trình truyền phát âm thanh. Ngay bên dưới TODO đầu tiên, hãy tạo một InputConfigV2beta1 âm thanh có biasList để thiên vị mẫu giọng nói. Vì chúng ta đang sử dụng điện thoại (thiết bị ảo), nên sampleHertz sẽ là 16000 và phương thức mã hoá sẽ là Linear 16. Điều này phụ thuộc vào phần cứng máy tính / micrô mà bạn đang sử dụng. Đối với micrô gắn trong của Macbook, 16000 là mức phù hợp. (Xem thông tin về gói 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. Tiếp theo, chúng ta sẽ gọi phương thức streamingDetectIntent trên đối tượng dialogflow. Đối tượng này sẽ giữ phiên Dialogflow của chúng ta:
final responseStream = dialogflow.streamingDetectIntent(config, _audioStream);
  1. Với responseStream, cuối cùng chúng ta có thể nghe bản chép lời sắp tới, cụm từ tìm kiếm đã phát hiện của người dùng và phản hồi ý định phù hợp đã phát hiện. Chúng ta sẽ in thông tin này trong một ChatMessage trên màn hình:
// 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');
});

Vậy là xong. Hãy khởi động ứng dụng, kiểm thử ứng dụng trên thiết bị ảo, nhấn nút micrô rồi Nói: "Xin chào".

Thao tác này sẽ kích hoạt ý định chào mừng mặc định của Dialogflow. Kết quả sẽ được in trên màn hình. Giờ đây, Flutter hoạt động hiệu quả với tính năng tích hợp Dialogflow, chúng ta có thể bắt đầu làm việc trên cuộc trò chuyện với chatbot.

5. Dialogflow: Mô hình hoá tác nhân Dialogflow

Dialogflow Essentials là một bộ công cụ phát triển để xây dựng giao diện người dùng đàm thoại. Do đó, các chatbot, bot thoại, cổng điện thoại. Tất cả các nhà phát triển đều có thể tạo ứng dụng bằng cùng một công cụ, thậm chí có thể hỗ trợ nhiều kênh bằng hơn 20 ngôn ngữ. Nhà thiết kế trải nghiệm người dùng (người mô hình hoá tác nhân, nhà ngôn ngữ học) hoặc nhà phát triển Dialogflow tạo ý định bằng cách chỉ định các cụm từ huấn luyện để huấn luyện một mô hình học máy cơ bản.

Ý định phân loại ý định của người dùng. Đối với mỗi tác nhân Dialogflow ES, bạn có thể xác định nhiều ý định, trong đó các ý định kết hợp có thể xử lý một cuộc trò chuyện hoàn chỉnh. Mỗi ý định có thể chứa các tham số và câu trả lời.

Việc so khớp ý định còn được gọi là phân loại ý định hoặc so khớp ý định. Đây là khái niệm chính trong Dialogflow ES. Sau khi được so khớp, ý định có thể trả về một phản hồi, thu thập các tham số (trích xuất thực thể) hoặc kích hoạt mã webhook (thực hiện), ví dụ: để tìm nạp dữ liệu từ cơ sở dữ liệu.

Khi người dùng cuối viết hoặc nói điều gì đó trong chatbot (được gọi là biểu thức hoặc câu nói của người dùng), Dialogflow ES sẽ so khớp biểu thức đó với ý định phù hợp nhất của nhân viên hỗ trợ Dialogflow dựa trên các cụm từ huấn luyện. Mô hình học máy Dialogflow ES cơ bản được huấn luyện dựa trên các cụm từ huấn luyện đó.

Dialogflow ES hoạt động dựa trên một khái niệm gọi là ngữ cảnh. Giống như con người, Dialogflow ES có thể ghi nhớ ngữ cảnh ở lượt trò chuyện thứ 2 và thứ 3. Đây là cách mà tính năng này có thể theo dõi những câu nói trước đây của người dùng.

Sau đây là thông tin khác về Ý định trong Dialogflow.

Sửa đổi ý định chào mừng mặc định

Khi bạn tạo một đặc vụ Dialogflow mới, hai ý định mặc định sẽ được tạo tự động. Ý định chào mừng mặc định là luồng đầu tiên bạn nhận được khi bắt đầu cuộc trò chuyện với nhân viên hỗ trợ. Ý định dự phòng mặc định là luồng mà bạn sẽ nhận được khi tác nhân không hiểu bạn hoặc không thể so khớp ý định với những gì bạn vừa nói.

Sau đây là thông điệp chào mừng cho Ý định chào mừng mặc định:

Người dùng

Tác nhân

Chào bạn

"Chào bạn, tôi là bot hỏi đáp của Dialogflow. Tôi có thể trả lời các câu hỏi về Dialogflow."

"Bạn muốn biết điều gì?"

  1. Nhấp vào Ý định > Ý định chào mừng mặc định
  2. Di chuyển xuống mục Câu trả lời.
  3. Xoá tất cả Phản hồi bằng văn bản.
  4. Trong thẻ mặc định, hãy tạo 2 câu trả lời sau:
  • Chào bạn, tôi là bot hỏi đáp của Dialogflow. Tôi có thể trả lời các câu hỏi về Dialogflow. Bạn muốn biết điều gì?
  • Xin chào, tôi là bot Hỏi đáp của Dialogflow. Bạn có câu hỏi nào về Dialogflow không? Tôi có thể giúp gì cho bạn?

Cấu hình phải tương tự như ảnh chụp màn hình này.

Chỉnh sửa ý định chào mừng mặc định

  1. Nhấp vào Lưu
  2. Hãy kiểm thử ý định này. Trước tiên, chúng ta có thể kiểm thử trong Trình mô phỏng Dialogflow.Nhập: Xin chào. Thao tác này sẽ trả về một trong những thông báo sau:
  • Chào bạn, tôi là bot hỏi đáp của Dialogflow. Tôi có thể trả lời các câu hỏi về Dialogflow. Bạn muốn biết điều gì?
  • Xin chào, tôi là bot Hỏi đáp của Dialogflow. Bạn có câu hỏi nào về Dialogflow không? Tôi có thể giúp gì cho bạn?

Sửa đổi ý định dự phòng mặc định

  1. Nhấp vào Ý định > Ý định dự phòng mặc định
  2. Di chuyển xuống mục Câu trả lời.
  3. Xoá tất cả Phản hồi bằng văn bản.
  4. Trong thẻ mặc định, hãy tạo câu trả lời sau:
  • Rất tiếc, tôi không biết câu trả lời cho câu hỏi này. Bạn đã truy cập trang web của chúng tôi chưa? http://www.dialogflow.com?
  1. Nhấp vào Lưu

Kết nối với Cơ sở kiến thức trực tuyến

Trình kết nối kiến thức bổ sung cho các ý định đã xác định. Các mô hình này phân tích cú pháp tài liệu kiến thức để tìm câu trả lời tự động. (ví dụ: Câu hỏi thường gặp hoặc bài viết từ tệp CSV, trang web trực tuyến hoặc thậm chí là tệp PDF!) Để định cấu hình các cơ sở kiến thức này, bạn xác định một hoặc nhiều cơ sở kiến thức. Đây là các tập hợp tài liệu kiến thức.

Đọc thêm về Knowledge Connector.

Hãy thử xem.

  1. Chọn Kiến thức (thử nghiệm) trong trình đơn.

Cơ sở kiến thức

  1. Nhấp vào nút màu xanh dương ở bên phải: Tạo cơ sở kiến thức
  2. Nhập tên Cơ sở kiến thức; Câu hỏi thường gặp về Dialogflow rồi nhấn vào lưu.
  3. Nhấp vào Tạo đường liên kết đầu tiên

Cơ sở kiến thức đầu tiên

  1. Thao tác này sẽ mở một cửa sổ.

Hãy dùng cấu hình sau:

Tên tài liệu: DialogflowFAQ Loại kiến thức: FAQ Loại MIME: text/html

  1. URL mà chúng tôi tải dữ liệu từ đó là:

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

  1. Nhấp vào Tạo

Cơ sở kiến thức đã được tạo:

Đã tạo cơ sở kiến thức

  1. Di chuyển xuống phần Câu trả lời rồi nhấp vào Thêm câu trả lời

Tạo các câu trả lời sau đây rồi nhấn vào lưu.

$Knowledge.Answer[1]
  1. Nhấp vào Xem chi tiết

Xem thông tin chi tiết

  1. Chọn Bật tính năng Tải lại tự động để tự động tìm nạp các thay đổi khi trang web Câu hỏi thường gặp được cập nhật, rồi nhấn vào lưu.

Thao tác này sẽ hiển thị tất cả các câu hỏi thường gặp mà bạn đã triển khai trong Dialogflow.Thật dễ dàng!

Lưu ý rằng bạn cũng có thể trỏ đến một trang web HTML trực tuyến có câu hỏi thường gặp để nhập câu hỏi thường gặp vào tác nhân. Bạn thậm chí có thể tải một tệp PDF có một khối văn bản lên và Dialogflow sẽ tự đưa ra các câu hỏi.

Giờ đây, bạn nên xem các câu hỏi thường gặp là "phần bổ sung" để thêm vào các đặc vụ, bên cạnh các luồng ý định. Câu hỏi thường gặp trong cơ sở kiến thức không thể huấn luyện mô hình. Vì vậy, nếu bạn đặt câu hỏi theo một cách hoàn toàn khác, thì có thể bạn sẽ không nhận được kết quả phù hợp vì câu hỏi đó không sử dụng tính năng Xử lý ngôn ngữ tự nhiên (mô hình Học máy). Đó là lý do đôi khi bạn nên chuyển đổi các câu hỏi thường gặp thành ý định.

  1. Kiểm tra các câu hỏi trong trình mô phỏng ở bên phải.
  2. Khi mọi thứ hoạt động, hãy quay lại ứng dụng Flutter của bạn và kiểm thử bot trò chuyện và bot thoại bằng nội dung mới này! Đặt những câu hỏi mà bạn đã tải vào Dialogflow.

Kết quả

6. Xin chúc mừng

Xin chúc mừng! Bạn đã tạo thành công ứng dụng Flutter đầu tiên có tích hợp chatbot Dialogflow. Chúc mừng bạn!

Nội dung đã đề cập

  • Cách tạo chatbot bằng Dialogflow Essentials
  • Cách tích hợp Dialogflow vào một ứng dụng Flutter
  • Cách phát hiện ý định dạng văn bản bằng Dialogflow
  • Cách truyền trực tuyến giọng nói qua micrô đến Dialogflow
  • Cách sử dụng trình kết nối cơ sở kiến thức

Tiếp theo là gì?

Bạn có thích lớp học lập trình này không? Hãy khám phá những phòng thí nghiệm tuyệt vời này của Dialogflow!

Bạn có muốn biết cách tôi tạo gói Dialogflow gRPC cho Dart/Flutter không?