Dialogflow Essentials की मदद से, Android के लिए वॉइस बॉट बनाएं & फ़्लटर

1. शुरू करने से पहले

इस कोडलैब में, आपको Flutter ऐप्लिकेशन में सामान्य Dialogflow Essentials (ES) टेक्स्ट और वॉइस बॉट को इंटिग्रेट करने का तरीका बताया जाएगा. Dialogflow ES एक डेवलपमेंट सुइट है. इसकी मदद से, बातचीत वाले यूज़र इंटरफ़ेस (यूआई) बनाए जा सकते हैं. चैटबॉट, वॉइस बॉट, फ़ोन गेटवे. सभी क्रिएटर्स एक ही टूल का इस्तेमाल करके, अपनी पसंद के चैनल बना सकते हैं. साथ ही, कई चैनलों को 20 से ज़्यादा भाषाओं में इस्तेमाल किया जा सकता है. Dialogflow, बातचीत वाले कई लोकप्रिय प्लैटफ़ॉर्म के साथ इंटिग्रेट हो जाता है. जैसे, Google Assistant, Slack, और Facebook Messenger. अगर आपको इनमें से किसी प्लैटफ़ॉर्म के लिए एजेंट बनाना है, तो आपको इंटिग्रेशन के कई विकल्पों में से किसी एक का इस्तेमाल करना चाहिए. हालांकि, मोबाइल डिवाइसों के लिए चैटबॉट बनाने के लिए, आपको कस्टम इंटिग्रेशन बनाना होगा. किसी बुनियादी मशीन लर्निंग मॉडल को ट्रेनिंग देने के लिए, ट्रेनिंग वाक्यांश तय करके इंटेंट बनाए जा सकते हैं.

इस लैब को ऐसा क्लाउड डेवलपर अनुभव दिखाने के लिए ऑर्डर किया गया है:

  1. एनवायरमेंट का सेटअप
  • Dialogflow: नया Dialogflow ES एजेंट बनाएं
  • Dialogflow: Dialogflow को कॉन्फ़िगर करें
  • Google Cloud: सेवा खाता बनाना
  1. Flutter: चैट ऐप्लिकेशन बनाना
  • Flutter प्रोजेक्ट बनाना
  • सेटिंग और अनुमतियां कॉन्फ़िगर करना
  • डिपेंडेंसी जोड़ना
  • सेवा खाते से लिंक करना.
  • ऐप्लिकेशन को किसी वर्चुअल डिवाइस या फ़िज़िकल डिवाइस पर चलाना
  1. Flutter: बोली को लिखाई में बदलने की सुविधा की मदद से चैट इंटरफ़ेस बनाना
  • चैट इंटरफ़ेस बनाना
  • चैट इंटरफ़ेस को लिंक करना
  • Dialogflow gRPC पैकेज को ऐप्लिकेशन में इंटिग्रेट करना
  1. Dialogflow: Dialogflow एजेंट को मॉडल करना
  • वेलकम और फ़ॉलबैक इंटेंट
  • अक्सर पूछे जाने वाले सवालों के नॉलेज बेस का इस्तेमाल करना

पूर्वापेक्षा

  • डार्ट/फ़्लटर का बुनियादी अनुभव
  • Google Cloud Platform का बुनियादी अनुभव
  • Dialogflow ES के साथ बुनियादी अनुभव

आपको क्या बनाना होगा

इस कोडलैब से, आपको मोबाइल पर अक्सर पूछे जाने वाले सवालों के लिए बॉट बनाने का तरीका पता चलेगा. यह टूल, Dialogflow के बारे में आम तौर पर पूछे जाने वाले सवालों के जवाब दे सकता है. असली उपयोगकर्ता जवाब पाने के लिए, टेक्स्ट इंटरफ़ेस से इंटरैक्ट कर सकते हैं या मोबाइल डिवाइस में पहले से मौजूद माइक्रोफ़ोन के ज़रिए आवाज़ स्ट्रीम कर सकते हैं.

