دمج Vision API مع Dialogflow

في هذا الدرس التطبيقي حول الترميز، ستدمج Vision API مع Dialogflow لتقديم ردود غنية وديناميكية مستندة إلى تعلُّم الآلة على مدخلات الصور التي يقدّمها المستخدم. ستنشئ تطبيقًا عبارة عن روبوت محادثة يأخذ صورة كمدخل، ويعالجها في Vision API، ويعرض معلمًا تم تحديده للمستخدم. على سبيل المثال، إذا حمّل المستخدم صورة لتاج محل، سيردّ عليه برنامج الدردشة الآلي بـ "تاج محل".

هذا مفيد لأنّه يمكنك تحليل العناصر في الصورة واتخاذ إجراء بشأن المعلومات التي تم الحصول عليها. يمكنك أيضًا إنشاء نظام لمعالجة عمليات ردّ الأموال لمساعدة المستخدمين في تحميل الإيصالات واستخراج تاريخ الشراء من الإيصال ومعالجة عملية ردّ الأموال إذا كان التاريخ مناسبًا.

اطّلِع على نموذج مربّع الحوار التالي:

المستخدم: مرحبًا

روبوت الدردشة: مرحبًا. يمكنك تحميل صورة لاستكشاف المعالم

المستخدم: حمِّل صورة يظهر فيها "تاج محل".

روبوت المحادثة: جارٍ معالجة الملف، إليك النتائج: تاج محل، حديقة تاج محل، تاج محل.

المتطلبات الأساسية

قبل المتابعة، عليك إكمال الدورات التدريبية التالية:

1. إنشاء أداة جدولة مواعيد باستخدام Dialogflow
2. دمج برنامج محادثة آلي من Dialogflow مع "المهام مع مساعد Google"
3. التعرّف على الكيانات في Dialogflow
4. إنشاء عميل Django للواجهة الأمامية لتطبيق Dialogflow

عليك أيضًا فهم المفاهيم الأساسية في Dialogflow، ويمكنك الاطّلاع عليها من خلال الفيديوهات التالية في مسار إنشاء روبوت محادثة باستخدام Dialogflow:

أهداف الدورة التعليمية

• كيفية إنشاء وكيل Dialogflow
• كيفية تعديل وكيل Dialogflow لتحميل الملفات
• كيفية إعداد اتصال Vision API مع تنفيذ Dialogflow
• كيفية إعداد تطبيق واجهة مستخدم أمامية لـ Django وتشغيله في Dialogflow
• كيفية نشر تطبيق الواجهة الأمامية Django على Google Cloud في App Engine
• كيفية اختبار تطبيق Dialogflow من واجهة أمامية مخصّصة

ما ستنشئه

• إنشاء وكيل في Dialogflow
• تنفيذ واجهة مستخدم أمامية في Django لتحميل ملف
• تنفيذ عملية إتمام Dialogflow لاستدعاء Vision API مقابل الصورة التي تم تحميلها

المتطلبات

• معرفة أساسية بلغة Python
• فهم أساسي لخدمة Dialogflow
• فهم أساسي لواجهة Vision API

ستنشئ تجربة حوارية جديدة باستخدام واجهة أمامية مخصّصة في Django، ثم ستوسّعها لتتكامل مع Vision API. ستنشئ الواجهة الأمامية باستخدام إطار عمل Django، وستشغّلها وتختبرها على جهازك، ثم ستنشرها على App Engine. ستبدو الواجهة الأمامية على النحو التالي:

سيكون مسار الطلب على النحو التالي كما هو موضّح في الصورة التالية:

1. سيرسل المستخدم طلبًا من خلال الواجهة الأمامية.
2. سيؤدي ذلك إلى بدء طلب إلى واجهة برمجة التطبيقات detectIntent في Dialogflow لربط عبارة المستخدم بالنية الصحيحة.
3. بعد رصد نية استكشاف المعالم، سترسل ميزة التنفيذ في Dialogflow طلبًا إلى Vision API، وستتلقّى ردًا، ثم سترسله إلى المستخدم.

