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 ke input gambar yang diberikan pengguna. Anda akan membuat aplikasi chatbot yang mengambil gambar sebagai input, memprosesnya di Vision API, dan menampilkan tempat terkenal yang diidentifikasi kepada pengguna. Misalnya, jika pengguna mengupload gambar Taj Mahal, chatbot akan menampilkan Taj Mahal sebagai tanggapan.

Ini berguna karena Anda dapat melakukan analisis item pada gambar dan mengambil tindakan terhadap 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 tepat.

Lihat contoh dialog berikut:

Pengguna: Halo

Chatbot: Halo! Anda dapat mengupload foto untuk menjelajahi tempat terkenal

Pengguna: Upload gambar dengan Taj Mahal di dalamnya.

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

Prasyarat

Sebelum melanjutkan, Anda harus menyelesaikan codelab berikut:

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

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

Yang akan Anda pelajari

• Cara membuat agen Dialogflow
• Cara mengupdate agen Dialogflow untuk mengupload file
• Cara menyiapkan koneksi Vision API dengan fulfillment 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

• Membuat agen Dialogflow
• Menerapkan frontend Django untuk mengupload file
• Menerapkan fulfillment Dialogflow untuk memanggil Vision API terhadap image 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 mem-build frontend dengan framework Django, menjalankan dan mengujinya secara lokal, lalu men-deploy-nya ke App Engine. Frontend akan terlihat seperti ini:

Alur permintaan akan bekerja seperti ini seperti yang diilustrasikan pada gambar berikut:

1. Pengguna akan mengirim permintaan melalui frontend.
2. Tindakan tersebut akan memicu panggilan ke Dialogflow detectIntent API untuk memetakan ucapan pengguna ke intent yang tepat.
3. Setelah intent bangunan terkenal terdeteksi, fulfillment Dialogflow akan mengirimkan permintaan ke Vision API, menerima respons, dan mengirimkannya ke pengguna.

Arsitektur keseluruhan akan terlihat seperti ini.

Vision API adalah model ML terlatih yang mengambil insight dari gambar. Alat ini dapat memberi Anda beberapa insight, termasuk pemberian label pada gambar, deteksi wajah dan bangunan terkenal, pengenalan karakter optik, serta pemberian tag pada konten vulgar. Untuk mempelajari lebih lanjut, lihat Vision AI.

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

5. Masukkan "VisionAPI" sebagai Nama Agen.

5. Klik Create.

Dialogflow membuat dua intent default berikut sebagai bagian dari agen:

1. Intent selamat datang default menyambut pengguna Anda.
2. Intent penggantian default menangkap semua pertanyaan yang tidak dipahami oleh bot Anda.

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

Mengupdate intent selamat datang default untuk memberi tahu pengguna untuk mengupload gambar

1. Klik Default Welcome Intent.
2. Buka Respons > Default > Respons Teks atau SSML dan masukkan "Hai! Anda dapat mengupload gambar untuk menjelajahi bangunan terkenal."

Buat entity

1. Klik Entitas.

2. Klik Buat Entitas, beri nama "nama file," lalu klik Simpan.

Membuat intent baru

1. Klik Intent > Create Intent.
2. Masukkan "Jelajahi gambar yang diupload" sebagai Nama intent.
3. Klik Frasa pelatihan > Tambahkan Frasa Pelatihan lalu masukkan "file adalah demo.jpg" dan "file adalah taj.jpeg" sebagai ekspresi pengguna dengan @filename sebagai entitas.

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

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

1. Klik Fulfillment.
2. Aktifkan Inline Editor.

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 baris berikut ke package.json untuk mengganti 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 tersebut. Atau, Anda dapat mendownload sampel sebagai zip dan mengekstraknya.

cd visionapi-dialogflow

Saat di-deploy, aplikasi Anda menggunakan Proxy Cloud SQL yang dibuat ke 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 agar dapat terhubung dari mesin lokal Anda

Instal Proxy Cloud SQL

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

Download proxy:

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

Buat proxy dapat dijalankan.

chmod +x cloud_sql_proxy

Membuat instance Cloud SQL

