ساخت ربات های صوتی برای اندروید با Dialogflow Essentials & بال زدن

1. قبل از شروع

در این کد لبه، یاد خواهید گرفت که چگونه یک ربات متنی و صوتی ساده Dialogflow Essentials (ES) را در یک برنامه Flutter ادغام کنید. Dialogflow ES یک مجموعه توسعه برای ایجاد رابط های کاربری مکالمه است. بنابراین ربات‌های چت، ربات‌های صوتی، دروازه‌های تلفن. همه شما می توانید آن را با یک ابزار بسازید، و حتی می توانید چندین کانال را به بیش از 20 زبان مختلف پشتیبانی کنید. Dialogflow با بسیاری از پلتفرم‌های مکالمه محبوب مانند Google Assistant، Slack و Facebook Messenger ادغام می‌شود. اگر می خواهید یک عامل برای یکی از این پلتفرم ها بسازید، باید از یکی از گزینه های ادغام بسیار استفاده کنید. با این حال، برای ایجاد یک ربات چت برای دستگاه های تلفن همراه، باید یک ادغام سفارشی ایجاد کنید. شما با مشخص کردن عبارات آموزشی برای آموزش یک مدل یادگیری ماشینی، قصد ایجاد خواهید کرد.

این آزمایشگاه برای منعکس کردن یک تجربه مشترک توسعه دهنده ابری سفارش داده شده است:

  1. راه اندازی محیط
  • Dialogflow: یک عامل جدید Dialogflow ES ایجاد کنید
  • Dialogflow: Dialogflow را پیکربندی کنید
  • Google Cloud: یک حساب سرویس ایجاد کنید
  1. Flutter: ساخت یک برنامه چت
  • ایجاد پروژه فلاتر
  • پیکربندی تنظیمات و مجوزها
  • افزودن وابستگی ها
  • پیوند دادن به حساب سرویس
  • اجرای برنامه بر روی یک دستگاه مجازی یا دستگاه فیزیکی
  1. Flutter: ساخت رابط چت با پشتیبانی از گفتار به متن
  • ایجاد رابط چت
  • پیوند رابط چت
  • ادغام بسته Dialogflow gRPC در برنامه
  1. Dialogflow: مدل سازی عامل Dialogflow
  • اهداف خوش آمد گویی و بازگشت را پیکربندی کنید
  • از پایگاه دانش پرسش و پاسخ استفاده کنید

پیش نیاز

  • تجربه پایه دارت/فلاتر
  • تجربه پایه Google Cloud Platform
  • تجربه اولیه با Dialogflow ES

چیزی که خواهی ساخت

این کد لبه به شما نشان می دهد که چگونه یک ربات پرسش و پاسخ تلفن همراه بسازید، که می تواند به سوالات رایج در مورد ابزار Dialogflow پاسخ دهد. کاربران نهایی می توانند با رابط متنی تعامل داشته باشند یا از طریق میکروفون داخلی یک دستگاه تلفن همراه صدایی را برای دریافت پاسخ پخش کنند.

چیزی که یاد خواهید گرفت

  • نحوه ایجاد یک چت بات با Dialogflow Essentials
  • نحوه ادغام Dialogflow در یک برنامه Flutter با بسته Dialogflow gRPC
  • نحوه تشخیص مقاصد متن با Dialogflow
  • نحوه استریم صدا از طریق میکروفون به Dialogflow
  • نحوه استفاده از رابط پایگاه دانش برای وارد کردن سؤالات متداول عمومی
  • چت بات را از طریق رابط متنی و صوتی در یک دستگاه مجازی یا فیزیکی آزمایش کنید

آنچه شما نیاز دارید

  • برای ایجاد یک عامل Dialogflow به یک آدرس Google Identity / Gmail نیاز دارید.
  • برای دانلود حساب سرویس، باید به Google Cloud Platform دسترسی داشته باشید
  • یک محیط توسعه دهنده Flutter

