Dialogflow Essentials ile Android İçin Ses Bot'ları Derleyin Fırfır Kollu

1. Başlamadan önce

Bu codelab'de, basit bir Dialogflow Essentials (ES) metin ve sesli botunu Flutter uygulamasına nasıl entegre edeceğinizi öğreneceksiniz. Dialogflow ES, etkileşimli kullanıcı arayüzleri oluşturmaya yönelik bir geliştirme paketidir. Bu nedenle chatbot'lar, sesli botlar ve telefon ağ geçitleri. Aynı araçla oluşturabilir ve 20'den fazla farklı dilde birden fazla kanalı destekleyebilirsiniz. Dialogflow, Google Asistan, Slack ve Facebook Messenger gibi birçok popüler sohbet platformuyla entegre olur. Bu platformlardan biri için aracı oluşturmak istiyorsanız birçok entegrasyon seçeneğinden birini kullanmanız gerekir. Ancak mobil cihazlar için chatbot oluşturmak istiyorsanız özel entegrasyon oluşturmanız gerekir. Temel bir makine öğrenimi modelini eğitmek için eğitim ifadeleri belirterek niyetler oluşturursunuz.

Bu laboratuvar, bulut geliştiricilerin sıkça takip ettiği adımlara uygun şekilde sıralanmıştır:

  1. Ortam Kurulumu
  • Dialogflow: Yeni bir Dialogflow ES aracısı oluşturma
  • Dialogflow: Dialogflow'u yapılandırma
  • Google Cloud: Hizmet hesabı oluşturma
  1. Flutter: Sohbet uygulaması oluşturma
  • Flutter projesi oluşturma
  • Ayarları ve izinleri yapılandırma
  • Bağımlılıkları ekleme
  • Hizmet hesabına bağlama
  • Uygulamayı sanal cihazda veya fiziksel cihazda çalıştırma
  1. Flutter: Konuşmayı metne dönüştürme desteğiyle sohbet arayüzü oluşturma
  • Sohbet arayüzünü oluşturma
  • Sohbet arayüzünü bağlama
  • Dialogflow gRPC paketini uygulamaya entegre etme
  1. Dialogflow: Dialogflow aracısını modelleme
  • Karşılama ve yedek niyetlerini yapılandırma
  • SSS bilgi tabanından yararlanma

Ön koşul

  • Temel Dart/Flutter deneyimi
  • Temel Google Cloud Platform deneyimi
  • Dialogflow ES ile ilgili temel deneyim

Ne oluşturacaksınız?

Bu codelab'de, Dialogflow aracıyla ilgili en sık sorulan soruları yanıtlayabilen bir mobil SSS botu oluşturmayı öğreneceksiniz. Son kullanıcılar, yanıt almak için metin arayüzüyle etkileşime geçebilir veya mobil cihazın yerleşik mikrofonu aracılığıyla ses akışı yapabilir.

Neler öğreneceksiniz?

  • Dialogflow Essentials ile chatbot oluşturma
  • Dialogflow gRPC paketiyle Dialogflow'u Flutter uygulamasına entegre etme
  • Dialogflow ile metin amaçlarını algılama
  • Mikrofon aracılığıyla Dialogflow'a ses aktarma
  • Herkese açık SSS'leri içe aktarmak için bilgi bankası bağlayıcısından nasıl yararlanılır?
  • Sanal veya fiziksel bir cihazda metin ve ses arayüzü üzerinden chatbot'u test etme

İhtiyacınız olanlar

  • Dialogflow aracısı oluşturmak için Google kimliğiniz / Gmail adresiniz olmalıdır.
  • Hizmet hesabı indirmek için Google Cloud Platform'a erişmeniz gerekir.
  • Flutter geliştirme ortamı

Flutter geliştirme ortamınızı kurma

  1. Flutter'ı yüklediğiniz işletim sistemini seçin.
  1. Komut satırı araçlarımızla birlikte herhangi bir metin düzenleyiciyi kullanarak Flutter ile uygulamalar oluşturabilirsiniz. Ancak bu atölye çalışmasında Android Studio kullanılacaktır. Android Studio için Flutter ve Dart eklentileri; kod tamamlama, sözdizimi vurgulama, widget düzenleme yardımı, çalıştırma ve hata ayıklama desteği gibi özellikler sunar. https://flutter.dev/docs/get-started/editor adresindeki adımları uygulayın.

