ผสานรวม Vision API กับ Dialogflow

1. ก่อนเริ่มต้น

ในโค้ดแล็บนี้ คุณจะได้ผสานรวม Vision API กับ Dialogflow เพื่อให้คำตอบที่สมบูรณ์และไดนามิกซึ่งอิงตามแมชชีนเลิร์นนิงกับอินพุตรูปภาพที่ผู้ใช้ระบุ คุณจะสร้างแอปแชทบอทที่รับรูปภาพเป็นอินพุต ประมวลผลใน Vision API และส่งคืนสถานที่สำคัญที่ระบุแล้วให้ผู้ใช้ เช่น หากผู้ใช้อัปโหลดรูปภาพทัชมาฮาล แชทบอทจะแสดงทัชมาฮาลเป็นคำตอบ

ซึ่งจะเป็นประโยชน์เนื่องจากคุณสามารถวิเคราะห์รายการในรูปภาพและดำเนินการกับข้อมูลที่ได้รับ นอกจากนี้ คุณยังสร้างระบบการประมวลผลการคืนเงินเพื่อช่วยให้ผู้ใช้อัปโหลดใบเสร็จ แยกวันที่ซื้อในใบเสร็จ และประมวลผลการคืนเงินได้หากวันที่เหมาะสม

ดูตัวอย่างกล่องโต้ตอบต่อไปนี้

ผู้ใช้: สวัสดี

แชทบ็อต: สวัสดี คุณสามารถอัปโหลดรูปภาพเพื่อสำรวจสถานที่สำคัญ

ผู้ใช้: อัปโหลดรูปภาพที่มีทัชมาฮาล

แชทบอท: กำลังประมวลผลไฟล์ นี่คือผลลัพธ์: ทัชมาฮาล สวนทัชมาฮาล ทัชมาฮาล

ข้อกำหนดเบื้องต้น

ก่อนดำเนินการต่อ คุณต้องทำตาม Codelab ต่อไปนี้ให้เสร็จ

1. สร้างเครื่องมือตั้งเวลานัดหมายด้วย Dialogflow
2. ผสานรวมแชทบอท Dialogflow กับ Actions on Google
3. ทําความเข้าใจเอนทิตีใน Dialogflow
4. สร้างไคลเอ็นต์ Django ส่วนหน้าสำหรับแอป Dialogflow

นอกจากนี้ คุณยังต้องทำความเข้าใจแนวคิดและโครงสร้างพื้นฐานของ Dialogflow ซึ่งคุณสามารถดูได้จากวิดีโอต่อไปนี้ในเส้นทางสร้างแชทบอทด้วย Dialogflow

สิ่งที่คุณจะได้เรียนรู้

• วิธีสร้าง Agent ของ Dialogflow
• วิธีอัปเดตเอเจนต์ Dialogflow เพื่ออัปโหลดไฟล์
• วิธีตั้งค่าการเชื่อมต่อ Vision API กับการจัดการตามคำสั่งซื้อของ Dialogflow
• วิธีตั้งค่าและเรียกใช้แอปฟรอนท์เอนด์ Django สำหรับ Dialogflow
• วิธีทําให้แอปส่วนหน้าของ Django ใช้งานได้ใน Google Cloud บน App Engine
• วิธีทดสอบแอป Dialogflow จากส่วนหน้าแบบกำหนดเอง

สิ่งที่คุณจะสร้าง

• สร้างตัวแทน Dialogflow
• ใช้ส่วนหน้าของ Django เพื่ออัปโหลดไฟล์
• ใช้การจัดการ Dialogflow เพื่อเรียกใช้ Vision API กับรูปภาพที่อัปโหลด

สิ่งที่คุณต้องมี

• มีความรู้พื้นฐานเกี่ยวกับ Python
• มีความเข้าใจพื้นฐานเกี่ยวกับ Dialogflow
• ความเข้าใจพื้นฐานเกี่ยวกับ Vision API

2. ภาพรวมสถาปัตยกรรม

