Dialogflow के साथ Vision API को इंटिग्रेट करें

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

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

यह सुविधा इसलिए काम की है, क्योंकि इससे इमेज में मौजूद आइटम का विश्लेषण किया जा सकता है. साथ ही, मिली जानकारी के आधार पर कार्रवाई की जा सकती है. आपके पास रिफ़ंड प्रोसेस करने वाला सिस्टम बनाने का विकल्प भी है. इससे उपयोगकर्ताओं को रसीदें अपलोड करने में मदद मिलेगी. साथ ही, रसीद में खरीदारी की तारीख की जानकारी मिल पाएगी. इसके अलावा, अगर तारीख सही है, तो रिफ़ंड प्रोसेस किया जा सकेगा.

यहां दिए गए सैंपल डायलॉग को देखें:

उपयोगकर्ता: नमस्ते

चैटबॉट: नमस्ते! लैंडमार्क के बारे में जानने के लिए, कोई तस्वीर अपलोड की जा सकती है

उपयोगकर्ता: ताजमहल की इमेज अपलोड करो.

चैटबॉट: फ़ाइल को प्रोसेस किया जा रहा है. यहां नतीजे दिए गए हैं: ताजमहल, ताजमहल गार्डन, ताजमहल.

15a4243e453415ca.png

ज़रूरी शर्तें

आगे बढ़ने से पहले, आपको ये कोडलैब पूरे करने होंगे:

  1. Dialogflow की मदद से अपॉइंटमेंट का शेड्यूल बनाने वाला टूल बनाना
  2. Dialogflow चैटबॉट को Actions on Google के साथ इंटिग्रेट करना
  3. Dialogflow में मौजूद इकाइयों के बारे में जानकारी
  4. Dialogflow ऐप्लिकेशन के लिए, Django का फ़्रंटएंड क्लाइंट बनाना

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

आपको क्या सीखने को मिलेगा

  • Dialogflow एजेंट बनाने का तरीका
  • फ़ाइलें अपलोड करने के लिए, Dialogflow एजेंट को अपडेट करने का तरीका
  • Dialogflow फ़ुलफ़िलमेंट के साथ Vision API कनेक्शन सेट अप करने का तरीका
  • Dialogflow के लिए Django फ़्रंटएंड ऐप्लिकेशन को सेट अप और चलाने का तरीका
  • Django के फ़्रंटएंड ऐप्लिकेशन को App Engine पर Google Cloud पर डिप्लॉय करने का तरीका
  • कस्टम फ़्रंटएंड से Dialogflow ऐप्लिकेशन की जांच करने का तरीका

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

  • Dialogflow एजेंट बनाना
  • फ़ाइल अपलोड करने के लिए, Django फ़्रंटएंड लागू करना
  • अपलोड की गई इमेज के लिए Vision API को चालू करने के लिए, Dialogflow फ़ुलफ़िलमेंट लागू करना

आपको किन चीज़ों की ज़रूरत होगी

  • Python की बुनियादी जानकारी
  • Dialogflow के बारे में बुनियादी जानकारी
  • Vision API के बारे में बुनियादी जानकारी

2. आर्किटेक्चर के बारे में खास जानकारी

आपको बातचीत वाली नई सुविधा बनानी होगी. इसके लिए, आपको Django के कस्टम फ़्रंटएंड का इस्तेमाल करना होगा. साथ ही, इसे Vision API के साथ इंटिग्रेट करना होगा. Django फ़्रेमवर्क का इस्तेमाल करके, फ़्रंटएंड बनाया जाएगा. इसे स्थानीय तौर पर चलाया और टेस्ट किया जाएगा. इसके बाद, इसे App Engine पर डिप्लॉय किया जाएगा. फ़्रंटएंड ऐसा दिखेगा:

5b07e09dc4b84646.png

