Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

Trang này được dịch bởi Cloud Translation API.

Tích hợp API Vision với Dialogflow

Trong lớp học lập trình này, bạn sẽ tích hợp API Vision với Dialogflow để cung cấp phản hồi dựa trên công nghệ máy học phong phú và động cho thông tin đầu vào hình ảnh do người dùng cung cấp. Bạn sẽ tạo một ứng dụng bot trò chuyện có sử dụng hình ảnh làm dữ liệu đầu vào, xử lý hình ảnh đó trong API Vision và trả về một địa danh đã xác định cho người dùng. Ví dụ: nếu người dùng tải một hình ảnh của Taj Mahal lên, thì bot trò chuyện sẽ trả về phản hồi Taj Mahal.

Thông tin này sẽ hữu ích vì bạn có thể phân tích các mục trong hình ảnh và xử lý thông tin thu được. Bạn cũng có thể xây dựng hệ thống xử lý khoản tiền hoàn lại để giúp người dùng tải biên nhận lên, trích xuất ngày mua trong biên nhận và xử lý khoản tiền hoàn lại nếu ngày đó thích hợp.

Xem hộp thoại mẫu sau đây:

Người dùng: Xin chào

Chatbot: Xin chào! Bạn có thể tải ảnh lên để khám phá các địa danh

Người dùng: Tải hình ảnh có Taj Mahal lên.

Chatbot: Tệp đang được xử lý, sau đây là kết quả: Taj Mahal, Taj Mahal Garden, Taj Mahal.

Điều kiện tiên quyết

Trước khi tiếp tục, bạn cần hoàn thành các lớp học lập trình sau:

Bạn cũng cần tìm hiểu các khái niệm cơ bản và cấu trúc của Dialogflow. Bạn có thể thu thập thông tin từ các video sau trong lộ trình Tạo bot trò chuyện bằng Dialogflow:

Kiến thức bạn sẽ học được

Cách tạo tác nhân Dialogflow
Cách cập nhật một tác nhân Dialogflow để tải tệp lên
Cách thiết lập kết nối API Vision với phương thức thực hiện Dialogflow
Cách thiết lập và chạy ứng dụng giao diện người dùng Django cho Dialogflow
Cách triển khai ứng dụng giao diện người dùng Django cho Google Cloud trên App Engine
Cách kiểm tra ứng dụng Dialogflow từ giao diện người dùng tùy chỉnh

Sản phẩm bạn sẽ tạo ra

Tạo một tác nhân Dialogflow
Triển khai giao diện người dùng Django để tải tệp lên
Triển khai phương thức thực hiện Dialogflow để gọi API Vision cho hình ảnh đã tải lên

Bạn cần có

Kiến thức cơ bản về Python
Kiến thức cơ bản về Dialogflow
Hiểu biết cơ bản về API Tầm nhìn

Bạn sẽ tạo ra trải nghiệm trò chuyện mới với giao diện người dùng Django tùy chỉnh và mở rộng trải nghiệm này để tích hợp với API Vision. Bạn sẽ xây dựng giao diện người dùng với khung Django, chạy và thử nghiệm giao diện cục bộ rồi triển khai giao diện này cho App Engine. Giao diện người dùng sẽ trông như sau:

Luồng yêu cầu sẽ hoạt động như minh họa trong hình sau:

Người dùng sẽ gửi một yêu cầu qua giao diện người dùng.
Việc đó sẽ kích hoạt một lệnh gọi đến API allowIntent để Dialogflow để liên kết cách phát âm của người dùng với đúng ý định.
Sau khi phát hiện ý định khám phá mốc, tính năng thực hiện Dialogflow sẽ gửi yêu cầu tới API Vision, nhận phản hồi và gửi yêu cầu đó cho người dùng.

Đây là giao diện cấu trúc tổng thể.

