Bu sayfa, Cloud Translation API ile çevrilmiştir.

Vision API'yi Dialogflow ile entegre etme

1. Başlamadan önce

Bu codelab'de, kullanıcı tarafından sağlanan görüntü girişlerine makine öğrenimi tabanlı zengin ve dinamik yanıtlar sağlamak için Vision API'yi Dialogflow ile entegre edeceksiniz. Bir resmi giriş olarak alan, Vision API'de işleyen ve tanımlanmış önemli bir noktayı kullanıcıya döndüren bir chatbot uygulaması oluşturacaksınız. Örneğin, kullanıcı Tac Mahal'in bir resmini yüklerse chatbot, yanıt olarak Tac Mahal'i döndürür.

Bu, resimdeki öğeleri analiz edebileceğiniz ve elde edilen bilgilere göre harekete geçebileceğiniz için yararlıdır. Kullanıcıların makbuzları yüklemesine, satın alma tarihini makbuzdan çıkarmasına ve tarih uygunsa geri ödemeyi işlemesine yardımcı olmak için bir geri ödeme işleme sistemi de oluşturabilirsiniz.

Aşağıdaki örnek iletişim kutusuna göz atın:

Kullanıcı: Merhaba

Chatbot: Merhaba. Önemli noktaları keşfetmek için resim yükleyebilirsiniz

Kullanıcı: Tac Mahal bulunan bir resim yükleyin.

Chatbot: Dosya işleniyor, sonuçlar şöyle: Tac Mahal, Tac Mahal Bahçesi, Tac Mahal.

Ön koşullar

Devam etmeden önce aşağıdaki codelab'leri tamamlamanız gerekir:

Ayrıca, Dialogflow'un temel kavramlarını ve yapılarını da anlamanız gerekir. Bu temel kavramları ve yapılarını Dialogflow ile chatbot derleme rotasındaki aşağıdaki videolardan öğrenebilirsiniz:

Neler öğreneceksiniz?

Dialogflow aracısı oluşturma
Dosya yüklemek için Dialogflow aracısını güncelleme
Dialogflow karşılama ile Vision API bağlantısını ayarlama
Dialogflow için Django ön uç uygulaması ayarlama ve çalıştırma
Django ön uç uygulamasını App Engine'de Google Cloud'a dağıtma
Dialogflow uygulamasını özel bir ön uçtan test etme

Neler oluşturacaksınız?

Dialogflow aracısı oluşturma
Dosya yüklemek için Django ön ucu uygulama
Yüklenen görüntüye karşı Vision API'yi çağırmak için Dialogflow karşılama özelliğini uygulama

Gerekenler

Python ile ilgili temel bilgiler
Dialogflow ile ilgili temel bilgiler
Vision API ile ilgili temel bilgiler

2. Mimariye genel bakış

Özel bir Django ön ucuyla yeni bir sohbet deneyimi oluşturacak ve bu deneyimi Vision API ile entegre edecek şekilde genişleteceksiniz. Ön ucu Django çerçevesiyle derleyecek, yerel olarak çalıştırıp test edecek ve App Engine'e dağıtacaksınız. Ön uç şöyle görünür:

İstek akışı, aşağıdaki resimde gösterildiği gibi çalışacaktır:

Kullanıcı, ön uç aracılığıyla bir istek gönderir.
Bu işlem, kullanıcının söylediklerini doğru niyetle eşlemek için DialogflowdetectIntent API'ye bir çağrıyı tetikler.
Önemli nokta keşfetme amacı algılandığında Dialogflow karşılama, Vision API'ye istek gönderir, bir yanıt alır ve bunu kullanıcıya gönderir.

Genel mimari aşağıdaki gibi olacaktır.

3. Vision API nedir?

Vision API, görüntülerden analizler elde eden, önceden eğitilmiş bir makine öğrenimi modelidir. Görüntü etiketleme, yüz ve önemli nokta algılama, optik karakter tanıma ve uygunsuz içerikleri etiketleme gibi çeşitli analizler elde etmenizi sağlayabilir. Daha fazla bilgi edinmek için Vision AI'ı inceleyin.