คุณจะสร้างประสบการณ์การสนทนาใหม่ด้วยส่วนหน้า Django ที่กำหนดเอง และขยายเพื่อผสานรวมกับ Vision API คุณจะสร้างส่วนหน้าด้วยเฟรมเวิร์ก Django เรียกใช้และทดสอบในเครื่อง จากนั้นจึงทำให้ใช้งานได้ใน App Engine ส่วนหน้าจะมีลักษณะดังนี้

ขั้นตอนการส่งคำขอจะเป็นดังที่แสดงในรูปภาพต่อไปนี้

1. ผู้ใช้จะส่งคำขอผ่านส่วนหน้า
2. ซึ่งจะทริกเกอร์การเรียกใช้ Dialogflow detectIntent API เพื่อแมปคำพูดของผู้ใช้กับความตั้งใจที่ถูกต้อง
3. เมื่อตรวจพบเจตนาสำรวจสถานที่สำคัญ การดำเนินการตามคำขอของ Dialogflow จะส่งคำขอไปยัง Vision API รับการตอบกลับ และส่งให้ผู้ใช้

สถาปัตยกรรมโดยรวมจะมีลักษณะดังนี้

3. Vision API คืออะไร

Vision API คือโมเดล ML ที่ฝึกไว้ล่วงหน้าซึ่งได้ข้อมูลเชิงลึกจากรูปภาพ ซึ่งจะช่วยให้คุณได้รับข้อมูลเชิงลึกมากมาย รวมถึงการติดป้ายกำกับรูปภาพ การตรวจจับใบหน้าและจุดสังเกต การรู้จำอักขระด้วยภาพ และการติดแท็กเนื้อหาที่อาจไม่เหมาะสม ดูข้อมูลเพิ่มเติมได้ที่ Vision AI

4. สร้างตัวแทน Dialogflow

1. ไปที่คอนโซล Dialogflow
2. ลงชื่อเข้าใช้ (หากเป็นผู้ใช้ครั้งแรก ให้ใช้อีเมลเพื่อลงชื่อสมัครใช้)
3. ยอมรับข้อกำหนดและเงื่อนไข แล้วคุณจะเข้าสู่คอนโซลได้
4. คลิก เลื่อนไปที่ด้านล่าง แล้วคลิกสร้างเอเจนต์ใหม่
5. ป้อน "VisionAPI" เป็นชื่อเอเจนต์
6. คลิกสร้าง

Dialogflow จะสร้าง 2 เจตนาเริ่มต้นต่อไปนี้เป็นส่วนหนึ่งของ Agent

1. เจตนาต้อนรับเริ่มต้นจะทักทายผู้ใช้
2. เจตนาสำรองเริ่มต้นจะดักจับคำถามทั้งหมดที่บ็อตไม่เข้าใจ

ตอนนี้คุณมีบอทที่ใช้งานได้ซึ่งทักทายผู้ใช้แล้ว แต่คุณต้องอัปเดตบอทเพื่อให้ผู้ใช้ทราบว่าสามารถอัปโหลดรูปภาพเพื่อสำรวจสถานที่สำคัญได้

อัปเดต Intent ต้อนรับเริ่มต้นเพื่อแจ้งให้ผู้ใช้อัปโหลดรูปภาพ

1. คลิกเจตนาต้อนรับเริ่มต้น
2. ไปที่คำตอบ > ค่าเริ่มต้น > ข้อความหรือคำตอบ SSML แล้วป้อน "สวัสดี คุณสามารถอัปโหลดรูปภาพเพื่อสำรวจสถานที่สำคัญได้"

สร้างเอนทิตี

1. คลิกเอนทิตี

2. คลิกสร้างเอนทิตี ตั้งชื่อว่า "filename" แล้วคลิกบันทึก

สร้างเจตนาใหม่

1. คลิก Intents > Create Intent
2. ป้อน "สำรวจรูปภาพที่อัปโหลด" เป็นชื่อ Intent
3. คลิกวลีการฝึก > เพิ่มวลีการฝึก แล้วป้อน "ไฟล์คือ demo.jpg" และ "ไฟล์คือ taj.jpeg" เป็นนิพจน์ของผู้ใช้โดยมี @filename เป็นเอนทิตี