في ما يلي الشكل الذي ستبدو عليه البنية العامة.

‫Vision API هو نموذج تعلُّم آلة مدرَّب مسبقًا يستخلص إحصاءات من الصور. يمكن أن يقدّم لك هذا المنتج رؤى متعددة، بما في ذلك تصنيف الصور، والتعرّف على الوجوه والمعالم، والتعرّف الضوئي على الحروف، ووضع علامات على المحتوى الفاضح. لمزيد من المعلومات، يُرجى الاطّلاع على الذكاء الاصطناعي المرئي.

1. انتقِل إلى وحدة تحكّم Dialogflow.
2. سجِّل الدخول. (إذا كنت تستخدم التطبيق للمرة الأولى، استخدِم عنوان بريدك الإلكتروني للاشتراك).
3. يُرجى قبول الأحكام والشروط، وسيتم نقلك إلى وحدة التحكّم.
4. انقر على ، وانتقِل إلى أسفل الصفحة، ثم انقر على إنشاء وكيل جديد.

5- أدخِل "VisionAPI" في حقل اسم الموظّف.

5. انقر على إنشاء.

ينشئ Dialogflow الغرضَين التلقائيَين التاليَين كجزء من البرنامج الوكيل:

1. تُرحّب نية الترحيب التلقائية بالمستخدمين.
2. تتلقّى نية الاحتياط التلقائية جميع الأسئلة التي لا يفهمها برنامج الدردشة الآلي.

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

تعديل نية الترحيب التلقائية لإعلام المستخدم بتحميل صورة

1. انقر على نية الترحيب التلقائية.
2. انتقِل إلى الردود > تلقائي > رد نصي أو رد SSML وأدخِل "مرحبًا. يمكنك تحميل صورة لاستكشاف المعالم البارزة".

إنشاء كيان

1. انقر على الكيانات.

2. انقر على إنشاء عنصر، وأطلِق عليه الاسم "اسم الملف"، ثم انقر على حفظ.

إنشاء نية جديدة

1. انقر على النوايا > إنشاء نية.
2. أدخِل "استكشاف الصورة التي تم تحميلها" في اسم الغرض.
3. انقر على عبارات التدريب > إضافة عبارات تدريب وأدخِل "الملف هو demo.jpg" و "الملف هو taj.jpeg" كعبارات مستخدم مع ‎@filename ككيان.

4. انقر على الردود > إضافة رد > الرد التلقائي > رد نصي أو رد بتنسيق SSML. أدخِل "تقييم الملف" وانقر على إضافة ردود.

5. انقر على التنفيذ > تفعيل التنفيذ وفعِّل تفعيل طلب webhook لهذا الغرض.

1. انقر على التنفيذ.
2. فعِّل أداة التعديل المضمّنة.

3. عدِّل index.js باستخدام الرمز التالي، وعدِّل YOUR-BUCKET-NAME باستخدام اسم حزمة Cloud Storage.

'use strict';

const functions = require('firebase-functions');
const {google} = require('googleapis');
const {WebhookClient} = require('dialogflow-fulfillment');
const vision = require('@google-cloud/vision');
  /**
   * TODO(developer): Uncomment the following lines before running the sample.
   */
const bucketName = 'YOUR-BUCKET-NAME';
const timeZone = 'America/Los_Angeles';
const timeZoneOffset = '-07:00';

exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
  const agent = new WebhookClient({ request, response });
  console.log("Parameters", agent.parameters);

  function applyML(agent){
    const filename = agent.parameters.filename;
    console.log("filename is: ", filename);

    // call vision API to detect text
    return callVisionApi(agent, bucketName, filename).then(result => {
                      console.log(`result is ${result}`);
                      agent.add(`file is being processed, here are the results:  ${result}`);
            //agent.add(`file is being processed ${result}`);
        }).catch((error)=> {
            agent.add(`error occurred at apply ml function`  + error);
        });
  }

  let intentMap = new Map();
  intentMap.set('Explore uploaded image', applyML);
  agent.handleRequest(intentMap);
});


