Reach

Grow

Manage

Automate

Reach

Grow

Manage

Automate

如何将 Flows 与 Google Vision API 和 Google Cloud Functions 一起使用

流程构建器

1 min read

如何将 Flows 与 Google Vision API 和 Google Cloud Functions 一起使用

流程构建器

1 min read

如何将 Flows 与 Google Vision API 和 Google Cloud Functions 一起使用

Flows 是一个强大的拖放式自动化引擎,用于创建通信流程。我们最初将其构想为一种无代码解决方案,但我们发现许多用户可以通过为特定用例编写一些代码来实现非常强大的功能。这些代码可以在 Flow Builder 内部,也可以是第三方云函数,如 AWS Lambda 函数或 Google Cloud Functions。

这是一个简单的演示,使用GoogleCloud FunctionsFlows在Telegram上发送的图像上进行图像识别。

Flows 和 Beyond

作为Flows的开发者,我经常思考我们的用户是谁,为什么他们使用Flows,以及他们需要什么来实现他们的目标;然后,我们需要实现哪些功能以最好地服务这些用户。




Flows是一个强大的拖放式自动化引擎,用于创建通信流。我们最初设想它是一个无代码解决方案,但我们发现许多用户可以通过编写一些代码实现非常强大的功能,以满足特定的用例。这些代码片段可以在Flows内部,也可以是像AWS Lambda功能或Google Cloud Functions这样的第三方云功能中。




一个有趣的用例:图像识别

举一个简短而有趣的例子,我将向您展示如何实现一个识别热狗的应用程序。我们将在Flows中设置一个流,该流将接收用户的图像并决定他们是否发送了热狗。




对于我们的许多客户来说,这种类型的图像识别可以非常强大。想象一下,如果您经营一个送货服务,并希望自动验证送货成功。与我即将展示的类似,您可以使用位置信息、包裹照片,甚至收件人的签名来创建一个在Flows中的验证流程。

成功的计划

首先,我们将设置一个云功能,该功能接收带有图像URL的请求,然后使用图像识别API处理图像,并响应图像中是否有热狗。




然后,我们将构建一个流程,从用户通过消息通道(在本例中为Telegram)接收消息,执行上述云功能,并回复用户所发送的图片中是否有热狗。

首先,我们将设置一个云功能,该功能接收带有图像URL的请求,然后使用图像识别API处理图像,并响应图像中是否有热狗。




然后,我们将构建一个流程,从用户通过消息通道(在本例中为Telegram)接收消息,执行上述云功能,并回复用户所发送的图片中是否有热狗。

首先,我们将设置一个云功能,该功能接收带有图像URL的请求,然后使用图像识别API处理图像,并响应图像中是否有热狗。




然后,我们将构建一个流程,从用户通过消息通道(在本例中为Telegram)接收消息,执行上述云功能,并回复用户所发送的图片中是否有热狗。

设置 Google Cloud Function

首先,我们需要设置一个云函数。为了快速开始,请使用本教程创建一个云函数:https://cloud.google.com/functions/docs/quickstart-console。作为“触发器”,选择 HTTP 触发器,执行环境:Node.js 10,然后在源代码字段中插入代码片段。这是一个简单的代码,它检查请求是否包含 JSON 代码,并回答是或否。




/**
 * Responds to any HTTP request.
 *
 * @param {!express:Request} req HTTP request context.
 * @param {!express:Response} res HTTP response context.
 */
 exports.helloWorld = (req, res) => {
  let message = req.query.url ? "yes" : "no";
  res.setHeader('Content-Type', 'application/json');
  res.status(200).send(JSON.stringify({ isHotDog: message }));
 };







接下来,您需要部署此函数。要在 Google Cloud Platform 内部进行测试,请按照教程中的步骤操作。

要从浏览器进行测试,请前往以下 URL,插入您函数的特定地址:




https://your-function-address.cloudfunctions.net/HotDogOrNot/?url=hello 应返回 {“isHotDog”: true},并且地址 https://your-function-address.cloudfunctions.net/HotDogOrNot 应返回 {“isHotDog”: false}.




干得好!您已经设置了一个谷歌云函数。现在我们需要让我们的云函数变得更智能。

设置 Google Vision API

为了让它更智能,让我们添加图像识别。为此,我们将使用Google Vision API。要开始,请按照本教程的步骤1-4:https://cloud.google.com/vision/docs/quickstart-client-libraries。在教程中,您将激活Vision API并创建一个服务帐户来使用它。




现在返回到您创建的云函数。切换“环境变量、网络、超时等”并在“服务帐户”文件中选择您刚刚创建的VisionAPI服务帐户。现在我们可以在函数内访问Vision API。