محیط توسعه دهنده Flutter خود را تنظیم کنید

  1. سیستم عاملی که فلاتر را روی آن نصب می کنید را انتخاب کنید.
  1. شما می توانید با استفاده از هر ویرایشگر متنی که با ابزارهای خط فرمان ما ترکیب شده است، با Flutter برنامه بسازید. با این حال، این کارگاه از اندروید استودیو استفاده خواهد کرد. افزونه‌های Flutter و Dart برای Android Studio تکمیل کد، برجسته‌سازی نحو، کمک‌های ویرایش ویجت، پشتیبانی از اجرا و اشکال‌زدایی و موارد دیگر را در اختیار شما قرار می‌دهند. مراحل را در https://flutter.dev/docs/get-started/editor دنبال کنید

2. تنظیم محیط

Dialogflow: یک عامل جدید Dialogflow ES ایجاد کنید

  1. را باز کنید
  2. در نوار سمت چپ، درست در زیر لوگو، " ایجاد نماینده جدید " را در منوی کشویی انتخاب کنید. (توجه داشته باشید، روی منوی کرکره‌ای که می‌گوید «Global» کلیک نکنید، برای استفاده از پایگاه دانش پرسش‌های متداول به یک نمونه Dialogflow نیاز داریم که جهانی است.)
  3. نام عاملی را تعیین کنید yourname-dialogflow (از نام خود استفاده کنید)
  4. به عنوان زبان پیش فرض، انگلیسی - en را انتخاب کنید.
  5. به عنوان منطقه زمانی پیش‌فرض، منطقه زمانی را انتخاب کنید که نزدیک‌ترین منطقه به شماست.
  6. Mega Agent را انتخاب نکنید . (با این ویژگی می توانید یک عامل فراگیر ایجاد کنید که می تواند بین عوامل "زیر" هماهنگ شود. ما اکنون به این نیاز نداریم.)
  7. روی ایجاد کلیک کنید.

ایجاد صفحه پروژه جدید

Dialogflow را پیکربندی کنید

  1. روی نماد چرخ دنده ، در منوی سمت چپ، در کنار نام پروژه خود کلیک کنید.

کشویی پروژه جدید ایجاد کنید

  1. شرح عامل زیر را وارد کنید: ربات گفتگوی پرسش‌های متداول Dialogflow
  2. ویژگی های بتا را فعال کنید ، سوئیچ را برگردانید.

Dialogflow Essentials V2Beta1

  1. روی تب Speech کلیک کنید و مطمئن شوید که کادر Auto Speech Adaptation فعال است.
  2. به صورت اختیاری، می‌توانید سوئیچ اول را نیز بچرخانید، این کار مدل گفتار را بهبود می‌بخشد، اما تنها زمانی در دسترس است که آزمایشی Dialogflow را ارتقا دهید.
  3. روی ذخیره کلیک کنید

Google Cloud: یک حساب سرویس دریافت کنید

پس از ایجاد یک عامل در Dialogflow، یک پروژه Google Cloud باید در کنسول Google Cloud ایجاد شود.

  1. Google Cloud Console را باز کنید:
  2. مطمئن شوید که با همان حساب Google در Dialogflow وارد شده اید و پروژه: yourname-dialogflow در نوار آبی بالا انتخاب کنید.
  3. بعد، Dialogflow API در نوار ابزار بالا جستجو کنید و روی نتیجه Dialogflow API در منوی بازشو کلیک کنید.

Dialogflow API را فعال کنید

  1. روی دکمه آبی مدیریت کلیک کنید و در نوار منو سمت چپ روی Credentials کلیک کنید. (زمانی که Dialogflow هنوز فعال نشده است، ابتدا Enable را بزنید)

کنسول GCP اعتبارنامه

  1. روی Create credentials (در بالای صفحه خود) کلیک کنید و Service account را انتخاب کنید.

اعتبارنامه ایجاد کنید

  1. نام حساب سرویس را مشخص کنید: flutter_dialogflow ، شناسه و توضیحات، و روی Create کلیک کنید.

