دمج واجهة برمجة التطبيقات 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. يؤدي هذا إلى استدعاء واجهة برمجة تطبيقات DialogflowdetectIntent لربط كلام المستخدم بالقصد الصحيح.
3. عند اكتشاف غرض الاستكشاف، سيرسل تنفيذ Dialogflow طلبًا إلى Vision API وسيتلقّى ردًا ويرسله إلى المستخدم.

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

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

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

5. أدخِل "VisionAPI" باسم اسم الوكيل.

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

يعمل Dialogflow على إنشاء الهدفَين التلقائيَين التاليَين كجزء من الوكيل:

1. مرحبًا بك في رسالة الترحيب التلقائية.
2. يرصد هدف intent التلقائي جميع الأسئلة التي لا يفهمها برنامج التتبُّع.

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

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

1. انقر على هدف الترحيب التلقائي.
2. انتقل إلى الردود &gt؛ تلقائية &gt؛ رد من النص أو SSML وأدخل &مرحبًا! يمكنك تحميل صورة لاستكشاف المعالم.

إنشاء كيان

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

2. انقر على إنشاء كيان، وأدخِل اسمه &quot؛واسم الملف"&&; ثم انقر على حفظ.

إنشاء هدف جديد

1. انقر على الأهداف > إنشاء هدف.
2. إدخال "&صورة"والاطّلاع على"الصورة المُحمَّلة"باعتبارها اسم الهدف.
3. انقر على عبارات التدريب > إضافة عبارات التدريب وأدخل &الملف;

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

5. انقر على توصيل الطلب &gt، ثم تفعيل توصيل الطلبات وفعِّل تفعيل مكالمة الردّ التلقائي على الويب لهذا الهدف.

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 الوكيل في بيئة التطوير. للتعرُّف على مزيد من المعلومات، يُرجى الاطِّلاع على لمحة عن الخادم الوكيل في Cloud SQL.

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

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

تثبيت الخادم الوكيل Cloud SQL

نزّل خادم وكيل Cloud SQL وثبِّته بالأمر التالي. يُستخدَم خادم وكيل Cloud SQL للاتصال بمثيل 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 لمثيل الجيل الثاني من MySQL. أدخِل "مثيلات الاستطلاع" أو شيء مشابه بالاسم. قد يستغرق الأمر بضع دقائق حتى يكون المثيل جاهزًا. وبعد أن تصبح جاهزة، ستظهر في قائمة المثيلات.
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 Proxy باستخدام 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. على سبيل المثال، يمكنك إدخال "Polls" كاسم.
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]&#39؛ استبدِل [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's، انقر على . في علامة التبويب عام، انتقِل إلى Google Project> رقم تعريف المشروع وانقر على Google Cloud لفتح Cloud Console.
2. انقر على قائمة التنقل ☰ > IAM & Admin > حسابات الخدمة، ثم انقر على بجانب عمليات دمج Dialogflow وانقر على إنشاء مفتاح.

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

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

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

1. في Cloud Console، انقر على التنقّل في قائمة التنقّل ☰& gt.

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

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

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

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

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

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

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

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

ضبط حزمة 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>&#39؛ باسم حزمة 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 Web أو Google Home الذي أنشأته في السابق.

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

يمكنك تنزيل هذه الصورة، وتسميتها باسم demo.jpg، واستخدامها.

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

بشكل عام، من المفترض أن يظهر المبلغ كالتالي:

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

حذف وكيل Dialogflow

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

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

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

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

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