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

Vogel

06.10.2020

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 denke ich oft darüber nach, 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-Automatisierungsmaschine zur Erstellung von Kommunikationsabläufen. Ursprünglich haben wir es als No-Code-Lösung konzipiert, aber wir fanden heraus, dass viele Nutzer wirklich leistungsstarke Funktionen durch das Schreiben von Code für spezifische Anwendungsfälle erreichen konnten. Zum Beispiel können Sie Flows erstellen, die automatisch Leads und Fälle in Salesforce generieren basierend auf Kundeninteraktionen über mehrere Kanäle hinweg. Diese Codeabschnitte können innerhalb von Flows sein, oder sie 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 werde ich Ihnen zeigen, 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 geschickt 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 Lieferungen automatisch verifizieren. Ähnlich wie ich es Ihnen zeigen werde, könnten Sie Standortdaten, Fotos von Paketen und sogar Unterschriften der Empfänger 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 starten, folgen Sie Googles Cloud Functions quickstart tutorial. Als ‚Trigger‘ wählen Sie HTTP-Auslöser, Ausführungsumgebung: Node.js 10, und fügen Sie im Quellcode-Feld den Codeausschnitt 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 von Google Cloud Platform zu testen, folgen Sie den Schritten aus dem Tutorial. 

Um sie 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.

Gute 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 Bilderkennung hinzu. Zu diesem Zweck verwenden wir die Google Vision API. Um loszulegen, folgen Sie den Schritten 1-4 im Vision API Schnellstart-Leitfaden. Im Tutorial aktivieren Sie die Vision API und erstellen ein Dienstkonto, um es zu nutzen.

Kehren Sie nun zur erstellten Cloud-Funktion zurück. Aktivieren Sie „Umgebungsvariablen, Netzwerkeinstellungen, Zeitüberschreitungen und mehr“ und wählen Sie in der Datei „Servicekonto“ das soeben erstellte VisionAPI-Dienstkonto aus. Nun können wir innerhalb unserer Funktion auf die Vision API zugreifen.

Advanced options interface of a cloud service configuration.


Jetzt ändern wir den Code. Fügen Sie auf einer „Package.json“-Registerkarte diesen Code ein. Er fügt Ihrer Funktion die Google Vision API-Bibliothek als Abhängigkeit hinzu.

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


Aktualisieren Sie auf der Registerkarte "Index.js" den vorhandenen Code mit dem folgenden Code-Snippet.

/**
 * 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 sie auf dem Bild gefunden hat. Dann filtern wir diese Labels nach Beschreibung: ob es „Hotdog“ enthält und ob es eine Zuversicht von mehr als 60 % 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 die Google Vision API funktioniert, und um Beispielsantworten anzusehen, lesen Sie die offizielle Vision API-Dokumentation.

Danach bereitstellen der neuen Version unserer Funktion. Um es von Ihrem Browser aus zu testen, suchen Sie ein beliebiges Bild eines Hotdogs und speichern Sie die URL. Gehen Sie nun zur URL Ihrer Funktion (indem Sie die richtige 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 des gefundenen Bildes. Wenn sich ein Hotdog auf dem Bild befindet, gibt die Seite {„isHotDog“: true} zurück.

Jetzt verbinden wir diese Funktion mit dem 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. 

Andere Neuigkeiten

Mehr lesen aus dieser Kategorie

A person is standing at a desk while typing on a laptop.

Die vollständige AI-native Plattform, die mit Ihrem Business skaliert.

Kontaktieren Sie den Vertrieb

Kostenlos starten

© 2025 Bird

Support kontaktieren

A person is standing at a desk while typing on a laptop.

Die vollständige AI-native Plattform, die mit Ihrem Business skaliert.

Kontaktieren Sie den Vertrieb

Kostenlos starten

© 2025 Bird

Support kontaktieren

A person is standing at a desk while typing on a laptop.

Die vollständige AI-native Plattform, die mit Ihrem Business skaliert.

Kontaktieren Sie den Vertrieb

Kostenlos starten

© 2025 Bird

Support kontaktieren