अनुरोध का फ़्लो इस तरह काम करेगा, जैसा कि इस इमेज में दिखाया गया है:

  1. उपयोगकर्ता, फ़्रंटएंड के ज़रिए अनुरोध भेजेगा.
  2. इससे Dialogflow detectIntent API को कॉल ट्रिगर होगा, ताकि उपयोगकर्ता के कहे गए शब्दों को सही इंटेंट से मैप किया जा सके.
  3. लैंडमार्क के बारे में जानकारी पाने का इंटेंट पता चलने पर, Dialogflow फ़ुलफ़िलमेंट, Vision API को अनुरोध भेजेगा. इसके बाद, Vision API से मिले जवाब को उपयोगकर्ता को भेज देगा.

153725eb50e008d4.png

यहां बताया गया है कि पूरा आर्किटेक्चर कैसा दिखेगा.

a2fcea32222a9cb4.png

3. Vision API क्या है?

Vision API, पहले से ट्रेन किया गया एक एमएल मॉडल है. यह इमेज से अहम जानकारी निकालता है. इससे आपको कई तरह की अहम जानकारी मिल सकती है. जैसे, इमेज लेबल करने, चेहरे और लैंडमार्क की पहचान करने, ऑप्टिकल कैरेक्टर रिकग्निशन, और अश्लील कॉन्टेंट को टैग करने की सुविधा. ज़्यादा जानने के लिए, Vision AI देखें.

4. Dialogflow एजेंट बनाना

  1. Dialogflow कंसोल पर जाएं.
  2. साइन इन करें. (अगर आपने पहली बार इस सुविधा का इस्तेमाल किया है, तो साइन अप करने के लिए अपने ईमेल का इस्तेमाल करें.)
  3. नियम और शर्तें स्वीकार करें. इसके बाद, आपको कंसोल में ले जाया जाएगा.
  4. d9e90c93fc779808.png पर क्लिक करें. इसके बाद, सबसे नीचे तक स्क्रोल करें और नया एजेंट बनाएं पर क्लिक करें. 3b3f9677e2a26d93.png
  5. एजेंट का नाम के तौर पर "VisionAPI" डालें.
  6. बनाएं पर क्लिक करें.

Dialogflow, एजेंट के हिस्से के तौर पर डिफ़ॉल्ट रूप से ये दो इंटेंट बनाता है:

  1. डिफ़ॉल्ट वेलकम इंटेंट, उपयोगकर्ताओं का स्वागत करता है.
  2. डिफ़ॉल्ट फ़ॉलबैक इंटेंट, उन सभी सवालों को पकड़ता है जिन्हें आपका बॉट नहीं समझ पाता.

इस समय, आपके पास एक ऐसा बॉट है जो उपयोगकर्ताओं का स्वागत करता है. हालांकि, आपको इसे अपडेट करना होगा, ताकि उपयोगकर्ताओं को पता चल सके कि वे लैंडमार्क के बारे में जानने के लिए, कोई इमेज अपलोड कर सकते हैं.

उपयोगकर्ता को इमेज अपलोड करने के लिए सूचना देने वाले डिफ़ॉल्ट वेलकम इंटेंट को अपडेट करना

  1. डिफ़ॉल्ट वेलकम इंटेंट पर क्लिक करें.
  2. जवाब > डिफ़ॉल्ट > टेक्स्ट या एसएसएमएल जवाब पर जाएं. इसके बाद, "नमस्ते! लैंडमार्क के बारे में जानने के लिए, कोई फ़ोटो अपलोड करें."

f9cd9ba6917a7aa9.png

इकाई बनाना

  1. इकाइयां पर क्लिक करें.

432fff294b666c93.png

  1. Create Entity पर क्लिक करें. इसे "filename" नाम दें और Save पर क्लिक करें.

602d001d684485de.png