4. Dialogflow aracısı oluşturma

Dialogflow konsoluna gidin.
Oturum açın. (Yeni kullanıcıysanız kaydolmak için e-posta adresinizi kullanın.)
Hükümler ve koşulları kabul ettiğinizde konsola yönlendirilirsiniz.
seçeneğini tıklayın, en alta ilerleyin ve Yeni temsilci oluştur'u tıklayın.
"VisionAPI" yazın bunu Temsilci adı olarak değiştirin.
Oluştur'u tıklayın.

Dialogflow, aracının bir parçası olarak aşağıdaki iki varsayılan niyeti oluşturur:

Varsayılan karşılama amacı kullanıcılarınızı karşılar.
Varsayılan yedek intent, bot'unuzun anlamadığı tüm soruları yakalar.

Bu noktada, kullanıcıları karşılayan işlevsel bir bot'unuz var, ancak kullanıcılara önemli noktaları keşfetmek için resim yükleyebileceklerini bildirmek amacıyla bot'u güncellemeniz gerekiyor.

Kullanıcıyı resim yüklemesi için bilgilendirmek için varsayılan karşılama niyetini güncelleyin

Varsayılan Karşılama Niyeti'ni tıklayın.
Yanıtlar'a gidin > Varsayılan > Metin veya SSML Yanıtı girin ve "Merhaba! Önemli noktaları keşfetmek için bir resim yükleyebilirsiniz."

Varlık oluştur

Varlıklar'ı tıklayın.

Varlık Oluştur'u tıklayın ve öğeye "dosya adı" adını verin. ve Kaydet'i tıklayın.

Yeni amaç oluştur

Niyetler'i tıklayın > Niyet Oluştur.
"Yüklenen resmi keşfet" yazın Amaç adı olarak ayarlanır.
Eğitim ifadeleri'ni tıklayın > Eğitim İfadeleri ekleyin ve "dosya: demo.jpg" yazın ve "dosya: taj.jpeg" @filename şeklindeki kullanıcı ifadeleri şeklinde görünür.

Yanıtlar'ı tıklayın > Yanıt Ekle > Varsayılan > Metin veya SSML Yanıtı. "Değerlendirme dosyası" yazın ve Yanıt Ekle'yi tıklayın.
Karşılama'yı tıklayın > Karşılamayı etkinleştirin ve Bu niyet için webhook çağrısını etkinleştir'i etkinleştirin.

5. Vision API ile entegrasyon için sipariş karşılamayı ayarlama

Karşılama'yı tıklayın.
Satır içi düzenleyici'yi etkinleştirin.

index.js öğesini aşağıdaki kodla güncelleyin ve YOUR-BUCKET-NAME öğesini Cloud Storage paketinizin adıyla güncelleyin.

'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 [];
    }
}

Aşağıdakini, içeriğini değiştirmek için package.json içine yapıştırın.

{
  "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"
  }
}

Kaydet'i tıklayın.

6. Ön uç uygulamasını indirme ve çalıştırma

Bu kod deposunu yerel makinenize klonlayın:

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

Kodu içeren dizine geçin. Alternatif olarak, örneği ZIP dosyası olarak indirip ayıklayabilirsiniz.

cd visionapi-dialogflow

7. Yerel ortamınızı ayarlama

Uygulamanız dağıtıldığında, Cloud SQL örneğinizle iletişim kurmak için App Engine standart ortamında yerleşik olarak bulunan Cloud SQL Proxy'yi kullanır. Ancak uygulamanızı yerel olarak test etmek için geliştirme ortamınızda Cloud SQL Proxy'nin yerel bir kopyasını yüklemeniz ve kullanmanız gerekir. Daha fazla bilgi için Cloud SQL Proxy hakkında başlıklı makaleyi inceleyin.