API Vision là mô hình máy học được đào tạo trước để lấy thông tin chi tiết từ hình ảnh. Ứng dụng này có thể cung cấp cho bạn nhiều thông tin chi tiết, bao gồm cả tính năng gắn nhãn hình ảnh, tính năng phát hiện khuôn mặt và mốc, nhận dạng ký tự quang học và gắn thẻ các nội dung phản cảm. Để tìm hiểu thêm, hãy xem Vision AI.

Chuyển đến Bảng điều khiển quy trình hộp thoại.
Đăng nhập. (Nếu bạn là người dùng lần đầu, hãy sử dụng email của bạn để đăng ký.)
Chấp nhận các điều khoản và điều kiện, bạn sẽ ở trong bảng điều khiển.
Nhấp vào , di chuyển xuống dưới cùng rồi nhấp vào Tạo nhân viên hỗ trợ mới.

5. Nhập "VisionAPI" làm Tên nhân viên hỗ trợ.

Nhấp vào Tạo.

Dialogflow tạo hai ý định mặc định sau đây như là một phần của nhân viên hỗ trợ:

Mục đích chào mừng mặc định sẽ hiển thị với người dùng của bạn.
Ý định dự phòng mặc định bao gồm tất cả các câu hỏi mà bot của bạn không hiểu.

Tại thời điểm này, bạn có một bot đang hoạt động chào đón người dùng, nhưng bạn cần cập nhật bot này để cho người dùng biết rằng họ có thể tải hình ảnh lên để khám phá các địa danh.

Cập nhật ý định chào mừng mặc định để thông báo cho người dùng tải hình ảnh lên

Nhấp vào Ý định chào mừng mặc định.
Chuyển đến Phản hồi > Mặc định > Phản hồi Văn bản hoặc SSML và nhập "Xin chào! Bạn có thể tải ảnh lên để khám phá các địa danh và nội dung khác;

Tạo thực thể

Nhấp vào Thực thể.

Nhấp vào Tạo thực thể, đặt tên cho đối tượng "tên tệp&&t; rồi nhấp vào Lưu.

Tạo ý định mới

Nhấp vào Ý định > Tạo ý định.
Nhập "Khám phá hình ảnh được tải lên" làm Tên ý định.
Nhấp vào Cụm từ đào tạo > Thêm cụm từ đào tạo và nhập "file là demo.jpg" và "file là taj.jpeg" dưới dạng biểu thức người dùng với @filename làm thực thể.

Nhấp vào Phản hồi > Thêm phản hồi > Mặc định > Phản hồi Văn bản hoặc SSML. Nhập "Đánh giá tệp" rồi nhấp vào Thêm câu trả lời.

Nhấp vào Thực hiện > Bật tính năng thực hiện đơn hàng và bật Bật lệnh gọi webhook cho ý định này.

Nhấp vào Thực hiện.
Bật Trình chỉnh sửa cùng dòng.

Cập nhật index.js bằng mã sau và cập nhật YOUR-BUCKET-NAME với tên bộ chứa Cloud Storage của bạn.

'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 [];
    }
}

Dán nội dung sau vào package.json để thay thế nội dung của nội dung đó.

{
  "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"
  }
}

Nhấp vào Lưu.

Sao chép kho lưu trữ này vào máy cục bộ của bạn:

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

Hãy thay đổi thư mục chứa mã. Ngoài ra, bạn có thể tải mẫu xuống dưới dạng tệp zip và trích xuất mẫu.

cd visionapi-dialogflow

Khi được triển khai, ứng dụng của bạn sử dụng Cloud SQL Proxy được tích hợp vào môi trường tiêu chuẩn của App Engine để giao tiếp với phiên bản Cloud SQL của bạn. Tuy nhiên, để thử nghiệm ứng dụng trên máy, bạn phải cài đặt và sử dụng một bản sao cục bộ của Cloud SQL Proxy trong môi trường phát triển của mình. Để tìm hiểu thêm, hãy xem bài viết Giới thiệu về Proxy SQL SQL.

Để thực hiện các thao tác quản trị cơ bản trên phiên bản Cloud SQL, bạn có thể sử dụng ứng dụng Cloud SQL cho MySQL.

