Mengintegrasikan Vision API dengan Dialogflow

Dalam codelab ini, Anda akan mengintegrasikan Vision API dengan Dialogflow untuk memberikan respons berbasis machine learning yang kaya dan dinamis terhadap input gambar yang diberikan pengguna. Anda akan membuat aplikasi chatbot yang mengambil gambar sebagai input, memprosesnya di Vision API, dan menampilkan landmark yang teridentifikasi kepada pengguna. Misalnya, jika pengguna mengupload gambar Taj Mahal, chatbot akan menampilkan Taj Mahal sebagai respons.

Hal ini berguna karena Anda dapat melakukan analisis terhadap item dalam gambar dan mengambil tindakan berdasarkan informasi yang diperoleh. Anda juga dapat membuat sistem pemrosesan pengembalian dana untuk membantu pengguna mengupload tanda terima, mengekstrak tanggal pembelian dalam tanda terima, dan memproses pengembalian dana jika tanggalnya sesuai.

Lihat contoh dialog berikut:

Pengguna: Halo

Chatbot: Halo! Anda dapat mengupload gambar untuk menjelajahi tempat

Pengguna: Upload gambar yang menampilkan Taj Mahal.

Chatbot: File sedang diproses, berikut hasilnya: Taj Mahal, Taman Taj Mahal, Taj Mahal.

Prasyarat

Sebelum melanjutkan, Anda harus menyelesaikan codelab berikut:

1. Membangun penjadwal janji temu dengan Dialogflow
2. Mengintegrasikan chatbot Dialogflow dengan Actions on Google
3. Memahami entity di Dialogflow
4. Membangun klien Django frontend untuk aplikasi Dialogflow

Anda juga perlu memahami konsep dan konstruksi dasar Dialogflow, yang dapat Anda pelajari dari video berikut dalam jalur Membangun chatbot dengan Dialogflow:

Yang akan Anda pelajari

• Cara membuat agen Dialogflow
• Cara mengupdate agen Dialogflow untuk mengupload file
• Cara menyiapkan koneksi Vision API dengan pemenuhan Dialogflow
• Cara menyiapkan dan menjalankan aplikasi frontend Django untuk Dialogflow
• Cara men-deploy aplikasi frontend Django ke Google Cloud di App Engine
• Cara menguji aplikasi Dialogflow dari frontend kustom

Yang akan Anda build

• Buat agen Dialogflow
• Menerapkan frontend Django untuk mengupload file
• Mengimplementasikan pemenuhan Dialogflow untuk memanggil Vision API terhadap gambar yang diupload

Yang Anda butuhkan

• Pengetahuan dasar tentang Python
• Pemahaman dasar tentang Dialogflow
• Pemahaman dasar tentang Vision API

Anda akan membuat pengalaman percakapan baru dengan frontend Django kustom dan memperluasnya untuk diintegrasikan dengan Vision API. Anda akan membangun frontend dengan framework Django, menjalankan dan mengujinya secara lokal, lalu men-deploy-nya ke App Engine. Frontend akan terlihat seperti ini:

Alur permintaan akan berfungsi seperti ini seperti yang diilustrasikan dalam gambar berikut:

1. Pengguna akan mengirim permintaan melalui frontend.
2. Hal ini akan memicu panggilan ke Dialogflow detectIntent API untuk memetakan ucapan pengguna ke maksud yang tepat.
3. Setelah intent jelajahi tempat terkenal terdeteksi, pemenuhan Dialogflow akan mengirim permintaan ke Vision API, menerima respons, dan mengirimkannya kepada pengguna.

Berikut tampilan arsitektur keseluruhan.

Vision API adalah model ML terlatih yang memperoleh insight dari gambar. Anda bisa mendapatkan berbagai insight, termasuk pelabelan gambar, deteksi wajah dan tempat terkenal, pengenalan karakter optik, dan pemberian tag konten vulgar. Untuk mempelajari lebih lanjut, lihat Vision AI.

1. Buka konsol Dialogflow.
2. Login. (Jika Anda adalah pengguna baru, gunakan email Anda untuk mendaftar.)
3. Setujui persyaratan dan ketentuan, lalu Anda akan masuk ke konsol.
4. Klik , scroll ke bagian bawah, lalu klik Buat agen baru.