आप इन चीज़ों के बारे में जानेंगे

  • Dialogflow Essentials की मदद से चैटबॉट बनाने का तरीका
  • Dialogflow gRPC पैकेज की मदद से, Dialogflow को Flutter ऐप्लिकेशन में इंटिग्रेट करने का तरीका
  • Dialogflow की मदद से टेक्स्ट इंटेंट का पता लगाने का तरीका
  • माइक्रोफ़ोन के ज़रिए Dialogflow पर आवाज़ को स्ट्रीम करने का तरीका
  • अक्सर पूछे जाने वाले सार्वजनिक सवालों को इंपोर्ट करने के लिए, नॉलेज बेस कनेक्टर का इस्तेमाल करने का तरीका
  • वर्चुअल या फ़िज़िकल डिवाइस में टेक्स्ट और वॉइस इंटरफ़ेस की मदद से चैटबॉट की जांच करें

आपको इनकी ज़रूरत होगी

  • Dialogflow एजेंट बनाने के लिए, आपको Google Identity / Gmail पते की ज़रूरत होगी.
  • सेवा खाता डाउनलोड करने के लिए, आपके पास Google Cloud Platform का ऐक्सेस होना चाहिए
  • Flutter डेवलपर एनवायरमेंट

अपने Flutter डेवलपर एनवायरमेंट को सेट अप करें

  1. वह ऑपरेटिंग सिस्टम चुनें जिस पर Flutter इंस्टॉल करना है.
  1. हमारे कमांड-लाइन टूल और किसी भी टेक्स्ट एडिटर का इस्तेमाल करके, Flutter की मदद से ऐप्लिकेशन बनाए जा सकते हैं. हालांकि, इस वर्कशॉप में Android Studio का इस्तेमाल किया जाएगा. Android Studio के लिए Flutter और Dart प्लगिन की मदद से कई काम किए जा सकते हैं. जैसे- कोड पूरा करना, सिंटैक्स हाइलाइट करना, विजेट में बदलाव करने की सुविधा, और दौड़ने और डीबग सपोर्ट वगैरह. https://flutter.dev/docs/get-started/editor पर दिया गया तरीका अपनाएं

2. एनवायरमेंट का सेटअप

Dialogflow: नया Dialogflow ES एजेंट बनाएं

  1. खोलें
  2. बाईं ओर मौजूद बार में, लोगो के नीचे मौजूद, "नया एजेंट बनाएं" को चुनें ड्रॉपडाउन में. (ध्यान दें, "ग्लोबल" वाले ड्रॉपडाउन पर क्लिक न करें. हमें ऐसे Dialogflow इंस्टेंस की ज़रूरत होगी जो अक्सर पूछे जाने वाले सवालों के नॉलेज बेस का इस्तेमाल करने के लिए ग्लोबल हो.)
  3. एजेंट का नाम yourname-dialogflow बताएं (अपने नाम का इस्तेमाल करें)
  4. डिफ़ॉल्ट भाषा के तौर पर, अंग्रेज़ी - en चुनें.
  5. डिफ़ॉल्ट टाइम ज़ोन के तौर पर, वह टाइम ज़ोन चुनें जो आपके सबसे नज़दीकी टाइम ज़ोन के मुताबिक हो.
  6. मेगा एजेंट को चुनें. (इस सुविधा की मदद से, मुख्य एजेंट बनाया जा सकता है, जो "सब" एजेंट के बीच काम कर सकता है. अभी हमें इसकी ज़रूरत नहीं है.)
  7. बनाएं पर क्लिक करें.

नया प्रोजेक्ट बनाने की स्क्रीन

Dialogflow को कॉन्फ़िगर करें

  1. प्रोजेक्ट के नाम के बगल में मौजूद, बाएं मेन्यू में मौजूद गियर आइकॉन पर क्लिक करें.

नया प्रोजेक्ट बनाने के लिए ड्रॉपडाउन

  1. एजेंट की यह जानकारी डालें: Dialogflow के बारे में अक्सर पूछे जाने वाले सवाल चैटबॉट
  2. बीटा वर्शन की सुविधाएं चालू करें और स्विच को फ़्लिप करें.

