Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

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

Vision API ile Dialogflow'u entegre etme

Bu codelab'de, kullanıcı tarafından sağlanan resim girişlerine zengin ve dinamik makine öğrenimi tabanlı 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ınan bir önemli noktayı kullanıcıya döndüren bir chatbot uygulaması oluşturursunuz. Örneğin, kullanıcı Tac Mahal'in bir resmini yüklerse chatbot yanıt olarak Tac Mahal'i döndürür.

Resimdeki öğelerin analizini yapıp elde edilen bilgilerle ilgili işlem yapabileceğiniz için bu yararlıdır. Ayrıca, kullanıcıların makbuz yüklemesine yardımcı olmak, makbuzdaki satın alma tarihini ayıklamak ve uygun durumlarda geri ödemeyi işleme almak için geri ödeme işleme sistemi 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'in bulunduğu 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. Bunları Dialogflow ile chatbot oluşturma yolundaki şu videolardan derleyebilirsiniz:

Neler öğreneceksiniz?

Dialogflow aracısı oluşturma
Dosya yüklemek için Dialogflow aracısı güncelleme
Dialogflow istek karşılama özelliği ile Vision API bağlantısı kurma
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 kullanıcı arabiriminden test etme

Derlemeniz istenen nedir?

Dialogflow aracısı oluşturma
Dosya yüklemek için Django ön ucu uygulama
Yüklenen resme karşı Vision API'yi çağırmak için Dialogflow istek karşılamayı uygulayın

Gerekenler

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

Özel bir Django ön ucuyla yeni bir görüşme deneyimi oluşturur ve Vision API ile entegre olacak şekilde genişletirsiniz. Django çerçevesiyle ön uç oluşturur, yerel olarak çalıştırıp test eder, ardından App Engine'e dağıtırsı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şleştirmek için Dialogflow algılayıcı intent API'sine bir çağrı tetikler.
Önemli nokta keşfetme amacı algılandığında Dialogflow karşılama, Vision API'ye istek gönderir, yanıt alır ve kullanıcıya gönderir.

Genel mimarinin nasıl görüneceği aşağıda açıklanmıştır.

Vision API, görüntülerden analizler elde eden ve önceden eğitilmiş bir makine öğrenimi modelidir. Resim etiketleme, yüz ve önemli nokta algılama, optik karakter tanıma ve uygunsuz içerik etiketleme gibi birden çok analiz sağlayabilirsiniz. Daha fazla bilgi için Vision AI başlıklı makaleyi inceleyin.

Dialogflow konsoluna gidin.
Oturum açın. (İlk kez kullanıcıysanız kaydolmak için e-postanızı kullanın.)
Şartlar ve koşulları kabul ettiğinizde konsolda yer alırsınız.
simgesini tıklayın, alta ilerleyin ve Yeni aracı oluştur'u tıklayın.

5. Agent name olarak "VisionAPI" yazın.

Oluştur'u tıklayın.

Dialogflow, temsilcinin 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 amacı, botunuzun anlamadığı tüm soruları yakalar.

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

Kullanıcıya resim yüklemesi konusunda bilgi vermek için varsayılan karşılama amacını güncelleyin

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

Varlık oluştur

Varlıklar'ı tıklayın.

Varlık Oluştur'u, "dosya adı"nı adlandırıp Kaydet'i tıklayın.

Yeni amaç oluşturun

Niyetler> Amaç Oluştur'u tıklayın.
Niyet adı olarak "Yüklenen resmi keşfedin" yazın.
Eğitim ifadeleri > Eğitim İfadeleri Ekle'yi tıklayın ve &"dosya" demo.jpg&&;; dosyası "taj.jpeg" olup varlık olarak @dosyaadı şeklinde kullanın.

Yanıtlar > Yanıt Ekle > Varsayılan > Metin veya SSML Yanıtı'nı tıklayın. "Değerlendirme dosyasını" girip Yanıt Ekle'yi tıklayın.

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

İstek karşılama'yı tıklayın.
Satır içi düzenleyiciyi etkinleştirin.

index.js kodunu aşağıdaki kodla 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 [];
    }
}

İçeriğini değiştirmek için aşağıdakileri package.json etiketine 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 dizinde değişiklik yapın. Alternatif olarak, örneği bir ZIP dosyası olarak indirip ayıklayabilirsiniz.

cd visionapi-dialogflow