नया इंटेंट बनाना

  1. इंटेंट > इंटेंट बनाएं पर क्लिक करें.
  2. इंटेंट के नाम के तौर पर "अपलोड की गई इमेज एक्सप्लोर करें" डालें.
  3. ट्रेनिंग के लिए वाक्यांश > ट्रेनिंग के लिए वाक्यांश जोड़ें पर क्लिक करें. इसके बाद, "फ़ाइल demo.jpg है" और "फ़ाइल taj.jpeg है" को उपयोगकर्ता के एक्सप्रेशन के तौर पर डालें. साथ ही, @filename को इकाई के तौर पर डालें.

dd54ebda59c6b896.png

  1. जवाब > जवाब जोड़ें > डिफ़ॉल्ट > टेक्स्ट या एसएसएमएल जवाब पर क्लिक करें. "फ़ाइल का आकलन किया जा रहा है" डालें और जवाब जोड़ें पर क्लिक करें.
  2. Fulfillment > Enable fulfillment पर क्लिक करें. इसके बाद, Enable webhook call for this intent को चालू करें.

b32b7ac054fcc938.png

5. Vision API के साथ इंटिग्रेट करने के लिए, फ़ुलफ़िलमेंट सेट अप करना

  1. फ़ुलफ़िलमेंट पर क्लिक करें.
  2. इनलाइन एडिटर चालू करें.

c8574c6ef899393f.png

  1. index.js को इस कोड से अपडेट करें. साथ ही, YOUR-BUCKET-NAME को Cloud Storage बकेट के नाम से अपडेट करें.
'use strict';

const functions = require('firebase-functions');
const {google} = require('googleapis');
const {WebhookClient} = require('dialogflow-fulfillment');
const vision = require('@google-cloud/vision');
  /**
   * TODO(developer): Uncomment the following lines before running the sample.
   */
const bucketName = 'YOUR-BUCKET-NAME';
const timeZone = 'America/Los_Angeles';
const timeZoneOffset = '-07:00';

exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
  const agent = new WebhookClient({ request, response });
  console.log("Parameters", agent.parameters);

  function applyML(agent){
    const filename = agent.parameters.filename;
    console.log("filename is: ", filename);

    // call vision API to detect text
    return callVisionApi(agent, bucketName, filename).then(result => {
                      console.log(`result is ${result}`);
                      agent.add(`file is being processed, here are the results:  ${result}`);
            //agent.add(`file is being processed ${result}`);
        }).catch((error)=> {
            agent.add(`error occurred at apply ml function`  + error);
        });
  }

  let intentMap = new Map();
  intentMap.set('Explore uploaded image', applyML);
  agent.handleRequest(intentMap);
});


async function callVisionApi(agent, bucketName, fileName){
    // [START vision_text_detection_gcs]
  // Imports the Google Cloud client libraries
  // Creates a client
  
  const client = new vision.ImageAnnotatorClient();
    try {
        // Performs text detection on the gcs file
        const [result] = await client.landmarkDetection(`gs://${bucketName}/${fileName}`);
        const detections = result.landmarkAnnotations;
        var detected = [];
        detections.forEach(text => {
            console.log(text.description);
            detected.push(text.description);
        });
        return detected;
    }
    catch(error) {
        console.log('fetch failed', error);
        return [];
    }
}
  1. package.json में मौजूद कॉन्टेंट को बदलने के लिए, यहां दिया गया कॉन्टेंट चिपकाएं.
{
  "name": "dialogflowFirebaseFulfillment",
  "description": "Dialogflow fulfillment for the bike shop sample",
  "version": "0.0.1",
  "private": true,
  "license": "Apache Version 2.0",
  "author": "Google Inc.",
  "engines": {
    "node": "6"
  },
  "scripts": {
    "lint": "semistandard --fix \"**/*.js\"",
    "start": "firebase deploy --only functions",
    "deploy": "firebase deploy --only functions"
  },
  "dependencies": {
    "firebase-functions": "2.0.2",
    "firebase-admin": "^5.13.1",
    "actions-on-google": "2.2.0", 
    "googleapis": "^27.0.0",
    "dialogflow-fulfillment": "^0.6.1",
    "@google-cloud/bigquery": "^1.3.0",
    "@google-cloud/storage": "^2.0.0",
    "@google-cloud/vision": "^0.25.0"
  }
}
  1. सेव करें पर क्लिक करें.

