Reach

Grow

Manage

Automate

Accedi

Prenota demo

Reach

Grow

Manage

Automate

Accedi

Prenota demo

Prenota demo

Come utilizzare Flows con Google Vision API e Google Cloud Functions

Costruttore di Flussi

1 min read

Come utilizzare Flows con Google Vision API e Google Cloud Functions

Costruttore di Flussi

1 min read

Come utilizzare Flows con Google Vision API e Google Cloud Functions

Flows è un potente motore di automazione drag-and-drop per la creazione di flussi di comunicazione. Inizialmente lo avevamo concepito come una soluzione no-code, ma abbiamo scoperto che molti utenti potevano ottenere comportamenti davvero potenti scrivendo un po' di codice per casi d'uso specifici. Questi pezzi di codice possono essere all'interno di Flow Builder, oppure possono essere funzioni cloud di terze parti come le funzioni AWS Lambda o Google Cloud Functions.

Introduzione

Introduzione

Flussi e Beyond

Flussi e Beyond

Un piano per il successo

Un piano per il successo

Configurazione della Google Cloud Function

Configurazione della Google Cloud Function

Configurazione di Google Vision API

Configurazione di Google Vision API

Creating a flow in Flows

Creating a flow in Flows

Risultati

Risultati

Business in a box.

Scopri le nostre soluzioni.

Questa è una semplice dimostrazione utilizzando GoogleCloud Functions e Flows per eseguire il riconoscimento delle immagini su un'immagine inviata su Telegram.

Flussi e Beyond

Come sviluppatore di Flows, spesso penso a chi sono i nostri utenti, perché usano Flows e cosa devono fare per raggiungere i loro obiettivi; e poi, quali funzionalità dobbiamo implementare per servire al meglio quegli utenti.

Flows è un potente motore di automazione drag-and-drop per creare flussi di comunicazione. Lo abbiamo inizialmente concepito come una soluzione senza codice, ma abbiamo scoperto che molti utenti potevano ottenere comportamenti veramente potenti scrivendo del codice per casi d'uso specifici. Questi pezzi di codice possono essere all'interno di Flows, oppure possono essere funzioni cloud di terze parti come funzioni di AWS Lambda o Google Cloud Functions.

Un caso d'uso interessante: Riconoscimento delle Immagini

Per un esempio breve e divertente, ti mostrerò come implementare un'app che riconosce hot dog. Imposteremo un flusso in Flows, che riceverà immagini dagli utenti e deciderà se hanno inviato un hot dog o no.

Per molti dei nostri clienti, questo tipo di riconoscimento delle immagini può essere molto potente. Immagina di gestire un servizio di consegna e di voler verificare automaticamente consegne avvenute con successo. Simile a quanto sto per mostrare, potresti usare dati di localizzazione, foto di pacchi e persino firme dei destinatari per creare un flusso di verifica in Flows.

Un piano per il successo

Prima, imposteremo una funzione cloud, che riceve una richiesta con un URL di un'immagine, quindi utilizza un'API di riconoscimento delle immagini per elaborare l'immagine, e risponde se c'è un hotdog nell'immagine o meno.

Quindi costruiremo un flusso, che riceve un messaggio da un utente tramite un canale di messaggistica (Telegram in questo caso), esegue la funzione cloud sopra, e risponde all'utente se c'è un hotdog in una foto che ha inviato.

Prima, imposteremo una funzione cloud, che riceve una richiesta con un URL di un'immagine, quindi utilizza un'API di riconoscimento delle immagini per elaborare l'immagine, e risponde se c'è un hotdog nell'immagine o meno.

Quindi costruiremo un flusso, che riceve un messaggio da un utente tramite un canale di messaggistica (Telegram in questo caso), esegue la funzione cloud sopra, e risponde all'utente se c'è un hotdog in una foto che ha inviato.

Prima, imposteremo una funzione cloud, che riceve una richiesta con un URL di un'immagine, quindi utilizza un'API di riconoscimento delle immagini per elaborare l'immagine, e risponde se c'è un hotdog nell'immagine o meno.

Quindi costruiremo un flusso, che riceve un messaggio da un utente tramite un canale di messaggistica (Telegram in questo caso), esegue la funzione cloud sopra, e risponde all'utente se c'è un hotdog in una foto che ha inviato.

Configurazione della Google Cloud Function

Prima di tutto, dobbiamo configurare una funzione cloud. Per iniziare rapidamente, crea una funzione cloud usando questo tutorial: https://cloud.google.com/functions/docs/quickstart-console. Come ‘Trigger’ scegli HTTP trigger, ambiente di esecuzione: Node.js 10, e nel campo del codice sorgente inserisci il frammento di codice. È un codice semplice, che verifica se la richiesta contiene codice JSON e risponde sì o no. 

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