1. Membuat instance Cloud SQL untuk MySQL Generasi Kedua. Masukkan "polling-instance" atau sesuatu yang mirip dengan namanya. Butuh waktu beberapa menit sampai 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 guna mengetahui langkah berikutnya. Ini 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.

Melakukan inisialisasi 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. Langkah ini membuat koneksi dari komputer lokal ke instance Cloud SQL Anda untuk tujuan pengujian lokal. Jalankan Proxy Cloud SQL selama Anda menguji aplikasi secara lokal.

Selanjutnya, buat database dan pengguna Cloud SQL baru.

1. Buat database baru menggunakan Google Cloud Console untuk instance Cloud SQL Anda yang bernama polls-instance. Misalnya, Anda dapat memasukkan "polling" sebagai nama.
2. Buat pengguna baru menggunakan Cloud Console 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 itu membantu menyiapkan koneksi ke database untuk deployment App Engine dan pengujian lokal.
4. Pada baris ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]' ganti [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] dengan nama instance Anda yang diperoleh 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 Cloud Console.
2. Klik Menu navigasi ☰> IAM & Admin > Akun layanan, lalu klik di samping Integrasi Dialogflow dan klik Buat kunci.

3. File JSON akan didownload ke komputer Anda, yang akan diperlukan 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 Cloud Console, klik Navigate Navigation menu ☰ > Storage.

2. Click Buat Bucket.
3. Berikan nama yang unik secara global.

4. Memilih tempat untuk menyimpan data. Pilih Wilayah dan pilih lokasi yang paling sesuai dengan kebutuhan Anda.
5. Pilih Standar sebagai kelas penyimpanan default.

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

7. Setelah bucket dibuat, klik Menu navigasi ☰ > Storage > Browser dan cari bucket yang Anda buat.

8. Klik di sebelah bucket yang terkait dan klik Edit izin bucket.

9. Klik Tambahkan Anggota, klik Anggota baru, masukkan "allUsers," lalu klik Pilih peran > Storage Object Viewer. Class ini memberikan akses melihat ke file frontend statis kepada allUsers. Itu bukan setelan keamanan yang ideal untuk file, namun 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.

Konfigurasikan bucket Cloud Storage di settings.py

1. Buka mysite/setting.py.
2. Temukan variabel GCS_BUCKET dan ganti ‘<YOUR-GCS-BUCKET-NAME>' dengan bucket statis Cloud Storage.
3. Temukan variabel GS_MEDIA_BUCKET_NAME dan ganti ‘<YOUR-GCS-BUCKET-NAME-MEDIA>' dengan nama bucket Cloud Storage 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 tersebut.

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

Konfigurasikan 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 untuk menyimpan file yang diupload pengguna. Tindakan ini mencegah Anda menyimpan file yang diupload pengguna di frontend dan mempertahankan 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 mengetahui petunjuknya, baca Menyiapkan Lingkungan Pengembangan Python.

1. Membuat lingkungan Python yang terisolasi dan menginstal 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, buka http://localhost:8000/. Anda akan melihat halaman web sederhana yang terlihat seperti ini:.

Contoh halaman aplikasi dikirimkan oleh server web Django yang berjalan di komputer Anda. Saat Anda siap 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 dibuat saat Anda 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 dilayani oleh server web yang berjalan dalam 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 aplikasi dapat menyalurkan semua traffic baru.

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

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

1. Pengguna: "hi"
2. Chatbot: "Hai! Anda dapat mengupload gambar untuk menjelajahi bangunan terkenal."
3. Pengguna mengupload gambar.

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

4. Chatbot: "File sedang diproses, berikut hasilnya: Jembatan Golden Gate,Area Rekreasi Nasional Golden Gate,Golden Gate Bridge,Golden Gate Bridge,Golden Gate Bridge."

Secara keseluruhan, seharusnya akan terlihat seperti ini:

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

Menghapus agen Dialogflow

1. Klik di sebelah agen Anda yang ada.

2. Di tab General, scroll ke bawah lalu klik Delete This Agent.
3. Ketik Delete di jendela yang muncul, lalu klik Delete.

Anda telah membuat chatbot di Dialogflow dan mengintegrasikannya dengan Vision API. Sekarang Anda adalah developer chatbot!

Pelajari lebih lanjut

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