2. Ortam Kurulumu

Dialogflow: Yeni bir Dialogflow ES aracısı oluşturma

  1. 'u açın.
  2. Sol çubukta, logonun hemen altında bulunan açılır listeden "Yeni Temsilci Oluştur"u seçin. (SSS bilgi bankasından yararlanmak için Global bir Dialogflow örneğine ihtiyacımız olacağından "Global" yazan açılır listeyi tıklamayın.)
  3. Bir temsilci adı belirtin yourname-dialogflow (kendi adınızı kullanın)
  4. Varsayılan dil olarak İngilizce - en'yi seçin.
  5. Varsayılan saat dilimi olarak size en yakın saat dilimini seçin.
  6. Mega aracıyı seçmeyin. (Bu özellik sayesinde, "alt" temsilciler arasında koordinasyon sağlayabilen kapsamlı bir temsilci oluşturabilirsiniz. Şu anda buna ihtiyacımız yok.)
  7. Oluştur'u tıklayın.

Yeni proje oluşturma ekranı

Dialogflow'u yapılandırma

  1. Sol menüde, proje adınızın yanındaki dişli simgesini tıklayın.

Yeni proje açılır listesi oluşturma

  1. Aşağıdaki temsilci açıklamasını girin: Dialogflow SSS Chatbot'u
  2. Beta özelliklerini etkinleştirin.

Dialogflow Essentials V2Beta1

  1. Konuşma sekmesini tıklayın ve Otomatik Konuşma Uyarlama kutusunun etkin olduğundan emin olun.
  2. İsteğe bağlı olarak ilk anahtarı da çevirebilirsiniz. Bu işlem, Konuşma Modelini iyileştirir ancak yalnızca Dialogflow deneme sürümünü yükselttiğinizde kullanılabilir.
  3. Kaydet'i tıklayın

Google Cloud: Hizmet hesabı edinme

Dialogflow'da bir aracı oluşturduktan sonra Google Cloud Console'da bir Google Cloud projesi oluşturulmalıdır.

  1. Google Cloud Console'u açın:
  2. Dialogflow'da kullandığınız Google Hesabı ile giriş yaptığınızdan emin olun ve üstteki mavi çubukta yourname-dialogflow simgesini tıklayarak projeyi seçin.
  3. Ardından, üst araç çubuğunda Dialogflow API simgesini arayın ve açılır listede Dialogflow API sonucunu tıklayın.

Dialogflow API'yi Etkinleştirme

  1. Mavi Yönet düğmesini ve soldaki menü çubuğunda Kimlik bilgileri'ni tıklayın. (Dialogflow henüz etkinleştirilmediyse önce Etkinleştir'i tıklayın)

Kimlik bilgileri GCP Console

  1. Kimlik bilgisi oluştur'u (ekranınızın üst kısmında) tıklayın ve Hizmet hesabı'nı seçin.

Kimlik bilgileri oluştur

  1. Hizmet hesabı adı: flutter_dialogflow, kimlik ve açıklama belirtip Oluştur'u tıklayın.

Hizmet hesabı oluşturma

  1. 2. adımda rolü seçmeniz gerekir: Dialogflow API Admin, Devam ve Bitti'yi tıklayın.
  2. flutter_dialogflow hizmet hesabını tıklayın, Anahtarlar sekmesini tıklayın ve Anahtar Ekle > Yeni anahtar oluştur'u seçin.

Anahtar oluştur

  1. JSON anahtarı oluşturun. Dosyayı credentials.json olarak yeniden adlandırın ve sabit sürücünüzün güvenli bir konumunda saklayın. Bu bilgiyi daha sonra kullanacağız.

JSON anahtarı

Mükemmel, ihtiyacımız olan tüm araçlar doğru şekilde ayarlandı. Artık Dialogflow'u uygulamamıza entegre etmeye başlayabiliriz.

