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 denke ich oft darüber nach, wer unsere Benutzer 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 Benutzern am besten zu dienen.




Flows ist eine leistungsstarke Drag-and-Drop-Automatisierungs-Engine zur Erstellung von Kommunikationsabläufen. Ursprünglich haben wir es als No-Code-Lösung entwickelt, aber wir haben festgestellt, dass viele Benutzer wirklich leistungsstarkes Verhalten erzielen können, indem sie etwas Code für spezifische Anwendungsfälle schreiben.   Diese Codefragmente 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: Bild­erkenn­ung 

Für ein kurzes und lustiges Beispiel zeige ich Ihnen, wie Sie eine App implementieren, die Hotdogs erkennt. Wir werden ein Flow in Flows einrichten, das Bilder von Benutzern 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 Lieferdienst und möchten erfolgreiche Lieferungen automatisch überprüfen. Ähnlich zu dem, was ich zeigen werde, könnten Sie Standortdaten, Fotos von Paketen und sogar Empfängersignaturen verwenden, um einen Verifizierungsablauf in Flows zu erstellen. 

Ein Plan für Erfolg

Zuerst richten wir eine Cloud-Funktion ein, die eine Anfrage mit einer URL zu einem Bild erhält. Dann verwendet sie eine Bilderkennungs-API, um das Bild zu verarbeiten, und antwortet, ob ein Hotdog im Bild ist oder nicht.




Dann bauen wir einen Ablauf, der eine Nachricht von einem Benutzer über einen Messaging-Kanal (in diesem Fall Telegram) erhält, die oben erwähnte Cloud-Funktion ausführt und dem Benutzer antwortet, ob in einem von ihm gesendeten Bild ein Hotdog ist.

Zuerst richten wir eine Cloud-Funktion ein, die eine Anfrage mit einer URL zu einem Bild erhält. Dann verwendet sie eine Bilderkennungs-API, um das Bild zu verarbeiten, und antwortet, ob ein Hotdog im Bild ist oder nicht.




Dann bauen wir einen Ablauf, der eine Nachricht von einem Benutzer über einen Messaging-Kanal (in diesem Fall Telegram) erhält, die oben erwähnte Cloud-Funktion ausführt und dem Benutzer antwortet, ob in einem von ihm gesendeten Bild ein Hotdog ist.

Zuerst richten wir eine Cloud-Funktion ein, die eine Anfrage mit einer URL zu einem Bild erhält. Dann verwendet sie eine Bilderkennungs-API, um das Bild zu verarbeiten, und antwortet, ob ein Hotdog im Bild ist oder nicht.




Dann bauen wir einen Ablauf, der eine Nachricht von einem Benutzer über einen Messaging-Kanal (in diesem Fall Telegram) erhält, die oben erwähnte Cloud-Funktion ausführt und dem Benutzer antwortet, ob in einem von ihm gesendeten Bild ein Hotdog ist.

Einrichten der Google Cloud Function

Zuerst müssen wir eine Cloud-Funktion einrichten. Um schnell loszulegen, 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 den Code-Snippet 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 }));
 };







Als Nächstes müssen Sie diese Funktion bereitstellen. Um sie in der Google Cloud Platform zu testen, folgen Sie den Schritten aus dem Tutorial. 

Um sie von Ihrem Browser aus zu testen, gehen Sie zu der folgenden URL und geben Sie die spezifische Adresse Ihrer 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.




Großartige 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 die Bilderkennung hinzu. Zu diesem Zweck verwenden wir die Google Vision API. Um loszulegen, 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 verwenden.




Kehren Sie nun zur erstellten Cloud-Funktion zurück. Schalten Sie „Umgebungsvariablen, Netzwerkoptionen, 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.







Ändern wir nun den Code. Fügen Sie auf einer „Package.json“-Registerkarte diesen Code ein. Dadurch wird die Google Vision API-Bibliothek als Abhängigkeit 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 folgendem 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
 }










Was ist der Unterschied zur vorherigen Version? Wir haben eine Anfrage an die VisionAPI hinzugefügt, die die ‘Labels’ zurückgibt, die sie auf dem Bild gefunden hat.  Dann filtern wir diese Labels nach Beschreibung: wenn sie „Hot Dog“ enthält und wenn sie eine höhere Sicherheit als 60 % für 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, sehen Sie sich deren Dokumentation an, https://cloud.google.com/vision/docs




Danach setzen Sie die neue Version unserer Funktion ein. Um sie von Ihrem Browser aus zu testen, suchen Sie ein beliebiges Bild eines Hotdogs und speichern Sie dessen URL. Gehen Sie jetzt 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 die  „url_to_image“ durch eine URL zum gefundenen Bild. Wenn sich ein Hotdog im Bild befindet, gibt die Seite {“isHotDog”: true} zurück.




Lassen Sie uns nun diese Funktion mit dem Flow Builder verbinden.

Erstellen eines Flows in Flows

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




Wenn Sie neu bei Flows sind und noch keine Kanäle eingerichtet haben, müssen Sie zur Seite für die Kanaleinrichtung gehen und die Einrichtung des Telegram-Kanals auswählen. Ich habe Telegram für diese Demo gewählt, weil es einfach und schnell einzurichten ist.







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.







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




Im Schritt „Variablen abrufen“ rufen wir unsere Cloud-Funktion auf und speichern die Antwort in die Variable „isHotDog“, die „true“ oder „false“ als Antwort von der GoogleCloud-Funktion enthält. 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 Schrittes Variablen abrufen" ausfüllen.




Und im Schritt „Auf Kanalmeldung antworten“ antworten wir dem Kunden mit einer Nachricht, die die ja oder nein Antwort enthält. Dafür tragen Sie im Feld "Mit Nachricht antworten" den folgenden Text ein: "Hotdog auf dem Bild? {{isHotDog}}".







Wenn Sie Probleme beim Erstellen des Flows haben, können Sie den folgenden Code-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
 }







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

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







Wenn Sie Probleme beim Erstellen des Flows haben, können Sie den folgenden Code-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




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

Wenn Sie weitere Funktionen wie diese in Flows integriert haben möchten, schreiben Sie unserem Support-Team, um uns Bescheid zu geben. 

Abonnieren Sie unseren 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.

Abonnieren Sie unseren 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.

Abonnieren Sie unseren 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.

Pinterest-Logo
Uber-Logo
Square-Logo
Adobe-Logo
Meta-Logo
PayPal-Logo

Unternehmen

Datenschutzeinstellungen

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.

Uber-Logo
Square-Logo
Adobe-Logo
Meta-Logo

Unternehmen

Datenschutzeinstellungen

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.

Uber-Logo
Adobe-Logo
Meta-Logo

Unternehmen

Datenschutzeinstellungen

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.