كيف تستخدم Flows مع Google Vision API و Google Cloud Functions

منشئ التدفق

1 min read

كيف تستخدم Flows مع Google Vision API و Google Cloud Functions

منشئ التدفق

1 min read

كيف تستخدم Flows مع Google Vision API و Google Cloud Functions

تُعتبر Flows محرك أتمتة قوي يسمح بالسحب والإفلات لإنشاء تدفقات اتصالات. في البداية قمنا بتصميمه كحل بدون كود، لكننا وجدنا أن العديد من المستخدمين يمكنهم الحصول على سلوك قوي للغاية من خلال كتابة بعض الأكواد لحالات استخدام محددة. يمكن أن تكون هذه الأكواد داخل Flow Builder، أو يمكن أن تكون وظائف سحابية من جهات خارجية مثل وظائف AWS Lambda أو وظائف Google Cloud.

هذه مجرد مظاهرة بسيطة باستخدام GoogleCloud Functions وFlows للقيام بالتعرف على الصور للصورة المرسلة على Telegram.

التدفقات وما بعدها

بصفتي مطورًا لتدفقات Flows، أفكر كثيرًا في من هم مستخدمينا، ولماذا يستخدمون Flows، وما يحتاجون إليه لتحقيق أهدافهم؛ ثم، ما هي الميزات التي نحتاج إلى تنفيذها لخدمة هؤلاء المستخدمين بأفضل طريقة.

Flows هي محرك أتمتة قوي يعتمد على السحب والإفلات لإنشاء تدفقات التواصل. لقد تصورناها في البداية كحل بدون كود، لكننا وجدنا أن العديد من المستخدمين يمكنهم الحصول على سلوك قوي للغاية عن طريق كتابة بعض الشفرات لحالات الاستخدام الخاصة. يمكن أن تكون هذه القطع من الشفرات داخل Flows، أو يمكن أن تكون وظائف سحابية من أطراف ثالثة مثل وظائف AWS Lambda أو Google Cloud Functions.

حالة استخدام مثيرة للاهتمام: التعرف على الصور

كمثال قصير وممتع، سأوضح لك كيفية تنفيذ تطبيق يتعرف على الهوت دوج. سنقوم بإعداد تدفق في Flows، والذي سيستلم الصور من المستخدمين ويقرر ما إذا كانوا قد أرسلوا صورة لهوت دوج أم لا.

بالنسبة للعديد من عملائنا، يمكن أن يكون هذا النوع من التعرف على الصور قويًا جدًا. تخيل أنك تدير خدمة توصيل وتريد التحقق من نجاح عمليات التسليم تلقائيًا. مشابه لما سأعرضه، يمكنك استخدام بيانات الموقع، وصور الطرود، بل وحتى توقيعات المستلمين لإنشاء تدفق تحقق في Flows.

خطة للنجاح

أولاً، سنقوم بإعداد وظيفة سحابية، تتلقى طلبًا مع رابط URL لصورة، ثم تستخدم واجهة برمجة التطبيقات للتعرف على الصور لمعالجة الصورة، وترد ما إذا كان هناك نقانق في الصورة أم لا.

ثم سنقوم ببناء تدفق، يتلقى رسالة من مستخدم عبر قناة الرسائل (تيليجرام في هذه الحالة)، ينفذ الوظيفة السحابية المذكورة أعلاه، ويرد على المستخدم ما إذا كان هناك نقانق في الصورة التي أرسلها.

أولاً، سنقوم بإعداد وظيفة سحابية، تتلقى طلبًا مع رابط URL لصورة، ثم تستخدم واجهة برمجة التطبيقات للتعرف على الصور لمعالجة الصورة، وترد ما إذا كان هناك نقانق في الصورة أم لا.

ثم سنقوم ببناء تدفق، يتلقى رسالة من مستخدم عبر قناة الرسائل (تيليجرام في هذه الحالة)، ينفذ الوظيفة السحابية المذكورة أعلاه، ويرد على المستخدم ما إذا كان هناك نقانق في الصورة التي أرسلها.

أولاً، سنقوم بإعداد وظيفة سحابية، تتلقى طلبًا مع رابط URL لصورة، ثم تستخدم واجهة برمجة التطبيقات للتعرف على الصور لمعالجة الصورة، وترد ما إذا كان هناك نقانق في الصورة أم لا.