现在让我们更改代码。在“Package.json”选项卡中插入此代码。它将Google Vision API库添加为您的函数的依赖项。

{
  "name": "sample-http",
  "version": "0.0.1",
  "dependencies": {
  "@google-cloud/vision": "^1.11.0"
  }
 }




在“Index.js”选项卡中,用以下代码片段更新现有代码。

/**
 * Responds to any HTTP request.
 *
 * @param {!express:Request} req HTTP request context.
 * @param {!express:Response} res HTTP response context.
 */
 exports.helloWorld = (request, response) => {
  var url = request.query.url || request.body.url;
  if (url == null || url == "" ) {
  response.status(400).json({ error: "Must include a 'url' query parameter." });
  }
  
  
  getImageLabels(url)
  .then(labels => {
  // You can use 'console.log(labels);' command to check labels you got
  // We filter all labels if they contain "hot dog" in label description
  // And have a score > 0.6, which mean that VisionAPI is at least 60% sure that there is a hotdog on a picture
  labels = labels.filter(function(label) {
  return label.description.toLowerCase().includes("hot dog") && label.score > 0.6;
  });
  
  // If labels array contains at least 1 element, then we found a hot-dog!
  if (labels.length > 0) {
  response.status(200).json({isHotDog: true, error: ""});
  } else {
  response.status(200).json({isHotDog: false, error: ""});
  }
  })
  .catch(err => {
  response.status(500).json({ error: err });
  });
 };
  
 async function getImageLabels(imageUrl) {
  // Imports the Google Cloud client library
  const vision = require('@google-cloud/vision');
  // Creates a client
  const client = new vision.ImageAnnotatorClient();
  // Performs label detection on the image file
  const [result] = await client.labelDetection(imageUrl);
  const labels = result.labelAnnotations;
  return labels
 }










与以前版本相比有什么不同?我们添加了一个请求到VisionAPI,它会返回图像中发现的‘labels’。然后我们通过描述过滤这些标签:如果它包含“hot dog”并且该标签的置信度大于60%。如果过滤后至少剩下一个标签,这意味着我们在图像上找到了一个热狗。




要了解Google VisionAPI的工作原理以及响应的样子,请查看其文档,https://cloud.google.com/vision/docs




之后,部署我们函数的新版本。要从浏览器测试它,找到任何热狗的图像并保存其URL。现在转到您的函数的URL(插入您的函数的正确地址)https://your-function-address.cloudfunctions.net/HotDogOrNot?url=url_to_image并将“url_to_image”替换为找到的图像的URL。如果图像中有热狗,页面将返回{“isHotDog”: true}




现在让我们将此功能连接到Flow Builder。

在 Flows 中创建一个流

登录到Bird Dashboard或注册一个账户,如果您还没有的话。




如果您是Flows的新手,并且还没有设置任何频道,您需要前往频道设置页面,并选择设置Telegram频道。我选择Telegram进行此演示,因为设置简单快捷。







现在您有了一个可以在Flows中使用的频道。前往Flows页面,创建一个新的自定义流程,并选择“Telegram”频道触发器。







您将被重定向到流程页面,在那里您应选择您的Telegram频道作为触发器,在我们的案例中是“Hotdog”。请添加两个步骤:“Fetch variables”和“Reply to channel message”。




在“Fetch variables”步骤中,我们将调用我们的云函数,并将响应检索到变量“isHotDog”中,该变量将包含“true”或“false”作为来自GoogleClound函数的响应。在URL字段中,请输入您函数的URL https://your-function-address.cloudfunctions.net/HotDogOrNot,并填写所有其他字段,如“Fetch variable step content”图片中所示。




而在“Reply to channel message”步骤中,我们将通过包含是或否响应的消息回复客户。为此,请在“Reply with message”字段中插入以下文本"Hotdog on the image? {{isHotDog}}"。







如果在构建流程时遇到任何问题,您可以使用以下代码片段:

{
  "id": "",
  "revisionId": "",
  "trigger": "onReceivedConversationMessage",
  "options": {
  "callbacks": [],
  "targets": []
  },
  "metadata": {
  "title": "Image recognition",
  "isDraft": false,
  "triggerIntent": "onReceivedTelegramMessage"
  },
  "steps": [
  {
  "id": "19c3560f-a8d0-4787-8714-37c698108b69",
  "action": "fetchVariables",
  "options": {
  "url": "https://your-function-address.cloudfunctions.net/HotDogOrNot",
  "variableKeys": [
  "isHotDog"
  ],
  "intent": "fetchVariables",
  "label": "Is there a hotdog on the image?",
  "method": "POST",
  "body": "{\"url\":\"{{messageImage}}\"}",
  "contentType": "application/json"
  }
  },
  {
  "id": "ca9314a2-2f9d-489c-b4b1-50fc7a0b2cb6",
  "action": "sendConversationMessage",
  "options": {
  "content": {
  "text": "Hotdog on the image? {{isHotDog}}",
  "image": {
  "url": ""
  },
  "audio": {
  "url": ""
  },
  "video": {
  "url": ""
  },
  "file": {
  "url": ""
  },
  "location": {
  "latitude": "",
  "longitude": ""
  },
  "email": {
  "from": {
  "name": "",
  "address": ""
  },
  "subject": "",
  "content": {},
  "headers": null
  }
  },
  "type": "text",
  "recipients": {
  "conversationIds": [
  "{{conversationId}}"
  ]
  },
  "intent": "replyConversationMessage",
  "highThroughput": false
  }
  }
  ],
  "published": true,
  "createdAt": "2020-08-28T18:25:19.665815708Z",
  "updatedAt": "2020-08-29T01:15:43.669252097Z",
  "revisionCount": 22
 }







要测试它,请向您的Telegram机器人发送一张图片。

目前为止,看起来很酷!我们创建了一个小型聊天机器人,用于检查客户发送的图片。为了让它更美观,我们按照如下所示添加更多步骤:







如果在构建流程时遇到任何问题,您可以使用以下代码片段:

{
  "id": "",
  "revisionId": "",
  "trigger": "onReceivedConversationMessage",
  "options": {
  "callbacks": [],
  "targets": []
  },
  "metadata": {
  "title": "Image recognition",
  "isDraft": false,
  "triggerIntent": "onReceivedTelegramMessage"
  },
  "steps": [
  {
  "id": "0c3e4f35-0950-44dd-8682-0a21a111de77",
  "action": "switch",
  "options": {
  "cases": [
  {
  "conditions": [
  {
  "variable": "{{messageImage}}",
  "operator": "isEmptyOrNotSet",
  "value": "",
  "options": {
  "intent": "custom"
  }
  }
  ],
  "steps": [
  {
  "id": "ffd13531-a3b9-41de-a2fa-0e515feed2fe",
  "action": "sendConversationMessage",
  "options": {
  "content": {
  "text": "Please send an image.",
  "image": {
  "url": ""
  },
  "audio": {
  "url": ""
  },
  "video": {
  "url": ""
  },
  "file": {
  "url": ""
  },
  "location": {
  "latitude": "",
  "longitude": ""
  },
  "email": {
  "from": {
  "name": "",
  "address": ""
  },
  "subject": "",
  "content": {},
  "headers": null
  }
  },
  "type": "text",
  "recipients": {
  "conversationIds": [
  "{{conversationId}}"
  ]
  },
  "intent": "replyConversationMessage",
  "label": "Ask to send an image",
  "highThroughput": false
  }
  },
  {
  "id": "3d752bc6-cf35-4971-8155-44a2bea4bb49",
  "action": "endFlow",
  "options": {
  "intent": "endFlow"
  }
  }
  ],
  "id": "aa_QVqjIn9"
  }
  ],
  "defaultCase": {
  "steps": [
  {
  "id": "8f3748cf-9059-44fb-a177-bc0dab194e7b",
  "action": "sendConversationMessage",
  "options": {
  "content": {
  "text": "Thank you for the image! We started to detect a hotdog on the image.",
  "image": {
  "url": ""
  },
  "audio": {
  "url": ""
  },
  "video": {
  "url": ""
  },
  "file": {
  "url": ""
  },
  "location": {
  "latitude": "",
  "longitude": ""
  },
  "email": {
  "from": {
  "name": "",
  "address": ""
  },
  "subject": "",
  "content": {},
  "headers": null
  }
  },
  "type": "text",
  "recipients": {
  "conversationIds": [
  "{{conversationId}}"
  ]
  },
  "intent": "replyConversationMessage",
  "label": "Send \"Thanks for the image\"",
  "highThroughput": false
  }
  },
  {
  "id": "808debc0-974d-4b3f-bd4f-ed4efb30a499",
  "action": "fetchVariables",
  "options": {
  "url": "https://your-function-address.cloudfunctions.net/HotDogOrNot",
  "variableKeys": [
  "isHotDog"
  ],
  "intent": "fetchVariables",
  "label": "Send image to VisionAPI",
  "method": "POST",
  "body": "{\"url\":\"{{messageImage}}\"}",
  "contentType": "application/json"
  }
  },
  {
  "id": "c9f771fb-06ff-4362-b783-07e4bd3ff53d",
  "action": "switch",
  "options": {
  "cases": [
  {
  "conditions": [
  {
  "variable": "{{isHotDog}}",
  "operator": "==",
  "value": "true",
  "options": {
  "intent": "custom"
  }
  }
  ],
  "steps": [
  {
  "id": "02629417-e3ac-4bfa-94a9-83047c250d54",
  "action": "sendConversationMessage",
  "options": {
  "content": {
  "text": "There is a hotdog on the image. Thank you!",
  "image": {
  "url": ""
  },
  "audio": {
  "url": ""
  },
  "video": {
  "url": ""
  },
  "file": {
  "url": ""
  },
  "location": {
  "latitude": "",
  "longitude": ""
  },
  "email": {
  "from": {
  "name": "",
  "address": ""
  },
  "subject": "",
  "content": {},
  "headers": null
  }
  },
  "type": "text",
  "recipients": {
  "conversationIds": [
  "{{conversationId}}"
  ]
  },
  "intent": "replyConversationMessage",
  "label": "Send \"we detected a hotdog!\"",
  "highThroughput": false
  }
  }
  ],
  "id": "AWzLv6jksY"
  }
  ],
  "defaultCase": {
  "steps": [
  {
  "id": "b00034ce-db49-4ddf-bf8f-2be006e3fbbd",
  "action": "sendConversationMessage",
  "options": {
  "content": {
  "text": "Sorry, we didn't detect a hotdog on the image. Please try again.",
  "image": {
  "url": ""
  },
  "audio": {
  "url": ""
  },
  "video": {
  "url": ""
  },
  "file": {
  "url": ""
  },
  "location": {
  "latitude": "",
  "longitude": ""
  },
  "email": {
  "from": {
  "name": "",
  "address": ""
  },
  "subject": "",
  "content": {},
  "headers": null
  }
  },
  "type": "text",
  "recipients": {
  "conversationIds": [
  "{{conversationId}}"
  ]
  },
  "intent": "replyConversationMessage",
  "label": "Notify that we didn't detect a hotdog",
  "highThroughput": false
  }
  }
  ],
  "id": "mwk5RoiCo"
  },
  "intent": "smsConditional"
  }
  },
  {
  "id": "8778c563-c045-4aa6-80e5-4c2a29b38b3f",
  "action": "endFlow",
  "options": {
  "intent": "endFlow"
  }
  }
  ],
  "id": "iuFXBNrWTr"
  },
  "intent": "smsConditional",
  "label": "Check if user sent an image"
  }
  }
  ],
  "published": true,
  "createdAt": "2020-08-28T18:25:19.665815708Z",
  "updatedAt": "2020-08-29T01:25:15.614170299Z",
  "revisionCount": 26
 }