3. Flutter: Chat Uygulaması Oluşturma

Boilerplate uygulamasını oluşturma

  1. Android Studio'yu açın ve Start a new Flutter project'i (Yeni bir Flutter projesi başlat) seçin.
  2. Proje türü olarak Flutter Uygulaması'nı seçin. Ardından İleri'yi tıklayın.
  3. Flutter SDK yolunun, SDK'nın konumunu belirttiğini doğrulayın (metin alanı boşsa SDK'yı yükle... seçeneğini belirleyin).
  4. Bir proje adı girin (örneğin, flutter_dialogflow_agent). Ardından Sonraki'yi tıklayın.
  5. Paket adını değiştirip Bitir'i tıklayın.

Yeni Flutter uygulaması oluşturma

Bu işlem, Material Components ile örnek bir uygulama oluşturur.

Android Studio'nun SDK'yı yüklemesini ve projeyi oluşturmasını bekleyin.

Ayarlar ve İzinler

  1. Kullanacağımız ses kaydedici kitaplığı sound_stream için en az 21 minSdk gerekir. Bu nedenle, defaultConfig bloğundaki android/app/build.gradle dosyasında bu değeri değiştirelim. (Android klasöründe 2 build.gradle dosyası olduğunu ancak app klasöründeki dosyanın doğru dosya olduğunu unutmayın.)
defaultConfig {
   applicationId "com.myname.flutter_dialogflow_agent"
   minSdkVersion 21
   targetSdkVersion 30
   versionCode flutterVersionCode.toInteger()
   versionName flutterVersionName
}
  1. Mikrofona izin vermek ve uygulamanın bulutta çalışan Dialogflow aracısına ulaşmasını sağlamak için app/src/main/AndroidManifest.xml dosyasına INTERNET ve RECORD_AUDIO izinlerini eklememiz gerekir. Flutter projenizde birden fazla AndroidManifest.xml dosyası var ancak ana klasördeki dosyayı kullanmanız gerekiyor. Satırları doğrudan manifest etiketlerinin içine ekleyebilirsiniz.
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />

Bağımlılıkları ekleme

sound_stream, rxdart ve dialogflow_grpc paketlerini kullanacağız.

  1. sound_stream bağımlılığını ekleyin
$ 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 bağımlılığını ekleyin
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 bağımlılığını ekleyin
$ 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!

Hizmet hesabı ve Google Cloud proje bilgilerini yükleme

  1. Projenizde bir dizin oluşturun ve bu dizini assets olarak adlandırın.
  2. Google Cloud Console'dan indirdiğiniz credentials.json dosyasını assets klasörüne taşıyın.
  3. pubspec.yaml dosyasını açın ve hizmet hesabını flutter bloğuna ekleyin.
flutter:
  uses-material-design: true
  assets:
    - assets/credentials.json

Uygulamayı fiziksel bir cihazda çalıştırma

Android cihazınız varsa telefonunuzu USB kablosuyla bağlayıp cihazda hata ayıklama yapabilirsiniz. Android cihazınızdaki Geliştirici Seçenekleri ekranından bu özelliği ayarlamak için bu adımları uygulayın.

Uygulamayı sanal cihazda çalıştırma

Uygulamayı sanal bir cihazda çalıştırmak istiyorsanız aşağıdaki adımları uygulayın:

  1. Tools > AVD Manager'ı (Araçlar > AVD Yöneticisi) tıklayın. (Alternatif olarak, üst araç çubuğundan AVD Yöneticisi'ni seçin. Aşağıdaki şekilde pembe renkle vurgulanmıştır.)

Android Studio üst araç çubuğu

  1. Uygulamamızı fiziksel bir cihaz olmadan test edebilmek için hedef bir Android sanal cihazı oluşturacağız. Ayrıntılı bilgi için AVD'leri yönetme başlıklı makaleyi inceleyin. Yeni bir sanal cihaz seçtikten sonra çift tıklayarak başlatabilirsiniz.

AVD&#39;leri yönetme

Sanal Cihaz

  1. Ana Android Studio araç çubuğunda, açılır menüden hedef olarak bir Android cihaz seçin ve main.dart dosyasının seçili olduğundan emin olun. Ardından Çalıştır düğmesine (yeşil üçgen) basın.

