Эта страница переведена с помощью Cloud Translation API.

Интегрируйте Vision API с Dialogflow

1. Прежде чем начать

В этом практическом занятии вы интегрируете Vision API с Dialogflow, чтобы предоставлять пользователю насыщенные и динамичные ответы на основе машинного обучения, используя изображения в качестве входных данных. Вы создадите чат-бот, который принимает изображение в качестве входных данных, обрабатывает его в Vision API и возвращает пользователю идентифицированную достопримечательность. Например, если пользователь загрузит изображение Тадж-Махала, чат-бот вернет в качестве ответа «Тадж-Махал».

Это полезно, потому что вы можете проанализировать товары на изображении и принять меры на основе полученной информации. Вы также можете создать систему обработки возвратов, которая поможет пользователям загружать чеки, извлекать дату покупки из чека и обрабатывать возврат средств, если эта дата подходит.

Ознакомьтесь со следующим примером диалогового окна:

Пользователь: Привет

Чат-бот: Привет! Вы можете загрузить фотографию, чтобы изучить достопримечательности.

Пользователь: Загрузите изображение с Тадж-Махалом.

Чат-бот: Файл обрабатывается, вот результаты: Тадж-Махал, Сад Тадж-Махала, Тадж-Махал.

Предварительные требования

Прежде чем продолжить, вам необходимо выполнить следующие практические задания:

Вам также необходимо понимать основные концепции и принципы работы Dialogflow, которые вы можете изучить в следующих видеороликах в рамках курса «Создание чат-бота с помощью Dialogflow» :

Что вы узнаете

Как создать агента Dialogflow
Как обновить агент Dialogflow для загрузки файлов
Как настроить подключение к Vision API через Dialogflow для обработки запросов
Как настроить и запустить фронтенд-приложение Django для Dialogflow
Как развернуть фронтенд-приложение Django в Google Cloud на App Engine
Как протестировать приложение Dialogflow с помощью собственного интерфейса.

Что вы построите

Создайте агента Dialogflow.
Разработайте интерфейс на Django для загрузки файла.
Реализуйте механизм выполнения запросов Dialogflow для вызова API Vision к загруженному изображению.

Что вам понадобится

Базовые знания Python.
Базовое понимание Dialogflow
Базовое понимание API Vision

2. Обзор архитектуры

Вы создадите новый интерактивный интерфейс с помощью пользовательского интерфейса Django и расширите его для интеграции с Vision API. Вы разработаете интерфейс с использованием фреймворка Django, запустите и протестируете его локально, а затем развернете в App Engine. Интерфейс будет выглядеть следующим образом:

Процесс обработки запросов будет выглядеть следующим образом, как показано на следующем изображении:

Пользователь отправит запрос через интерфейс пользователя.
Это инициирует вызов API Dialogflow detectIntent для сопоставления высказывания пользователя с соответствующим намерением.
Как только будет обнаружено намерение исследовать ориентиры, Dialogflow отправит запрос к API Vision, получит ответ и отправит его пользователю.

Вот как будет выглядеть общая архитектура.

3. Что такое Vision API?

Vision API — это предварительно обученная модель машинного обучения, которая извлекает полезную информацию из изображений. Она позволяет получить множество полезных данных, включая маркировку изображений, обнаружение лиц и ориентиров, оптическое распознавание символов и разметку контента откровенного характера. Для получения дополнительной информации см. Vision AI .

4. Создайте агента Dialogflow.

Перейдите в консоль Dialogflow .
Войдите в систему. (Если вы впервые пользуетесь сервисом, зарегистрируйтесь, используя свой адрес электронной почты.)
Примите условия использования, и вы окажетесь в консоли.
Нажмите Прокрутите страницу вниз и нажмите «Создать нового агента» .
Введите "VisionAPI" в качестве имени агента .
Нажмите «Создать» .

В рамках работы агента Dialogflow создает следующие два намерения по умолчанию:

По умолчанию приветственный запрос отправляется вашим пользователям.
В качестве резервного варианта по умолчанию используются все вопросы, которые ваш бот не понимает.

На данном этапе у вас есть функциональный бот, который приветствует пользователей, но вам нужно обновить его, чтобы сообщить пользователям, что они могут загрузить изображение для изучения достопримечательностей.

Обновите стандартное приветственное сообщение, чтобы оно уведомляло пользователя о необходимости загрузить изображение.

Нажмите «Приветственное намерение по умолчанию» .
Перейдите в раздел «Ответы» > «По умолчанию» > «Текстовый ответ или ответ SSML» и введите «Привет! Вы можете загрузить фотографию, чтобы изучить достопримечательности».

Создать сущность

Нажмите «Сущности» .

Нажмите «Создать сущность» , назовите её «имя файла» и нажмите «Сохранить ».

Создать новое намерение

Нажмите «Интенты» > «Создать интент» .
Введите "Explore uploaded image" в качестве имени намерения .
Нажмите «Обучающие фразы» > «Добавить обучающие фразы » и введите «file is demo.jpg » и «file is taj.jpeg » в качестве пользовательских выражений, используя @filename в качестве сущности.

