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) metnini ve ses botunu Flutter uygulamasına nasıl entegre edeceğinizi öğreneceksiniz. Dialogflow ES, konuşmaya dayalı kullanıcı arayüzleri oluşturmaya yönelik bir geliştirme paketidir. Chatbot'lar, sesli bot'lar, telefon ağ geçitleri Hepiniz aynı araçla kanal oluşturabilir, hatta 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 bir entegrasyon oluşturmanız gerekir. Temel makine öğrenimi modelini eğitmek için eğitim ifadeleri belirterek niyet oluşturacaksınız.

Bu laboratuvar, bulut geliştiricilerinin 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ğlanılıyor.
  • Uygulamayı sanal veya fiziksel cihazda çalıştırma
  1. Flutter: Speech to Text desteğiyle sohbet arayüzünü oluşturma
  • Sohbet arayüzü 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 amaçlar
  • SSS bilgi bankasından yararlanma

Ön koşul

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

Neler oluşturacaksınız?

Bu codelab'de, Dialogflow aracıyla ilgili en sık sorulan soruları yanıtlayabilecek bir mobil SSS bot'unun nasıl oluşturulacağı anlatılmaktadır. Son kullanıcılar sorularına yanıt almak için metin arayüzüyle etkileşim kurabilir veya mobil cihazın yerleşik mikrofonundan ses çalabilir.

Neler öğreneceksiniz?

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

Gerekenler

  • Dialogflow aracısı oluşturmak için Google Kimliğine / Gmail adresine ihtiyacınız vardır.
  • Hizmet hesabı indirmek için Google Cloud Platform'a erişiminiz olmalıdır
  • Flutter geliştirme ortamı

Flutter geliştirme ortamınızı kurma

  1. Flutter'ı yüklediğiniz işletim sistemini seçin.
  1. Flutter ile uygulama oluşturmak için komut satırı araçlarımızla birlikte herhangi bir metin düzenleyiciyi kullanabilirsiniz. Ancak bu atölyede Android Studio kullanılacaktır. Android Studio için Flutter ve Dart eklentileri; kod tamamlama, söz dizimi vurgulama, widget düzenleme yardımcıları, çalıştırma ve hata ayıklama desteği ve diğer özelliklerden yararlanabilirsiniz. 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 "Yeni Temsilci Oluştur"u seçin açılır menüden kullanabilirsiniz. ("Global" yazan açılır listeyi tıklamayın. SSS bilgi tabanından yararlanabilmek için Global olan bir Dialogflow örneğine ihtiyacımız olacaktır.)
  3. Bir temsilci adı belirtin yourname-dialogflow (kendi adınızı kullanın)
  4. Varsayılan dil olarak İngilizce - en iyi seçeneğini belirleyin.
  5. Varsayılan saat dilimi olarak, size en yakın saat dilimini seçin.
  6. Mega Aracı'yı seçmeyin. (Bu özellik ile "alt" aracılar arasında düzenleme yapabilen bir kapsayıcı aracı oluşturabilirsiniz. Şu an buna ihtiyacımız yok.)
  7. Oluştur'u tıklayın.

Yeni proje ekranı oluşturun

Dialogflow'u yapılandırma

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

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

  1. Şu aracı açıklamasını girin: Dialogflow SSS Chatbot
  2. Beta özelliklerini etkinleştirin ve anahtarı çevirin.

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ı çevirebilirsiniz. Bu, Konuşma Modeli'ni 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ı alma

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

  1. Google Cloud Console'u açın:
  2. Dialogflow'dakiyle aynı Google Hesabı ile giriş yaptığınızdan emin olun ve üst mavi çubuktaki projeyi seçin: yourname-dialogflow.
  3. Ardından, üstteki araç çubuğunda Dialogflow API araması yapın ve açılır listedeki Dialogflow API sonucunu tıklayın.

Dialogflow API'yi Etkinleştirme

  1. Mavi renkli Yönet düğmesini ve ardından sol menü çubuğundaki Kimlik Bilgileri'ni tıklayın. (Dialogflow henüz etkinleştirilmediğinde önce Etkinleştir'e basın.)

Kimlik bilgileri GCP Console

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

Kimlik bilgileri oluştur

  1. Bir 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ı, Anahtarlar sekmesini ve Anahtar Ekle > Yeni anahtar oluştur

Anahtar oluştur

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

JSON anahtarı

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

3. Flutter: Chat Uygulamasını Oluşturma

Ortak metin uygulaması oluşturma

  1. Android Studio'yu açın ve Yeni bir Flutter projesi başlat'ı seçin.
  2. Proje türü olarak Flutter Application'ı 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. Proje adı girin (örneğin, flutter_dialogflow_agent). Ardından İleri'yi tıklayın.
  5. Paket adını değiştirin ve Son'u tıklayın.