IDE'nin alt kısmında günlükleri konsolda görürsünüz. Android'in ve başlangıç Flutter uygulamanızın yüklendiğini görürsünüz. Bu işlem, sanal cihaz hazır olduğunda bir dakika sürer ve değişiklikler çok hızlı bir şekilde yapılır. İşlemler tamamlandığında başlangıç Flutter uygulaması açılır.

Boilerplate App

  1. Chatbot uygulamamız için mikrofonu etkinleştirelim. Seçenekleri açmak için sanal cihazın seçenekler düğmesini tıklayın. Mikrofon sekmesinde 3 anahtarı da etkinleştirin.

AVD seçenekleri

  1. Değişikliklerin ne kadar hızlı yapılabileceğini göstermek için Hot Reload'u deneyelim.

lib/main.dart dosyasında, MyApp sınıfındaki MyHomePage title öğesini Flutter Dialogflow Agent olarak değiştirin. Ayrıca primarySwatch değerini Colors.orange olarak değiştirin.

İlk kod

Dosyayı kaydedin veya Android Studio araç çubuğundaki yıldırım simgesini tıklayın. Değişikliğin doğrudan sanal cihazda yapıldığını görürsünüz.

4. Flutter: STT desteğiyle sohbet arayüzü oluşturma

Sohbet arayüzünü oluşturma

  1. lib klasöründe yeni bir Flutter widget dosyası oluşturun. (lib klasörünü sağ tıklayın, Yeni > Flutter Widget > Stateful widget) Bu dosyayı şu şekilde adlandırın: chat.dart

Aşağıdaki kodu bu dosyaya yapıştırın. Bu dart dosyası, sohbet arayüzünü oluşturur. Dialogflow henüz çalışmıyor. Yalnızca tüm bileşenlerin düzeni ve akışlara izin vermek için mikrofon bileşeninin entegrasyonu yapılıyor. Dosyadaki yorumlar, Dialogflow'u daha sonra entegre edeceğimiz yerleri gösterir.

// 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 dosyasında Widget build ifadesini arayın. Bu ifade, aşağıdakileri içeren chatbot arayüzünü oluşturur:

  • Kullanıcı ve chatbot'un tüm sohbet balonlarını içeren ListView. Avatar ve metin içeren sohbet mesajları oluşturmak için ChatMessage sınıfını kullanır.
  • Metin sorguları girmek için TextField
  • Metin sorgularını Dialogflow'a göndermek için gönder simgesini içeren IconButton
  • Ses akışlarını Dialogflow'a göndermek için mikrofon içeren IconButton. Bu düğmeye basıldığında durum değişir.

Sohbet arayüzünü bağlama

  1. main.dart dosyasını açın ve Widget build öğesini yalnızca Chat() arayüzünü oluşturacak şekilde değiştirin. Diğer tüm demo kodları kaldırılabilir.
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. Uygulamayı çalıştırın. (Uygulama daha önce başlatıldıysa. Sanal cihazı durdurun ve main.dart dosyasını yeniden çalıştırın). Uygulamanızı sohbet arayüzüyle ilk kez çalıştırdığınızda Mikrofona izin vermek isteyip istemediğinizi soran bir izin pop-up'ı gösterilir. Uygulamayı kullanırken'i tıklayın.

İzinler

  1. Metin alanı ve düğmelerle oynayın. Bir metin sorgusu yazıp Enter tuşuna bastığınızda veya gönder düğmesine dokunduğunuzda, metin sorgusunun Android Studio'nun Çalıştır sekmesine kaydedildiğini görürsünüz. Mikrofon düğmesine dokunup durdurduğunuzda ses akışının Çalıştır sekmesine kaydedildiğini görürsünüz.

Ses yayını günlüğü

Harika, artık uygulamayı Dialogflow ile entegre etmeye hazırız.

Flutter uygulamanızı Dialogflow_gRPC ile entegre etme

  1. chat.dart dosyasını açın ve aşağıdaki içe aktarma işlemlerini ekleyin:
import 'package:dialogflow_grpc/dialogflow_grpc.dart';
import 'package:dialogflow_grpc/generated/google/cloud/dialogflow/v2beta1/session.pb.dart';
  1. Dosyanın en üstünde, // TODO DialogflowGrpcV2Beta1 class instance işaretinin hemen altına Dialogflow sınıfı örneğini tutmak için aşağıdaki satırı ekleyin:
DialogflowGrpcV2Beta1 dialogflow;
  1. initPlugin() yöntemini arayın ve TODO yorumunun hemen altına aşağıdaki kodu ekleyin:
    // Get a Service account
    final serviceAccount = ServiceAccount.fromString(
        '${(await rootBundle.loadString('assets/credentials.json'))}');
    // Create a DialogflowGrpc Instance
    dialogflow = DialogflowGrpcV2Beta1.viaServiceAccount(serviceAccount);

Bu işlem, hizmet hesabıyla Google Cloud projeniz için yetkilendirilmiş bir Dialogflow örneği oluşturur. (credentials.json dosyasının assets klasöründe olduğundan emin olun.)

Dialogflow gRPC ile nasıl çalışılacağını gösteren demo amaçlı bu örnekte sorun olmasa da üretim uygulamalarında, güvenli olmadığı için credentials.json dosyasını assets klasöründe depolamamanız gerekir.

detectIntent çağrısı yapma

  1. Şimdi handleSubmitted() yöntemini bulun. İşte sihrin başladığı yer burası. TODO yorumunun hemen altına aşağıdaki kodu ekleyin.Bu kod, kullanıcının yazdığı mesajı ListView'e ekler:
ChatMessage message = ChatMessage(
 text: text,
 name: "You",
 type: true,
);

setState(() {
 _messages.insert(0, message);
});
  1. Şimdi, önceki kodun hemen altına detectIntent çağrısını yapacağız. Girişten gelen metni ve bir languageCode'u ileteceğiz. - Sonuç (data.queryResult.fulfillment içinde) ListView'da yazdırılır:
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. Sanal cihazı başlatın ve amaç algılama çağrısını test edin. Tür: hi Varsayılan karşılama mesajıyla sizi karşılamalıdır. Başka bir şey yazdığınızda varsayılan yedek yanıtı döndürür.

streamingDetectIntent çağrısı yapma

  1. Şimdi handleStream() yöntemini bulun. Ses akışı için sihirli dokunuş burada devreye girer. İlk TODO'nun hemen altında, ses modelini etkilemek için biasList içeren bir ses InputConfigV2beta1 oluşturun. Telefon (sanal cihaz) kullandığımız için sampleHertz 16000, kodlama ise Linear 16 olacaktır. Bu, makine donanımınıza / kullandığınız mikrofona bağlıdır. Dahili Macbook mikrofonum için 16.000 iyi bir değerdi. (https://pub.dev/packages/sound_stream paketinin bilgilerine bakın)
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. Ardından, Dialogflow oturumumuzun bulunduğu dialogflow nesnesinde streamingDetectIntent yöntemini çağıracağız:
final responseStream = dialogflow.streamingDetectIntent(config, _audioStream);
  1. responseStream ile nihayet gelen transkripti, algılanan kullanıcı sorgusunu ve algılanan eşleşen amaç yanıtını dinleyebiliriz. Bu ifadeyi ekranda ChatMessage şeklinde yazdıracağız:
// 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');
});

Uygulamanızı başlatıp sanal cihazda test edin, mikrofon düğmesine basın ve "Merhaba" deyin.

Bu işlem, Dialogflow'un varsayılan karşılama niyetini tetikler. Sonuçlar ekrana yazdırılır. Flutter, Dialogflow entegrasyonuyla mükemmel şekilde çalıştığı için chatbot görüşmemize başlayabiliriz.

5. Dialogflow: Dialogflow aracısını modelleme