Cloud SQL örneğinizde temel yönetici görevlerini gerçekleştirmek amacıyla MySQL için Cloud SQL istemcisini kullanabilirsiniz.

Cloud SQL Proxy'yi yükleyin

Aşağıdaki komutla Cloud SQL Proxy'yi indirip yükleyin. Cloud SQL Proxy, yerel olarak çalışırken Cloud SQL örneğinize bağlanmak için kullanılır.

Proxy'yi indirin:

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

Proxy'yi yürütülebilir hale getirin.

chmod +x cloud_sql_proxy

Cloud SQL örneği oluşturma

MySQL için Cloud SQL İkinci Nesil örneği oluşturun. "polls-instance" veya ada benzer bir ifade girin. Örneğin hazır olması birkaç dakika sürebilir. Hazır olduğunda örnek listesinde görünecektir.
Şimdi gcloud komut satırı aracını kullanarak aşağıdaki komutu çalıştırın. Burada [YOUR_INSTANCE_NAME], Cloud SQL örneğinizin adını temsil eder. Sonraki adım için connectionName için gösterilen değeri not edin. [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] biçiminde gösterilir.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Alternatif olarak Örnek bağlantı adını almak için konsolda örneği tıklayabilirsiniz.

Cloud SQL örneğinizi ilk kullanıma hazırlama

Önceki bölümde verilen connectionName değerini kullanarak Cloud SQL Proxy'yi başlatın.

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

[YOUR_INSTANCE_CONNECTION_NAME] değerini, önceki bölümde kaydettiğiniz değerle değiştirin. Bu bağlantı, yerel bilgisayarınızdan Cloud SQL örneğinize yerel test amacıyla bağlantı oluşturur. Uygulamanızı yerel olarak test ettiğiniz süre boyunca Cloud SQL Proxy'yi çalışır durumda tutun.

Şimdi, yeni bir Cloud SQL kullanıcısı ve veritabanı oluşturun.

polls-instance adlı Cloud SQL örneğiniz için Google Cloud Console'u kullanarak yeni bir veritabanı oluşturun. Örneğin, "anketler" girin. .
polls-instance adlı Cloud SQL örneğiniz için Cloud Console'u kullanarak yeni bir kullanıcı oluşturun.

Veritabanı ayarlarını yapılandırma

Düzenlemek için mysite/settings-changeme.py uygulamasını açın.
Dosyanın adını setting.py olarak değiştirin.
İki yerde, [YOUR-USERNAME] ve [YOUR-PASSWORD] değerlerini önceki bölümde oluşturduğunuz veritabanı kullanıcı adı ve şifresiyle değiştirin. Bu işlem, App Engine dağıtımı ve yerel test işlemleri için veritabanıyla bağlantı kurulmasına yardımcı olur.
‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]. satırda [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] kısmını önceki bölümde aldığınız örnek adıyla değiştirin.
Aşağıdaki komutu çalıştırın ve çıkan connectionName değerini sonraki adım için kopyalayın.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

[YOUR-CONNECTION-NAME] değerini önceki adımda kaydettiğiniz değerle değiştirin
[YOUR-DATABASE] değerini önceki bölümde seçtiğiniz adla değiştirin.

# [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]

Kapatıp settings.py kaydedin.

8. Hizmet hesabı oluşturun

Dialogflow'un konsolunda simgesini tıklayın. Genel sekmesinde Google Projesi'ne gidin > Proje Kimliği'ni tıklayın ve Google Cloud'u tıklayarak Cloud Console'u açın.
Gezinme menüsü Takipçisi'ni tıklayın > IAM ve Yönetici > Hizmet hesapları'nı, ardından Dialogflow entegrasyonları'nın yanındaki simgesini, ardından Anahtar oluştur'u tıklayın.

Bilgisayarınıza bir JSON dosyası indirilir. Bu dosya, aşağıdaki kurulum bölümlerinde gerekir.

