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

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

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

Взгляните на следующий пример диалога:

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

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

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

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

Предпосылки

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

1. Создайте планировщик встреч с помощью Dialogflow
2. Интегрируйте чат-бот Dialogflow с Actions on Google
3. Понимание сущностей в Dialogflow
4. Создайте клиент Django для приложения Dialogflow

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

Чему вы научитесь

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

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

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

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

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

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

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

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

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

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

1. Перейдите в консоль Dialogflow .
2. Войти. (Если вы новый пользователь, используйте свой адрес электронной почты для регистрации.)
3. Примите условия и положения, и вы попадете в консоль.
4. Щелкните , прокрутите вниз и нажмите Создать нового агента .

5. Введите «VisionAPI» в качестве имени агента .

5. Нажмите «Создать» .

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

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

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

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

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

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

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

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

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

1. Нажмите Намерения > Создать намерение .
2. Введите «Исследовать загруженное изображение» в качестве имени намерения .
3. Нажмите Учебные фразы > Добавить учебные фразы и введите «файл demo.jpg » и «файл taj.jpeg » в качестве пользовательских выражений с @filename в качестве сущности.

4. Нажмите «Ответы» > «Добавить ответ» > «По умолчанию » > «Текстовый ответ или ответ SSML» . Введите «Файл оценки» и нажмите «Добавить ответы».

5. Нажмите Выполнение > Включить выполнение и включите Включить вызов веб-перехватчика для этого намерения .

1. Нажмите кнопку Выполнение .
2. Включить встроенный редактор .

3. Обновите index.js , используя следующий код, и замените YOUR-BUCKET-NAME именем вашего контейнера облачного хранилища.

'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. Нажмите «Сохранить».

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

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

2. Перейдите в каталог с кодом. Вы также можете скачать пример в формате ZIP-архива и распаковать его.

cd visionapi-dialogflow

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

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

Примечание: чтобы использовать прокси-сервер для подключения с локального компьютера, необходимо выполнить аутентификацию с помощью инструмента командной строки gcloud.

Установите облачный SQL-прокси

Загрузите и установите 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

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]

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

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

Запустите Cloud SQL Proxy, используя 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 . Например, можно ввести имя «polls».
2. Создайте нового пользователя с помощью Cloud Console для вашего экземпляра Cloud SQL с именем polls-instance .

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

1. Откройте mysite/settings-changeme.py для редактирования.
2. Переименуйте файл в setting.py .
3. В двух местах замените [YOUR-USERNAME] и [YOUR-PASSWORD] на имя пользователя и пароль базы данных, созданные в предыдущем разделе. Это поможет настроить подключение к базе данных для развёртывания App Engine и локального тестирования.
4. В строке 'HOST': 'cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANC E_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 .

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

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

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

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

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

2. Нажмите «Создать контейнер» .
3. Укажите глобально уникальное имя.

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

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

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

8. Щелкните рядом с соответствующим контейнером и нажмите Изменить разрешения контейнера .

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

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

Следуйте тем же инструкциям, чтобы создать отдельный контейнер для загрузки изображений пользователей. Снова установите разрешения allUsers, но выберите роли Storage Object Creator и Storage Object Viewer .

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

1. Откройте mysite/setting.py .
2. Найдите переменную GCS_BUCKET и замените '<YOUR-GCS-BUCKET-NA ME>» на статический контейнер вашего облачного хранилища.
3. Найдите переменную GS_MEDIA_BUCKET_NAME и замените '<YOUR-GCS-BUCKET-NAME-MED IA>» на имя вашего контейнера облачного хранилища для изображений.
4. Найдите переменную GS_STATIC_BUCKET_NAME и замените '<YOUR-GCS-BUCKET-NAME-STAT IC>» на имя вашего контейнера облачного хранилища для статических файлов.
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

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

Для запуска приложения 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 .

Соберите весь статический контент в одну папку, выполнив следующую команду, которая переместит все статические файлы приложения в папку, указанную STATIC_ROOT в settings.py :

python3 manage.py collectstatic

Загрузите приложение, выполнив следующую команду из каталога приложения, где находится файл app.yaml :

gcloud app deploy

Дождитесь сообщения о завершении обновления.

В веб-браузере перейдите по адресу https://<your_project_id>.appspot.com

На этот раз ваш запрос обслуживается веб-сервером, работающим в стандартной среде App Engine.

Команда app deploy развертывает приложение, как описано в app.yaml , и устанавливает вновь развернутую версию в качестве версии по умолчанию, заставляя ее обслуживать весь новый трафик.

Когда вы будете готовы предоставить свой контент в эксплуатацию, измените переменную DEBUG на False в mysite/settings.py .

Вы можете протестировать своего чат-бота в симуляторе или использовать интеграцию с веб-сайтом или Google Home, которую вы создали ранее.

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

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

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

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

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

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

1. Щелкните рядом с вашим текущим агентом.

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

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

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

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