Dialogflow Essentials V2Beta1

  1. बोली टैब पर क्लिक करें और पक्का करें कि अपने-आप बोली लगाने की सुविधा बॉक्स चालू हो.
  2. इसके अलावा, आप पहला स्विच भी फ़्लिप कर सकते हैं. इससे Speech Model बेहतर होगा, लेकिन यह सिर्फ़ तब उपलब्ध होगा, जब आप Dialogflow ट्रायल को अपग्रेड करेंगे.
  3. सेव करें पर क्लिक करें

Google Cloud: सेवा खाता बनाएं

Dialogflow में एजेंट बनाने के बाद, Google Cloud Console में एक Google Cloud प्रोजेक्ट बनाया जाना चाहिए.

  1. Google Cloud Console खोलें:
  2. पक्का करें कि आपने उसी Google खाते से लॉग इन किया हो जिससे आपने Dialogflow में लॉग इन किया है. इसके बाद, सबसे ऊपर मौजूद नीले बार में yourname-dialogflow प्रोजेक्ट चुनें.
  3. इसके बाद, सबसे ऊपर मौजूद टूलबार में Dialogflow API खोजें और ड्रॉपडाउन में Dialogflow API के नतीजे पर क्लिक करें.

Dialogflow एपीआई को चालू करें

  1. नीले रंग के मैनेज करें बटन पर क्लिक करें. इसके बाद, बाएं मेन्यू बार में क्रेडेंशियल पर क्लिक करें. (जब Dialogflow अभी तक चालू न हो, तो पहले चालू करें को दबाएं)

GCP कंसोल के लिए क्रेडेंशियल

  1. स्क्रीन पर सबसे ऊपर, क्रेडेंशियल बनाएं पर क्लिक करें और सेवा खाता चुनें.

क्रेडेंशियल बनाएं

  1. सेवा खाते का नाम: flutter_dialogflow, आईडी, और जानकारी डालें. इसके बाद, बनाएं पर क्लिक करें.

सेवा खाता बनाना

  1. दूसरे चरण में, आपको यह भूमिका चुननी होगी: Dialogflow API Admin, जारी रखें,और हो गया पर क्लिक करें.
  2. flutter_dialogflow सेवा खाते पर क्लिक करें, कुंजी टैब पर क्लिक करें और कुंजी जोड़ें > पर क्लिक करें नई कुंजी बनाएं

कुंजी निर्मित करें

  1. JSON कुंजी बनाएं. इसका नाम बदलकर credentials.json करें. इसके बाद, इसे अपनी हार्ड ड्राइव की किसी सुरक्षित जगह पर सेव करें. हम इसका इस्तेमाल बाद में करेंगे.

JSON कुंजी

बहुत बढ़िया, हमारे सभी टूल सही तरीके से सेट अप किए गए हैं. अब हम अपने ऐप्लिकेशन में Dialogflow को इंटिग्रेट करना शुरू कर सकते हैं!

3. Flutter: चैट ऐप्लिकेशन बनाना

Boilerplate ऐप्लिकेशन बनाएं

  1. Android Studio खोलें और नया Flutter प्रोजेक्ट शुरू करें चुनें.
  2. प्रोजेक्ट टाइप के तौर पर, Flutter का ऐप्लिकेशन चुनें. इसके बाद, 'आगे बढ़ें' पर क्लिक करें.
  3. पुष्टि करें कि Flutter SDK टूल का पाथ, एसडीके की जगह के बारे में बताता है (अगर टेक्स्ट फ़ील्ड खाली है, तो SDK टूल इंस्टॉल करें... चुनें).
  4. प्रोजेक्ट का नाम डालें (उदाहरण के लिए, flutter_dialogflow_agent). इसके बाद, आगे बढ़ें पर क्लिक करें.
  5. पैकेज के नाम में बदलाव करें और Finish पर क्लिक करें.

नया Flutter ऐप्लिकेशन बनाएं

इससे मटीरियल कॉम्पोनेंट का एक सैंपल ऐप्लिकेशन बन जाएगा.

तब तक इंतज़ार करें, जब तक Android Studio, SDK टूल इंस्टॉल नहीं करता और प्रोजेक्ट बनाता है.