9. DialogflowDetectIntent uç noktasını uygulamadan çağrılacak şekilde ayarlama

Sohbet klasöründe, key-sample.json yerine kimlik bilgileri JSON dosyanızı girip key.json olarak adlandırın.
Sohbet klasöründeki views.py bölümünde, GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" değerini proje kimliğinizle değiştirin.

10. Cloud Storage paketleri oluşturma

Ön uç statik nesneleri için Cloud Storage paketi oluşturma

Cloud Console'da, gezinme menüsünde gezinin ® simgesini tıklayın > Depolama.

Paket Oluştur'u tıklayın.
Genel olarak benzersiz bir ad girin.

Verilerinizi nerede depolayacağınızı seçin. Bölge'yi ve ihtiyaçlarınıza en uygun konumu seçin.
Varsayılan depolama sınıfı olarak Standart'ı seçin.

İzinleri paket düzeyinde eşit şekilde ayarla (Yalnızca Paket Politikası) seçeneğini belirleyip paketi oluşturmak için Devam'ı tıklayın.

Paket oluşturulduktan sonra Gezinme menüsü ® simgesini tıklayın > Depolama > Tarayıcı'yı tıklayın ve oluşturduğunuz paketi bulun.

İlgili paketin yanındaki simgesini ve Paket izinlerini düzenle'yi tıklayın.

Üye Ekle'yi tıklayın, Yeni üyeler'i tıklayın ve ardından "allUsers"ı girin. ardından Rol seçin'i tıklayın > Storage Nesne Görüntüleyici. Bu, statik ön uç dosyalarına allUsers'a görüntüleme erişimi sağlar. Bu, dosyalar için ideal bir güvenlik ayarı değildir ancak bu codelab'in amacına uygun olarak çalışır.

Kullanıcı tarafından yüklenen görüntüler için Cloud Storage paketi oluşturma

Kullanıcı resimlerini yüklemek amacıyla ayrı bir paket oluşturmak için aynı talimatları uygulayın. İzinleri "allUsers" olarak ayarlayın tekrar değil, ancak rol olarak Storage Nesne Oluşturucu ve Depolama Alanı Nesne Görüntüleyici'yi seçin.

11. Ön uç uygulamasında Cloud Storage paketlerini yapılandırma

Cloud Storage paketini ayarlar.py'de yapılandırın

mysite/setting.py adlı kişiyi aç.
GCS_BUCKET değişkenini bulun ve ‘<YOUR-GCS-BUCKET-NAME>" değişkenini değiştirin. Cloud Storage statik paketinizle test edin.
GS_MEDIA_BUCKET_NAME değişkenini bulun ve ‘<YOUR-GCS-BUCKET-NAME-MEDIA>' değişkenini değiştirin. Cloud Storage paketinizin adını yazın.
GS_STATIC_BUCKET_NAME değişkenini bulun ve ‘<YOUR-GCS-BUCKET-NAME-STATIC>" değişkenini değiştirin. Cloud Storage paket adınızla değiştirin.
Dosyayı kaydedin.

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

home.html'de Cloud Storage paketini yapılandırma

Sohbet klasörünü, ardından templates uygulamasını açın ve home-changeme.html adlı dosyanın adını home.html olarak değiştirin.
<YOUR-GCS-BUCKET-NAME-MEDIA> ifadesini bulun ve kullanıcı tarafından yüklenen dosyanın kaydedilmesini istediğiniz yere paket adınızla değiştirin. Bu, kullanıcı tarafından yüklenen dosyayı ön uçta depolamanızı ve statik öğeleri Cloud Storage paketinde tutmanızı engeller. Vision API, dosyayı almak ve tahminde bulunmak için Cloud Storage paketini çağırır.

12. Uygulamayı yerel olarak derleyip çalıştırın

Django uygulamasını yerel bilgisayarınızda çalıştırmak için Python, pip ve virtualenv gibi bir Python geliştirme ortamı kurmanız gerekir. Talimatlar için Python Geliştirme Ortamı Oluşturma bölümüne bakın.