6. फ़्रंटएंड ऐप्लिकेशन डाउनलोड और चलाना

  1. इस रिपॉज़िटरी को अपने कंप्यूटर पर क्लोन करें:
https://github.com/priyankavergadia/visionapi-dialogflow.git
  1. उस डायरेक्ट्री पर जाएं जिसमें कोड मौजूद है. इसके अलावा, सैंपल को zip फ़ाइल के तौर पर डाउनलोड करके भी एक्सट्रैक्ट किया जा सकता है.
cd visionapi-dialogflow

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

डप्लॉय किए जाने पर, आपका ऐप्लिकेशन App Engine के स्टैंडर्ड एनवायरमेंट में पहले से मौजूद Cloud SQL प्रॉक्सी का इस्तेमाल करता है. इससे वह आपके Cloud SQL इंस्टेंस से कम्यूनिकेट कर पाता है. हालांकि, अपने ऐप्लिकेशन को स्थानीय तौर पर टेस्ट करने के लिए, आपको अपने डेवलपमेंट एनवायरमेंट में Cloud SQL Proxy की लोकल कॉपी इंस्टॉल करनी होगी और उसका इस्तेमाल करना होगा. ज़्यादा जानने के लिए, Cloud SQL Proxy के बारे में जानकारी देखें.

Cloud SQL इंस्टेंस पर बुनियादी एडमिन टास्क पूरे करने के लिए, Cloud SQL for MySQL क्लाइंट का इस्तेमाल किया जा सकता है.

Cloud SQL Proxy इंस्टॉल करना

नीचे दिए गए निर्देश का इस्तेमाल करके, Cloud SQL Proxy को डाउनलोड और इंस्टॉल करें. Cloud SQL प्रॉक्सी का इस्तेमाल, स्थानीय तौर पर चलाने के दौरान Cloud SQL इंस्टेंस से कनेक्ट करने के लिए किया जाता है.

प्रॉक्सी डाउनलोड करें:

curl -o cloud_sql_proxy https://dl.google.com/cloudsql/cloud_sql_proxy.darwin.amd64

प्रॉक्सी को एक्ज़ीक्यूटेबल बनाएं.

chmod +x cloud_sql_proxy

Cloud SQL इंस्टेंस बनाना

  1. Cloud SQL for MySQL का सेकंड जनरेशन इंस्टेंस बनाएं. नाम के तौर पर "polls-instance" या इसी तरह का कोई नाम डालें. इंस्टेंस को तैयार होने में कुछ मिनट लग सकते हैं. तैयार होने के बाद, यह इंस्टेंस की सूची में दिखेगा.
  2. अब gcloud कमांड-लाइन टूल का इस्तेमाल करके, यहां दिया गया निर्देश चलाएं. इसमें [YOUR_INSTANCE_NAME] आपके Cloud SQL इंस्टेंस का नाम दिखाता है. अगले चरण के लिए, connectionName एट्रिब्यूट की वैल्यू नोट करें. यह [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] फ़ॉर्मैट में दिखता है.
gcloud sql instances describe [YOUR_INSTANCE_NAME]

इसके अलावा, कंसोल में इंस्टेंस पर क्लिक करके भी इंस्टेंस कनेक्शन का नाम पाया जा सकता है.

c11e94464bf4fcf8.png

Cloud SQL इंस्टेंस को शुरू करना

पिछले सेक्शन में दिए गए connectionName का इस्तेमाल करके, Cloud SQL प्रॉक्सी शुरू करें.

./cloud_sql_proxy -instances="[YOUR_INSTANCE_CONNECTION_NAME]"=tcp:3306