یک حساب کاربری ایجاد کنید

  1. در مرحله 2، باید نقش را انتخاب کنید: Dialogflow API Admin ، روی Continue و Done کلیک کنید.
  2. روی حساب سرویس flutter_dialogflow کلیک کنید، روی تب Keys کلیک کنید و Add Key > Create new key را بزنید

کلید ایجاد کنید

  1. یک کلید JSON ایجاد کنید. نام آن را به credentials.json تغییر دهید و آن را در مکانی امن از هارد دیسک خود ذخیره کنید. بعداً از آن استفاده خواهیم کرد.

کلید JSON

عالی، تمام ابزارهایی که نیاز داریم به درستی تنظیم شده اند. اکنون می توانیم با ادغام Dialogflow در برنامه خود شروع کنیم!

3. Flutter: ساختن برنامه چت

برنامه Boilerplate را ایجاد کنید

  1. Android Studio را باز کرده و Start a new Flutter project را انتخاب کنید.
  2. Flutter Application را به عنوان نوع پروژه انتخاب کنید. سپس روی Next کلیک کنید.
  3. بررسی کنید که مسیر Flutter SDK مکان SDK را مشخص می کند (اگر قسمت متن خالی است، Install SDK... را انتخاب کنید).
  4. نام پروژه را وارد کنید (به عنوان مثال flutter_dialogflow_agent ). سپس روی Next کلیک کنید.
  5. نام بسته را تغییر دهید و روی Finish کلیک کنید.

اپلیکیشن فلاتر جدید ایجاد کنید

این یک برنامه نمونه با Material Components ایجاد می کند.

منتظر بمانید تا Android Studio SDK را نصب کند و پروژه را ایجاد کند.

تنظیمات و مجوزها

  1. کتابخانه ضبط صدا sound_stream که ما استفاده خواهیم کرد، حداقل به minSdk 21 نیاز دارد. بنابراین اجازه دهید این را در android/app/build.gradle در بلوک defaultConfig تغییر دهیم. (توجه داشته باشید، 2 فایل build.gradle در پوشه اندروید وجود دارد، اما فایلی که در پوشه برنامه قرار دارد، مناسب است.) 
defaultConfig {
   applicationId "com.myname.flutter_dialogflow_agent"
   minSdkVersion 21
   targetSdkVersion 30
   versionCode flutterVersionCode.toInteger()
   versionName flutterVersionName
}
  1. برای دادن مجوز به میکروفون و همچنین اجازه دسترسی برنامه به عامل Dialogflow که در فضای ابری اجرا می شود، باید مجوزهای INTERNET و RECORD_AUDIO را به فایل app/src/main/AndroidManifest.xml اضافه کنیم. چندین فایل AndroidManifest.xml در پروژه Flutter شما وجود دارد، اما شما به فایلی در پوشه اصلی نیاز دارید. می توانید خطوط را درست در داخل تگ های مانیفست اضافه کنید. 
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />

افزودن وابستگی ها

ما از بسته های sound_stream ، rxdart و dialogflow_grpc استفاده خواهیم کرد.

  1. وابستگی 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. وابستگی 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. وابستگی 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!

در حال بارگیری حساب سرویس و اطلاعات پروژه Google Cloud

  1. در پروژه خود یک دایرکتوری ایجاد کنید و نام آن را assets بگذارید.
  2. فایل credentials.json را که از کنسول Google Cloud دانلود کرده‌اید به پوشه دارایی‌ها منتقل کنید.
  3. pubspec.yaml را باز کنید و اکانت سرویس را به بلوک flutter اضافه کنید. 
flutter:
  uses-material-design: true
  assets:
    - assets/credentials.json

اجرای برنامه بر روی یک دستگاه فیزیکی

هنگامی که دستگاه اندرویدی دارید، می توانید گوشی خود را از طریق کابل USB وصل کنید و در دستگاه اشکال زدایی کنید. این مراحل را دنبال کنید تا این را از طریق صفحه Developer Options در دستگاه Android خود تنظیم کنید.