Yalıtılmış bir Python ortamı oluşturun ve bağımlılıkları yükleyin.

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

Modellerinizi ayarlamak için Django taşıma işlemlerini çalıştırın.

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

Yerel bir web sunucusu başlatın.

python3 manage.py runserver

Web tarayıcınızda http://localhost:8000/ adresine gidin. Şuna benzer basit bir web sayfası görmeniz gerekir:

Örnek uygulama sayfaları, bilgisayarınızda çalışan Django web sunucusu tarafından yayınlanır. Devam etmeye hazır olduğunuzda, yerel web sunucusunu durdurmak için Control+C (Macintosh'ta Command+C) düğmesine basın.

Django yönetici konsolunu kullanma

Süper kullanıcı oluşturun.

python3 manage.py createsuperuser

Yerel bir web sunucusu başlatın.

python3 manage.py runserver

Web tarayıcınızda http://localhost:8000/admin/ adresine gidin. Yönetici sitesine giriş yapmak için createsuperuser uygulamasını çalıştırırken oluşturduğunuz kullanıcı adını ve şifreyi girin.

13. Uygulamayı App Engine standart ortamına dağıtma

Aşağıdaki komutu çalıştırarak tüm statik içeriği tek bir klasörde toplayın. Bu komut, uygulamanın tüm statik dosyalarını settings.py içinde STATIC_ROOT tarafından belirtilen klasöre taşır:

python3 manage.py collectstatic

app.yaml dosyasının bulunduğu uygulamanın dizininden aşağıdaki komutu çalıştırarak uygulamayı yükleyin:

gcloud app deploy

Güncellemenin tamamlandığını bildiren mesajı bekleyin.

14. Ön uç uygulamasını test etme

Web tarayıcınızda https://<proje_kimliğiniz>.appspot.com adresine gidin.

Bu kez isteğiniz, App Engine standart ortamında çalışan bir web sunucusu tarafından sunulur.

app deploy komutu, uygulamayı app.yaml bölümünde açıklandığı gibi dağıtır ve yeni dağıtılan sürümü varsayılan sürüm olarak ayarlayarak uygulamanın tüm yeni trafiği sunmasını sağlar.

15. Üretim

İçeriğinizi üretimde sunmaya hazır olduğunuzda mysite/settings.py öğesindeki DEBUG değişkenini False olarak değiştirin.

16. Chatbot'unuzu test edin

Simülatörde chatbot'unuzu test edebilir veya daha önce oluşturduğunuz web ya da Google Home entegrasyonunu kullanabilirsiniz.

Kullanıcı: "hi"
Chatbot: "Merhaba. Önemli noktaları keşfetmek için bir resim yükleyebilirsiniz."
Kullanıcı bir resim yükler.

Bu resmi indirin, demo.jpg olarak adlandırın ve kullanın.

Chatbot: "Dosya işleniyor, sonuçlar şöyle: Boğaziçi Köprüsü,Altın Kapı Ulusal Dinlenme Alanı,Altın Kapı Köprüsü,Altın Kapı Köprüsü,Altın Kapı Köprüsü."

Genel olarak aşağıdaki gibi görünmelidir:

17. Temizleme

Diğer Dialogflow codelab'lerini tamamlamak istiyorsanız bu bölümü atlayıp daha sonra geri dönün.

Dialogflow aracısını silme

Mevcut temsilcinizin yanındaki simgesini tıklayın.

Genel sekmesinde aşağı doğru ilerleyin ve Bu Aracıyı Sil'i tıklayın.
Açılan pencereye Delete yazın ve Sil'i tıklayın.

18. Tebrikler

Dialogflow'da bir chatbot oluşturdunuz ve bunu Vision API ile entegre ettiniz. Artık bir chatbot geliştiricisisiniz!

Daha fazla bilgi

Daha fazla bilgi için Dialogflow GitHub sayfasındaki kod örneklerine göz atın.