async function callVisionApi(agent, bucketName, fileName){
    // [START vision_text_detection_gcs]
  // Imports the Google Cloud client libraries
  // Creates a client
  
  const client = new vision.ImageAnnotatorClient();
    try {
        // Performs text detection on the gcs file
        const [result] = await client.landmarkDetection(`gs://${bucketName}/${fileName}`);
        const detections = result.landmarkAnnotations;
        var detected = [];
        detections.forEach(text => {
            console.log(text.description);
            detected.push(text.description);
        });
        return detected;
    }
    catch(error) {
        console.log('fetch failed', error);
        return [];
    }
}

4. الصِق ما يلي في package.json لاستبدال محتواه.

{
  "name": "dialogflowFirebaseFulfillment",
  "description": "Dialogflow fulfillment for the bike shop sample",
  "version": "0.0.1",
  "private": true,
  "license": "Apache Version 2.0",
  "author": "Google Inc.",
  "engines": {
    "node": "6"
  },
  "scripts": {
    "lint": "semistandard --fix \"**/*.js\"",
    "start": "firebase deploy --only functions",
    "deploy": "firebase deploy --only functions"
  },
  "dependencies": {
    "firebase-functions": "2.0.2",
    "firebase-admin": "^5.13.1",
    "actions-on-google": "2.2.0", 
    "googleapis": "^27.0.0",
    "dialogflow-fulfillment": "^0.6.1",
    "@google-cloud/bigquery": "^1.3.0",
    "@google-cloud/storage": "^2.0.0",
    "@google-cloud/vision": "^0.25.0"
  }
}

5. انقر على حفظ.

1. أنشئ نسخة طبق الأصل من هذا المستودع على جهازك المحلي:

https://github.com/priyankavergadia/visionapi-dialogflow.git

2. انتقِل إلى الدليل الذي يحتوي على الرمز. يمكنك بدلاً من ذلك تنزيل العيّنة كملف zip واستخراجها.

cd visionapi-dialogflow

عند نشر تطبيقك، يستخدم وكيل Cloud SQL المضمّن في بيئة App Engine العادية للتواصل مع مثيل Cloud SQL. ومع ذلك، لاختبار تطبيقك محليًا، يجب تثبيت نسخة محلية من Cloud SQL Proxy واستخدامها في بيئة التطوير. لمزيد من المعلومات، يُرجى الاطّلاع على لمحة عن Cloud SQL Proxy.

لتنفيذ مهام المشرف الأساسية على مثيل Cloud SQL، يمكنك استخدام عميل Cloud SQL لـ MySQL.

ملاحظة: يجب إثبات ملكية حسابك باستخدام أداة سطر الأوامر gcloud لاستخدام الخادم الوكيل للاتصال من جهازك المحلي.

تثبيت Cloud SQL Proxy

نزِّل خادم Cloud SQL الوكيل وثبِّته باستخدام الأمر التالي. يُستخدَم Cloud SQL Proxy للاتصال بمثيل Cloud SQL عند التشغيل محليًا.

نزِّل الخادم الوكيل:

curl -o cloud_sql_proxy https://dl.google.com/cloudsql/cloud_sql_proxy.darwin.amd64

اجعل الخادم الوكيل قابلاً للتنفيذ.

chmod +x cloud_sql_proxy

إنشاء مثيل Cloud SQL

1. أنشئ مثيلاً من الجيل الثاني من Cloud SQL for MySQL. أدخِل "polls-instance" أو اسمًا مشابهًا. قد يستغرق تجهيز الجهاز الافتراضي بضع دقائق. بعد أن يصبح جاهزًا، من المفترض أن يظهر في قائمة الآلات الافتراضية.
2. الآن، استخدِم أداة سطر الأوامر gcloud لتنفيذ الأمر التالي حيث يمثّل [YOUR_INSTANCE_NAME] اسم مثيل Cloud SQL. دوِّن القيمة المعروضة لـ connectionName للخطوة التالية. ويظهر بالتنسيق [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME].

