Встройте Looker с помощью аналитики диалогов.

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

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

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

После выполнения этого практического задания вы узнаете:

• Как настроить приложение Looker Embed Reference локально
• Как создать компонент чата React с помощью библиотеки Looker Components
• Как передать фильтр панели мониторинга встроенного приложения в качестве контекста для анализа диалогов.
• Как включить чат на основе разговорной аналитики для управления фильтрами встроенной панели управления

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

Для выполнения этого практического задания вам потребуется:

• Экземпляр Looker с установленным блоком Looker Block для демографических данных ASC и включенной функцией встраивания SSO.
• API и доступ для разработчиков к вашему экземпляру Looker.
• Локальная среда с установленными Node v18, yarn, Git и gcloud.
• Облачный проект с настроенными для вашей учетной записи пользователя ролями IAM:
• roles/bigquery.dataViewer BigQuery Data Viewer
• roles/bigquery.user Пользователь BigQuery
• roles/looker.instanceUser Looker Instance User

2. Настройка анализа диалогов.

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

Аутентификация через gcloud

1. Пройдите аутентификацию с помощью своей учетной записи пользователя в локальной среде:

gcloud auth login

2. Установите учетные данные приложения по умолчанию (ADC) и проект выставления счетов в вашем gcloud:

gcloud auth application-default login
gcloud auth application-default set-quota-project YOUR_PROJECT_ID

Включите API для анализа диалогов

3. Включите API облачных проектов. Пожалуйста, замените YOUR_PROJECT_ID на идентификатор вашего проекта Google Cloud:

gcloud services enable geminidataanalytics.googleapis.com bigquery.googleapis.com cloudaicompanion.googleapis.com --project=YOUR_PROJECT_ID

Создайте агент данных

4. Откройте Google Colab .
5. В Google Colab загрузите этот блокнот из репозитория Looker Embed Reference .
6. Выполните все шаги блокнота. Вам потребуется идентификатор вашего проекта Cloud и URI вашего экземпляра Looker с косой чертой в конце, например, "https://my.looker.app/" . В конце блокнота вы должны получить успешный результат.

Теперь у вас есть доступный агент анализа данных для анализа разговоров , готовый принимать сообщения чата, запрашивать данные из Looker Explore на вашей встроенной панели мониторинга Looker и возвращать результаты и визуализации.

3. Настройка ссылки для встраивания Looker.

Давайте настроим приложение Looker Embed Reference в вашей локальной среде, чтобы вы могли опробовать пример интеграции чата Conversational Analytics со встроенной панелью мониторинга Looker.

Клонируйте репозиторий

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

git clone "https://github.com/looker-open-source/LookerEmbedReference.git"

2. Перейдите в клонированную вами директорию LookerEmbedReference :

cd LookerEmbedReference

Настройте и запустите локальный сервер внешнего интерфейса.

3. Установите зависимости в каталоге Frontend

cd Frontend
yarn install

4. Создайте файл .env в корневом каталоге Frontend , указав учетные данные. YOUR_LOOKER_INSTANCE_URI должен содержать URI вашего экземпляра Looker без завершающего слэша. Содержимое файла должно быть следующим:

PBL_CLIENT_PORT=3001 
API_HOST=http://localhost:3000
LOOKER_HOST=YOUR_LOOKER_INSTANCE_URI
LOOKER_API_HOST=YOUR_LOOKER_INSTANCE_URI:19999
LOOKERSDK_EMBED_HOST=YOUR_LOOKER_INSTANCE_URI

Для создания файла можно использовать следующую команду (пример):

cat > .env <<'EOF'
PBL_CLIENT_PORT=3001 
API_HOST=http://localhost:3000
LOOKER_HOST=YOUR_LOOKER_INSTANCE_URI
LOOKER_API_HOST=YOUR_LOOKER_INSTANCE_URI:19999
LOOKERSDK_EMBED_HOST=YOUR_LOOKER_INSTANCE_URI
EOF

5. Запустите сервер разработки внешнего интерфейса:

yarn run dev

Настройте и запустите серверную часть локально.

6. Откройте новую оболочку, терминал, консоль или вкладку. Перейдите в каталог Backend-Node и установите зависимости. Убедитесь, что в предыдущей оболочке/терминале запущен фронтенд-сервер.

cd ../Backend-Node
yarn install

7. Создайте файл .env в корневом каталоге Backend-Node , указав в нем учетные данные:

• YOUR_LOOKER_CLIENT_ID — это ваш идентификатор клиента Looker.
• YOUR_LOOKER_CLIENT_SECRET — это ваш секретный ключ клиента Looker.
• YOUR_LOOKER_EMBED_SECRET — это ваш секретный ключ для встраивания .
• YOUR_PROJECT_ID — это идентификатор вашего облачного проекта.
• YOUR_LOOKER_INSTANCE_URI_WITH_TRAILING_SLASH — это URI вашего экземпляра Looker с завершающей косой чертой.
• YOUR_LOOKER_INSTANCE_URI — это URI вашего экземпляра Looker без завершающей косой черты.