5. Masukkan "VisionAPI" sebagai Agent name.

5. Klik Buat.

Dialogflow membuat dua intent default berikut sebagai bagian dari agen:

1. Intent sambutan default menyapa pengguna Anda.
2. Maksud penggantian default menangkap semua pertanyaan yang tidak dipahami bot Anda.

Pada tahap ini, Anda memiliki bot fungsional yang menyapa pengguna, tetapi Anda perlu memperbaruinya untuk memberi tahu pengguna bahwa mereka dapat mengupload gambar untuk menjelajahi landmark.

Memperbarui intent sambutan default untuk memberi tahu pengguna agar mengupload gambar

1. Klik Default Welcome Intent.
2. Buka Responses > Default > Text or SSML Response dan masukkan "Hai! Anda dapat mengupload gambar untuk menjelajahi landmark."

Buat entity

1. Klik Entitas.

2. Klik Buat Entity, beri nama "filename", lalu klik Simpan.

Buat intent baru

1. Klik Intents > Create Intent.
2. Masukkan "Explore uploaded image" sebagai Intent name.
3. Klik Frasa pelatihan > Tambahkan Frasa Pelatihan, lalu masukkan "file adalah demo.jpg" dan "file adalah taj.jpeg" sebagai ekspresi pengguna dengan @filename sebagai entity.

4. Klik Respons > Tambahkan Respons > Default > Respons Teks atau SSML. Masukkan "Menilai file", lalu klik Tambahkan Respons.

5. Klik Fulfillment > Enable fulfillment dan aktifkan Enable webhook call for this intent.

1. Klik Fulfillment.
2. Aktifkan Editor Inline.

3. Perbarui index.js dengan kode berikut dan perbarui YOUR-BUCKET-NAME dengan nama bucket Cloud Storage Anda.

'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. Tempel kode berikut ke package.json untuk menggantikan kontennya.

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

1. Clone repositori ini ke komputer lokal Anda:

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

2. Ubah ke direktori yang berisi kode. Atau, Anda dapat mendownload contoh sebagai file ZIP dan mengekstraknya.

cd visionapi-dialogflow

Saat di-deploy, aplikasi Anda menggunakan Proxy Cloud SQL yang dibuat ke dalam lingkungan standar App Engine untuk berkomunikasi dengan instance Cloud SQL Anda. Namun, untuk menguji aplikasi secara lokal, Anda harus menginstal dan menggunakan salinan lokal Proxy Cloud SQL di lingkungan pengembangan Anda. Untuk mempelajari lebih lanjut, lihat Tentang Proxy Cloud SQL.

Untuk melakukan tugas admin dasar pada instance Cloud SQL, Anda dapat menggunakan klien Cloud SQL untuk MySQL.

Catatan: Anda harus mengautentikasi dengan alat command line gcloud untuk menggunakan proxy guna terhubung dari mesin lokal Anda

Menginstal Proxy Cloud SQL

Download dan instal Proxy Cloud SQL dengan perintah berikut. Proxy Cloud SQL digunakan untuk terhubung ke instance Cloud SQL saat berjalan secara lokal.

Download proxy:

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

Jadikan proxy dapat dieksekusi.

chmod +x cloud_sql_proxy

Membuat instance Cloud SQL

1. Buat instance Cloud SQL untuk MySQL Generasi Kedua. Masukkan "polls-instance" atau nama yang serupa. Mungkin perlu waktu beberapa menit hingga instance siap. Setelah siap, instance akan terlihat di daftar instance.
2. Sekarang, gunakan alat command-line gcloud untuk menjalankan perintah berikut dengan [YOUR_INSTANCE_NAME] mewakili nama instance Cloud SQL Anda. Catat nilai yang ditampilkan untuk connectionName untuk langkah berikutnya. ID ditampilkan dalam format [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME].

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Atau, Anda dapat mengklik instance di konsol untuk mendapatkan Nama koneksi instance.

Menginisialisasi instance Cloud SQL

Mulai Proxy Cloud SQL menggunakan connectionName dari bagian sebelumnya.

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