Cài đặt Cloud SQL Proxy

Tải xuống và cài đặt Proxy SQL SQL bằng lệnh sau. Proxy Cloud SQL được dùng để kết nối với phiên bản Cloud SQL của bạn khi chạy cục bộ.

Tải proxy xuống:

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

Đặt proxy có thể thực thi.

chmod +x cloud_sql_proxy

Tạo một phiên bản Cloud SQL

Tạo một Cloud SQL cho phiên bản MySQL thứ hai. Nhập "polls-instance" hoặc một tên tương tự như tên. Quá trình này có thể mất vài phút để sẵn sàng. Sau khi sẵn sàng, đối tượng sẽ hiển thị trong danh sách phiên bản.
Bây giờ, hãy dùng công cụ dòng lệnh gcloud để chạy lệnh sau trong đó [YOUR_INSTANCE_NAME] đại diện cho tên phiên bản Cloud SQL của bạn. Ghi lại giá trị được hiển thị cho connectionName cho bước tiếp theo. Tệp này hiển thị ở định dạng [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME].

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Ngoài ra, bạn có thể nhấp vào phiên bản này trong bảng điều khiển để lấy Tên kết nối phiên bản.

Khởi tạo phiên bản Cloud SQL của bạn

Khởi động Proxy Cloud SQL bằng connectionName từ phần trước.

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

Thay thế [YOUR_INSTANCE_CONNECTION_NAME] bằng giá trị mà bạn đã ghi lại trong phần trước. Lệnh đó sẽ thiết lập kết nối từ máy tính cục bộ của bạn với phiên bản Cloud SQL cho mục đích thử nghiệm cục bộ. Giữ cho proxy SQL SQL chạy trong toàn bộ thời gian bạn thử nghiệm ứng dụng trên máy.

Tiếp theo, hãy tạo người dùng và cơ sở dữ liệu mới trên Cloud SQL.

Tạo cơ sở dữ liệu mới bằng cách sử dụng Google Cloud Console cho phiên bản Cloud SQL có tên polls-instance. Ví dụ: bạn có thể nhập "polls" làm tên.
Tạo người dùng mới bằng Cloud Console cho phiên bản Cloud SQL có tên polls-instance.

Định cấu hình tùy chọn cài đặt cơ sở dữ liệu

Mở mysite/settings-changeme.py để chỉnh sửa.
Đổi tên tệp thành setting.py.
Ở hai vị trí, hãy thay thế [YOUR-USERNAME] và [YOUR-PASSWORD] bằng tên người dùng và mật khẩu cơ sở dữ liệu mà bạn đã tạo ở phần trước. Điều đó giúp thiết lập kết nối với cơ sở dữ liệu để triển khai App Engine và thử nghiệm cục bộ.
Trên dòng ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]× 39; thay thế [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] bằng tên thực thể của bạn ở phần trước.
Chạy lệnh sau và sao chép giá trị connectionName được xuất cho bước tiếp theo.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Thay thế [YOUR-CONNECTION-NAME] bằng giá trị mà bạn đã ghi lại trong bước trước đó
Thay thế [YOUR-DATABASE] bằng tên mà bạn đã chọn trong phần trước.

# [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]

Đóng và lưu settings.py.

Trong bảng điều khiển Dialogflow, hãy nhấp vào . Trong thẻ Chung, hãy chuyển đến Dự án của Google > Mã dự án rồi nhấp vào Google Cloud để mở Cloud Console.
Nhấp vào Trình đơn điều hướng ☰ > IAM và amp; Quản trị > Tài khoản dịch vụ, sau đó nhấp vào bên cạnh mục Tích hợp hộp thoại rồi nhấp vào Tạo khóa.

Tệp JSON sẽ tải xuống máy tính để bạn có thể sử dụng trong phần thiết lập sau đây.