Dialogflow Essentials, etkileşimli kullanıcı arayüzleri oluşturmaya yönelik bir geliştirme paketidir. Bu nedenle chatbot'lar, sesli botlar ve telefon ağ geçitleri. Aynı araçla oluşturabilir ve 20'den fazla farklı dilde birden fazla kanalı destekleyebilirsiniz. Dialogflow UX tasarımcıları (aracı modelleyiciler, dilbilimciler) veya geliştiriciler, temel bir makine öğrenimi modelini eğitmek için eğitim ifadelerini belirterek niyetler oluşturur.

Niyet, kullanıcının amacını kategorize eder. Her Dialogflow ES aracısı için birçok amaç tanımlayabilirsiniz. Birleştirilmiş amaçlarınız, eksiksiz bir görüşmeyi yönetebilir. Her amaç parametreler ve yanıtlar içerebilir.

Bir amaca karşılık verme, amaç sınıflandırması veya amaç eşleştirme olarak da bilinir. Bu, Dialogflow ES'deki temel kavramdır. Bir amaç eşleştirildiğinde yanıt döndürebilir, parametre toplayabilir (varlık ayıklama) veya webhook kodunu (karşılama) tetikleyebilir. Örneğin, bir veritabanından veri getirmek için.

Bir son kullanıcı, chatbot'ta bir şey yazdığında veya söylediğinde (kullanıcı ifadesi olarak adlandırılır) Dialogflow ES, eğitim cümlelerine göre ifadeyi Dialogflow temsilcinizin en iyi niyetiyle eşleştirir. Dialogflow ES'in altyapısındaki makine öğrenimi modeli, bu eğitim ifadeleriyle eğitilmiştir.

Dialogflow ES, bağlam adı verilen bir kavramla çalışır. Dialogflow ES, tıpkı bir insan gibi 2. ve 3. konuşma sırasındaki bağlamı hatırlayabilir. Bu sayede, önceki kullanıcı ifadelerini takip edebilir.

Dialogflow niyetleri hakkında daha fazla bilgiyi burada bulabilirsiniz.

Varsayılan Karşılama Niyetini Değiştirme

Yeni bir Dialogflow aracısı oluşturduğunuzda iki varsayılan amaç otomatik olarak oluşturulur. Varsayılan Karşılama Niyeti, temsilciyle sohbet başlattığınızda ulaştığınız ilk akıştır. Varsayılan Yedek Amaç, temsilci sizi anlayamadığında veya bir amacı az önce söylediklerinizle eşleştiremediğinde elde edeceğiniz akıştır.

Varsayılan karşılama niyeti için karşılama mesajı aşağıda verilmiştir:

Kullanıcı

Ajan

Merhaba

"Merhaba, ben Dialogflow SSS botuyum. Dialogflow ile ilgili soruları yanıtlayabilirim."

"Ne öğrenmek istersiniz?"

  1. Niyetler > Varsayılan Karşılama Niyeti'ni tıklayın.
  2. Yanıtlar'a gidin.
  3. Tüm metin yanıtlarını temizleyin.
  4. Varsayılan sekmede aşağıdaki 2 yanıtı oluşturun:
  • Merhaba, ben Dialogflow SSS botuyum. Dialogflow ile ilgili soruları yanıtlayabilirim. Neyi öğrenmek istiyorsunuz?
  • Merhaba, ben Dialogflow SSS botuyum. Dialogflow ile ilgili sorularınız mı var? Size nasıl yardımcı olabilirim?

Yapılandırma, bu ekran görüntüsüne benzer olmalıdır.

Varsayılan Karşılama Niyetini Düzenleme

  1. Kaydet'i tıklayın
  2. Bu amacı test edelim. Öncelikle Dialogflow Simülatörü'nde test edebiliriz.Merhaba yazın. Aşağıdaki mesajlardan biri döndürülmelidir:
  • Merhaba, ben Dialogflow SSS botuyum. Dialogflow ile ilgili soruları yanıtlayabilirim. Neyi öğrenmek istiyorsunuz?
  • Merhaba, ben Dialogflow SSS botuyum. Dialogflow ile ilgili sorularınız mı var? Size nasıl yardımcı olabilirim?