Yeni Flutter uygulaması oluştur

Bu işlem, Materyal Bileşenleri 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 kullanılmalıdır. Şimdi bunu defaultConfig bloğundaki android/app/build.gradle bölümünde değiştirelim. (Android klasöründe 2 derleme.gradle dosyası olsa da uygulama klasöründeki dosya doğru olandır.)
defaultConfig {
   applicationId "com.myname.flutter_dialogflow_agent"
   minSdkVersion 21
   targetSdkVersion 30
   versionCode flutterVersionCode.toInteger()
   versionName flutterVersionName
}
  1. Mikrofon ve uygulamanın bulutta çalışan Dialogflow aracısına erişmesine izin vermek 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örde bu dosyaya ihtiyacınız olacak. 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 projesi bilgileri yükleniyor

  1. Projenizde bir dizin oluşturun ve bu dizine assets adını verin.
  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ğlayabilir ve cihazda hata ayıklayabilirsiniz. Android cihazınızdaki Geliştirici Seçenekleri ekranından bunu 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. Araçlar> AVD Yöneticisi'ne gidin. (Alternatif olarak, üst araç çubuğundan AVD Yöneticisi'ni seçin. Aşağıdaki şekilde pembe vurgulanmıştır)

Android Studio üst araç çubuğu

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

Ortalama görüntüleme oranlarını (AVD) yönetin

Sanal Cihaz

  1. Ana Android Studio araç çubuğunda, açılır listeden hedef olarak bir Android cihaz seçin ve main.dart'ı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 fark edeceksiniz. Bu işlem bir dakika sürer. Sanal cihaz hazır olduğunda değişiklikleri çok hızlı bir şekilde yapabilirsiniz. İşiniz bittiğinde başlatıcı Flutter uygulaması açılır.

Ortak Metin Uygulaması

  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 sekmesindeki 3 anahtarın tümünü etkinleştirin.

Ortalama görüntüleme süresi seçenekleri

  1. Değişikliklerin ne kadar hızlı yapılabileceğini göstermek için Hot Yeniden Yükleme'yi deneyelim.

lib/main.dart içinde, MyApp sınıfındaki MyHomePage başlığı'nı şu şekilde değiştirin: Flutter Dialogflow Agent. Ardından primarySwatch öğesini Colors.orange olarak değiştirin.

İlk kod

Dosyayı kaydedin veya Android Studio Araç Çubuğu'ndaki sürgü simgesini tıklayın. Doğrudan sanal cihazda yapılan değişikliği görürsünüz.

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

Sohbet arayüzü 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 > Durum bilgili widget), şu dosyayı çağı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ışmayacaktır. Yalnızca tüm bileşenlerin düzeniyle ilişkilidir ve akışlara izin verecek şekilde mikrofon bileşeninin entegrasyonu mevcuttur. Dosyadaki yorumlar, daha sonra Dialogflow'u entegre edeceğimiz yeri işaret eder.

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

Widget derlemesi için chat.dart dosyasında arama yapın. Bu komut, şunları içeren chatbot arayüzünü oluşturur:

  • Kullanıcı ve chatbot'tan gelen tüm sohbet balonlarını içeren ListView öğesidir. Avatar ve metin içeren sohbet mesajları oluşturan ChatMessage sınıfını kullanır.
  • Metin sorgularını girmek için TextField
  • Dialogflow'a metin sorguları göndermek için kullanılan gönder simgesine sahip IconButton
  • Dialogflow'a ses akışları göndermek için kullanılan, basıldıktan sonra durumu değiştiren bir mikrofona sahip IconButton.

Sohbet arayüzünü bağlama

  1. main.dart'ı açın ve Widget build değerini, yalnızca Chat() arayüzünü örnekleyecek ş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 uygulaması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'a 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, Çalıştır sekmesinde ses akışının 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. Dialogflow sınıf örneğini tutmak için dosyanın üst kısmında, // TODO DialogflowGrpcV2Beta1 class instance öğesinin hemen altına aşağıdaki satırı ekleyin:
DialogflowGrpcV2Beta1 dialogflow;
  1. initPlugin() yöntemini arayın ve aşağıdaki kodu YAPILACAKLAR yorumunun hemen altına 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. (assets klasöründe credentials.json dosyasının bulunduğundan emin olun.)

Dialogflow gRPC ile çalışmayla ilgili demo amaçları doğrultusunda yine bu işlemde sorun yoktur ancak üretim uygulamaları açısından bunlar güvenli kabul edilmediğinden kimlik bilgileri.json dosyasını items klasöründe depolamak istemezsiniz.

