Zasięg

Grow

Manage

Automate

Zasięg

Grow

Manage

Automate

Jak używać Flows z Google Vision API i Google Cloud Functions

Kreator przepływów

1 min read

Jak używać Flows z Google Vision API i Google Cloud Functions

Kreator przepływów

1 min read

Jak używać Flows z Google Vision API i Google Cloud Functions

Flows to potężny silnik automatyzacji typu drag-and-drop do tworzenia przepływów komunikacyjnych. Początkowo pomyśleliśmy o nim jako o rozwiązaniu bez kodu, ale odkryliśmy, że wielu użytkowników może uzyskać naprawdę potężne zachowania, pisząc trochę kodu dla konkretnych przypadków użycia. Te fragmenty kodu mogą znajdować się wewnątrz Flow Builder albo być zewnętrznymi funkcjami w chmurze, takimi jak funkcje AWS Lambda lub Google Cloud Functions.

To jest prosta demonstracja używająca GoogleCloud Functions i Flows do rozpoznawania obrazów na zdjęciu wysłanym na Telegramie.

Flows i Beyond

Jako deweloper Flows często zastanawiam się, kim są nasi użytkownicy, dlaczego używają Flows i co muszą osiągnąć, aby zrealizować swoje cele; a następnie, które funkcje musimy wdrożyć, aby najlepiej służyć tym użytkownikom.




Flows to potężny silnik automatyzacji typu drag-and-drop do tworzenia przepływów komunikacyjnych. Początkowo stworzyliśmy go jako rozwiązanie no-code, ale odkryliśmy, że wielu użytkowników może uzyskać naprawdę potężne działanie, pisząc trochę kodu do określonych zastosowań. Te fragmenty kodu mogą znajdować się we Flows lub mogą to być funkcje w chmurze zewnętrznych dostawców, takie jak funkcje AWS Lambda czy Google Cloud Functions




Ciekawy przypadek użycia: Rozpoznawanie obrazu 

Na krótki i zabawny przykład pokażę, jak zaimplementować aplikację rozpoznającą hot dogi. Ustawimy przepływ we Flows, który będzie odbierać obrazy od użytkowników i decydować, czy wysłali hot doga, czy nie.




Dla wielu naszych klientów tego typu rozpoznawanie obrazu może być bardzo potężne. Wyobraź sobie, że prowadzisz usługę dostawczą i chciałbyś automatycznie zweryfikować udane dostawy. Podobnie jak to, co zamierzam pokazać, możesz użyć danych lokalizacyjnych, zdjęć paczek, a nawet podpisów odbiorców, aby stworzyć przepływ weryfikacji we Flows. 

Plan na sukces

Najpierw ustanowimy funkcję w chmurze, która otrzymuje żądanie z URL do obrazu, następnie używa API do rozpoznawania obrazów do przetwarzania obrazu, i odpowiada, czy na obrazie znajduje się hot dog, czy nie.




Następnie zbudujemy przepływ, który otrzymuje wiadomość od użytkownika za pośrednictwem kanału komunikacyjnego (w tym przypadku Telegram), wykonuje powyższą funkcję w chmurze i odpowiada użytkownikowi, czy na przesłanym przez niego obrazie znajduje się hot dog.

Najpierw ustanowimy funkcję w chmurze, która otrzymuje żądanie z URL do obrazu, następnie używa API do rozpoznawania obrazów do przetwarzania obrazu, i odpowiada, czy na obrazie znajduje się hot dog, czy nie.




Następnie zbudujemy przepływ, który otrzymuje wiadomość od użytkownika za pośrednictwem kanału komunikacyjnego (w tym przypadku Telegram), wykonuje powyższą funkcję w chmurze i odpowiada użytkownikowi, czy na przesłanym przez niego obrazie znajduje się hot dog.

Najpierw ustanowimy funkcję w chmurze, która otrzymuje żądanie z URL do obrazu, następnie używa API do rozpoznawania obrazów do przetwarzania obrazu, i odpowiada, czy na obrazie znajduje się hot dog, czy nie.




Następnie zbudujemy przepływ, który otrzymuje wiadomość od użytkownika za pośrednictwem kanału komunikacyjnego (w tym przypadku Telegram), wykonuje powyższą funkcję w chmurze i odpowiada użytkownikowi, czy na przesłanym przez niego obrazie znajduje się hot dog.

Konfigurowanie Google Cloud Function