Содержимое файла должно быть следующим:

PBL_BACKEND_PORT=3000
LOOKERSDK_API_VERSION=4.0
LOOKERSDK_BASE_URL=YOUR_LOOKER_INSTANCE_URI_WITH_TRAILING_SLASH
LOOKERSDK_CLIENT_ID=YOUR_LOOKER_CLIENT_ID
LOOKERSDK_CLIENT_SECRET=YOUR_LOOKER_CLIENT_SECRET

LOOKERSDK_EMBED_HOST=YOUR_LOOKER_INSTANCE_URI
LOOKERSDK_EMBED_SECRET=YOUR_LOOKER_EMBED_SECRET

CLOUD_AGENT_ID=looker_embed_reference_data_agent
CLOUD_PROJECT_ID=YOUR_PROJECT_ID

Для создания файла можно использовать следующую команду (пример). Замените все учетные данные соответствующим образом:

cat > .env <<'EOF'
PBL_BACKEND_PORT=3000
LOOKERSDK_API_VERSION=4.0
LOOKERSDK_BASE_URL=YOUR_LOOKER_INSTANCE_URI_WITH_TRAILING_SLASH
LOOKERSDK_CLIENT_ID=YOUR_LOOKER_CLIENT_ID
LOOKERSDK_CLIENT_SECRET=YOUR_LOOKER_CLIENT_SECRET

LOOKERSDK_EMBED_HOST=YOUR_LOOKER_INSTANCE_URI
LOOKERSDK_EMBED_SECRET=YOUR_LOOKER_EMBED_SECRET

CLOUD_AGENT_ID=looker_embed_reference_data_agent
CLOUD_PROJECT_ID=YOUR_PROJECT_ID
EOF

8. Запустите сервер разработки бэкэнда:

yarn run dev

Теперь у вас запущен фронтенд-сервер разработки, который предоставляет JavaScript для веб-приложения. Также запущен бэкенд-сервер разработки, который обрабатывает запросы SSO Embed URL и проксирует запросы к конечным точкам Conversational Analytics.

4. Попробуйте выполнить пример.

Давайте протестируем ваше веб-приложение, запущенное локально в вашей среде.

Начните разговор

1. Откройте адрес https://localhost:3001 в любом браузере.
2. Перейдите на страницу «Встроенная панель управления с чатом» в левом главном меню навигации.
3. После загрузки чата справа введите: "Здравствуйте, кто вы?"
4. Обратите внимание на ответ.

Приложение автоматически создало объект диалога Conversational Analytics для отслеживания истории чата и загрузило интерфейс чата. Когда вы задавали вопрос в интерфейсе чата, фронтенд отправлял сообщение пользователю на ваш локальный сервер Node. Затем он перенаправлял запрос на конечную точку чата Conversational Analytics, откуда получал ответ.

Отфильтруйте встроенную панель мониторинга

Теперь ознакомьтесь со встроенной панелью управления и поработайте с ней.

5. Просмотрите встроенную панель мониторинга. Обратите внимание, что она содержит данные переписи населения по нескольким параметрам и показателям.
6. В левом верхнем углу панели мониторинга можно отфильтровать данные по штату и округу . Установите фильтр на панели мониторинга на «Техас» . Затем выберите кнопку с выделенной синим цветом круглой стрелкой, чтобы повторно запустить панель мониторинга.
7. Обратите внимание, как все данные визуализации отфильтрованы по штату Техас .

Задайте вопрос, используя контекст панели управления.

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

8. Отправьте в чат сообщение "Назовите 5 округов с самой низкой арендной платой".
9. Обратите внимание, что в вашем запросе к системе анализа диалогов теперь добавлены слова "Фильтруйте по параметру 'state.state_name', указав Техас".
10. Обратите внимание, что в ответе запрос и данные отфильтрованы по штату Техас .
11. Кроме того, после получения результатов обработки данных ваша встроенная панель мониторинга была запущена повторно с фильтром по округам , установленным на 5 округов, определенных в результатах обработки данных.

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

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

5. Создайте компонент чата.

Давайте разберемся, что происходит «под капотом», начав с компонента Chat . Мы предполагаем, что вы понимаете, как встроить панель мониторинга Looker с помощью Looker Embed SDK .

Используйте библиотеку компонентов Looker.

1. Откройте файл компонента Chat по адресу Frontend/src/components/EmbedChat/components/chat.js в вашей любимой IDE или в терминале.
2. Компонент Chat создан с использованием стандартных компонентов Looker UI React из пакета Looker Components Library .

Библиотека компонентов Looker обеспечивает бесшовную интеграцию контента Looker с вашим приложением, предоставляя готовые компоненты React, которые соответствуют стилям и компонентам встроенной панели мониторинга Looker.

Отправить сообщение пользователю