Ganti [YOUR_INSTANCE_CONNECTION_NAME] dengan nilai yang Anda catat di bagian sebelumnya. Tindakan ini akan membuat koneksi dari komputer lokal Anda ke instance Cloud SQL untuk tujuan pengujian lokal. Biarkan Proxy Cloud SQL tetap berjalan selama Anda menguji aplikasi secara lokal.

Selanjutnya, buat pengguna dan database Cloud SQL baru.

1. Buat database baru menggunakan Konsol Google Cloud untuk instance Cloud SQL Anda yang bernama polls-instance. Misalnya, Anda dapat memasukkan "polling" sebagai nama.
2. Buat pengguna baru menggunakan Konsol Cloud untuk instance Cloud SQL Anda yang bernama polls-instance.

Mengonfigurasi setelan database

1. Buka mysite/settings-changeme.py untuk mengedit.
2. Ganti nama file menjadi setting.py.
3. Di dua tempat, ganti [YOUR-USERNAME] dan [YOUR-PASSWORD] dengan nama pengguna dan sandi database yang Anda buat di bagian sebelumnya. Hal ini membantu menyiapkan koneksi ke database untuk deployment App Engine dan pengujian lokal.
4. Di baris ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]', ganti [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] dengan nama instance yang Anda peroleh di bagian sebelumnya.
5. Jalankan perintah berikut dan salin nilai connectionName yang dihasilkan untuk langkah berikutnya.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

6. Ganti [YOUR-CONNECTION-NAME] dengan nilai yang Anda catat di langkah sebelumnya
7. Ganti [YOUR-DATABASE] dengan nama yang Anda pilih di bagian sebelumnya.

# [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. Tutup dan simpan settings.py.

1. Di konsol Dialogflow, klik . Di tab General, buka Google Project > Project ID, lalu klik Google Cloud untuk membuka Konsol Cloud.
2. Klik Navigation menu ☰ > IAM & Admin > Service accounts, lalu klik di samping Dialogflow integrations dan klik Create key.

3. File JSON akan didownload ke komputer Anda, yang akan Anda perlukan di bagian penyiapan berikut.

1. Di folder chat, ganti key-sample.json dengan file JSON kredensial Anda dan beri nama key.json.
2. Di views.py dalam folder chat, ubah GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" ke project ID Anda.

Membuat bucket Cloud Storage untuk objek statis frontend

1. Di Konsol Cloud, klik Navigation menu ☰ > Storage.

2. Klik Create Bucket.
3. Berikan nama yang unik secara global.

4. Tentukan lokasi di mana Anda akan menyimpan data. Pilih Wilayah dan pilih lokasi yang paling sesuai dengan kebutuhan Anda.
5. Pilih Standard sebagai kelas penyimpanan default Anda.

6. Pilih Tetapkan izin secara seragam di level bucket (Khusus Kebijakan Bucket), lalu klik Lanjutkan untuk membuat bucket.

7. Setelah bucket dibuat, klik Navigation menu ☰ > Storage > Browser, lalu temukan bucket yang Anda buat.

8. Klik di samping bucket yang sesuai, lalu klik Edit izin bucket.

9. Klik Tambahkan Anggota, klik Anggota baru, masukkan "allUsers", lalu klik Pilih peran > Storage Object Viewer. Hal ini memberikan akses lihat ke file frontend statis untuk allUsers. Setelan keamanan tersebut tidak ideal untuk file, tetapi berfungsi untuk tujuan codelab khusus ini.

Membuat bucket Cloud Storage untuk gambar yang diupload pengguna

Ikuti petunjuk yang sama untuk membuat bucket terpisah guna mengupload gambar pengguna. Tetapkan izin ke "allUsers" lagi, tetapi pilih Storage Object Creator dan Storage Object Viewer sebagai peran.

Konfigurasi bucket Cloud Storage di settings.py

1. Buka mysite/setting.py.
2. Cari variabel GCS_BUCKET dan ganti ‘<YOUR-GCS-BUCKET-NAME>' dengan bucket statis Cloud Storage Anda.
3. Cari variabel GS_MEDIA_BUCKET_NAME dan ganti ‘<YOUR-GCS-BUCKET-NAME-MEDIA>' dengan nama bucket Cloud Storage Anda untuk gambar.
4. Temukan variabel GS_STATIC_BUCKET_NAME dan ganti ‘<YOUR-GCS-BUCKET-NAME-STATIC>' dengan nama bucket Cloud Storage Anda untuk file statis.
5. Simpan file.

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

