Интегрируйте 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. Нажмите Обучающие фразы > Добавить обучающие фразы и введите «file is demo.jpg » и «file is taj.jpeg » в качестве пользовательских выражений с @filename в качестве объекта.

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

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

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

3. Обновите 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 [];
    }
}

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, встроенный в стандартную среду App Engine, для связи с вашим экземпляром Cloud SQL. Однако для локального тестирования приложения необходимо установить и использовать локальную копию Cloud SQL Proxy в среде разработки. Дополнительные сведения см. в разделе О прокси-сервере Cloud SQL .

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

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

Установите облачный 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 второго поколения. Введите « pols-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. В двух местах замените [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 ». чтобы открыть облачную консоль.
2. Нажмите Меню навигации ☰ > IAM и администратор > Учетные записи служб , затем нажмите рядом с Dialogflow Integrations и нажмите Create key .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Настройте сегмент облачного хранилища в home.html.

• Откройте папку чата, затем откройте templates и переименуйте home-changeme.html changeme.html в home.html .
• Найдите <YOUR-GCS-BUCKET-NAME-MEDIA> и замените его именем своей корзины, где вы хотите сохранить загруженный пользователем файл. Это не позволяет вам хранить загруженный пользователем файл во внешнем интерфейсе и хранить статические ресурсы в корзине облачного хранилища. 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://<идентификатор_вашего_проекта>.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. Введите Удалить в появившемся окне и нажмите Удалить .

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

Учить больше

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