Erreichen

Grow

Manage

Automate

Erreichen

Grow

Manage

Automate

Wie man Flows mit der Google Vision API und Google Cloud Functions verwendet

Flow-Builder

1 min read

Wie man Flows mit der Google Vision API und Google Cloud Functions verwendet

Flow-Builder

1 min read

Wie man Flows mit der Google Vision API und Google Cloud Functions verwendet

Flows ist eine leistungsstarke Drag-and-Drop-Automatisierungs-Engine zur Erstellung von Kommunikationsabläufen. Ursprünglich haben wir es als No-Code-Lösung konzipiert, aber wir haben festgestellt, dass viele Benutzer durch das Schreiben von etwas Code für spezifische Anwendungsfälle wirklich leistungsstarkes Verhalten erzielen konnten. Diese Code-Snippets können sich innerhalb des Flow Builder befinden, oder sie können 3rd-Party-Cloud-Funktionen wie AWS Lambda-Funktionen oder Google Cloud Functions sein.

Dies ist eine einfache Demonstration der Verwendung von GoogleCloud Functions und Flows, um Bildkennung auf einem über Telegram gesendeten Bild durchzuführen.

Flows und Beyond

Als Entwickler von Flows frage ich mich oft, wer unsere Nutzer sind, warum sie Flows verwenden und was sie benötigen, um ihre Ziele zu erreichen; und dann, welche Funktionen wir implementieren müssen, um diesen Nutzern bestmöglich zu dienen.

Flows ist eine leistungsstarke Drag-and-Drop-Automatisierungs-Engine zur Erstellung von Kommunikationsflüssen. Ursprünglich haben wir es als No-Code-Lösung konzipiert, aber wir haben festgestellt, dass viele Nutzer sehr leistungsfähiges Verhalten erreichen können, indem sie für spezifische Anwendungsfälle etwas Code schreiben. Diese Code-Schnipsel können innerhalb von Flows sein oder es können 3rd-Party-Cloud-Funktionen wie AWS Lambda-Funktionen oder Google Cloud Functions sein.

Ein interessantes Anwendungsbeispiel: Bilderkennung 

Für ein kurzes und lustiges Beispiel zeige ich Ihnen, wie man eine App implementiert, die Hotdogs erkennt. Wir werden einen Flow in Flows einrichten, der Bilder von Nutzern empfängt und entscheidet, ob sie einen Hotdog gesendet haben oder nicht.

Für viele unserer Kunden kann diese Art der Bilderkennung sehr leistungsstark sein. Stellen Sie sich vor, Sie betreiben einen Lieferservice und möchten erfolgreiche Lieferungen automatisch überprüfen. Ähnlich wie das, was ich zeigen werde, könnten Sie Standortdaten, Fotos von Paketen und sogar Empfängerunterschriften verwenden, um einen Verifizierungs-Flow in Flows zu erstellen. 

Ein Plan für Erfolg

Zuerst richten wir eine Cloud-Funktion ein, die eine Anforderung mit einer URL zu einem Bild empfängt, dann nutzt sie eine Bilderkennungs-API, um das Bild zu verarbeiten, und antwortet, ob ein Hotdog im Bild ist oder nicht.

Anschließend erstellen wir einen Ablauf, der eine Nachricht von einem Benutzer über einen Messaging-Kanal (in diesem Fall Telegram) empfängt, die oben genannte Cloud-Funktion ausführt und dem Benutzer antwortet, ob in einem Bild, das er gesendet hat, ein Hotdog enthalten ist.

Zuerst richten wir eine Cloud-Funktion ein, die eine Anforderung mit einer URL zu einem Bild empfängt, dann nutzt sie eine Bilderkennungs-API, um das Bild zu verarbeiten, und antwortet, ob ein Hotdog im Bild ist oder nicht.

Anschließend erstellen wir einen Ablauf, der eine Nachricht von einem Benutzer über einen Messaging-Kanal (in diesem Fall Telegram) empfängt, die oben genannte Cloud-Funktion ausführt und dem Benutzer antwortet, ob in einem Bild, das er gesendet hat, ein Hotdog enthalten ist.

Zuerst richten wir eine Cloud-Funktion ein, die eine Anforderung mit einer URL zu einem Bild empfängt, dann nutzt sie eine Bilderkennungs-API, um das Bild zu verarbeiten, und antwortet, ob ein Hotdog im Bild ist oder nicht.

Anschließend erstellen wir einen Ablauf, der eine Nachricht von einem Benutzer über einen Messaging-Kanal (in diesem Fall Telegram) empfängt, die oben genannte Cloud-Funktion ausführt und dem Benutzer antwortet, ob in einem Bild, das er gesendet hat, ein Hotdog enthalten ist.

Einrichten der Google Cloud Function