"DetectIntent" çağrısı yapma

  1. handleSubmitted() yöntemini bulun. İşinizin sihri de burada devreye girer. YAPILACAKLAR yorumunun hemen altına aşağıdaki kodu ekleyin.Bu kod, kullanıcının yazdığı mesajı ListView'a ekler:
ChatMessage message = ChatMessage(
 text: text,
 name: "You",
 type: true,
);

setState(() {
 _messages.insert(0, message);
});
  1. Şimdi, önceki kodun hemen altında "DetectIntent" çağrısını yaparak girişteki metni ve bir languageCode'u ileteceğiz. - Sonuç (data.queryResult.fulfillment içindeki) 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 intent algılama çağrısını test edin. Tür: hi. Sizi varsayılan karşılama mesajıyla görecektir. Başka bir şey yazdığınızda varsayılan yedek size döner.

StreamingDetectIntent çağrısı yapma

  1. Şimdi handleStream() yöntemini bulun. Ses akışının büyüsü burada devreye girer. İlk olarak, ilk YAPILACAKLAR'ın altında, ses modeline ağırlık vermek için discountList'e sahip bir ses InputConfigV2beta1 oluşturun. Telefon (sanal cihaz) kullandığımız için sampleHertz 16000, kodlama ise Doğrusal 16 olacaktır. Bu, kullandığınız makine donanımına / mikrofona bağlıdır. Dahili Macbook mikrofonum için 16000 derece 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 oturumumuzu barındıran dialogflow nesnesinde streamingDetectIntent yöntemini çağıracağız:
final responseStream = dialogflow.streamingDetectIntent(config, _audioStream);
  1. ResponseStream ile son olarak gelen transkripti, algılanan kullanıcı sorgusunu ve algılanan eşleşen amaç yanıtını dinleyebiliriz. Bunu ekrandaki bir ChatMessage ile 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');
});

Hepsi bu kadar. Uygulamanızı başlatın ve sanal cihazda test edin, mikrofon düğmesine basın ve "Hello" deyin.

Bu işlem, Dialogflow varsayılan karşılama niyetini tetikler. Sonuçlar ekrana yazdırılır. Flutter, Dialogflow entegrasyonuyla mükemmel şekilde çalıştığına göre, chatbot görüşmemiz üzerinde çalışmaya başlayabiliriz.

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

Dialogflow Essentials, konuşmaya dayalı kullanıcı arayüzleri oluşturmaya yönelik bir geliştirme paketidir. Chatbot'lar, sesli bot'lar, telefon ağ geçitleri Hepiniz aynı araçla kanal oluşturabilir, hatta 20'den fazla farklı dilde birden fazla kanalı destekleyebilirsiniz. Dialogflow kullanıcı deneyimi tasarımcıları (aracı modelleyicileri, dil uzmanları) veya geliştiriciler, temel bir makine öğrenimi modelini eğitmek için eğitim ifadeleri belirterek niyet oluşturur.

Amaç, kullanıcının amacını sınıflandırır. Her Dialogflow ES aracısı için, birleştirilmiş niyetlerinizin tam bir görüşmeyi yönetebileceği birçok niyet tanımlayabilirsiniz. Her niyette parametreler ve yanıtlar bulunabilir.

Niyet eşleştirme, amaç sınıflandırması veya amaç eşleştirme olarak da bilinir. Bu, Dialogflow ES'deki ana kavramdır. Intent eşleştirildikten sonra yanıt döndürebilir, parametreler toplayabilir (varlık çıkarma) veya webhook kodunu (ör. bir veritabanından veri getirmek için) tetikleyebilir.

Son kullanıcı, chatbot'ta kullanıcı ifadesi veya ifade olarak adlandırılan bir şey yazdığında veya söylediğinde Dialogflow ES, eğitim ifadelerini temel alarak bu ifadeyi Dialogflow aracınızın en iyi niyetiyle eşleştirir. Ayrıntılı Dialogflow ES Makine Öğrenimi modeli, bu eğitim ifadeleri üzerinde eğitildi.

Dialogflow ES, bağlam adı verilen bir kavramla çalışır. Tıpkı bir insan gibi Dialogflow ES de 2. ve 3. sıralarda bağlamı hatırlayabilir. Kullanıcının önceki konuşmalarını bu şekilde takip edebilir.

Dialogflow Intent'leri 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 intent otomatik olarak oluşturulur. Varsayılan Karşılama Niyeti, temsilciyle görüşme başlattığınızda ilk gerçekleşen akıştır. Varsayılan Yedek Niyeti, aracı sizi anlayamadığında veya bir niyeti az önce söylediklerinizle eşleştiremediğinde alacağınız akıştır.

Varsayılan Karşılama Niyeti için karşılama mesajı şöyledir:

Kullanıcı

Temsilci

Merhaba,

"Merhaba, ben Dialogflow SSS bot'uyum. Dialogflow ile ilgili soruları yanıtlayabilirim."

"Ne bilgi edinmek istersiniz?"

  1. Niyetler > Varsayılan Karşılama Niyeti
  2. Aşağı kaydırarak Yanıtlar'a gidin.
  3. Tüm Metin Yanıtları'nı temizle.
  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 bot'uyum. Dialogflow ile ilgili sorularınız var mı? 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 niyeti test edelim. İlk olarak Dialogflow Simulator.Type içinde test edebiliriz: Hello. Aşağıdaki mesajlardan birini döndürmesi gerekir:
  • Merhaba. Ben Dialogflow SSS botuyum. Dialogflow ile ilgili soruları yanıtlayabilirim. Neyi öğrenmek istiyorsunuz?
  • Merhaba, ben Dialogflow SSS bot'uyum. Dialogflow ile ilgili sorularınız var mı? Nasıl yardımcı olabilirim?

Varsayılan Yedek Niyetini Değiştirme

  1. Niyetler > Varsayılan Yedek Niyet
  2. Aşağı kaydırarak Yanıtlar'a gidin.
  3. Tüm Metin Yanıtları'nı temizle.
  4. Varsayılan sekmede aşağıdaki yanıtı oluşturun:
  • Maalesef bu sorunun yanıtını bilmiyorum. Web sitemizi kontrol ettiniz mi? http://www.dialogflow.com?
  1. Kaydet'i tıklayın

Çevrimiçi Bilgi Bankası'na bağlanma

Bilgi bağlayıcılar, tanımlanan amaçları tamamlar. Bilgi belgelerini ayrıştırarak otomatik yanıtlar bulurlar. (örneğin CSV dosyalarından, online web sitelerinden ve hatta PDF dosyalarından alınan SSS veya makaleler!) Bunları yapılandırmak için, bilgi belgelerinden oluşan koleksiyonlar olan bir veya daha fazla bilgi tabanı tanımlarsınız.

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

Şimdi bunu deneyelim.

  1. Menüden Bilgi (beta) seçeneğini belirleyin.

Bilgi Tabanı

  1. Sağdaki mavi düğmeyi tıklayın: Bilgi Tabanı Oluştur
  2. Bilgi Tabanı adı olarak yazın; Dialogflow SSS sayfasına gidin ve kaydet'i tıklayın.
  3. İlki oluştur bağlantısını tıklayın

Bilgi Tabanı birinci

  1. Bunu yaptığınızda 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

Bir bilgi tabanı oluşturuldu:

Bilgi Tabanı oluşturuldu

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

Aşağıdaki yanıtları oluşturup 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'i tıklayın.

Dialogflow'da uyguladığınız tüm SSS'ler burada gösterilir.Çok kolay!

SSS'leri temsilcinize aktarmak için SSS içeren online bir HTML web sitesine de yönlendirebileceğinizi unutmayın. Hatta metin bloku olan bir PDF dosyası yüklemek bile mümkün. Dialogflow soruları kendileri hazırlar.

Artık SSS "ekstralar" olarak görülmelidir amaç akışlarınızın yanına ekleyin. Bilgi Tabanı SSS'leri modeli eğitemez. Bu nedenle, soruları tamamen farklı bir şekilde sormak, Doğal Dil Anlama'yı (Makine Öğrenimi modelleri) kullanmadığı için eşleşme sağlayamayabilir. Bu nedenle zaman zaman SSS'lerinizi amaçlara dönüştürmek faydalı olabilir.

  1. Sağ taraftaki simülasyon aracında bulunan soruları test edin.
  2. Tüm adımlar tamamlandığında Flutter uygulamanıza geri dönüp sohbet ve sesli sohbet botunuzu bu yeni içerikle test edin. Dialogflow'a yüklediğiniz soruları sorun.

Sonuç

6. Tebrikler

Tebrikler, Dialogflow chatbot entegrasyonuna sahip ilk Flutter uygulamanızı başarıyla oluşturdunuz, tebrikler!

İşlediğimiz konular

  • Dialogflow Essentials ile chatbot oluşturma
  • Dialogflow'u Flutter uygulamasına entegre etme
  • Dialogflow ile metin amaçları nasıl tespit edilir?
  • Mikrofon aracılığıyla Dialogflow'a ses aktarma
  • Bilgi tabanı bağlayıcısından yararlanma

Sırada ne var?

Bu codelab'i beğendiniz mi? Bu muhteşem Dialogflow laboratuvarlarına göz atın.

Dart/Flutter için Dialogflow gRPC paketini nasıl oluşturduğumu öğrenmek ister misiniz?