ثم سنقوم ببناء تدفق، يتلقى رسالة من مستخدم عبر قناة الرسائل (تيليجرام في هذه الحالة)، ينفذ الوظيفة السحابية المذكورة أعلاه، ويرد على المستخدم ما إذا كان هناك نقانق في الصورة التي أرسلها.

إعداد وظيفة Google Cloud

أولاً، سنحتاج إلى إعداد وظيفة سحابية. للبدء بسرعة، قم بإنشاء وظيفة سحابية باستخدام هذا البرنامج التعليمي: https://cloud.google.com/functions/docs/quickstart-console. كـ 'مشغل' اختر HTTP trigger، بيئة التنفيذ: Node.js 10، وفي حقل شفرة المصدر أدخل القصاص المبار. إنها شفرة بسيطة، تتحقق مما إذا كان الطلب يحتوي على شفرة JSON وتجيب بنعم أو لا. 

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


بعد ذلك، ستحتاج إلى نشر هذه الوظيفة. لاختبارها داخل منصة Google Cloud، اتبع الخطوات من الدليل التعليمي. 

لاختبارها من متصفحك، انتقل إلى عنوان URL التالي بإدخال العنوان المحدد لوظيفتك:

https://your-function-address.cloudfunctions.net/HotDogOrNot/?url=hello يجب أن يعود {“isHotDog”: true} والعنوان https://your-function-address.cloudfunctions.net/HotDogOrNot يجب أن يعود {“isHotDog”: false}.

عمل رائع! لقد أعددت وظيفة سحابية في google. الآن نحتاج إلى جعل وظيفتنا السحابية أكثر ذكاءً.

إعداد واجهة برمجة تطبيقات Google Vision

لجعلها أكثر ذكاءً دعونا نضيف التعرف على الصور. لهذا الغرض سنستخدم Google Vision API. للبدء، اتبع الخطوات 1-4 من هذا البرنامج التعليمي: https://cloud.google.com/vision/docs/quickstart-client-libraries. في البرنامج التعليمي ستقوم بتنشيط Vision API وإنشاء حساب خدمة لاستخدامه.

الآن عد إلى وظيفة السحابة التي أنشأتها. قم بتبديل "متغيرات البيئة، الشبكات، مهلات وأكثر" و في ملف "حساب الخدمة" اختر حساب الخدمة VisionAPI الذي أنشأته للتو. الآن يمكننا الوصول إلى Vision API داخل وظيفتنا.

Advanced options interface of a cloud service configuration.


الآن دعونا نغير الشفرة. في علامة تبويب "Package.json"، أدخل هذه الكود. ستضيف مكتبة Google Vision API كاعتماد لوظيفتك.

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


في علامة تبويب "Index.js" قم بتحديث الشفرة الحالية باستخدام مقتطف الشفرة التالي.

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


ما الفرق مقارنة بالنسخة السابقة؟ أضفنا طلبًا إلى VisionAPI، والذي يعيد ‘التسميات’ التي وجدها على الصورة.  ثم نُرشح هذه التسميات حسب الوصف: إذا كانت تحتوي على "hot dog" وإذا كان لديها ثقة أكبر من 60% في تلك التسمية. إذا كان هناك على الأقل تسمية واحدة متبقية بعد الترشيح، فهذا يعني أننا وجدنا شطيرة نقانق في الصورة.

لفهم كيف يعمل Google VisionAPI وكيف يبدو الاستجابة تحقق من وثائقهم، https://cloud.google.com/vision/docs

بعد ذلك، قم بنشر النسخة الجديدة من وظيفتنا. لاختبارها من متصفحك، ابحث عن أي صورة لشطيرة نقانق واحفظ عنوان URL الخاص بها. الآن انتقل إلى عنوان URL لوظيفتك (تضمين العنوان الصحيح لوظيفتك) https://your-function-address.cloudfunctions.net/HotDogOrNot?url=url_to_image واستبدل "url_to_image" بعنوان URL للصورة التي تم العثور عليها. إذا كان هناك شطيرة نقانق في الصورة، ستعيد الصفحة {“isHotDog”: true}.