सेटिंग और अनुमतियां

  1. हम ऑडियो रिकॉर्डर लाइब्रेरी sound_stream का इस्तेमाल करेंगे. इसके लिए, कम से कम 21 लेवल का सेट होना चाहिए. आइए, इसे डिफ़ॉल्ट कॉन्फ़िगरेशन ब्लॉक में android/app/build.gradle में बदलते हैं. (ध्यान दें, android फ़ोल्डर में दो build.gradle फ़ाइल मौजूद हैं, लेकिन ऐप्लिकेशन फ़ोल्डर में मौजूद एक फ़ाइल सही है.)
defaultConfig {
   applicationId "com.myname.flutter_dialogflow_agent"
   minSdkVersion 21
   targetSdkVersion 30
   versionCode flutterVersionCode.toInteger()
   versionName flutterVersionName
}
  1. माइक्रोफ़ोन को ऐक्सेस करने की अनुमतियां देने और ऐप्लिकेशन को क्लाउड पर चलने वाले Dialogflow एजेंट से संपर्क करने की अनुमति देने के लिए, हमें app/src/main/AndroidManifest.xml फ़ाइल में INTERNET और RECORD_AUDIO की अनुमतियां जोड़नी होंगी. आपके Flutter प्रोजेक्ट में एक से ज़्यादा AndroidManifest.xml फ़ाइलें हैं, लेकिन आपको उन फ़ाइलों को मुख्य फ़ोल्डर में रखना होगा. मेनिफ़ेस्ट टैग के ठीक अंदर लाइनें जोड़ी जा सकती हैं.
<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. Google Cloud Console से डाउनलोड की गई credentials.json फ़ाइल को credentials.json फ़ोल्डर में ले जाएं.
  3. pubspec.yaml को खोलें और सेवा खाते को फ़्लटर ब्लॉक में जोड़ें.
flutter:
  uses-material-design: true
  assets:
    - assets/credentials.json

किसी फ़िज़िकल डिवाइस पर ऐप्लिकेशन चलाना

अगर आपके पास Android डिवाइस है, तो यूएसबी केबल के ज़रिए फ़ोन को प्लग-इन किया जा सकता है और डिवाइस में डीबग किया जा सकता है. अपने Android डिवाइस पर डेवलपर के लिए सेटिंग और टूल की स्क्रीन की मदद से इसे सेट अप करने के लिए, यह तरीका अपनाएं.

किसी वर्चुअल डिवाइस पर ऐप्लिकेशन चलाना

अगर आपको किसी वर्चुअल डिवाइस पर ऐप्लिकेशन चलाना है, तो नीचे दिया गया तरीका अपनाएं:

  1. टूल> पर क्लिक करें एवीडी मैनेजर. या सबसे ऊपर मौजूद टूलबार से एवीडी मैनेजर चुनें. नीचे दी गई इमेज में, इसे गुलाबी रंग से हाइलाइट किया गया है

Android Studio का सबसे ऊपर मौजूद टूलबार

  1. हम एक लक्षित Android वर्चुअल डिवाइस बनाएंगे, ताकि हम किसी फ़िज़िकल डिवाइस के बिना अपने ऐप्लिकेशन की जांच कर सकें. ज़्यादा जानकारी के लिए, एवीडी मैनेज करना लेख पढ़ें. नया वर्चुअल डिवाइस चुनने के बाद, उसे चालू करने के लिए उस पर दो बार क्लिक करें.

एवीडी मैनेज करें

वर्चुअल डिवाइस

  1. Android Studio के मुख्य टूलबार में, ड्रॉपडाउन की मदद से टारगेट के तौर पर कोई Android डिवाइस चुनें और पक्का करें कि main.dart को चुना गया हो. इसके बाद, रन बटन (हरा त्रिभुज) दबाएं.

IDE में सबसे नीचे, आपको कंसोल में लॉग दिखेंगे. आपको दिखेगा कि वह Android और आपका स्टार्टर Flutter ऐप्लिकेशन इंस्टॉल कर रहा है. इसमें एक मिनट लगेगा. वर्चुअल डिवाइस के तैयार होने के बाद, बदलाव बहुत तेज़ी से होंगे. सभी चरण पूरे करने के बाद, Flutter ऐप्लिकेशन खुल जाएगा.

