المنتج

حلول

الموارد

شركة

تسجيل الدخول

اتصل بالمبيعات

المنتج

حلول

الموارد

شركة

تسجيل الدخول

اتصل بالمبيعات

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

Bird

06‏/10‏/2020

منشئ التدفق

1 min read

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

Bird

06‏/10‏/2020

منشئ التدفق

1 min read

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

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

مقدمة

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

خطة للنجاح

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

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

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

النتائج

Business in a box.

اكتشف حلولنا.

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

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

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

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

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

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

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

خطة للنجاح

أولاً، سنقوم بإعداد وظيفة سحابية، تتلقى طلبًا مع رابط 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

منشئ التدفق

كيفية إنشاء العملاء المحتملين أو الحالات في Salesforce باستخدام Flow Builder

امتداد Firebase

ابدأ باستخدام إضافة Bird على Firebase

البريد الإلكتروني

أداة لوحة المعلومات مع واجهات برمجة تطبيقات Bird

منشئ التدفق

كيفية إنشاء العملاء المحتملين أو الحالات في Salesforce باستخدام Flow Builder

البريد الإلكتروني

أداة لوحة المعلومات مع واجهات برمجة تطبيقات Bird

منشئ التدفق

كيفية إنشاء العملاء المحتملين أو الحالات في Salesforce باستخدام Flow Builder

A person is standing at a desk while typing on a laptop.

منصة AI-native الكاملة التي تتماشى مع نمو عملك.

اتصل بالمبيعات

ابدأ مجانًا

حلول

التجزئة والتجارة الإلكترونية

التكنولوجيا المالية B2C

التكنولوجيا المالية B2B

البنوك

ساس

السوق

الموارد

سجل التغييرات

قاعدة المعرفة

مركز المطورين

مركز الدعم

العملاء

مدونة

التكاملات

شركة

حول

التسعير

الشركاء

الوظائف

قانوني

الشروط

إعدادات الخصوصية

قريبًا

الدعم

المبيعات

التمويل

الموارد البشرية

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

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

اجتماعي

x.com

إنستغرام

اتصل بالدعم

منصة AI-native الكاملة التي تتماشى مع نمو عملك.

اتصل بالمبيعات

ابدأ مجانًا

المنتج

حلول

الموارد

شركة

إعدادات الخصوصية

قريبًا

حول

التسعير

الشركاء

الوظائف

قانوني

الشروط

إعدادات الخصوصية

اجتماعي

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

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

اتصل بالدعم

منصة AI-native الكاملة التي تتماشى مع نمو عملك.

اتصل بالمبيعات

ابدأ مجانًا

المنتج

حلول

الموارد

شركة

إعدادات الخصوصية

اجتماعي

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

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

اتصل بالدعم