gcloud sql instances describe [YOUR_INSTANCE_NAME]

بدلاً من ذلك، يمكنك النقر على المثيل في وحدة التحكّم للحصول على اسم اتصال المثيل.

إعداد مثيل Cloud SQL

ابدأ خادم Cloud SQL الوكيل باستخدام connectionName من القسم السابق.

./cloud_sql_proxy -instances="[YOUR_INSTANCE_CONNECTION_NAME]"=tcp:3306

استبدِل [YOUR_INSTANCE_CONNECTION_NAME] بالقيمة التي سجّلتها في القسم السابق. يؤدي ذلك إلى إنشاء اتصال من جهاز الكمبيوتر إلى مثيل Cloud SQL لأغراض الاختبار المحلية. يجب إبقاء خادم Cloud SQL الوكيل قيد التشغيل طوال الوقت الذي تختبر فيه تطبيقك على جهازك.

بعد ذلك، أنشئ مستخدمًا وقاعدة بيانات جديدَين في Cloud SQL.

1. أنشئ قاعدة بيانات جديدة باستخدام Google Cloud Console لمثيل Cloud SQL باسم polls-instance. على سبيل المثال، يمكنك إدخال "استطلاعات" كاسم.
2. أنشئ مستخدمًا جديدًا باستخدام Cloud Console لمثيل Cloud SQL باسم polls-instance.

ضبط إعدادات قاعدة البيانات

1. افتح mysite/settings-changeme.py للتعديل.
2. أعِد تسمية الملف إلى setting.py.
3. في موضعَين، استبدِل [YOUR-USERNAME] و[YOUR-PASSWORD] باسم المستخدم وكلمة المرور لقاعدة البيانات اللذين أنشأتهما في القسم السابق. يساعد ذلك في إعداد عملية الربط بقاعدة البيانات من أجل نشر App Engine والاختبار المحلي.
4. في السطر ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]' استبدِل [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] باسم مثيلك الذي حصلت عليه في القسم السابق.
5. نفِّذ الأمر التالي وانسخ قيمة connectionName التي تم إخراجها للانتقال إلى الخطوة التالية.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

6. استبدِل [YOUR-CONNECTION-NAME] بالقيمة التي سجّلتها في الخطوة السابقة.
7. استبدِل [YOUR-DATABASE] بالاسم الذي اخترته في القسم السابق.

# [START db_setup]
if os.getenv('GAE_APPLICATION', None):
    # Running on production App Engine, so connect to Google Cloud SQL using
    # the unix socket at /cloudsql/<your-cloudsql-connection string>
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST': '/cloudsql/[PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]',
            'USER': '[YOUR-USERNAME]',
            'PASSWORD': '[YOUR-PASSWORD]',
            'NAME': '[YOUR-DATABASE]',
        }
    }
else:
    # Running locally so connect to either a local MySQL instance or connect to
    # Cloud SQL via the proxy. To start the proxy via command line:
    #     $ cloud_sql_proxy -instances=[INSTANCE_CONNECTION_NAME]=tcp:3306
    # See https://cloud.google.com/sql/docs/mysql-connect-proxy
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST': '127.0.0.1',
            'PORT': '3306',
            'NAME': '[YOUR-DATABASE]',
            'USER': '[YOUR-USERNAME]',
            'PASSWORD': '[YOUR-PASSWORD]'
        }
    }
# [END db_setup]

8. أغلِق التطبيق ووفِّر ‎settings.py.

1. في وحدة تحكّم Dialogflow، انقر على . في علامة التبويب عام، انتقِل إلى مشروع Google > رقم تعريف المشروع وانقر على Google Cloud لفتح Cloud Console.
2. انقر على قائمة التنقّل ☰ > إدارة الهوية وإمكانية الوصول والمشرف > حسابات الخدمة، ثم انقر على بجانب عمليات الدمج في Dialogflow وانقر على إنشاء مفتاح.

3. سيتم تنزيل ملف JSON على جهاز الكمبيوتر، وستحتاج إليه في أقسام الإعداد التالية.