[YOUR_INSTANCE_CONNECTION_NAME] को उस वैल्यू से बदलें जिसे आपने पिछले सेक्शन में रिकॉर्ड किया था. इससे, स्थानीय जांच के लिए आपके लोकल कंप्यूटर से Cloud SQL इंस्टेंस तक कनेक्शन बन जाता है. जब तक ऐप्लिकेशन की स्थानीय तौर पर जांच की जा रही हो, तब तक Cloud SQL Proxy को चालू रखें.

इसके बाद, नया Cloud SQL उपयोगकर्ता और डेटाबेस बनाएं.

  1. polls-instance नाम के Cloud SQL इंस्टेंस के लिए, Google Cloud Console का इस्तेमाल करके एक नया डेटाबेस बनाएं. उदाहरण के लिए, नाम के तौर पर "पोल" डाला जा सकता है. a3707ec9bc38d412.png
  2. polls-instance नाम के Cloud SQL इंस्टेंस के लिए, Cloud Console का इस्तेमाल करके नया उपयोगकर्ता बनाएं. f4d098fca49cccff.png

डेटाबेस की सेटिंग कॉन्फ़िगर करना

  1. बदलाव करने के लिए, mysite/settings-changeme.py खोलें.
  2. फ़ाइल का नाम बदलकर setting.py करें.
  3. दो जगहों पर, [YOUR-USERNAME] और [YOUR-PASSWORD] को डेटाबेस के उस उपयोगकर्ता नाम और पासवर्ड से बदलें जिसे आपने पिछले सेक्शन में बनाया था. इससे App Engine डिप्लॉयमेंट और लोकल टेस्टिंग के लिए, डेटाबेस से कनेक्शन सेट अप करने में मदद मिलती है.
  4. लाइन ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]' में, [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] की जगह पिछले सेक्शन में मिला इंस्टेंस का नाम डालें.
  5. यहां दिया गया निर्देश चलाएं और अगले चरण के लिए, आउटपुट की गई connectionName वैल्यू को कॉपी करें.
gcloud sql instances describe [YOUR_INSTANCE_NAME]
  1. [YOUR-CONNECTION-NAME] को उस वैल्यू से बदलें जिसे आपने पिछले चरण में रिकॉर्ड किया था
  2. [YOUR-DATABASE] को उस नाम से बदलें जिसे आपने पिछले सेक्शन में चुना था.
# [START db_setup]
if os.getenv('GAE_APPLICATION', None):
    # Running on production App Engine, so connect to Google Cloud SQL using
    # the unix socket at /cloudsql/<your-cloudsql-connection string>
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST': '/cloudsql/[PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]',
            'USER': '[YOUR-USERNAME]',
            'PASSWORD': '[YOUR-PASSWORD]',
            'NAME': '[YOUR-DATABASE]',
        }
    }
else:
    # Running locally so connect to either a local MySQL instance or connect to
    # Cloud SQL via the proxy. To start the proxy via command line:
    #     $ cloud_sql_proxy -instances=[INSTANCE_CONNECTION_NAME]=tcp:3306
    # See https://cloud.google.com/sql/docs/mysql-connect-proxy
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST': '127.0.0.1',
            'PORT': '3306',
            'NAME': '[YOUR-DATABASE]',
            'USER': '[YOUR-USERNAME]',
            'PASSWORD': '[YOUR-PASSWORD]'
        }
    }
# [END db_setup]
  1. बंद करें और सेव करें settings.py.

8. सेवा खाता सेट अप करना

  1. Dialogflow के कंसोल में, 21a21c1104f5fdf3.png पर क्लिक करें. सामान्य टैब में, Google प्रोजेक्ट > प्रोजेक्ट आईडी पर जाएं. इसके बाद, Cloud Console खोलने के लिए Google Cloud 7b2236f5627c37a0.png पर क्लिक करें. a4cfb880b3c8e789.png
  2. नेविगेशन मेन्यू ☰ > IAM और एडमिन > सेवा खाते पर क्लिक करें. इसके बाद, Dialogflow इंटिग्रेशन के बगल में मौजूद 796e7c9e65ae751f.png पर क्लिक करें. इसके बाद, कुंजी बनाएं पर क्लिक करें.