4. คลิกคำตอบ > เพิ่มคำตอบ > ค่าเริ่มต้น > คำตอบที่เป็นข้อความหรือ SSML ป้อน "การประเมินไฟล์" แล้วคลิกเพิ่มคำตอบ
5. คลิกการดำเนินการตามคำสั่งซื้อ > เปิดใช้การดำเนินการตามคำสั่งซื้อ แล้วเปิดเปิดใช้การเรียกใช้ Webhook สำหรับความตั้งใจนี้

5. ตั้งค่าการดำเนินการตามคำสั่งเพื่อผสานรวมกับ Vision API

1. คลิกการปฏิบัติตามคำสั่งซื้อ
2. เปิดใช้ตัวแก้ไขในบรรทัด

3. อัปเดต index.js ด้วยโค้ดต่อไปนี้ และอัปเดต YOUR-BUCKET-NAME ด้วยชื่อของ Bucket ใน 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 [];
    }
}

4. วางข้อความต่อไปนี้ลงใน 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"
  }
}

5. คลิกบันทึก

6. ดาวน์โหลดและเรียกใช้แอปฟรอนท์เอนด์

1. โคลนที่เก็บนี้ไปยังเครื่องของคุณ

https://github.com/priyankavergadia/visionapi-dialogflow.git

2. เปลี่ยนไปที่ไดเรกทอรีที่มีโค้ด หรือคุณจะดาวน์โหลดตัวอย่างเป็นไฟล์ ZIP แล้วแตกไฟล์ก็ได้

cd visionapi-dialogflow

7. ตั้งค่าสภาพแวดล้อมภายใน

เมื่อติดตั้งใช้งานแล้ว แอปจะใช้พร็อกซี Cloud SQL ที่สร้างขึ้นในสภาพแวดล้อมมาตรฐานของ App Engine เพื่อสื่อสารกับอินสแตนซ์ Cloud SQL อย่างไรก็ตาม หากต้องการทดสอบแอปในเครื่อง คุณต้องติดตั้งและใช้สำเนาพร็อกซี Cloud SQL ในเครื่องในสภาพแวดล้อมการพัฒนา ดูข้อมูลเพิ่มเติมได้ที่เกี่ยวกับพร็อกซี Cloud SQL

หากต้องการทำงานของผู้ดูแลระบบขั้นพื้นฐานในอินสแตนซ์ Cloud SQL คุณสามารถใช้ไคลเอ็นต์ Cloud SQL สำหรับ MySQL ได้

หมายเหตุ: คุณต้องตรวจสอบสิทธิ์ด้วยเครื่องมือบรรทัดคำสั่ง gcloud เพื่อใช้พร็อกซีในการเชื่อมต่อจากเครื่องในพื้นที่

ติดตั้งพร็อกซี Cloud SQL

ดาวน์โหลดและติดตั้งพร็อกซี Cloud SQL ด้วยคำสั่งต่อไปนี้ พร็อกซี 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 สำหรับ MySQL รุ่นที่สอง ป้อน "polls-instance" หรือชื่อที่คล้ายกัน อินสแตนซ์อาจใช้เวลาสักครู่จึงจะพร้อมใช้งาน เมื่อพร้อมแล้ว คุณควรจะเห็นอินสแตนซ์ในรายการอินสแตนซ์
2. ตอนนี้ให้ใช้เครื่องมือบรรทัดคำสั่ง gcloud เพื่อเรียกใช้คำสั่งต่อไปนี้ โดยที่ [YOUR_INSTANCE_NAME] คือชื่ออินสแตนซ์ Cloud SQL จดค่าที่แสดงสำหรับ connectionName ไว้สำหรับขั้นตอนถัดไป โดยจะแสดงในรูปแบบ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]

gcloud sql instances describe [YOUR_INSTANCE_NAME]