Google Cloud Console interface with options for creating a new Cloud Function.


Successivamente, dovrai distribuire questa funzione. Per testarla all'interno di Google Cloud Platform, segui i passaggi del tutorial. 

Per testarla dal tuo browser, vai al seguente URL inserendo l'indirizzo specifico della tua funzione:

https://your-function-address.cloudfunctions.net/HotDogOrNot/?url=hello dovrebbe restituire {“isHotDog”: true} e l'indirizzo https://your-function-address.cloudfunctions.net/HotDogOrNot dovrebbe restituire {“isHotDog”: false}.

Bravo! Hai configurato una funzione cloud di Google. Ora dobbiamo rendere la nostra funzione cloud più intelligente.

Configurazione di Google Vision API

Per renderlo più intelligente, aggiungiamo il riconoscimento delle immagini. Per questo scopo utilizzeremo il Google Vision API. Per iniziare, segui i passaggi 1-4 di questo tutorial: https://cloud.google.com/vision/docs/quickstart-client-libraries. Nel tutorial attiverai il Vision API e creerai un account di servizio per utilizzarlo.

Ora torna alla funzione cloud che hai creato. Vai su “Environment variables, networking, timeouts and more” e nel file “Service account” scegli l’account di servizio VisionAPI che hai appena creato. Ora possiamo accedere al Vision API all'interno della nostra funzione.

Advanced options interface of a cloud service configuration.


Ora cambiamo il codice. Nella scheda “Package.json”, inserisci questo codice. Aggiungerà la libreria Google Vision API come dipendenza alla tua funzione.

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


nella scheda "Index.js" aggiorna il codice esistente con il seguente frammento di codice.

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



Development environment displaying the code for a package.json file.


Qual è la differenza rispetto alla versione precedente? Abbiamo aggiunto una richiesta a VisionAPI, che restituisce le ‘labels’ che ha trovato sull'immagine.  Poi filtriamo queste etichette per descrizione: se contiene "hot dog" e se ha una fiducia superiore al 60% in quell'etichetta. Se c'è almeno 1 etichetta rimasta dopo il filtro, significa che abbiamo trovato un hotdog nell'immagine.

Per capire come funziona Google VisionAPI e come appare la risposta, consulta la loro documentazione, https://cloud.google.com/vision/docs