3d72abc0c184d281.png

  1. आपके कंप्यूटर पर एक JSON फ़ाइल डाउनलोड होगी. आपको सेटअप के इन सेक्शन में इसकी ज़रूरत पड़ेगी.

9. ऐप्लिकेशन से कॉल किए जाने वाले Dialogflow detectIntent एंडपॉइंट को सेट अप करें

  1. चैट फ़ोल्डर में, key-sample.json को क्रेडेंशियल वाली JSON फ़ाइल से बदलें और उसका नाम key.json रखें.
  2. चैट फ़ोल्डर में मौजूद views.py में, GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" की जगह अपना प्रोजेक्ट आईडी डालें.

10. Cloud Storage बकेट बनाना

फ़्रंटएंड के स्टैटिक ऑब्जेक्ट के लिए, Cloud Storage बकेट बनाना

  1. Cloud Console में, नेविगेट करें नेविगेशन मेन्यू ☰ > स्टोरेज पर क्लिक करें.

87ff9469db4eb77f.png

  1. बकेट बनाएं पर क्लिक करें.
  2. कोई ऐसा नाम दें जो दुनिया भर में यूनीक हो.

a15a6612e92a39d3.png

  1. चुनें कि आपको अपना डेटा कहां सेव करना है. क्षेत्र चुनें और अपनी ज़रूरत के हिसाब से जगह चुनें.
  2. डिफ़ॉल्ट स्टोरेज क्लास के तौर पर स्टैंडर्ड चुनें.

9c56abe632cf61db.png

  1. बकेट-लेवल पर एक जैसी अनुमतियां सेट करें (सिर्फ़ बकेट की नीति) चुनें. इसके बाद, बकेट बनाने के लिए जारी रखें पर क्लिक करें.

f175ac794049df04.png

  1. बकेट बन जाने के बाद, नेविगेशन मेन्यू ☰ > स्टोरेज > ब्राउज़र पर क्लिक करें. इसके बाद, बनाई गई बकेट ढूंढें.

9500ee19b427158c.png

  1. बदलाव करने के लिए, बकेट के बगल में मौजूद 796e7c9e65ae751f.png पर क्लिक करें. इसके बाद, बकेट की अनुमतियां बदलें पर क्लिक करें.

fd0a310bc3656edd.png

  1. सदस्य जोड़ें पर क्लिक करें. इसके बाद, नए सदस्य पर क्लिक करें. "allUsers" डालें. इसके बाद, भूमिका चुनें > स्टोरेज ऑब्जेक्ट व्यूअर पर क्लिक करें. इससे allUsers को स्टैटिक फ़्रंटएंड फ़ाइलें देखने का ऐक्सेस मिलता है. यह फ़ाइलों के लिए सबसे सही सुरक्षा सेटिंग नहीं है. हालांकि, यह इस कोडलैब के लिए काम करती है.

7519116abd56d5a3.png

उपयोगकर्ता की ओर से अपलोड की गई इमेज के लिए Cloud Storage बकेट बनाना

उपयोगकर्ता की इमेज अपलोड करने के लिए, एक अलग बकेट बनाने के लिए इन्हीं निर्देशों का पालन करें. "allUsers" के लिए अनुमतियां फिर से सेट करें. हालांकि, भूमिकाओं के तौर पर स्टोरेज ऑब्जेक्ट क्रिएटर और स्टोरेज ऑब्जेक्ट व्यूअर को चुनें.

11. फ़्रंटएंड ऐप्लिकेशन में Cloud Storage बकेट कॉन्फ़िगर करना