หรือคุณจะคลิกอินสแตนซ์ในคอนโซลเพื่อดูชื่อการเชื่อมต่ออินสแตนซ์ก็ได้

เริ่มต้นอินสแตนซ์ Cloud SQL

เริ่มพร็อกซี Cloud SQL โดยใช้ connectionName จากส่วนก่อนหน้า

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

แทนที่ [YOUR_INSTANCE_CONNECTION_NAME] ด้วยค่าที่คุณบันทึกไว้ในส่วนก่อนหน้า ซึ่งจะสร้างการเชื่อมต่อจากคอมพิวเตอร์ของคุณไปยังอินสแตนซ์ Cloud SQL เพื่อวัตถุประสงค์ในการทดสอบในเครื่อง เปิดพร็อกซี Cloud SQL ไว้ตลอดเวลาที่คุณทดสอบแอปในเครื่อง

จากนั้นสร้างผู้ใช้และฐานข้อมูล Cloud SQL ใหม่

1. สร้างฐานข้อมูลใหม่โดยใช้ Google Cloud Console สำหรับอินสแตนซ์ Cloud SQL ที่ชื่อ polls-instance เช่น คุณอาจป้อน "โพล" เป็นชื่อ
2. สร้างผู้ใช้ใหม่โดยใช้ Cloud Console สำหรับอินสแตนซ์ Cloud SQL ที่ชื่อ polls-instance

กำหนดการตั้งค่าฐานข้อมูล

1. เปิด mysite/settings-changeme.py เพื่อแก้ไข
2. เปลี่ยนชื่อไฟล์เป็น setting.py
3. ใน 2 แห่ง ให้แทนที่ [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]

6. แทนที่ [YOUR-CONNECTION-NAME] ด้วยค่าที่คุณบันทึกไว้ในขั้นตอนก่อนหน้า
7. แทนที่ [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]

8. ปิดและบันทึก settings.py

8. ตั้งค่าบัญชีบริการ

1. ในคอนโซลของ Dialogflow ให้คลิก ในแท็บทั่วไป ให้ไปที่โปรเจ็กต์ Google > รหัสโปรเจ็กต์ แล้วคลิก Google Cloud เพื่อเปิด Cloud Console
2. คลิกเมนูการนำทาง ☰ > IAM และผู้ดูแลระบบ > บัญชีบริการ จากนั้นคลิก ข้างการผสานรวม Dialogflow แล้วคลิกสร้างคีย์

3. ระบบจะดาวน์โหลดไฟล์ JSON ลงในคอมพิวเตอร์ ซึ่งคุณจะต้องใช้ในส่วนการตั้งค่าต่อไปนี้

9. ตั้งค่าปลายทาง detectIntent ของ Dialogflow เพื่อเรียกใช้จากแอป

1. ในโฟลเดอร์แชท ให้แทนที่ key-sample.json ด้วยไฟล์ JSON ของข้อมูลเข้าสู่ระบบ แล้วตั้งชื่อว่า key.json
2. ใน views.py ในโฟลเดอร์แชท ให้เปลี่ยน GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" เป็นรหัสโปรเจ็กต์ของคุณ

10. สร้างที่เก็บข้อมูล Cloud Storage

สร้าง Bucket ของ Cloud Storage สำหรับออบเจ็กต์แบบคงที่ของส่วนหน้า

1. ใน Cloud Console ให้คลิกไปที่เมนูการนำทาง ☰ > พื้นที่เก็บข้อมูล

2. คลิกสร้าง Bucket
3. ระบุชื่อที่ไม่ซ้ำกันทั่วโลก

4. เลือกตำแหน่งที่จะจัดเก็บข้อมูล เลือกภูมิภาค แล้วเลือกตำแหน่งที่เหมาะกับความต้องการของคุณมากที่สุด
5. เลือกมาตรฐานเป็นคลาสพื้นที่เก็บข้อมูลเริ่มต้น

