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

Vision API'yi Dialogflow ile entegre etme

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

Bu özellik, resimdeki öğeleri analiz edip elde ettiğiniz bilgilerle ilgili işlem yapabilmenizi sağladığı için kullanışlıdır. Ayrıca, kullanıcıların makbuz yüklemesine, makbuzdaki satın alma tarihini çıkarmasına ve tarih uygunsa geri ödemeyi işlemesine yardımcı olacak 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 yerleri keşfetmek için resim yükleyebilirsiniz.

Kullanıcı: Tac Mahal'in yer aldığı bir resim yükle.

Chatbot: Dosya işleniyor. Sonuçlar: 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 ile chatbot oluşturma rotasındaki aşağıdaki videolardan edinebileceğiniz Dialogflow'un temel kavramlarını ve yapılarını da anlamanız gerekir:

Neler öğreneceksiniz?

Dialogflow aracısı oluşturma
Dosya yüklemek için Dialogflow aracısını güncelleme
Vision API bağlantısını Dialogflow fulfillment ile ayarlama
Dialogflow için Django ön uç uygulaması oluşturma 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

Ne oluşturacaksınız?

Dialogflow aracısı oluşturma
Dosya yüklemek için Django ön ucu uygulama
Yüklenen resim için Vision API'yi çağırmak üzere Dialogflow fulfillment'ı uygulama

İhtiyacınız olanlar

Python hakkında temel düzeyde bilgi
Dialogflow ile ilgili temel bilgiler
Vision API hakkında temel düzeyde bilgi sahibi olmanız

Özel bir Django ön ucuyla yeni bir yapay zeka destekli kampanya oluşturma deneyimi oluşturacak ve bunu Vision API ile entegre olacak şekilde genişleteceksiniz. Ön ucu Django çerçevesiyle oluşturacak, yerel olarak çalıştırıp test edecek ve ardından 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ışır:

Kullanıcı, ön uç üzerinden bir istek gönderir.
Bu işlem, kullanıcının ifadesini doğru niyetle eşlemek için Dialogflow detectIntent API'ye yapılan bir çağrıyı tetikler.
Keşfedilecek yer işareti amacı algılandığında Dialogflow karşılaması, Vision API'ye bir istek gönderir, yanıt alır ve bu yanıtı kullanıcıya gönderir.

Genel mimari aşağıdaki gibi görünür.

Vision API, görüntülerden analiz 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çeriği etiketleme gibi birçok analiz elde edebilirsiniz. Daha fazla bilgi için Vision AI sayfasına göz atın.

Dialogflow konsoluna gidin.
Oturum açın. (İlk kez kullanıyorsanız kaydolmak için e-postanızı kullanın.)
Hükümler ve koşulları kabul ettiğinizde konsola yönlendirilirsiniz.
simgesini tıklayın, en alta gidin ve Yeni temsilci oluştur'u tıklayın.

5. Temsilci adı olarak "VisionAPI" girin.

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 niyeti, kullanıcılarınızı karşılar.
Varsayılan yedek amaç, botunuzun anlamadığı tüm soruları yakalar.

Bu noktada, kullanıcıları karşılayan işlevsel bir botunuz var ancak kullanıcıların önemli yerleri keşfetmek için resim yükleyebileceğini bildirmek üzere botu güncellemeniz gerekiyor.

Kullanıcıya resim yüklemesini bildirmek için varsayılan karşılama amacını güncelleme

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

Varlık oluştur

Öğeler'i tıklayın.

Varlık Oluştur'u tıklayın, "filename" adını verin ve Kaydet'i tıklayın.

Yeni amaç oluşturma

Niyetler > Niyet Oluştur'u tıklayın.
Amaç adı olarak "Explore uploaded image" (Yüklenen resmi keşfet) değerini girin.
Eğitim ifadeleri > Eğitim İfadesi Ekle'yi tıklayın ve "dosya demo.jpg" ile "dosya taj.jpeg" ifadelerini @filename varlığıyla birlikte kullanıcı ifadesi olarak girin.

Yanıtlar > Yanıt Ekle > Varsayılan > Metin veya SSML Yanıtı'nı tıklayın. "Dosya değerlendiriliyor" yazıp Yanıt Ekle'yi tıklayın.

İstek karşılama > İstek karşılamayı etkinleştir'i tıklayın ve Bu niyet için webhook çağrısını etkinleştir'i açın.

Fulfillment'ı tıklayın.
Satır İçi Düzenleyici'yi etkinleştirin.

index.js kısmını aşağıdaki kodla, YOUR-BUCKET-NAME kısmını ise 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 [];
    }
}

İçeriğini değiştirmek için aşağıdakileri 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.

Bu kod deposunu yerel makinenize klonlayın:

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

Kodu içeren dizine geçiş yapın. Alternatif olarak, örneği zip dosyası olarak indirip çıkarabilirsiniz.

cd visionapi-dialogflow

Uygulamanız dağıtıldığında Cloud SQL örneğinizle iletişim kurmak için App Engine standart ortamına yerleştirilmiş Cloud SQL Proxy'yi kullanır. Ancak uygulamanızı yerel olarak test etmek için geliştirme ortamınıza Cloud SQL Proxy'nin yerel bir kopyasını yükleyip 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 için 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ıştırıldığında 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. Ad olarak "polls-instance" veya benzer bir ifade girin. Örneğin hazır olması birkaç dakika sürebilir. Hazır olduğunda örnek listesinde görünür.
Ş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'da 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 konsoldaki örneği tıklayabilirsiniz.

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