Dopo di ciò, distribuisci la nuova versione della nostra funzione. Per testarla dal tuo browser, trova qualsiasi immagine di un hotdog e salva l'URL. Ora vai all'URL della tua funzione (inserendo l'indirizzo corretto per la tua funzione) https://your-function-address.cloudfunctions.net/HotDogOrNot?url=url_to_image e sostituisci “url_to_image” con un URL dell'immagine trovata. Se c'è un hotdog nell'immagine, la pagina restituirà {“isHotDog”: true}.

Ora colleghiamo questa funzione a Flow Builder.

Creating a flow in Flows

Accedi al Bird Dashboard o registrati per un account se non ne hai uno.

Se sei nuovo ai Flows e non hai impostato alcun canale, dovrai andare alla pagina di impostazione del Canale e scegliere di impostare il canale Telegram. Ho scelto Telegram per questa demo perché è facile e veloce da impostare.

Interface titled "Channel setup" with options to integrate communication platforms such as Telegram, Messenger, LINE, WeChat, SMS, WhatsApp, Email, and Instagram.


Ora hai un canale che possiamo utilizzare in Flows. Vai alla pagina Flows, crea un nuovo flow personalizzato e scegli il trigger del canale “Telegram”.

User interface for selecting a communication channel trigger, showing options such as Telegram, Facebook Messenger, Email, Incoming Order Activity, and Shopify Order.


Sarai reindirizzato a una pagina del flow, dove dovresti scegliere il tuo canale Telegram come trigger, nel nostro caso è “Hotdog”. Si prega di aggiungere 2 passaggi: “Fetch variables” e “Reply to channel message”.

All'interno del passaggio “Fetch variables” chiameremo la nostra funzione cloud e recupereremo la risposta nella variabile “isHotDog” che conterrà “true” o “false” come risposta dalla funzione GoogleClound. Nel campo URL inserisci l'URL della tua funzione https://your-function-address.cloudfunctions.net/HotDogOrNot e compila tutti gli altri campi come nell'immagine del "Fetch variable step content".

E all'interno del passaggio “Reply to channel message” risponderemo al cliente con un messaggio contenente la risposta sì o no. Per questo inserisci nel campo "Reply with message" il seguente testo "Hotdog nell'immagine? {{isHotDog}}".

User interface with a form featuring fields like URL, Method, and Headers, along with options for body content and a section for setting header type, all related to configuring a web request in a cloud function environment.


Interface showing a message type selection dropdown, and options for status reports.

‍

Se hai problemi a creare il flow, puoi utilizzare il seguente snippet: 

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


Flowchart illustrating an image recognition process.


Per testarlo, invia un'immagine al tuo bot Telegram.

Finora, sembra fantastico! Abbiamo creato un piccolo chat bot, che controlla le immagini inviate dai clienti. Per renderlo più bello, aggiungiamo qualche passaggio in più come mostrato sotto: 


A flowchart diagram illustrating an image recognition process using Telegram Bot and Vision API.


Se hai problemi a creare il flow, puoi utilizzare il seguente snippet:

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

Risultati

A chat interface shows a humorous exchange about detecting a hotdog in an image.A mobile chat interface shows an AI chatbot identifying a photo of a hot dog.


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

Se desideri più funzionalità come questa integrate in Flows, scrivi al nostro team di supporto per farcelo sapere. 

Altre notizie

Leggi di più da questa categoria

Uno strumento di dashboarding con API di uccelli

Email

Uno strumento di dashboarding con API di uccelli

Come creare lead o casi in Salesforce con Flow Builder

Costruttore di Flussi

Come creare lead o casi in Salesforce con Flow Builder

Inizia con l'estensione Bird su Firebase

Estensione Firebase

Inizia con l'estensione Bird su Firebase

Uno strumento di dashboarding con API di uccelli

Email

Uno strumento di dashboarding con API di uccelli

Come creare lead o casi in Salesforce con Flow Builder

Costruttore di Flussi

Come creare lead o casi in Salesforce con Flow Builder

Uno strumento di dashboarding con API di uccelli

Email

Uno strumento di dashboarding con API di uccelli

Come creare lead o casi in Salesforce con Flow Builder

Costruttore di Flussi

Come creare lead o casi in Salesforce con Flow Builder

Connettiamoci con un esperto di Bird.
Scopri tutta la potenza del Bird in 30 minuti.

Inviando, accetti che Bird possa contattarti riguardo ai nostri prodotti e servizi.

Puoi annullare l'iscrizione in qualsiasi momento. Consulta la Informativa sulla Privacy di Bird per i dettagli sul trattamento dei dati.

R

Raggiungi

E

Email

V

Voice API

N

Numbers API

S

SMS API

W

WhatsApp API

G

Grow

M

Marketing

S

Vendite

M

Manage

S

Supporto

P

Pagamenti

H

HR

E

Spese

A

Automate

A

AI

W

Workflows

Risorse

Changelog

Base di conoscenza

Developer hub

Centro di supporto

Clienti

Blog

Azienda

Informazioni

Prezzi

Partners

Careers

Legale

Terms

Impostazioni sulla privacy

Newsletter

Rimani aggiornato con Bird attraverso aggiornamenti settimanali nella tua inbox.

x.com

Instagram

LinkedIn

Contatta Support

Connettiamoci con un esperto di Bird.
Scopri tutta la potenza del Bird in 30 minuti.

Inviando, accetti che Bird possa contattarti riguardo ai nostri prodotti e servizi.

Puoi annullare l'iscrizione in qualsiasi momento. Consulta la Informativa sulla Privacy di Bird per i dettagli sul trattamento dei dati.

R

Raggiungi

E

Email

V

Voice API

N

Numbers API

S

SMS API

W

WhatsApp API

G

Grow

M

Marketing

S

Vendite

M

Manage

S

Supporto

P

Pagamenti

H

HR

E

Spese

A

Automate

A

AI

W

Workflows

Risorse

Changelog

Base di conoscenza

Developer hub

Centro di supporto

Clienti

Blog

Azienda

Informazioni

Prezzi

Partners

Careers

Legale

Terms

Impostazioni sulla privacy

Newsletter

Rimani aggiornato con Bird attraverso aggiornamenti settimanali nella tua inbox.

x.com

Instagram

LinkedIn

Contatta Support

Connettiamoci con un esperto di Bird.
Scopri tutta la potenza del Bird in 30 minuti.

Inviando, accetti che Bird possa contattarti riguardo ai nostri prodotti e servizi.

Puoi annullare l'iscrizione in qualsiasi momento. Consulta la Informativa sulla Privacy di Bird per i dettagli sul trattamento dei dati.

R

Raggiungi

G

Grow

M

Manage

A

Automate

Risorse

Changelog

Base di conoscenza

Developer hub

Centro di supporto

Clienti

Blog

Azienda

Informazioni

Prezzi

Partners

Careers

Legale

Terms

Impostazioni sulla privacy

Newsletter

Rimani aggiornato con Bird attraverso aggiornamenti settimanali nella tua inbox.

Contatta Support