Trong thư mục trò chuyện, hãy thay thế key-sample.json bằng tệp JSON chứa thông tin đăng nhập của bạn và đặt tên cho tệp là key.json.
Trong views.py trong thư mục trò chuyện, hãy thay đổi GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" thành mã dự án.

Tạo một bộ chứa lưu trữ đám mây cho các đối tượng tĩnh trong giao diện người dùng

Trong Cloud Console, hãy nhấp vào Trình đơn điều hướng ☰ > Bộ nhớ.

Nhấp vào Tạo nhóm.
Đặt một tên riêng biệt trên toàn cầu.

Chọn nơi lưu trữ dữ liệu của bạn. Chọn Khu vực và chọn vị trí phù hợp nhất với nhu cầu của bạn.
Chọn Chuẩn làm lớp bộ nhớ mặc định.

Chọn Thiết lập quyền một cách đồng nhất ở cấp nhóm (Chỉ chính sách nhóm), sau đó nhấp vào Tiếp tục để tạo nhóm.

Sau khi tạo bộ chứa, hãy nhấp vào Trình đơn điều hướng ☰ > Bộ nhớ> Trình duyệt và tìm bộ chứa mà bạn đã tạo.

Nhấp vào biểu tượng bên cạnh bộ chứa tương ứng rồi nhấp vào Chỉnh sửa quyền đối với bộ chứa.

Nhấp vào Thêm thành viên, nhấp vào Thành viên mới, nhập "allUsers," rồi nhấp vào Chọn vai trò > Storage Object Viewer (Chọn đối tượng lưu trữ). Điều đó cho phép quyền xem các tệp giao diện người dùng tĩnh đối với allUsers. Đó không phải là cài đặt bảo mật lý tưởng cho các tệp, nhưng nó hoạt động cho mục đích của lớp học lập trình cụ thể này.

Tạo bộ chứa Cloud Storage cho hình ảnh do người dùng tải lên

Hãy làm theo các hướng dẫn tương tự để tạo một nhóm riêng để tải hình ảnh của người dùng lên. Đặt lại quyền thành "allUsers" nhưng chọn Storage Object Creator (Trình tạo đối tượng bộ nhớ) và chọn Storage Object Viewer (Xem đối tượng lưu trữ).

Định cấu hình bộ chứa đám mây trong settings.py

Mở mysite/setting.py.
Tìm biến GCS_BUCKET và thay thế ‘<YOUR-GCS-BUCKET-NAME>×39; bằng bộ chứa tĩnh trên Cloud Storage của bạn.
Tìm biến GS_MEDIA_BUCKET_NAME và thay thế ‘<YOUR-GCS-BUCKET-NAME-MEDIA>×39; bằng tên bộ chứa Cloud Storage của bạn cho hình ảnh.
Tìm biến GS_STATIC_BUCKET_NAME và thay thế ‘<YOUR-GCS-BUCKET-NAME-STATIC>×39; bằng tên bộ chứa Cloud Storage của bạn cho các tệp tĩnh.
Lưu tệp.

GCS_BUCKET = '<YOUR-GCS-BUCKET-NAME>'
GS_MEDIA_BUCKET_NAME = '<YOUR-GCS-BUCKET-NAME-MEDIA>'
GS_STATIC_BUCKET_NAME = '<YOUR-GCS-BUCKET-NAME-STATIC>'

Định cấu hình bộ chứa đám mây trong home.html

Mở thư mục trò chuyện, sau đó mở templates và đổi tên home-changeme.html thành home.html.
Tìm <YOUR-GCS-BUCKET-NAME-MEDIA> và thay thế bằng tên bộ chứa mà bạn muốn lưu tệp do người dùng tải lên. Điều này ngăn bạn lưu trữ tệp do người dùng tải lên trong giao diện người dùng và giữ lại các tài sản tĩnh trong bộ chứa Cloud Storage. API Vision gọi bộ chứa Cloud Storage để chọn tệp và đưa ra dự đoán.

Để chạy ứng dụng Django trên máy tính cục bộ, bạn cần thiết lập môi trường phát triển Python, bao gồm Python, pip và Virtualenv. Để biết hướng dẫn, hãy tham khảo bài viết Thiết lập môi trường phát triển Python.