اجرای برنامه روی دستگاه مجازی

اگر می خواهید برنامه را روی یک دستگاه مجازی اجرا کنید، مراحل زیر را انجام دهید:

  1. روی Tools> AVD Manager کلیک کنید. (یا مدیر AVD را از نوار ابزار بالا انتخاب کنید، در شکل زیر صورتی برجسته شده است)

نوار ابزار بالای اندروید استودیو

  1. ما یک دستگاه مجازی اندروید هدف ایجاد خواهیم کرد، بنابراین می توانیم برنامه خود را بدون دستگاه فیزیکی آزمایش کنیم. برای جزئیات، به مدیریت AVD ها مراجعه کنید. هنگامی که یک دستگاه مجازی جدید را انتخاب کردید، می توانید روی آن دوبار کلیک کنید تا آن را شروع کنید.

AVD ها را مدیریت کنید

دستگاه مجازی

  1. در نوار ابزار اصلی Android Studio، از طریق منوی کشویی، یک دستگاه Android را به عنوان هدف انتخاب کنید و مطمئن شوید main.dart انتخاب شده است. سپس دکمه Run (مثلث سبز) را فشار دهید.

در پایین IDE، لاگ های موجود در کنسول را مشاهده خواهید کرد. متوجه خواهید شد که در حال نصب اندروید و برنامه Flutter استارتر شما است. این یک دقیقه طول می کشد، پس از آماده شدن دستگاه مجازی، ایجاد تغییرات فوق العاده سریع خواهد بود. پس از اتمام کار، برنامه شروع کننده Flutter را باز می کند.

برنامه Boilerplate

  1. بیایید میکروفون را برای برنامه چت بات خود فعال کنیم. روی دکمه گزینه های دستگاه مجازی کلیک کنید تا گزینه ها باز شوند. در تب میکروفون، هر 3 سوئیچ را فعال کنید.

گزینه های AVD

  1. بیایید Hot Reload را امتحان کنیم تا نشان دهیم با چه سرعتی می‌توان تغییرات ایجاد کرد.

در lib/main.dart ، عنوان MyHomePage را در کلاس MyApp به: Flutter Dialogflow Agent تغییر دهید. و PrimeSwatch را به Colors.orange تغییر دهید.

کد اول

فایل را ذخیره کنید یا روی نماد پیچ ​​در نوار ابزار Android Studio کلیک کنید. شما باید تغییر ایجاد شده را مستقیماً در دستگاه مجازی مشاهده کنید.

4. Flutter: ساخت رابط چت با پشتیبانی STT

ایجاد رابط چت

  1. یک فایل ویجت Flutter جدید در پوشه lib ایجاد کنید. (روی پوشه lib راست کلیک کنید، New > Flutter Widget > Stateful widget )، این فایل را فراخوانی کنید: chat.dart

کد زیر را در این فایل قرار دهید. این فایل دارت رابط چت را ایجاد می کند. Dialogflow هنوز کار نمی‌کند، فقط چیدمان همه مؤلفه‌ها و ادغام مؤلفه میکروفون برای امکان پخش جریانی است. نظرات موجود در فایل، به جایی که بعداً 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),
      ),
    );
  }
}

جستجو در فایل chat.dart برای ساخت ویجت این رابط ربات چت را می سازد که شامل:

  • ListView که شامل تمام بالون های چت کاربر و ربات چت است. از کلاس ChatMessage استفاده می کند که پیام های چت را با آواتار و متن ایجاد می کند.
  • TextField برای وارد کردن پرس و جوهای متنی
  • IconButton با نماد ارسال، برای ارسال عبارت های متنی به Dialogflow
  • IconButton با یک میکروفون برای ارسال جریان های صوتی به Dialogflow، که پس از فشار دادن حالت را تغییر می دهد.