Önceki bölümdeki connectionName komutunu kullanarak Cloud SQL Proxy'yi başlatın.

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

[YOUR_INSTANCE_CONNECTION_NAME] öğesini, önceki bölümde kaydettiğiniz değerle değiştirin. Bu, yerel test amacıyla yerel bilgisayarınızdan Cloud SQL örneğinize bir bağlantı oluşturur. Uygulamanızı yerel olarak test ettiğiniz süre boyunca Cloud SQL Proxy'nin çalışmaya devam etmesini sağlayın.

Ardından, yeni bir Cloud SQL kullanıcısı ve veritabanı oluşturun.

Google Cloud Console'u kullanarak polls-instance adlı Cloud SQL örneğiniz için yeni bir veritabanı oluşturun. Örneğin, ad olarak "anketler" girebilirsiniz.
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 simgesini açın.
Dosyayı setting.py olarak yeniden adlandırın.
İki yerde [YOUR-USERNAME] ve [YOUR-PASSWORD] kısımlarını, önceki bölümde oluşturduğunuz veritabanı kullanıcı adı ve şifresiyle değiştirin. Bu, App Engine dağıtımı ve yerel test için veritabanı bağlantısının kurulmasına yardımcı olur.
‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] satırında [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] yerine önceki bölümde aldığınız örnek adını girin.
Aşağıdaki komutu çalıştırın ve bir sonraki adım için çıkış değeri olan connectionName değerini kopyalayın.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

[YOUR-CONNECTION-NAME] yerine önceki adımda kaydettiğiniz değeri girin.
[YOUR-DATABASE] yerine önceki bölümde seçtiğiniz adı girin.

# [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 kaydedin settings.py.

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

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

Sohbet klasöründe, key-sample.json yerine kimlik bilgileri JSON dosyanızı koyun ve dosyaya key.json adını verin.
Sohbet klasöründeki views.py içinde GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" kısmını proje kimliğinizle değiştirin.

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

Cloud Console'da, Gezinme menüsü ☰ > Depolama'yı tıklayın.

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

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

İzinleri paket düzeyinde eşit şekilde ayarlayın (Yalnızca Paket Politikası)'yı seçin, ardından paketi oluşturmak için Devam'ı tıklayın.

Paket oluşturulduktan sonra Gezinme menüsü ☰ > 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, "allUsers" yazın, ardından Bir rol seçin > Storage Nesne Görüntüleyici'yi tıklayın. Bu, statik ön uç dosyalarına allUsers için görüntüleme erişimi sağlar. Bu, dosyalar için ideal bir güvenlik ayarı olmasa da bu belirli codelab'in amacı için uygundur.

Kullanıcı tarafından yüklenen resimler için Cloud Storage paketi oluşturma

Kullanıcı resimlerini yüklemek için ayrı bir paket oluşturmak üzere aynı talimatları uygulayın. İzinleri tekrar "allUsers" olarak ayarlayın ancak roller olarak Storage Nesne Oluşturucu ve Storage Nesne Görüntüleyici'yi seçin.

settings.py dosyasında Cloud Storage paketini yapılandırın.

mysite/setting.py adlı kişiyi aç.
GCS_BUCKET değişkenini bulun ve ‘<YOUR-GCS-BUCKET-NAME>' kısmını Cloud Storage statik paketinizle değiştirin.
GS_MEDIA_BUCKET_NAME değişkenini bulun ve ‘<YOUR-GCS-BUCKET-NAME-MEDIA>' kısmını resimler için Cloud Storage paketinizin adıyla değiştirin.
GS_STATIC_BUCKET_NAME değişkenini bulun ve ‘<YOUR-GCS-BUCKET-NAME-STATIC>' kısmını statik dosyalar için Cloud Storage paketinizin adıyla 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>'

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

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

Django uygulamasını yerel bilgisayarınızda çalıştırmak için Python, pip ve virtualenv dahil olmak üzere bir Python geliştirme ortamı ayarlamanız gerekir. Talimatlar için Setting Up a Python Development Environment (Python Geliştirme Ortamı Kurma) başlıklı makaleyi inceleyin.

İzole 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. Aşağıdaki gibi basit bir web sayfası görmeniz gerekir:.

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

Django Yönetici Konsolu'nu kullanma

Süper kullanıcı oluşturma

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 komutunu çalıştırırken oluşturduğunuz kullanıcı adını ve şifreyi girin.

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 ile 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.

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

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

app deploy komutu, uygulamayı app.yaml bölümünde açıklandığı şekilde dağıtır ve yeni dağıtılan sürümü varsayılan sürüm olarak ayarlar. Bu nedenle, tüm yeni trafik bu sürüm üzerinden sunulur.

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

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

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

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

Chatbot: "Dosya işleniyor, sonuçlar: Golden Gate Köprüsü,Golden Gate National Recreation Area,Golden Gate Köprüsü,Golden Gate Köprüsü,Golden Gate Köprüsü."

Genel olarak şu şekilde görünmelidir:

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

Dialogflow aracısını silme

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

Genel sekmesinde aşağı kaydırıp Bu Aracıyı Sil'i tıklayın.
Açılan pencereye Sil yazıp Sil'i tıklayın.

Dialogflow'da bir chatbot oluşturup Vision API ile entegre ettiniz. Artık bir chatbot geliştiricisiniz.

Daha fazla bilgi

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