Tạo một môi trường Python riêng biệt và cài đặt các phần phụ thuộc.

virtualenv env
source env/bin/activate
pip install -r requirements.txt

Chạy quá trình di chuyển Django để thiết lập mô hình của bạn.

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

Khởi động máy chủ web cục bộ.

python3 manage.py runserver

Trong trình duyệt web, hãy chuyển đến http://localhost:8000/. Bạn sẽ thấy một trang web đơn giản trông như sau:

Các trang ứng dụng mẫu do máy chủ web Django chạy trên máy tính của bạn phân phối. Khi bạn đã sẵn sàng tiến hành, hãy nhấn Control+C (Command+C trên Macintosh) để dừng máy chủ web cục bộ.

Sử dụng bảng điều khiển dành cho quản trị viên Django

Tạo siêu người dùng.

python3 manage.py createsuperuser

Khởi động máy chủ web cục bộ.

python3 manage.py runserver

Chuyển đến http://localhost:8000/admin/ trong trình duyệt web. Để đăng nhập vào trang web của quản trị viên, hãy nhập tên người dùng và mật khẩu mà bạn đã tạo khi chạy createsuperuser.

Thu thập tất cả nội dung tĩnh vào một thư mục bằng cách chạy lệnh sau, lệnh này di chuyển tất cả các tệp tĩnh của ứng dụng vào thư mục do STATIC_ROOT chỉ định trong settings.py:

python3 manage.py collectstatic

Tải ứng dụng lên bằng cách chạy lệnh sau từ thư mục của ứng dụng chứa tệp app.yaml:

gcloud app deploy

Chờ thông báo cho bạn biết rằng quá trình cập nhật đã hoàn tất.

Trong trình duyệt web, hãy chuyển đến https://<your_project_id>.appspot.com

Lần này, yêu cầu của bạn được máy chủ web chạy trong môi trường App Engine theo tiêu chuẩn.

Lệnh app deploy triển khai ứng dụng như mô tả trong app.yaml và đặt phiên bản mới được triển khai làm phiên bản mặc định, khiến ứng dụng này phân phát tất cả lưu lượng truy cập mới.

Khi bạn đã sẵn sàng phân phát nội dung chính thức, hãy thay đổi biến DEBUG thành False trong mysite/settings.py.

Bạn có thể thử nghiệm bot trò chuyện trong trình mô phỏng hoặc sử dụng tính năng tích hợp trên web hoặc Google Home mà bạn đã xây dựng trước đây.

Người dùng: "hi"
Chatbot: "Xin chào! Bạn có thể tải ảnh lên để khám phá các địa danh và nội dung khác;
Người dùng tải hình ảnh lên.

Hãy tải hình ảnh này xuống, đặt tên là demo.jpg rồi sử dụng.

Chatbot: "File đang được xử lý, sau đây là kết quả: Golden Gate Bridge,Golden Gold Gate National Entertainment Area,Cầu Cổng Vàng,Cầu Cổng Vàng,Cầu Cổng Vàng."

Về tổng thể, mã này sẽ có dạng như sau:

Nếu bạn muốn hoàn thành các lớp học lập trình Dialogflow khác, hãy bỏ qua phần này rồi quay lại sau.

Xoá tác nhân Dialogflow

Nhấp vào bên cạnh nhân viên hỗ trợ hiện có.

Trong thẻ Chung, hãy di chuyển xuống rồi nhấp vào Xóa nhân viên hỗ trợ này.
Nhập Delete vào cửa sổ xuất hiện rồi nhấp vào Delete (Xóa).

Bạn đã tạo một bot trò chuyện trong Dialogflow và tích hợp bot này với API Vision. Bạn hiện là một nhà phát triển bot trò chuyện!

Tìm hiểu thêm

Để tìm hiểu thêm, hãy xem các mã mẫu trên trang Dialogflow Github.