Нажмите «Ответы» > «Добавить ответ» > «По умолчанию» > «Текстовый ответ» или «SSML-ответ» . Введите «Проверяемый файл» и нажмите «Добавить ответы».
Нажмите «Выполнение» > «Включить выполнение» и включите параметр «Разрешить вызов веб-перехватчика для этого намерения» .

5. Настройте процесс выполнения заказов для интеграции с Vision API.

Кликните на кнопку «Выполнение» .
Включить встроенный редактор .

Обновите файл 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 [];
    }
}

Вставьте следующий текст в 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"
  }
}

Нажмите « Сохранить».

6. Скачайте и запустите фронтенд-приложение.

Клонируйте этот репозиторий на свой локальный компьютер:

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

Перейдите в директорию, содержащую код. В качестве альтернативы вы можете скачать пример в виде ZIP-архива и распаковать его.

cd visionapi-dialogflow

7. Настройте локальную среду.

При развертывании ваше приложение использует встроенный в стандартную среду App Engine прокси-сервер Cloud SQL для связи с вашим экземпляром Cloud SQL. Однако для локального тестирования приложения необходимо установить и использовать локальную копию прокси-сервера Cloud SQL в вашей среде разработки. Для получения дополнительной информации см. раздел «О прокси-сервере Cloud SQL» .

Для выполнения основных административных задач в вашем экземпляре Cloud SQL вы можете использовать клиент Cloud SQL for MySQL.

Установите Cloud SQL Proxy.

Загрузите и установите Cloud SQL Proxy с помощью следующей команды. Cloud SQL Proxy используется для подключения к вашему экземпляру Cloud SQL при локальной работе.

Скачать прокси:

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

Сделайте прокси-сервер исполняемым.

chmod +x cloud_sql_proxy

Создайте экземпляр Cloud SQL.

Создайте экземпляр Cloud SQL for MySQL второго поколения. Введите в качестве имени "polls-instance" или что-то подобное. Подготовка экземпляра может занять несколько минут. После подготовки он должен отобразиться в списке экземпляров.
Теперь используйте инструмент командной строки gcloud для выполнения следующей команды, где [YOUR_INSTANCE_NAME] представляет собой имя вашего экземпляра Cloud SQL. Запишите значение, отображаемое для connectionName , для следующего шага. Оно отображается в формате [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] .

gcloud sql instances describe [YOUR_INSTANCE_NAME]

В качестве альтернативы вы можете щелкнуть по экземпляру в консоли, чтобы получить имя подключения к экземпляру .

Инициализируйте свой экземпляр Cloud SQL.

Запустите Cloud SQL Proxy, используя connectionName из предыдущего раздела.

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

Замените [YOUR_INSTANCE_CONNECTION_NAME] значением, которое вы записали в предыдущем разделе. Это установит соединение с вашего локального компьютера с вашим экземпляром Cloud SQL для целей локального тестирования. Держите Cloud SQL Proxy запущенным все время, пока вы тестируете приложение локально.

Далее создайте нового пользователя Cloud SQL и базу данных.

Создайте новую базу данных с помощью консоли Google Cloud для вашего экземпляра Cloud SQL, назвав её polls-instance . Например, вы можете ввести в качестве имени "polls".
Создайте нового пользователя с помощью Cloud Console для вашего экземпляра Cloud SQL с именем polls-instance .

Настройте параметры базы данных.

Откройте mysite/settings-changeme.py для редактирования.
Переименуйте файл в setting.py .
В двух местах замените [YOUR-USERNAME] и [YOUR-PASSWORD] на имя пользователя и пароль базы данных, которые вы создали в предыдущем разделе. Это поможет настроить подключение к базе данных для развертывания в App Engine и локального тестирования.
В строке 'HOST': 'cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANC ]' замените [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] на имя вашего экземпляра, полученное в предыдущем разделе.
Выполните следующую команду и скопируйте полученное значение connectionName для следующего шага.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Замените [YOUR-CONNECTION-NAME] значением, которое вы записали на предыдущем шаге.
Замените [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]

Закройте и сохраните settings.py .

8. Настройка служебной учетной записи

В консоли Dialogflow нажмите На вкладке «Общие» перейдите в раздел «Google Project» > «Project ID» и нажмите «Google Cloud» . чтобы открыть облачную консоль.
Нажмите меню навигации ☰ > IAM и администрирование > Учетные записи служб , затем нажмите Рядом с разделом «Интеграции Dialogflow» нажмите «Создать ключ» .

На ваш компьютер будет загружен JSON-файл, который понадобится вам в следующих разделах настройки.

9. Настройте конечную точку Dialogflow detectIntent для вызова из приложения.

В папке чата замените файл key-sample.json на ваш JSON-файл с учетными данными и назовите его key.json .
В файле views.py в папке chat измените значение GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" на идентификатор вашего проекта.