Najpierw musimy skonfigurować funkcję w chmurze. Aby szybko rozpocząć, utwórz funkcję w chmurze, korzystając z tego poradnika: https://cloud.google.com/functions/docs/quickstart-console. Jako „Trigger” wybierz HTTP trigger, środowisko wykonawcze: Node.js 10, a w polu kodu źródłowego wstaw fragment kodu. To prosty kod, który sprawdza, czy żądanie zawiera kod JSON i odpowiada tak lub nie. 




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







Następnie musisz wdrożyć tę funkcję. Aby przetestować ją w ramach Google Cloud Platform, postępuj zgodnie z krokami z poradnika. 

Aby przetestować z poziomu przeglądarki, przejdź do następującego URL, wstawiając konkretny adres dla swojej funkcji:




https://your-function-address.cloudfunctions.net/HotDogOrNot/?url=hello powinno zwrócić {“isHotDog”: true} a adres https://your-function-address.cloudfunctions.net/HotDogOrNot powinno zwrócić {“isHotDog”: false}.




Dobra robota! Skonfigurowałeś funkcję Google w chmurze. Teraz musimy uczynić naszą funkcję w chmurze inteligentniejszą.

Konfigurowanie Google Vision API

Aby uczynić go bardziej inteligentnym, dodajmy rozpoznawanie obrazów. W tym celu wykorzystamy Google Vision API. Aby rozpocząć, wykonaj kroki 1-4 tego poradnika: https://cloud.google.com/vision/docs/quickstart-client-libraries. W poradniku aktywujesz Vision API i tworzysz konto usługi, aby go używać.




Teraz wróć do funkcji chmurowej, którą utworzyłeś. Przełącz opcję „Environment variables, networking, timeouts and more” (zmienne środowiskowe, sieć, limity czasu i inne) i w pliku „Service account” wybierz utworzone właśnie konto usługi VisionAPI. Teraz możemy uzyskać dostęp do Vision API w naszej funkcji.







Teraz zmieńmy kod. Na karcie „Package.json” wstaw ten kod. Doda to bibliotekę Google Vision API jako zależność do twojej funkcji.

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




Na karcie "Index.js" zaktualizuj istniejący kod poniższym fragmentem kodu.

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










Jaka jest różnica w porównaniu do poprzedniej wersji? Dodaliśmy żądanie do VisionAPI, które zwraca „etykiety”, które znalazło na obrazie. Następnie filtrujemy te etykiety według opisu: jeśli zawiera „hot dog” i jeśli ma ponad 60% pewności w tej etykiecie. Jeśli po filtracji pozostanie co najmniej 1 etykieta, oznacza to, że znaleźliśmy hot doga na obrazie.




Aby zrozumieć, jak działa Google VisionAPI i jak wygląda ich odpowiedź, zapoznaj się z dokumentacją, https://cloud.google.com/vision/docs




Po tym, wdroż nową wersję naszej funkcji. Aby ją przetestować z przeglądarki, znajdź dowolny obraz hot doga i zapisz jego URL. Teraz przejdź do URL twojej funkcji (wstawiając poprawny adres dla twojej funkcji) https://your-function-address.cloudfunctions.net/HotDogOrNot?url=url_to_image i zamień  „url_to_image” na URL do znalezionego obrazu. Jeśli na obrazie jest hot dog, strona zwróci {„isHotDog”: true}.




Teraz połączmy tę funkcję z Flow Builder.

Tworzenie flow w Flows

Zaloguj się do Bird Dashboard lub zarejestruj się, aby utworzyć konto, jeśli jeszcze go nie masz.




Jeśli jesteś nowy w Flows i nie masz żadnych skonfigurowanych kanałów, musisz przejść do strony konfiguracji kanału i wybrać skonfigurowanie kanału Telegram. Wybrałem Telegram do tego dema, ponieważ jest łatwy i szybki do skonfigurowania.







Teraz masz kanał, którego możemy użyć w Flows. Przejdź do strony Flows, utwórz nowy niestandardowy przepływ i wybierz wyzwalacz kanału „Telegram”.







Zostaniesz przekierowany na stronę przepływu, gdzie powinieneś wybrać swój kanał Telegram jako wyzwalacz, w naszym przypadku to „Hotdog”. Dodaj 2 kroki: „Fetch variables” i „Reply to channel message”.