Uygulamanız dağıtıldığında, Cloud SQL örneğinizle iletişim kurmak için App Engine standart ortamında yerleşik olan Cloud SQL Proxy'yi kullanır. Bununla birlikte, uygulamanızı yerel olarak test etmek için geliştirme ortamınızda Cloud SQL Proxy'in 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ükleme

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 benzeri bir ad girin. Örneğin hazır hale gelmesi birkaç dakika sürebilir. Hazır olduktan sonra örnek listesinde görünür olması gerekir.
Şimdi, Cloud SQL örneğinizin adını temsil eden [YOUR_INSTANCE_NAME] komutunu çalıştırmak için gcloud komut satırı aracını kullanın. Sonraki adımda connectionName için gösterilen değeri not edin. [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] biçiminde görüntülenir.

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ümde verilen connectionName komutunu 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, yerel test amacıyla yerel bilgisayarınızdan Cloud SQL örneğinize bağlantı oluşturur. Uygulamanızı yerel olarak test ettiğiniz süre boyunca Cloud SQL Proxy'yi çalışır durumda tutun.

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 "anket" yazabilirsiniz.
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.
Dosyayı setting.py olarak yeniden adlandırın.
İ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, App Engine dağıtımı ve yerel test için veritabanı bağlantısının ayarlanmasına yardımcı olur.
‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]&#39. satırda, önceki bölümde edindiğiniz örnek adınızı [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] ile değiştirin.
Aşağıdaki komutu çalıştırın ve sonraki adım için üretilen connectionName değerini 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] 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 settings.py kaydedin.

Dialogflow'un konsolunda simgesini tıklayın. Genel sekmesinde, Google Projesi > Proje Kimliği'ne gidip Google Cloud'u tıklayarak Cloud Console'u açın.
Gezinme menüsü ☰ > IAM & Yönetici > Hizmet hesapları'nı, ardından Dialogflow entegrasyonları'nın yanındaki simgesini ve 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 gereklidir.

Sohbet klasöründe key-sample.json yerine kimlik bilgisi JSON dosyanızı koyup key.json olarak adlandırın.
Sohbet klasöründeki views.py içinde, GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" yerine proje kimliğinizi yazın.

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

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

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

Verilerinizin nerede depolanacağını seçin. Bölge'yi seçerek 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ı) seçeneğini belirleyin, 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 ardından Paket izinlerini düzenle'yi tıklayın.

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

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

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

Ayarlar.py'de Cloud Storage paketini yapılandırma

mysite/setting.py'yi açın.
GCS_BUCKET değişkenini bulun ve ‘<YOUR-GCS-BUCKET-NAME>' ifadesini Cloud Storage statik paketinizle değiştirin.
GS_MEDIA_BUCKET_NAME değişkenini bulun ve görüntüler için ‘<YOUR-GCS-BUCKET-NAME-MEDIA>' Cloud Storage grup adınızı değiştirin.
GS_STATIC_BUCKET_NAME değişkenini bulun ve ‘<YOUR-GCS-BUCKET-NAME-STATIC>' ifadesini statik dosyalar için Cloud Storage paketi 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ırın

Sohbet klasörünü açın, ardından templates uygulamasını açıp home-changeme.html 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 paket adıyla 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.

Django uygulamasını yerel bilgisayarınızda çalıştırmak için Python, pip ve sanalenv dahil olmak üzere bir Python geliştirme ortamı oluşturmanız gerekir. Talimatlar için Pyth geliştirme Ortamı Oluşturma konusuna bakın.

İzole edilmiş 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örürsünüz:

Ö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) tuşuna 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 komutunu çalıştırdığınızda oluşturduğunuz kullanıcı adını ve şifreyi girin.

Aşağıdaki statik komutu çalıştırarak tüm statik içeriği tek bir klasörde toplayın. Bu işlem, 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 uygulama dizininden aşağıdaki komutu çalıştırarak uygulamayı yükleyin:

gcloud app deploy

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

Web tarayıcınızda https://<projeniz_kimliği>.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ığı şekilde dağıtır ve yeni dağıtılan sürümü varsayılan sürüm olarak ayarlar ve tüm yeni trafiği sunmasına neden olur.

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

Chatbot'unuzu simülasyon aracında test edebilir veya daha önce oluşturduğunuz web veya Google Home entegrasyonunu kullanabilirsiniz.

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

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

Chatbot: &;

Genel olarak şöyle görünmelidir:

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

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.
Görüntülenen pencereye Sil'i yazın ve Sil'i tıklayın.

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 edinmek için Dialogflow Github sayfasındaki kod örneklerine göz atın.