پیوند رابط چت

  1. main.dart را باز کنید و Widget build را تغییر دهید، بنابراین فقط رابط Chat() را نمونه برداری می کند. تمام کدهای آزمایشی دیگر را می توان حذف کرد.
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. برنامه را اجرا کنید. ( اگر برنامه قبلاً راه اندازی شده بود. دستگاه مجازی را متوقف کنید و main.dart را مجدداً اجرا کنید ). وقتی برای اولین بار برنامه خود را با رابط چت اجرا می کنید. یک پاپ آپ مجوز دریافت خواهید کرد که از شما می پرسد آیا می خواهید میکروفون را مجاز کنید. کلیک کنید: هنگام استفاده از برنامه .

مجوزها

  1. با قسمت متن و دکمه ها بازی کنید. وقتی یک پرس و جو متنی را تایپ می کنید و اینتر را فشار می دهید یا روی دکمه ارسال ضربه می زنید، عبارت جستجوی متنی را مشاهده می کنید که در تب Run اندروید استودیو ثبت شده است. هنگامی که روی دکمه میکروفون ضربه می زنید و آن را متوقف می کنید، جریان صوتی را مشاهده می کنید که در تب Run ثبت شده است.

گزارش جریان صوتی

عالی است، ما اکنون آماده هستیم تا برنامه را با Dialogflow یکپارچه کنیم!

ادغام برنامه Flutter خود با Dialogflow_gRPC

  1. chat.dart را باز کنید و واردهای زیر را اضافه کنید: 
import 'package:dialogflow_grpc/dialogflow_grpc.dart';
import 'package:dialogflow_grpc/generated/google/cloud/dialogflow/v2beta1/session.pb.dart';
  1. در بالای فایل، درست در زیر // TODO DialogflowGrpcV2Beta1 class instance خط زیر را اضافه کنید تا نمونه کلاس Dialogflow را نگه دارید: 
DialogflowGrpcV2Beta1 dialogflow;
  1. متد initPlugin() را جستجو کنید و کد زیر را درست زیر نظر TODO اضافه کنید: 
    // Get a Service account
    final serviceAccount = ServiceAccount.fromString(
        '${(await rootBundle.loadString('assets/credentials.json'))}');
    // Create a DialogflowGrpc Instance
    dialogflow = DialogflowGrpcV2Beta1.viaServiceAccount(serviceAccount);

با این کار یک نمونه Dialogflow مجاز به پروژه Google Cloud شما با حساب سرویس ایجاد می شود. (مطمئن شوید که credentials.json را در پوشه assets دارید!)

باز هم، برای اهداف نمایشی در مورد نحوه کار با Dialogflow gRPC این مشکلی ندارد، اما برای برنامه‌های تولیدی، نمی‌خواهید فایل credentials.json را در پوشه دارایی‌ها ذخیره کنید، زیرا ایمن در نظر گرفته نمی‌شود.

برقراری تماس detectIntent

  1. اکنون متد handleSubmitted() را پیدا کنید، اینجاست که جادو وارد می شود. درست در زیر نظر TODO، کد زیر را اضافه کنید. این کد پیام تایپ شده کاربر را به ListView اضافه می کند: 
ChatMessage message = ChatMessage(
 text: text,
 name: "You",
 type: true,
);

setState(() {
 _messages.insert(0, message);
});
  1. اکنون، درست در زیر کد قبلی، تماس detectIntent را انجام می دهیم، متن را از ورودی و یک زبان Code ارسال می کنیم. - نتیجه (در data.queryResult.fulfillment ) در 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. دستگاه مجازی را راه اندازی کنید و تماس هدف شناسایی را آزمایش کنید. نوع: hi باید با پیام خوش‌آمدگویی پیش‌فرض به شما خوشامد بگوید. هنگامی که چیز دیگری را تایپ می کنید، بازگشت پیش فرض را به شما برمی گرداند.

