Comment utiliser Flows avec Google Vision API et Google Cloud Functions ?

Comment utiliser Flows avec Google Vision API et Google Cloud Functions ?

Comment utiliser Flows avec Google Vision API et Google Cloud Functions ?

Oct 6, 2020

Publié par

Publié par

Bird

Bird

-

Catégorie :

Catégorie :

Flow Builder

Flow Builder

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 Fonctions GoogleCloud and Flows to do image recognition on an image sent on Telegram.


Flows et au-delà

En tant que développeur de Flows , je me demande souvent qui sont nos utilisateurs, pourquoi ils utilisent Flows et ce dont ils ont besoin pour atteindre leurs objectifs.


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 

Pour un exemple court et amusant, je vais vous montrer comment mettre en œuvre une application qui reconnaît les hot-dogs. Nous allons mettre en place un flux dans Flows, qui recevra les images des utilisateurs et décidera s'ils ont envoyé un hot-dog ou non.


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. 


Un plan pour réussir

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.


Ensuite, nous allons construire un flux qui reçoit un message d'un utilisateur via un canal de messagerie (Telegram dans ce cas), exécute la fonction cloud ci-dessus et répond à l'utilisateur s'il y a un hotdog dans une photo qu'il a envoyée.


Configuration de la fonction Google Cloud

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 l'extrait de code. 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. 

Pour tester à partir de votre navigateur, allez à l'URL suivante en insérant l'adresse spécifique de votre fonction :


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


Beau travail ! Vous avez mis en place une fonction google cloud. Maintenant, nous devons rendre notre fonction cloud plus intelligente.


Configuration de l'API Google Vision

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.


Revenez maintenant à la fonction cloud que vous avez créée. Activez "Variables d'environnement, mise en réseau, délais et autres" et dans le fichier "Compte de service", choisissez le compte de service VisionAPI que vous venez de créer. Maintenant, nous pouvons accéder à l'API Vision dans notre fonction.



Now let’s change the code. On a “Package.json” tab, insert ce code. It will add Google Vision API library as a dependency to your function, and on "Index.js" tab update existing code with l'extrait de code suivant.



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


Maintenant, connectons cette fonction à Flow Builder.


Création d'un flux dans Flows

Log in into the Bird Dashboard or s'inscrire pour un compte if you don’t have one.


Si vous êtes nouveau sur Flows et que vous n'avez pas encore configuré channels , vous devrez aller sur la page de configuration des canaux et choisir de configurer le canal Telegram. J'ai choisi Telegram pour cette démo parce qu'il est facile et rapide à mettre en place.



Vous avez maintenant un canal que nous pouvons utiliser dans Flows. Allez sur la page Flows , créez un nouveau flux personnalisé et choisissez le déclencheur de canal "Telegram".



Vous serez redirigé vers une page de flux, où vous devez choisir votre canal Telegram comme déclencheur, dans notre cas, c'est "Hotdog". Veuillez ajouter 2 étapes : "Récupérer les variables" et "Répondre au message du canal".


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: simple-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: advanced-hotdog-flow.json.

Résultats


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, Pay & Sales. It's Bird

Le right message -> to the right person -> au right time.

By clicking "See Bird" you agree to Bird's Avis de confidentialité.

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

Le right message -> to the right person -> au right time.

By clicking "See Bird" you agree to Bird's Avis de confidentialité.