6. เลือกกำหนดสิทธิ์ในแบบเดียวกันที่ระดับที่เก็บข้อมูล (นโยบายที่เก็บข้อมูลเท่านั้น) แล้วคลิกต่อไปเพื่อสร้างที่เก็บข้อมูล

7. เมื่อสร้างที่เก็บข้อมูลแล้ว ให้คลิกเมนูการนำทาง ☰ > พื้นที่เก็บข้อมูล > เบราว์เซอร์ แล้วค้นหาที่เก็บข้อมูลที่คุณสร้าง

8. คลิก ข้างที่เก็บข้อมูลที่เกี่ยวข้อง แล้วคลิกแก้ไขสิทธิ์ของที่เก็บข้อมูล

9. คลิกเพิ่มสมาชิก คลิกสมาชิกใหม่ ป้อน "allUsers" แล้วคลิกเลือกบทบาท > ผู้ดูออบเจ็กต์พื้นที่เก็บข้อมูล ซึ่งให้สิทธิ์เข้าถึงเพื่อดูไฟล์ส่วนหน้าแบบคงที่แก่ allUsers การตั้งค่าความปลอดภัยดังกล่าวไม่เหมาะสำหรับไฟล์ แต่ใช้ได้เพื่อวัตถุประสงค์ของ Codelab นี้

สร้าง Bucket ของ Cloud Storage สำหรับรูปภาพที่ผู้ใช้อัปโหลด

ทำตามวิธีการเดียวกันเพื่อสร้างที่เก็บข้อมูลแยกต่างหากสำหรับอัปโหลดรูปภาพของผู้ใช้ ตั้งค่าสิทธิ์เป็น "allUsers" อีกครั้ง แต่เลือกบทบาทเป็นผู้สร้างออบเจ็กต์ในพื้นที่เก็บข้อมูลและผู้ดูออบเจ็กต์ในพื้นที่เก็บข้อมูล

11. กำหนดค่าที่เก็บข้อมูล Cloud Storage ในแอปส่วนหน้า

กำหนดค่า Bucket ของ Cloud Storage ใน settings.py

1. เปิด mysite/setting.py
2. ค้นหาตัวแปร GCS_BUCKET แล้วแทนที่ ‘<YOUR-GCS-BUCKET-NAME>' ด้วย Bucket แบบคงที่ของ Cloud Storage
3. ค้นหาตัวแปร GS_MEDIA_BUCKET_NAME แล้วแทนที่ ‘<YOUR-GCS-BUCKET-NAME-MEDIA>' ด้วยชื่อ Bucket ของ Cloud Storage สำหรับรูปภาพ
4. ค้นหาตัวแปร GS_STATIC_BUCKET_NAME แล้วแทนที่ ‘<YOUR-GCS-BUCKET-NAME-STATIC>' ด้วยชื่อ Bucket ของ 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>'

กำหนดค่า Bucket ของ Cloud Storage ใน home.html

• เปิดโฟลเดอร์แชท แล้วเปิด 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

2. เรียกใช้การย้ายข้อมูล Django เพื่อตั้งค่าโมเดล

python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate

3. เริ่มเว็บเซิร์ฟเวอร์ในเครื่อง

python3 manage.py runserver

4. ในเว็บเบราว์เซอร์ ให้ไปที่ http://localhost:8000/ คุณควรเห็นหน้าเว็บที่เรียบง่ายซึ่งมีลักษณะดังนี้

หน้าแอปตัวอย่างจะแสดงโดยเว็บเซิร์ฟเวอร์ Django ที่ทำงานในคอมพิวเตอร์ของคุณ เมื่อพร้อมที่จะดำเนินการต่อ ให้กด Control+C (Command+C ใน Macintosh) เพื่อหยุดเว็บเซิร์ฟเวอร์ในเครื่อง

ใช้คอนโซลผู้ดูแลระบบ Django

1. สร้างผู้ใช้ขั้นสูง

python3 manage.py createsuperuser

2. เริ่มเว็บเซิร์ฟเวอร์ในเครื่อง

python3 manage.py runserver

