Bereik

Grow

Manage

Automate

Bereik

Grow

Manage

Automate

Hoe Flows te gebruiken met Google Vision API en Google Cloud Functions

Stroom Builder

1 min read

Hoe Flows te gebruiken met Google Vision API en Google Cloud Functions

Stroom Builder

1 min read

Hoe Flows te gebruiken met Google Vision API en Google Cloud Functions

Flows is een krachtige drag-and-drop automatiseringsengine voor het creëren van communicatieflows. We bedachten het aanvankelijk als een no-code oplossing, maar we ontdekten dat veel gebruikers echt krachtige functionaliteiten konden creëren door wat code te schrijven voor specifieke use-cases. Deze stukjes code kunnen binnen Flow Builder zijn, of ze kunnen 3rd party cloudfuncties zijn zoals AWS Lambda functies of Google Cloud Functions.

Dit is een eenvoudige demonstratie met GoogleCloud Functions en Flows om beeldherkenning uit te voeren op een afbeelding die via Telegram is verzonden.

Flows en Beyond

Als een ontwikkelaar van Flows denk ik vaak na over wie onze gebruikers zijn, waarom ze Flows gebruiken en wat ze nodig hebben om hun doelen te bereiken; en dan, welke functies we moeten implementeren om deze gebruikers het beste van dienst te zijn.




Flows is een krachtige drag-and-drop automatiseringsengine voor het creëren van communicatiestromen. We bedachten het aanvankelijk als een no-code oplossing, maar we ontdekten dat veel gebruikers echt krachtige functionaliteiten konden realiseren door wat code te schrijven voor specifieke use-cases.   Deze stukjes code kunnen binnen Flows zijn, of het kunnen externe cloudfuncties zijn zoals AWS Lambda-functies of Google Cloud Functions




Een interessant gebruiksgeval: Beeldherkenning 

Voor een kort en grappig voorbeeld zal ik je laten zien hoe je een app implementeert die hotdogs herkent. We zullen een flow instellen in Flows, die afbeeldingen van gebruikers ontvangt en beslist of ze een hotdog hebben gestuurd of niet.




Voor veel van onze klanten kan dit type beeldherkenning zeer krachtig zijn. Stel je voor dat je een bezorgservice runt en je wilde leveringen automatisch verifiëren. Vergelijkbaar met wat ik ga laten zien, zou je locatiegegevens, foto's van pakketten en zelfs handtekeningen van ontvangers kunnen gebruiken om een verificatiestroom in Flows te creëren. 

Een plan voor succes

Eerst zullen we een cloudfunctie instellen, die een verzoek ontvangt met een URL naar een afbeelding, vervolgens gebruikt het een beeldherkennings-API om de afbeelding te verwerken, en reageert of er een hotdog in de afbeelding is of niet.




Dan zullen we een flow bouwen, die een bericht ontvangt van een gebruiker via een berichtenkanaal (in dit geval Telegram), voert de bovenstaande cloudfunctie uit, en reageert aan de gebruiker of er een hotdog in een afbeelding zit die hij heeft verzonden.

Eerst zullen we een cloudfunctie instellen, die een verzoek ontvangt met een URL naar een afbeelding, vervolgens gebruikt het een beeldherkennings-API om de afbeelding te verwerken, en reageert of er een hotdog in de afbeelding is of niet.




Dan zullen we een flow bouwen, die een bericht ontvangt van een gebruiker via een berichtenkanaal (in dit geval Telegram), voert de bovenstaande cloudfunctie uit, en reageert aan de gebruiker of er een hotdog in een afbeelding zit die hij heeft verzonden.

Eerst zullen we een cloudfunctie instellen, die een verzoek ontvangt met een URL naar een afbeelding, vervolgens gebruikt het een beeldherkennings-API om de afbeelding te verwerken, en reageert of er een hotdog in de afbeelding is of niet.




Dan zullen we een flow bouwen, die een bericht ontvangt van een gebruiker via een berichtenkanaal (in dit geval Telegram), voert de bovenstaande cloudfunctie uit, en reageert aan de gebruiker of er een hotdog in een afbeelding zit die hij heeft verzonden.