الآن دعنا نربط هذه الوظيفة بربط Flow Builder.

إنشاء تدفق في Flows

قم بتسجيل الدخول إلى لوحة تحكم Bird أو اشترك للحصول على حساب إذا لم يكن لديك حساب.

إذا كنت جديدًا في Flows ولم تقم بإعداد أي قنوات، فستحتاج إلى الذهاب إلى صفحة إعداد القنوات، واختيار إعداد قناة Telegram. اخترت Telegram لهذا العرض التوضيحي لأنه من السهل والسريع الإعداد.

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


الآن لديك قناة يمكننا استخدامها في Flows. اذهب إلى صفحة Flows، قم بإنشاء تدفق مخصص جديد، واختر مشغل قناة "Telegram".

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


سيتم توجيهك إلى صفحة التدفق، حيث يجب عليك اختيار قناة Telegram كمشغل، في حالتنا هي "Hotdog". يرجى إضافة خطوتين: "جلب المتغيرات" و"الرد على رسالة القناة".

داخل خطوة "جلب المتغيرات"، سنقوم باستدعاء وظيفة السحابة الخاصة بنا واسترداد الرد في المتغير "isHotDog" والذي سيتضمن "true" أو "false" كاستجابة من وظيفة GoogleCloud. في حقل URL، يرجى إدخال عنوان URL لوظيفتك https://your-function-address.cloudfunctions.net/HotDogOrNot واملأ جميع الحقول الأخرى كما في صورة محتوى خطوة "جلب المتغيرات".

وفي خطوة "الرد على رسالة القناة"، سنرد على العميل برسالة تحتوي على الإجابة بنعم أو لا. لذلك، أدخل في حقل "الرد بالرسالة" النص التالي "هل النقانق في الصورة؟ {{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.

إذا كانت لديك أي مشكلة في بناء التدفق، يمكنك استخدام الكود التالي:

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


لاختباره، أرسل صورة إلى بوت Telegram الخاص بك.

حتى الآن، يبدو رائعًا! لقد أنشأنا روبوت دردشة صغيرًا، الذي يتحقق من صور العملاء المرسلة. لجعله أكثر جمالًا، دعونا نضيف بعض الخطوات كما هو موضح أدناه: 


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


إذا كانت لديك أي مشكلة في بناء التدفق، يمكنك استخدام الكود التالي:

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

النتائج

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.


بينما هذا مثال ممتع، نحن نعتقد أن هذه النوعية من الوظائف يمكن أن تكون مفيدة للغاية لمستخدمينا. 

إذا كنت ترغب في ميزات أكثر مثل هذه مضمنة في Flows، اكتب إلى فريق الدعم لدينا لإعلامنا. 

دعنا نوصلك بخبير من Bird.
رؤية القوة الكاملة لـ Bird في 30 دقيقة.

بتقديمك طلبًا، فإنك توافق على أن تقوم Bird بالاتصال بك بشأن منتجاتنا وخدماتنا.

يمكنك إلغاء الاشتراك في أي وقت. انظر بيان الخصوصية الخاص بـ Bird للتفاصيل حول معالجة البيانات.

دعنا نوصلك بخبير من Bird.
رؤية القوة الكاملة لـ Bird في 30 دقيقة.

بتقديمك طلبًا، فإنك توافق على أن تقوم Bird بالاتصال بك بشأن منتجاتنا وخدماتنا.

يمكنك إلغاء الاشتراك في أي وقت. انظر بيان الخصوصية الخاص بـ Bird للتفاصيل حول معالجة البيانات.

دعنا نوصلك بخبير من Bird.
رؤية القوة الكاملة لـ Bird في 30 دقيقة.

بتقديمك طلبًا، فإنك توافق على أن تقوم Bird بالاتصال بك بشأن منتجاتنا وخدماتنا.

يمكنك إلغاء الاشتراك في أي وقت. انظر بيان الخصوصية الخاص بـ Bird للتفاصيل حول معالجة البيانات.

R

وصول

G

نمو

م

إدارة

A

أتمتة

النشرة الإخبارية

ابقَ على اطلاع مع Bird من خلال التحديثات الأسبوعية إلى بريدك الوارد.