1. في مجلد المحادثة، استبدِل key-sample.json بملف JSON لبيانات الاعتماد وسمِّه key.json.
2. في views.py في مجلد المحادثة، غيِّر GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" إلى رقم تعريف مشروعك.

إنشاء حزمة Cloud Storage للعناصر الثابتة في الواجهة الأمامية

1. في Cloud Console، انقر على "التنقّل" قائمة التنقّل ☰ > التخزين.

2. انقر على إنشاء حزمة.
3. أدخِل اسمًا فريدًا عالميًا.

4. اختَر مكان تخزين بياناتك. اختَر المنطقة وحدِّد الموقع الجغرافي الأنسب لاحتياجاتك.
5. اختَر Standard كفئة التخزين التلقائية.

6. اختَر ضبط الأذونات بشكل موحّد على مستوى الحزمة (سياسة الحزمة فقط)، ثم انقر على متابعة لإنشاء الحزمة.

7. بعد إنشاء الحزمة، انقر على قائمة التنقّل ☰ > التخزين > المتصفّح وابحث عن الحزمة التي أنشأتها.

8. انقر على بجانب الحزمة المعنيّة، ثمّ انقر على تعديل أذونات الحزمة.

9. انقر على إضافة أعضاء، ثم انقر على أعضاء جدد، وأدخِل allUsers، ثم انقر على اختيار دور > عارض كائنات التخزين. يمنح هذا الإذن allUsers إمكانية الاطّلاع على ملفات الواجهة الأمامية الثابتة. هذا ليس إعداد أمان مثاليًا للملفات، ولكنّه مناسب لغرض هذا الدرس البرمجي.

إنشاء حزمة Cloud Storage للصور التي حمّلها المستخدمون

اتّبِع التعليمات نفسها لإنشاء حزمة منفصلة لتحميل صور المستخدمين. اضبط الأذونات على "allUsers" مرة أخرى، ولكن اختَر إنشاء كائنات في Cloud Storage والاطّلاع على الكائنات في Cloud Storage كأدوار.

ضبط حزمة Cloud Storage في ملف settings.py

1. فتح "mysite/setting.py"
2. ابحث عن المتغيّر GCS_BUCKET واستبدِل ‘<YOUR-GCS-BUCKET-NAME>' بحزمة Cloud Storage الثابتة.
3. ابحث عن المتغيّر GS_MEDIA_BUCKET_NAME واستبدِل ‘<YOUR-GCS-BUCKET-NAME-MEDIA>' باسم حزمة Cloud Storage للصور.
4. ابحث عن المتغيّر GS_STATIC_BUCKET_NAME واستبدِل ‘<YOUR-GCS-BUCKET-NAME-STATIC>' باسم حزمة Cloud Storage للملفات الثابتة.
5. احفظ الملف.

GCS_BUCKET = '<YOUR-GCS-BUCKET-NAME>'
GS_MEDIA_BUCKET_NAME = '<YOUR-GCS-BUCKET-NAME-MEDIA>'
GS_STATIC_BUCKET_NAME = '<YOUR-GCS-BUCKET-NAME-STATIC>'

إعداد حزمة Cloud Storage في ملف home.html

• افتح مجلد المحادثة، ثم افتح templates وأعِد تسمية home-changeme.html إلى home.html.
• ابحث عن <YOUR-GCS-BUCKET-NAME-MEDIA> واستبدِله باسم الحزمة التي تريد حفظ الملف الذي حمّله المستخدم فيها. يمنعك ذلك من تخزين الملف الذي حمّله المستخدم في الواجهة الأمامية والاحتفاظ بالأصول الثابتة في حزمة Cloud Storage. تطلب Vision API من حزمة Cloud Storage استلام الملف وإجراء التوقّع.

لتشغيل تطبيق Django على الكمبيوتر المحلي، عليك إعداد بيئة تطوير Python، بما في ذلك Python وpip وvirtualenv. للحصول على التعليمات، يُرجى الرجوع إلى إعداد بيئة تطوير Python.