settings.py में Cloud Storage बकेट को कॉन्फ़िगर करें

  1. mysite/setting.py खोलें.
  2. GCS_BUCKET वैरिएबल ढूंढें और ‘<YOUR-GCS-BUCKET-NAME>' को अपने Cloud Storage स्टैटिक बकेट से बदलें.
  3. GS_MEDIA_BUCKET_NAME वैरिएबल ढूंढें और ‘<YOUR-GCS-BUCKET-NAME-MEDIA>' को इमेज के लिए Cloud Storage बकेट के नाम से बदलें.
  4. GS_STATIC_BUCKET_NAME वैरिएबल ढूंढें और ‘<YOUR-GCS-BUCKET-NAME-STATIC>' को स्टैटिक फ़ाइलों के लिए, Cloud Storage बकेट के नाम से बदलें.
  5. फ़ाइल सेव करें.
GCS_BUCKET = '<YOUR-GCS-BUCKET-NAME>'
GS_MEDIA_BUCKET_NAME = '<YOUR-GCS-BUCKET-NAME-MEDIA>'
GS_STATIC_BUCKET_NAME = '<YOUR-GCS-BUCKET-NAME-STATIC>'

home.html में Cloud Storage बकेट को कॉन्फ़िगर करना

  • चैट फ़ोल्डर खोलें. इसके बाद, templates खोलें और home-changeme.html का नाम बदलकर home.html करें.
  • <YOUR-GCS-BUCKET-NAME-MEDIA> ढूंढें और इसे उस बकेट के नाम से बदलें जहां आपको उपयोगकर्ता की अपलोड की गई फ़ाइल सेव करनी है. इससे, उपयोगकर्ता की अपलोड की गई फ़ाइल को फ़्रंटएंड में सेव करने और स्टैटिक ऐसेट को Cloud Storage बकेट में रखने से रोका जाता है. Vision API, फ़ाइल को चुनने और अनुमान लगाने के लिए Cloud Storage बकेट को कॉल करता है.

12. ऐप्लिकेशन को स्थानीय तौर पर बनाना और चलाना

अपने लोकल कंप्यूटर पर Django ऐप्लिकेशन चलाने के लिए, आपको Python डेवलपमेंट एनवायरमेंट सेट अप करना होगा. इसमें Python, pip, और virtualenv शामिल हैं. निर्देशों के लिए, Python डेवलपमेंट एनवायरमेंट सेट अप करना लेख पढ़ें.

  1. एक अलग Python एनवायरमेंट बनाएं और डिपेंडेंसी इंस्टॉल करें.
virtualenv env
source env/bin/activate
pip install -r requirements.txt
  1. अपने मॉडल सेट अप करने के लिए, Django माइग्रेशन चलाएं.
python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate
  1. लोकल वेब सर्वर शुरू करें.
python3 manage.py runserver
  1. अपने वेब ब्राउज़र में, http://localhost:8000/ पर जाएं. आपको एक सामान्य वेबपेज दिखेगा, जो इस तरह दिखेगा:.

8f986b8981f80f7b.png

सेंपल ऐप्लिकेशन के पेजों को आपके कंप्यूटर पर चल रहे Django वेब सर्वर से डिलीवर किया जाता है. जब आप आगे बढ़ने के लिए तैयार हों, तो लोकल वेब सर्वर को बंद करने के लिए Control+C (Macintosh पर Command+C) दबाएं.

Django admin console का इस्तेमाल करना

  1. सुपरयूज़र बनाना.
python3 manage.py createsuperuser
  1. लोकल वेब सर्वर शुरू करें.
python3 manage.py runserver
  1. अपने वेब ब्राउज़र में http://localhost:8000/admin/ पर जाएं. एडमिन साइट पर लॉग इन करने के लिए, वह उपयोगकर्ता नाम और पासवर्ड डालें जो आपने createsuperuser चलाते समय बनाया था.

13. ऐप्लिकेशन को App Engine स्टैंडर्ड एनवायरमेंट में डिप्लॉय करना