Het instellen van de Google Cloud Function

Allereerst moeten we een cloudfunctie instellen. Om snel aan de slag te gaan, maak een cloudfunctie met behulp van deze tutorial: https://cloud.google.com/functions/docs/quickstart-console. Kies als ‘Trigger’ HTTP trigger, uitvoering omgeving: Node.js 10, en voeg in het broncodeveld het codefragment in. Het is eenvoudige code, die controleert of het verzoek JSON-code bevat en antwoordt ja of nee. 




/**
 * 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 }));
 };







Vervolgens moet je deze functie implementeren. Volg de stappen uit de tutorial om het binnen Google Cloud Platform te testen. 

Om vanuit je browser te testen, ga je naar de volgende URL en vul je het specifieke adres voor je functie in:




https://your-function-address.cloudfunctions.net/HotDogOrNot/?url=hello zou moeten retourneren {“isHotDog”: true} en het adres https://your-function-address.cloudfunctions.net/HotDogOrNot zou moeten retourneren {“isHotDog”: false}.




Mooie prestatie! Je hebt een Google Cloud-functie ingesteld. Nu moeten we onze cloudfunctie slimmer maken.

Het instellen van de Google Vision API

Om het slimmer te maken, laten we beeldherkenning toevoegen. Voor dit doel zullen we de Google Vision API gebruiken. Om te beginnen, volg stappen 1-4 van deze tutorial: https://cloud.google.com/vision/docs/quickstart-client-libraries. In de tutorial activeer je de Vision API en maak je een service-account aan om het te gebruiken.




Ga nu terug naar de cloudfunctie die je hebt gemaakt. Schakel "Omgevingsvariabelen, netwerken, time-outs en meer" in en kies in het bestand “Service account” het VisionAPI-service-account dat je zojuist hebt gemaakt. Nu hebben we toegang tot de Vision API binnen onze functie.







Laten we nu de code wijzigen. Open een “Package.json” tabblad en voer deze code in. Het zal de Google Vision API-bibliotheek toevoegen als afhankelijkheid van je functie.

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




Werk op het tabblad "Index.js" de bestaande code bij met het volgende codefragment.

/**
 * 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
 }










Wat is het verschil vergeleken met de vorige versie? We hebben een verzoek toegevoegd aan VisionAPI, dat de ‘labels’ retourneert die het op de afbeelding heeft gevonden.  Vervolgens filteren we deze labels op beschrijving: als het “hotdog” bevat en als het meer dan 60% vertrouwen heeft in dat label. Als er na het filteren ten minste 1 label overblijft, betekent dit dat we een hotdog op de afbeelding hebben gevonden.




Om te begrijpen hoe Google VisionAPI werkt en hoe de respons eruitziet, bekijk hun documentatie, https://cloud.google.com/vision/docs




Daarna implementeer je de nieuwe versie van onze functie. Om het vanuit je browser te testen, zoek een willekeurige afbeelding van een hotdog en bewaar de URL. Ga nu naar de URL van je functie (plaats het juiste adres voor je functie) https://your-function-address.cloudfunctions.net/HotDogOrNot?url=url_to_image en vervang de  “url_to_image” door een URL naar de gevonden afbeelding. Als er een hotdog op de afbeelding staat, geeft de pagina {“isHotDog”: true} terug.




Laten we deze functie nu verbinden met Flow Builder.

Een flow maken in Flows

Log in in het Bird Dashboard of meld je aan voor een account als je er nog geen hebt.




Als je nieuw bent bij Flows en je nog geen kanalen hebt ingesteld, moet je naar de Kanaalconfiguratiepagina gaan en ervoor kiezen om het Telegram-kanaal in te stellen. Ik koos Telegram voor deze demo omdat het gemakkelijk en snel op te zetten is.







Nu heb je een kanaal dat we in Flows kunnen gebruiken. Ga naar de Flows-pagina, maak een nieuwe aangepaste flow aan en kies de “Telegram” kanaaltrigger.







Je wordt doorgestuurd naar een flowpagina, waar je je Telegram-kanaal als trigger moet kiezen, in ons geval is het “Hotdog”. Voeg alsjeblieft 2 stappen toe: “Fetch variables” en “Reply to channel message”.




In de stap “Fetch variables” zullen we onze cloudfunctie aanroepen en de respons ophalen in de variabele “isHotDog” die “true” of “false” zal bevatten als reactie van de GoogleClound functie. Vul in het URL-veld de URL in naar je functie https://your-function-address.cloudfunctions.net/HotDogOrNot en vul alle andere velden in zoals op de afbeelding "Fetch variable step content".




En in de stap “Reply to channel message” zullen we de klant antwoorden met een bericht dat de ja of nee reactie bevat. Voeg daarvoor in het veld "Reply with message" de volgende tekst in: "Hotdog op de afbeelding? {{isHotDog}}".







Als je problemen hebt met het bouwen van de flow, kun je de volgende snippet gebruiken:

{
  "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
 }







Om het te testen, stuur een afbeelding naar je Telegram-bot.

Tot nu toe ziet het er cool uit! We hebben een kleine chatbot gemaakt die de door klanten verzonden afbeeldingen controleert. Om het mooier te maken, laten we enkele extra stappen toevoegen zoals hieronder weergegeven: 







Als je problemen hebt met het bouwen van de flow, kun je de volgende snippet gebruiken:

{
  "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
 }

Resultaten




Hoewel dit een leuk voorbeeld is, denken we dat dit soort functionaliteit zeer nuttig kan zijn voor onze gebruikers. 

Als u meer functies zoals deze wilt opnemen in Flows, schrijf dan naar ons ondersteuningsteam om het ons te laten weten. 

Meld je aan voor onze nieuwsbrief.

Blijf op de hoogte met Bird via wekelijkse updates in je inbox.

Door te verzenden, ga je ermee akkoord dat Bird contact met je mag opnemen over onze producten en diensten.

U kunt zich op elk moment afmelden. Zie Bird's Privacyverklaring voor details over gegevensverwerking.

Meld je aan voor onze nieuwsbrief.

Blijf op de hoogte met Bird via wekelijkse updates in je inbox.

Door te verzenden, ga je ermee akkoord dat Bird contact met je mag opnemen over onze producten en diensten.

U kunt zich op elk moment afmelden. Zie Bird's Privacyverklaring voor details over gegevensverwerking.

Meld je aan voor onze nieuwsbrief.

Blijf op de hoogte met Bird via wekelijkse updates in je inbox.

Door te verzenden, ga je ermee akkoord dat Bird contact met je mag opnemen over onze producten en diensten.

U kunt zich op elk moment afmelden. Zie Bird's Privacyverklaring voor details over gegevensverwerking.

Pinterest-logo
Uber-logo
Square logo
Adobe-logo
Meta-logo
PayPal-logo

Bedrijf

Nieuwsbrief

Blijf op de hoogte met Bird via wekelijkse updates in je inbox.

Door te verzenden, ga je ermee akkoord dat Bird contact met je mag opnemen over onze producten en diensten.

U kunt zich op elk moment afmelden. Zie Bird's Privacyverklaring voor details over gegevensverwerking.

Uber-logo
Square logo
Adobe-logo
Meta-logo

Bedrijf

Nieuwsbrief

Blijf op de hoogte met Bird via wekelijkse updates in je inbox.

Door te verzenden, ga je ermee akkoord dat Bird contact met je mag opnemen over onze producten en diensten.

U kunt zich op elk moment afmelden. Zie Bird's Privacyverklaring voor details over gegevensverwerking.

Uber-logo
Adobe-logo
Meta-logo

Bedrijf

Nieuwsbrief

Blijf op de hoogte met Bird via wekelijkse updates in je inbox.

Door te verzenden, ga je ermee akkoord dat Bird contact met je mag opnemen over onze producten en diensten.

U kunt zich op elk moment afmelden. Zie Bird's Privacyverklaring voor details over gegevensverwerking.