Varsayılan Yedek Niyetini Değiştirme

  1. Niyetler > Varsayılan Geri Dönüş Niyeti'ni tıklayın.
  2. Yanıtlar'a gidin.
  3. Tüm metin yanıtlarını temizleyin.
  4. Varsayılan sekmede şu yanıtı oluşturun:
  • Maalesef bu sorunun yanıtını bilmiyorum. Web sitemizi ziyaret ettiniz mi? http://www.dialogflow.com?
  1. Kaydet'i tıklayın

Online bilgi bankasına bağlanma

Bilgi bağlayıcılar, tanımlanan amaçları tamamlar. Otomatik yanıtları bulmak için bilgi dokümanlarını ayrıştırır. (ör. CSV dosyalarındaki, online web sitelerindeki veya PDF dosyalarındaki SSS'ler ya da makaleler) Bunları yapılandırmak için bilgi belgeleri koleksiyonları olan bir veya daha fazla bilgi tabanı tanımlarsınız.

Bilgi Bağlayıcıları hakkında daha fazla bilgi edinin.

Bunu deneyelim.

  1. Menüden Bilgi'yi (beta) seçin.

Bilgi Tabanı

  1. Sağdaki mavi düğmeyi (Bilgi Bankası Oluştur) tıklayın.
  2. Bilgi Bankası adı olarak Dialogflow SSS yazıp Kaydet'i tıklayın.
  3. İlkini oluşturun bağlantısını tıklayın.

İlk bilgi bankası

  1. Bir pencere açılır.

Aşağıdaki yapılandırmayı kullanın:

Belge Adı: DialogflowFAQ Bilgi Türü: FAQ Mime Türü: text/html

  1. Verileri yüklediğimiz URL:

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

  1. Oluştur'u tıklayın

Bilgi bankası oluşturuldu:

Bilgi bankası oluşturuldu

  1. Yanıtlar bölümüne gidin ve Yanıt Ekle'yi tıklayın.

Aşağıdaki yanıtları oluşturun ve Kaydet'i tıklayın.

$Knowledge.Answer[1]
  1. Ayrıntıları Göster'i tıklayın.

Ayrıntıları Göster

  1. SSS web sayfası güncellendiğinde değişiklikleri otomatik olarak getirmek için Otomatik Yeniden Yüklemeyi Etkinleştir'i seçin ve Kaydet'e basın.

Bu işlem, Dialogflow'da uyguladığınız tüm SSS'leri gösterir.Çok kolay!

SSS'leri aracınıza aktarmak için SSS içeren bir online HTML web sitesine de yönlendirebileceğinizi unutmayın. Hatta bir metin bloğu içeren PDF yükleyebilirsiniz. Dialogflow, soruları kendisi oluşturur.

Artık SSS'ler, amaç akışlarınızın yanında, temsilcilerinize eklenecek "ekstralar" olarak değerlendirilmelidir. Bilgi Bankası SSS'leri modeli eğitemez. Bu nedenle, soruları tamamen farklı bir şekilde sormak, Doğal Dil Anlama (makine öğrenimi modelleri) kullanılmadığı için eşleşme sağlamayabilir. Bu nedenle, bazen SSS'lerinizi amaçlara dönüştürmek faydalı olabilir.

  1. Sağdaki simülatörde soruları test edin.
  2. Her şey düzgün çalıştığında Flutter uygulamanıza geri dönün ve sohbet ile sesli botunuzu bu yeni içerikle test edin. Dialogflow'a yüklediğiniz soruları sorun.

Sonuç

6. Tebrikler

Tebrikler, Dialogflow chatbot entegrasyonu içeren ilk Flutter uygulamanızı başarıyla oluşturdunuz.

İşlediğimiz konular

  • Dialogflow Essentials ile chatbot oluşturma
  • Dialogflow'u Flutter uygulamasına entegre etme
  • Dialogflow ile metin amaçlarını algılama
  • Mikrofon aracılığıyla Dialogflow'a ses aktarma
  • Bilgi bankası bağlayıcısından yararlanma

Sırada ne var?

Bu kod laboratuvarını beğendiniz mi? Aşağıdaki harika Dialogflow laboratuvarlarına göz atın.

Dart/Flutter için Dialogflow gRPC paketini nasıl oluşturduğumu merak mı ediyorsunuz?