Mengonfigurasi bucket Cloud Storage di home.html

• Buka folder chat, lalu buka templates dan ganti nama home-changeme.html menjadi home.html.
• Cari <YOUR-GCS-BUCKET-NAME-MEDIA> dan ganti dengan nama bucket Anda untuk lokasi penyimpanan file yang diupload pengguna. Hal ini mencegah Anda menyimpan file yang diupload pengguna di frontend dan menyimpan aset statis di bucket Cloud Storage. Vision API memanggil bucket Cloud Storage untuk mengambil file dan membuat prediksi.

Untuk menjalankan aplikasi Django di komputer lokal, Anda harus menyiapkan lingkungan pengembangan Python, termasuk Python, pip, dan virtualenv. Untuk mendapatkan petunjuk, lihat Menyiapkan Lingkungan Pengembangan Python.

1. Buat lingkungan Python yang terisolasi dan instal dependensi.

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

2. Jalankan migrasi Django untuk menyiapkan model Anda.

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

3. Mulai server web lokal.

python3 manage.py runserver

4. Di browser web Anda, buka http://localhost:8000/. Anda akan melihat halaman web sederhana yang terlihat seperti ini:.

Halaman aplikasi contoh dikirim oleh server web Django yang berjalan di komputer Anda. Jika Anda sudah siap untuk melanjutkan, tekan Control+C (Command+C di Macintosh) untuk menghentikan server web lokal.

Menggunakan konsol admin Django

1. Buat superuser.

python3 manage.py createsuperuser

2. Mulai server web lokal.

python3 manage.py runserver

3. Buka http://localhost:8000/admin/ di browser web Anda. Untuk login ke situs admin, masukkan nama pengguna dan sandi yang Anda buat saat menjalankan createsuperuser.

Kumpulkan semua konten statis ke dalam satu folder dengan menjalankan perintah berikut, yang memindahkan semua file statis aplikasi ke dalam folder yang ditentukan oleh STATIC_ROOT di settings.py:

python3 manage.py collectstatic

Upload aplikasi dengan menjalankan perintah berikut dari direktori aplikasi tempat file app.yaml berada:

gcloud app deploy

Tunggu pesan yang memberi tahu Anda bahwa update telah selesai.

Di browser web Anda, buka https://<your_project_id>.appspot.com

Kali ini, permintaan Anda ditayangkan oleh server web yang berjalan di lingkungan standar App Engine.

Perintah app deploy men-deploy aplikasi seperti yang dijelaskan dalam app.yaml dan menetapkan versi yang baru di-deploy sebagai versi default, sehingga versi tersebut akan melayani semua traffic baru.

Jika Anda sudah siap menayangkan konten dalam produksi, ubah variabel DEBUG menjadi False di mysite/settings.py.

Anda dapat menguji chatbot di simulator, atau menggunakan integrasi web atau Google Home yang sebelumnya Anda buat.

1. Pengguna: "hai"
2. Chatbot: "Halo! Anda dapat mengupload gambar untuk menjelajahi landmark."
3. Pengguna mengupload gambar.

Download gambar ini, beri nama demo.jpg, dan gunakan.

4. Chatbot: "File sedang diproses, berikut hasilnya: Jembatan Golden Gate,Golden Gate National Recreation Area,Jembatan Golden Gate,Jembatan Golden Gate,Jembatan Golden Gate."

Secara keseluruhan, tampilannya akan seperti ini:

Jika Anda ingin menyelesaikan codelab Dialogflow lainnya, lewati bagian ini dan kembali ke bagian ini nanti.

Menghapus agen Dialogflow

1. Klik di samping agen yang ada.

2. Di tab Umum, scroll ke bawah, lalu klik Hapus Agen Ini.
3. Ketik Hapus di jendela yang muncul, lalu klik Hapus.

Anda telah membuat chatbot di Dialogflow dan mengintegrasikannya dengan Vision API. Anda sekarang menjadi developer chatbot.

Pelajari lebih lanjut

Untuk mempelajari lebih lanjut, lihat contoh kode di halaman Dialogflow Github.