将 Looker 与对话式分析功能搭配使用

1. 准备工作

本 Codelab 将指导您将嵌入式 Looker 信息中心与依托对话式分析的聊天功能集成，以创建统一的自然语言驱动型数据体验。为了充分利用本 Codelab，您应该熟悉 Looker 嵌入、对话式分析、JavaScript 和 React。

学习内容

完成本 Codelab 后，您将学习以下内容：

  • 如何在本地设置 Looker 嵌入参考应用
  • 如何使用 Looker 组件库构建聊天 React 组件
  • 如何将嵌入式信息中心的过滤条件作为上下文发送给对话式分析
  • 如何让依托对话式分析的聊天功能控制嵌入式信息中心的过滤条件

所需条件

要完成本 Codelab，您需要：

  • 安装了 ASC 受众特征数据 Looker 组成块并启用了 单点登录嵌入的 Looker 实例
  • 对 Looker 实例的 API 和开发者访问权限
  • 安装了 Node v18、yarn、Git 和 gcloud 的本地环境
  • 为您的用户账号设置了以下 IAM 角色的云项目：
  • roles/bigquery.dataViewer BigQuery Data Viewer
  • roles/bigquery.user BigQuery User
  • roles/looker.instanceUser Looker Instance User

2. 设置对话式分析

接下来，我们来设置嵌入式信息中心的聊天功能将用于回答自然语言问题的对话式分析数据智能体。

使用 gcloud 进行身份验证

  1. 在本地环境中使用用户账号进行身份验证：
gcloud auth login
  1. 在 gcloud 上设置应用默认凭据 (ADC) 和结算项目：
gcloud auth application-default login
gcloud auth application-default set-quota-project YOUR_PROJECT_ID

启用对话式分析 API

  1. 启用 Cloud 项目 API。请将 YOUR_PROJECT_ID 替换为您的 Google Cloud 项目的 ID：
gcloud services enable geminidataanalytics.googleapis.com bigquery.googleapis.com cloudaicompanion.googleapis.com --project=YOUR_PROJECT_ID

创建数据智能体

  1. 打开 Google Colab。
  2. 在 Google Colab 中，从 Looker 嵌入参考代码库加载此笔记本。
  3. 运行笔记本的所有步骤。您需要提供 Cloud 项目 ID 和 Looker 实例的 URI（带尾随斜杠），例如 "https://my.looker.app/"。笔记本末尾应显示成功结果。

现在，您已拥有一个可用的 对话式分析数据智能体，该智能体可以接受聊天消息、查询嵌入式 Looker 信息中心内的 Looker 探索，并返回结果和可视化图表。

3. 设置 Looker 嵌入参考

接下来，我们在本地环境中设置 Looker 嵌入参考应用，以便您可以试用将对话式分析聊天功能与嵌入式 Looker 信息中心集成的示例。

克隆代码库

  1. 将 GitHub 代码库 克隆到本地环境。请参阅下面的示例命令：
git clone "https://github.com/looker-open-source/LookerEmbedReference.git"
  1. 进入您克隆的 LookerEmbedReference 目录：
cd LookerEmbedReference

设置并运行本地前端服务器

  1. 在 Frontend 目录中安装依赖项
cd Frontend
yarn install
  1. 在 Frontend 目录根目录中设置包含凭据的 .env 文件。YOUR_LOOKER_INSTANCE_URI 应该是 Looker 实例的 URI，不带尾随斜杠。文件内容应如下所示：
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
  1. 运行前端开发服务器：
yarn run dev

在本地设置并运行后端服务器

  1. 打开新的 Shell、终端、控制台或标签页。进入 Backend-Node 目录并安装依赖项。请务必保留之前运行前端服务器的 Shell/终端。
cd ../Backend-Node
yarn install
  1. 在 Backend-Node 目录根目录中设置包含凭据的 .env 文件：
  • YOUR_LOOKER_CLIENT_ID 是您的 Looker 客户端 ID。
  • YOUR_LOOKER_CLIENT_SECRET 是您的 Looker 客户端密钥。
  • YOUR_LOOKER_EMBED_SECRET 是您的 嵌入密钥。
  • YOUR_PROJECT_ID 是您的 Cloud 项目 ID。
  • YOUR_LOOKER_INSTANCE_URI_WITH_TRAILING_SLASH 是您的 Looker 实例 URI，带尾随斜杠。
  • YOUR_LOOKER_INSTANCE_URI 是您的 Looker 实例 URI，不 带尾随斜杠。

文件内容应如下所示：

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
  1. 运行后端开发服务器：
yarn run dev

现在，您已运行前端开发服务器，该服务器为 Web 应用提供 JavaScript。您还运行了后端开发服务器，该服务器负责处理 SSO 嵌入网址请求，并将请求代理到对话式分析端点。

4. 尝试运行示例

接下来，我们来试用一下现在在您的环境中本地运行的 Web 应用。

发起对话

  1. 在您选择的浏览器中打开地址 https://localhost:3001。
  2. 在左侧主导航栏中，前往嵌入式信息中心（带聊天功能） 页面。
  3. 右侧的聊天组件加载完毕后，输入“Hello, who are you?”。
  4. 注意响应。

该应用自动创建了一个对话式分析 对话 对象来跟踪聊天记录，并加载了聊天界面。当您向聊天界面提出问题时，前端会将用户消息发送到本地 Node 后端服务器。然后，它会将请求代理到对话式分析 聊天 端点，并代理来自该端点的响应。

过滤嵌入式信息中心

