Så här använder du Flows med Google Vision API och Google Cloud Functions

Så här använder du Flows med Google Vision API och Google Cloud Functions

Så här använder du Flows med Google Vision API och Google Cloud Functions

Oct 6, 2020

Publicerad av

Publicerad av

Bird

Bird

Kategori:

Kategori:

Flödesbyggare

Flödesbyggare

Ready to see Bird
in action?

Ready to see Bird
in action?

How to use Flows with Google Vision API and Google Cloud Functions

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


Flows och därefter

Som utvecklare av Flows funderar jag ofta på vilka våra användare är, varför de använder Flows och vad de behöver för att uppnå sina mål; och sedan vilka funktioner vi behöver implementera för att på bästa sätt tjäna dessa användare.


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 

I ett kort och roligt exempel ska jag visa dig hur du implementerar en app som känner igen varmkorvar. Vi kommer att skapa ett flöde i Flows, som tar emot bilder från användare och avgör om de har skickat en varmkorv eller inte.


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. 


En plan för framgång

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.


Sedan bygger vi ett flöde som tar emot ett meddelande från en användare via en meddelandekanal (Telegram i det här fallet), kör molnfunktionen ovan och svarar användaren om det finns en korv på en bild som han skickade.


Konfigurera Google Cloud Function

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 kodavsnittet. 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. 

För att testa från din webbläsare, gå till följande URL och sätt in den specifika adressen för din funktion:


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


Bra jobbat! Du har skapat en molnfunktion för Google. Nu måste vi göra vår molnfunktion smartare.


Konfigurera 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.


Gå nu tillbaka till den molnfunktion du skapade. Växla "Environment variables, networking, timeouts and more" och i filen "Service account" väljer du det VisionAPI-tjänstekonto som du just skapade. Nu kan vi komma åt Vision API inuti vår funktion.



Now let’s change the code. On a “Package.json” tab, insert denna kod. It will add Google Vision API library as a dependency to your function, and on "Index.js" tab update existing code with följande kodavsnitt.



What’s the difference compared till previous version? We added a request to VisionAPI, which returns the "Etiketter 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 till found image. If there is a hotdog in the image, the page will return {“isHotDog”: true}.


Låt oss nu ansluta denna funktion till Flow Builder.


Skapa ett flöde i Flows

Log in into the Bird Dashboard or Registrera dig för ett konto if you don’t have one.


Om du är ny på Flows och inte har någon channels konfigurerad måste du gå till sidan Kanalinställningar och välja att konfigurera Telegram-kanalen. Jag valde Telegram för den här demonstrationen eftersom det är enkelt och snabbt att ställa in.



Nu har du en kanal som vi kan använda i Flows. Gå till sidan Flows , skapa ett nytt anpassat flöde och välj kanalutlösaren "Telegram".



Du kommer att omdirigeras till en flödessida, där du ska välja din Telegram-kanal som trigger, i vårt fall är det "Hotdog". Lägg till 2 steg: "Hämta variabler" och "Svara på kanalmeddelande".


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: enkel-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: avancerad-hotdog-flow.json.

Resultat


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. 

Your new standard in Marketing, Betalningar & Sales. It's Bird

Den right message -> to the right person -> vid right time.

By clicking "See Bird" you agree to Bird's Meddelande om integritet.

Your new standard in Marketing, Betalningar & Sales. It's Bird

Den right message -> to the right person -> vid right time.

By clicking "See Bird" you agree to Bird's Meddelande om integritet.