W kroku „Fetch variables” wywołamy naszą funkcję w chmurze i pobierzemy odpowiedź do zmiennej „isHotDog”, która zawiera „true” lub „false” jako odpowiedź z funkcji GoogleClound. W polu URL wstaw URL do swojej funkcji https://your-function-address.cloudfunctions.net/HotDogOrNot i uzupełnij wszystkie pozostałe pola zgodnie z obrazkiem "Fetch variable step content".




W kroku „Reply to channel message” odpowiedzimy klientowi wiadomością zawierającą odpowiedź tak lub nie. W tym celu wstaw w polu "Reply with message" następujący tekst: "Hotdog na obrazku? {{isHotDog}}".







Jeśli masz jakiekolwiek problemy z tworzeniem przepływu, możesz użyć poniższego fragmentu:

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







Aby go przetestować, wyślij obraz do swojego bota Telegram.

Jak dotąd wygląda fajnie! Stworzyliśmy małego chatbota, który sprawdza obrazy wysyłane przez klientów. Aby uczynić go ładniejszym, dodajmy kilka kolejnych kroków, jak pokazano poniżej: 







Jeśli masz jakiekolwiek problemy z tworzeniem przepływu, możesz użyć poniższego fragmentu:

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

Wyniki




Chociaż jest to zabawny przykład, wierzymy, że tego typu funkcjonalność może być bardzo przydatna dla naszych użytkowników. 

Jeśli chcesz, aby w Flows było więcej takich funkcji, napisz do naszego zespołu wsparcia, aby nas o tym poinformować. 

Dołącz do naszego Newslettera.

Bądź na bieżąco z Bird dzięki cotygodniowym aktualizacjom do Twojej skrzynki odbiorczej.

Przesyłając, zgadzasz się, że Bird może kontaktować się z Tobą w sprawie naszych produktów i usług.

Możesz zrezygnować z subskrypcji w dowolnym momencie. Zobacz Privacy Statement firmy Bird, aby uzyskać szczegóły dotyczące przetwarzania danych.

Dołącz do naszego Newslettera.

Bądź na bieżąco z Bird dzięki cotygodniowym aktualizacjom do Twojej skrzynki odbiorczej.

Przesyłając, zgadzasz się, że Bird może kontaktować się z Tobą w sprawie naszych produktów i usług.

Możesz zrezygnować z subskrypcji w dowolnym momencie. Zobacz Privacy Statement firmy Bird, aby uzyskać szczegóły dotyczące przetwarzania danych.

Dołącz do naszego Newslettera.

Bądź na bieżąco z Bird dzięki cotygodniowym aktualizacjom do Twojej skrzynki odbiorczej.

Przesyłając, zgadzasz się, że Bird może kontaktować się z Tobą w sprawie naszych produktów i usług.

Możesz zrezygnować z subskrypcji w dowolnym momencie. Zobacz Privacy Statement firmy Bird, aby uzyskać szczegóły dotyczące przetwarzania danych.

Logo Pinterest
Logo Uber
Square logo
Logo Adobe
Logo Meta
Logo PayPal

Company

Ustawienia prywatności

Biuletyn

Bądź na bieżąco z Bird dzięki cotygodniowym aktualizacjom do Twojej skrzynki odbiorczej.

Przesyłając, zgadzasz się, że Bird może kontaktować się z Tobą w sprawie naszych produktów i usług.

Możesz zrezygnować z subskrypcji w dowolnym momencie. Zobacz Privacy Statement firmy Bird, aby uzyskać szczegóły dotyczące przetwarzania danych.

Logo Uber
Square logo
Logo Adobe
Logo Meta

Company

Ustawienia prywatności

Biuletyn

Bądź na bieżąco z Bird dzięki cotygodniowym aktualizacjom do Twojej skrzynki odbiorczej.

Przesyłając, zgadzasz się, że Bird może kontaktować się z Tobą w sprawie naszych produktów i usług.

Możesz zrezygnować z subskrypcji w dowolnym momencie. Zobacz Privacy Statement firmy Bird, aby uzyskać szczegóły dotyczące przetwarzania danych.

Logo Uber
Logo Adobe
Logo Meta

Company

Ustawienia prywatności

Biuletyn

Bądź na bieżąco z Bird dzięki cotygodniowym aktualizacjom do Twojej skrzynki odbiorczej.

Przesyłając, zgadzasz się, że Bird może kontaktować się z Tobą w sprawie naszych produktów i usług.

Możesz zrezygnować z subskrypcji w dowolnym momencie. Zobacz Privacy Statement firmy Bird, aby uzyskać szczegóły dotyczące przetwarzania danych.