Zuerst müssen wir eine Cloud-Funktion einrichten. Um schnell zu beginnen, erstellen Sie eine Cloud-Funktion mit diesem Tutorial: https://cloud.google.com/functions/docs/quickstart-console. Wählen Sie als ‚Trigger‘ den HTTP-Trigger, Ausführungsumgebung: Node.js 10, und fügen Sie im Quellcode-Feld das Codestück ein. Es ist ein einfacher Code, der überprüft, ob die Anfrage JSON-Code enthält und mit ja oder nein antwortet. 

/**
 * 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 Console interface with options for creating a new Cloud Function.


Als Nächstes müssen Sie diese Funktion bereitstellen. Um sie innerhalb der Google Cloud Platform zu testen, befolgen Sie die Schritte aus dem Tutorial. 

Um aus Ihrem Browser zu testen, gehen Sie zur folgenden URL und fügen Sie die spezifische Adresse für Ihre Funktion ein:

https://your-function-address.cloudfunctions.net/HotDogOrNot/?url=hello sollte {“isHotDog”: true} zurückgeben und die Adresse https://your-function-address.cloudfunctions.net/HotDogOrNot sollte {“isHotDog”: false} zurückgeben.

Schöne Arbeit! Sie haben eine Google Cloud-Funktion eingerichtet. Jetzt müssen wir unsere Cloud-Funktion intelligenter machen.

Einrichtung der Google Vision API

Um es intelligenter zu machen, fügen wir eine Bilderkennung hinzu. Zu diesem Zweck verwenden wir die Google Vision API. Um zu beginnen, folgen Sie den Schritten 1-4 dieses Tutorials: https://cloud.google.com/vision/docs/quickstart-client-libraries. Im Tutorial aktivieren Sie die Vision API und erstellen ein Dienstkonto, um sie zu nutzen.

Kehren Sie nun zu der von Ihnen erstellten Cloud-Funktion zurück. Schalten Sie „Umgebungsvariablen, Netzwerkeinstellungen, Zeitüberschreitungen und mehr“ um und wählen Sie im Feld „Dienstkonto“ das VisionAPI-Dienstkonto aus, das Sie gerade erstellt haben. Jetzt können wir in unserer Funktion auf die Vision API zugreifen.

Advanced options interface of a cloud service configuration.


Jetzt ändern wir den Code. Fügen Sie in einem „Package.json“-Tab diesen Code ein. Dadurch wird die Google Vision API-Bibliothek als Abhängigkeit zu Ihrer Funktion hinzugefügt.

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


Aktualisieren Sie im „Index.js“-Tab den vorhandenen Code mit dem folgenden Codefragment.

/**
 * 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
 }



Development environment displaying the code for a package.json file.


Was ist der Unterschied zur vorherigen Version? Wir haben eine Anfrage an VisionAPI hinzugefügt, die die ‘labels’ zurückgibt, die es auf dem Bild gefunden hat. Dann filtern wir diese Labels nach Beschreibung: wenn es „hot dog“ enthält und wenn es über 60% Vertrauen in dieses Label hat. Wenn nach dem Filtern mindestens 1 Label übrig bleibt, bedeutet das, dass wir einen Hotdog auf dem Bild gefunden haben.

Um zu verstehen, wie Google VisionAPI funktioniert und wie die Antwort aussieht, lesen Sie deren Dokumentation, https://cloud.google.com/vision/docs

Danach veröffentlichen Sie die neue Version unserer Funktion. Um es von Ihrem Browser aus zu testen, finden Sie ein beliebiges Bild eines Hotdogs und speichern Sie die URL. Gehen Sie nun zur URL Ihrer Funktion (indem Sie die korrekte Adresse für Ihre Funktion einfügen) https://your-function-address.cloudfunctions.net/HotDogOrNot?url=url_to_image und ersetzen Sie „url_to_image“ durch eine URL zu dem gefundenen Bild. Wenn es im Bild einen Hotdog gibt, wird die Seite {“isHotDog”: true} zurückgeben.

Jetzt verbinden wir diese Funktion mit Flow Builder.

Erstellen eines Flows in Flows

Melden Sie sich im Bird Dashboard an oder registrieren Sie sich für ein Konto, wenn Sie noch keins haben.

Wenn Sie neu bei Flows sind und noch keine Kanäle eingerichtet haben, müssen Sie zur Kanaleinrichtungsseite gehen und wählen, den Telegram-Kanal einzurichten. Ich habe Telegram für diese Demo gewählt, weil es einfach und schnell einzurichten ist.

Interface titled "Channel setup" with options to integrate communication platforms such as Telegram, Messenger, LINE, WeChat, SMS, WhatsApp, Email, and Instagram.


Jetzt haben Sie einen Kanal, den wir in Flows verwenden können. Gehen Sie zur Flows-Seite, erstellen Sie einen neuen benutzerdefinierten Flow und wählen Sie den „Telegram“-Kanal-Trigger.

User interface for selecting a communication channel trigger, showing options such as Telegram, Facebook Messenger, Email, Incoming Order Activity, and Shopify Order.


Sie werden auf eine Flow-Seite weitergeleitet, auf der Sie Ihren Telegram-Kanal als Auslöser auswählen sollten, in unserem Fall ist es „Hotdog“. Bitte fügen Sie 2 Schritte hinzu: „Variablen abrufen“ und „Nachricht an Kanal antworten“.

Im Schritt „Variablen abrufen“ werden wir unsere Cloud-Funktion aufrufen und die Antwort in die Variable „isHotDog“ abrufen, die „wahr“ oder „falsch“ als Antwort von der GoogleCloud-Funktion enthalten wird. Im URL-Feld bitte die URL zu Ihrer Funktion einfügen https://your-function-address.cloudfunctions.net/HotDogOrNot und alle anderen Felder wie auf dem Bild „Inhalt des Variablenabrufschritts“ ausfüllen.

Und im Schritt „Nachricht an Kanal antworten“ werden wir dem Kunden mit einer Nachricht antworten, die die Ja- oder Nein-Antwort enthält. Für diese fügen Sie im Feld „Mit Nachricht antworten“ folgenden Text ein: „Hotdog auf dem Bild? {{isHotDog}}“.

User interface with a form featuring fields like URL, Method, and Headers, along with options for body content and a section for setting header type, all related to configuring a web request in a cloud function environment.


Interface showing a message type selection dropdown, and options for status reports.

Wenn Sie Probleme beim Erstellen des Flows haben, können Sie das folgende Snippet verwenden:

{
  "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
 }


Flowchart illustrating an image recognition process.


Um es zu testen, senden Sie ein Bild an Ihren Telegram-Bot.

Bis jetzt sieht es cool aus! Wir haben einen kleinen Chatbot erstellt, der Bilder überprüft, die Kunden senden. Um es hübscher zu machen, fügen wir einige weitere Schritte hinzu, wie unten gezeigt: 


A flowchart diagram illustrating an image recognition process using Telegram Bot and Vision API.


Wenn Sie Probleme beim Erstellen des Flows haben, können Sie das folgende Snippet verwenden:

{
  "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
 }

Ergebnisse

A chat interface shows a humorous exchange about detecting a hotdog in an image.A mobile chat interface shows an AI chatbot identifying a photo of a hot dog.


Während dies ein lustiges Beispiel ist, glauben wir, dass diese Art von Funktionalität für unsere Benutzer sehr nützlich sein kann. 

Wenn Sie mehr Funktionen wie diese in Flows integriert haben möchten, schreiben Sie an unser Support-Team, um uns dies mitzuteilen. 

Lassen Sie uns Sie mit einem Bird-Experten verbinden.
Erleben Sie die volle Macht des Bird in 30 Minuten.

Durch die Übermittlung stimmen Sie zu, dass Bird Sie bezüglich unserer Produkte und Dienstleistungen kontaktieren darf.

Sie können sich jederzeit abmelden. Weitere Informationen zur Datenverarbeitung finden Sie in Birds Datenschutzerklärung.

Unternehmen

Newsletter

Bleiben Sie mit Bird auf dem Laufenden durch wöchentliche Updates in Ihrem Posteingang.

Durch die Übermittlung stimmen Sie zu, dass Bird Sie bezüglich unserer Produkte und Dienstleistungen kontaktieren darf.

Sie können sich jederzeit abmelden. Weitere Informationen zur Datenverarbeitung finden Sie in Birds Datenschutzerklärung.

Lassen Sie uns Sie mit einem Bird-Experten verbinden.
Erleben Sie die volle Macht des Bird in 30 Minuten.

Durch die Übermittlung stimmen Sie zu, dass Bird Sie bezüglich unserer Produkte und Dienstleistungen kontaktieren darf.

Sie können sich jederzeit abmelden. Weitere Informationen zur Datenverarbeitung finden Sie in Birds Datenschutzerklärung.

Unternehmen

Newsletter

Bleiben Sie mit Bird auf dem Laufenden durch wöchentliche Updates in Ihrem Posteingang.

Durch die Übermittlung stimmen Sie zu, dass Bird Sie bezüglich unserer Produkte und Dienstleistungen kontaktieren darf.

Sie können sich jederzeit abmelden. Weitere Informationen zur Datenverarbeitung finden Sie in Birds Datenschutzerklärung.

Lassen Sie uns Sie mit einem Bird-Experten verbinden.
Erleben Sie die volle Macht des Bird in 30 Minuten.

Durch die Übermittlung stimmen Sie zu, dass Bird Sie bezüglich unserer Produkte und Dienstleistungen kontaktieren darf.

Sie können sich jederzeit abmelden. Weitere Informationen zur Datenverarbeitung finden Sie in Birds Datenschutzerklärung.

R

Erreichen

G

Grow

M

Manage

A

Automate

Unternehmen

Newsletter

Bleiben Sie mit Bird auf dem Laufenden durch wöchentliche Updates in Ihrem Posteingang.

Durch die Übermittlung stimmen Sie zu, dass Bird Sie bezüglich unserer Produkte und Dienstleistungen kontaktieren darf.

Sie können sich jederzeit abmelden. Weitere Informationen zur Datenverarbeitung finden Sie in Birds Datenschutzerklärung.