Эта страница переведена с помощью 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
Базовое понимание Vision API

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создать объект

Нажмите «Объекты» .

Нажмите «Создать объект» , назовите его «имя файла» и нажмите « Сохранить» .

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

Нажмите «Намерения» > «Создать намерение» .
Введите «Изучить загруженное изображение» в качестве имени намерения .
Нажмите «Обучающие фразы» > «Добавить обучающие фразы» и введите «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. Настройте локальную среду

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

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

Установите прокси-сервер 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

Создайте экземпляр Cloud SQL для 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, используя connectionName из предыдущего раздела.

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

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

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

Создайте новую базу данных с помощью Google Cloud Console для своего экземпляра Cloud SQL с именем polls-instance . Например, вы можете ввести в качестве имени «опросы».
Создайте нового пользователя с помощью 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 E_NAME]» замените [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» > «Идентификатор проекта» и нажмите «Google Cloud». чтобы открыть облачную консоль.
Нажмите Меню навигации ☰ > IAM и администратор > Учетные записи служб , затем нажмите рядом с пунктом «Интеграции Dialogflow» и нажмите « Создать ключ» .

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

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

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

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

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

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

Нажмите Создать сегмент .
Укажите глобально уникальное имя.

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

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

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

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

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

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

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

11. Настройте сегменты Cloud Storage во внешнем приложении.

Настройте сегмент Cloud Storage в 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. Vision API вызывает корзину 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 на Macintosh), чтобы остановить локальный веб-сервер.

Используйте консоль администратора 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 и используйте.

Чат-бот: «Файл обрабатывается, вот результаты: Мост Золотые Ворота, Национальная зона отдыха Золотые Ворота, Мост Золотые Ворота, Мост Золотые Ворота, Мост Золотые Ворота».

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

17. Очистка

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

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

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

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

18. Поздравления

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

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

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