10. Создайте сегменты облачного хранилища.

Создайте хранилище Cloud Storage для статических объектов внешнего интерфейса.

В консоли Cloud Console нажмите «Навигация» > «Хранилище» .

Нажмите «Создать корзину» .
Укажите уникальное имя, доступное во всем мире.

Выберите место для хранения данных. Выберите регион и укажите местоположение, которое наилучшим образом соответствует вашим потребностям.
В качестве класса хранения по умолчанию выберите «Стандартный» .

Выберите «Установить единые разрешения на уровне корзины (только политика корзины)» , затем нажмите « Продолжить» , чтобы создать корзину.

После создания хранилища нажмите меню навигации ☰ > Хранилище > Браузер и найдите созданное вами хранилище.

Нажмите рядом с соответствующим сегментом нажмите «Изменить разрешения сегмента» .

Нажмите «Добавить участников», затем « Новые участники », введите «allUsers», после чего нажмите «Выбрать роль» > «Просмотрщик объектов хранилища ». Это предоставит всем пользователям доступ к просмотру статических файлов интерфейса. Это не идеальный вариант обеспечения безопасности файлов, но он подходит для целей данного практического занятия.

Создайте хранилище Cloud Storage для изображений, загруженных пользователями.

Следуйте тем же инструкциям, чтобы создать отдельный сегмент для загрузки изображений пользователей. Снова установите права доступа "всем пользователям", но выберите роли " Создатель объектов хранилища " и "Просмотрщик объектов хранилища" .

11. Настройте сегменты облачного хранилища в приложении на стороне клиента.

Настройте сегмент облачного хранилища в файле settings.py.

Откройте mysite/setting.py .
Найдите переменную GCS_BUCKET и замените '<YOUR-GCS-BUCKET-NA ME>' на название вашего статического хранилища Cloud Storage.
Найдите переменную GS_MEDIA_BUCKET_NAME и замените '<YOUR-GCS-BUCKET-NAME-MED IA>' на имя вашего хранилища Cloud Storage для изображений.
Найдите переменную GS_STATIC_BUCKET_NAME и замените '<YOUR-GCS-BUCKET-NAME-STAT IC>' на имя вашего сегмента Cloud Storage для статических файлов.
Сохраните файл.

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

Настройка хранилища Cloud Storage в файле home.html

Откройте папку чата, затем откройте templates и переименуйте home-changeme.html в home.html .
Найдите <YOUR-GCS-BUCKET-NAME-MEDIA> и замените его именем вашего хранилища, куда вы хотите сохранить загруженный пользователем файл. Это предотвратит сохранение загруженного пользователем файла на стороне клиента и хранение статических ресурсов в хранилище Cloud Storage. API Vision обращается к хранилищу Cloud Storage, чтобы получить файл и сделать предсказание.

12. Соберите и запустите приложение локально.

Для запуска приложения Django на локальном компьютере вам потребуется настроить среду разработки Python, включая Python, pip и virtualenv. Инструкции см. в разделе «Настройка среды разработки Python» .

Создайте изолированную среду Python и установите зависимости.

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

Запустите миграции Django, чтобы настроить ваши модели.

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

Запустите локальный веб-сервер.

python3 manage.py runserver

В веб-браузере перейдите по адресу http://localhost:8000/ . Вы должны увидеть простую веб-страницу, которая выглядит примерно так:.

Примеры страниц приложения предоставляются веб-сервером Django, работающим на вашем компьютере. Когда вы будете готовы продолжить, нажмите Control+C ( Command+C на Mac), чтобы остановить локальный веб-сервер.

Используйте административную консоль Django.

Создайте суперпользователя.

python3 manage.py createsuperuser

Запустите локальный веб-сервер.

python3 manage.py runserver

Перейдите по адресу 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, которую вы создали ранее.

Пользователь: "привет"
Чат-бот: "Привет! Вы можете загрузить фотографию, чтобы изучить достопримечательности."
Пользователь загружает изображение.

Скачайте это изображение, назовите его demo.jpg и используйте.

Чат-бот: «Файл обрабатывается, вот результаты: Golden Gate Bridge, Golden Gate National Recreation Area, Golden Gate Bridge, Golden Gate Bridge, Golden Gate Bridge».

В целом, это должно выглядеть примерно так:

17. Уборка

Если вы хотите пройти другие практические занятия по Dialogflow, пропустите этот раздел и вернитесь к нему позже.

Удалите агент Dialogflow.

Нажмите рядом с вашим текущим агентом.

На вкладке «Общие» прокрутите вниз и нажмите «Удалить этого агента» .
В появившемся окне введите «Удалить» и нажмите «Удалить» .

18. Поздравляем!

Вы создали чат-бота в Dialogflow и интегрировали его с Vision API. Теперь вы — разработчик чат-ботов!

Узнать больше

Чтобы узнать больше, ознакомьтесь с примерами кода на странице Dialogflow в GitHub .