1. أنشئ بيئة Python معزولة وثبِّت التبعيات.

virtualenv env
source env/bin/activate
pip install -r requirements.txt

2. نفِّذ عمليات نقل البيانات في Django لإعداد النماذج.

python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate

3. ابدأ تشغيل خادم ويب محلي.

python3 manage.py runserver

4. في متصفّح الويب، انتقِل إلى http://localhost:8000/. من المفترض أن تظهر لك صفحة ويب بسيطة بالشكل التالي:

يتم عرض صفحات التطبيق النموذجي من خلال خادم الويب Django الذي يعمل على جهاز الكمبيوتر. عندما تكون مستعدًا للمتابعة، اضغط على Control+C (Command+C على جهاز Macintosh) لإيقاف خادم الويب المحلي.

استخدام وحدة تحكّم المشرف في Django

1. إنشاء مستخدم متميّز

python3 manage.py createsuperuser

2. ابدأ تشغيل خادم ويب محلي.

python3 manage.py runserver

3. انتقِل إلى http://localhost:8000/admin/ في متصفّح الويب. لتسجيل الدخول إلى موقع المشرف، أدخِل اسم المستخدم وكلمة المرور اللذين أنشأتهما عند تشغيل createsuperuser.

اجمع كل المحتوى الثابت في مجلد واحد عن طريق تنفيذ الأمر التالي، الذي ينقل جميع الملفات الثابتة للتطبيق إلى المجلد المحدّد بواسطة STATIC_ROOT في settings.py:

python3 manage.py collectstatic

حمِّل التطبيق من خلال تنفيذ الأمر التالي من دليل التطبيق الذي يوجد فيه ملف app.yaml:

gcloud app deploy

انتظِر إلى أن تتلقّى الرسالة التي تُعلمك باكتمال التحديث.

في متصفّح الويب، انتقِل إلى https://<your_project_id>.appspot.com

في هذه المرة، سيتم عرض طلبك من خلال خادم ويب يعمل في بيئة App Engine العادية.

ينشر الأمر app deploy التطبيق كما هو موضّح في app.yaml ويضبط الإصدار الذي تم نشره حديثًا كإصدار تلقائي، ما يؤدي إلى عرضه لجميع الزيارات الجديدة.

عندما تكون مستعدًا لعرض المحتوى في مرحلة الإنتاج، غيِّر المتغيّر DEBUG إلى False في mysite/settings.py.

يمكنك اختبار برنامج الدردشة الآلي في المحاكي، أو استخدام عملية الدمج مع الويب أو Google Home التي سبق أن أنشأتها.

1. المستخدم: "مرحبًا"
2. روبوت الدردشة: "مرحبًا. يمكنك تحميل صورة لاستكشاف المعالم البارزة".
3. يحمّل المستخدم صورة.

نزِّل هذه الصورة وأطلِق عليها الاسم demo.jpg واستخدِمها.

4. روبوت الدردشة: "جارٍ معالجة الملف، إليك النتائج: جسر غولدن غيت، منطقة غولدن غيت الوطنية الترفيهية، جسر غولدن غيت، جسر غولدن غيت، جسر غولدن غيت".

من المفترض أن يبدو بالشكل التالي:

إذا كنت تريد إكمال برامج تعليمية أخرى من Dialogflow، يمكنك تخطّي هذا القسم والعودة إليه لاحقًا.

حذف وكيل Dialogflow

1. انقر على بجانب الوكيل الحالي.

2. في علامة التبويب الإعدادات العامة، انتقِل للأسفل وانقر على حذف هذا الوكيل.
3. اكتب حذف في النافذة التي تظهر وانقر على حذف.

أنشأت برنامج محادثة آليًا في Dialogflow ودمجته مع Vision API. أصبحت الآن مطوّرًا لبرامج المحادثة المبرمَجة.

مزيد من المعلومات

لمزيد من المعلومات، اطّلِع على نماذج الرموز البرمجية في صفحة Dialogflow Github.