बॉइलरप्लेट ऐप्लिकेशन

  1. चलिए, हमारे चैटबॉट ऐप्लिकेशन के लिए माइक्रोफ़ोन चालू करते हैं. विकल्पों को खोलने के लिए, वर्चुअल डिवाइस के विकल्प बटन पर क्लिक करें. माइक्रोफ़ोन टैब में, सभी 3 स्विच चालू करें.

एवीडी के विकल्प

  1. आइए, कितनी तेज़ी से बदलाव किए जा सकते हैं, यह दिखाने के लिए 'हॉट रीलोड' सुविधा आज़माएं.

lib/main.dart में, MyApp क्लास में MyHomePage title को इसमें बदलें: Flutter Dialogflow Agent. साथ ही, primarySwatch को Colors.orange में बदलें.

पहला कोड

फ़ाइल सेव करें या Android Studio टूलबार में बोल्ट आइकॉन पर क्लिक करें. आपको वर्चुअल डिवाइस में किया गया बदलाव सीधे तौर पर दिखेगा.

4. Flutter: एसटीटी की मदद से चैट इंटरफ़ेस बनाना

चैट इंटरफ़ेस बनाना

  1. lib फ़ोल्डर में एक नई Flutter विजेट फ़ाइल बनाएं. (राइट-क्लिक lib फ़ोल्डर, नया > Flutter विजेट > स्टेटफ़ुल विजेट), इस फ़ाइल को कॉल करें: 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
  • Dialogflow को टेक्स्ट क्वेरी भेजने के लिए, 'भेजें' आइकॉन के साथ IconButton
  • डायलॉग फ़्लो में ऑडियो स्ट्रीम भेजने के लिए, माइक्रोफ़ोन के साथ IconButton. इस आइकॉन को दबाने पर, इस आइकॉन की स्थिति बदल जाती है.

चैट इंटरफ़ेस को लिंक करना

  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. टेक्स्ट एरिया और बटन की मदद से चलाएं. टेक्स्ट क्वेरी टाइप करने और Enter दबाने पर या भेजें बटन पर टैप करने पर, आपको Android Studio के 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 फ़ोल्डर में credentials.json फ़ाइल हो!)

डेमो के लिए आपको एक बार फिर से बताना होगा कि Dialogflow gRPC के साथ काम कैसे किया जाए. हालांकि, प्रोडक्शन ऐप्लिकेशन के लिए आपको क्रेडेंशियल.json फ़ाइल को ऐसेट फ़ोल्डर में सेव नहीं करना है. ऐसा इसलिए, क्योंकि इसे सुरक्षित नहीं माना जाता है.

पता लगाने के लिए कॉल किया जा रहा है

  1. अब handleSubmitted() तरीका ढूंढें. यहां से इसे हल किया जा सकता है. TODO टिप्पणी के ठीक नीचे, नीचे दिया गया कोड जोड़ें.यह कोड उपयोगकर्ता के टाइप किए गए मैसेज को ListView में जोड़ देगा:
ChatMessage message = ChatMessage(
 text: text,
 name: "You",
 type: true,
);