结果




虽然这是一个有趣的例子,但我们相信这类功能对我们的用户非常有用。 

如果您希望在Flows中内置更多类似的功能,请写信给我们的支持团队,让我们知道。 

加入我们的Newsletter。

通过每周更新到您的收件箱,随时了解 Bird 的最新动态。

通过提交,您同意 Bird 可能会就我们的产品和服务与您联系。

您可以随时取消订阅。查看Bird的隐私声明以获取有关数据处理的详细信息。

加入我们的Newsletter。

通过每周更新到您的收件箱,随时了解 Bird 的最新动态。

通过提交,您同意 Bird 可能会就我们的产品和服务与您联系。

您可以随时取消订阅。查看Bird的隐私声明以获取有关数据处理的详细信息。

加入我们的Newsletter。

通过每周更新到您的收件箱,随时了解 Bird 的最新动态。

通过提交,您同意 Bird 可能会就我们的产品和服务与您联系。

您可以随时取消订阅。查看Bird的隐私声明以获取有关数据处理的详细信息。

Pinterest 标志
Uber 标志
Square 徽标
Adobe 标志
Meta logo
PayPal 标志

Newsletter

通过每周更新到您的收件箱,随时了解 Bird 的最新动态。

通过提交,您同意 Bird 可能会就我们的产品和服务与您联系。

您可以随时取消订阅。查看Bird的隐私声明以获取有关数据处理的详细信息。

Uber 标志
Square 徽标
Adobe 标志
Meta logo

Newsletter

通过每周更新到您的收件箱,随时了解 Bird 的最新动态。

通过提交,您同意 Bird 可能会就我们的产品和服务与您联系。

您可以随时取消订阅。查看Bird的隐私声明以获取有关数据处理的详细信息。

Uber 标志
Adobe 标志
Meta logo

Newsletter

通过每周更新到您的收件箱,随时了解 Bird 的最新动态。

通过提交,您同意 Bird 可能会就我们的产品和服务与您联系。

您可以随时取消订阅。查看Bird的隐私声明以获取有关数据处理的详细信息。