Интерфейс чата должен отправлять запрос пользователя в систему анализа диалогов.

3. В нижней части файла компонента Chat находится подкомпонент Chat , который предоставляет поле ChatInput для запроса пользователя.
4. При отправке формы метод showAndSendUserPrompt перенаправляет запрос пользователя в Conversational Analytics (через ваш Node-бэкенд).

Системные сообщения передаются потоком и отображаются на экране.

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

5. В нижней части файла компонента Chat Chat подкомпонент MessageList , содержащий логику отображения сообщений из Conversational Analytics в зависимости от типа сообщения.
6. Метод streamAndParseResponse обрабатывает ответ, постоянно пытаясь извлечь корректные системные сообщения из потокового JSON-ответа. Как только корректное системное сообщение успешно обработано, оно отображается в MessageList .

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

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

Теперь вы изучили, как компонент Chat , созданный с использованием библиотеки Looker Components, отправляет сообщение пользователю и возвращает ответ в потоковом режиме.

6. Отправьте фильтры панели мониторинга в Conversational Analytics.

Теперь давайте разберемся, как включить фильтры панели мониторинга в запрос пользователя, чтобы аналитика диалогов могла фильтровать его запрос в соответствии с контекстом панели мониторинга (ее фильтрами).

Прослушайте событие изменения фильтра на панели управления.

1. Откройте файл компонента EmbedChat по адресу Frontend/src/components/EmbedChat/EmbedChat.js, который представляет собой страницу приложения, содержащую встроенную панель управления, интегрированную с ранее рассмотренным компонентом Chat .
2. Компонент EmbedChat отслеживает событие "dashboard:filters:changed" от встроенной панели мониторинга с помощью метода .on(...) из Embed SDK. Затем компонент сохраняет текущие фильтры в своем состоянии фильтров.

Передайте состояние фильтра в Conversational Analytics.

3. Компонент EmbedChat передает фильтры в компонент Chat , который в методе showAndSendUserPrompt преобразует каждый фильтр в строку типа "Filter on dimension '...' being ..." , которая добавляется к подсказке пользователя.

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

В данном случае, например, в компоненте Chat , его объект FIELD_FILTER_MAP сопоставляет имя измерения "state.state_name" с ключом фильтра "State 📍" . Затем метод showAndSendUserPrompt использует эту карту для определения имени измерения, по которому будет выполняться фильтрация.

7. Управление фильтрами панели управления из чата.

Наконец, давайте рассмотрим, как включить компонент Chat для управления фильтрами встроенной панели управления.

Определите, какие фильтры следует установить.

1. Метод streamAndParseResponse компонента Chat постоянно проверяет наличие системного сообщения с результатами анализа разговорной активности.
2. При каждом выводе системного сообщения с результатами анализа данных методом streamAndParseResponse проверяется, соответствуют ли какие-либо измерения в данных измерениям в фильтрах.
3. В этом случае метод streamAndParseResponse преобразует столбцы данных в фильтры панели мониторинга. На этот раз метод снова использует FIELD_FILTER_MAP , но в обратном порядке, преобразуя имя измерения в ключ фильтра. Значения фильтра — это значения из столбца данных.

Отправьте событие изменения фильтра на встроенную панель мониторинга.

4. При наличии необходимых фильтров панели управления метод streamAndParseResponse вызывает метод setFilters компонента Chat с указанием этих фильтров.
5. Это вызывает метод setDashboardFilters компонента EmbedChat , который отправляет два события: "dashboard:filters:update" с фильтрами и "dashboard:run" на встроенную панель управления последовательно, используя метод send из Embed SDK.
6. Событие "dashboard:filters:update" изменяет фильтры встроенной панели мониторинга, а событие "dashboard:run" повторно выполняет запросы панели мониторинга с новыми фильтрами.

Событие "dashboard:run" необходимо отправить после события "dashboard:filters:update" . Событие "dashboard:filters:update" не приводит к автоматическому повторному выполнению запросов панели мониторинга.

8. Заключение и основные выводы

Вы создали собственный рабочий пример встроенной панели мониторинга Looker, интегрированной с чатом Conversational Analytics. Вы научились включать анализ данных на основе естественного языка с помощью встроенной панели мониторинга Looker и Conversational Analytics.

• Вы создали компонент чата с помощью библиотеки компонентов Looker.
• Вы передали контекст встроенной панели мониторинга Looker в функцию «Аналитика диалогов», чтобы упростить анализ данных.
• Вы включили аналитику разговоров, чтобы управлять фильтрами встроенной панели мониторинга для получения более подробной информации при изучении данных.

Что дальше?

• Узнайте больше о возможностях Conversational Analytics.
• Обновите пример приложения Looker Embed Reference , чтобы оно работало с вашими собственными встроенными панелями мониторинга Looker.
• Попробуйте другие варианты встраивания, доступные в локально запущенном примере приложения Looker Embed Reference !