3. ไปที่ http://localhost:8000/admin/ ในเว็บเบราว์เซอร์ หากต้องการเข้าสู่ระบบเว็บไซต์ผู้ดูแลระบบ ให้ป้อนชื่อผู้ใช้และรหัสผ่านที่คุณสร้างเมื่อเรียกใช้ createsuperuser

13. ทำให้แอปใช้งานได้ในสภาพแวดล้อมมาตรฐานของ App Engine

รวบรวมเนื้อหาแบบคงที่ทั้งหมดไว้ในโฟลเดอร์เดียวโดยเรียกใช้คำสั่งต่อไปนี้ ซึ่งจะย้ายไฟล์แบบคงที่ทั้งหมดของแอปไปยังโฟลเดอร์ที่ระบุโดย STATIC_ROOT ใน settings.py

python3 manage.py collectstatic

อัปโหลดแอปโดยเรียกใช้คำสั่งต่อไปนี้จากไดเรกทอรีของแอปที่มีไฟล์ app.yaml

gcloud app deploy

รอข้อความแจ้งว่าการอัปเดตเสร็จสมบูรณ์แล้ว

14. ทดสอบแอปส่วนหน้า

ในเว็บเบราว์เซอร์ ให้ไปที่ https://<your_project_id>.appspot.com

คราวนี้เว็บเซิร์ฟเวอร์ที่ทำงานในสภาพแวดล้อมมาตรฐานของ App Engine จะเป็นผู้ให้บริการคำขอของคุณ

คำสั่ง app deploy จะทําการติดตั้งใช้งานแอปตามที่อธิบายไว้ใน app.yaml และตั้งค่าเวอร์ชันที่ติดตั้งใช้งานใหม่เป็นเวอร์ชันเริ่มต้น ซึ่งจะทําให้เวอร์ชันดังกล่าวแสดงการเข้าชมใหม่ทั้งหมด

15. เวอร์ชันที่ใช้งานจริง

เมื่อพร้อมแสดงเนื้อหาในเวอร์ชันที่ใช้งานจริงแล้ว ให้เปลี่ยนตัวแปร DEBUG เป็น False ใน mysite/settings.py

16. ทดสอบแชทบ็อต

คุณสามารถทดสอบแชทบอทในโปรแกรมจำลอง หรือใช้การผสานรวมเว็บหรือ Google Home ที่คุณสร้างไว้ก่อนหน้านี้

1. ผู้ใช้: "สวัสดี"
2. แชทบ็อต: "สวัสดี คุณสามารถอัปโหลดรูปภาพเพื่อสำรวจสถานที่สำคัญได้"
3. ผู้ใช้อัปโหลดรูปภาพ

ดาวน์โหลดรูปภาพนี้ ตั้งชื่อว่า demo.jpg แล้วนำไปใช้

4. แชทบอท: "ระบบกำลังประมวลผลไฟล์ นี่คือผลลัพธ์: สะพานโกลเดนเกต, เขตสันทนาการแห่งชาติโกลเดนเกต, สะพานโกลเดนเกต, สะพานโกลเดนเกต, สะพานโกลเดนเกต"

โดยรวมแล้วควรมีลักษณะดังนี้

17. ล้างข้อมูล

หากต้องการทำ Codelab อื่นๆ ของ Dialogflow ให้เสร็จสมบูรณ์ ให้ข้ามส่วนนี้และกลับมาทำในภายหลัง

ลบเอเจนต์ Dialogflow

1. คลิก ข้างตัวแทนที่มีอยู่

2. ในแท็บทั่วไป ให้เลื่อนลงแล้วคลิกลบ Agent นี้
3. พิมพ์ลบในหน้าต่างที่ปรากฏขึ้น แล้วคลิกลบ

18. ขอแสดงความยินดี

คุณสร้างแชทบอทใน Dialogflow และผสานรวมกับ Vision API ตอนนี้คุณเป็นนักพัฒนาแชทบ็อตแล้ว

ดูข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมได้ที่ตัวอย่างโค้ดในหน้า Dialogflow Github