برقراری تماس streamingDetectIntent

  1. اکنون متد handleStream() را پیدا کنید، اینجا جایی است که جادو برای پخش صدا وارد می شود. ابتدا درست در زیر اولین TODO، یک InputConfigV2beta1 صوتی با BiasList ایجاد کنید تا مدل صدا را بایاس کنید. از آنجایی که ما از یک تلفن (دستگاه مجازی) استفاده می کنیم، نمونه هرتز 16000 و رمزگذاری خطی 16 خواهد بود. این بستگی به سخت افزار یا میکروفون دستگاه شما دارد که استفاده می کنید. برای میکروفون مک بوک داخلی من 16000 خوب بود. (به اطلاعات بسته 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. در مرحله بعد، ما متد streamingDetectIntent را در شی dialogflow فراخوانی می کنیم که جلسه Dialogflow ما را نگه می دارد: 
final responseStream = dialogflow.streamingDetectIntent(config, _audioStream);
  1. با answerStream، ما در نهایت می‌توانیم به رونوشت ورودی، درخواست کاربر شناسایی‌شده و پاسخ هدف مطابق شناسایی‌شده گوش دهیم. ما این را در ChatMessage روی صفحه چاپ خواهیم کرد: 
// Get the transcript and detectedIntent and show on screen
responseStream.listen((data) {
  //print('----');
  setState(() {
    //print(data);
    String transcript = data.recognitionResult.transcript;
    String queryText = data.queryResult.queryText;
    String fulfillmentText = data.queryResult.fulfillmentText;

    if(fulfillmentText.isNotEmpty) {

      ChatMessage message = new ChatMessage(
        text: queryText,
        name: "You",
        type: true,
      );

      ChatMessage botMessage = new ChatMessage(
        text: fulfillmentText,
        name: "Bot",
        type: false,
      );

      _messages.insert(0, message);
      _textController.clear();
      _messages.insert(0, botMessage);

    }
    if(transcript.isNotEmpty) {
      _textController.text = transcript;
    }

  });
},onError: (e){
  //print(e);
},onDone: () {
  //print('done');
});

تمام است، برنامه خود را راه اندازی کنید و آن را روی دستگاه مجازی آزمایش کنید، دکمه میکروفون را فشار دهید و بگویید: "سلام" .

این باعث می شود که هدف خوش آمدگویی پیش فرض Dialogflow فعال شود. نتایج بر روی صفحه نمایش چاپ خواهد شد. اکنون که Flutter با ادغام Dialogflow عالی کار می‌کند، می‌توانیم روی مکالمه ربات چت خود کار کنیم.

5. Dialogflow: مدل سازی عامل Dialogflow

Dialogflow Essentials یک مجموعه توسعه برای ایجاد رابط های کاربری مکالمه است. بنابراین ربات‌های چت، ربات‌های صوتی، دروازه‌های تلفن. همه شما می توانید آن را با یک ابزار بسازید، و حتی می توانید چندین کانال را به بیش از 20 زبان مختلف پشتیبانی کنید. طراحان Dialogflow UX (مدل سازان، زبان شناسان) یا توسعه دهندگان با مشخص کردن عبارات آموزشی برای آموزش یک مدل یادگیری ماشینی زیربنایی، قصد ایجاد می کنند.

یک intent قصد کاربر را دسته بندی می کند. برای هر عامل Dialogflow ES، می توانید مقاصد زیادی را تعریف کنید، جایی که مقاصد ترکیبی شما می توانند یک مکالمه کامل را انجام دهند. هر هدف می تواند شامل پارامترها و پاسخ ها باشد.

تطبیق یک قصد به عنوان طبقه بندی قصد یا تطبیق قصد نیز شناخته می شود. این مفهوم اصلی در Dialogflow ES است. هنگامی که یک intent مطابقت دارد، می‌تواند پاسخی را برگرداند، پارامترها را جمع‌آوری کند (استخراج موجودیت) یا کد webhook (تحقق) را فعال کند، برای مثال، برای واکشی داده‌ها از پایگاه داده.

وقتی یک کاربر نهایی چیزی را در یک chatbot می‌نویسد یا می‌گوید، که به آن عبارت یا بیان کاربر گفته می‌شود، Dialogflow ES این عبارت را بر اساس عبارات آموزشی با بهترین هدف عامل Dialogflow شما مطابقت می‌دهد. مدل یادگیری ماشینی Dialogflow ES زیر کلاه بر روی آن عبارات آموزشی آموزش داده شده است.

Dialogflow ES با مفهومی به نام context کار می کند. درست مانند یک انسان، Dialogflow ES می‌تواند زمینه را در نوبت دوم و سوم به خاطر بسپارد. به این ترتیب می تواند گفته های قبلی کاربر را پیگیری کند.

در اینجا اطلاعات بیشتری در مورد اهداف Dialogflow وجود دارد .

تغییر هدف پیش‌فرض خوش‌آمدگویی

هنگامی که یک عامل جدید Dialogflow ایجاد می کنید، دو هدف پیش فرض به طور خودکار ایجاد می شود. پیش‌فرض پیش‌فرض خوش‌آمدگویی ، اولین جریانی است که هنگام شروع مکالمه با نماینده به آن می‌رسید. هدف پیش‌فرض بازگشتی ، جریانی است که وقتی نماینده نتواند شما را درک کند یا نتواند هدفی را با آنچه که گفتید مطابقت دهد، دریافت خواهید کرد.

در اینجا پیام خوشامدگویی برای پیش‌فرض پیش‌فرض پیش‌فرض آمده است:

کاربر

عامل

سلام

"سلام، من ربات پرسش و پاسخ Dialogflow هستم، می توانم به سوالات در Dialogflow پاسخ دهم."

"چه چیزی دوست دارید بدانید؟"

  1. Intents > Default Welcome Intent را کلیک کنید
  2. به پایین اسکرول کنید تا به پاسخ ها بروید.
  3. تمام پاسخ های متنی را پاک کنید.
  4. در تب پیش فرض، 2 پاسخ زیر را ایجاد کنید:
  • سلام، من ربات پرسش و پاسخ Dialogflow هستم، می توانم به سوالات در Dialogflow پاسخ دهم. چه چیزی را دوست دارید بدانید؟
  • سلام، من ربات پرسش و پاسخ Dialogflow هستم، آیا در مورد Dialogflow سوالی دارید؟ چگونه می توانم کمک کنم؟

پیکربندی باید مشابه این اسکرین شات باشد.

هدف پیش‌فرض خوش‌آمدگویی را ویرایش کنید

  1. روی ذخیره کلیک کنید
  2. بیایید این قصد را آزمایش کنیم. ابتدا، می‌توانیم آن را در Dialogflow Simulator آزمایش کنیم. نوع: سلام . باید یکی از این پیام ها را برگرداند:
  • سلام، من ربات پرسش و پاسخ Dialogflow هستم، می توانم به سوالات در Dialogflow پاسخ دهم. چه چیزی را دوست دارید بدانید؟
  • سلام، من ربات پرسش و پاسخ Dialogflow هستم، آیا در مورد Dialogflow سوالی دارید؟ چگونه می توانم کمک کنم؟

تغییر هدف پیش‌فرض بازگشتی

  1. Intents > Default Fallback Intent را کلیک کنید
  2. به پایین اسکرول کنید تا به پاسخ ها بروید.
  3. تمام پاسخ های متنی را پاک کنید.
  4. در تب پیش فرض، پاسخ زیر را ایجاد کنید:
  • متاسفانه من جواب این سوال را نمی دانم. آیا وب سایت ما را بررسی کرده اید؟ http://www.dialogflow.com؟
  1. روی ذخیره کلیک کنید

اتصال به پایگاه دانش آنلاین

کانکتورهای دانش تکمیل کننده مقاصد تعریف شده هستند. آنها اسناد دانش را برای یافتن پاسخ های خودکار تجزیه می کنند. (به عنوان مثال، سؤالات متداول یا مقالات از فایل‌های CSV، وب‌سایت‌های آنلاین، یا حتی فایل‌های PDF!) برای پیکربندی آنها، یک یا چند پایگاه دانش را تعریف می‌کنید که مجموعه‌ای از اسناد دانش هستند.

درباره رابط های دانش بیشتر بخوانید.

بیایید این را امتحان کنیم.

  1. دانش (بتا) را در منو انتخاب کنید.

پایگاه دانش

  1. روی دکمه آبی سمت راست کلیک کنید: Create Knowledge Base
  2. به عنوان یک نام پایگاه دانش تایپ کنید. پرسش‌های متداول Dialogflow و ذخیره را بزنید.
  3. روی ایجاد اولین پیوند کلیک کنید

پایگاه دانش اول

  1. با این کار یک پنجره باز می شود.

از کانفیگ زیر استفاده کنید:

نام سند: DialogflowFAQ نوع دانش: FAQ نوع Mime: text/html

  1. آدرس اینترنتی که داده ها را از آن بارگیری می کنیم این است:

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

  1. روی ایجاد کلیک کنید

پایگاه دانش ایجاد شده است:

پایگاه دانش ایجاد شد

  1. به قسمت Responses بروید و روی Add Response کلیک کنید

پاسخ های زیر را ایجاد کنید و ذخیره را بزنید. 

$Knowledge.Answer[1]
  1. روی View Detail کلیک کنید

مشاهده جزئیات

  1. فعال کردن بارگذاری مجدد خودکار را برای واکشی خودکار تغییرات هنگام به‌روزرسانی صفحه وب سؤالات متداول انتخاب کنید و ذخیره را فشار دهید.

این همه سؤالات متداول را که در Dialogflow پیاده‌سازی کرده‌اید نمایش می‌دهد. این آسان است!

بدانید که می‌توانید برای وارد کردن سؤالات متداول به نماینده خود به یک وب‌سایت HTML آنلاین با سؤالات متداول اشاره کنید. حتی امکان آپلود PDF با یک بلوک متن وجود دارد و Dialogflow خودش سوالاتی را مطرح می کند.

اکنون سؤالات متداول باید به عنوان "اضافی" برای افزودن به عوامل خود، در کنار جریان های قصد شما در نظر گرفته شوند. پرسش‌های متداول پایگاه دانش نمی‌تواند مدل را آموزش دهد. بنابراین پرسیدن سؤالات به روشی کاملاً متفاوت، ممکن است مطابقت نداشته باشد زیرا از درک زبان طبیعی (مدل های یادگیری ماشینی) استفاده نمی کند. به همین دلیل است که گاهی اوقات ارزش آن را دارد که سؤالات متداول خود را به اهداف تبدیل کنید.

  1. سوالات را در شبیه ساز سمت راست تست کنید.
  2. وقتی همه چیز درست شد، به برنامه Flutter خود برگردید و ربات چت و صوتی خود را با این محتوای جدید آزمایش کنید! سوالاتی را که در Dialogflow بارگذاری کرده اید بپرسید.

نتیجه

6. تبریک می گویم

تبریک می‌گوییم، شما با موفقیت اولین برنامه Flutter خود را با ادغام ربات گفتگوی Dialogflow ایجاد کردید، آفرین!

آنچه را پوشش داده ایم

  • نحوه ایجاد یک چت بات با Dialogflow Essentials
  • نحوه ادغام Dialogflow در یک برنامه Flutter
  • نحوه تشخیص مقاصد متن با Dialogflow
  • نحوه استریم صدا از طریق میکروفون به Dialogflow
  • نحوه استفاده از رابط پایگاه دانش

بعدش چی؟

آیا از این آزمایشگاه کد لذت می برید؟ نگاهی به این آزمایشگاه های بزرگ Dialogflow بیندازید!

آیا علاقه مندید که چگونه بسته Dialogflow gRPC را برای Dart/Flutter بسازم؟