This is a simple demonstration using GoogleCloud-Funktionen and Flows to do image recognition on an image sent on Telegram.

Flows und darüber hinaus

Als Entwickler von Flows denke ich oft darüber nach, wer unsere Benutzer sind, warum sie Flows benutzen und was sie brauchen, um ihre Ziele zu erreichen; und dann, welche Funktionen wir implementieren müssen, um diese Benutzer optimal zu bedienen.

Flows is a powerful drag-and-drop automation engine for creating communication flows. We initially conceived it as a no-code solution, but we found many users could get really powerful behavior writing some code for specific use-cases.   These bits of code can be inside Flows, or they can be 3rd party cloud functions like AWS Lambda functions or Google Cloud Functions. 

An interesting use case: Image Recognition 

Als kurzes und lustiges Beispiel zeige ich Ihnen, wie man eine App implementiert, die Hotdogs erkennt. Wir werden einen Fluss in Flows einrichten, der Bilder von Benutzern empfängt und entscheidet, ob sie einen Hotdog geschickt haben oder nicht.

For many of our customers, this type of image recognition can be very powerful. Imagine you run a delivery service and you wanted to verify successful deliveries automatically. Similar to what I’m going to show, you could use location data, photos of parcels, and even recipient signatures to create a verification flow in Flows. 

Ein Plan für den Erfolg

First, we will set up a cloud function, which receives a request with a URL to an image, then it uses an image recognition API to process the image,  and responds whether there is a hotdog in the image or not.

Dann bauen wir einen Ablauf, der eine Nachricht von einem Nutzer über einen Messaging-Kanal (in diesem Fall Telegram) empfängt, die obige Cloud-Funktion ausführt und dem Nutzer antwortet, ob sich ein Hotdog in einem von ihm gesendeten Bild befindet.

Einrichten der Google Cloud-Funktion

First,  we will need to set up a cloud function. To get started quickly, create a cloud function using this tutorial: https://cloud.google.com/functions/docs/quickstart-console. As a ‘Trigger’ choose HTTP trigger, execution environment: Node.js 10, and in the source code field insert das Codeschnipsel. It’s simple code, which checks whether the request contains JSON code and answers yes or no. 

Next, you’ll need to deploy this function. To test it inside Google Cloud Platform, follow steps from the tutorial. 

‍

Um mit Ihrem Browser zu testen, rufen Sie die folgende URL auf und fügen die spezifische Adresse für Ihre Funktion ein:

https://ihre-funktion-adresse.cloudfunctions.net/HotDogOrNot/?url=hello should return {“isHotDog”: true} and the address https://ihre-funktion-adresse.cloudfunctions.net/HotDogOrNot should return {“isHotDog”: false}.

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

Einrichten der Google Vision API

To make it smarter let’s add image recognition. For this purpose we will use the Google Vision API. To get started, follow steps 1-4 of this tutorial: https://cloud.google.com/vision/docs/quickstart-client-libraries. In the tutorial you’ll activate the Vision API and create a service account to use it.

Kehren Sie nun zu der von Ihnen erstellten Cloud-Funktion zurück. Schalten Sie "Umgebungsvariablen, Netzwerke, Zeitüberschreitungen und mehr" um und wählen Sie in der Datei "Dienstkonto" das gerade erstellte VisionAPI-Dienstkonto. Jetzt können wir innerhalb unserer Funktion auf die Vision-API zugreifen.

Now let’s change the code. On a “Package.json” tab, insert dieser Code. It will add Google Vision API library as a dependency to your function, and on "Index.js" tab update existing code with der folgende Codeschnipsel.

What’s the difference compared zum previous version? We added a request to VisionAPI, which returns the 'Etiketten' it found on the image.  Then we filter these labels by description: if it contains “hot dog” and if it has greater than 60% confidence in that label. If there is at least 1 label remaining after filtering, that means we found a hotdog on the image.

To understand how Google VisionAPI works and how the response looks like check their documentation, https://cloud.google.com/vision/docs

After that, deploy the new version of our function. To test it from your browser, find any image of a hotdog and save it's URL. Now go to URL of your function (inserting the correct address for your function) https://your-function-address.cloudfunctions.net/HotDogOrNot?url=url_to_image and replace the  “url_to_image” with a URL zum found image. If there is a hotdog in the image, the page will return {“isHotDog”: true}.

Verbinden wir nun diese Funktion mit Flow Builder.

Erstellen eines Flusses in Flows

Log in into the Bird Dashboard or sich für ein Konto anmelden if you don’t have one.

Wenn Sie neu auf Flows sind und noch keine channels eingerichtet haben, müssen Sie auf die Seite für die Einrichtung von Kanälen gehen und dort den Telegram-Kanal einrichten. 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 auf die Seite Flows , erstellen Sie einen neuen benutzerdefinierten Fluss und wählen Sie den Kanalauslöser "Telegram".

Sie werden zu einer Flow-Seite weitergeleitet, auf der Sie Ihren Telegram-Kanal als Auslöser wählen sollten, in unserem Fall ist es "Hotdog". Bitte fügen Sie 2 Schritte hinzu: "Variablen abrufen" und "Auf Kanalnachricht antworten".

Inside the “Fetch variables” step we will call our cloud function and retrieve response into variable “isHotDog” which will contain “true” or “false” as a response from the GoogleClound function. In URL field please insert URL to your function https://your-function-address.cloudfunctions.net/HotDogOrNot and fill all other fields as on the "Fetch variable step content" picture.

And inside the “Reply to channel message” step we will respond to the customer with a message containing the yes or no response. For that insert in "Reply with message" field the following text "Hotdog on the image? {{isHotDog}}".

‍

If you have any trouble building the flow, you can export it from file: einfach-hotdog-flow.json.

To test it, send an image to your Telegram bot.

So far, it looks cool! We created a small chat bot, which checks images customers sent. To make it prettier, let’s add some more steps as shown below: 

If you have any trouble building the flow, you can export it from file: erweiterte-hotdog-flow.json.

Ergebnisse

While this is a fun example, we believe this type of functionality can be very useful for our users. 

If you want more features like this built-in in Flows, write to our support team to let us know.