नीचे दी गई कमांड चलाकर, सभी स्टैटिक कॉन्टेंट को एक फ़ोल्डर में इकट्ठा करें. इससे ऐप्लिकेशन की सभी स्टैटिक फ़ाइलें, settings.py में STATIC_ROOT के ज़रिए तय किए गए फ़ोल्डर में चली जाती हैं:

python3 manage.py collectstatic

ऐप्लिकेशन को अपलोड करने के लिए, ऐप्लिकेशन की उस डायरेक्ट्री में जाकर यह कमांड चलाएं जहां app.yaml फ़ाइल मौजूद है:

gcloud app deploy

अपडेट पूरा होने की सूचना देने वाले मैसेज का इंतज़ार करें.

14. फ़्रंटएंड ऐप्लिकेशन की जांच करना

अपने वेब ब्राउज़र में, https://<your_project_id>.appspot.com पर जाएं

इस बार, आपके अनुरोध को App Engine स्टैंडर्ड एनवायरमेंट में चल रहा वेब सर्वर पूरा करता है.

app deploy कमांड, ऐप्लिकेशन को app.yaml में बताए गए तरीके से डिप्लॉय करती है. साथ ही, डिप्लॉय किए गए नए वर्शन को डिफ़ॉल्ट वर्शन के तौर पर सेट करती है. इससे, सभी नए ट्रैफ़िक को यह वर्शन दिखाया जाता है.

15. प्रोडक्शन

जब आपको प्रोडक्शन में अपना कॉन्टेंट दिखाना हो, तब mysite/settings.py में DEBUG वैरिएबल को False में बदलें.

16. अपने चैटबॉट की जांच करना

सिम्युलेटर में अपने चैटबॉट को टेस्ट किया जा सकता है. इसके अलावा, वेब या Google Home के साथ इंटिग्रेट किए गए चैटबॉट का इस्तेमाल किया जा सकता है.

  1. उपयोगकर्ता: "नमस्ते"
  2. चैटबॉट: "नमस्ते! लैंडमार्क के बारे में जानने के लिए, कोई फ़ोटो अपलोड करें."
  3. जब उपयोगकर्ता कोई इमेज अपलोड करता है.

इस इमेज को डाउनलोड करें, इसका नाम demo.jpg रखें, और इसका इस्तेमाल करें.

c3aff843c9f132e4.jpeg

  1. चैटबॉट: "फ़ाइल प्रोसेस की जा रही है. यहां नतीजे दिए गए हैं: गोल्डन गेट ब्रिज, गोल्डन गेट नेशनल रिक्रिएशन एरिया, गोल्डन गेट ब्रिज, गोल्डन गेट ब्रिज, गोल्डन गेट ब्रिज."

कुल मिलाकर, यह ऐसा दिखना चाहिए:

228df9993bfc001d.png

17. व्यवस्थित करें

अगर आपको Dialogflow के अन्य कोडलैब पूरे करने हैं, तो इस सेक्शन को छोड़ें और बाद में इस पर वापस आएं.

Dialogflow एजेंट को मिटाना

  1. अपने मौजूदा एजेंट के बगल में मौजूद, ca4337eeb5565bcb.png पर क्लिक करें.

520c1c6bb9f46ea6.png

  1. सामान्य टैब में, नीचे की ओर स्क्रोल करें और इस एजेंट को मिटाएं पर क्लिक करें.
  2. इसके बाद, दिखने वाली विंडो में मिटाएं टाइप करें और मिटाएं पर क्लिक करें.

18. बधाई हो

आपने Dialogflow में एक चैटबॉट बनाया है और उसे Vision API के साथ इंटिग्रेट किया है. अब आप चैटबॉट डेवलपर बन गए हैं!

ज़्यादा जानें

ज़्यादा जानने के लिए, Dialogflow Github पेज पर कोड के सैंपल देखें.