现在，请熟悉嵌入式信息中心并与之互动。

  1. 滚动浏览嵌入式信息中心。请注意，它涵盖了多个维度和指标的人口普查数据。
  2. 您可以在信息中心的左上角按州 和县 过滤信息中心。将信息中心过滤条件设置为 Texas 。然后，选择新蓝色突出显示的圆形箭头按钮，以重新运行信息中心。
  3. 请注意，所有可视化图表数据都按州 Texas 进行了过滤。

在信息中心上下文中提问

现在，我们已过滤信息中心，接下来继续调查信息中心内的数据。

  1. 在聊天中提交“Tell me the top 5 counties with lowest rent.”。
  2. 请注意，您向对话式分析发出的提示现在包含其他字词“Filter on dimension ‘state.state_name' being Texas.”。
  3. 现在，请注意响应的查询和数据都按州 Texas 进行了过滤。
  4. 此外，在返回数据结果后，您的嵌入式信息中心已重新运行，其县 过滤条件已设置为结果数据中定义的 5 个县。

现在，您可以继续调查人口普查数据，系统已为您方便地过滤了 5 个县。

恭喜！您已设置并试用了一个简单的示例，该示例展示了与对话式分析聊天功能集成的嵌入式信息中心。

5. 构建聊天组件

接下来，我们先探索 Chat 组件，了解其内部运作方式。我们假设您了解如何使用 Looker Embed SDK 嵌入 Looker 信息中心。

使用 Looker 组件库

  1. 在您喜欢的 IDE 或终端中打开 Chat 组件文件，该文件位于 Frontend/src/components/EmbedChat/components/chat.js。
  2. Chat 组件是使用 Looker 界面 React 组件（来自 Looker 组件库 软件包）构建的。

发送用户消息

聊天界面需要将用户的提示发送给对话式分析。

  1. 在 Chat 组件文件的底部附近，Chat 组件包含 ChatInput 子组件，该子组件为用户的提示提供输入字段。
  2. 提交时，showAndSendUserPrompt 方法会将用户的提示发送给对话式分析（通过 Node 后端代理）。

流式传输和显示系统消息

在用户向对话式分析发送消息后，我们需要显示其响应。

  1. 在 Chat 组件文件的底部附近，Chat 组件包含 MessageList 子组件，该子组件包含根据消息类型显示来自对话式分析的消息的逻辑。
  2. streamAndParseResponse 方法通过不断尝试从流式 JSON 响应中解析有效的系统消息来处理响应。每当成功解析有效的系统消息时，该消息都会显示在 MessageList 中。

现在，您已了解如何使用 Looker 组件库构建的 Chat 组件发送用户消息并流式传输响应。

6. 将信息中心过滤条件发送给对话式分析

接下来，我们来了解如何在用户的提示中添加信息中心过滤条件，以便对话式分析可以使用信息中心的上下文（其过滤条件）过滤查询。

监听信息中心的过滤条件更改事件

  1. 打开 EmbedChat 组件文件，该文件位于 Frontend/src/components/EmbedChat/EmbedChat.js,，表示包含与之前探索的 Chat 组件集成的嵌入式信息中心的应用页面。
  2. EmbedChat 组件使用 Embed SDK 的 .on(...) 方法监听来自嵌入式信息中心的 "dashboard:filters:changed" 事件。然后，该组件将其当前过滤条件存储在其过滤条件状态中。

将过滤条件状态发送给对话式分析

  1. EmbedChat 组件将过滤条件传递给 Chat 组件，该组件在 showAndSendUserPrompt 方法中将每个过滤条件转换为字符串（例如 "Filter on dimension '...' being ..."），以附加到用户的提示。

7. 通过聊天控制信息中心过滤条件

最后，我们来看看如何让 Chat 组件控制嵌入式信息中心的过滤条件。

确定要设置的过滤条件

  1. Chat 组件的 streamAndParseResponse 方法始终检查是否包含来自对话式分析的数据结果的系统消息。
  2. 每当 streamAndParseResponse 方法解析出包含数据结果的系统消息时，它都会检查数据中的任何维度是否与过滤条件中的维度相对应。
  3. 如果是，则 streamAndParseResponse 方法会将数据列转换为信息中心过滤条件。 这次，该方法再次使用 FIELD_FILTER_MAP，但这次是反向使用，即从维度名称转换为过滤条件的键。过滤条件的值是数据列中的值。

将过滤条件更改事件发送给嵌入式信息中心

  1. 使用所需的信息中心过滤条件，streamAndParseResponse 方法会使用所需的过滤条件调用 Chat 组件的 setFilters 方法。
  2. 这会调用 EmbedChat 组件的 setDashboardFilters 方法，该方法使用 Embed SDK 的 send 方法，紧接着向嵌入式信息中心发送两个事件：包含过滤条件的 "dashboard:filters:update" 和 "dashboard:run"。
  3. 在 "dashboard:filters:update" 事件更改嵌入式信息中心的过滤条件的同时，"dashboard:run" 事件会使用新过滤条件重新运行信息中心的查询。

8. 结论和要点

您已设置自己的嵌入式 Looker 信息中心工作示例，该信息中心与对话式分析聊天功能集成。您已了解如何使用嵌入式 Looker 信息中心和对话式分析启用自然语言驱动型数据探索。

  • 您使用 Looker 组件库构建了一个聊天组件。
  • 您已将嵌入式 Looker 信息中心的上下文传递给对话式分析，以简化数据探索。
  • 您已启用对话式分析来控制嵌入式信息中心的过滤条件，以便在探索数据时增强上下文。

后续操作

  • 详细了解对话式分析的 功能。
  • 更新 Looker 嵌入参考示例应用，以使用您自己的嵌入式 Looker 信息中心。
  • 试用在本地运行的 Looker 嵌入参考 示例应用中提供的其他嵌入用例！