setState(() {
 _messages.insert(0, message);
});
  1. अब, पिछले कोड के ठीक नीचे, हम defaultIntent कॉल करेंगे. इसके बाद, हम इनपुट से आने वाला टेक्स्ट और languageCode भेजेंगे. - (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. यह आपका स्वागत करने के लिए डिफ़ॉल्ट वेलकम मैसेज होना चाहिए. कुछ और टाइप करने पर, आपको डिफ़ॉल्ट फ़ॉलबैक दिखेगा.

स्ट्रीमिंग डिटेक्ट इंटेंट कॉल किया जा रहा है

  1. अब handleStream() तरीका आज़माएं. यहां से ऑडियो स्ट्रीमिंग के लिए इसका इस्तेमाल किया जा सकता है. सबसे पहले, पहले TODO के नीचे, एक तरह का ऑडियो इनपुटConfigV2beta1 बनाएं, जिसमें आवाज़ के नमूने को बायस सूची के साथ रखा जा सकता है. हम एक फ़ोन (वर्चुअल डिवाइस) का इस्तेमाल कर रहे हैं, इसलिए sampleHertz 16000 होगा और एन्कोडिंग लीनियर 16 होगी. यह आपके इस्तेमाल किए जा रहे मशीन हार्डवेयर / माइक्रोफ़ोन पर निर्भर करता है. मेरे इंटरनल Macbook माइक के लिए, 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. इसके बाद, हम dialogflow ऑब्जेक्ट पर, streamingDetectIntent तरीके को कॉल करेंगे. इसमें हमारा Dialogflow सेशन होल्ड होगा:
final responseStream = dialogflow.streamingDetectIntent(config, _audioStream);
  1. रिस्पॉन्स स्ट्रीम की मदद से, आखिर में हम आने वाली ट्रांसक्रिप्ट, उपयोगकर्ता की पता लगाई गई क्वेरी, और पता लगाए गए मेल खाने वाले इंटेंट रिस्पॉन्स को सुन सकते हैं. हम इसे स्क्रीन पर 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 से ज़्यादा भाषाओं में इस्तेमाल किया जा सकता है. डायलॉग फ़्लो के UX डिज़ाइनर (एजेंट मॉडलर, भाषाविद) या डेवलपर, किसी बुनियादी मशीन लर्निंग मॉडल को ट्रेनिंग देने के लिए ट्रेनिंग वाक्यांश की जानकारी देकर इंटेंट बनाते हैं.

इंटेंट, उपयोगकर्ता के इरादे को कैटगरी में बांटता है. हर Dialogflow ES एजेंट के लिए, आपके पास कई इंटेंट तय करने का विकल्प होता है. यहां आपके मिले-जुले इंटेंट, पूरी बातचीत को हैंडल कर सकते हैं. हर इंटेंट में पैरामीटर और रिस्पॉन्स शामिल हो सकते हैं.

किसी इंटेंट के मैच को इंटेंट क्लासिफ़िकेशन या इंटेंट मैचिंग भी कहा जाता है. यह Dialogflow ES का मुख्य कॉन्सेप्ट है. इंटेंट के मैच होने के बाद, यह जवाब दे सकता है, पैरामीटर (इकाई एक्सट्रैक्शन) इकट्ठा कर सकता है या वेबहुक कोड (ग्राहक को आइटम भेजना) ट्रिगर कर सकता है. जैसे, किसी डेटाबेस से डेटा फ़ेच करना.

जब कोई असली उपयोगकर्ता चैटबॉट में कुछ लिखता या बोलता है, तो उसे उपयोगकर्ता एक्सप्रेशन या वाक्य कहा जाता है. इस तरह, Dialogflow ES एक्सप्रेशन को ट्रेनिंग वाक्यांशों के आधार पर आपके Dialogflow एजेंट के सबसे अच्छे इंटेंट से मैच करता है. हुड के अंदर मौजूद Dialogflow ES मशीन लर्निंग मॉडल को ट्रेनिंग के उन वाक्यांशों के बारे में ट्रेनिंग दी गई थी.

Dialogflow ES एक कॉन्सेप्ट के साथ काम करता है जिसे कॉन्टेक्स्ट कहते हैं. किसी इंसान की तरह ही, Dialogflow ES किसी संदर्भ को दूसरी और तीसरी बारी में याद रख सकता है. इस तरह यह उपयोगकर्ता के पिछले बयानों को ट्रैक कर सकता है.

यहां Dialogflow के इंटेंट के बारे में ज़्यादा जानकारी दी गई है.

डिफ़ॉल्ट वेलकम इंटेंट में बदलाव करना

नया Dialogflow एजेंट बनाने पर, दो डिफ़ॉल्ट इंटेंट अपने-आप बन जाएंगे. एजेंट के साथ बातचीत शुरू करने पर, सबसे पहले डिफ़ॉल्ट वेलकम इंटेंट मैसेज भेजा जाता है. डिफ़ॉल्ट फ़ॉलबैक इंटेंट, वह फ़्लो होता है जो आपको तब मिलेगा, जब एजेंट आपकी बात नहीं समझ पाएगा या वह इंटेंट, जो आपने अभी-अभी कहा है उससे मैच नहीं कर पाएगा.

डिफ़ॉल्ट तौर पर वेलकम इंटेंट के लिए, वेलकम मैसेज यहां दिया गया है:

उपयोगकर्ता

एजेंट

नमस्ते

"नमस्ते, मैं Dialogflow अक्सर पूछे जाने वाले सवाल बॉट हूं, मैं Dialogflow पर सवालों के जवाब दे सकता हूं."

"आपको क्या जानना है?"

  1. इंटेंट > पर क्लिक करें डिफ़ॉल्ट वेलकम इंटेंट
  2. नीचे की ओर स्क्रोल करके, जवाब पर जाएं.
  3. सभी मैसेज से दिए गए जवाब मिटाएं.
  4. डिफ़ॉल्ट टैब में, ये दो जवाब बनाएं:
  • नमस्ते, मैं Dialogflow अक्सर पूछे जाने वाले सवाल बॉट हूं. मैं Dialogflow पर सवालों के जवाब दे सकता हूं. आपको क्या जानना है?
  • हैलो, मैं Dialogflow अक्सर पूछे जाने वाले सवाल बॉट हूं. क्या आपको Dialogflow के बारे में सवाल पूछने हैं? मैं आपकी क्या मदद करूं?

कॉन्फ़िगरेशन इस स्क्रीनशॉट के जैसा होना चाहिए.

डिफ़ॉल्ट वेलकम इंटेंट में बदलाव करें

  1. सेव करें पर क्लिक करें
  2. आइए, इस इंटेंट की जांच करते हैं. सबसे पहले, हम Dialogflow Simulator में इसकी जांच कर सकते हैं.Type: नमस्ते. उसे इनमें से कोई एक मैसेज दिखना चाहिए:
  • नमस्ते, मैं Dialogflow अक्सर पूछे जाने वाले सवाल बॉट हूं. मैं Dialogflow पर सवालों के जवाब दे सकता हूं. आपको क्या जानना है?
  • हैलो, मैं Dialogflow अक्सर पूछे जाने वाले सवाल बॉट हूं. क्या आपको Dialogflow के बारे में सवाल पूछने हैं? मैं आपकी क्या मदद करूं?

डिफ़ॉल्ट फ़ॉलबैक इंटेंट में बदलाव करना

  1. इंटेंट > पर क्लिक करें डिफ़ॉल्ट फ़ॉलबैक इंटेंट
  2. नीचे की ओर स्क्रोल करके, जवाब पर जाएं.
  3. सभी मैसेज से दिए गए जवाब मिटाएं.
  4. डिफ़ॉल्ट टैब में, यह जवाब बनाएं:
  • माफ़ करें, मुझे इस सवाल का जवाब नहीं पता. क्या आपने हमारी वेबसाइट देखी है? http://www.dialogflow.com?
  1. सेव करें पर क्लिक करें

ऑनलाइन नॉलेज बेस से जुड़ना

नॉलेज कनेक्टर, बताए गए इंटेंट को पूरा करते हैं. अपने-आप जवाब पाने के लिए, वे नॉलेज दस्तावेज़ों को पार्स करते हैं. (उदाहरण के लिए, CSV फ़ाइलों, ऑनलाइन वेबसाइटों या PDF फ़ाइलों के अक्सर पूछे जाने वाले सवाल या लेख!) उन्हें कॉन्फ़िगर करने के लिए, एक या एक से ज़्यादा नॉलेज बेस होते हैं. नॉलेज बेस, नॉलेज दस्तावेज़ों का कलेक्शन होते हैं.

नॉलेज कनेक्टर के बारे में ज़्यादा जानें.

इसे आज़माकर देखें.

  1. मेन्यू में नॉलेज (बीटा) चुनें.

नॉलेज बेस

  1. दाएं नीले बटन पर क्लिक करें: नॉलेज बेस बनाएं
  2. नॉलेज बेस का नाम लिखें; Dialogflow के बारे में अक्सर पूछे जाने वाले सवाल और सेव करें दबाएं.
  3. पहला लिंक बनाएं लिंक पर क्लिक करें

सबसे पहले नॉलेज बेस

  1. इससे एक विंडो खुल जाएगी.

इस कॉन्फ़िगरेशन का इस्तेमाल करें:

दस्तावेज़ का नाम: DialogflowFAQ नॉलेज टाइप: FAQ माइम टाइप: text/html

  1. हम इस यूआरएल से डेटा लोड करते हैं:

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

  1. बनाएं पर क्लिक करें

नॉलेज बेस बनाया गया है:

नॉलेज बेस बनाया गया

  1. नीचे की ओर स्क्रोल करके जवाब वाले सेक्शन पर जाएं और जवाब जोड़ें पर क्लिक करें

नीचे दिए गए जवाब तैयार करें और सेव करें पर क्लिक करें.

$Knowledge.Answer[1]
  1. जानकारी देखें पर क्लिक करें

जानकारी देखें

  1. अक्सर पूछे जाने वाले सवालों का वेबपेज अपडेट होने पर, बदलावों को अपने-आप फ़ेच करने के लिए, अपने-आप फिर से लोड होने की सुविधा चालू करें को चुनें. इसके बाद, सेव करें को दबाएं.

इसमें वे सभी अक्सर पूछे जाने वाले सवाल दिखेंगे जिन्हें आपने Dialogflow में लागू किया है.यह बहुत आसान है!

यह जानें कि अपने एजेंट में अक्सर पूछे जाने वाले सवाल इंपोर्ट करने के लिए, अक्सर पूछे जाने वाले सवालों वाली ऑनलाइन एचटीएमएल वेबसाइट पर भी रीडायरेक्ट किया जा सकता है. टेक्स्ट के एक ब्लॉक के साथ PDF भी अपलोड किया जा सकता है, और Dialogflow आपको सवाल खुद ही तैयार कर देगा.

अक्सर पूछे जाने वाले सवालों को अब ‘अतिरिक्त’ के तौर पर देखा जाना चाहिए पर क्लिक करें. नॉलेज बेस से जुड़े अक्सर पूछे जाने वाले सवालों से, इस मॉडल को ट्रेनिंग नहीं दी जा सकती है. इसलिए, पूरी तरह से अलग तरीके से सवाल पूछने से शायद आपको मिलान न मिले, क्योंकि इसमें नैचुरल लैंग्वेज अंडरस्टैंडिंग (मशीन लर्निंग मॉडल) का इस्तेमाल नहीं किया जाता है. इसलिए, अक्सर पूछे जाने वाले सवालों को इंटेंट में बदलना फ़ायदेमंद होता है.

  1. दाईं ओर मौजूद सिम्युलेटर में सवालों की जांच करें.
  2. जब सब काम हो जाए, तो अपने Flutter ऐप्लिकेशन पर वापस जाएं और इस नए कॉन्टेंट के साथ अपने चैट और वॉइस बॉट को टेस्ट करें! Dialogflow में लोड किए गए सवाल पूछें.

नतीजा

6. बधाई हो

बधाई हो, आपने Dialogflow चैटबॉट इंटिग्रेशन की मदद से, Flutter का पहला ऐप्लिकेशन बना लिया है. बहुत खूब!

हमने इन विषयों के बारे में बताया

  • Dialogflow Essentials की मदद से चैटबॉट बनाने का तरीका
  • Dialogflow को Flutter ऐप्लिकेशन में जोड़ने का तरीका
  • Dialogflow की मदद से टेक्स्ट इंटेंट का पता लगाने का तरीका
  • माइक्रोफ़ोन के ज़रिए Dialogflow पर आवाज़ को स्ट्रीम करने का तरीका
  • नॉलेज बेस कनेक्टर का इस्तेमाल करने का तरीका

आगे क्या करना है?

क्या आपको यह कोड लैब पसंद आया? इन शानदार Dialogflow लैब को देखें!

क्या आपको Dart/Flutter के लिए, Dialogflow gRPC पैकेज को बनाने में दिलचस्पी है?